Skip to content

Fix/chat scroll continuous streaming#119

Open
santinoo1919 wants to merge 7 commits intodarkresearch:mainfrom
santinoo1919:fix/chat-scroll-continuous-streaming
Open

Fix/chat scroll continuous streaming#119
santinoo1919 wants to merge 7 commits intodarkresearch:mainfrom
santinoo1919:fix/chat-scroll-continuous-streaming

Conversation

@santinoo1919
Copy link

@santinoo1919 santinoo1919 commented Jan 26, 2026

Description

Fixes #54 - Chat scroll behavior now properly handles auto-scrolling during streaming without interrupting user's ability to browse chat history.

Problem:

  • Chat would snap back to bottom when user scrolled up to read historical messages
  • Scroll button flickered 3-4 times when scrolling up during fast streaming
  • Race conditions caused auto-scroll to restart even after user scrolled up

Solution:
Completely refactored useSmartScroll hook with:

  • Scroll direction detection (2px threshold) to distinguish user scroll-up from programmatic scroll
  • Immediate cancellation of auto-scroll when user scrolls up
  • Smart resume when user scrolls back near bottom (50px threshold)
  • Eliminated race conditions by removing dual state tracking and competing timeouts

Key Changes:

  • Simplified hook structure (removed unnecessary useMemo, moved pure functions outside)
  • Added clearTimeoutSafe helper to reduce code duplication
  • Fixed stale closure issues with proper ref management
  • Added scroll direction threshold to prevent false positives during rapid updates

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Release (version bump)

Release

Is this a release? No

Testing

  • ✅ Tested scrolling up during fast streaming - no snap-back behavior
  • ✅ Tested scroll button behavior - stable, no flickering after initial fix
  • ✅ Tested auto-scroll resume when scrolling back down - works correctly
  • ✅ Tested button click scroll-to-bottom - functions properly
  • ✅ Tested with slow and fast streaming scenarios
  • ✅ Verified no console errors or warnings

Acceptance Criteria Met:

  • ✅ Chat stays scrolled to bottom when new content arrives
  • ✅ User can scroll up to browse history without interruption
  • ✅ Auto-scroll resumes when user scrolls back near bottom
  • ✅ Natural, responsive UX that doesn't interfere with user scrolling

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings or errors
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • If releasing, I have verified the version number is correct and follows semantic versioning

Note: Manual testing completed. Automated tests for scroll behavior would require E2E testing setup which is beyond scope of this bug fix.

- Scroll immediately (non-animated) when content arrives during active scrolling
- Extend timeout to keep auto-scroll flag true as long as content keeps arriving
- Prevent scroll button from appearing during streaming
- Simplify code by removing unnecessary retry logic

Fixes issue where auto-scroll would pause randomly during streaming,
causing the scroll-to-bottom button to appear and interrupting the UX.
- Remove dual state tracking (useState + useRef) that caused sync issues
- Eliminate competing timeouts that created race conditions
- Simplify scroll trigger logic to single code path
- Remove Promise wrapper from scrollToBottom for cleaner API
- Better support for rapid streaming updates with instant scrolls
- Reduce complexity from 190 to 170 lines
- Track scroll direction to distinguish user scroll-up from programmatic scroll
- Only cancel auto-scroll when user scrolls away from bottom (scrollY decreasing)
- Fixes 'inertia back to bottom' issue when scrolling up during streaming
- Preserves button click scroll-to-bottom functionality
…tion

- Move checkIfAtBottom outside component as pure function
- Add clearTimeoutSafe helper to reduce code duplication
- Add isAtBottomRef to prevent stale closures in callbacks
- Remove unnecessary useMemo wrapper
- Add scroll direction detection to cancel auto-scroll when user scrolls up
- Fix unused contentWidth parameter

KNOWN ISSUE: Scroll button flickers 3-4 times when scrolling up during fast streaming.
This is due to a race condition where handleContentSizeChange restarts auto-scroll
before isAtBottomRef is updated. Fix requires adding userScrolledUpRef lock to prevent
auto-scroll restart after user scrolls up. Will be addressed in follow-up PR.
- Add SCROLL_DIRECTION_THRESHOLD (2px) to detect scroll direction changes
- Only cancel auto-scroll when user scrolls up by more than 2px
- Prevents false positives during rapid content updates during streaming
- Fixes scroll button flickering issue when scrolling up during fast streaming
Add changeset documenting the chat scroll behavior improvements that fix issue darkresearch#54.
The changeset covers all commits in this PR related to auto-scroll fixes.
- Add contentSizeChangeTimeoutRef to track previously untracked timeout
- Add cleanup useEffect to clear all timeouts on component unmount
- Prevents React warnings about state updates on unmounted components
- Prevents memory leaks from pending timeouts
- Addresses Vercel bot feedback
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chat screen should stay scrolled to bottom for latest messages without interrupting user history browsing

2 participants