feat: improve conversation scrolling and loading states effectively#2423
feat: improve conversation scrolling and loading states effectively#2423siiddhantt wants to merge 3 commits intoarc53:mainfrom
Conversation
siiddhantt
commented
Apr 22, 2026
siiddhantt
commented
- Added meta tags for mobile web app capabilities in index.html.
- Introduced loading state management for agents in Navigation component.
- Updated NewAgent component to handle agent chunks as strings.
- Enhanced Conversation component to display loading indicators for agents.
- Improved ConversationBubble styles and interactions for better UX.
- Adjusted ConversationMessages to manage scrolling and loading states effectively.
- Refactored useMediaQuery hook for better performance and responsiveness.
- Updated CSS for consistent styling and animations.
- Extended preferenceSlice to include agent loading state.
- Initialized agent loading state in the Redux store.
- Added meta tags for mobile web app capabilities in index.html. - Introduced loading state management for agents in Navigation component. - Updated NewAgent component to handle agent chunks as strings. - Enhanced Conversation component to display loading indicators for agents. - Improved ConversationBubble styles and interactions for better UX. - Adjusted ConversationMessages to manage scrolling and loading states effectively. - Refactored useMediaQuery hook for better performance and responsiveness. - Updated CSS for consistent styling and animations. - Extended preferenceSlice to include agent loading state. - Initialized agent loading state in the Redux store.
|
@siiddhantt is attempting to deploy a commit to the Arc53 Team on Vercel. A member of the Team first needs to authorize it. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2423 +/- ##
==========================================
- Coverage 91.37% 91.21% -0.16%
==========================================
Files 221 228 +7
Lines 19269 19529 +260
==========================================
+ Hits 17607 17814 +207
- Misses 1662 1715 +53 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
ManishMadan2882
left a comment
ManishMadan2882
left a comment
There was a problem hiding this comment.
Hey @siiddhantt noticed few issues in the scrolling mechanism which potentially break the intended UX for the scroll.
Regression: autoscroll vs. user scroll "tug-of-war" during streaming
reintroduces the behavior that was intentionally fixed in #420e9d3 ((feat) conversation: scroll experience). When the user scrolls upward while a response is streaming, the view snaps back to the bottom instead of respecting the user's intent.
Repro
- Send a prompt that yields a long streamed response.
- While it's streaming and the view is pinned to the bottom, wheel/touch upward by a small amount (a few px).
- Observe: the viewport is pulled back down on the next streamed chunk. Only scrolls larger than SCROLL_THRESHOLD (10px) in a single event survive.
| if (isNewMessage) { | ||
| userInterruptedRef.current = false; | ||
| setInterrupted(false); | ||
| scrollToBottom(true); |
There was a problem hiding this comment.
changes the auto-scroll on a new message from smooth to instant, which I believe is a regression from the previous UX.
could you confirm if this is intentional?
There was a problem hiding this comment.
there was an issue with the mermaid component being rendered while streaming of the answers that got fixed thru this, I've made some changes now to improve the scroll and keep it working without breaking with mermaid
| }, | ||
| [isAtBottom, setButtonHidden], | ||
| ); | ||
| const scrollToBottom = useCallback((instant = true) => { |
There was a problem hiding this comment.
changes the intended UX, the scrollToBottom is turned instant by default.
|
@ManishMadan2882 if you could check out the new changes and how the scroll feels now, do lmk thanks!
|
2 participants
