Chat Demo

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5export type ChatPlatform =
6	| "imessage"
7	| "whatsapp"
8	| "slack"
9	| "discord"
10	| "telegram";
11 
12export interface ChatMessageItem {
13	id?: string | number;
14	from?: "me" | "them";
15	text?: string;
16	time?: string;
17	author?: string;
18	authorColor?: string;
19	avatar?: string;
20	status?: "sent" | "delivered" | "read";
21	reactions?: { emoji: string; count: number }[];
22	typing?: boolean;
23}
24 
25export interface ChatDemoProps {
26	platform: ChatPlatform;
27	messages: ChatMessageItem[];
28	title?: string;
29	subtitle?: string;
30	headerAvatar?: string;
31	showComposer?: boolean;
32	theme?: "light" | "dark";
33	className?: string;
34}
35 
36const DEFAULT_AVATAR = "/gaia-glow.png";
37 
38const SF_STACK =
39	'-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif';
40const SLACK_STACK =
41	'"Slack-Lato", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
42const DISCORD_STACK =
43	'"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
44 
45export function ChatDemo({
46	platform,
47	messages,
48	title,
49	subtitle,
50	headerAvatar,
51	showComposer = true,
52	theme,
53	className,
54}: ChatDemoProps) {
55	switch (platform) {
56		case "imessage":
57			return (
58				<IMessageDemo
59					messages={messages}
60					title={title}
61					subtitle={subtitle}
62					headerAvatar={headerAvatar ?? DEFAULT_AVATAR}
63					showComposer={showComposer}
64					className={className}
65				/>
66			);
67		case "whatsapp":
68			return (
69				<WhatsAppDemo
70					messages={messages}
71					title={title}
72					subtitle={subtitle}
73					headerAvatar={headerAvatar ?? DEFAULT_AVATAR}
74					showComposer={showComposer}
75					className={className}
76				/>
77			);
78		case "slack":
79			return (
80				<SlackDemo
81					messages={messages}
82					title={title}
83					subtitle={subtitle}
84					showComposer={showComposer}
85					theme={theme ?? "light"}
86					className={className}
87				/>
88			);
89		case "discord":
90			return (
91				<DiscordDemo
92					messages={messages}
93					title={title}
94					subtitle={subtitle}
95					showComposer={showComposer}
96					className={className}
97				/>
98			);
99		case "telegram":
100			return (
101				<TelegramDemo
102					messages={messages}
103					title={title}
104					subtitle={subtitle}
105					headerAvatar={headerAvatar ?? DEFAULT_AVATAR}
106					showComposer={showComposer}
107					className={className}
108				/>
109			);
110	}
111}
112 
113/* =========================================================================
114// … truncated