Thread pill with a 3-avatar stack, a reply count in primary, and a last-reply timestamp.
The import and the props worth knowing about, in one place.
import { Chat22 } from "@/components/beste/piece/chat22";
<Chat22
replies={12}
lastReply="2 min ago"
participants={[
{
"src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face",
"alt": "Ayşe",
"fallback": "AK"
},
{
"src": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face",
"alt": "Merve",
"fallback": "MÖ"
},
{
"src": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face",
"alt": "Sarah",
"fallback": "SB"
}
]}
/>Inbox row with avatar, name, message preview, timestamp, and a primary unread count chip.
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.
Typing indicator pill showing multiple avatar stack, summary text, and three pulsing dots.
Care team
Online
A short message thread with a header contact, an online marker, and alternating incoming and outgoing bubbles.