Fix scroll auto-jump and message visibility issues

[EricBlanquer]

Description

Fixes two related scroll issues that impacted user experience when viewing message history.

Issues Fixed

1. Auto-scroll jumping to bottom when loading older messages

Problem: When scrolling up to view previous messages, the UI would automatically jump back to the bottom.

Root cause: The auto-scroll useEffect (line 4055) triggered on every chatMessages.length change, including when pagination loaded older messages. It didn't check if the length change was due to pagination.

Fix: Added check for isLoadingMoreRef.current to skip auto-scroll during pagination loading.

2. Limited message visibility (only 100 messages visible)

Problem: Even though pagination loaded 260+ messages, only the last 100 were visible. Users couldn't scroll to see the loaded history.

Root cause: visibleMessageCount was initialized to 100 and never updated when:

• Loading a session with more than 100 messages
• Pagination loaded additional messages

Fix:

• Initialize visibleMessageCount to Math.max(100, messages.length) on session load
• Increase visibleMessageCount by the number of messages loaded during pagination
• Reset to 100 when clearing session

Changes

ChatInterface.jsx

1. Line 4059-4061: Skip auto-scroll if loading older messages (pagination)
2. Line 3058: Set visible count for Cursor sessions based on loaded messages
3. Line 3071: Set visible count for Claude/Codex sessions based on loaded messages
4. Line 2955: Increase visible count when pagination loads more messages
5. Line 3089: Reset visible count to default when clearing session

Testing

✅ Tested: Can scroll up to view history without auto-jump to bottom
✅ Tested: All loaded messages are now visible (not limited to 100)
✅ Tested: Pagination works seamlessly with the visibility system

Impact

• Improved UX: Users can freely browse message history
• Better pagination: Loaded messages are actually visible
• Maintains performance: Still uses visibility limiting for very long conversations

Summary by CodeRabbit

• Bug Fixes

  • Prevented auto-scroll from interrupting older-message loading so users can page through history without jumpiness.
  • Newly loaded older messages are immediately visible after pagination.

• Improvements

  • Initial message loads ensure at least 100 messages (or the number available) are visible for better context.
  • Clearing a session now reliably resets the visible message count to 100.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The ChatInterface.jsx component updates visibleMessageCount handling: it increases when older messages are prepended during pagination, initializes to at least 100 on session load, resets to 100 on session clear, and skips auto-scroll while older-message pagination is in progress.

Changes

Cohort / File(s)	Summary
Message visibility & pagination src/components/ChatInterface.jsx	Update visibleMessageCount when prepending paginated older messages; set initial session loads (Cursor/Claude) to at least 100 or loaded count; reset to 100 on session clear; skip auto-scroll if isLoadingMoreRef.current (pagination) is active.

Sequence Diagram(s)

(omitted — changes are localized state/UX adjustments without multi-component sequential flow)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• fix: normalize file path handling and improve scroll position restoration #288: Modifies ChatInterface.jsx pagination and scroll behavior, using isLoadingMoreRef guard similar to this PR.

Suggested reviewers

• viper151

Poem

🐰 I nibble logs and hop through code,

Older chats appear on the road.
Visible counts now stretch and grow,
No sudden scroll, just steady flow.
Hooray — the rabbit winks, then goes! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix scroll auto-jump and message visibility issues' directly summarizes the main changes: it addresses auto-scroll jumping when loading older messages and message visibility limits.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/ChatInterface.jsx`:
- Around line 4064-4067: The auto-scroll guard can be bypassed because
isLoadingMoreRef.current is reset synchronously in loadOlderMessages' finally
block; change the finally block so it defers clearing isLoadingMoreRef.current
to the next tick (e.g., wrap the assignment in setTimeout(() => {
isLoadingMoreRef.current = false; }, 0)) so the effect that checks
isLoadingMoreRef during the pending render still sees it as true and auto-scroll
is correctly skipped. Update only loadOlderMessages' finally cleanup and keep
the existing guard that checks isLoadingMoreRef.current in the scrolling effect.