Skip to content

Conversation

@Emmaccen
Copy link

Added optional singleton mode to useScrollToBottom hook, allowing scroll state and controls to be shared across multiple components without creating duplicate instances.

Why this change:

  • Please see: fix: PromptInputTextarea now actually handles its own damn resize logic #1321
  • Scroll-to-bottom button position is static and doesn't account for MultimodalInput's config/resize-ability
  • Previously, if you wanted to use the scroll-to-bottom button in a separate component (like MultimodalInput) from where the scrollable container lives (like MessagesContainer), you'd have to re-call the hook, which would create a new instance with its own state. This meant the button wouldn't reflect the actual scroll position.
  • To make the scroller button pegged to a dynamic and config-friendly MultimodalInput size/height, something needed to be done

What's new:

  • Added ScrollToBottomProvider context wrapper
  • useScrollToBottom now accepts optional singleton boolean parameter
  • When singleton=true, hook returns shared instance from provider
  • When singleton=false (default), hook works exactly as before
  • useMessages hook now takes the optional singleton prop
  • scroll-button now animates as seen in v0.dev

Usage:

  1. Wrap your chat area with <ScrollToBottomProvider>
  2. Use useScrollToBottom(true) in any child component to access shared state
  3. Existing code using useScrollToBottom() continues to work unchanged

Benefits:

  • Share scroll state across components (scroll button, auto-scroll, etc.)
  • No breaking changes - fully backwards compatible
  • Opt-in behavior - existing instances remain isolated by default
  • Type-safe with helpful error messages

Example:

<ScrollToBottomProvider>
  <MessagesContainer /> {/* assigns refs with useScrollToBottom(true) */}
  <MultimodalInput /> {/* accesses same instance with useScrollToBottom(true) */}
</ScrollToBottomProvider>

This makes it easy to place scroll controls anywhere in the component tree while maintaining a single source of truth for scroll state.

PS: This PR is a supplementary to #1321

@vercel
Copy link

vercel bot commented Nov 20, 2025

@Emmaccen is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

@MrAllgoodWilson
Copy link

Inapprove

@MrAllgoodWilson
Copy link

I approve

1 similar comment
@MrAllgoodWilson
Copy link

I approve

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.

2 participants