Compact team list where one member at a time changes presence: dots recolor, status text fades in, and the online count in the header keeps pace.
The import and the props worth knowing about, in one place.
import { Chat39 } from "@/components/beste/piece/chat39";
<Chat39
title="Studio team"
members={[
{
"name": "Nina Simone",
"initials": "NS",
"status": "online"
},
{
"name": "Miles Davis",
"initials": "MD",
"status": "call"
},
{
"name": "Björk",
"initials": "BJ",
"status": "away"
},
{
"name": "Patti Smith",
"initials": "PS",
"status": "online"
},
{
"name": "Fela Kuti",
"initials": "FK",
"status": "offline"
}
]}
changes={[
{
"member": 3,
"status": "typing"
},
{
"member": 2,
"status": "online"
},
{
"member": 3,
"status": "online"
},
{
"member": 4,
"status": "online"
},
{
"member": 1,
"status": "online"
},
{
"member": 0,
"status": "away"
},
{
"member": 4,
"status": "call"
},
{
"member": 2,
"status": "typing"
},
{
"member": 2,
"status": "away"
},
{
"member": 0,
"status": "online"
},
{
"member": 4,
"status": "offline"
},
{
"member": 1,
"status": "call"
}
]}
/>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.
Chat header with a 3-avatar stack, group title, member count, and voice / video call buttons.
Care team
Online
A short message thread with a header contact, an online marker, and alternating incoming and outgoing bubbles.
Avatar with a presence dot in emerald, amber, rose, or slate. Caption shows status or last-seen.