updating frontend

css/styles.css

@@ -0,0 +1,387 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('./variables.css');
+
+/* Reset & Base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-primary);
+    font-size: var(--font-size-base);
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    line-height: 1.6;
+    overflow: hidden; /* Prevent scroll on mobile */
+}
+
+/* Chat Container */
+.chat-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: var(--color-surface);
+    box-shadow: var(--shadow-lg);
+}
+
+/* Header */
+.chat-header {
+    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    color: white;
+    padding: var(--spacing-md) var(--spacing-lg);
+    text-align: center;
+    box-shadow: var(--shadow-sm);
+}
+
+.chat-header h1 {
+    font-weight: 600;
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-xs);
+}
+
+.chat-header p {
+    font-size: var(--font-size-sm);
+    opacity: 0.9;
+}
+
+
+/* message indentation of the Agent Output */
+/* Ensure the list markers actually show up */
+.message-content ul {
+    list-style-type: disc !important; /* Forces bullet points */
+    margin: 10px 0 10px 20px;
+    padding-left: 10px;
+}
+
+.message-content ol {
+    list-style-type: decimal !important; /* Forces numbers */
+    margin: 10px 0 10px 20px;
+    padding-left: 10px;
+}
+
+.message-content li {
+    margin-bottom: 5px;
+    display: list-item; /* Ensures it behaves like a list line */
+}
+
+/* Headers styling */
+.message-content h3 {
+    margin-top: 15px;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+
+
+
+/* Messages Area */
+.messages-area {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-lg);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    
+    /* Custom Scrollbar */
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+}
+
+.messages-area::-webkit-scrollbar {
+    width: 8px;
+}
+
+.messages-area::-webkit-scrollbar-track {
+    background: var(--color-bg);
+}
+
+.messages-area::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: var(--radius-sm);
+}
+
+/* Message Bubbles */
+.message {
+    max-width: 75%;
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius-lg);
+    animation: fadeIn 0.3s ease-out;
+    word-wrap: break-word;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message.user {
+    align-self: flex-end;
+    background: var(--color-user-msg);
+    border-bottom-right-radius: var(--radius-sm);
+}
+
+.message.bot {
+    align-self: flex-start;
+    background: var(--color-bot-msg);
+    border-bottom-left-radius: var(--radius-sm);
+}
+
+.message-content {
+    margin-bottom: var(--spacing-xs);
+}
+
+.message-timestamp {
+    font-size: 11px;
+    color: var(--color-text-light);
+    text-align: right;
+}
+
+/* Loading Indicator */
+.loading {
+    display: none; /* Hidden by default */
+    align-self: flex-start;
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--color-accent);
+    border-radius: var(--radius-md);
+    font-style: italic;
+    color: var(--color-text-light);
+}
+
+.loading.active {
+    display: block;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+}
+
+/* Input Area */
+.input-area {
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-top: 2px solid var(--color-border);
+    background: var(--color-surface);
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+}
+
+#messageInput {
+    flex: 1;
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    font-size: var(--font-size-base);
+    outline: none;
+    transition: all 0.3s ease;
+    background: var(--color-bg);
+}
+
+#messageInput:focus {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
+}
+
+#messageInput:disabled {
+    background: var(--color-border);
+    cursor: not-allowed;
+}
+
+.send-button {
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-sm);
+}
+
+.send-button:hover {
+    background: #FF5252; /* Darker coral */
+    transform: scale(1.05);
+    box-shadow: var(--shadow-md);
+}
+
+.send-button:active {
+    transform: scale(0.95);
+}
+
+.send-button:disabled {
+    background: var(--color-text-light);
+    cursor: not-allowed;
+    transform: none;
+}
+
+.send-icon {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+}
+
+/* Error Banner */
+.error-banner {
+    display: none;
+    background: var(--color-error);
+    color: white;
+    padding: var(--spacing-sm) var(--spacing-md);
+    text-align: center;
+    font-size: var(--font-size-sm);
+    animation: slideDown 0.3s ease-out;
+}
+
+.error-banner.active {
+    display: block;
+}
+
+/* Feedback Container */
+.message-feedback {
+    position: relative;
+    z-index: 10;
+    display: flex;       /* Ensures buttons stay side-by-side */
+    gap: 10px;           /* Adds space between thumbs */
+    margin-top: 10px;    /* Pushes it away from the text */
+    min-height: 24px;    /* Force a minimum height so they don't collapse */
+    opacity: 1;          /* Changed from 0.8 to 1 for testing visibility */
+    visibility: visible;
+    /* opacity: 0.8; */
+    /* transition: opacity 0.2s; */
+}
+
+.message-feedback:hover {
+    opacity: 1;
+}
+
+/* Feedback Buttons */
+.message-feedback button {
+    background: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 2px 8px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.message-feedback button:hover {
+    background-color: #e0e0e0;
+    transform: scale(1.1);
+}
+
+.message-feedback button:active {
+    background-color: #d0d0d0;
+    transform: scale(0.95);
+}
+
+/* Optional: Highlight after click */
+.message-feedback button.clicked {
+    background-color: #FF5252; 
+    color: white;
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+
+
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Connection Status */
+.connection-status {
+    position: absolute;
+    margin-right: 30px;
+    margin-top: 10px;
+    top: var(--spacing-sm);
+    right: var(--spacing-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    font-size: 12px;
+    font-weight: 500;
+    transition: opacity 0.5s ease; 
+    pointer-events: auto;
+    z-index: 100;
+}
+
+.connection-status.connected {
+    background: var(--color-success);
+    color: white;
+}
+
+.connection-status.disconnected {
+    background: var(--color-error);
+    color: white;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+    .chat-container {
+        box-shadow: none;
+    }
+    
+    .chat-header h1 {
+        font-size: 1.2rem;
+    }
+    
+    .messages-area {
+        padding: var(--spacing-md);
+    }
+    
+    .message {
+        max-width: 85%;
+    }
+    
+    .input-area {
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    .send-button {
+        width: 44px;
+        height: 44px;
+    }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Focus indicators for keyboard navigation */
+button:focus,
+#messageInput:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}

css/variables.css

@@ -0,0 +1,39 @@
+:root {
+    /* Warm Professional Palette */
+    --color-primary: #FF6B6B;      /* Coral - energetic but friendly */
+    --color-secondary: #4ECDC4;    /* Teal - calming accent */
+    --color-accent: #FFE66D;       /* Warm Yellow - highlights */
+    --color-bg: #FFF8F5;           /* Cream - soft background */
+    --color-surface: #FFFFFF;      /* White - cards/messages */
+    --color-text: #2D3436;         /* Dark Gray - primary text */
+    --color-text-light: #636E72;   /* Medium Gray - secondary text */
+    --color-border: #FFD3B6;       /* Light Coral - borders */
+    --color-success: #00B894;      /* Green - success states */
+    --color-error: #E17055;        /* Warm Red - errors */
+    --color-user-msg: #FFF0EC;     /* Very Light Coral - user messages */
+    --color-bot-msg: #F1F2F6;      /* Light Gray - bot messages */
+    
+    /* Spacing */
+    --spacing-xs: 0.5rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 1.5rem;
+    --spacing-lg: 2rem;
+    --spacing-xl: 3rem;
+    
+    /* Typography */
+    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-size-base: 16px;
+    --font-size-sm: 14px;
+    --font-size-lg: 18px;
+    
+    /* Shadows */
+    --shadow-sm: 0 2px 4px rgba(255, 107, 107, 0.1);
+    --shadow-md: 0 4px 12px rgba(255, 107, 107, 0.15);
+    --shadow-lg: 0 8px 24px rgba(255, 107, 107, 0.2);
+    
+    /* Border Radius */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+}

js/app.js

@@ -0,0 +1,427 @@
+// Configuration
+const CONFIG = {
+    API_BASE_URL: 'http://localhost:8000',
+    API_ENDPOINT: '/api/v1/chat/sync',
+    MESSAGE_BATCH_SIZE: 10,
+    MAX_MESSAGE_LENGTH: 500,
+    RETRY_ATTEMPTS: 3,
+    TIMEOUT_MS: 600000
+};
+
+// State Management
+const state = {
+    isConnected: false,
+    isLoading: false,
+    sessionId: localStorage.getItem('sessionId') || `user_${Date.now()}`,
+    messages: JSON.parse(localStorage.getItem('chatHistory') || '[]'),
+    lastActivity: Date.now()
+};
+
+// DOM Elements
+const elements = {
+    messagesArea: document.getElementById('messagesArea'),
+    messageInput: document.getElementById('messageInput'),
+    sendButton: document.getElementById('sendButton'),
+    loadingIndicator: document.getElementById('loadingIndicator'),
+    errorBanner: document.getElementById('errorBanner'),
+    connectionStatus: document.getElementById('connectionStatus'),
+    welcomeTimestamp: document.getElementById('welcomeTimestamp')
+};
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    initializeApp();
+});
+
+function initializeApp() {
+    elements.welcomeTimestamp.textContent = formatTimestamp(Date.now());
+    loadChatHistory();
+    setupEventListeners();
+    checkConnection();
+    elements.messageInput.focus();
+    localStorage.setItem('sessionId', state.sessionId);
+}
+
+function setupEventListeners() {
+    // Send button click
+    elements.sendButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        sendMessage();
+    });
+
+    // Input field events
+    elements.messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+
+    elements.messageInput.addEventListener('input', (e) => {
+        const value = e.target.value;
+        if (value.length > CONFIG.MAX_MESSAGE_LENGTH) {
+            showError(`Message too long (max ${CONFIG.MAX_MESSAGE_LENGTH} chars)`);
+            e.target.value = value.slice(0, CONFIG.MAX_MESSAGE_LENGTH);
+        }
+        updateSendButton();
+    });
+
+    // Periodic checks
+    setInterval(checkConnection, 5000);
+    setInterval(() => {
+        if (Date.now() - state.lastActivity > 30 * 60 * 1000) {
+            clearChatHistory();
+        }
+    }, 60000);
+}
+
+async function checkConnection() {
+    try {
+        const response = await fetch(`${CONFIG.API_BASE_URL}/health`);
+        const isConnected = response.ok;
+        updateConnectionStatus(isConnected);
+        state.isConnected = isConnected;
+    } catch (error) {
+        console.error('Connection check failed:', error);
+        updateConnectionStatus(false);
+        state.isConnected = false;
+    }
+}
+
+// 1. variable to track the LAST known state
+let lastStatus = null; 
+let statusTimeout;
+
+function updateConnectionStatus(isConnected) {
+    const status = elements.connectionStatus;
+    
+    // This stops the constant "re-appearing" loop.
+    if (isConnected === lastStatus) return;
+
+    // Update the tracker
+    lastStatus = isConnected;
+
+    // Clear any old timers
+    if (statusTimeout) clearTimeout(statusTimeout);
+
+    if (isConnected) {
+        status.textContent = 'Connected';
+        status.className = 'connection-status connected';
+        status.style.opacity = '1';
+
+        // Hide after 3 seconds and NEVER show again unless we disconnect first
+        statusTimeout = setTimeout(() => {
+            status.style.opacity = '0';
+            status.style.pointerEvents = 'none';
+        }, 3000);
+    } else {
+        // If disconnected, show it and KEEP it visible
+        status.textContent = 'Disconnected';
+        status.className = 'connection-status disconnected';
+        status.style.opacity = '1';
+        status.style.pointerEvents = 'auto';
+    }
+}
+
+
+
+async function sendMessage() {
+    const question = elements.messageInput.value.trim();
+    console.log('Sending message:', question); // Debug log
+
+    if (!question || state.isLoading) {
+        console.log('Message not sent - empty or loading:', {question, isLoading: state.isLoading});
+        return;
+    }
+
+    if (!state.isConnected) {
+        showError('Not connected to server. Please check your connection.');
+        return;
+    }
+
+    hideError();
+    addMessageToUI(question, 'user');
+    elements.messageInput.value = '';
+    updateSendButton();
+    showLoading();
+
+    await callSupportAgent(question);
+}
+
+async function callSupportAgent(question) {
+    const payload = {
+        question: question,
+        session_id: state.sessionId
+    };
+
+    console.log('Sending request to:', `${CONFIG.API_BASE_URL}${CONFIG.API_ENDPOINT}`); // Debug log
+    console.log('Payload:', payload); // Debug log
+
+    try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), CONFIG.TIMEOUT_MS);
+
+        const response = await fetch(`${CONFIG.API_BASE_URL}${CONFIG.API_ENDPOINT}`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(payload),
+            signal: controller.signal
+        });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const result = await response.json();
+        console.log('Response received:', result); // Debug log
+        addMessageToUI(result.answer, 'bot', result.sources);
+        saveToHistory(question, result.answer);
+
+    } catch (error) {
+        console.error('API call failed:', error);
+        const errorMessage = 'Sorry, I encountered an error. Please try again.';
+        addMessageToUI(errorMessage, 'bot');
+        showError(errorMessage);
+    } finally {
+        hideLoading();
+        state.lastActivity = Date.now();
+    }
+}
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+// function renderContent(content) {
+//   // sanitize, then convert simple markdown + lists + newlines to HTML
+//   let html = escapeHtml(content);
+
+//   // bold **text**
+//   html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+
+//   // split into lines and convert to paragraphs / lists
+//   const lines = html.split(/\r?\n/);
+//   let out = "";
+//   let inUl = false;
+//   let inOl = false;
+
+//   for (let rawLine of lines) {
+//     const line = rawLine.trim();
+//     if (line === "") {
+//       // blank line -> close lists and add spacing
+//       if (inUl) { out += "</ul>"; inUl = false; }
+//       if (inOl) { out += "</ol>"; inOl = false; }
+//       out += "<p></p>";
+//       continue;
+//     }
+
+//     if (/^[-•]\s+/.test(line)) {
+//       if (!inUl) { if (inOl) { out += "</ol>"; inOl = false; } out += "<ul>"; inUl = true; }
+//       out += `<li>${line.replace(/^[-•]\s+/, "")}</li>`;
+//       continue;
+//     }
+
+//     if (/^\d+\.\s+/.test(line)) {
+//       if (!inOl) { if (inUl) { out += "</ul>"; inUl = false; } out += "<ol>"; inOl = true; }
+//       out += `<li>${line.replace(/^\d+\.\s+/, "")}</li>`;
+//       continue;
+//     }
+
+//     // normal paragraph line
+//     if (inUl) { out += "</ul>"; inUl = false; }
+//     if (inOl) { out += "</ol>"; inOl = false; }
+//     out += `<p>${line}</p>`;
+//   }
+
+//   if (inUl) out += "</ul>";
+//   if (inOl) out += "</ol>";
+//   return out;
+// }
+
+function renderContent(content) {
+  let html = escapeHtml(content);
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+
+  const lines = html.split(/\r?\n/);
+  let out = "";
+  let inUl = false;
+  let inOl = false;
+
+  for (let rawLine of lines) {
+    const line = rawLine.trim();
+    
+    // Updated Regex: Now includes '*' and handles different spacing
+    const isUl = /^[*•-]\s+/.test(line);
+    const isOl = /^\d+[.)]\s+/.test(line);
+
+    if (line === "") {
+        if (inUl) { out += "</ul>"; inUl = false; }
+        if (inOl) { out += "</ol>"; inOl = false; }
+        continue; 
+    }
+
+    if (line.startsWith('###')) {
+        if (inUl) { out += "</ul>"; inUl = false; }
+        if (inOl) { out += "</ol>"; inOl = false; }
+        out += `<h3>${line.replace(/^###\s*/, '')}</h3>`;
+    } else if (isUl) {
+      if (!inUl) { out += "<ul>"; inUl = true; }
+      out += `<li>${line.replace(/^[*•-]\s+/, "")}</li>`;
+    } else if (isOl) {
+      if (!inOl) { out += "<ol>"; inOl = true; }
+      out += `<li>${line.replace(/^\d+[.)]\s+/, "")}</li>`;
+    } else {
+      if (inUl) { out += "</ul>"; inUl = false; }
+      if (inOl) { out += "</ol>"; inOl = false; }
+      out += `<p>${line}</p>`;
+    }
+  }
+  return out;
+}
+
+
+
+
+function addMessageToUI(content, sender, sources = null) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${sender}`;
+
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'message-content';
+
+    // Render content safely: support **bold**, numbered lists, bullet lists and line breaks.
+    contentDiv.innerHTML = renderContent(content);
+
+    const timestampDiv = document.createElement('div');
+    timestampDiv.className = 'message-timestamp';
+    timestampDiv.textContent = formatTimestamp(Date.now());
+
+    messageDiv.appendChild(contentDiv);
+    messageDiv.appendChild(timestampDiv);
+
+    if (sender === 'bot' && sources && sources.length > 0) {
+        const sourcesDiv = document.createElement('div');
+        sourcesDiv.className = 'message-sources';
+        sourcesDiv.textContent = `Source: ${sources.join(', ')}`;
+        messageDiv.appendChild(sourcesDiv);
+    }
+
+    if (sender === 'bot') {
+        console.log("Bot message detected, adding buttons..."); // DEBUG LOG
+        const feedbackDiv = document.createElement('div');
+        feedbackDiv.className = 'message-feedback';
+
+        const thumbsUp = document.createElement('button');
+        thumbsUp.type = 'button';
+        thumbsUp.innerHTML = '👍';
+        thumbsUp.title = 'Helpful';
+        thumbsUp.onclick = () => {
+            thumbsUp.classList.add('clicked');
+            thumbsDown.disabled = true;
+            recordFeedback('thumbs_up', state.sessionId);
+        };
+
+        const thumbsDown = document.createElement('button');
+        thumbsDown.innerHTML = '👎';
+        thumbsDown.title = 'Not helpful';
+        thumbsDown.onclick = () => {
+            thumbsDown.classList.add('clicked');
+            thumbsUp.disabled = true;
+            recordFeedback('thumbs_down', state.sessionId);
+        };
+
+        feedbackDiv.appendChild(thumbsUp);
+        feedbackDiv.appendChild(thumbsDown);
+        messageDiv.appendChild(feedbackDiv);
+    }
+
+    elements.messagesArea.appendChild(messageDiv);
+    scrollToBottom();
+}
+
+async function recordFeedback(rating, sessionId) {
+    try {
+        console.log('Recording feedback:', {rating, sessionId}); // Debug log
+        const response = await fetch(`${CONFIG.API_BASE_URL}/api/v1/feedback`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ rating, session_id: sessionId })
+        });
+
+        if (!response.ok) {
+            console.error('Feedback recording failed:', response.status);
+        } else {
+            console.log('Feedback recorded successfully:', rating);
+        }
+    } catch (e) {
+        console.error('Feedback error:', e);
+    }
+}
+
+function formatTimestamp(ts) {
+    return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+function scrollToBottom() {
+    elements.messagesArea.scrollTop = elements.messagesArea.scrollHeight;
+}
+
+function showLoading() {
+    state.isLoading = true;
+    elements.loadingIndicator.classList.add('active');
+    elements.loadingIndicator.textContent = "Agent is thinking...";
+    elements.messageInput.disabled = true;
+    elements.sendButton.disabled = true;
+    updateSendButton(); // Ensure button state is updated
+}
+
+function hideLoading() {
+    state.isLoading = false;
+    elements.loadingIndicator.classList.remove('active');
+    elements.messageInput.disabled = false;
+    elements.sendButton.disabled = false;
+    updateSendButton(); // Ensure button state is updated
+    elements.messageInput.focus();
+}
+
+function updateSendButton() {
+    const hasText = elements.messageInput.value.trim() !== '';
+    const canSend = hasText && !state.isLoading && state.isConnected;
+    elements.sendButton.disabled = !canSend;
+    console.log('Button state updated:', {hasText, isLoading: state.isLoading, isConnected: state.isConnected, canSend}); // Debug log
+}
+
+function showError(msg) {
+    console.error('Error:', msg); // Debug log
+    elements.errorBanner.textContent = msg;
+    elements.errorBanner.classList.add('active');
+    setTimeout(hideError, 5000);
+}
+
+function hideError() {
+    elements.errorBanner.classList.remove('active');
+}
+
+function saveToHistory(q, a) {
+    state.messages.push({ question: q, answer: a, timestamp: Date.now() });
+    if (state.messages.length > 50) state.messages.shift();
+    localStorage.setItem('chatHistory', JSON.stringify(state.messages));
+}
+
+function loadChatHistory() {
+    state.messages.slice(-10).forEach(m => {
+        addMessageToUI(m.question, 'user');
+        addMessageToUI(m.answer, 'bot');
+    });
+}
+
+function clearChatHistory() {
+    localStorage.clear();
+    location.reload();
+}