Update index.html

index.html

@@ -27,15 +27,13 @@
             box-sizing: border-box;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
-
-        /* FIX 1: body fills viewport exactly, no overflow */
+        
         body {
             background-color: var(--bg-light);
             color: var(--dark);
-            height: 100vh;
+            min-height: 100vh;
             display: flex;
             flex-direction: column;
-            overflow: hidden;
         }
         
         .container {
@@ -51,7 +49,8 @@
             color: white;
             padding: 1rem 0;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            flex-shrink: 0; /* FIX 2: header never shrinks */
+            position: sticky;
+            top: 0;
             z-index: 100;
         }
         
@@ -93,29 +92,12 @@
             gap: 5px;
         }
         
-        /* FIX 3: main area fills remaining height, scrolls internally */
-        .main-wrapper {
-            flex: 1;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .main-wrapper > .container {
-            flex: 1;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-        }
-
         /* Main Layout */
         .main-layout {
             display: flex;
             flex: 1;
             gap: 20px;
             padding: 20px 0;
-            overflow: hidden;
-            min-height: 0; /* critical — allows flex children to shrink below content size */
         }
         
         /* Chat Container */
@@ -127,7 +109,6 @@
             display: flex;
             flex-direction: column;
             overflow: hidden;
-            min-height: 0;
         }
         
         .chat-header {
@@ -136,7 +117,6 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            flex-shrink: 0;
         }
         
         .chat-header h2 {
@@ -157,7 +137,6 @@
             border-radius: 50%;
         }
         
-        /* Chat history scrolls, input stays pinned */
         .chat-history {
             flex: 1;
             padding: 20px;
@@ -166,7 +145,6 @@
             flex-direction: column;
             gap: 20px;
             background-color: #fafafa;
-            min-height: 0;
         }
         
         .message {
@@ -241,12 +219,11 @@
             font-size: 0.85rem;
         }
         
