Skip to content

Conversation

gary149
Copy link
Owner

@gary149 gary149 commented Sep 9, 2025

This PR replaces the old “ScrollToPreviousBtn” with a new dot‑based user message navigator that makes it easy to jump between user messages in long chats.

What’s in

  • New src/lib/components/UserMessageNav.svelte:
    • Shows only when there are >2 user messages.
    • Uses IntersectionObserver to highlight the message nearest the top of the scroll container.
    • Tap a dot to smooth‑scroll to that user message with a small top offset so it’s not glued to the viewport.
    • Accessible: listbox/options, ARIA labels, focus ring.
    • Mobile: visible and positioned above the bottom “scroll to bottom” button.
    • Styling: semi‑opaque rail, inactive dots with opacity, active dot filled.
  • ChatWindow.svelte integration: remove up button usage and mount UserMessageNav above the existing ScrollToBottomBtn.

Implementation notes

  • Observers are non‑reactive locals to avoid reactive loops; updates coalesced by IntersectionObserver.
  • MutationObserver watches only for message add/remove (not subtree text) to stay efficient while messages stream.

Out of scope

  • Left unrelated svelte‑check errors untouched; this PR is UI‑focused and avoids server/migration code changes.

Happy to tweak sizes/spacing or thresholds if you prefer different ergonomics.

Removed ScrollToPreviousBtn and introduced UserMessageNav for improved user message navigation in ChatWindow. Updated ScrollToBottomBtn styles for consistency. UserMessageNav provides a dot-based navigation UI for jumping between user messages.
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.

1 participant