feat(js): replace custom auto-scroll with use-stick-to-bottom#195
Merged
feat(js): replace custom auto-scroll with use-stick-to-bottom#195
Conversation
Replace the hand-rolled useAutoScroll hook in the chat container with the use-stick-to-bottom library by StackBlitz Labs. The library uses ResizeObserver and velocity-based spring animation for smoother stick-to-bottom behavior during streaming. - Switch from StickToBottom component to useStickToBottom hook so the chat input stays outside the scroll container (preserving the 2-row CSS grid layout) - Add a centered "scroll to bottom" button that appears when the user scrolls away, with a spinning border indicator during streaming - Add breathing room (--shiny-chat-messages-padding-bottom) between the last message and the chat input - Replace IntersectionObserver shadow detection with isAtBottom from the library - Add ResizeObserver mock to vitest setup for jsdom compatibility - Update integration tests to match new scroll management behavior The existing useAutoScroll hook is preserved for the standalone MarkdownStream component.
…ing streaming Use the Shiny pulse gradient (indigo → purple → pink) as a rotating border on the scroll-to-bottom button while the assistant is streaming. Customizable via --shiny-chat-streaming-color CSS variable.
…rver mock - Add -webkit-mask alongside mask for Safari/iOS compatibility on the streaming gradient border - Remove IntersectionObserver mock from vitest setup — no longer used after replacing the sentinel with isAtBottom from use-stick-to-bottom
The use-stick-to-bottom integration added wrapper divs around the messages area, breaking the `> .shiny-chat-messages` direct-child selector. Update `loc_messages` to target `.shiny-chat-messages-content` and add `loc_scroll_container` for the scrollable `.shiny-chat-messages` element.
- Add aria-hidden="true" to chevronDown SVG icon - Add prefers-reduced-motion media query to disable spin animation - Add :focus-visible outline for keyboard users - Increase button padding from 6px to 8px for better target size (32x32) - Use overflow:clip instead of overflow:hidden on wrapper to avoid clipping focus rings
JamesHWade
added a commit
to JamesHWade/shinychat
that referenced
this pull request
Apr 14, 2026
Incorporates three upstream changes: - fix(pkg-py): serialize HTMLDependency in field serializers for bookmarking (posit-dev#189) - fix(pkg-py): re-send HTMLDependency objects on bookmark restore (posit-dev#191) - feat(js): replace custom auto-scroll with use-stick-to-bottom (posit-dev#195) Resolved conflicts in icons.ts (kept dowshinychat icons + upstream chevronDown), CHANGELOG.md (merged both sections), and rebuilt JS assets from source. Updated new test file imports from shinychat to dowshinychat. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Screen.Recording.2026-04-13.at.1.19.35.PM.mov
Summary
useAutoScrollhook with theuse-stick-to-bottomlibrary by StackBlitz Labs, which uses ResizeObserver and velocity-based spring animation for smoother, more reliable auto-scrolling during streaming.--shiny-chat-streaming-color).ChatContainerby removing the custom scroll detection, IntersectionObserver sentinel, and direction-based re-engage logic in favor of the library'sisAtBottom/scrollToBottomAPI.Verification
--shiny-chat-streaming-colorCSS variable can be overridden to customize the gradient colors.