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.
Chat bubble with an avatar and timestamp. Role flips alignment and color.
Message bubble with a small floating reaction chip tucked into the bottom corner.
Event invite bubble with title, date, time, attendee count, and Join / Maybe actions.