feat: add sticky user message navigation

[roomote]

Related GitHub Issue

Closes: #10690

Roo Code Task Context (Optional)

N/A

Description

This PR attempts to address Issue #10690 by implementing a sticky navigation banner that helps users navigate long conversations more easily.

Key Implementation Details:

• Created a new StickyUserMessageNav component that displays a compact banner at the top of the chat when the user scrolls up past their messages
• The banner shows a truncated preview of the most recent out-of-view user message
• Clicking the banner smoothly scrolls to that message using Virtuoso's scrollToIndex API
• Uses rangeChanged callback from Virtuoso to track the first visible item index
• Added i18n translation strings for accessibility

Files Changed:

• webview-ui/src/components/chat/StickyUserMessageNav.tsx - New component
• webview-ui/src/components/chat/ChatView.tsx - Integration with scroll tracking
• webview-ui/src/i18n/locales/en/chat.json - Translation strings

Test Procedure

1. Start a task with multiple user messages
2. Scroll down to let Roo respond several times
3. Scroll up past your user messages
4. Verify the sticky nav appears showing your last out-of-view message
5. Click the banner to scroll back to that message
6. Verify smooth scrolling behavior

Automated Tests: All existing ChatView tests pass (23/23).

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

N/A (Draft PR - screenshots can be added after visual testing)

Documentation Updates

• No documentation updates are required.

Additional Notes

This is a draft PR. Feedback and guidance are welcome!

Get in Touch

roomote

---

Important

Introduces a sticky navigation banner in chat to navigate to the last out-of-view user message, enhancing user experience.

• Behavior:
  • Adds StickyUserMessageNav component to display a banner when scrolling up past user messages in ChatView.tsx.
  • Banner shows a preview of the last out-of-view user message and scrolls to it on click using scrollToIndex.
  • Utilizes rangeChanged from Virtuoso to track visible items.
• Files:
  • StickyUserMessageNav.tsx: New component for sticky navigation.
  • ChatView.tsx: Integrates sticky navigation and manages scroll tracking.
  • chat.json: Adds translation strings for sticky navigation.

^{This description was created by for 98ad090. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Rooviewer   See task on Roo Cloud

Reviewed the sticky user message navigation feature. Found 1 issue to address:

• The !isAtBottom condition in showStickyNav may prevent the nav from showing in the primary use case (when user is at the bottom wanting to navigate to previous messages)

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

[roomote]

The !isAtBottom condition prevents the sticky nav from showing when the user is at the bottom of the chat. Based on issue #10690, the primary use case is when a user is at the bottom viewing a long AI response and wants to jump back to their previous messages. With this condition, the nav won't appear in that scenario since isAtBottom would be true. Consider removing !isAtBottom or inverting the logic if the intent is to show the nav when user messages are scrolled out of view above.

Suggested change

	return stickyNavMessage !== null && firstVisibleIndex > 0 && !isAtBottom
	return stickyNavMessage !== null && firstVisibleIndex > 0

_{Fix it with Roo Code or mention @roomote and request a fix.}