Update scroll behavior

script.js

@@ -268,48 +268,22 @@ function setupChatScroll() {
     const chatDisplay = document.getElementById('chat-display');
     if (!chatDisplay) { setTimeout(setupChatScroll, 200); return; }
 
-    function updateScroll() {
+    // Always keep overflow-y: auto — no toggling, no flash
+    // Just hide the scrollbar visually when not needed via CSS instead
+    function scrollToBottom() {
         const wrap = document.getElementById('chat-scroll-wrap');
         if (!wrap) return;
-
-        // Force a layout recalc before measuring
-        void wrap.offsetHeight;
-
-        const needsScroll = wrap.scrollHeight > wrap.clientHeight + 2;
-        wrap.classList.toggle('can-scroll', needsScroll);
-
-        if (needsScroll) {
-            wrap.scrollTop = wrap.scrollHeight;
-        }
+        wrap.scrollTop = wrap.scrollHeight;
     }
 
     function onMutate() {
-        // Give browser time to render + load images
-        setTimeout(() => {
-            const images = chatDisplay.querySelectorAll('img');
-            let pending = 0;
-            images.forEach(img => {
-                if (!img.complete) pending++;
-            });
-            if (pending === 0) {
-                updateScroll();
-                return;
-            }
-            let done = 0;
-            images.forEach(img => {
-                if (img.complete) return;
-                const finish = () => {
-                    done++;
-                    if (done >= pending) updateScroll();
-                };
-                img.addEventListener('load', finish, { once: true });
-                img.addEventListener('error', finish, { once: true });
-            });
-        }, 50);
+        // Use rAF x2 to ensure the browser has painted the new content
+        requestAnimationFrame(() => {
+            requestAnimationFrame(scrollToBottom);
+        });
     }
 
     const observer = new MutationObserver(onMutate);
     observer.observe(chatDisplay, { childList: true, subtree: true });
-    window.addEventListener('resize', updateScroll);
-}
-setupChatScroll();
+    window.addEventListener('resize', scrollToBottom);
+}

style.css

@@ -148,16 +148,13 @@ footer, .svelte-1ipelgc, .built-with { display: none !important; }
 #chat-scroll-wrap {
     flex: 1;
     min-height: 0;
-    overflow-y: hidden;
+    overflow-y: auto;
     padding: 0 16px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     scrollbar-width: thin;
-    scrollbar-color: #1e2330 transparent;
-}
-#chat-scroll-wrap.can-scroll {
-    overflow-y: auto;
+    scrollbar-color: #2a3040 transparent;
 }
 
 /* Hide the Gradio HTML component wrapper padding */