Update index.html

index.html

@@ -640,7 +640,7 @@
             <div id="chatMessages"></div>
         </div>
 
-        <button id="scrollToBottomBtn" class="btn-scroll-bottom" onclick="UI.scrollToBottom(true)" title="Go to latest">
+        <button id="scrollToBottomBtn" class="btn-scroll-bottom" onclick="UI.scrollToBottom(true); UI.autoScroll = true;" title="Go to latest">
             <svg style="width:20px;height:20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="12" y1="5" x2="12" y2="19"></line>
                 <polyline points="19 12 12 19 5 12"></polyline>
@@ -988,6 +988,7 @@
         };
 
         const UI = {
+            autoScroll: true, // intelligent auto-scroll flag
             toggleSidebar() {
                 const sb = document.getElementById('sidebar');
                 const overlay = document.getElementById('mobileOverlay');
@@ -1002,7 +1003,9 @@
             autoGrow(el) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 180) + 'px'; },
             scrollToBottom(smooth = false) { 
                 const c = document.getElementById('chatContainer'); 
-                c.scrollTo({ top: c.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+                if (this.autoScroll) {
+                    c.scrollTo({ top: c.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+                }
             },
             escape(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); },
             showAuthMsg(msg, isError=true) {
@@ -1028,9 +1031,12 @@
         const chatContainerEl = document.getElementById('chatContainer');
         const scrollBtnEl = document.getElementById('scrollToBottomBtn');
         chatContainerEl.addEventListener('scroll', () => {
-            if (chatContainerEl.scrollHeight - chatContainerEl.scrollTop - chatContainerEl.clientHeight > 150) {
+            const scrollBottom = chatContainerEl.scrollHeight - chatContainerEl.scrollTop - chatContainerEl.clientHeight;
+            if (scrollBottom > 50) {
+                UI.autoScroll = false;
                 scrollBtnEl.classList.add('visible');
             } else {
+                UI.autoScroll = true;
                 scrollBtnEl.classList.remove('visible');
             }
         });
@@ -1165,6 +1171,7 @@
                                 TTSManager.autoPrepare(msgId, msg.content, botObj.listenBtn);
                             }
                         }
+                        UI.autoScroll = true;
                         setTimeout(() => UI.scrollToBottom(true), 200);
                         if(window.innerWidth <= 900) UI.toggleSidebar(); 
                     }
@@ -1174,6 +1181,7 @@
                 if(State.isProcessing) return;
                 State.currentThreadId = null; State.currentTitle = null; State.history = [];
                 document.getElementById('chatMessages').innerHTML = ''; UI.updateWelcomeScreen();
+                UI.autoScroll = true;
                 if(window.innerWidth <= 900) UI.toggleSidebar();
             },
             saveCurrent() {
@@ -1192,6 +1200,7 @@
                     State.currentTitle = null;
                     document.getElementById('chatMessages').innerHTML = '';
                     UI.updateWelcomeScreen();
+                    UI.autoScroll = true;
                     fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "clear_all_chats", email: State.user})}).then(() => this.syncAllChats());
                 }
             },
@@ -1322,7 +1331,9 @@
                 const c = document.getElementById('chatMessages');
                 const w = document.createElement('div'); w.className = 'message-wrapper';
                 w.innerHTML = `<div class="user-message">${attachUI}${txt ? UI.escape(txt) : ''}</div>`;
-                c.appendChild(w); UI.scrollToBottom();
+                c.appendChild(w);
+                UI.autoScroll = true; // when user sends a message, we want to scroll to bottom
+                UI.scrollToBottom();
             },
             renderBot(msgId) {
                 const c = document.getElementById('chatMessages');
@@ -1340,7 +1351,8 @@
                             </div>
                         </div>
                     </div>`;
-                c.appendChild(w); UI.scrollToBottom();
+                c.appendChild(w);
+                UI.scrollToBottom();
                 return { contentDiv: document.getElementById(`bot-content-${msgId}`), listenBtn: document.getElementById(`listen-btn-${msgId}`) };
             },
             parseAndRender(fullText, isSearching, isProcessing, container) {