Chat bubble with a question and voting options. Each row fills proportionally to its vote count.
The import and the props worth knowing about, in one place.
import { Chat4 } from "@/components/beste/piece/chat4";
<Chat4
question="Where are we grabbing lunch?"
options={[
{
"label": "Packer's Coffee",
"votes": 6
},
{
"label": "Sushi place",
"votes": 3
},
{
"label": "Stay in, order pizza",
"votes": 9
}
]}
role="received"
votesLabel="votes"
/>Quoted message block inside a bubble, with the replying author and the reply text beneath.
Message bubble with a small floating reaction chip tucked into the bottom corner.
Chat bubble with an avatar and timestamp. Role flips alignment and color.
Event invite bubble with title, date, time, attendee count, and Join / Maybe actions.