fix

static/www/1.html

@@ -31,6 +31,7 @@
       padding-bottom:var(--bottom-pad); /* room for composer + fixed footer */
       padding-bottom:var(--bottom-pad); /* room for composer + fixed footer */
       display:flex;
       display:flex;
       flex-direction:column;
       flex-direction:column;
+      scroll-behavior:smooth;      /* nudge for smooth scrolling */
     }
     }
 
 
     .composer{
     .composer{
@@ -72,7 +73,7 @@
       filter:drop-shadow(0 6px 16px rgba(0,0,0,.15)); opacity:.98;
       filter:drop-shadow(0 6px 16px rgba(0,0,0,.15)); opacity:.98;
     }
     }
 
 
-    /* Scroll-to-bottom button (next to textarea) */
+    /* Composer row with textarea + always-visible scroll button */
     .scroll-row { display:flex; align-items:stretch; gap:.5rem; }
     .scroll-row { display:flex; align-items:stretch; gap:.5rem; }
     #inputText { flex:1 1 auto; }
     #inputText { flex:1 1 auto; }
     #scrollDownBtn{
     #scrollDownBtn{
@@ -89,6 +90,7 @@
       cursor:pointer;
       cursor:pointer;
       transition:opacity .18s ease-in-out, transform .12s ease-in-out;
       transition:opacity .18s ease-in-out, transform .12s ease-in-out;
       opacity:.96;
       opacity:.96;
+      flex:0 0 auto;
     }
     }
     #scrollDownBtn:hover{ opacity:1; transform:translateY(-1px); }
     #scrollDownBtn:hover{ opacity:1; transform:translateY(-1px); }
     #scrollDownBtn svg{ width:22px; height:22px; pointer-events:none; }
     #scrollDownBtn svg{ width:22px; height:22px; pointer-events:none; }
@@ -195,7 +197,40 @@
       if(img) targetEl.innerHTML='';
       if(img) targetEl.innerHTML='';
     }
     }
 
 
-    // --- bottom helpers ---
+    // --- robust scrolling helpers ---
+    function isOverflowing(el){ return el && (el.scrollHeight - el.clientHeight) > 1; }
+
+    // Decide what is actually scrolling now
+    function getScrollEl(){
+      if (isOverflowing(mainScroll)) return mainScroll;
+      return document.scrollingElement || document.documentElement;
+    }
+
+    // Scroll to bottom of the current scroller (with fallback)
+    function scrollToBottom(){
+      const el = getScrollEl();
+      const top = el.scrollHeight;
+
+      if (el === document.scrollingElement || el === document.documentElement || el === document.body) {
+        window.scrollTo({ top, behavior:'smooth' });
+      } else {
+        el.scrollTo({ top, behavior:'smooth' });
+      }
+
+      // Fallback to ensure we actually reach the bottom
+      requestAnimationFrame(() => {
+        const nearBottom = (el.scrollTop + el.clientHeight) >= (el.scrollHeight - 2);
+        if (!nearBottom) {
+          if (el === document.scrollingElement || el === document.documentElement || el === document.body) {
+            window.scrollTo(0, el.scrollHeight);
+          } else {
+            el.scrollTop = el.scrollHeight;
+          }
+        }
+      });
+    }
+
+    // --- bottom helpers for auto-stick while streaming ---
     function atBottom(){
     function atBottom(){
       return (mainScroll.scrollTop + mainScroll.clientHeight) >= (mainScroll.scrollHeight - 4);
       return (mainScroll.scrollTop + mainScroll.clientHeight) >= (mainScroll.scrollHeight - 4);
     }
     }
@@ -291,16 +326,14 @@
     }
     }
 
 
     // events
     // events
-    promptForm.addEventListener('submit', e => { e.preventDefault(); if (goBtn.style.display!=='none') start(); });
-    inputText.addEventListener('keydown', e => {
+    document.getElementById('promptForm').addEventListener('submit', e => { e.preventDefault(); if (goBtn.style.display!=='none') start(); });
+    document.getElementById('inputText').addEventListener('keydown', e => {
       if (e.key==='Enter' && !e.shiftKey && goBtn.style.display!=='none'){ e.preventDefault(); start(); }
       if (e.key==='Enter' && !e.shiftKey && goBtn.style.display!=='none'){ e.preventDefault(); start(); }
     });
     });
-    stopBtn.addEventListener('click', stop);
+    document.getElementById('stopBtn').addEventListener('click', stop);
 
 
-    // scroll button action — scroll the main conversation area to bottom
-    scrollDownBtn.addEventListener('click', () => {
-      mainScroll.scrollTo({ top: mainScroll.scrollHeight, behavior: 'smooth' });
-    });
+    // scroll button action — robust scroll-to-bottom
+    scrollDownBtn.addEventListener('click', scrollToBottom);
 
 
     // init
     // init
     window.addEventListener('DOMContentLoaded', async () => {
     window.addEventListener('DOMContentLoaded', async () => {