<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legal Chat Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-center mb-8">Legal Chat Demo</h1>
<!-- Tab Buttons -->
<div class="flex gap-4 mb-8 justify-center" id="tabs">
<button data-role="user" class="px-6 py-2 rounded-lg font-medium bg-blue-500 text-white">User Flow</button>
<button data-role="ngo" class="px-6 py-2 rounded-lg font-medium bg-white hover:bg-gray-50">NGO Worker Flow</button>
<button data-role="advocate" class="px-6 py-2 rounded-lg font-medium bg-white hover:bg-gray-50">Advocate Flow</button>
</div>
<!-- Chat Interface -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h2 id="flowTitle" class="text-2xl font-bold mb-2">User Flow</h2>
<p id="flowDescription" class="text-gray-600 mb-4">Ask legal questions and get assistance</p>
<div id="chatMessages" class="bg-gray-50 rounded-lg p-4 h-96 overflow-y-auto mb-4">
<!-- Messages will be inserted here -->
</div>
<div class="flex gap-2">
<input
type="text"
id="messageInput"
placeholder="Type your message..."
class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
id="sendButton"
class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Send
</button>
</div>
</div>
</div>
</div>
<script>
// Flow configurations
const flows = {
user: {
title: 'User Flow',
description: 'Ask legal questions and get assistance'
},
ngo: {
title: 'NGO Worker Flow',
description: 'Manage cases and coordinate with advocates'
},
advocate: {
title: 'Advocate Flow',
description: 'Review and handle legal cases'
}
};
// Current active role
let currentRole = 'user';
// DOM Elements
const tabButtons = document.querySelectorAll('#tabs button');
const flowTitle = document.getElementById('flowTitle');
const flowDescription = document.getElementById('flowDescription');
const chatMessages = document.getElementById('chatMessages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
// Update UI based on selected role
function updateUI(role) {
currentRole = role;
flowTitle.textContent = flows[role].title;
flowDescription.textContent = flows[role].description;
// Update tab buttons
tabButtons.forEach(button => {
if (button.dataset.role === role) {
button.classList.remove('bg-white', 'hover:bg-gray-50');
button.classList.add('bg-blue-500', 'text-white');
} else {
button.classList.remove('bg-blue-500', 'text-white');
button.classList.add('bg-white', 'hover:bg-gray-50');
}
});
}
// Add message to chat
function addMessage(text, isUser = true) {
const messageDiv = document.createElement('div');
messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`;
const innerDiv = document.createElement('div');
innerDiv.className = `rounded-lg px-4 py-2 max-w-md ${
isUser ? 'bg-blue-500 text-white' : 'bg-white'
}`;
const textP = document.createElement('p');
textP.textContent = text;
const timeP = document.createElement('p');
timeP.className = 'text-xs mt-1 opacity-75';
timeP.textContent = new Date().toLocaleTimeString();
innerDiv.appendChild(textP);
innerDiv.appendChild(timeP);
messageDiv.appendChild(innerDiv);
chatMessages.appendChild(messageDiv);
// Scroll to bottom
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Send message
async function sendMessage() {
const text = messageInput.value.trim();
if (!text) return;
// Add user message
addMessage(text, true);
messageInput.value = '';
try {
const response = await fetch('http://localhost:3001/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text, role: currentRole })
});
const data = await response.json();
addMessage(data.text, false);
} catch (error) {
console.error('Error:', error);
addMessage('Sorry, there was an error processing your request.', false);
}
}
// Event Listeners
tabButtons.forEach(button => {
button.addEventListener('click', () => updateUI(button.dataset.role));
});
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
</script>
</body>
</html>