Merge pull request #177 from sourcery-ai/ben/sou-1485-feat-if-user-scrolls-up-during-a-code-generation-stop-auto

bm424 · web-flow · commit ddd7b892d0b6 · 2023-06-30T10:15:06.000+01:00
fix: scroll message window to bottom, unless the user has scrolled up
diff --git a/media/chat.css b/media/chat.css
@@ -25,6 +25,7 @@
   margin: 0;
   display: flex;
   flex-direction: column;
+  overflow-y: scroll;
 }
 
 .sidebar__chat-assistant--chat-bubble {
diff --git a/src/chat.ts b/src/chat.ts
@@ -252,9 +252,10 @@ export class ChatProvider implements vscode.WebviewViewProvider {
 
 			</head>
 			<body class="sidebar__chat-assistant-body">
-                <section class="sidebar__section-container active" data-section="chat-assistant">
+                <section id="message-container" class="sidebar__section-container active" data-section="chat-assistant">
                   <ul class="sidebar__chat-assistant--dialogue-container">
-  
+                    
+                    <li id="anchor"></li>
                   </ul>
                 </section>
                 <footer class="sidebar__chat-assistant--footer">
diff --git a/src/webview/chat.js b/src/webview/chat.js
@@ -9,6 +9,11 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
 <span class="sidebar__chat-assistant--agent-avatar-image">🧙🏻‍♂️</span>
 </div>`;
 
+// This is a little larger than the (empirical) number of pixels the window might scroll by when
+// a new line is added. If the line is less than this, we should try to keep scrolling with the window.
+// See `stickyScrollToBottom` below.
+const LINE_HEIGHT = 36;
+
 // This script will be run within the webview itself
 // It cannot access the main VS Code APIs directly.
 (function () {
@@ -28,6 +33,8 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
     cancelButton.onclick = sendCancelRequest;
   }
 
+  const messageContainer = document.getElementById("message-container");
+
   // Hold the current assistant message so we can direct streaming responses to it
   let currentAssistantMessage;
   let thinkingMessage;
@@ -54,7 +61,7 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
   window.addEventListener("message", (event) => {
     const message = event.data;
     if (message.command === "add_result") {
-      addMessageToUI(message.result);
+      withStickyScroll(addMessageToUI)(message.result);
     } else if (message.command === "clear_chat") {
       clearAllMessages();
     } else if (message.command === "focus") {
@@ -104,7 +111,6 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
     );
     userMessageElement.innerHTML = templateMessage;
     chatContainer.append(userMessageElement);
-    userMessageElement.scrollIntoView();
   }
 
   function addMessageToUI(result) {
@@ -116,6 +122,26 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
     }
   }
 
+  function withStickyScroll(wrapped) {
+    return function () {
+      const { scrollHeight: scrollHeightBefore } = messageContainer;
+      wrapped.apply(this, arguments);
+      const { scrollHeight: scrollHeightAfter } = messageContainer;
+      stickyScrollToBottom(scrollHeightAfter - scrollHeightBefore);
+    };
+  }
+
+  // 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) {
+      messageContainer.scrollTop = scrollHeight - clientHeight;
+    }
+  }
+
   // Function to add an assistant message or add to the existing one
   function addAssistantMessageToUI(message) {
     cancelButton.disabled = false;
@@ -126,9 +152,6 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
 
     const replaceCurrentAssistantMessage = () => {
       currentAssistantMessage.innerHTML = message.textContent;
-
-      // Scroll the bottom into view
-      currentAssistantMessage.scrollIntoView(false);
     };
 
     if (currentAssistantMessage != null && message.outcome !== "error") {
@@ -170,7 +193,6 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
     }
     thinkingMessage = thinkingMessageElement;
     chatContainer.append(thinkingMessage);
-    thinkingMessage.scrollIntoView();
   }
 
   // Enable/Disable send button depending on whether text area is empty

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@`
`25`	`25`	`margin: 0;`
`26`	`26`	`display: flex;`
`27`	`27`	`flex-direction: column;`
	`28`	`+ overflow-y: scroll;`
`28`	`29`	`}`
`29`	`30`
`30`	`31`	`.sidebar__chat-assistant--chat-bubble {`