<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>srinivasanramanujam.sbs - AI Assistant</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 900px;
height: 90vh;
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Header */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header h1 {
font-size: 24px;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.header p {
font-size: 14px;
opacity: 0.9;
}
.status-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.3);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
margin-left: 8px;
}
/* Chat Messages */
.chat-container {
flex: 1;
overflow-y: auto;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
background: #f9fafb;
}
.message {
display: flex;
gap: 12px;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message.user {
justify-content: flex-end;
}
.message.assistant {
justify-content: flex-start;
}
.message-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.user .message-avatar {
background: #667eea;
color: white;
}
.assistant .message-avatar {
background: #e5e7eb;
color: #667eea;
}
.message-content {
max-width: 70%;
padding: 12px 16px;
border-radius: 12px;
line-height: 1.5;
word-wrap: break-word;
}
.user .message-content {
background: #667eea;
color: white;
}
.assistant .message-content {
background: white;
color: #1f2937;
border: 1px solid #e5e7eb;
}
.message-meta {
font-size: 12px;
margin-top: 4px;
opacity: 0.7;
}
.tool-badge {
display: inline-block;
background: #dbeafe;
color: #0369a1;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
margin-top: 4px;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #9ca3af;
text-align: center;
}
.empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
}
/* Input Area */
.input-area {
padding: 20px 24px;
background: white;
border-top: 1px solid #e5e7eb;
}
.input-wrapper {
display: flex;
gap: 12px;
align-items: flex-end;
}
input[type="text"] {
flex: 1;
padding: 12px 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
resize: none;
max-height: 100px;
}
input[type="text"]:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
button {
padding: 12px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
flex-shrink: 0;
}
button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}
button:active:not(:disabled) {
transform: translateY(0);
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.loading {
display: flex;
align-items: center;
gap: 8px;
color: #667eea;
}
.loader {
width: 16px;
height: 16px;
border: 2px solid #e5e7eb;
border-top-color: #667eea;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Responsive */
@media (max-width: 768px) {
.message-content {
max-width: 90%;
}
.container {
height: 100vh;
border-radius: 0;
}
.header h1 {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<h1>
🤖 srinivasanramanujam.sbs
<span class="status-badge">Live</span>
</h1>
<p>Professional AI Assistant - Powered by MCP & RAG</p>
</div>
<!-- Chat Messages -->
<div class="chat-container" id="chatContainer">
<div class="empty-state">
<div class="empty-state-icon">💬</div>
<h2>Welcome!</h2>
<p>I'm your AI assistant for srinivasanramanujam.sbs</p>
<p style="font-size: 14px; margin-top: 12px; opacity: 0.6;">Ask me about the website, recent updates, or anything else!</p>
</div>
</div>
<!-- Input Area -->
<div class="input-area">
<div class="input-wrapper">
<input
type="text"
id="messageInput"
placeholder="Type your message..."
autocomplete="off"
>
<button id="sendBtn" onclick="sendMessage()">Send</button>
</div>
</div>
</div>
<script>
const chatContainer = document.getElementById('chatContainer');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
let conversationHistory = [];
// Clear empty state
function clearEmptyState() {
const emptyState = chatContainer.querySelector('.empty-state');
if (emptyState) {
emptyState.remove();
}
}
// Add message to UI
function addMessage(text, isUser, meta = null) {
clearEmptyState();
const messageEl = document.createElement('div');
messageEl.className = `message ${isUser ? 'user' : 'assistant'}`;
const avatar = document.createElement('div');
avatar.className = 'message-avatar';
avatar.textContent = isUser ? '👤' : '🤖';
const content = document.createElement('div');
const contentDiv = document.createElement('div');
contentDiv.className = 'message-content';
contentDiv.textContent = text;
content.appendChild(contentDiv);
if (meta) {
const metaDiv = document.createElement('div');
metaDiv.className = 'message-meta';
if (meta.toolsUsed && meta.toolsUsed.length > 0) {
const toolBadge = document.createElement('div');
toolBadge.className = 'tool-badge';
toolBadge.textContent = `📡 ${meta.toolsUsed.join(', ')}`;
content.appendChild(toolBadge);
}
metaDiv.textContent = `${new Date(meta.timestamp).toLocaleTimeString()}`;
content.appendChild(metaDiv);
}
messageEl.appendChild(avatar);
messageEl.appendChild(content);
chatContainer.appendChild(messageEl);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// Send message
async function sendMessage() {
const message = messageInput.value.trim();
if (!message) return;
// Add user message
addMessage(message, true);
messageInput.value = '';
sendBtn.disabled = true;
// Show loading state
const loadingEl = document.createElement('div');
loadingEl.className = 'message assistant';
loadingEl.innerHTML = `
<div class="message-avatar">🤖</div>
<div class="message-content">
<div class="loading">
<div class="loader"></div>
Thinking...
</div>
</div>
`;
chatContainer.appendChild(loadingEl);
chatContainer.scrollTop = chatContainer.scrollHeight;
try {
const response = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message,
conversationHistory
})
});
const data = await response.json();
loadingEl.remove();
if (data.success) {
addMessage(data.message, false, data.context);
conversationHistory.push(
{ role: 'user', content: message },
{ role: 'assistant', content: data.message }
);
} else {
addMessage('Sorry, I encountered an error. Please try again.', false);
}
} catch (error) {
loadingEl.remove();
addMessage('Network error. Please check your connection and try again.', false);
} finally {
sendBtn.disabled = false;
messageInput.focus();
}
}
// Enter key to send
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// Focus input on load
messageInput.focus();
</script>
</body>
</html>