-        /* Input Area — always visible at bottom */
+        /* Input Area */
         .input-container {
             padding: 15px 20px;
             border-top: 1px solid var(--border);
             background: white;
-            flex-shrink: 0;
         }
         
         .input-area {
@@ -298,11 +275,13 @@
         /* Sidebar */
         .sidebar {
             width: 300px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            padding: 20px;
             display: flex;
             flex-direction: column;
             gap: 20px;
-            overflow-y: auto;
-            min-height: 0;
         }
         
         .card {
@@ -310,7 +289,6 @@
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
             overflow: hidden;
-            flex-shrink: 0;
         }
         
         .card-header {
@@ -369,9 +347,17 @@
             animation: typing 1.4s infinite ease-in-out;
         }
         
-        .typing-dot:nth-child(1) { animation-delay: 0s; }
-        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        .typing-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+        
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
         
         @keyframes typing {
             0%, 60%, 100% { transform: translateY(0); }
@@ -379,16 +365,25 @@
         }
         
         /* Status indicators */
-        .connected    { color: var(--success); }
-        .disconnected { color: var(--danger); }
-        .expiring-soon { color: var(--warning); font-weight: bold; }
+        .connected {
+            color: var(--success);
+        }
+        
+        .disconnected {
+            color: var(--danger);
+        }
+        
+        .expiring-soon {
+            color: var(--warning);
+            font-weight: bold;
+        }
         
         /* Footer */
         footer {
             background: var(--dark);
             color: white;
-            padding: 12px 0;
-            flex-shrink: 0;
+            padding: 20px 0;
+            margin-top: auto;
         }
         
         .footer-content {
@@ -405,16 +400,17 @@
         
         /* Responsive Design */
         @media (max-width: 900px) {
-            body { overflow: auto; height: auto; }
-            .main-wrapper { overflow: visible; }
-            .main-wrapper > .container { overflow: visible; }
             .main-layout {
                 flex-direction: column;
-                overflow: visible;
             }
-            .sidebar { width: 100%; overflow: visible; }
-            .chat-container { min-height: 500px; }
-            .message { max-width: 90%; }
+            
+            .sidebar {
+                width: 100%;
+            }
+            
+            .message {
+                max-width: 90%;
+            }
         }
         
         @media (max-width: 600px) {
@@ -423,13 +419,20 @@
                 gap: 10px;
                 align-items: flex-start;
             }
+            
             .footer-content {
                 flex-direction: column;
                 gap: 15px;
                 align-items: flex-start;
             }
-            .input-area { flex-direction: column; }
-            button { padding: 12px; }
+            
+            .input-area {
+                flex-direction: column;
+            }
+            
+            button {
+                padding: 12px;
+            }
         }
     </style>
 </head>
@@ -450,69 +453,65 @@
             </div>
         </div>
     </header>
-
-    <!-- FIX: wrapped in main-wrapper so it fills remaining height -->
-    <div class="main-wrapper">
-        <div class="container">
-            <div class="main-layout">
-                <!-- Chat Interface -->
-                <div class="chat-container">
-                    <div class="chat-header">
-                        <h2><i class="fas fa-comments"></i> Legal Consultation</h2>
-                        <div class="status-indicator">
-                            <div class="status-dot" id="statusDot"></div>
-                            <span id="connectionStatus">Connecting...</span>
-                        </div>
+    
+    <div class="container">
+        <div class="main-layout">
+            <!-- Chat Interface -->
+            <div class="chat-container">
+                <div class="chat-header">
+                    <h2><i class="fas fa-comments"></i> Legal Consultation</h2>
+                    <div class="status-indicator">
+                        <div class="status-dot" id="statusDot"></div>
+                        <span id="connectionStatus">Connecting...</span>
                     </div>
-                    
-                    <div class="chat-history" id="chatHistory">
-                        <div class="message ai-message">
-                            <div class="message-header">
-                                <span><i class="fas fa-robot"></i> Legal Assistant</span>
-                                <span>Just now</span>
-                            </div>
-                            <div class="message-content">
-                                <p>Welcome to the Irish Legal AI Assistant! I'm here to help with your legal questions regarding Irish law.</p>
-                                <p>Please ask your question in the box below. I'll provide a concise answer with relevant legal sources.</p>
-                            </div>
+                </div>
+                
+                <div class="chat-history" id="chatHistory">
+                    <div class="message ai-message">
+                        <div class="message-header">
+                            <span><i class="fas fa-robot"></i> Legal Assistant</span>
+                            <span>Just now</span>
                         </div>
-                    </div>
-                    
-                    <!-- Input always pinned at bottom of chat-container -->
-                    <div class="input-container">
-                        <div class="input-area">
-                            <textarea id="userInput" placeholder="Ask a question about Irish law..." required></textarea>
-                            <button id="sendButton">
-                                <i class="fas fa-paper-plane"></i> Send
-                            </button>
+                        <div class="message-content">
+                            <p>Welcome to the Irish Legal AI Assistant! I'm here to help with your legal questions regarding Irish law.</p>
+                            <p>Please ask your question in the box below. I'll provide a concise answer with relevant legal sources.</p>
                         </div>
                     </div>
                 </div>
                 
-                <!-- Sidebar -->
-                <div class="sidebar">
-                    <div class="card">
-                        <div class="card-header">
-                            <i class="fas fa-history"></i> Session History
-                        </div>
-                        <div class="card-body" id="historyList">
-                            <p style="color: var(--gray); text-align: center;">No history yet</p>
-                        </div>
+                <div class="input-container">
+                    <div class="input-area">
+                        <textarea id="userInput" placeholder="Ask a question about Irish law..." required></textarea>
+                        <button id="sendButton">
+                            <i class="fas fa-paper-plane"></i> Send
+                        </button>
                     </div>
-                    
-                    <div class="card">
-                        <div class="card-header">
-                            <i class="fas fa-lightbulb"></i> Tips for Better Results
-                        </div>
-                        <div class="card-body">
-                            <ul style="padding-left: 20px; display: flex; flex-direction: column; gap: 10px;">
-                                <li>Be specific with your questions</li>
-                                <li>Include relevant context when possible</li>
-                                <li>Ask about recent legal changes</li>
-                                <li>Request practical implications</li>
-                                <li>Specify areas of law (employment, property, etc.)</li>
-                            </ul>
-                        </div>
+                </div>
+            </div>
+            
+            <!-- Sidebar -->
+            <div class="sidebar">
+                <div class="card">
+                    <div class="card-header">
+                        <i class="fas fa-history"></i> Session History
+                    </div>
+                    <div class="card-body" id="historyList">
+                        <p style="color: var(--gray); text-align: center;">No history yet</p>
+                    </div>
+                </div>
+                
+                <div class="card">
+                    <div class="card-header">
+                        <i class="fas fa-lightbulb"></i> Tips for Better Results
+                    </div>
+                    <div class="card-body">
+                        <ul style="padding-left: 20px; display: flex; flex-direction: column; gap: 10px;">
+                            <li>Be specific with your questions</li>
+                            <li>Include relevant context when possible</li>
+                            <li>Ask about recent legal changes</li>
+                            <li>Request practical implications</li>
+                            <li>Specify areas of law (employment, property, etc.)</li>
+                        </ul>
                     </div>
                 </div>
             </div>
@@ -538,17 +537,20 @@
             const connectionStatus = document.getElementById('connectionStatus');
             const statusDot = document.getElementById('statusDot');
             
+            // Session management
             let sessionId = null;
             let sessionHistory = [];
             let sessionCheckInterval;
-            const SESSION_CHECK_INTERVAL = 1000;
+            const SESSION_CHECK_INTERVAL = 1000; // Check every second
             
+            // Initialize session
             function initializeSession() {
                 updateConnectionStatus('connecting');
                 checkSessionStatus();
                 sessionCheckInterval = setInterval(checkSessionStatus, SESSION_CHECK_INTERVAL);
             }
             
+            // Update connection status UI
             function updateConnectionStatus(status) {
                 switch(status) {
                     case 'connected':
@@ -569,17 +571,23 @@
                 }
             }
             
+            // Check session status with backend
             async function checkSessionStatus() {
                 try {
                     const response = await fetch('session/status', {
                         method: 'GET',
                         credentials: 'include'
                     });
+                    
                     if (!response.ok) throw new Error('Status check failed');
+                    
                     const data = await response.json();
                     updateConnectionStatus('connected');
                     updateSessionDisplay(data);
-                    if (data.status === 'expired') handleSessionExpiry();
+                    
+                    if (data.status === 'expired') {
+                        handleSessionExpiry();
+                    }
                 } catch (error) {
                     console.error('Session status check error:', error);
                     updateConnectionStatus('disconnected');
@@ -587,6 +595,7 @@
                 }
             }
             
+            // Update session timer display
             function updateSessionDisplay(sessionData) {
                 switch (sessionData.status) {
                     case 'new':
@@ -596,6 +605,7 @@
                         sessionHistory = [];
                         updateSessionHistory([]);
                         break;
+                        
                     case 'expired':
                         sessionTimerElement.textContent = "Session Expired";
                         sessionTimerElement.classList.remove('expiring-soon');
@@ -603,16 +613,22 @@
                         sessionHistory = [];
                         updateSessionHistory([]);
                         break;
+                        
                     case 'active':
                         sessionId = sessionData.session_id;
                         const minutes = Math.floor(sessionData.ttl / 60);
                         const seconds = sessionData.ttl % 60;
-                        if (sessionData.ttl < 120) {
+                        
+                        // Add warning when session is about to expire
+                        if (sessionData.ttl < 120) { // 2 minutes left
                             sessionTimerElement.classList.add('expiring-soon');
                         } else {
                             sessionTimerElement.classList.remove('expiring-soon');
                         }
+                        
                         sessionTimerElement.textContent = `Expires in ${minutes}:${seconds.toString().padStart(2, '0')}`;
+                        
+                        // Update history if count changed
                         if (sessionData.history_count !== sessionHistory.length) {
                             fetchSessionHistory();
                         }
@@ -620,13 +636,16 @@
                 }
             }
             
+            // Fetch full session history
             async function fetchSessionHistory() {
                 try {
                     const response = await fetch('session/history', {
                         method: 'GET',
                         credentials: 'include'
                     });
+                    
                     if (!response.ok) throw new Error('History fetch failed');
+                    
                     const data = await response.json();
                     sessionHistory = data.history || [];
                     updateSessionHistory(sessionHistory);
@@ -636,48 +655,68 @@
                 }
             }
             
+            // Update session history display
             function updateSessionHistory(history) {
                 historyList.innerHTML = '';
+                
                 if (history.length === 0) {
                     historyList.innerHTML = '<p style="color: var(--gray); text-align: center;">No history yet</p>';
                     return;
                 }
-                history.forEach((item) => {
+                
+                history.forEach((item, index) => {
                     const historyItem = document.createElement('div');
                     historyItem.className = 'history-item';
-                    historyItem.innerHTML = `<div class="history-question">${truncateText(item.q, 70)}</div>`;
-                    historyItem.addEventListener('click', () => scrollToMessage(item.q));
+                    historyItem.innerHTML = `
+                        <div class="history-question">${truncateText(item.q, 70)}</div>
+                    `;
+                    historyItem.addEventListener('click', () => {
+                        scrollToMessage(item.q);
+                    });
                     historyList.appendChild(historyItem);
                 });
             }
             
+            // Scroll to message in chat
             function scrollToMessage(query) {
                 const messages = document.querySelectorAll('.message');
                 for (let msg of messages) {
                     if (msg.textContent.includes(query)) {
                         msg.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        // Highlight briefly
                         msg.style.boxShadow = '0 0 0 2px var(--accent)';
-                        setTimeout(() => { msg.style.boxShadow = ''; }, 2000);
+                        setTimeout(() => {
+                            msg.style.boxShadow = '';
+                        }, 2000);
                         break;
                     }
                 }
             }
             
+            // Truncate text for history display
             function truncateText(text, maxLength) {
                 if (!text) return "";
                 return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
             }
             
+            // Handle session expiry
             function handleSessionExpiry() {
                 sessionId = null;
                 sessionHistory = [];
+                
+                // Clear chat except initial message
                 while (chatHistory.children.length > 1) {
                     chatHistory.removeChild(chatHistory.lastChild);
                 }
-                addMessage("Your session has expired due to inactivity. A new session will be created with your next question. Please be patient and retry if your request fails or you don't get a response—your new session will begin once the timer resets.", "ai");
+                
+                // Add expiry notification
+                addMessage("Your session has expired due to inactivity. A new session will be created with your next question. Please be patient and retry if your request fails or you don’t get a response—your new session will begin once the timer resets.","ai");
+                
+                // Update history display
                 updateSessionHistory([]);
             }
             
+            // Handle sending messages
             sendButton.addEventListener('click', sendMessage);
             userInput.addEventListener('keypress', function(e) {
                 if (e.key === 'Enter' && !e.shiftKey) {
@@ -690,10 +729,12 @@
                 const question = userInput.value.trim();
                 if (!question) return;
                 
+                // Add user message to chat
                 addMessage(question, 'user');
                 userInput.value = '';
                 sendButton.disabled = true;
                 
+                // Show typing indicator
                 const typingIndicator = document.createElement('div');
                 typingIndicator.className = 'typing-indicator';
                 typingIndicator.innerHTML = `
@@ -705,23 +746,35 @@
                 chatHistory.scrollTop = chatHistory.scrollHeight;
                 
                 try {
+                    // Send query to backend
                     const response = await fetch('query', {
                         method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
                         body: JSON.stringify({ query: question }),
                         credentials: 'include'
                     });
                     
-                    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
                     
                     const data = await response.json();
+                    
+                    // Remove typing indicator
                     chatHistory.removeChild(typingIndicator);
+                    
+                    // Add AI response
                     addMessage(data.answer, 'ai', data.sources);
                     
+                    // Update session info
                     if (data.session_id) {
                         sessionId = data.session_id;
+                        // Refresh history display
                         fetchSessionHistory();
                     }
+                    
                 } catch (error) {
                     console.error('Error sending message:', error);
                     chatHistory.removeChild(typingIndicator);
@@ -734,8 +787,10 @@
             function addMessage(content, sender, sources = []) {
                 const messageDiv = document.createElement('div');
                 messageDiv.className = `message ${sender}-message`;
+                
                 const now = new Date();
                 const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                
                 messageDiv.innerHTML = `
                     <div class="message-header">
                         <span><i class="${sender === 'ai' ? 'fas fa-robot' : 'fas fa-user'}"></i> ${sender === 'ai' ? 'Legal Assistant' : 'You'}</span>
@@ -751,16 +806,19 @@
                         ` : ''}
                     </div>
                 `;
+                
                 chatHistory.appendChild(messageDiv);
                 chatHistory.scrollTop = chatHistory.scrollHeight;
             }
             
             function formatMessageContent(content) {
                 if (!content) return "";
+                // Convert line breaks to paragraphs
                 const paragraphs = content.split('\n\n');
                 return paragraphs.map(p => `<p>${p}</p>`).join('');
             }
             
+            // Initialize the session
             initializeSession();
         });
     </script>