Issue #10: Add auto scroll and scroll to bottom #20
Conversation
|
@Nix4444 is attempting to deploy a commit to the Harsh's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe Chat component now tracks whether the chat view is scrolled to the bottom and provides a function to scroll there. This state and function are passed to ChatInput, which displays a "scroll to bottom" button when the user is not at the bottom. Supporting logic and UI updates were added to both components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Chat
participant ChatInput
participant ScrollButton
User->>Chat: Scrolls or sends message
Chat->>Chat: Updates isAtBottom state
Chat->>ChatInput: Passes isAtBottom and scrollToBottom
ChatInput->>ScrollButton: Renders if isAtBottom is false
User->>ScrollButton: Clicks scroll-to-bottom
ScrollButton->>ChatInput: Calls scrollToBottom
ChatInput->>Chat: Triggers scrollToBottom function
Chat->>Chat: Scrolls chat view to bottom
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
frontend/components/Chat.tsxOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.28.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/components/ChatInput.tsx (1)
287-293: Consider memoizing ScrollButton for consistency.The ScrollButton component should be memoized like other button components in this file for consistency and potential performance benefits.
-const ScrollButton = ({ scrollToBottom }: ScrollButtonProps) => { +const PureScrollButton = ({ scrollToBottom }: ScrollButtonProps) => { return ( <Button className="rounded-full h-8 w-8" variant="default" size="icon" onClick={scrollToBottom} aria-label="Scroll to bottom"> <ArrowDownIcon size={18} /> </Button> ); }; + +const ScrollButton = memo(PureScrollButton);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/components/Chat.tsx(4 hunks)frontend/components/ChatInput.tsx(7 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
frontend/components/ChatInput.tsx (1)
frontend/components/ui/button.tsx (1)
Button(59-59)
🔇 Additional comments (11)
frontend/components/Chat.tsx (6)
15-15: LGTM! Import additions are appropriate.The new React hooks imports are correctly added for the scroll functionality implementation.
26-27: LGTM! Ref and state initialization follows React best practices.The
bottomDivReffor targeting the scroll element andisAtBottomstate for tracking scroll position are correctly implemented.
85-87: LGTM! Auto-scroll on thread/message changes is appropriate.This ensures the chat stays at the bottom when switching threads or receiving new messages.
89-101: LGTM! IntersectionObserver implementation is correct.The observer setup properly tracks when the bottom element is visible and includes proper cleanup. The logic correctly updates the
isAtBottomstate based on intersection.
126-127: LGTM! Props are correctly passed to ChatInput.The
scrollToBottomfunction andisAtBottomstate are properly passed down to enable the scroll button functionality.
129-129: LGTM! Bottom div placement is appropriate.The div with
bottomDivRefserves as the scroll target and is correctly positioned at the end of the message list.frontend/components/ChatInput.tsx (5)
1-1: LGTM! Import addition is correct.The
ArrowDownIconimport is properly added for the scroll button icon.
34-35: LGTM! Interface definitions are well-structured.The new props are correctly typed with appropriate function signature and boolean type.
Also applies to: 46-48
64-65: LGTM! Props destructuring is correct.The new props are properly destructured in the function parameters.
142-144: LGTM! Conditional rendering logic is appropriate.The scroll button is correctly shown only when not at bottom, with proper centering layout.
193-193: LGTM! Memoization updated correctly.The memo comparison correctly includes
isAtBottomto ensure the component re-renders when scroll position changes.
|
great work, this looks good, can you post a screen recording of this - navigate chats(both while streaming on/off), new message scroll and button clicking |
|
added a push effect on new message as discussed and removed the interval to scroll down while streaming. |
| scrollToBottom(); | ||
| }, [threadId, messages]); | ||
| if (!threadId) return; | ||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
wrapped twice in requestAnimationFrame to ensure DOM has populated. let me know if this is not right
2 participants
Summary by CodeRabbit
New Features
Enhancements