{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-message-4","type":"registry:block","title":"Reply actions in the footer","description":"Copy, regenerate and rating controls under an unframed assistant reply.","dependencies":[],"registryDependencies":["bubble","button","message"],"files":[{"path":"c-message-4.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport { Bubble, BubbleContent } from \"@/components/ui/bubble\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Message,\n MessageContent,\n MessageFooter,\n} from \"@/components/ui/message\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n/*\n * Two drafts, because Regenerate has to return a visibly different answer to\n * teach anything. One draft and a spinner reads as a button that is broken.\n */\nconst DRAFTS = [\n [\n \"4.2 moves invoicing onto the new tax service, so EU orders now carry a VAT line on the PDF, the hosted receipt and the CSV export.\",\n \"Two smaller changes ride along: the billing portal keeps the filters you left it on, and a failed payment retries twice before it is marked overdue.\",\n ],\n [\n \"The headline in 4.2 is EU VAT. It is calculated per order rather than per account, and it shows up everywhere an amount does.\",\n \"We also cleared a long-standing annoyance in the billing portal: filters survive a reload, and overdue is only set after two failed retries.\",\n ],\n]\n\n/*\n * A rating belongs to the answer that earned it, so regenerating clears it.\n * A thumb left lit reads as feedback on a draft nobody rated.\n */\nexport function Pattern() {\n const [draftIndex, setDraftIndex] = useState(0)\n const [vote, setVote] = useState<\"up\" | \"down\" | null>(null)\n const [copied, setCopied] = useState(false)\n\n const draft = DRAFTS[draftIndex]\n\n /*\n * What goes to the clipboard is derived from draft during render, so this\n * timed label is the only thing the effect has to unwind.\n */\n useEffect(() => {\n if (!copied) return\n const id = window.setTimeout(() => setCopied(false), 1600)\n return () => window.clearTimeout(id)\n }, [copied])\n\n return (\n
\n \n \n \n \n Summarise what changed in 4.2 for the customer note.\n \n \n \n \n\n \n \n {/*\n A ghost variant anywhere in the row drops the padding the footer\n would otherwise inherit, which sits the toolbar flush with the\n prose. aria-live carries a swapped draft to a screen reader.\n */}\n \n \n
\n {draft.map((paragraph) => (\n

{paragraph}

\n ))}\n
\n \n \n \n 09:41\n {/*\n Copy is a one-shot, so it carries no aria-pressed. A pressed\n rating swaps variant, because no style tunes a colour override.\n */}\n {\n /*\n * Optional-chained twice: a page served over plain http has no\n * navigator.clipboard at all. The label flips either way.\n */\n void navigator.clipboard?.writeText?.(draft.join(\"\\n\\n\"))\n setCopied(true)\n }}\n >\n {copied ? (\n \n ) : (\n \n )}\n \n {\n setDraftIndex((index) => (index + 1) % DRAFTS.length)\n setVote(null)\n }}\n >\n \n \n setVote(vote === \"up\" ? null : \"up\")}\n >\n \n \n setVote(vote === \"down\" ? null : \"down\")}\n >\n \n \n \n \n \n
\n )\n}","target":"components/examples/c-message-4.tsx"}],"meta":{"order":4,"gridSize":2}}