Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 13, 2025
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 9 additions & 5 deletions js/chat/chat.ts
Original file line number Diff line number Diff line change
Expand Up @@ -528,11 +528,13 @@ 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);
if (!customElements.get(CHAT_MESSAGES_TAG)) {
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);
}

window.Shiny.addCustomMessageHandler(
"shinyChatMessage",
Expand Down Expand Up @@ -561,3 +563,5 @@ window.Shiny.addCustomMessageHandler(
el.dispatchEvent(evt);
}
);

export { CHAT_CONTAINER_TAG };
7 changes: 7 additions & 0 deletions js/markdown-stream/markdown-stream.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -282,6 +284,11 @@ class MarkdownElement extends LightElement {
while (el) {
if (el.scrollHeight > el.clientHeight) return el;
el = el.parentElement;
if (el?.tagName === CHAT_CONTAINER_TAG) {
// Stop searching for scrollable parents if we reach <shiny-chat-container>.
// If the chat is scrollable, a scrollable element would've been found already.
break;
}
}
return null;
}
Expand Down
14 changes: 7 additions & 7 deletions shiny/www/py-shiny/chat/chat.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions shiny/www/py-shiny/chat/chat.js.map

Large diffs are not rendered by default.

96 changes: 66 additions & 30 deletions shiny/www/py-shiny/markdown-stream/markdown-stream.js

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions shiny/www/py-shiny/markdown-stream/markdown-stream.js.map

Large diffs are not rendered by default.

Loading