Fix auto scroll

app.py

@@ -164,6 +164,7 @@ with gr.Blocks(theme=THEME, css=CSS, fill_height=True) as demo:
                     show_label=False,
                     # likeable=True,
                     allow_tags=["think"],
+                    elem_id="chatbot",
                     examples=[
                         {"text": i}
                         for i in [

static/script.js

@@ -1,6 +1,83 @@
 (function () {
   console.log("Keyboard shortcuts script loaded");
   
+  // --- Autoscroll control ---
+  let lastSendTs = 0;
+  let userPinnedScroll = false;
+  let chatContainer = null;
+  let chatObserver = null;
+  
+  const now = () => Date.now();
+  const SEND_AUTOSCROLL_WINDOW_MS = 2500;
+  const NEAR_BOTTOM_PX = 120;
+  
+  const getChatContainer = () => {
+    if (chatContainer && document.body.contains(chatContainer)) return chatContainer;
+    // Prefer explicit elem_id container
+    const root = document.getElementById('chatbot') || document.querySelector('#chatbot');
+    // Fallbacks: any visible gr-chatbot within left pane
+    const candidates = [];
+    if (root) candidates.push(root);
+    candidates.push(
+      document.querySelector('#left-pane .gr-chatbot'),
+      document.querySelector('.gr-chatbot'),
+      document.querySelector('#left-pane [data-testid="chatbot"]')
+    );
+    for (const el of candidates) {
+      if (!el) continue;
+      // Try common inner scroll area
+      let container = el.querySelector('[data-testid="bot"]') || el.querySelector('[data-testid="chatbot"]') || el;
+      // Walk down to the element that actually scrolls
+      const stack = [container];
+      while (stack.length) {
+        const cur = stack.shift();
+        if (!cur) continue;
+        const style = cur instanceof Element ? getComputedStyle(cur) : null;
+        const canScroll = style && (style.overflowY === 'auto' || style.overflowY === 'scroll');
+        if (canScroll && cur.scrollHeight > cur.clientHeight + 10) {
+          chatContainer = cur;
+          break;
+        }
+        if (cur.children && cur.children.length) stack.push(...cur.children);
+      }
+      if (!chatContainer) chatContainer = container;
+      if (chatContainer) break;
+    }
+    return chatContainer;
+  };
+  
+  const isNearBottom = (el) => {
+    if (!el) return true;
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    return distance <= NEAR_BOTTOM_PX;
+  };
+  
+  const scrollToBottom = (el) => {
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: 'auto' });
+  };
+  
+  const attachScrollListener = () => {
+    const el = getChatContainer();
+    if (!el) return;
+    el.addEventListener('scroll', () => {
+      // If the user scrolls up away from bottom, pin the position
+      userPinnedScroll = !isNearBottom(el);
+    }, { passive: true });
+  };
+  
+  const observeChat = () => {
+    const el = getChatContainer();
+    if (!el) return;
+    if (chatObserver) chatObserver.disconnect();
+    chatObserver = new MutationObserver(() => {
+      const withinSendWindow = now() - lastSendTs < SEND_AUTOSCROLL_WINDOW_MS;
+      const shouldScroll = withinSendWindow || (!userPinnedScroll && isNearBottom(el));
+      if (shouldScroll) scrollToBottom(el);
+    });
+    chatObserver.observe(el, { childList: true, subtree: true, characterData: true });
+  };
+  
   const send = () => {
     // Try multiple selectors to find the send button
     const selectors = [
@@ -39,6 +116,11 @@
     
     if (btn) {
       console.log("Clicking send button");
+      lastSendTs = now();
+      // When sending, allow autoscroll for initial response
+      userPinnedScroll = false;
+      // Ensure observers are up
+      setTimeout(() => { attachScrollListener(); observeChat(); }, 0);
       btn.click();
       return true;
     } else {
@@ -52,6 +134,9 @@
   
   const setupKeyboardShortcuts = () => {
     console.log("Setting up keyboard shortcuts");
+    // Initialize observers once UI is present
+    setTimeout(() => { attachScrollListener(); observeChat(); }, 50);
+    setTimeout(() => { attachScrollListener(); observeChat(); }, 400);
     
     document.addEventListener('keydown', (e) => {
       const isCmdEnter = (e.metaKey || e.ctrlKey) && e.key === 'Enter';