{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"chat-bubbles","type":"registry:component","title":"Chat bubbles","description":"Four message threads — support with typing indicator, group chat with reactions, file and voice attachments, and delivery receipts — where every new message springs in.","author":"GetUrUI ","dependencies":["motion","lucide-react"],"registryDependencies":[],"files":[{"path":"registry/geturui/examples/chat-bubbles/support-thread.tsx","type":"registry:component","target":"components/examples/chat-bubbles/support-thread.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { ArrowUp } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SupportMessage {\n id: string;\n from: \"agent\" | \"user\";\n text: string;\n time: string;\n}\n\nexport interface QuickReply {\n label: string;\n /** What the agent answers after a short typing pause. */\n reply: string;\n}\n\nexport interface SupportThreadProps {\n agentName?: string;\n agentRole?: string;\n messages?: SupportMessage[];\n quickReplies?: QuickReply[];\n /** Agent answer for free-typed messages. */\n fallbackReply?: string;\n /** How long the typing indicator shows, in ms. */\n typingDelay?: number;\n onSend?: (text: string) => void;\n className?: string;\n}\n\nconst DEFAULT_MESSAGES: SupportMessage[] = [\n { id: \"m1\", from: \"agent\", text: \"Hi Sam, I'm Noor from the GetUrUI team. I can see your Pro trial ends on Friday.\", time: \"9:41\" },\n { id: \"m2\", from: \"agent\", text: \"Anything I can help with before then?\", time: \"9:41\" },\n { id: \"m3\", from: \"user\", text: \"Yes, I want to keep the components my team already installed.\", time: \"9:43\" },\n];\n\nconst DEFAULT_REPLIES: QuickReply[] = [\n { label: \"Upgrade my plan\", reply: \"Done in a click: open Billing and choose Pro. Everything installed stays exactly where it is.\" },\n { label: \"Download an invoice\", reply: \"Invoices live under Billing, then History. Each one has a PDF button on the right.\" },\n { label: \"Add a teammate\", reply: \"Go to Team, then Invite. Seats are added to your next invoice, prorated by the day.\" },\n];\n\nfunction TypingDots({ reduce }: { reduce: boolean }) {\n return (\n \n {[0, 1, 2].map((i) => (\n \n ))}\n \n );\n}\n\n/** Support conversation with grouped bubbles, quick-reply chips and an agent typing indicator before each answer. */\nexport function SupportThread({\n agentName = \"Noor\",\n agentRole = \"Customer support\",\n messages = DEFAULT_MESSAGES,\n quickReplies = DEFAULT_REPLIES,\n fallbackReply = \"Thanks, I'm looking into it now and will reply right here.\",\n typingDelay = 1400,\n onSend,\n className,\n}: SupportThreadProps) {\n const reduce = useReducedMotion() ?? false;\n const [list, setList] = React.useState(messages);\n const [chips, setChips] = React.useState(quickReplies);\n const [typing, setTyping] = React.useState(false);\n const [draft, setDraft] = React.useState(\"\");\n const scroller = React.useRef(null);\n const timers = React.useRef[]>([]);\n const seq = React.useRef(0);\n const inputId = React.useId();\n\n React.useEffect(() => {\n const pending = timers.current;\n return () => pending.forEach(clearTimeout);\n }, []);\n React.useEffect(() => {\n scroller.current?.scrollTo({ top: scroller.current.scrollHeight, behavior: reduce ? \"auto\" : \"smooth\" });\n }, [list, typing, reduce]);\n\n function send(text: string, reply: string) {\n const clean = text.trim();\n if (!clean) return;\n seq.current += 1;\n const n = seq.current;\n setList((l) => [...l, { id: `u${n}`, from: \"user\", text: clean, time: \"Now\" }]);\n onSend?.(clean);\n setTyping(true);\n timers.current.push(\n setTimeout(() => {\n setTyping(false);\n setList((l) => [...l, { id: `a${n}`, from: \"agent\", text: reply, time: \"Now\" }]);\n }, typingDelay),\n );\n }\n\n return (\n
\n
\n \n {agentName.slice(0, 1)}\n \n \n
\n

{agentName}

\n

\n {agentRole} · Online\n

\n
\n Replies in ~2 min\n
\n\n
\n {list.map((m, i) => {\n const mine = m.from === \"user\";\n const lastOfGroup = list[i + 1]?.from !== m.from;\n return (\n \n \n {mine ? \"You\" : agentName}: \n {m.text}\n

\n {lastOfGroup && {m.time}}\n \n );\n })}\n \n {typing && (\n \n \n {agentName} is typing\n \n )}\n \n
\n\n
\n {chips.length > 0 && (\n
\n \n {chips.map((c) => (\n {\n setChips((all) => all.filter((x) => x.label !== c.label));\n send(c.label, c.reply);\n }}\n className=\"rounded-full border border-border-strong px-3 py-1 text-[12.5px] font-medium text-ink outline-none transition-colors hover:bg-surface-hover focus-visible:shadow-[var(--focus-ring)] disabled:opacity-50\"\n >\n {c.label}\n \n ))}\n \n
\n )}\n {\n e.preventDefault();\n send(draft, fallbackReply);\n setDraft(\"\");\n }}\n className=\"flex items-center gap-2 rounded-full border border-border-strong bg-surface py-1 pl-4 pr-1 focus-within:shadow-[var(--focus-ring)]\"\n >\n \n setDraft(e.target.value)}\n placeholder={`Message ${agentName}`}\n autoComplete=\"off\"\n className=\"min-w-0 flex-1 bg-transparent text-[13.5px] text-ink outline-none placeholder:text-ink-subtle\"\n />\n \n \n \n \n
\n
\n );\n}\n"},{"path":"registry/geturui/examples/chat-bubbles/group-reactions.tsx","type":"registry:component","target":"components/examples/chat-bubbles/group-reactions.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Heart, Laugh, SmilePlus, Sparkles, ThumbsUp, type LucideIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ReactionKey = \"agree\" | \"love\" | \"brilliant\" | \"funny\";\n\nexport interface GroupMessage {\n id: string;\n author: string;\n time: string;\n text: string;\n /** Count from other people per reaction. */\n reactions?: Partial>;\n /** Reactions the current user has added. */\n mine?: ReactionKey[];\n}\n\nexport interface GroupChatProps {\n channel?: string;\n members?: number;\n messages?: GroupMessage[];\n onReact?: (messageId: string, reaction: ReactionKey, active: boolean) => void;\n className?: string;\n}\n\nconst REACTIONS: { key: ReactionKey; label: string; Icon: LucideIcon }[] = [\n { key: \"agree\", label: \"Agree\", Icon: ThumbsUp },\n { key: \"love\", label: \"Love\", Icon: Heart },\n { key: \"brilliant\", label: \"Brilliant\", Icon: Sparkles },\n { key: \"funny\", label: \"Funny\", Icon: Laugh },\n];\n\nconst DEFAULT_MESSAGES: GroupMessage[] = [\n { id: \"g1\", author: \"Priya Nair\", time: \"10:02\", text: \"Launch checklist is green. Docs, changelog and the pricing page are live on staging.\", reactions: { agree: 3, love: 1 } },\n { id: \"g2\", author: \"Priya Nair\", time: \"10:02\", text: \"Can someone give the hero animation one last look on a slow phone?\" },\n { id: \"g3\", author: \"Jonah Reyes\", time: \"10:05\", text: \"Checked on a four-year-old Android. Smooth, and it falls back to a fade with reduced motion on.\", reactions: { brilliant: 2 }, mine: [\"agree\"] },\n { id: \"g4\", author: \"Theo Lind\", time: \"10:07\", text: \"Then we ship at 11. I'll post in the announcements channel.\", reactions: { love: 4, funny: 1 } },\n];\n\nconst TONES = [\"bg-ink text-bg\", \"bg-surface-sunken text-ink border border-border\", \"bg-ember-soft text-ember-ink\"];\nconst initialsOf = (n: string) => n.split(/\\s+/).map((p) => p[0]).slice(0, 2).join(\"\").toUpperCase();\nconst spring = { type: \"spring\", stiffness: 420, damping: 30 } as const;\n\n/** Group chat with grouped senders, toggleable reaction pills whose counts roll, and an inline reaction picker per message. */\nexport function GroupChat({ channel = \"launch-week\", members = 8, messages = DEFAULT_MESSAGES, onReact, className }: GroupChatProps) {\n const reduce = useReducedMotion() ?? false;\n const [mine, setMine] = React.useState>(() => Object.fromEntries(messages.map((m) => [m.id, m.mine ?? []])));\n const [picker, setPicker] = React.useState(null);\n const authors = Array.from(new Set(messages.map((m) => m.author)));\n\n function toggle(messageId: string, key: ReactionKey) {\n const has = mine[messageId]?.includes(key) ?? false;\n setMine((s) => ({ ...s, [messageId]: has ? s[messageId].filter((k) => k !== key) : [...(s[messageId] ?? []), key] }));\n onReact?.(messageId, key, !has);\n }\n\n return (\n
\n
\n

\n #\n {channel}\n

\n

{members} members

\n
\n
    \n {messages.map((m, i) => {\n const first = messages[i - 1]?.author !== m.author;\n const active = mine[m.id] ?? [];\n const shown = REACTIONS.filter((r) => (m.reactions?.[r.key] ?? 0) + (active.includes(r.key) ? 1 : 0) > 0);\n const tone = TONES[authors.indexOf(m.author) % TONES.length];\n return (\n {\n if (e.key !== \"Escape\" || picker !== m.id) return;\n setPicker(null);\n e.currentTarget.querySelector(\"[data-add-reaction]\")?.focus();\n }}\n className={cn(\"group relative flex gap-3 rounded-lg px-2 py-1 transition-colors hover:bg-surface-hover\", first && i > 0 && \"mt-2\")}\n >\n \n {initialsOf(m.author)}\n \n
    \n {first && (\n

    \n {m.author}\n {m.time}\n

    \n )}\n

    {m.text}

    \n {shown.length > 0 && (\n
    \n {shown.map(({ key, label, Icon }) => {\n const on = active.includes(key);\n const n = (m.reactions?.[key] ?? 0) + (on ? 1 : 0);\n return (\n toggle(m.id, key)}\n className={cn(\n \"inline-flex h-6 items-center gap-1 rounded-full border px-2 text-[11.5px] font-medium outline-none transition-colors focus-visible:shadow-[var(--focus-ring)]\",\n on ? \"border-volt-ink/40 bg-volt-soft text-ink\" : \"border-border bg-surface text-ink-muted hover:border-border-strong\",\n )}\n >\n \n \n \n \n {n}\n \n \n \n \n );\n })}\n
    \n )}\n
    \n\n
    \n \n {picker === m.id && (\n \n {REACTIONS.map(({ key, label, Icon }, j) => (\n {\n toggle(m.id, key);\n setPicker(null);\n }}\n className=\"grid size-7 place-items-center rounded-full text-ink-muted outline-none transition-colors hover:bg-surface-hover hover:text-ink focus-visible:shadow-[var(--focus-ring)] aria-pressed:text-volt-ink\"\n >\n \n \n ))}\n \n )}\n \n setPicker((p) => (p === m.id ? null : m.id))}\n className={cn(\n \"grid size-7 place-items-center rounded-full border border-border bg-surface-raised text-ink-muted shadow-sm outline-none transition-opacity hover:text-ink focus-visible:opacity-100 focus-visible:shadow-[var(--focus-ring)]\",\n picker === m.id ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100\",\n )}\n >\n \n \n
    \n \n );\n })}\n
\n
\n );\n}\n"},{"path":"registry/geturui/examples/chat-bubbles/attachments.tsx","type":"registry:component","target":"components/examples/chat-bubbles/attachments.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { ArrowDown, Check, FileText, Pause, Play } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AttachmentMessagesProps {\n sender?: string;\n note?: string;\n file?: { name: string; size: string; pages?: number };\n /** Voice note length in seconds. */\n voiceSeconds?: number;\n /** Simulated download time, in ms. */\n downloadMs?: number;\n onDownload?: () => void;\n className?: string;\n}\n\nconst BARS = Array.from({ length: 42 }, (_, i) => Math.round(5 + Math.abs(Math.sin(i * 1.7) * 0.55 + Math.sin(i * 0.43) * 0.45) * 20));\nconst SPEEDS = [1, 1.5, 2] as const;\nconst clock = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, \"0\")}`;\n\n/** Chat messages carrying a file with a ring-progress download and a voice note with a seekable waveform, play/pause morph and speed control. */\nexport function AttachmentMessages({\n sender = \"Priya\",\n note = \"Brand audit is ready. Pages 4 to 9 cover the new type scale.\",\n file = { name: \"Q3-brand-audit.pdf\", size: \"2.4 MB\", pages: 18 },\n voiceSeconds = 34,\n downloadMs = 1600,\n onDownload,\n className,\n}: AttachmentMessagesProps) {\n const reduce = useReducedMotion() ?? false;\n const [dl, setDl] = React.useState<\"idle\" | \"loading\" | \"done\">(\"idle\");\n const [playing, setPlaying] = React.useState(false);\n const [pos, setPos] = React.useState(0);\n const [speed, setSpeed] = React.useState<(typeof SPEEDS)[number]>(1);\n const dlTimer = React.useRef | null>(null);\n const posRef = React.useRef(0);\n\n function seek(seconds: number) {\n posRef.current = seconds;\n setPos(seconds);\n }\n\n React.useEffect(() => () => {\n if (dlTimer.current) clearTimeout(dlTimer.current);\n }, []);\n\n React.useEffect(() => {\n if (!playing) return;\n const t = setInterval(() => {\n const next = posRef.current + 0.1 * speed;\n const ended = next >= voiceSeconds;\n posRef.current = ended ? 0 : next;\n setPos(posRef.current);\n if (ended) setPlaying(false);\n }, 100);\n return () => clearInterval(t);\n }, [playing, speed, voiceSeconds]);\n\n function download() {\n if (dl !== \"idle\") return;\n setDl(\"loading\");\n onDownload?.();\n dlTimer.current = setTimeout(() => setDl(\"done\"), downloadMs);\n }\n\n function seekFromPointer(e: React.PointerEvent) {\n const r = e.currentTarget.getBoundingClientRect();\n seek(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * voiceSeconds);\n }\n\n const played = pos / voiceSeconds;\n\n return (\n
\n

{note}

\n\n
\n \n \n PDF\n \n
\n

{file.name}

\n

\n {file.size}\n {file.pages ? ` · ${file.pages} pages` : \"\"}\n {dl === \"done\" && · Saved}\n

\n
\n \n {dl === \"loading\" && (\n \n \n \n )}\n \n \n {dl === \"done\" ? : }\n \n \n \n
\n\n {sender} · 4:12\n\n
\n setPlaying((p) => !p)}\n whileTap={reduce ? undefined : { scale: 0.9 }}\n className=\"grid size-9 shrink-0 place-items-center rounded-full bg-bg text-ink outline-none focus-visible:shadow-[var(--focus-ring)]\"\n >\n \n \n {playing ? : }\n \n \n \n {\n const step = e.key === \"ArrowRight\" ? 5 : e.key === \"ArrowLeft\" ? -5 : 0;\n if (!step) return;\n e.preventDefault();\n seek(Math.max(0, Math.min(voiceSeconds - 0.1, posRef.current + step)));\n }}\n className=\"flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-[2px] rounded-xs outline-none focus-visible:shadow-[var(--focus-ring)]\"\n >\n {BARS.map((h, i) => (\n \n ))}\n
\n {clock(playing || pos > 0 ? pos : voiceSeconds)}\n setSpeed((s) => SPEEDS[(SPEEDS.indexOf(s) + 1) % SPEEDS.length])}\n className=\"h-6 w-10 shrink-0 rounded-full bg-bg/15 font-mono text-[11px] font-semibold text-bg outline-none transition-colors hover:bg-bg/25 focus-visible:shadow-[var(--focus-ring)]\"\n >\n {speed}x\n \n
\n You · 4:15\n \n {dl === \"done\" ? `${file.name} downloaded` : \"\"}\n \n \n );\n}\n"},{"path":"registry/geturui/examples/chat-bubbles/delivery-states.tsx","type":"registry:component","target":"components/examples/chat-bubbles/delivery-states.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { AlertCircle, ArrowUp, Check, CheckCheck, Clock3, RotateCw } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type DeliveryStatus = \"sending\" | \"sent\" | \"delivered\" | \"read\" | \"failed\";\n\nexport interface DeliveryMessage {\n id: string;\n mine: boolean;\n text: string;\n time: string;\n status?: DeliveryStatus;\n}\n\nexport interface DeliveryStatesProps {\n contact?: string;\n messages?: DeliveryMessage[];\n /** Walk new messages through sent, delivered and read. */\n autoRead?: boolean;\n onSend?: (text: string) => void;\n onRetry?: (id: string) => void;\n className?: string;\n}\n\nconst DEFAULT_MESSAGES: DeliveryMessage[] = [\n { id: \"d1\", mine: false, text: \"Are the new invoice templates ready for review?\", time: \"9:30\" },\n { id: \"d2\", mine: true, text: \"Yes, both versions are in the shared folder.\", time: \"9:31\", status: \"read\" },\n { id: \"d3\", mine: true, text: \"The second one has the tax breakdown you asked for.\", time: \"9:32\", status: \"delivered\" },\n { id: \"d4\", mine: true, text: \"Sending the PDF export now.\", time: \"9:33\", status: \"failed\" },\n];\n\nconst LABEL: Record = { sending: \"Sending\", sent: \"Sent\", delivered: \"Delivered\", read: \"Read\", failed: \"Not delivered\" };\nconst STEPS: [DeliveryStatus, number][] = [[\"sent\", 700], [\"delivered\", 1500], [\"read\", 2800]];\n\nfunction StatusIcon({ status }: { status: DeliveryStatus }) {\n const cls = \"size-3.5\";\n if (status === \"sending\") return ;\n if (status === \"sent\") return ;\n if (status === \"failed\") return ;\n return ;\n}\n\n/** Direct-message thread where each sent message animates through sending, sent, delivered and read, with a failed state you can retry. */\nexport function DeliveryStates({ contact = \"Theo Lind\", messages = DEFAULT_MESSAGES, autoRead = true, onSend, onRetry, className }: DeliveryStatesProps) {\n const reduce = useReducedMotion() ?? false;\n const [list, setList] = React.useState(messages);\n const [draft, setDraft] = React.useState(\"\");\n const timers = React.useRef[]>([]);\n const seq = React.useRef(0);\n const inputId = React.useId();\n\n React.useEffect(() => {\n const pending = timers.current;\n return () => pending.forEach(clearTimeout);\n }, []);\n\n function setStatus(id: string, status: DeliveryStatus) {\n setList((l) => l.map((m) => (m.id === id ? { ...m, status } : m)));\n }\n\n function walk(id: string, fail = false) {\n setStatus(id, \"sending\");\n if (fail) return;\n STEPS.filter(([s]) => autoRead || s !== \"read\").forEach(([s, ms]) => timers.current.push(setTimeout(() => setStatus(id, s), ms)));\n }\n\n function send(e: React.FormEvent) {\n e.preventDefault();\n const text = draft.trim();\n if (!text) return;\n seq.current += 1;\n const id = `new-${seq.current}`;\n setList((l) => [...l, { id, mine: true, text, time: \"Now\", status: \"sending\" }]);\n setDraft(\"\");\n onSend?.(text);\n walk(id);\n }\n\n const lastRead = list.reduce((acc, m, i) => (m.mine && m.status === \"read\" ? i : acc), -1);\n const lastMine = list.reduce((acc, m, i) => (m.mine ? i : acc), -1);\n\n return (\n
\n
\n \n {contact.split(\" \").map((p) => p[0]).join(\"\")}\n \n

{contact}

\n
\n\n
    \n \n {list.map((m, i) => {\n const status = m.status;\n return (\n \n \n {m.text}\n

    \n {m.mine && status && (\n
    \n {m.time}\n \n \n \n {status === \"failed\" || i === lastRead || i === lastMine ? LABEL[status] : {LABEL[status]}}\n \n \n {status === \"failed\" && (\n {\n onRetry?.(m.id);\n walk(m.id);\n }}\n className=\"inline-flex items-center gap-1 rounded-full px-1.5 font-medium text-ink outline-none underline-offset-2 hover:underline focus-visible:shadow-[var(--focus-ring)]\"\n >\n \n Retry\n \n )}\n
    \n )}\n \n );\n })}\n     \n
\n\n
\n \n setDraft(e.target.value)}\n placeholder=\"Write a message\"\n autoComplete=\"off\"\n className=\"h-10 min-w-0 flex-1 rounded-full border border-border-strong bg-surface px-4 text-[13.5px] text-ink outline-none placeholder:text-ink-subtle focus-visible:shadow-[var(--focus-ring)]\"\n />\n \n \n \n \n
\n );\n}\n"},{"path":"LICENSE-geturui.md","type":"registry:file","target":"LICENSE-geturui.md","content":"MIT License\n\nCopyright (c) 2026 geturui.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"}],"categories":["examples","chat","message","bubble","support","typing indicator","reactions","voice note","attachment","read receipt"],"meta":{"tier":"free","license":"MIT","docs":"https://geturui.com/docs/chat-bubbles"}}