Chat bubble with an avatar and timestamp. Role flips alignment and color.
The import and the props worth knowing about, in one place.
import { Chat1 } from "@/components/beste/piece/chat1";
<Chat1
avatarSrc="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI0fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
avatarAlt="Ayşe Kaya"
fallback="AK"
message="Hey, did you get a chance to look at the new onboarding flow?"
timestamp="09:42"
role="received"
/>Pushed a new pass on the empty states — peek when you have a sec 🎨
Avatar plus inline author, optional role chip, timestamp, and the message body beneath.
Standard chat bubble with a subtle italic edited caption beneath.
Chat bubble with a question and voting options. Each row fills proportionally to its vote count.
Inbox row with avatar, name, message preview, timestamp, and a primary unread count chip.