Merge pull request #189 from sourcery-ai/ben/sou-1540-sending-a-new-chat-request-should-scroll-to-the-bottom-of

feat: scroll to bottom when new messages are sent

Author: bm424

src/webview/chat.js

@@ -71,7 +71,7 @@ const LINE_HEIGHT = 36;
   window.addEventListener("message", (event) => {
     const message = event.data;
     if (message.command === "add_result") {
-      withStickyScroll(addMessageToUI)(message.result);
+      addMessageToUI(message.result);
     } else if (message.command === "clear_chat") {
       clearAllMessages();
     } else if (message.command === "focus") {
@@ -129,32 +129,38 @@ const LINE_HEIGHT = 36;
 
   function addMessageToUI(result) {
     if (result.role === "assistant") {
-      addAssistantMessageToUI(result);
+      withStickyScroll(addAssistantMessageToUI)(result);
     } else {
-      addUserMessageToUI(result.textContent);
-      addAssistantThinkingMessageToUI();
+      withScroll(addUserMessageToUI)(result.textContent);
+      withScroll(addAssistantThinkingMessageToUI)();
     }
   }
 
+  // After the function completes, scroll the message container if it was already scrolled to the bottom
   function withStickyScroll(wrapped) {
     return function () {
       const { scrollHeight: scrollHeightBefore } = messageContainer;
       wrapped.apply(this, arguments);
-      const { scrollHeight: scrollHeightAfter } = messageContainer;
-      stickyScrollToBottom(scrollHeightAfter - scrollHeightBefore);
+      const { scrollHeight, scrollTop, clientHeight } = messageContainer;
+      const scrollDiff = Math.abs(scrollHeight - clientHeight - scrollTop);
+      const isScrolledToBottom =
+        scrollDiff <= scrollHeight - scrollHeightBefore + 1;
+
+      if (isScrolledToBottom) {
+        messageContainer.scrollTop = scrollHeight - clientHeight;
+      }
     };
   }
 
-  // If we're already at the bottom, scroll the bottom into view
-  function stickyScrollToBottom(diff = LINE_HEIGHT) {
-    const { scrollTop, clientHeight, scrollHeight } = messageContainer;
-    const scrollDiff = Math.abs(scrollHeight - clientHeight - scrollTop);
-    const isScrolledToBottom = scrollDiff <= diff + 1;
-
-    if (isScrolledToBottom) {
+  // After the function completes, scroll the message container to the bottom.
+  function withScroll(wrapped) {
+    return function () {
+      wrapped.apply(this, arguments);
+      const { clientHeight, scrollHeight } = messageContainer;
       messageContainer.scrollTop = scrollHeight - clientHeight;
-    }
+    };
   }
+  // If we're already at the bottom, scroll the bottom into view
 
   const setupCopyButton = (block) => {
     if (navigator.clipboard) {