Update public/index.html

public/index.html

@@ -56,9 +56,9 @@
     </aside>
 
     <!-- Main Chat Area -->
-    <main class="flex-1 flex flex-col h-full w-full bg-gray-950 min-w-0">
+    <main class="flex-1 flex flex-col h-full w-full bg-gray-950 min-w-0 relative">
         <!-- Header -->
-        <header class="h-14 min-h-[3.5rem] border-b border-gray-800 flex items-center px-4 lg:px-6 justify-between bg-gray-900/80 backdrop-blur-sm z-10">
+        <header class="h-14 min-h-[3.5rem] border-b border-gray-800 flex items-center px-4 lg:px-6 justify-between bg-gray-900/80 backdrop-blur-sm z-10 shrink-0">
             
             <div class="flex items-center gap-3 overflow-hidden group w-full max-w-[45%]">
                 <button onclick="toggleSidebar()" class="lg:hidden p-1 -ml-1 text-gray-400 hover:text-white shrink-0">
@@ -103,11 +103,16 @@
             </div>
         </header>
 
-        <!-- Messages -->
+        <!-- Messages Area -->
         <div id="chat-window" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6 scroll-smooth"></div>
 
+        <!-- Scroll to Bottom Button -->
+        <button id="scroll-bottom-btn" onclick="scrollToBottom()" class="hidden absolute bottom-28 right-8 p-2 bg-gray-800/80 hover:bg-gray-700 text-gray-300 hover:text-white rounded-full shadow-lg border border-gray-700 backdrop-blur-sm transition-all z-20">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
+        </button>
+
         <!-- Input Area -->
-        <div class="p-3 lg:p-4 bg-gray-900 border-t border-gray-800 shrink-0">
+        <div class="p-3 lg:p-4 bg-gray-900 border-t border-gray-800 shrink-0 relative z-30">
             <div class="max-w-4xl mx-auto">
                 <div id="image-preview-container" class="flex flex-wrap gap-2 mb-2 hidden px-1"></div>
                 <div class="flex items-end gap-2 bg-gray-850 rounded-xl border border-gray-700 p-2 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all shadow-sm">
@@ -136,10 +141,27 @@
         let currentChatId = null;
         let attachedImages =[];
         let pollingInterval = null;
-        
-        // Local token state variables
         let currentTokens = { total: 0, in: 0, out: 0 };
 
+        // --- SCROLL TO BOTTOM LOGIC ---
+        const chatWindow = document.getElementById('chat-window');
+        const scrollBtn = document.getElementById('scroll-bottom-btn');
+
+        chatWindow.addEventListener('scroll', () => {
+            // Show the button if we scroll up more than 100 pixels from the very bottom
+            const distanceToBottom = chatWindow.scrollHeight - chatWindow.scrollTop - chatWindow.clientHeight;
+            if (distanceToBottom > 100) {
+                scrollBtn.classList.remove('hidden');
+            } else {
+                scrollBtn.classList.add('hidden');
+            }
+        });
+
+        function scrollToBottom() {
+            chatWindow.scrollTo({ top: chatWindow.scrollHeight, behavior: 'smooth' });
+        }
+
+
         // --- TITLE EDITING LOGIC ---
         function enableTitleEdit() {
             if (!currentChatId) return;
@@ -181,6 +203,7 @@
             if (e.key === 'Escape') cancelTitleEdit();
         });
 
