Centered contact card with an avatar, name, handle, short bio, and a Message CTA.
The import and the props worth knowing about, in one place.
import { Chat8 } from "@/components/beste/piece/chat8";
<Chat8
src="https://images.unsplash.com/photo-1672794776762-18dddc72982e?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQzfHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
alt="Sarah Brown"
fallback="SB"
name="Sarah Brown"
handle="@sarah.b"
bio="Frontend at Kindred · Istanbul"
/>How many rooms were unused last Tuesday?
Three, all at Kingsway between 13:00 and 16:00. Two were held for a clinic that was cancelled on the Friday before.
An assistant exchange showing the question as a right-aligned bubble, the answer beside an accent icon tile, and the records it was drawn from as chips under a hairline.
Chat bubble with an avatar and timestamp. Role flips alignment and color.
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.
Inbox row with avatar, name, message preview, timestamp, and a primary unread count chip.