Refactor scroll behavior

internal/service/static/main.js

@@ -76,7 +76,6 @@ class Odidere {
     this.isTranscribing = false;
     this.isMuted = false;
     this.isResetPending = false;
-    this.isScrollPending = false;
     this.isStopPending = false;
     this.pendingDeleteId = null;
     // Promise for the currently in-flight runTurn, so reset() can await it.
@@ -173,7 +172,7 @@ class Odidere {
     }
     this.pendingDeleteId = null;
     this.conversation.clear();
-    this.renderer.setAutoScroll(true);
+    this.renderer.setAutoScroll(false);
     this.renderer.clearChat();
     this.systemMessage = localStorage.getItem(SYSTEM_MESSAGE_KEY) || '';
     this.renderer.renderSystemMessage(this.systemMessage);
@@ -232,10 +231,7 @@ class Odidere {
     // --- Chat scroll ---
     this.renderer.$chat.addEventListener(
       'scroll',
-      () => {
-        this.renderer.updateScrollIcon();
-        this.renderer.handleChatScroll();
-      },
+      () => this.renderer.handleChatScroll(),
       { passive: true },
     );
     this.renderer.updateScrollIcon();
@@ -309,7 +305,6 @@ class Odidere {
     // Cancel pending states for other actions.
     if (action !== 'reset') this._cancelResetPending();
     if (action !== 'send') this._cancelStopPending();
-    if (action !== 'scroll') this._cancelScrollPending();
     if (action !== 'delete') this._cancelDeletePending();
 
     this.handleAction(action, event, $target);
@@ -591,7 +586,8 @@ class Odidere {
    */
   async runTurn({ text = '', detectedLanguage = '', voice } = {}) {
     this.setLoadingState(true);
-    this.renderer.setAutoScroll(true);
+    // Follow state is sticky across turns; runTurn does not reset it. It turns
+    // off only when the user scrolls up or presses the up arrow. Off at load.
     this.currentController = new AbortController();
 
     this._currentRun = (async () => {
@@ -653,6 +649,13 @@ class Odidere {
           if (voice) meta.voice = voice;
           const appended = this.conversation.append([userMessage], meta);
           this.renderer.renderMessages(appended, meta);
+          // When not following, anchor the new user message to the top so the
+          // reply grows below it. When following, let streaming pin the bottom.
+          if (this.renderer.isAutoScrollEnabled) {
+            this.renderer.scrollToBottom();
+          } else {
+            this.renderer.scrollToLastUserMessage();
+          }
         }
 
         const res = await fetch(STREAM_ENDPOINT, {
@@ -1228,28 +1231,21 @@ class Odidere {
   }
 
   _handleScrollClick() {
-    if (this.isScrollPending) {
-      this.isScrollPending = false;
-      this.$scroll.classList.remove('footer__toolbar-btn--pending');
-      const $chat = this.renderer.$chat;
-      if (this.renderer.isAtBottom()) {
-        $chat.scrollTo({ top: 0, behavior: 'smooth' });
-      } else {
-        $chat.scrollTo({ top: $chat.scrollHeight, behavior: 'smooth' });
-      }
-      this.renderer.updateScrollIcon();
+    const $chat = this.renderer.$chat;
+    if (this.renderer.isAutoScrollEnabled) {
+      // Following -> release and jump to the top of the conversation.
+      this.renderer.setAutoScroll(false);
+      $chat.scrollTop = 0;
     } else {
-      this.isScrollPending = true;
-      this.$scroll.classList.add('footer__toolbar-btn--pending');
+      // Not following -> jump to the bottom and start following. Use an
+      // instant jump (not smooth): a smooth scroll fires intermediate scroll
+      // events that handleChatScroll would read as "far from bottom" and
+      // immediately disable following again, requiring a second press.
+      $chat.scrollTop = $chat.scrollHeight;
+      this.renderer.setAutoScroll(true);
     }
   }
 
-  _cancelScrollPending() {
-    if (!this.isScrollPending) return;
-    this.isScrollPending = false;
-    this.$scroll.classList.remove('footer__toolbar-btn--pending');
-  }
-
   _handleDelete(event, messageId, field, toolCallId, $btn) {
     event.stopPropagation();
     const deleteKey = field
@@ -1345,7 +1341,6 @@ class Odidere {
   _cancelAllPending() {
     this._cancelResetPending();
     this._cancelStopPending();
-    this._cancelScrollPending();
     this._cancelDeletePending();
   }