A group chat header with participant avatars and conversation details.
import { GroupChat, type GroupChatPerson } from "@/components/ui/group-chat";
export const DEMO_PEOPLE = {
gagandeepKang: "Gagandeep Kang",
janakiAmmal: "Janaki Ammal",
kalpanaChawla: "Kalpana Chawla",
rajReddy: "Raj Reddy",
srinivasaRamanujan: "Srinivasa Ramanujan",
vikramSarabhai: "Vikram Sarabhai",
} as const;
const WHITESPACE_PATTERN = /\s+/;
export const getFirstName = (name: string): string =>
name.trim().split(WHITESPACE_PATTERN)[0] ?? name;
const PARTICIPANTS = [
{
avatar: {
name: getFirstName(DEMO_PEOPLE.janakiAmmal),
palette: ["#dff4ff", "#38bdf8"],
},
id: "janaki",
name: DEMO_PEOPLE.janakiAmmal,
},
{
avatar: {
name: getFirstName(DEMO_PEOPLE.vikramSarabhai),
palette: ["#fff0e2", "#fa9769"],
},
id: "vikram",
name: DEMO_PEOPLE.vikramSarabhai,
},
{
avatar: {
name: getFirstName(DEMO_PEOPLE.kalpanaChawla),
palette: ["#e7fbe8", "#9ce786"],
},
id: "kalpana",
name: DEMO_PEOPLE.kalpanaChawla,
},
{
avatar: {
name: getFirstName(DEMO_PEOPLE.srinivasaRamanujan),
palette: ["#f4e7ff", "#c994ec"],
},
id: "srinivasa",
name: DEMO_PEOPLE.srinivasaRamanujan,
},
{
avatar: {
name: getFirstName(DEMO_PEOPLE.gagandeepKang),
palette: ["#fff0e2", "#efa973"],
},
id: "gagandeep",
name: DEMO_PEOPLE.gagandeepKang,
},
] as const satisfies readonly GroupChatPerson[];
const MESSAGES = [
{
author: PARTICIPANTS[0],
id: "1",
text: "The new avatars are live. Every account has one now.",
time: "9:41",
},
{
author: PARTICIPANTS[1],
id: "2",
text: "Generated from the name?",
time: "9:42",
},
{
author: PARTICIPANTS[2],
id: "3",
text: "Same name, same face, every time.",
time: "9:43",
},
{
author: PARTICIPANTS[3],
id: "4",
text: "That makes staging and production feel like the same place.",
time: "9:44",
},
] as const;
export function GroupChatExample() {
return (
<GroupChat
channel="release"
className="max-w-2xl"
messages={MESSAGES}
participants={PARTICIPANTS}
typing={PARTICIPANTS[1]}
/>
);
}
export default GroupChatExample;