Merge pull request #5290 from uinstinct/smooth-scroll-chat

add smooth scrolling to chat

Author: Patrick-Erichsen

extensions/vscode/e2e/tests/GUI.test.ts

@@ -400,6 +400,8 @@ describe("GUI Test", () => {
         GUISelectors.getThreadMessageByText(view, llmResponse),
       );
 
+      await new Promise(resolve=>setTimeout(resolve, 500));
+
       const viewportHeight = await driver.executeScript(
         "return window.innerHeight",
       );

gui/src/pages/gui/useAutoScroll.ts

@@ -9,6 +9,17 @@ export const useAutoScroll = (
   useEffect(() => {
     if (history.length) {
       setUserHasScrolled(false);
+      if (ref.current) {
+        // smooth scroll to the bottom of the chat
+        ref.current.style.scrollBehavior = "smooth";
+        ref.current.scrollTop = ref.current.scrollHeight;
+        
+        // use 100 ms delay to scroll to restore the scroll and wait for the chat to be scrolled
+        const timer = setTimeout(() => { 
+          ref.current!.style.scrollBehavior = "auto";
+          clearTimeout(timer);
+        }, 100); 
+      }
     }
   }, [history.length]);