Prevent AI panel auto-scroll when user scrolls up #2677
Conversation
When the AI is streaming responses, the panel would continuously auto-scroll to the bottom, making it impossible to read earlier parts of the response. This change detects when the user has manually scrolled up (more than 50px from bottom) and stops auto-scrolling until they scroll back near the bottom. - Add scroll event listener to detect manual user scrolling - Track userHasScrolledUp state - Only auto-scroll if user is at/near bottom - Improves readability of long AI responses 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
|
|
Warning Rate limit exceeded@stevenvo has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 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 (1)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis change adds user-driven scroll tracking to the AI panel messages component to prevent automatic scrolling when users manually scroll up. It introduces two refs to track scroll state and adds a scroll event listener that detects when the user is more than 50px away from the bottom. Auto-scroll behavior is now conditional on whether the user has scrolled up, affecting triggers on message changes, panel open events, and status changes. The scroll state is reset after auto-scrolling completes. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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.
ℹ️ 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".
| const handleScroll = () => { | ||
| // Ignore scroll events triggered by our auto-scroll | ||
| if (isAutoScrolling.current) return; |
There was a problem hiding this comment.
During streaming, scrollToBottom marks isAutoScrolling true for 100ms on every new message; because this handler exits early when that flag is set, user scroll events occurring while tokens stream faster than that interval are never recorded as userHasScrolledUp. In practice the panel keeps auto-scrolling to the bottom even if the user scrolls up mid-stream, defeating the regression fix whenever messages arrive more often than 100ms.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
frontend/app/aipanel/aipanelmessages.tsx (3)
29-35: Consider documenting the 100ms timeout.The 100ms delay is a reasonable heuristic to allow scroll events to settle before re-enabling user scroll detection. A brief inline comment explaining why this specific duration was chosen would help future maintainers.
userHasScrolledUp.current = false; + // Delay resetting auto-scroll flag to allow scroll events to settle setTimeout(() => { isAutoScrolling.current = false; }, 100);
59-60: Add passive option for better scroll performance.The PR description mentions using a passive scroll event listener, but the
passiveoption isn't set. Adding{ passive: true }improves scroll performance by telling the browser thatpreventDefault()won't be called.- container.addEventListener("scroll", handleScroll); - return () => container.removeEventListener("scroll", handleScroll); + container.addEventListener("scroll", handleScroll, { passive: true }); + return () => container.removeEventListener("scroll", handleScroll, { passive: true });
20-20: Remove unusedmessagesEndRef.The
messagesEndRef(line 20) and its corresponding div (line 117) appear to be unused. ThescrollToBottomfunction now usescontainer.scrollTopdirectly instead of scrolling to the end element. Consider removing this dead code.Remove the unused ref declaration at line 20:
- const messagesEndRef = useRef<HTMLDivElement>(null);And remove the unused div at line 117:
- <div ref={messagesEndRef} />Also applies to: 117-117
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/app/aipanel/aipanelmessages.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/app/aipanel/aipanelmessages.tsx (1)
frontend/app/aipanel/waveai-model.tsx (1)
scrollToBottom(288-290)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: merge-gatekeeper
🔇 Additional comments (4)
frontend/app/aipanel/aipanelmessages.tsx (4)
23-24: LGTM!Using refs for scroll state tracking is the right choice here since these values shouldn't trigger re-renders and need to be accessed synchronously in event handlers.
67-72: LGTM!The conditional auto-scroll correctly respects user intent by checking
userHasScrolledUpbefore scrolling on message updates. This is the core fix for the PR objective.
74-78: Consider resetting scroll state when panel reopens.When the panel is closed and reopened, the current implementation preserves
userHasScrolledUpstate. This means if a user scrolled up, closed the panel, and reopened it, auto-scroll would still be disabled. Consider whether a fresh panel open should reset the scroll state.useEffect(() => { - if (isPanelOpen && !userHasScrolledUp.current) { + if (isPanelOpen) { + userHasScrolledUp.current = false; scrollToBottom(); } }, [isPanelOpen]);
80-91: LGTM!The streaming completion handler correctly respects user scroll position. Using
requestAnimationFrameensures the DOM is settled before scrolling, and theuserHasScrolledUpcheck preserves the user's reading position after streaming ends.
stevenvo
force-pushed
the
feature/ai-panel-scroll-behavior
branch
from
cacd60a to
e0f7770
Compare
2 participants
Summary
Fixes the annoying behavior where the AI panel continuously auto-scrolls to the bottom while streaming, making it impossible to read earlier parts of long responses.
Problem
When the AI is generating a long response, the panel auto-scrolls to show new content. If you try to scroll up to read something earlier, it immediately scrolls you back down, making it very frustrating to read.
Solution
Test Plan
🤖 Generated with Claude Code