Chat Bubble

1"use client";
2
3import { ChatBubble } from "@/registry/ui/chat-bubble";
4
5const ASSISTANT_MARKDOWN_DEMO = `Hi! **Markdown** works here, including \`inline code\` and lists:
6
7- First item with a bullet
8- Second item
9
10Numbered:
11
121. Step one
132. Step two
14
15Fenced block:
16
17\`\`\`ts
18const greeting = "hello";
19console.log(greeting);
20\`\`\`
21
22And a one-line fence without a language:
23
24\`\`\`
25npm run build
26\`\`\``;
27
28export function ChatBubbleDefaultExample() {
29  return (
30    <div className="mx-auto w-full max-w-lg space-y-6 p-4">
31      <ChatBubble
32        content={ASSISTANT_MARKDOWN_DEMO}
33        variant="assistant"
34        timestamp={new Date()}
35        user={{ id: "1", name: "Assistant" }}
36      />
37      <ChatBubble
38        content="Sounds good - here's my reply with a read receipt."
39        variant="user"
40        timestamp={new Date()}
41        status="read"
42        user={{ id: "2", name: "You" }}
43        reactions={[
44          { emoji: "👍", count: 1, reacted: true },
45          { emoji: "🎉", count: 2, reacted: false },
46        ]}
47      />
48      <ChatBubble
49        content="System maintenance in 10 minutes."
50        variant="system"
51      />
52    </div>
53  );
54}

1"use client";
2
3import { ChatBubble } from "@/registry/ui/chat-bubble";
4
5export function ChatBubbleMinimalExample() {
6  return (
7    <div className="mx-auto w-full max-w-lg space-y-6 p-4">
8      <ChatBubble
9        content="Sounds good - here's my reply with a read receipt."
10        variant="user"
11        timestamp={new Date()}
12        status="read"
13        user={{ id: "2", name: "You" }}
14        reactions={[
15          { emoji: "👍", count: 1, reacted: true },
16          { emoji: "🎉", count: 2, reacted: false },
17        ]}
18      />
19    </div>
20  );
21}