Message Scroller Group Chat Demo for React Base UI

Group Chat

A group chat with several participants and an assistant. The Marker is marked as a turn.

@mary, the astrophage line keeps matching Venus energy output. Can you check my math?

Mary (Agent)

Yes. Confirmed. The curve points to a microorganism harvesting stellar energy and breeding near carbon dioxide. If @rocky agrees, this is the clue we need.

ping @rocky

This will create a marker and make it the anchor

When a user joins, a marker is created. scrollAnchor on the marker marks it as the next turn

Get instant access to the code

235 lines of TypeScript, free with an account. Sign in once and every component and demo is yours.

104 components
Every demo
Copy or download
CLI install

Google GitHub

Use email insteadNo credit card

Get your install command

Your install command, free with an account. Sign in once and every component and demo is yours.

104 components
Every demo
Copy or download
CLI install

Google GitHub

Use email insteadNo credit card

Adds components/ui/message-scroller.tsx, with Button, @shadcn/react and lucide-react. Then paste the demo from the Code tab.