Merge branch 'main' into run-py-shiny-template-tests

Author: karangattu

CHANGELOG.md

@@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Fix missing session when trying to display an error duing bookmarking. (#1984)
 
+* Fixed an issue with `ui.Chat()` sometimes wanting to scroll a parent element. (#1996)
+
 
 ## [1.4.0] - 2025-04-08
 

js/chat/chat.ts

@@ -131,8 +131,6 @@ interface ChatInputSetInputOptions {
 }
 
 class ChatInput extends LightElement {
-  private _disabled = false;
-
   @property() placeholder = "Enter a message...";
   // disabled is reflected manually because `reflect: true` doesn't work with LightElement
   @property({ type: Boolean })
@@ -155,6 +153,27 @@ class ChatInput extends LightElement {
     this.#onInput();
   }
 
+  private _disabled = false;
+  inputVisibleObserver?: IntersectionObserver;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.inputVisibleObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) this.#updateHeight();
+      });
+    });
+
+    this.inputVisibleObserver.observe(this);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.inputVisibleObserver?.disconnect();
+    this.inputVisibleObserver = undefined;
+  }
+
   attributeChangedCallback(
     name: string,
     _old: string | null,
@@ -189,7 +208,7 @@ class ChatInput extends LightElement {
     return html`
       <textarea
         id="${this.id}"
-        class="form-control textarea-autoresize"
+        class="form-control"
         rows="1"
         placeholder="${this.placeholder}"
         @keydown=${this.#onKeyDown}
@@ -217,6 +236,7 @@ class ChatInput extends LightElement {
   }
 
   #onInput(): void {
+    this.#updateHeight();
     this.button.disabled = this.disabled
       ? true
       : this.value.trim().length === 0;
@@ -247,6 +267,15 @@ class ChatInput extends LightElement {
     if (focus) this.textarea.focus();
   }
 
+  #updateHeight(): void {
+    const el = this.textarea;
+    if (el.scrollHeight == 0) {
+      return;
+    }
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }
+
   setInputValue(
     value: string,
     { submit = false, focus = false }: ChatInputSetInputOptions = {}
@@ -528,11 +557,19 @@ class ChatContainer extends LightElement {
 
 // ------- Register custom elements and shiny bindings ---------
 
-customElements.define(CHAT_MESSAGE_TAG, ChatMessage);
-customElements.define(CHAT_USER_MESSAGE_TAG, ChatUserMessage);
-customElements.define(CHAT_MESSAGES_TAG, ChatMessages);
-customElements.define(CHAT_INPUT_TAG, ChatInput);
-customElements.define(CHAT_CONTAINER_TAG, ChatContainer);
+const chatCustomElements = [
+  { tag: CHAT_MESSAGE_TAG, component: ChatMessage },
+  { tag: CHAT_USER_MESSAGE_TAG, component: ChatUserMessage },
+  { tag: CHAT_MESSAGES_TAG, component: ChatMessages },
+  { tag: CHAT_INPUT_TAG, component: ChatInput },
+  { tag: CHAT_CONTAINER_TAG, component: ChatContainer }
+];
+
+chatCustomElements.forEach(({ tag, component }) => {
+  if (!customElements.get(tag)) {
+    customElements.define(tag, component);
+  }
+});
 
 window.Shiny.addCustomMessageHandler(
   "shinyChatMessage",
@@ -561,3 +598,5 @@ window.Shiny.addCustomMessageHandler(
     el.dispatchEvent(evt);
   }
 );
+
+export { CHAT_CONTAINER_TAG };

js/markdown-stream/markdown-stream.ts

@@ -6,6 +6,8 @@ import ClipboardJS from "clipboard";
 import hljs from "highlight.js/lib/common";
 import { Renderer, parse } from "marked";
 
+import { CHAT_CONTAINER_TAG } from "../chat/chat";
+
 import {
   LightElement,
   createElement,
@@ -282,6 +284,12 @@ class MarkdownElement extends LightElement {
     while (el) {
       if (el.scrollHeight > el.clientHeight) return el;
       el = el.parentElement;
+      if (el?.tagName === CHAT_CONTAINER_TAG) {
+        // This ensures that we do not accidentally scroll a parent element of the chat
+        // container. If the chat container itself is scrollable, a scrollable element
+        // would already have been identified.
+        break;
+      }
     }
     return null;
   }