Improve Chat()'s auto-scroll behavior (#1500)

Author: cpsievert

js/chat/chat.scss

@@ -55,6 +55,7 @@ shiny-chat-container {
   shiny-chat-input {
     margin-top: auto;
     position: sticky;
+    background-color: var(--bs-body-bg, white);
     bottom: 0;
     padding: 0.25rem;
     textarea {
@@ -110,7 +111,6 @@ pre:has(.code-copy-button) {
   border: 0;
   margin-top: 5px;
   margin-right: 5px;
-  z-index: 3;
   background-color: transparent;
 
   > .bi {

js/chat/chat.ts

@@ -23,6 +23,10 @@ type ShinyChatMessage = {
   obj: Message;
 };
 
+type requestScrollEvent = {
+  cancelIfScrolledUp: boolean;
+};
+
 // https://github.com/microsoft/TypeScript/issues/28357#issuecomment-748550734
 declare global {
   interface GlobalEventHandlersEventMap {
@@ -32,6 +36,7 @@ declare global {
     "shiny-chat-clear-messages": CustomEvent;
     "shiny-chat-set-user-input": CustomEvent<string>;
     "shiny-chat-remove-loading-message": CustomEvent;
+    "shiny-chat-request-scroll": CustomEvent<requestScrollEvent>;
   }
 }
 
@@ -41,6 +46,16 @@ const CHAT_MESSAGES_TAG = "shiny-chat-messages";
 const CHAT_INPUT_TAG = "shiny-chat-input";
 const CHAT_CONTAINER_TAG = "shiny-chat-container";
 
+const requestScroll = (el: HTMLElement, cancelIfScrolledUp = false) => {
+  el.dispatchEvent(
+    new CustomEvent("shiny-chat-request-scroll", {
+      detail: { cancelIfScrolledUp },
+      bubbles: true,
+      composed: true,
+    })
+  );
+};
+
 // https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot
 class LightElement extends LitElement {
   createRenderRoot() {
@@ -51,6 +66,7 @@ class LightElement extends LitElement {
 class ChatMessage extends LightElement {
   @property() content = "...";
   @property() content_type: ContentType = "markdown";
+  @property({ type: Boolean, reflect: true }) is_streaming = false;
 
   render(): ReturnType<LitElement["render"]> {
     let content;
@@ -77,6 +93,9 @@ class ChatMessage extends LightElement {
   updated(changedProperties: Map<string, unknown>): void {
     if (changedProperties.has("content")) {
       this.#highlightAndCodeCopy();
+      // It's important that the scroll request happens at this point in time, since
+      // otherwise, the content may not be fully rendered yet
+      requestScroll(this, this.is_streaming);
     }
   }
 
@@ -225,6 +244,8 @@ class ChatContainer extends LightElement {
     return this.querySelector(CHAT_MESSAGES_TAG) as ChatMessages;
   }
 
+  private resizeObserver!: ResizeObserver;
+
   render(): ReturnType<LitElement["render"]> {
     const input_id = this.id + "_user_input";
     return html`
@@ -252,6 +273,10 @@ class ChatContainer extends LightElement {
       "shiny-chat-remove-loading-message",
       this.#onRemoveLoadingMessage
     );
+    this.addEventListener("shiny-chat-request-scroll", this.#onRequestScroll);
+
+    this.resizeObserver = new ResizeObserver(() => requestScroll(this, true));
+    this.resizeObserver.observe(this);
   }
 
   disconnectedCallback(): void {
@@ -269,6 +294,12 @@ class ChatContainer extends LightElement {
       "shiny-chat-remove-loading-message",
       this.#onRemoveLoadingMessage
     );
+    this.removeEventListener(
+      "shiny-chat-request-scroll",
+      this.#onRequestScroll
+    );
+
+    this.resizeObserver.disconnect();
   }
 
   // When user submits input, append it to the chat, and add a loading message
@@ -290,9 +321,6 @@ class ChatContainer extends LightElement {
     const msg = createElement(TAG_NAME, message);
     this.messages.appendChild(msg);
 
-    // Scroll to the bottom to show the new message
-    this.#scrollToBottom();
-
     if (finalize) {
       this.#finalizeMessage();
     }
@@ -325,26 +353,18 @@ class ChatContainer extends LightElement {
       this.#appendMessage(message, false);
       return;
     }
-    if (message.chunk_type === "message_end") {
-      this.#finalizeMessage();
-      return;
-    }
 
-    const messages = this.messages;
-    const lastMessage = messages.lastElementChild as HTMLElement;
+    const lastMessage = this.messages.lastElementChild as HTMLElement;
     if (!lastMessage) throw new Error("No messages found in the chat output");
-    const content = lastMessage.getAttribute("content");
-    lastMessage.setAttribute("content", message.content);
 
-    // Don't scroll to bottom if the user has scrolled up a bit
-    if (
-      messages.scrollTop + messages.clientHeight <
-      messages.scrollHeight - 50
-    ) {
+    if (message.chunk_type === "message_end") {
+      lastMessage.removeAttribute("is_streaming");
+      this.#finalizeMessage();
       return;
     }
 
-    this.#scrollToBottom();
+    lastMessage.setAttribute("is_streaming", "");
+    lastMessage.setAttribute("content", message.content);
   }
 
   #onClear(): void {
@@ -364,8 +384,20 @@ class ChatContainer extends LightElement {
     this.input.disabled = false;
   }
 
-  #scrollToBottom(): void {
-    this.messages.scrollTop = this.messages.scrollHeight;
+  #onRequestScroll(event: CustomEvent<requestScrollEvent>): void {
+    // When streaming or resizing, only scroll if the user near the bottom
+    const { cancelIfScrolledUp } = event.detail;
+    if (cancelIfScrolledUp) {
+      if (this.scrollTop + this.clientHeight < this.scrollHeight - 50) {
+        return;
+      }
+    }
+
+    // Smooth scroll to the bottom if we're not streaming or resizing
+    this.scroll({
+      top: this.scrollHeight,
+      behavior: cancelIfScrolledUp ? "auto" : "smooth",
+    });
   }
 }