From 6a21c4d020c6465513f606098b6cae575f871299 Mon Sep 17 00:00:00 2001
From: Xuan Son Nguyen <son@huggingface.co>
Date: Wed, 6 Nov 2024 15:14:58 +0100
Subject: [PATCH] better auto scroll

---
 examples/server/public/index.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/server/public/index.html b/examples/server/public/index.html
index 379f2ffd4..c4614bbab 100644
--- a/examples/server/public/index.html
+++ b/examples/server/public/index.html
@@ -332,9 +332,13 @@
     };
 
     // scroll to bottom of chat messages
-    const chatScrollToBottom = () => {
+    // if requiresNearBottom is true, only auto-scroll if user is near bottom
+    const chatScrollToBottom = (requiresNearBottom) => {
       const msgListElem = document.getElementById('messages-list');
-      setTimeout(() => msgListElem.scrollTo({ top: msgListElem.scrollHeight }), 1);
+      const spaceToBottom = msgListElem.scrollHeight - msgListElem.scrollTop - msgListElem.clientHeight;
+      if (!requiresNearBottom || (spaceToBottom < 100)) {
+        setTimeout(() => msgListElem.scrollTo({ top: msgListElem.scrollHeight }), 1);
+      }
     };
 
     const mainApp = createApp({
@@ -364,7 +368,7 @@
         // scroll to the bottom when the pending message height is updated
         const pendingMsgElem = document.getElementById('pending-msg');
         const resizeObserver = new ResizeObserver(() => {
-          if (this.isGenerating) chatScrollToBottom();
+          if (this.isGenerating) chatScrollToBottom(true);
         });
         resizeObserver.observe(pendingMsgElem);
       },
@@ -413,6 +417,7 @@
           this.inputMsg = '';
           this.editingMsg = null;
           this.generateMessage(currConvId);
+          chatScrollToBottom();
         },
         async generateMessage(currConvId) {
           if (this.isGenerating) return;