Claude/message scroll to top x i3o8 #194
Conversation
Implement a UX pattern where sending a message scrolls the user's message to the top of the viewport, with the AI response streaming below into the empty space. This is a common pattern in chat apps like ChatGPT and Claude. Changes: - Add useMessageScroll hook for pixel-based scroll positioning - Add data-message-id attributes to messages for DOM targeting - Update ChatMessagesArea to auto-detect and scroll to new user messages - Remove setTimeout scrollToBottom hacks from chat views The implementation is designed for future virtualization compatibility: - Uses pixel-based scrolling (not index-based) - Targets elements by data attributes - Works with react-window, react-virtualized, or similar libs
Extend the scroll-to-user-message UX pattern to the sidebar chat: - Add data-message-id attributes to CompactMessageRenderer - Integrate useMessageScroll hook in SidebarChatTab - Remove old scrollToBottom setTimeout pattern This ensures consistent chat UX across both main chat interfaces and the sidebar, matching mobile chat app behavior.
|
Warning Rate limit exceeded@2witstudios has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 7 minutes and 23 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (9)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: eed6305f86
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if ( | ||
| lastUserMessageId && | ||
| lastUserMessageId !== prevLastUserMessageIdRef.current && | ||
| !isLoading | ||
| ) { |
There was a problem hiding this comment.
This effect only scrolls when lastUserMessageId changes, but the ref is initialized with the current value, so on first render of an existing conversation it never fires. Since the previous unconditional scrollToBottom was removed, the viewport stays at scrollTop 0 and users see the oldest messages instead of the latest (and streaming replies can appear out of view) when opening/switching chats. Consider triggering a one-time scroll after messages finish loading or when the first non-empty message list arrives.
Useful? React with 👍 / 👎.
No description provided.