Stop pinning the transcript to the bottom while streaming

Replace Gradio's per-token delayed autoscroll with a follow-the-bottom script that releases as soon as the reader scrolls up and resumes when they return to the bottom or send a message.

app.py

@@ -181,6 +181,56 @@ document.addEventListener("keydown", (e) => {
   e.stopPropagation();
   document.querySelector("#send-btn")?.click();
 }, true);
+
+// Follow streamed output only while the reader is at the bottom. Gradio's
+// built-in autoscroll queues a delayed jump per token, so it keeps dragging
+// the reader back down after they start scrolling up.
+(() => {
+  const LOG = '#twil-chat [role="log"]';
+  const NEAR_BOTTOM_PX = 24;
+  let log = null;
+  let pinned = true;
+  let dragging = false;
+
+  const atBottom = () =>
+    log.scrollHeight - log.scrollTop - log.clientHeight <= NEAR_BOTTOM_PX;
+  const follow = () => {
+    if (log && pinned) log.scrollTop = log.scrollHeight;
+  };
+
+  const attach = (el) => {
+    log = el;
+    pinned = true;
+    el.addEventListener("wheel", (e) => { if (e.deltaY < 0) pinned = false; }, { passive: true });
+    el.addEventListener("touchmove", () => { pinned = false; }, { passive: true });
+    el.addEventListener("mousedown", (e) => {
+      if (e.offsetX >= el.clientWidth) dragging = true;
+    });
+    el.addEventListener("scroll", () => {
+      if (atBottom()) pinned = true;
+      else if (dragging) pinned = false;
+    }, { passive: true });
+  };
+
+  document.addEventListener("mouseup", () => { dragging = false; });
+  document.addEventListener("keydown", (e) => {
+    if (log && ["PageUp", "ArrowUp", "Home"].includes(e.key) && log.contains(document.activeElement)) {
+      pinned = false;
+    }
+  });
+  document.addEventListener("click", (e) => {
+    if (e.target.closest("#send-btn, .twil-card-btn")) pinned = true;
+  }, true);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey && e.target.closest?.("#twil-input")) pinned = true;
+  }, true);
+
+  new MutationObserver(() => {
+    const el = document.querySelector(LOG);
+    if (el && el !== log) attach(el);
+    if (pinned) requestAnimationFrame(follow);
+  }).observe(document.documentElement, { childList: true, subtree: true, characterData: true });
+})();
 </script>
 """
 
@@ -415,7 +465,6 @@ footer, .footer, .built-with, .settings, .settings-bar, .show-api,
   overflow-y: auto !important;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
-  scroll-behavior: smooth;
   padding-right: 8px !important;
 }
 #twil-chat .bubble-wrap::-webkit-scrollbar,
@@ -1098,7 +1147,7 @@ with gr.Blocks(fill_height=True, fill_width=True, elem_id="app-root") as demo:
                     elem_id="twil-chat",
                     scale=1,
                     height="100%",
-                    autoscroll=True,
+                    autoscroll=False,
                 )
                 with gr.Row(elem_id="chips-row") as chips_row:
                     chip_btns = [