{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-demo",
  "type": "registry:ui",
  "title": "Chat Demo",
  "description": "Reusable platform-aware chat preview with pixel-accurate bubbles, headers and composers for iMessage, WhatsApp, Slack, Discord and Telegram. Designed to drop inside the iPhone Mockup.",
  "dependencies": [],
  "registryDependencies": [
    "iphone-mockup"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/chat-demo.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type ChatPlatform =\n\t| \"imessage\"\n\t| \"whatsapp\"\n\t| \"slack\"\n\t| \"discord\"\n\t| \"telegram\";\n\nexport interface ChatMessageItem {\n\tid?: string | number;\n\tfrom?: \"me\" | \"them\";\n\ttext?: string;\n\ttime?: string;\n\tauthor?: string;\n\tauthorColor?: string;\n\tavatar?: string;\n\tstatus?: \"sent\" | \"delivered\" | \"read\";\n\treactions?: { emoji: string; count: number }[];\n\ttyping?: boolean;\n}\n\nexport interface ChatDemoProps {\n\tplatform: ChatPlatform;\n\tmessages: ChatMessageItem[];\n\ttitle?: string;\n\tsubtitle?: string;\n\theaderAvatar?: string;\n\tshowComposer?: boolean;\n\ttheme?: \"light\" | \"dark\";\n\tclassName?: string;\n}\n\nconst DEFAULT_AVATAR = \"/gaia-glow.png\";\n\nconst SF_STACK =\n\t'-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Helvetica Neue\", Helvetica, Arial, sans-serif';\nconst SLACK_STACK =\n\t'\"Slack-Lato\", \"Lato\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif';\nconst DISCORD_STACK =\n\t'\"gg sans\", \"Noto Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif';\n\nexport function ChatDemo({\n\tplatform,\n\tmessages,\n\ttitle,\n\tsubtitle,\n\theaderAvatar,\n\tshowComposer = true,\n\ttheme,\n\tclassName,\n}: ChatDemoProps) {\n\tswitch (platform) {\n\t\tcase \"imessage\":\n\t\t\treturn (\n\t\t\t\t<IMessageDemo\n\t\t\t\t\tmessages={messages}\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tsubtitle={subtitle}\n\t\t\t\t\theaderAvatar={headerAvatar ?? DEFAULT_AVATAR}\n\t\t\t\t\tshowComposer={showComposer}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"whatsapp\":\n\t\t\treturn (\n\t\t\t\t<WhatsAppDemo\n\t\t\t\t\tmessages={messages}\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tsubtitle={subtitle}\n\t\t\t\t\theaderAvatar={headerAvatar ?? DEFAULT_AVATAR}\n\t\t\t\t\tshowComposer={showComposer}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"slack\":\n\t\t\treturn (\n\t\t\t\t<SlackDemo\n\t\t\t\t\tmessages={messages}\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tsubtitle={subtitle}\n\t\t\t\t\tshowComposer={showComposer}\n\t\t\t\t\ttheme={theme ?? \"light\"}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"discord\":\n\t\t\treturn (\n\t\t\t\t<DiscordDemo\n\t\t\t\t\tmessages={messages}\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tsubtitle={subtitle}\n\t\t\t\t\tshowComposer={showComposer}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"telegram\":\n\t\t\treturn (\n\t\t\t\t<TelegramDemo\n\t\t\t\t\tmessages={messages}\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tsubtitle={subtitle}\n\t\t\t\t\theaderAvatar={headerAvatar ?? DEFAULT_AVATAR}\n\t\t\t\t\tshowComposer={showComposer}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t);\n\t}\n}\n\n/* =========================================================================\n * Shared curved bubble (the iMessage shape, reused by WhatsApp & Telegram)\n * ========================================================================= */\n\nconst TAIL_THEM =\n\t\"M 20 0 L 20 2 A 16 16 0 0 1 4 18 L 0 18 L 0 17.54 A 10 10 0 0 0 7 8 L 7 0 Z\";\nconst TAIL_ME =\n\t\"M 0 0 L 0 2 A 16 16 0 0 0 16 18 L 20 18 L 20 17.54 A 10 10 0 0 1 13 8 L 13 0 Z\";\n\ninterface CurvedBubbleProps {\n\tfrom: \"me\" | \"them\";\n\ttail: boolean;\n\tbackground: string;\n\ttailColor: string;\n\tcolor: string;\n\tchildren: React.ReactNode;\n\t/** Inline meta (time / ticks) shown at bottom-right of the bubble */\n\tmeta?: React.ReactNode;\n\tmaxWidthPct?: number;\n}\n\nfunction CurvedBubble({\n\tfrom,\n\ttail,\n\tbackground,\n\ttailColor,\n\tcolor,\n\tchildren,\n\tmeta,\n\tmaxWidthPct = 78,\n}: CurvedBubbleProps) {\n\tconst isMe = from === \"me\";\n\treturn (\n\t\t<div className=\"relative\" style={{ maxWidth: `${maxWidthPct}%` }}>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackground,\n\t\t\t\t\tcolor,\n\t\t\t\t\tpadding: \"7px 13px 8px\",\n\t\t\t\t\tborderRadius: 18,\n\t\t\t\t\tfontSize: 15.5,\n\t\t\t\t\tlineHeight: \"20px\",\n\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\twordBreak: \"break-word\",\n\t\t\t\t\tposition: \"relative\",\n\t\t\t\t\twhiteSpace: \"pre-wrap\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{meta && (\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: \"inline-block\",\n\t\t\t\t\t\t\tverticalAlign: \"bottom\",\n\t\t\t\t\t\t\tmarginLeft: 6,\n\t\t\t\t\t\t\tmarginRight: -2,\n\t\t\t\t\t\t\tmarginBottom: -1,\n\t\t\t\t\t\t\tfontSize: 11,\n\t\t\t\t\t\t\tlineHeight: \"14px\",\n\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\topacity: 0.95,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{meta}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{tail && (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tbottom: 0,\n\t\t\t\t\t\t[isMe ? \"right\" : \"left\"]: -7,\n\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\theight: 18,\n\t\t\t\t\t\tbackground: tailColor,\n\t\t\t\t\t\tclipPath: `path('${isMe ? TAIL_ME : TAIL_THEM}')`,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\ntype CurvedThread = {\n\tfrom: \"me\" | \"them\";\n\titems: ChatMessageItem[];\n};\n\nfunction curvedThread(messages: ChatMessageItem[]): CurvedThread[] {\n\tconst out: CurvedThread[] = [];\n\tfor (const m of messages) {\n\t\tconst from = m.from ?? \"them\";\n\t\tconst last = out[out.length - 1];\n\t\tif (last && last.from === from) last.items.push(m);\n\t\telse out.push({ from, items: [m] });\n\t}\n\treturn out;\n}\n\n/* =========================================================================\n * iMessage\n * ========================================================================= */\n\nconst IMESSAGE_GRADIENT =\n\t\"linear-gradient(180deg, #309BFE 0%, #027BFF 100%)\";\nconst IMESSAGE_THEM_BG = \"#E9E9EB\";\nconst IMESSAGE_TAIL_ME_COLOR = \"#0E89FF\";\n\nfunction IMessageDemo({\n\tmessages,\n\ttitle,\n\tsubtitle,\n\theaderAvatar,\n\tshowComposer,\n\tclassName,\n}: {\n\tmessages: ChatMessageItem[];\n\ttitle?: string;\n\tsubtitle?: string;\n\theaderAvatar?: string;\n\tshowComposer: boolean;\n\tclassName?: string;\n}) {\n\tconst grouped = curvedThread(messages);\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex h-full flex-col\", className)}\n\t\t\tstyle={{ background: \"#ffffff\", fontFamily: SF_STACK, color: \"#000\" }}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"flex shrink-0 flex-col items-center justify-center\"\n\t\t\t\tstyle={{ background: \"#ffffff\", padding: \"2px 16px 10px\" }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"overflow-hidden rounded-full\"\n\t\t\t\t\tstyle={{ width: 54, height: 54, marginBottom: 5 }}\n\t\t\t\t>\n\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: tiny remote avatar */}\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={headerAvatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tstyle={{ width: 54, height: 54, objectFit: \"cover\" }}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex items-center\"\n\t\t\t\t\tstyle={{ fontSize: 14, color: \"#000\", fontWeight: 600, gap: 3 }}\n\t\t\t\t>\n\t\t\t\t\t<span style={{ letterSpacing: \"-0.01em\" }}>{title ?? \"GAIA\"}</span>\n\t\t\t\t\t<svg\n\t\t\t\t\t\twidth=\"5\"\n\t\t\t\t\t\theight=\"8\"\n\t\t\t\t\t\tviewBox=\"0 0 7 11\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M1 1l4.5 4.5L1 10\"\n\t\t\t\t\t\t\tstroke=\"rgba(60,60,67,0.28)\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.4\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t{subtitle && (\n\t\t\t\t\t<span style={{ fontSize: 11, color: \"rgba(60,60,67,0.55)\", marginTop: 2 }}>\n\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto px-3 pb-3\"\n\t\t\t\tstyle={{ scrollbarWidth: \"none\", gap: 8 }}\n\t\t\t>\n\t\t\t\t{grouped.map((group, gi) => {\n\t\t\t\t\tconst groupTime = group.items[0].time;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={gi} className=\"flex flex-col\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t{groupTime && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"self-center text-center\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tfontSize: 11,\n\t\t\t\t\t\t\t\t\t\tcolor: \"rgba(60,60,67,0.6)\",\n\t\t\t\t\t\t\t\t\t\tfontWeight: 500,\n\t\t\t\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\t\t\t\tmarginTop: gi === 0 ? 4 : 6,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{groupTime}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\t\t\tgroup.from === \"me\" ? \"items-end\" : \"items-start\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{ gap: 2 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{group.items.map((m, i) => {\n\t\t\t\t\t\t\t\t\tconst isLast = i === group.items.length - 1;\n\t\t\t\t\t\t\t\t\tconst isMe = group.from === \"me\";\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<CurvedBubble\n\t\t\t\t\t\t\t\t\t\t\tkey={m.id ?? `${gi}-${i}`}\n\t\t\t\t\t\t\t\t\t\t\tfrom={group.from}\n\t\t\t\t\t\t\t\t\t\t\ttail={isLast}\n\t\t\t\t\t\t\t\t\t\t\tbackground={isMe ? IMESSAGE_GRADIENT : IMESSAGE_THEM_BG}\n\t\t\t\t\t\t\t\t\t\t\ttailColor={\n\t\t\t\t\t\t\t\t\t\t\t\tisMe ? IMESSAGE_TAIL_ME_COLOR : IMESSAGE_THEM_BG\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcolor={isMe ? \"#fff\" : \"#000\"}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{m.typing ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<TypingDots\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={isMe ? \"rgba(255,255,255,0.9)\" : \"#8e8e93\"}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\tm.text\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</CurvedBubble>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\n\t\t\t{showComposer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex shrink-0 items-end gap-2 px-2 pt-2 pb-1\"\n\t\t\t\t\tstyle={{ background: \"#ffffff\" }}\n\t\t\t\t>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"More\"\n\t\t\t\t\t\tclassName=\"flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-[filter,background] duration-150 hover:brightness-95 active:brightness-90\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: 30,\n\t\t\t\t\t\t\theight: 30,\n\t\t\t\t\t\t\tbackground: \"#E9E9EB\",\n\t\t\t\t\t\t\tcolor: \"rgba(60,60,67,0.7)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M7 1v12M1 7h12\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.6\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 items-center justify-between\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborder: \"1px solid rgba(60,60,67,0.18)\",\n\t\t\t\t\t\t\tborderRadius: 18,\n\t\t\t\t\t\t\tpadding: \"5px 8px 5px 12px\",\n\t\t\t\t\t\t\tbackground: \"#fff\",\n\t\t\t\t\t\t\tminHeight: 32,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tplaceholder=\"iMessage\"\n\t\t\t\t\t\t\tclassName=\"chat-demo-input min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[rgba(60,60,67,0.5)]\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\tcolor: \"#000\",\n\t\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\t\tfontFamily: \"inherit\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Audio\"\n\t\t\t\t\t\t\tclassName=\"ml-2 flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\t\tstyle={{ color: \"rgba(60,60,67,0.7)\", width: 22, height: 22 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M8 1.5a2 2 0 0 0-2 2v4a2 2 0 0 0 4 0v-4a2 2 0 0 0-2-2Zm4 6a4 4 0 0 1-8 0H3a5 5 0 0 0 4.5 5V14h1v-1.5A5 5 0 0 0 13 7.5h-1Z\"\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n/* =========================================================================\n * WhatsApp — iMessage bubble shape + WhatsApp SVG colors and chrome.\n * Source: .context/attachments/WhatsApp Chat.svg\n * ========================================================================= */\n\nfunction WhatsAppDemo({\n\tmessages,\n\ttitle,\n\tsubtitle,\n\theaderAvatar,\n\tshowComposer,\n\tclassName,\n}: {\n\tmessages: ChatMessageItem[];\n\ttitle?: string;\n\tsubtitle?: string;\n\theaderAvatar?: string;\n\tshowComposer: boolean;\n\tclassName?: string;\n}) {\n\t// Palette extracted from WhatsApp Chat.svg\n\tconst bg = \"#EFEFF4\";\n\tconst chromeBg = \"#F6F6F6\";\n\tconst myBubble = \"#DCF7C5\";\n\tconst theirBubble = \"#FFFFFF\";\n\tconst textColor = \"#060606\";\n\tconst metaColor = \"rgba(0,0,0,0.45)\";\n\tconst accent = \"#007AFF\";\n\n\tconst grouped = curvedThread(messages);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex h-full flex-col\", className)}\n\t\t\tstyle={{ background: bg, fontFamily: SF_STACK, color: textColor }}\n\t\t>\n\t\t\t{/* Header — iOS chrome from WhatsApp Chat.svg (#F6F6F6) */}\n\t\t\t<div className=\"flex shrink-0 flex-col\" style={{ background: chromeBg }}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"grid items-center\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tgridTemplateColumns: \"1fr auto 1fr\",\n\t\t\t\t\t\tpadding: \"6px 12px 8px\",\n\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex items-center\" style={{ color: accent }}>\n\t\t\t\t\t\t<svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" aria-hidden fill=\"none\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M10 2 2 10l8 8\"\n\t\t\t\t\t\t\t\tstroke={accent}\n\t\t\t\t\t\t\t\tstrokeWidth=\"2.4\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-col items-center\" style={{ minWidth: 0 }}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"overflow-hidden rounded-full\"\n\t\t\t\t\t\t\tstyle={{ width: 32, height: 32 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: avatar */}\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={headerAvatar}\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\tstyle={{ width: 32, height: 32, objectFit: \"cover\" }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: 10,\n\t\t\t\t\t\t\t\tmarginTop: 2,\n\t\t\t\t\t\t\t\tcolor: textColor,\n\t\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\t\tmaxWidth: 140,\n\t\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title ?? \"GAIA\"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex items-center justify-end\"\n\t\t\t\t\t\tstyle={{ color: accent }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg width=\"22\" height=\"14\" viewBox=\"0 0 22 14\" aria-hidden fill=\"none\">\n\t\t\t\t\t\t\t<rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"13\" rx=\"3\" stroke={accent} />\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M16 4l5 -3v12l-5 -3z\"\n\t\t\t\t\t\t\t\tfill={accent}\n\t\t\t\t\t\t\t\tstroke={accent}\n\t\t\t\t\t\t\t\tstrokeWidth=\"0.5\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div style={{ height: 0.5, background: \"rgba(60,60,67,0.18)\" }} />\n\t\t\t</div>\n\n\t\t\t{/* Chat area — light gray with the WhatsApp doodle pattern */}\n\t\t\t<div\n\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto px-3 pb-3\"\n\t\t\t\tstyle={{\n\t\t\t\t\tscrollbarWidth: \"none\",\n\t\t\t\t\tgap: 8,\n\t\t\t\t\tbackgroundColor: bg,\n\t\t\t\t\tbackgroundImage: 'url(\"/whatsapp-doodle.png\")',\n\t\t\t\t\tbackgroundRepeat: \"repeat\",\n\t\t\t\t\tbackgroundSize: \"404px auto\",\n\t\t\t\t\tpaddingTop: 8,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{grouped.map((group, gi) => {\n\t\t\t\t\tconst isMe = group.from === \"me\";\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={gi}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\t\tisMe ? \"items-end\" : \"items-start\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tstyle={{ gap: 2 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{group.items.map((m, i) => {\n\t\t\t\t\t\t\t\tconst isLast = i === group.items.length - 1;\n\t\t\t\t\t\t\t\tconst showMeta = !m.typing && (m.time || (isMe && m.status));\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<CurvedBubble\n\t\t\t\t\t\t\t\t\t\tkey={m.id ?? `${gi}-${i}`}\n\t\t\t\t\t\t\t\t\t\tfrom={group.from}\n\t\t\t\t\t\t\t\t\t\ttail={isLast}\n\t\t\t\t\t\t\t\t\t\tbackground={isMe ? myBubble : theirBubble}\n\t\t\t\t\t\t\t\t\t\ttailColor={isMe ? myBubble : theirBubble}\n\t\t\t\t\t\t\t\t\t\tcolor={textColor}\n\t\t\t\t\t\t\t\t\t\tmeta={\n\t\t\t\t\t\t\t\t\t\t\tshowMeta ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: metaColor,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: \"inline-flex\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tgap: 3,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{m.time ?? \"\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{isMe && m.status && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<WhatsAppTicks status={m.status} />\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{m.typing ? (\n\t\t\t\t\t\t\t\t\t\t\t<TypingDots color={metaColor} />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\tm.text\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</CurvedBubble>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\n\t\t\t{showComposer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex shrink-0 items-center gap-2 px-2 pt-2 pb-1.5\"\n\t\t\t\t\tstyle={{ background: chromeBg }}\n\t\t\t\t>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Camera\"\n\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\tstyle={{ width: 32, height: 32, color: \"#3C3C43\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CameraIcon />\n\t\t\t\t\t</button>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 items-center justify-between gap-2\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground: \"#FFFFFF\",\n\t\t\t\t\t\t\tborder: \"0.5px solid #8E8E93\",\n\t\t\t\t\t\t\tborderRadius: 16,\n\t\t\t\t\t\t\tpadding: \"0 10px\",\n\t\t\t\t\t\t\theight: 32,\n\t\t\t\t\t\t\tcolor: \"#8E8E93\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tplaceholder=\"Message\"\n\t\t\t\t\t\t\tclassName=\"chat-demo-input min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[#8E8E93]\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\tcolor: \"#000\",\n\t\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\t\tfontFamily: \"inherit\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Emoji\"\n\t\t\t\t\t\t\tclassName=\"flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\t\tstyle={{ color: \"#8E8E93\", width: 22, height: 22 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EmojiIcon size={18} />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Voice message\"\n\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\tstyle={{ width: 32, height: 32, color: \"#3C3C43\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MicIcon />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction WhatsAppTicks({ status }: { status: \"sent\" | \"delivered\" | \"read\" }) {\n\tconst color = status === \"read\" ? \"#3497F9\" : \"rgba(0,0,0,0.4)\";\n\tif (status === \"sent\") {\n\t\treturn (\n\t\t\t<svg width=\"14\" height=\"11\" viewBox=\"0 0 14 11\" aria-hidden fill=\"none\">\n\t\t\t\t<path\n\t\t\t\t\td=\"M1 6l3.5 3.5L11 2\"\n\t\t\t\t\tstroke={color}\n\t\t\t\t\tstrokeWidth=\"1.6\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t);\n\t}\n\t// TickDouble02-style: two clean overlapping check marks\n\treturn (\n\t\t<svg width=\"16\" height=\"11\" viewBox=\"0 0 18 14\" aria-hidden fill=\"none\">\n\t\t\t<path\n\t\t\t\td=\"M1 7l3.2 3.5L11 3.5\"\n\t\t\t\tstroke={color}\n\t\t\t\tstrokeWidth=\"1.7\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M6 7l3.2 3.5L17 3.5\"\n\t\t\t\tstroke={color}\n\t\t\t\tstrokeWidth=\"1.7\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n\n/* =========================================================================\n * Telegram — iMessage bubble shape + Telegram SVG palette and chrome.\n * Source: .context/attachments/Telegram Chat.svg\n * ========================================================================= */\n\nfunction TelegramDemo({\n\tmessages,\n\ttitle,\n\tsubtitle,\n\theaderAvatar,\n\tshowComposer,\n\tclassName,\n}: {\n\tmessages: ChatMessageItem[];\n\ttitle?: string;\n\tsubtitle?: string;\n\theaderAvatar?: string;\n\tshowComposer: boolean;\n\tclassName?: string;\n}) {\n\t// Palette extracted from Telegram Chat.svg\n\tconst chromeBg = \"#F6F6F6\";\n\tconst blueOverlay = \"#2B78CD\"; // 50% over the doodle pattern\n\tconst myBubble = \"#E1FEC6\";\n\tconst theirBubble = \"#FFFFFF\";\n\tconst textColor = \"#060606\";\n\tconst metaColor = \"#858E99\";\n\tconst myMeta = \"#3EAA3C\";\n\tconst accent = \"#037EE5\";\n\n\tconst grouped = curvedThread(messages);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex h-full flex-col\", className)}\n\t\t\tstyle={{ fontFamily: SF_STACK, color: textColor, background: chromeBg }}\n\t\t>\n\t\t\t{/* iOS header */}\n\t\t\t<div className=\"flex shrink-0 flex-col\" style={{ background: chromeBg }}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"grid items-center\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tgridTemplateColumns: \"1fr auto 1fr\",\n\t\t\t\t\t\tpadding: \"6px 12px 8px\",\n\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex items-center\" style={{ color: accent }}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tviewBox=\"0 0 12 20\"\n\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M10 2 2 10l8 8\"\n\t\t\t\t\t\t\t\tstroke={accent}\n\t\t\t\t\t\t\t\tstrokeWidth=\"2.4\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tstyle={{ fontSize: 17, marginLeft: 8, letterSpacing: \"-0.01em\" }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tBack\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-col items-center\" style={{ minWidth: 0 }}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: 17,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\t\tcolor: textColor,\n\t\t\t\t\t\t\t\tmaxWidth: 160,\n\t\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title ?? \"GAIA\"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span style={{ fontSize: 12, color: metaColor, marginTop: 1 }}>\n\t\t\t\t\t\t\t{subtitle ?? \"last seen recently\"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex items-center justify-end\"\n\t\t\t\t\t\tstyle={{ color: accent }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"overflow-hidden rounded-full\"\n\t\t\t\t\t\t\tstyle={{ width: 32, height: 32 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: avatar */}\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={headerAvatar}\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\tstyle={{ width: 32, height: 32, objectFit: \"cover\" }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div style={{ height: 0.5, background: \"rgba(60,60,67,0.18)\" }} />\n\t\t\t</div>\n\n\t\t\t{/* Chat area: blue overlay + Telegram doodle pattern */}\n\t\t\t<div\n\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto px-3 pb-3\"\n\t\t\t\tstyle={{\n\t\t\t\t\tscrollbarWidth: \"none\",\n\t\t\t\t\tgap: 8,\n\t\t\t\t\tbackgroundColor: blueOverlay,\n\t\t\t\t\tbackgroundImage:\n\t\t\t\t\t\t'linear-gradient(rgba(43,120,205,0.5), rgba(43,120,205,0.5)), url(\"/telegram-doodle.png\")',\n\t\t\t\t\tbackgroundSize: \"auto, 480px auto\",\n\t\t\t\t\tbackgroundRepeat: \"repeat\",\n\t\t\t\t\tpaddingTop: 8,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{grouped.map((group, gi) => {\n\t\t\t\t\tconst isMe = group.from === \"me\";\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={gi}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\t\tisMe ? \"items-end\" : \"items-start\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tstyle={{ gap: 2 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{group.items.map((m, i) => {\n\t\t\t\t\t\t\t\tconst isLast = i === group.items.length - 1;\n\t\t\t\t\t\t\t\tconst showMeta = !m.typing && (m.time || (isMe && m.status));\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<CurvedBubble\n\t\t\t\t\t\t\t\t\t\tkey={m.id ?? `${gi}-${i}`}\n\t\t\t\t\t\t\t\t\t\tfrom={group.from}\n\t\t\t\t\t\t\t\t\t\ttail={isLast}\n\t\t\t\t\t\t\t\t\t\tbackground={isMe ? myBubble : theirBubble}\n\t\t\t\t\t\t\t\t\t\ttailColor={isMe ? myBubble : theirBubble}\n\t\t\t\t\t\t\t\t\t\tcolor={textColor}\n\t\t\t\t\t\t\t\t\t\tmeta={\n\t\t\t\t\t\t\t\t\t\t\tshowMeta ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: isMe ? myMeta : metaColor,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: \"inline-flex\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tgap: 3,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{m.time ?? \"\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{isMe && m.status && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TelegramTicks\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstatus={m.status}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={myMeta}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{m.typing ? (\n\t\t\t\t\t\t\t\t\t\t\t<TypingDots color={isMe ? myMeta : metaColor} />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\tm.text\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</CurvedBubble>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\n\t\t\t{showComposer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex shrink-0 items-center gap-2 px-2 pt-2 pb-1.5\"\n\t\t\t\t\tstyle={{ background: chromeBg }}\n\t\t\t\t>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Attach\"\n\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\tstyle={{ width: 30, height: 30, color: accent }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AttachmentIcon />\n\t\t\t\t\t</button>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 items-center justify-between gap-2\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground: \"#FFFFFF\",\n\t\t\t\t\t\t\tborder: \"0.5px solid #D1D1D6\",\n\t\t\t\t\t\t\tborderRadius: 16,\n\t\t\t\t\t\t\tpadding: \"0 12px\",\n\t\t\t\t\t\t\theight: 32,\n\t\t\t\t\t\t\tcolor: metaColor,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tplaceholder=\"Message\"\n\t\t\t\t\t\t\tclassName=\"chat-demo-input min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[#858E99]\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\tcolor: \"#000\",\n\t\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\t\tfontFamily: \"inherit\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Emoji\"\n\t\t\t\t\t\t\tclassName=\"flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\t\tstyle={{ color: metaColor, width: 22, height: 22 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EmojiIcon size={18} />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Voice\"\n\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\tstyle={{ width: 30, height: 30, color: accent }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MicIcon />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction TelegramTicks({\n\tstatus,\n\tcolor,\n}: {\n\tstatus: \"sent\" | \"delivered\" | \"read\";\n\tcolor: string;\n}) {\n\tif (status === \"sent\") {\n\t\treturn (\n\t\t\t<svg width=\"14\" height=\"11\" viewBox=\"0 0 14 11\" aria-hidden fill=\"none\">\n\t\t\t\t<path\n\t\t\t\t\td=\"M1 6l3.5 3.5L11 2\"\n\t\t\t\t\tstroke={color}\n\t\t\t\t\tstrokeWidth=\"1.4\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t);\n\t}\n\treturn (\n\t\t<svg width=\"16\" height=\"11\" viewBox=\"0 0 16 11\" aria-hidden fill=\"none\">\n\t\t\t<path\n\t\t\t\td=\"M0.5 6.5l3.5 3.5L10.5 2.5\"\n\t\t\t\tstroke={color}\n\t\t\t\tstrokeWidth=\"1.4\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M4 6.5l3.5 3.5L13.5 2.5\"\n\t\t\t\tstroke={color}\n\t\t\t\tstrokeWidth=\"1.4\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n\n/* =========================================================================\n * Slack\n * ========================================================================= */\n\nfunction SlackDemo({\n\tmessages,\n\ttitle,\n\tsubtitle,\n\tshowComposer,\n\ttheme,\n\tclassName,\n}: {\n\tmessages: ChatMessageItem[];\n\ttitle?: string;\n\tsubtitle?: string;\n\tshowComposer: boolean;\n\ttheme: \"light\" | \"dark\";\n\tclassName?: string;\n}) {\n\tconst isDark = theme === \"dark\";\n\tconst bg = isDark ? \"#1A1D21\" : \"#FFFFFF\";\n\tconst fg = isDark ? \"#D1D2D3\" : \"#1D1C1D\";\n\tconst muted = isDark ? \"#ABABAD\" : \"#616061\";\n\tconst headerBorder = isDark ? \"#2F3236\" : \"#E8E8E8\";\n\n\tconst groups = groupByAuthor(messages);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex h-full flex-col\", className)}\n\t\t\tstyle={{ background: bg, color: fg, fontFamily: SLACK_STACK }}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"flex shrink-0 items-center justify-between border-b px-4\"\n\t\t\t\tstyle={{ borderColor: headerBorder, height: 56 }}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-col leading-tight\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex items-center gap-1\"\n\t\t\t\t\t\tstyle={{ fontWeight: 700, fontSize: 16 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span style={{ color: muted, fontWeight: 400, marginRight: 2 }}>\n\t\t\t\t\t\t\t#\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{title ?? \"general\"}\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\tviewBox=\"0 0 20 20\"\n\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M5 8l5 5 5-5\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstroke={fg}\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.8\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span style={{ fontSize: 12, color: muted }}>\n\t\t\t\t\t\t{subtitle ?? \"Add a topic\"}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex items-center gap-2\" style={{ color: muted }}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Activity\"\n\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\tstyle={{ width: 32, height: 32 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth=\"22\"\n\t\t\t\t\t\t\theight=\"22\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path d=\"M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18Zm0-2a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm-1-10h2v4h3v2h-5V9Z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Search\"\n\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-black/[0.06]\"\n\t\t\t\t\t\tstyle={{ width: 32, height: 32 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth=\"22\"\n\t\t\t\t\t\t\theight=\"22\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<circle cx=\"11\" cy=\"11\" r=\"7\" />\n\t\t\t\t\t\t\t<path d=\"m20 20-4-4\" strokeLinecap=\"round\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto py-3\"\n\t\t\t\tstyle={{ scrollbarWidth: \"none\", gap: 12 }}\n\t\t\t>\n\t\t\t\t{groups.map((g, gi) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={gi}\n\t\t\t\t\t\tclassName=\"flex items-start gap-2\"\n\t\t\t\t\t\tstyle={{ padding: \"0 16px\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"shrink-0 overflow-hidden\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: 36,\n\t\t\t\t\t\t\t\theight: 36,\n\t\t\t\t\t\t\t\tborderRadius: 6,\n\t\t\t\t\t\t\t\tmarginTop: 4,\n\t\t\t\t\t\t\t\tbackground: g.author?.avatar\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: pickColor(g.author?.name ?? \"\"),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: avatar */}\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={g.author?.avatar ?? DEFAULT_AVATAR}\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\tstyle={{ width: 36, height: 36, objectFit: \"cover\" }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex min-w-0 flex-1 flex-col\">\n\t\t\t\t\t\t\t<div className=\"flex items-baseline gap-2\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tfontWeight: 900,\n\t\t\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\t\t\tcolor: fg,\n\t\t\t\t\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{g.author?.name ?? \"Unknown\"}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span style={{ fontSize: 12, color: muted }}>\n\t\t\t\t\t\t\t\t\t{g.items[0].time ?? \"\"}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex flex-col\" style={{ gap: 2 }}>\n\t\t\t\t\t\t\t\t{g.items.map((m, i) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={m.id ?? `${gi}-${i}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: \"22px\",\n\t\t\t\t\t\t\t\t\t\t\tcolor: fg,\n\t\t\t\t\t\t\t\t\t\t\twordBreak: \"break-word\",\n\t\t\t\t\t\t\t\t\t\t\twhiteSpace: \"pre-wrap\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{m.typing ? (\n\t\t\t\t\t\t\t\t\t\t\t<TypingDots color={muted} />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\trenderSlackText(m.text ?? \"\", isDark)\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{g.items.some((m) => m.reactions?.length) && (\n\t\t\t\t\t\t\t\t<div className=\"mt-1 flex flex-wrap gap-1\">\n\t\t\t\t\t\t\t\t\t{g.items.flatMap((m) =>\n\t\t\t\t\t\t\t\t\t\t(m.reactions ?? []).map((r, ri) => (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`${ri}-${r.emoji}`}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex items-center gap-1\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tpadding: \"1px 7px\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius: 12,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborder: `1px solid ${isDark ? \"#3a3d42\" : \"#DDDDDD\"}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: isDark ? \"#26282C\" : \"#F1F4F7\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontWeight: 700,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: isDark ? \"#9DB0CA\" : \"#1264A3\",\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span style={{ fontSize: 13 }}>{r.emoji}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{r.count}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t{showComposer && (\n\t\t\t\t<div className=\"shrink-0 px-3 pt-2 pb-1.5\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-col overflow-hidden\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborder: `1px solid ${isDark ? \"#565856\" : \"#BABBBC\"}`,\n\t\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t\t\tbackground: isDark ? \"#222529\" : \"#fff\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Formatting toolbar */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"flex items-center\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: 32,\n\t\t\t\t\t\t\t\tpadding: \"0 6px\",\n\t\t\t\t\t\t\t\tcolor: muted,\n\t\t\t\t\t\t\t\tgap: 2,\n\t\t\t\t\t\t\t\tborderBottom: `1px solid ${isDark ? \"#3a3d42\" : \"#E8E8E8\"}`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Bold\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M4 2.75A.75.75 0 0 1 4.75 2h6.343a3.91 3.91 0 0 1 3.88 3.449A2 2 0 0 1 15 5.84l.001.067a3.9 3.9 0 0 1-1.551 3.118A4.627 4.627 0 0 1 11.875 18H4.75a.75.75 0 0 1-.75-.75V9.5a.8.8 0 0 1 .032-.218A.8.8 0 0 1 4 9.065zm2.5 5.565h3.593a2.157 2.157 0 1 0 0-4.315H6.5zm4.25 1.935H6.5v5.5h4.25a2.75 2.75 0 1 0 0-5.5\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Italic\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M7 2.75A.75.75 0 0 1 7.75 2h7.5a.75.75 0 0 1 0 1.5H12.3l-2.6 13h2.55a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5H7.7l2.6-13H7.75A.75.75 0 0 1 7 2.75\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Underline\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\td=\"M17.25 17.12a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5zM14.5 1.63a.75.75 0 0 1 .75.75v8a5.25 5.25 0 1 1-10.5 0v-8a.75.75 0 0 1 1.5 0v8a3.75 3.75 0 0 0 7.5 0v-8a.75.75 0 0 1 .75-.75\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Strike\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M11.721 3.84c-.91-.334-2.028-.36-3.035-.114-1.51.407-2.379 1.861-2.164 3.15C6.718 8.051 7.939 9.5 11.5 9.5l.027.001h5.723a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5h3.66c-.76-.649-1.216-1.468-1.368-2.377-.347-2.084 1.033-4.253 3.265-4.848l.007-.002.007-.002c1.252-.307 2.68-.292 3.915.16 1.252.457 2.337 1.381 2.738 2.874a.75.75 0 0 1-1.448.39c-.25-.925-.91-1.528-1.805-1.856m2.968 9.114a.75.75 0 1 0-1.378.59c.273.64.186 1.205-.13 1.674-.333.492-.958.925-1.82 1.137-.989.243-1.991.165-3.029-.124-.93-.26-1.613-.935-1.858-1.845a.75.75 0 0 0-1.448.39c.388 1.441 1.483 2.503 2.903 2.9 1.213.338 2.486.456 3.79.135 1.14-.28 2.12-.889 2.704-1.753.6-.888.743-1.992.266-3.104\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarSeparator dark={isDark} />\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Link\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M12.306 3.756a2.75 2.75 0 0 1 3.889 0l.05.05a2.75 2.75 0 0 1 0 3.889l-3.18 3.18a2.75 2.75 0 0 1-3.98-.095l-.03-.034a.75.75 0 0 0-1.11 1.009l.03.034a4.25 4.25 0 0 0 6.15.146l3.18-3.18a4.25 4.25 0 0 0 0-6.01l-.05-.05a4.25 4.25 0 0 0-6.01 0L9.47 4.47a.75.75 0 1 0 1.06 1.06zm-4.611 12.49a2.75 2.75 0 0 1-3.89 0l-.05-.051a2.75 2.75 0 0 1 0-3.89l3.18-3.179a2.75 2.75 0 0 1 3.98.095l.03.034a.75.75 0 1 0 1.11-1.01l-.03-.033a4.25 4.25 0 0 0-6.15-.146l-3.18 3.18a4.25 4.25 0 0 0 0 6.01l.05.05a4.25 4.25 0 0 0 6.01 0l1.775-1.775a.75.75 0 0 0-1.06-1.06z\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Ordered list\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M3.792 2.094A.5.5 0 0 1 4 2.5V6h1a.5.5 0 1 1 0 1H2a.5.5 0 1 1 0-1h1V3.194l-.842.28a.5.5 0 0 1-.316-.948l1.5-.5a.5.5 0 0 1 .45.068M7.75 3.5a.75.75 0 0 0 0 1.5h10a.75.75 0 0 0 0-1.5zM7 10.75a.75.75 0 0 1 .75-.75h10a.75.75 0 0 1 0 1.5h-10a.75.75 0 0 1-.75-.75m0 6.5a.75.75 0 0 1 .75-.75h10a.75.75 0 0 1 0 1.5h-10a.75.75 0 0 1-.75-.75m-4.293-3.36a1 1 0 0 1 .793-.39c.49 0 .75.38.75.75 0 .064-.033.194-.173.409a5 5 0 0 1-.594.711c-.256.267-.552.548-.87.848l-.088.084a42 42 0 0 0-.879.845A.5.5 0 0 0 2 18h3a.5.5 0 0 0 0-1H3.242l.058-.055c.316-.298.629-.595.904-.882a6 6 0 0 0 .711-.859c.18-.277.335-.604.335-.954 0-.787-.582-1.75-1.75-1.75a2 2 0 0 0-1.81 1.147.5.5 0 1 0 .905.427 1 1 0 0 1 .112-.184\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Bullet list\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M4 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a.75.75 0 0 1 .75-.75h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 7 3m.75 6.25a.75.75 0 0 0 0 1.5h10a.75.75 0 0 0 0-1.5zm0 7a.75.75 0 0 0 0 1.5h10a.75.75 0 0 0 0-1.5zM3 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarSeparator dark={isDark} />\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Quote\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M3.5 2.75a.75.75 0 0 0-1.5 0v14.5a.75.75 0 0 0 1.5 0zM6.75 3a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5zM6 10.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75a.75.75 0 0 1-.75-.75m.75 5.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5z\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Code\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M12.058 3.212c.396.12.62.54.5.936L8.87 16.29a.75.75 0 1 1-1.435-.436l3.686-12.143a.75.75 0 0 1 .936-.5M5.472 6.24a.75.75 0 0 1 .005 1.06l-2.67 2.693 2.67 2.691a.75.75 0 1 1-1.065 1.057l-3.194-3.22a.75.75 0 0 1 0-1.056l3.194-3.22a.75.75 0 0 1 1.06-.005m9.044 1.06a.75.75 0 1 1 1.065-1.056l3.194 3.221a.75.75 0 0 1 0 1.057l-3.194 3.219a.75.75 0 0 1-1.065-1.057l2.67-2.69z\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t<SlackToolbarButton label=\"Code block\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M9.212 2.737a.75.75 0 1 0-1.424-.474l-2.5 7.5a.75.75 0 0 0 1.424.474zm6.038.265a.75.75 0 0 0 0 1.5h2a.25.25 0 0 1 .25.25v11.5a.25.25 0 0 1-.25.25h-13a.25.25 0 0 1-.25-.25v-3.5a.75.75 0 0 0-1.5 0v3.5c0 .966.784 1.75 1.75 1.75h13a1.75 1.75 0 0 0 1.75-1.75v-11.5a1.75 1.75 0 0 0-1.75-1.75zm-3.69.5a.75.75 0 1 0-1.12.996l1.556 1.754-1.556 1.75a.75.75 0 1 0 1.12.997l2-2.249a.75.75 0 0 0 0-.996zM3.999 9.061a.75.75 0 0 1-1.058-.062l-2-2.249a.75.75 0 0 1 0-.996l2-2.252a.75.75 0 1 1 1.12.996L2.504 6.252l1.557 1.75a.75.75 0 0 1-.062 1.059\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Text input area */}\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\trows={1}\n\t\t\t\t\t\t\tplaceholder={`Message #${title ?? \"general\"}`}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"chat-demo-input resize-none border-0 bg-transparent outline-none\",\n\t\t\t\t\t\t\t\tisDark\n\t\t\t\t\t\t\t\t\t? \"placeholder:text-[#ABABAD]\"\n\t\t\t\t\t\t\t\t\t: \"placeholder:text-[#616061]\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tpadding: \"10px 12px\",\n\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\tcolor: fg,\n\t\t\t\t\t\t\t\tminHeight: 44,\n\t\t\t\t\t\t\t\tlineHeight: \"20px\",\n\t\t\t\t\t\t\t\tfontFamily: \"inherit\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{/* Footer toolbar */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-between\"\n\t\t\t\t\t\t\tstyle={{ padding: \"0 6px 6px\", color: muted }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t<SlackToolbarButton label=\"Attach\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\td=\"M10.75 3.25a.75.75 0 0 0-1.5 0v6H3.251L3.25 10v-.75a.75.75 0 0 0 0 1.5V10v.75h6v6a.75.75 0 0 0 1.5 0v-6h6a.75.75 0 0 0 0-1.5h-6z\"\n\t\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t\t<SlackToolbarButton label=\"Formatting\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\td=\"M6.941 3.952c-.459-1.378-2.414-1.363-2.853.022l-4.053 12.8a.75.75 0 0 0 1.43.452l1.101-3.476h6.06l1.163 3.487a.75.75 0 1 0 1.423-.474zm1.185 8.298L5.518 4.427 3.041 12.25zm6.198-5.537a4.74 4.74 0 0 1 3.037-.081A3.74 3.74 0 0 1 20 10.208V17a.75.75 0 0 1-1.5 0v-.745a8 8 0 0 1-2.847 1.355 3 3 0 0 1-3.15-1.143C10.848 14.192 12.473 11 15.287 11H18.5v-.792c0-.984-.641-1.853-1.581-2.143a3.24 3.24 0 0 0-2.077.056l-.242.089a2.22 2.22 0 0 0-1.34 1.382l-.048.145a.75.75 0 0 1-1.423-.474l.048-.145a3.72 3.72 0 0 1 2.244-2.315zM18.5 12.5h-3.213c-1.587 0-2.504 1.801-1.57 3.085.357.491.98.717 1.572.57a6.5 6.5 0 0 0 2.47-1.223l.741-.593z\"\n\t\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t\t<SlackToolbarButton label=\"Emoji\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\td=\"M2.5 10a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18M7.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-6.385 3.766a.75.75 0 1 0-1.425.468C6.796 14.08 8.428 15 10.027 15s3.23-.92 3.838-2.766a.75.75 0 1 0-1.425-.468c-.38 1.155-1.38 1.734-2.413 1.734s-2.032-.58-2.412-1.734\"\n\t\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t\t<SlackToolbarButton label=\"Mention\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\td=\"M2.5 10a7.5 7.5 0 1 1 15 0v.645c0 1.024-.83 1.855-1.855 1.855a1.145 1.145 0 0 1-1.145-1.145V6.75a.75.75 0 0 0-1.494-.098 4.5 4.5 0 1 0 .465 6.212A2.64 2.64 0 0 0 15.646 14 3.355 3.355 0 0 0 19 10.645V10a9 9 0 1 0-3.815 7.357.75.75 0 1 0-.865-1.225A7.5 7.5 0 0 1 2.5 10m7.5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6\"\n\t\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t\t<SlackToolbarButton label=\"More options\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\td=\"M14.5 10a1.75 1.75 0 1 1 3.5 0 1.75 1.75 0 0 1-3.5 0m-6.25 0a1.75 1.75 0 1 1 3.5 0 1.75 1.75 0 0 1-3.5 0M2 10a1.75 1.75 0 1 1 3.5 0A1.75 1.75 0 0 1 2 10\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</SlackToolbarButton>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"flex items-stretch overflow-hidden\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tborderRadius: 6,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${isDark ? \"#3a3d42\" : \"#E1E1E1\"}`,\n\t\t\t\t\t\t\t\t\tcolor: muted,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\taria-label=\"Send\"\n\t\t\t\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08]\"\n\t\t\t\t\t\t\t\t\tstyle={{ width: 24, height: 22, color: muted }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" aria-hidden>\n\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\t\td=\"M1.5 2.106c0-.462.498-.754.901-.528l15.7 7.714a.73.73 0 0 1 .006 1.307L2.501 18.46l-.07.017a.754.754 0 0 1-.931-.733v-4.572c0-1.22.971-2.246 2.213-2.268l6.547-.17c.27-.01.75-.243.75-.797 0-.553-.5-.795-.75-.795l-6.547-.171C2.47 8.95 1.5 7.924 1.5 6.704z\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<div style={{ width: 1, background: isDark ? \"#3a3d42\" : \"#E1E1E1\" }} />\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\taria-label=\"Schedule\"\n\t\t\t\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08]\"\n\t\t\t\t\t\t\t\t\tstyle={{ width: 20, height: 22, color: muted }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg width=\"12\" height=\"12\" viewBox=\"0 0 20 20\" aria-hidden>\n\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\td=\"M5.72 7.47a.75.75 0 0 1 1.06 0L10 10.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0L5.72 8.53a.75.75 0 0 1 0-1.06\"\n\t\t\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction SlackToolbarButton({\n\tlabel,\n\tchildren,\n}: {\n\tlabel: string;\n\tchildren: React.ReactNode;\n}) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label={label}\n\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08]\"\n\t\t\tstyle={{ width: 26, height: 24 }}\n\t\t>\n\t\t\t<svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" aria-hidden>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</button>\n\t);\n}\n\nfunction SlackToolbarSeparator({ dark }: { dark: boolean }) {\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"inline-block\",\n\t\t\t\twidth: 1,\n\t\t\t\theight: 16,\n\t\t\t\tmargin: \"0 4px\",\n\t\t\t\tbackground: dark ? \"#3a3d42\" : \"#E1E1E1\",\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction renderSlackText(text: string, dark: boolean) {\n\tconst parts = text.split(/(@\\w+|#\\w+|`[^`]+`)/g);\n\treturn parts.map((p, i) => {\n\t\tif (/^@\\w+/.test(p)) {\n\t\t\treturn (\n\t\t\t\t<span\n\t\t\t\t\tkey={i}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: dark ? \"rgba(29,155,209,0.18)\" : \"#E8F5FA\",\n\t\t\t\t\t\tcolor: dark ? \"#1D9BD1\" : \"#1264A3\",\n\t\t\t\t\t\tpadding: \"1px 3px\",\n\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{p}\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\t\tif (/^#\\w+/.test(p)) {\n\t\t\treturn (\n\t\t\t\t<span\n\t\t\t\t\tkey={i}\n\t\t\t\t\tstyle={{ color: dark ? \"#1D9BD1\" : \"#1264A3\", fontWeight: 600 }}\n\t\t\t\t>\n\t\t\t\t\t{p}\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\t\tif (/^`[^`]+`$/.test(p)) {\n\t\t\treturn (\n\t\t\t\t<code\n\t\t\t\t\tkey={i}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: dark ? \"#222529\" : \"#F8F8F8\",\n\t\t\t\t\t\tborder: `1px solid ${dark ? \"#3a3d42\" : \"#E8E8E8\"}`,\n\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\tpadding: \"0 4px\",\n\t\t\t\t\t\tfontFamily: 'Menlo, Consolas, \"Liberation Mono\", monospace',\n\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\tcolor: \"#E01E5A\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{p.slice(1, -1)}\n\t\t\t\t</code>\n\t\t\t);\n\t\t}\n\t\treturn <span key={i}>{p}</span>;\n\t});\n}\n\n/* =========================================================================\n * Discord — chrome and composer matched to the iOS screenshot\n * (CleanShot 2026-05-11 at 13.05.53@2x.png)\n * ========================================================================= */\n\nfunction DiscordDemo({\n\tmessages,\n\ttitle,\n\tsubtitle,\n\tshowComposer,\n\tclassName,\n}: {\n\tmessages: ChatMessageItem[];\n\ttitle?: string;\n\tsubtitle?: string;\n\tshowComposer: boolean;\n\tclassName?: string;\n}) {\n\tconst bg = \"#1E1F22\";\n\tconst fg = \"#DBDEE1\";\n\tconst muted = \"#949BA4\";\n\tconst iconBg = \"#2B2D31\";\n\n\tconst groups = groupByAuthor(messages);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex h-full flex-col\", className)}\n\t\t\tstyle={{ background: bg, color: fg, fontFamily: DISCORD_STACK }}\n\t\t>\n\t\t\t{/* Channel header */}\n\t\t\t<div\n\t\t\t\tclassName=\"flex shrink-0 items-center gap-2 px-3\"\n\t\t\t\tstyle={{\n\t\t\t\t\tbackground: bg,\n\t\t\t\t\theight: 48,\n\t\t\t\t\tborderBottom: \"1px solid rgba(0,0,0,0.4)\",\n\t\t\t\t\tzIndex: 2,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label=\"Back\"\n\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-white/[0.06]\"\n\t\t\t\t\tstyle={{ width: 28, height: 28, color: fg }}\n\t\t\t\t>\n\t\t\t\t\t<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" aria-hidden fill=\"none\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M14 6l-6 6 6 6\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t\t<span style={{ fontSize: 18, color: muted, marginLeft: 2 }}>#</span>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tfontSize: 17,\n\t\t\t\t\t\tfontWeight: 700,\n\t\t\t\t\t\tcolor: \"#FFFFFF\",\n\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{title ?? \"general\"}\n\t\t\t\t</span>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"14\"\n\t\t\t\t\theight=\"14\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\taria-hidden\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstyle={{ marginLeft: 2, color: muted }}\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M9 6l6 6-6 6\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<div className=\"flex flex-1\" />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label=\"Search\"\n\t\t\t\t\tclassName=\"flex cursor-pointer items-center justify-center rounded-full transition-[filter] duration-150 hover:brightness-125 active:brightness-90\"\n\t\t\t\t\tstyle={{ width: 32, height: 32, background: iconBg, color: muted }}\n\t\t\t\t>\n\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" aria-hidden fill=\"none\">\n\t\t\t\t\t\t<circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"m20 20-4-4\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto py-3\"\n\t\t\t\tstyle={{ scrollbarWidth: \"none\", gap: 18 }}\n\t\t\t>\n\t\t\t\t{groups.map((g, gi) => (\n\t\t\t\t\t<div key={gi} className=\"flex gap-3\" style={{ padding: \"0 12px\" }}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"shrink-0 overflow-hidden rounded-full\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: 40,\n\t\t\t\t\t\t\t\theight: 40,\n\t\t\t\t\t\t\t\tbackground: g.author?.avatar\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: pickColor(g.author?.name ?? \"\"),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: avatar */}\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={g.author?.avatar ?? DEFAULT_AVATAR}\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\tstyle={{ width: 40, height: 40, objectFit: \"cover\" }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex min-w-0 flex-1 flex-col\">\n\t\t\t\t\t\t\t<div className=\"flex items-baseline gap-2\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\t\t\tcolor: g.author?.color ?? \"#FFFFFF\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{g.author?.name ?? \"Unknown\"}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span style={{ fontSize: 12, color: muted }}>\n\t\t\t\t\t\t\t\t\tToday at {g.items[0].time ?? \"\"}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex flex-col\" style={{ gap: 4 }}>\n\t\t\t\t\t\t\t\t{g.items.map((m, i) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={m.id ?? `${gi}-${i}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: \"1.375\",\n\t\t\t\t\t\t\t\t\t\t\tcolor: fg,\n\t\t\t\t\t\t\t\t\t\t\twordBreak: \"break-word\",\n\t\t\t\t\t\t\t\t\t\t\twhiteSpace: \"pre-wrap\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{m.typing ? (\n\t\t\t\t\t\t\t\t\t\t\t<TypingDots color={muted} />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\trenderDiscordText(m.text ?? \"\")\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{g.items.some((m) => m.reactions?.length) && (\n\t\t\t\t\t\t\t\t<div className=\"mt-1 flex flex-wrap gap-1\">\n\t\t\t\t\t\t\t\t\t{g.items.flatMap((m) =>\n\t\t\t\t\t\t\t\t\t\t(m.reactions ?? []).map((r, ri) => (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`${ri}-${r.emoji}`}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex items-center gap-1\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tpadding: \"2px 7px\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborder: \"1px solid rgba(88,101,242,0.3)\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: \"rgba(88,101,242,0.15)\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize: 13,\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: \"#A8B6FF\",\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{r.emoji}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{r.count}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t{/* Composer — 4 circular buttons + flat pill input + mic, per screenshot */}\n\t\t\t{showComposer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex shrink-0 items-center gap-2 px-3 pt-2 pb-2\"\n\t\t\t\t\tstyle={{ background: bg }}\n\t\t\t\t>\n\t\t\t\t\t<DiscordCircleButton bg={iconBg} fg={fg} label=\"Add\">\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" aria-hidden fill=\"none\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 5v14M5 12h14\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2.4\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</DiscordCircleButton>\n\t\t\t\t\t<DiscordCircleButton bg={iconBg} fg={fg} label=\"Stickers\">\n\t\t\t\t\t\t<DiscordStickerIcon size={20} />\n\t\t\t\t\t</DiscordCircleButton>\n\t\t\t\t\t<DiscordCircleButton bg={iconBg} fg=\"#5865F2\" label=\"Gift\">\n\t\t\t\t\t\t<DiscordGiftIcon size={20} />\n\t\t\t\t\t</DiscordCircleButton>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 items-center\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground: iconBg,\n\t\t\t\t\t\t\tborderRadius: 20,\n\t\t\t\t\t\t\tpadding: \"0 12px\",\n\t\t\t\t\t\t\theight: 36,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tplaceholder=\"Message\"\n\t\t\t\t\t\t\tclassName=\"chat-demo-input min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[#949BA4]\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: 15,\n\t\t\t\t\t\t\t\tcolor: fg,\n\t\t\t\t\t\t\t\tfontFamily: \"inherit\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<DiscordCircleButton bg={iconBg} fg={fg} label=\"Voice\">\n\t\t\t\t\t\t<MicIcon size={18} />\n\t\t\t\t\t</DiscordCircleButton>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction DiscordCircleButton({\n\tbg,\n\tfg,\n\tlabel,\n\tchildren,\n}: {\n\tbg: string;\n\tfg: string;\n\tlabel: string;\n\tchildren: React.ReactNode;\n}) {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\taria-label={label}\n\t\t\tclassName=\"flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-[filter,opacity] duration-150 hover:brightness-125 active:brightness-90\"\n\t\t\tstyle={{ width: 36, height: 36, background: bg, color: fg }}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nfunction renderDiscordText(text: string) {\n\tconst parts = text.split(/(@\\w+|#\\w+|`[^`]+`|:\\w+:)/g);\n\treturn parts.map((p, i) => {\n\t\tif (/^@\\w+/.test(p)) {\n\t\t\treturn (\n\t\t\t\t<span\n\t\t\t\t\tkey={i}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: \"rgba(88,101,242,0.3)\",\n\t\t\t\t\t\tcolor: \"#C9CDFB\",\n\t\t\t\t\t\tpadding: \"0 2px\",\n\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\tfontWeight: 500,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{p}\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\t\tif (/^#\\w+/.test(p)) {\n\t\t\treturn (\n\t\t\t\t<span key={i} style={{ color: \"#00A8FC\", fontWeight: 500 }}>\n\t\t\t\t\t{p}\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\t\tif (/^`[^`]+`$/.test(p)) {\n\t\t\treturn (\n\t\t\t\t<code\n\t\t\t\t\tkey={i}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: \"#2B2D31\",\n\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\tpadding: \"0 4px\",\n\t\t\t\t\t\tfontFamily: '\"Menlo\", Consolas, monospace',\n\t\t\t\t\t\tfontSize: 13.6,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{p.slice(1, -1)}\n\t\t\t\t</code>\n\t\t\t);\n\t\t}\n\t\treturn <span key={i}>{p}</span>;\n\t});\n}\n\n/* =========================================================================\n * Shared helpers\n * ========================================================================= */\n\nfunction TypingDots({ color }: { color: string }) {\n\treturn (\n\t\t<span\n\t\t\taria-label=\"typing\"\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"inline-flex\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tgap: 4,\n\t\t\t\tpadding: \"2px 0\",\n\t\t\t}}\n\t\t>\n\t\t\t{[0, 1, 2].map((i) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={i}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 6,\n\t\t\t\t\t\theight: 6,\n\t\t\t\t\t\tborderRadius: 9999,\n\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\topacity: 0.6,\n\t\t\t\t\t\tanimation: `chat-demo-typing 1.2s ${i * 0.15}s infinite ease-in-out`,\n\t\t\t\t\t\tdisplay: \"inline-block\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t<style>{`\n\t\t\t\t@keyframes chat-demo-typing {\n\t\t\t\t\t0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }\n\t\t\t\t\t30% { transform: translateY(-3px); opacity: 0.9; }\n\t\t\t\t}\n\t\t\t`}</style>\n\t\t</span>\n\t);\n}\n\n/* ----- Shared composer icons (user-provided paths) ----- */\n\nfunction MicIcon({ size = 22 }: { size?: number }) {\n\treturn (\n\t\t<svg\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\taria-hidden\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t>\n\t\t\t<path d=\"M19 10V12C19 15.866 15.866 19 12 19M5 10V12C5 15.866 8.13401 19 12 19M12 19V22M8 22H16M12 15C10.3431 15 9 13.6569 9 12V5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5V12C15 13.6569 13.6569 15 12 15Z\" />\n\t\t</svg>\n\t);\n}\n\nfunction AttachmentIcon({ size = 22 }: { size?: number }) {\n\treturn (\n\t\t<svg\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\taria-hidden\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t>\n\t\t\t<path d=\"M21.1525 10.8995L12.1369 19.9151C10.0866 21.9653 6.7625 21.9653 4.71225 19.9151C2.662 17.8648 2.662 14.5407 4.71225 12.4904L13.7279 3.47483C15.0947 2.108 17.3108 2.108 18.6776 3.47483C20.0444 4.84167 20.0444 7.05775 18.6776 8.42458L10.0156 17.0866C9.33213 17.7701 8.22409 17.7701 7.54068 17.0866C6.85726 16.4032 6.85726 15.2952 7.54068 14.6118L15.1421 7.01037\" />\n\t\t</svg>\n\t);\n}\n\nfunction CameraIcon({ size = 22 }: { size?: number }) {\n\treturn (\n\t\t<svg\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\taria-hidden\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t>\n\t\t\t<path d=\"M2 8.37722C2 8.0269 2 7.85174 2.01462 7.70421C2.1556 6.28127 3.28127 5.1556 4.70421 5.01462C4.85174 5 5.03636 5 5.40558 5C5.54785 5 5.61899 5 5.67939 4.99634C6.45061 4.94963 7.12595 4.46288 7.41414 3.746C7.43671 3.68986 7.45781 3.62657 7.5 3.5C7.54219 3.37343 7.56329 3.31014 7.58586 3.254C7.87405 2.53712 8.54939 2.05037 9.32061 2.00366C9.38101 2 9.44772 2 9.58114 2H14.4189C14.5523 2 14.619 2 14.6794 2.00366C15.4506 2.05037 16.126 2.53712 16.4141 3.254C16.4367 3.31014 16.4578 3.37343 16.5 3.5C16.5422 3.62657 16.5633 3.68986 16.5859 3.746C16.874 4.46288 17.5494 4.94963 18.3206 4.99634C18.381 5 18.4521 5 18.5944 5C18.9636 5 19.1483 5 19.2958 5.01462C20.7187 5.1556 21.8444 6.28127 21.9854 7.70421C22 7.85174 22 8.0269 22 8.37722V16.2C22 17.8802 22 18.7202 21.673 19.362C21.3854 19.9265 20.9265 20.3854 20.362 20.673C19.7202 21 18.8802 21 17.2 21H6.8C5.11984 21 4.27976 21 3.63803 20.673C3.07354 20.3854 2.6146 19.9265 2.32698 19.362C2 18.7202 2 17.8802 2 16.2V8.37722Z\" />\n\t\t\t<path d=\"M12 16.5C14.2091 16.5 16 14.7091 16 12.5C16 10.2909 14.2091 8.5 12 8.5C9.79086 8.5 8 10.2909 8 12.5C8 14.7091 9.79086 16.5 12 16.5Z\" />\n\t\t</svg>\n\t);\n}\n\nfunction DiscordStickerIcon({ size = 20 }: { size?: number }) {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 96 96\"\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\taria-hidden\n\t\t>\n\t\t\t<g transform=\"matrix(2.7,0,0,2.7,-79.6,-81.35)\">\n\t\t\t\t<g transform=\"translate(32.022 32.647)\">\n\t\t\t\t\t<g transform=\"translate(7.18 7.181)\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\td=\"M-6.555 1.641c-.375 1.401.455 2.84 1.856 3.216l6.34 1.698c1.4.376 2.841-.456 3.216-1.856L6.555-1.641C6.93-3.042 6.099-4.481 4.699-4.857L-1.641-6.556c-1.4-.375-2.841.457-3.216 1.857z\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t\t<g transform=\"translate(47.443 32.419)\">\n\t\t\t\t\t<g transform=\"translate(7.802 7.022)\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\td=\"M-6.478 2.404C-7.552 4.372-6.127 6.772-3.885 6.772h7.771c2.242 0 3.666-2.4 2.593-4.368L2.593-4.719c-1.119-2.053-4.066-2.053-5.186 0z\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t\t<g transform=\"translate(32.12 49.045)\">\n\t\t\t\t\t<g transform=\"translate(7.082 7.047)\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\td=\"M-.941-6.268c.52-.529 1.361-.529 1.882 0l1.116 1.135c.213.216.491.353.789.388l1.566.183c.729.085 1.254.756 1.173 1.501l-.174 1.598a1.4 1.4 0 0 0 .195.872l.836 1.363c.39.635.203 1.472-.419 1.872l-1.333.858a1.4 1.4 0 0 0-.547.699l-.523 1.517c-.243.706-1.001 1.079-1.695.833l-1.488-.529a1.32 1.32 0 0 0-.876 0l-1.489.529c-.693.246-1.451-.127-1.695-.833l-.523-1.517a1.4 1.4 0 0 0-.546-.699L-6.024 2.644c-.621-.4-.808-1.237-.419-1.872l.837-1.363a1.4 1.4 0 0 0 .194-.872l-.173-1.598c-.081-.745.443-1.416 1.173-1.501l1.565-.183c.299-.035.577-.172.79-.388z\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t\t<g transform=\"matrix(-1,0,0,-1,62.694,63.32)\">\n\t\t\t\t\t<g transform=\"translate(7.247 7.247)\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\td=\"M1.513-5.592C.993-6.997-.994-6.997-1.514-5.592l-.677 1.831c-.269.727-.843 1.301-1.571 1.57l-1.83.678c-1.405.52-1.405 2.506 0 3.026l1.83.678c.728.269 1.302.843 1.571 1.57l.677 1.831c.52 1.405 2.507 1.405 3.027 0l.677-1.831c.27-.727.843-1.301 1.571-1.57l1.832-.678c1.405-.52 1.405-2.506 0-3.026l-1.832-.678c-.728-.269-1.301-.843-1.571-1.57z\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction DiscordGiftIcon({ size = 20 }: { size?: number }) {\n\t// Verbatim Lottie SVG provided by the user — transforms preserved as-is.\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\taria-hidden\n\t\t>\n\t\t\t<g transform=\"matrix(0.04,0,0,0.04,0,0)\">\n\t\t\t\t<g transform=\"matrix(25,0,0,25,300,300)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\td=\"M-7,10 C-8.105,10 -9,9.105 -9,8 V2.5 C-9,2.224 -8.776,2 -8.5,2 H-1.5 C-1.224,2 -1,2.224 -1,2.5 V9.5 C-1,9.776 -1.224,10 -1.5,10 Z M1,9.5 C1,9.776 1.224,10 1.5,10 H7 C8.105,10 9,9.105 9,8 V2.5 C9,2.224 8.776,2 8.5,2 H1.5 C1.224,2 1,2.224 1,2.5 Z\"\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t\t<g transform=\"matrix(25,0,0,25,300,300)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\td=\"M-10,-2 C-10,-3.105 -9.105,-4 -8,-4 H8 C9.105,-4 10,-3.105 10,-2 V-0.5 C10,-0.224 9.776,0 9.5,0 H-9.5 C-9.776,0 -10,-0.224 -10,-0.5 Z\"\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t\t<g transform=\"matrix(25,0,0,25,300,300)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\td=\"M7,-6 C7,-7.657 5.657,-9 4,-9 H3.911 C2.494,-9 1.259,-8.036 0.915,-6.661 L0,-3 H4 C5.657,-3 7,-4.343 7,-6 Z\"\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t\t<g transform=\"matrix(25,0,0,25,300,300)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\td=\"M-7,-6 C-7,-7.657 -5.657,-9 -4,-9 H-3.911 C-2.494,-9 -1.259,-8.036 -0.915,-6.661 L0,-3 H-4 C-5.657,-3 -7,-4.343 -7,-6 Z\"\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction EmojiIcon({ size = 22 }: { size?: number }) {\n\treturn (\n\t\t<svg\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\taria-hidden\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t>\n\t\t\t<path d=\"M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14M15 9H15.01M9 9H9.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM15.5 9C15.5 9.27614 15.2761 9.5 15 9.5C14.7239 9.5 14.5 9.27614 14.5 9C14.5 8.72386 14.7239 8.5 15 8.5C15.2761 8.5 15.5 8.72386 15.5 9ZM9.5 9C9.5 9.27614 9.27614 9.5 9 9.5C8.72386 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.72386 8.5 9 8.5C9.27614 8.5 9.5 8.72386 9.5 9Z\" />\n\t\t</svg>\n\t);\n}\n\nfunction pickColor(seed: string) {\n\tconst palette = [\n\t\t\"#5865F2\",\n\t\t\"#EB459E\",\n\t\t\"#F23F42\",\n\t\t\"#23A55A\",\n\t\t\"#F0B232\",\n\t\t\"#FF7C5C\",\n\t\t\"#9B7CFF\",\n\t\t\"#1ABC9C\",\n\t\t\"#3498DB\",\n\t\t\"#E74C3C\",\n\t];\n\tlet hash = 0;\n\tfor (let i = 0; i < seed.length; i++)\n\t\thash = (hash << 5) - hash + seed.charCodeAt(i);\n\treturn palette[Math.abs(hash) % palette.length];\n}\n\ntype AuthorGroup = {\n\tauthor?: { name: string; avatar?: string; color?: string };\n\titems: ChatMessageItem[];\n};\n\nfunction groupByAuthor(messages: ChatMessageItem[]): AuthorGroup[] {\n\tconst out: AuthorGroup[] = [];\n\tfor (const m of messages) {\n\t\tconst last = out[out.length - 1];\n\t\tif (last && last.author?.name === m.author) {\n\t\t\tlast.items.push(m);\n\t\t} else {\n\t\t\tout.push({\n\t\t\t\tauthor: {\n\t\t\t\t\tname: m.author ?? \"Unknown\",\n\t\t\t\t\tavatar: m.avatar,\n\t\t\t\t\tcolor: m.authorColor,\n\t\t\t\t},\n\t\t\t\titems: [m],\n\t\t\t});\n\t\t}\n\t}\n\treturn out;\n}\n",
      "type": "registry:ui"
    }
  ]
}