feat(web): add scroll to bottom pill in chat view

[saishankar404]

long threads had no way to jump back to the bottom once you scrolled up
(other than switching threads and back, which was the workaround mentioned
in #548).

adds a small "Scroll to bottom" pill that shows up between the message list
and the input box when you've scrolled away from the bottom. clicking it
smooth-scrolls you back and the pill goes away.

the pill is rendered in normal document flow so it can't be clipped by
overflow-hidden ancestors and doesn't need any z-index or absolute
positioning to work correctly.

changes

• ChatView.tsx: showScrollToBottom state, onMessagesScroll update, pill ui

Note

Add scroll-to-bottom pill button in chat view

• Adds a fixed-position 'Scroll to bottom' button in ChatView.tsx that appears when the user scrolls away from the bottom of the message list.
• The pill is positioned above the composer input bar, spanning the chat column width, computed from bounding rects of the chat column and composer viewport.
• Visibility toggles via the existing onMessagesScroll handler; clicking the pill calls scrollMessagesToBottom("smooth").
• A useLayoutEffect wires ResizeObserver on the chat column and composer, plus a window resize listener, to keep the pill position accurate on layout changes.

^{Macroscope summarized 21a6c3a.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 988c55fa-200f-462b-9d02-8390fa4a66a4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

You can customize the high-level summary generated by CodeRabbit.

Configure the reviews.high_level_summary_instructions setting to provide custom instructions for generating the high-level summary.

[saishankar404]

[maria-rcks]

@juliusmarminge

[saishankar404]

@juliusmarminge done!

[juliusmarminge]

Feels overly complex. Will check t3chat tmrw and see how we do it there.