{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"chat-bubbles-attachments","type":"registry:component","title":"Chat bubbles · Attachments","description":"File message with a ring-progress download and a voice note with a seekable waveform and speed control.","author":"GetUrUI ","dependencies":["motion","lucide-react"],"registryDependencies":[],"files":[{"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":"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#attachments"}}