fix(Chat): ui.Chat() should never scroll a parent element of the chat container element (#1996)

Co-authored-by: Garrick Aden-Buie <garrick@posit.co>

Author: cpsievert

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

@@ -557,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",
@@ -590,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;
   }