+
         // --- UI CORE LOGIC ---
         function toggleSidebar() {
             const sidebar = document.getElementById('sidebar');
@@ -240,7 +263,8 @@
 
         async function selectChat(id) {
             currentChatId = id;
-            clearInterval(pollingInterval);
+            if (pollingInterval) clearInterval(pollingInterval);
+
             const res = await fetch(`/api/chats/${id}`);
             const chat = await res.json();
             
@@ -248,7 +272,6 @@
             document.getElementById('edit-title-btn').classList.remove('hidden'); 
             
             updateTokenDisplay(chat.totalTokens, chat.inputTokens, chat.outputTokens);
-            
             cancelTitleEdit(); 
             renderMessages(chat.messages);
             loadSidebar(); 
@@ -256,11 +279,21 @@
             if(window.innerWidth < 1024 && !document.getElementById('sidebar').classList.contains('-translate-x-full')) {
                 toggleSidebar();
             }
-            if (chat.isGenerating) pollGeneratingChat(id);
+
+            // Lock UI and start polling if background generation is active
+            if (chat.isGenerating) {
+                document.getElementById('send-btn').disabled = true;
+                pollGeneratingChat(id);
+            } else {
+                document.getElementById('send-btn').disabled = false;
+            }
         }
 
         function renderMessages(messages) {
             const container = document.getElementById('chat-window');
+            // Track if user is already at the bottom before adding new HTML
+            const isScrolledToBottom = container.scrollHeight - container.clientHeight <= container.scrollTop + 20;
+
             container.innerHTML = messages.map(m => {
                 let html = '';
                 if (m.reasoning) {
@@ -293,13 +326,18 @@
                     pre.appendChild(btn);
                 }
             });
-            container.scrollTop = container.scrollHeight;
+
+            // Auto-scroll logic if user was already at the bottom
+            if (isScrolledToBottom) scrollToBottom();
         }
 
         function pollGeneratingChat(id) {
+            if (pollingInterval) clearInterval(pollingInterval);
+            
             pollingInterval = setInterval(async () => {
                 const res = await fetch(`/api/chats/${id}`);
                 const chat = await res.json();
+                
                 renderMessages(chat.messages);
                 updateTokenDisplay(chat.totalTokens, chat.inputTokens, chat.outputTokens);
                 
@@ -307,8 +345,14 @@
                      document.getElementById('current-chat-title').innerText = chat.title;
                      loadSidebar();
                 }
-                if (!chat.isGenerating) clearInterval(pollingInterval);
-            }, 1500);
+
+                if (!chat.isGenerating) {
+                    clearInterval(pollingInterval);
+                    if (currentChatId === id) {
+                        document.getElementById('send-btn').disabled = false;
+                    }
+                }
+            }, 1500); 
         }
 
         function handleImageSelect(event) {
@@ -354,7 +398,7 @@
                     </div>
                 </div>
             `;
-            container.scrollTop = container.scrollHeight;
+            scrollToBottom();
             
             input.value = '';
             input.style.height = 'auto'; 
@@ -370,6 +414,8 @@
                     body: JSON.stringify(payload)
                 });
 
+                if (!response.ok) throw new Error("API stream rejected. Chat might be busy.");
+
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder("utf-8");
                 let aiContent = "";
@@ -389,7 +435,6 @@
                             i += 2;
                         } else if (chunks[i] === '__USAGE__') {
                             const usageData = JSON.parse(chunks[i+1]);
-                            // Update the live token state globally
                             updateTokenDisplay(
                                 currentTokens.total + usageData.totalTokens,
                                 currentTokens.in + usageData.inputTokens,
@@ -407,24 +452,29 @@
                     if (aiContent) tempHtml += DOMPurify.sanitize(marked.parse(aiContent));
                     
                     document.getElementById('temp-ai-msg').innerHTML = tempHtml || "<span class='animate-pulse text-gray-400'>Thinking...</span>";
-                    container.scrollTop = container.scrollHeight;
+                    
+                    // Only auto-scroll while streaming if the user is currently at the bottom.
+                    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+                    if (distanceToBottom < 100) scrollToBottom();
                 }
 
-                // Force final refresh of states from db
                 selectChat(currentChatId);
 
             } catch (error) {
                 console.error(error);
-                document.getElementById('temp-ai-msg').innerHTML = "<span class='text-red-400'>Error connecting to API.</span>";
+                document.getElementById('temp-ai-msg').innerHTML = "<span class='text-red-400'>Connection lost or chat busy. Reload to sync memory.</span>";
             } finally {
-                document.getElementById('send-btn').disabled = false;
+                // Do not blindly re-enable if a background generation was picked up by a polling loop
+                if (!pollingInterval) {
+                    document.getElementById('send-btn').disabled = false;
+                }
             }
         }
 
         document.getElementById('message-input').addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) { 
                 e.preventDefault(); 
-                sendMessage(); 
+                if (!document.getElementById('send-btn').disabled) sendMessage(); 
             }
         });