feat(conversation): customizable scrollbar for conversation content

[kejiwuxian]

Customizable scrollbar for conversation using radix-ui ScrollArea primitive, compatible with scrollClassName styling.

This PR implements an easily customizable cross-browser scrollbar using radix-ui ScrollArea primitive while keeping the stick-to-bottom behavior intact, providing a better developer and user experience.

All tests passed

[vercel]

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

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

This PR updates the ConversationContent implementation to use shadcn/ui’s ScrollArea so the conversation list can have a customizable, cross-browser scrollbar while preserving the stick-to-bottom behavior from use-stick-to-bottom.

Changes:

• Replaces StickToBottom.Content with shadcn ScrollArea in ConversationContent.
• Adds scrollClassName and effect logic to target/style the ScrollArea viewport and wire it into use-stick-to-bottom.
• Updates props typing for ConversationContent to align with ScrollArea props.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rovo89]

I also want to use ScrollArea, so I might test your implementation. Looking at the changes, you seem to use the context, but it's it you need to have the provider somewhere? And would it also work with using the ScrollArea component from shadcn instead of the primitives?

[kejiwuxian]

I also want to use ScrollArea, so I might test your implementation. Looking at the changes, you seem to use the context, but it's it you need to have the provider somewhere? And would it also work with using the ScrollArea component from shadcn instead of the primitives?

Hi Rovo, the stick-to-bottom context is provided by the StickToBottom component in the Conversation component. Since the ConversationContent is supposed to be wrapped by Conversation, the context should always be available.

I did try to use the Shadcn ScrollArea component, so radix-ui doesn't have to be added as a dependency, but it's very tricky to have both the ScrollArea and stick-to-bottom to function in harmony.