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 floating 'Scroll to bottom' button to chat view

• Adds a floating pill button that appears in ChatView.tsx when the user scrolls away from the bottom of the message list; clicking it smoothly scrolls back to the bottom.
• The messages area is wrapped in a relative-positioned container to support the overlay button.
• Renames the respondingUserInputRequestIds prop to respondingRequestIds on ComposerPendingUserInputPanel.

^{Macroscope summarized fa44d8f.}

[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: ffbace0b-63d4-4cf5-b2bb-4443c6918b2b

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 get early access to new features in CodeRabbit.

Enable the early_access setting to enable early access features such as new models, tools, and more.

[saishankar404]

[maria-rcks]

@juliusmarminge

[saishankar404]

@juliusmarminge done!

[juliusmarminge]

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

[saishankar404]

@juliusmarminge

reduced the overcomplexity you mentioned. i removed all the javascript layout calculations, refs, and the resize observer.

i did that due to the wrapper container position referance instead of css calculations.

instead of using a fixed position which requires all that math to stop the input box from covering the button when it expands, i wrapped the messages area in a relative container and made the pill absolute.

now it just anchors itself natively to the bottom of the messages window right above the input box using pure css

[juliusmarminge]

lgtm - resolve conflicts so CI can run

[saishankar404]

@juliusmarminge done! thanks.

[juliusmarminge]

it's flickering a bit but can fix that later

CleanShot.2026-03-14.at.10.44.25.mp4