{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Full ChatGPT-style chat surface — sidebar, transcript and composer — wired to a simulated agent so every AI component is on screen.","devDependencies":[],"files":[{"content":"import type { AIApprovalOption } from \"@/components/smoothui/ai-approval\";\nimport type { AIDiffLine } from \"@/components/smoothui/ai-diff\";\nimport type { AIPromptAttachment } from \"@/components/smoothui/ai-prompt-input\";\nimport type { AIResponseCitation } from \"@/components/smoothui/ai-response\";\nimport type { AISource } from \"@/components/smoothui/ai-sources\";\nimport type { AISuggestion } from \"@/components/smoothui/ai-suggestions\";\nimport type { AITask } from \"@/components/smoothui/ai-task-list\";\n\n/**\n * A transcript turn.\n *\n * Assistant turns are a bag of optional parts rather than a block of markdown,\n * because that is what an agent turn actually is: some thinking, some tool\n * calls, some produced artifact, then prose. Adding a new part means adding one\n * field here and one branch in `chat-thread.tsx` — that is the extension point\n * as more of the AI set lands.\n */\nexport type ChatTurn =\n | {\n /** Files that rode along with the message. */\n attachments?: AIPromptAttachment[];\n from: \"user\";\n id: string;\n text: string;\n timestamp: string;\n }\n | {\n approval?: { options: AIApprovalOption[]; question: string };\n artifact?: { code: string; language: string; title: string };\n citations?: AIResponseCitation[];\n diff?: { lines: AIDiffLine[]; title: string };\n from: \"assistant\";\n id: string;\n reasoning?: string;\n sources?: AISource[];\n suggestions?: AISuggestion[];\n tasks?: { label: string; tasks: AITask[] };\n text?: string;\n timestamp: string;\n tool?: { args: string; name: string; result: string; summary: string };\n };\n\nexport type ChatConversation = {\n /** Sidebar grouping label — real products group by recency, so this does. */\n group: string;\n id: string;\n title: string;\n turns: ChatTurn[];\n};\n\nconst RETIRE_FLAVOUR: ChatTurn[] = [\n {\n attachments: [\n { id: \"a1\", name: \"sales-velocity-2026-q2.csv\", size: 24_600 },\n { id: \"a2\", name: \"flavour-review.pdf\", size: 1_248_000 },\n ],\n from: \"user\",\n id: \"r1\",\n text: \"Compare mint chip to last summer and tell me which flavour to retire before Q4.\",\n timestamp: \"14:31\",\n },\n {\n citations: [\n { id: \"1\", index: 1, title: \"Sales velocity export, 2026 Q2\" },\n { id: \"2\", index: 2, title: \"Flavour performance review\" },\n ],\n from: \"assistant\",\n id: \"r2\",\n reasoning:\n \"Pulled three summers of sales, normalised for the two stores that opened last year, then compared weekend and weekday velocity before ranking the classics.\",\n sources: [\n {\n id: \"s1\",\n snippet: \"Weekly units by flavour and store, 2024–2026.\",\n title: \"Sales velocity export, 2026 Q2\",\n url: \"internal://warehouse/sales-velocity-2026-q2.csv\",\n },\n {\n id: \"s2\",\n snippet: \"Margin per scoop after the dairy contract renewal.\",\n title: \"Flavour performance review\",\n url: \"internal://docs/flavour-performance-review.md\",\n },\n ],\n suggestions: [\n { id: \"g1\", label: \"Draft the retirement announcement\" },\n { id: \"g2\", label: \"What replaces rocky road?\" },\n { id: \"g3\", label: \"Show the margin per scoop\" },\n ],\n text: \"Mint chip is up 12% on last summer, and the whole gain sits on weekends [1]. Rocky road is the one to retire — down 6% year on year, lowest margin per scoop of the classics, and it does not recover in any store [2].\",\n timestamp: \"14:32\",\n tool: {\n args: '{ \"flavours\": [\"mint-chip\", \"rocky-road\"], \"years\": 3 }',\n name: \"query_sales\",\n result: \"412 rows\",\n summary: \"3 summers\",\n },\n },\n];\n\nconst SHIP_PRICE_CHANGE: ChatTurn[] = [\n {\n from: \"user\",\n id: \"p1\",\n text: \"Raise the single scoop to 4.20 everywhere and stage the change.\",\n timestamp: \"11:04\",\n },\n {\n approval: {\n options: [\n { id: \"ship\", label: \"Apply to all 14 stores\" },\n {\n detail: \"Rolls out to the two pilot stores only\",\n id: \"pilot\",\n label: \"Pilot first\",\n },\n { destructive: true, id: \"discard\", label: \"Discard the change\" },\n ],\n question: \"This updates live prices in 14 stores. Apply now?\",\n },\n diff: {\n lines: [\n { content: \" scoops:\", kind: \"context\", number: 12 },\n { content: \"- single: 3.90\", kind: \"removed\", number: 13 },\n { content: \"+ single: 4.20\", kind: \"added\", number: 13 },\n { content: \" double: 6.40\", kind: \"context\", number: 14 },\n { content: \"- kids: 2.60\", kind: \"removed\", number: 15 },\n { content: \"+ kids: 2.80\", kind: \"added\", number: 15 },\n ],\n title: \"config/pricing.yaml\",\n },\n from: \"assistant\",\n id: \"p2\",\n tasks: {\n label: \"Plan\",\n tasks: [\n { id: \"t1\", label: \"Read current price table\", status: \"done\" },\n {\n children: [\n { id: \"t2a\", label: \"Update scoop tiers\", status: \"done\" },\n { id: \"t2b\", label: \"Update kids portion\", status: \"done\" },\n ],\n id: \"t2\",\n label: \"Stage the new prices\",\n note: \"2 files\",\n status: \"done\",\n },\n { id: \"t3\", label: \"Wait for approval\", status: \"running\" },\n {\n id: \"t4\",\n label: \"Publish to stores\",\n note: \"14 stores\",\n status: \"pending\",\n },\n ],\n },\n text: \"Staged. Kids portion moves with it to keep the ratio you set last spring — say the word and I will publish.\",\n timestamp: \"11:05\",\n },\n];\n\nconst SUMMER_CAMPAIGN: ChatTurn[] = [\n {\n from: \"user\",\n id: \"c1\",\n text: \"Give me a summer campaign banner I can drop into the site.\",\n timestamp: \"09:12\",\n },\n {\n artifact: {\n code: `export const SummerBanner = () => (\n
\n

Summer 2026

\n

Two scoops, one price

\n

\n Every weekday before 5pm, all summer.\n

\n
\n);`,\n language: \"tsx\",\n title: \"SummerBanner.tsx\",\n },\n from: \"assistant\",\n id: \"c2\",\n suggestions: [\n { id: \"c-s1\", label: \"Make it dark mode aware\" },\n { id: \"c-s2\", label: \"Add a countdown\" },\n ],\n text: \"Here it is, using the pink and sky pair from your brand tokens rather than new colours.\",\n timestamp: \"09:13\",\n },\n];\n\nexport const CONVERSATIONS: ChatConversation[] = [\n {\n group: \"Today\",\n id: \"retire-flavour\",\n title: \"Which flavour to retire\",\n turns: RETIRE_FLAVOUR,\n },\n {\n group: \"Today\",\n id: \"price-change\",\n title: \"Stage the price change\",\n turns: SHIP_PRICE_CHANGE,\n },\n {\n group: \"Previous 7 days\",\n id: \"summer-campaign\",\n title: \"Summer campaign banner\",\n turns: SUMMER_CAMPAIGN,\n },\n];\n\n/** Follow-ups offered on an empty thread, so the composer is never a blank stare. */\nexport const STARTER_SUGGESTIONS: AISuggestion[] = [\n { id: \"st1\", label: \"Which store is growing fastest?\" },\n { id: \"st2\", label: \"Draft next week's staff rota\" },\n { id: \"st3\", label: \"Summarise last month's reviews\" },\n];\n\n/**\n * The reply the template plays back for anything you type.\n *\n * There is no model behind this. Everything below is a fixed script, which is\n * the honest way to demo a chat surface: the components are the product, the\n * answer is set dressing.\n */\nexport const SIMULATED_REPLY = {\n citations: [\n { id: \"1\", index: 1, title: \"Store operations log, week 30\" },\n ] satisfies AIResponseCitation[],\n reasoning:\n \"Checked the four stores that reported this week, then compared footfall against the same week last year before answering.\",\n sources: [\n {\n id: \"sim-s1\",\n snippet: \"Hourly footfall and till receipts, week 30.\",\n title: \"Store operations log, week 30\",\n url: \"internal://warehouse/ops-log-w30.csv\",\n },\n ] satisfies AISource[],\n suggestions: [\n { id: \"sim-g1\", label: \"Break it down by store\" },\n { id: \"sim-g2\", label: \"Compare with last summer\" },\n ] satisfies AISuggestion[],\n text: \"Weekday afternoons are the soft spot: footfall holds but the average ticket drops about 18% after 3pm [1]. A two-scoop weekday offer is the cheapest lever you have before Q4.\",\n tool: {\n args: '{ \"week\": 30, \"stores\": \"all\" }',\n name: \"query_operations\",\n result: \"96 rows\",\n summary: \"week 30\",\n },\n} as const;\n\n/** Offered by the composer's attach control — a picker stands in for a file dialog. */\nexport const ATTACHABLE_FILES: AIPromptAttachment[] = [\n { id: \"f1\", name: \"ops-log-w30.csv\", size: 18_400 },\n { id: \"f2\", name: \"staff-rota-august.xlsx\", size: 42_900 },\n { id: \"f3\", name: \"supplier-invoice-3312.pdf\", size: 268_000 },\n];\n\nexport const MODELS = [\n { id: \"opus-5\", label: \"Opus 5\", note: \"Best for planning\" },\n { id: \"sonnet-5\", label: \"Sonnet 5\", note: \"Fast, everyday work\" },\n { id: \"haiku-4-5\", label: \"Haiku 4.5\", note: \"Cheapest\" },\n] as const;\n\nexport const CONTEXT_LIMIT = 200_000;\n","path":"chat-data.ts","target":"components/smoothui/chat-template/chat-data.ts","type":"registry:block"},{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SiriOrb from \"@/components/smoothui/siri-orb\";\nimport {\n LogOut,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Plus,\n Search,\n Settings,\n Sun,\n} from \"lucide-react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ChatConversation } from \"./chat-data\";\n\n/** A real photograph, so the footer is a person and not a lettered circle. */\nconst USER_AVATAR =\n \"https://ik.imagekit.io/16u211libb/avatar-educalvolpz.jpeg?tr=w-64,h-64\";\n\nexport type ChatSidebarProps = {\n activeId: string;\n className?: string;\n /** Icon rail instead of the full pane. Keeps navigation reachable. */\n collapsed?: boolean;\n conversations: ChatConversation[];\n onNewChat: () => void;\n onSelect: (id: string) => void;\n onToggleCollapsed?: () => void;\n};\n\nexport const ChatSidebar = ({\n activeId,\n className,\n collapsed = false,\n conversations,\n onNewChat,\n onSelect,\n onToggleCollapsed,\n}: ChatSidebarProps) => {\n const [query, setQuery] = useState(\"\");\n const searchRef = useRef(null);\n\n // The search filters for real. A search box that does nothing is the kind of\n // fake content this template exists to avoid.\n const groups = useMemo(() => {\n const needle = query.trim().toLowerCase();\n const matching = needle\n ? conversations.filter((conversation) =>\n conversation.title.toLowerCase().includes(needle)\n )\n : conversations;\n\n const byGroup = new Map();\n for (const conversation of matching) {\n const bucket = byGroup.get(conversation.group) ?? [];\n bucket.push(conversation);\n byGroup.set(conversation.group, bucket);\n }\n return [...byGroup.entries()];\n }, [conversations, query]);\n\n if (collapsed) {\n return (\n \n \n }\n label=\"Expand sidebar\"\n onClick={onToggleCollapsed}\n />\n }\n label=\"New chat\"\n onClick={onNewChat}\n />\n }\n label=\"Search chats\"\n onClick={() => {\n onToggleCollapsed?.();\n // Expanding and focusing in one action, so the icon is a shortcut\n // rather than a two-step detour.\n requestAnimationFrame(() => searchRef.current?.focus());\n }}\n />\n
\n \n
\n \n );\n }\n\n return (\n \n
\n \n \n Scoop Assistant\n \n \n \n \n
\n\n \n \n New chat\n \n\n {/* Icon and field share one flex row rather than absolute-positioning the\n icon over padding: the gap is then a single value instead of two that\n have to be kept in sync, and `type=\"search\"` cannot push the text away\n with its own intrinsic padding. */}\n \n\n \n\n
\n \n
\n \n );\n};\n\nconst RailButton = ({\n icon,\n label,\n onClick,\n}: {\n icon: React.ReactNode;\n label: string;\n onClick?: () => void;\n}) => (\n \n {icon}\n \n);\n\n/**\n * The account menu, with the theme switch inside it.\n *\n * It flips the `dark` class on the document root rather than shipping a theme\n * provider: that is the one contract every Tailwind setup already has, so the\n * control works the moment the template is installed instead of after wiring.\n */\nconst AccountMenu = ({ align }: { align: \"pane\" | \"rail\" }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isDark, setIsDark] = useState(false);\n const containerRef = useRef(null);\n\n useEffect(() => {\n setIsDark(document.documentElement.classList.contains(\"dark\"));\n }, []);\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n const onPointerDown = (event: PointerEvent) => {\n if (!containerRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n }\n };\n\n document.addEventListener(\"pointerdown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"pointerdown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n const toggleTheme = () => {\n const next = !document.documentElement.classList.contains(\"dark\");\n document.documentElement.classList.toggle(\"dark\", next);\n setIsDark(next);\n };\n\n return (\n
\n setIsOpen((open) => !open)}\n type=\"button\"\n >\n \n {align === \"pane\" && (\n \n Edu Calvo\n \n Pro plan\n \n \n )}\n \n\n {isOpen ? (\n \n \n ) : (\n \n )\n }\n label={isDark ? \"Light mode\" : \"Dark mode\"}\n onClick={toggleTheme}\n />\n }\n label=\"Settings\"\n />\n }\n label=\"Sign out\"\n />\n
\n ) : null}\n \n );\n};\n\nconst MenuItem = ({\n icon,\n label,\n onClick,\n}: {\n icon: React.ReactNode;\n label: string;\n onClick?: () => void;\n}) => (\n \n {icon}\n {label}\n \n);\n\nexport default ChatSidebar;\n","path":"chat-sidebar.tsx","target":"components/smoothui/chat-template/chat-sidebar.tsx","type":"registry:block"},{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport AIApproval from \"@/components/smoothui/ai-approval\";\nimport AIArtifact from \"@/components/smoothui/ai-artifact\";\nimport AIContextMeter from \"@/components/smoothui/ai-context-meter\";\nimport AIConversation from \"@/components/smoothui/ai-conversation\";\nimport type { AIState } from \"@/components/smoothui/ai-core\";\nimport AIDiff from \"@/components/smoothui/ai-diff\";\nimport AILoader from \"@/components/smoothui/ai-loader\";\nimport AIMessage from \"@/components/smoothui/ai-message\";\nimport AIPromptInput, {\n type AIPromptAttachment,\n} from \"@/components/smoothui/ai-prompt-input\";\nimport AIReasoning from \"@/components/smoothui/ai-reasoning\";\nimport AIResponse from \"@/components/smoothui/ai-response\";\nimport AISources from \"@/components/smoothui/ai-sources\";\nimport AISuggestions from \"@/components/smoothui/ai-suggestions\";\nimport AITaskList from \"@/components/smoothui/ai-task-list\";\nimport AIToolCall from \"@/components/smoothui/ai-tool-call\";\nimport SiriOrb from \"@/components/smoothui/siri-orb\";\nimport { ChevronDown, PanelLeftOpen, Paperclip } from \"lucide-react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n ATTACHABLE_FILES,\n type ChatTurn,\n CONTEXT_LIMIT,\n MODELS,\n SIMULATED_REPLY,\n STARTER_SUGGESTIONS,\n} from \"./chat-data\";\n\nconst THINK_MS = 900;\nconst TOOL_MS = 1900;\nconst STREAM_INTERVAL_MS = 45;\n/** Rough English ratio, good enough for a meter that is showing pressure. */\nconst CHARS_PER_TOKEN = 4;\nconst SYSTEM_TOKENS = 1800;\nconst TOKENS_PER_SOURCE = 9200;\nconst TOKENS_PER_ATTACHMENT = 6400;\n\ntype LivePhase = \"idle\" | \"thinking\" | \"tool\" | \"streaming\";\n\nconst formatClock = (date: Date) =>\n `${String(date.getHours()).padStart(2, \"0\")}:${String(date.getMinutes()).padStart(2, \"0\")}`;\n\nexport type ChatThreadProps = {\n className?: string;\n /** Opens the conversation list on narrow screens, where it has no column. */\n onOpenSidebar?: () => void;\n title: string;\n turns: ChatTurn[];\n};\n\nexport const ChatThread = ({\n className,\n onOpenSidebar,\n title,\n turns,\n}: ChatThreadProps) => {\n const [localTurns, setLocalTurns] = useState([]);\n const [phase, setPhase] = useState(\"idle\");\n const [streamed, setStreamed] = useState(\"\");\n const [draftAttachments, setDraftAttachments] = useState<\n AIPromptAttachment[]\n >([]);\n const [model, setModel] = useState(MODELS[0].label);\n const timers = useRef[]>([]);\n\n const clearTimers = useCallback(() => {\n for (const timer of timers.current) {\n clearTimeout(timer);\n }\n timers.current = [];\n }, []);\n\n useEffect(() => clearTimers, [clearTimers]);\n\n useEffect(() => {\n if (phase !== \"streaming\") {\n return;\n }\n const words = SIMULATED_REPLY.text.split(\" \");\n let index = 0;\n const interval = setInterval(() => {\n index += 1;\n setStreamed(words.slice(0, index).join(\" \"));\n if (index >= words.length) {\n clearInterval(interval);\n setPhase(\"idle\");\n setLocalTurns((current) => [\n ...current,\n {\n citations: [...SIMULATED_REPLY.citations],\n from: \"assistant\",\n id: `live-a-${current.length}`,\n reasoning: SIMULATED_REPLY.reasoning,\n sources: [...SIMULATED_REPLY.sources],\n suggestions: [...SIMULATED_REPLY.suggestions],\n text: SIMULATED_REPLY.text,\n timestamp: formatClock(new Date()),\n tool: { ...SIMULATED_REPLY.tool },\n },\n ]);\n setStreamed(\"\");\n }\n }, STREAM_INTERVAL_MS);\n return () => clearInterval(interval);\n }, [phase]);\n\n const send = (value: string) => {\n const draft = value.trim();\n if (!draft || phase !== \"idle\") {\n return;\n }\n\n clearTimers();\n const attachments = draftAttachments;\n setDraftAttachments([]);\n setLocalTurns((current) => [\n ...current,\n {\n attachments: attachments.length > 0 ? attachments : undefined,\n from: \"user\",\n id: `live-u-${current.length}`,\n text: draft,\n timestamp: formatClock(new Date()),\n },\n ]);\n setPhase(\"thinking\");\n // Stand-ins for a request's stages. No model runs here.\n timers.current.push(setTimeout(() => setPhase(\"tool\"), THINK_MS));\n timers.current.push(setTimeout(() => setPhase(\"streaming\"), TOOL_MS));\n };\n\n const stop = () => {\n clearTimers();\n setPhase(\"idle\");\n setStreamed(\"\");\n };\n\n // Memoised because the token breakdown below depends on it; a fresh array each\n // render would make that memo pointless.\n const allTurns = useMemo(\n () => [...turns, ...localTurns],\n [turns, localTurns]\n );\n const isBusy = phase !== \"idle\";\n const state: AIState = phase === \"streaming\" ? \"streaming\" : \"thinking\";\n // Derived from what is actually on screen, so an empty chat reads as empty\n // instead of inheriting a fixture's 67k. A fixed number here was a lie the\n // moment you pressed \"New chat\".\n const breakdown = useMemo(() => {\n // Everything the model would actually have been sent, not just the prose:\n // a reasoning trace and an artifact's source are the bulk of a real turn.\n const transcript =\n allTurns.reduce((total, turn) => {\n if (turn.from === \"user\") {\n return total + turn.text.length;\n }\n return (\n total +\n (turn.text?.length ?? 0) +\n (turn.reasoning?.length ?? 0) +\n (turn.artifact?.code.length ?? 0) +\n (turn.tool ? turn.tool.args.length + turn.tool.result.length : 0) +\n (turn.diff?.lines.reduce(\n (chars, line) => chars + line.content.length,\n 0\n ) ?? 0)\n );\n }, 0) / CHARS_PER_TOKEN;\n const retrieved = allTurns.reduce(\n (total, turn) =>\n total +\n (turn.from === \"assistant\" && turn.sources\n ? turn.sources.length * TOKENS_PER_SOURCE\n : 0) +\n (turn.from === \"user\" && turn.attachments\n ? turn.attachments.length * TOKENS_PER_ATTACHMENT\n : 0),\n 0\n );\n\n return [\n { label: \"System\", tokens: SYSTEM_TOKENS },\n {\n label: \"Transcript\",\n tokens: Math.round(transcript + streamed.length / CHARS_PER_TOKEN),\n },\n ...(retrieved > 0\n ? [{ label: \"Retrieved files\", tokens: retrieved }]\n : []),\n ];\n }, [allTurns, streamed]);\n\n const used = breakdown.reduce((total, item) => total + item.tokens, 0);\n\n return (\n
\n
\n {/* The only way into the conversation list on a phone, where the sidebar\n has no column of its own. */}\n {onOpenSidebar ? (\n \n \n \n ) : null}\n

{title}

\n \n
\n\n \n {/* `px-2`, not decoration: the scroller clips at its padding box, and the\n orb avatar sat flush against that edge — its glow extends past its\n own 26px box, so the left of it was being shaved off. */}\n
\n {allTurns.length === 0 && (\n
\n \n

\n Ask about sales, stores or staffing.\n

\n send(suggestion.label)}\n suggestions={STARTER_SUGGESTIONS}\n />\n
\n )}\n\n {allTurns.map((turn) => (\n \n ))}\n\n {isBusy && (\n }\n bubble={false}\n from=\"assistant\"\n >\n
\n \n {SIMULATED_REPLY.reasoning}\n \n\n {phase !== \"thinking\" && (\n {SIMULATED_REPLY.tool.args}}\n name={SIMULATED_REPLY.tool.name}\n result={{SIMULATED_REPLY.tool.result}}\n status={phase === \"tool\" ? \"running\" : \"success\"}\n summary={SIMULATED_REPLY.tool.summary}\n />\n )}\n\n {phase === \"streaming\" ? (\n \n ) : (\n \n )}\n
\n \n )}\n
\n \n\n
\n
\n {\n // Stands in for a file dialog: adds the next unattached file, so\n // the control does something real instead of miming it.\n setDraftAttachments((current) => {\n const next = ATTACHABLE_FILES.find(\n (file) => !current.some((item) => item.id === file.id)\n );\n return next ? [...current, next] : current;\n });\n }}\n onRemoveAttachment={(id) =>\n setDraftAttachments((current) =>\n current.filter((file) => file.id !== id)\n )\n }\n onStop={stop}\n onSubmit={send}\n placeholder=\"Ask anything about the shop…\"\n state={isBusy ? \"streaming\" : \"idle\"}\n >\n \n \n

\n Simulated responses. Nothing is sent anywhere.\n

\n
\n
\n
\n );\n};\n\n/**\n * One transcript turn.\n *\n * Every assistant part is optional and rendered in the order an agent produces\n * it: thinking, tools, plan, changes, artifact, prose, then what it read. New AI\n * components slot in as one more branch here.\n */\nconst ChatTurnView = ({\n onSuggestion,\n turn,\n}: {\n onSuggestion: (value: string) => void;\n turn: ChatTurn;\n}) => {\n if (turn.from === \"user\") {\n return (\n \n \n {turn.text}\n {turn.attachments && turn.attachments.length > 0 && (\n \n {turn.attachments.map((file) => (\n \n \n {file.name}\n {formatBytes(file.size)}\n \n ))}\n \n )}\n \n \n );\n }\n\n return (\n
\n }\n bubble={false}\n copyText={turn.text}\n from=\"assistant\"\n onRetry={() => {\n // A replayed transcript has nothing to retry against.\n }}\n onVote={() => {\n // Demo only — no telemetry leaves the page.\n }}\n timestamp={turn.timestamp}\n >\n
\n {turn.reasoning ? (\n \n {turn.reasoning}\n \n ) : null}\n\n {turn.tool ? (\n {turn.tool.args}}\n name={turn.tool.name}\n result={{turn.tool.result}}\n status=\"success\"\n summary={turn.tool.summary}\n />\n ) : null}\n\n {turn.tasks ? (\n \n ) : null}\n\n {turn.diff ? (\n \n ) : null}\n\n {turn.artifact ? (\n {turn.artifact.code}\n }\n copyText={turn.artifact.code}\n preview={}\n title={turn.artifact.title}\n />\n ) : null}\n\n {turn.text ? (\n \n ) : null}\n\n {turn.sources ? : null}\n
\n \n\n {turn.approval ? (\n {\n // Demo only.\n }}\n options={turn.approval.options}\n question={turn.approval.question}\n />\n ) : null}\n\n {turn.suggestions ? (\n onSuggestion(suggestion.label)}\n suggestions={turn.suggestions}\n />\n ) : null}\n
\n );\n};\n\nconst KIB = 1024;\nconst MIB = KIB * KIB;\n\nconst formatBytes = (size?: number) => {\n if (!size) {\n return \"\";\n }\n return size >= MIB\n ? `${(size / MIB).toFixed(1)} MB`\n : `${Math.round(size / KIB)} KB`;\n};\n\n/**\n * Model picker for the composer.\n *\n * Small enough to keep local: the template should not drag a popover library in\n * for one menu, and the pattern is the same one the sidebar's account menu uses.\n */\nconst ModelPicker = ({\n onSelect,\n value,\n}: {\n onSelect: (label: string) => void;\n value: string;\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const containerRef = useRef(null);\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n const onPointerDown = (event: PointerEvent) => {\n if (!containerRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"pointerdown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"pointerdown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n
\n setIsOpen((open) => !open)}\n type=\"button\"\n >\n {value}\n \n \n\n {isOpen ? (\n \n {MODELS.map((option) => (\n {\n onSelect(option.label);\n setIsOpen(false);\n }}\n role=\"menuitem\"\n type=\"button\"\n >\n {option.label}\n \n {option.note}\n \n \n ))}\n
\n ) : null}\n \n );\n};\n\n/** The artifact's rendered pane — the real banner, not a grey box. */\nconst SummerBannerPreview = () => (\n
\n

Summer 2026

\n

Two scoops, one price

\n

\n Every weekday before 5pm, all summer.\n

\n
\n);\n\nexport default ChatThread;\n","path":"chat-thread.tsx","target":"components/smoothui/chat-template/chat-thread.tsx","type":"registry:block"},{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\nimport { type ChatConversation, CONVERSATIONS } from \"./chat-data\";\nimport ChatSidebar from \"./chat-sidebar\";\nimport ChatThread from \"./chat-thread\";\n\nconst NEW_CHAT_ID = \"__new__\";\n\n/** No overshoot: a drawer that bounces past its edge reads as a bug. */\nconst DRAWER_SPRING = { bounce: 0, duration: 0.3, type: \"spring\" as const };\nconst SCRIM_FADE = { duration: 0.2 };\n\nexport type ChatTemplateProps = {\n className?: string;\n /** Which conversation opens first. Defaults to the newest one. */\n defaultConversationId?: string;\n /** Swap in your own transcripts. The shape is `ChatConversation`. */\n conversations?: ChatConversation[];\n};\n\n/**\n * A full chat surface — sidebar, thread, composer — wired to a fixed script.\n *\n * There is no model behind it and no network call anywhere: every reply is\n * scripted in `chat-data.ts`. Point the composer at your own endpoint and the\n * rest of the template is already the product.\n */\nconst ChatTemplate = ({\n className,\n conversations = CONVERSATIONS,\n defaultConversationId,\n}: ChatTemplateProps) => {\n const [activeId, setActiveId] = useState(\n defaultConversationId ?? conversations[0]?.id ?? NEW_CHAT_ID\n );\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n // Narrow screens have no column for the list, so it arrives as a drawer.\n const [isDrawerOpen, setIsDrawerOpen] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const open = (id: string) => {\n setActiveId(id);\n setIsDrawerOpen(false);\n };\n\n const active = conversations.find(\n (conversation) => conversation.id === activeId\n );\n\n return (\n \n {/* Collapses to an icon rail rather than disappearing, so navigation stays\n one click away. */}\n open(NEW_CHAT_ID)}\n onSelect={open}\n onToggleCollapsed={() => setIsSidebarOpen((isOpen) => !isOpen)}\n />\n\n {/* Below `md` the same list slides over the thread. Without it there is no\n way to change conversation on a phone, which is most of what a chat\n app's navigation is for.\n\n Both children are keyed: `AnimatePresence` tracks its direct children by\n key, and without one it never runs the enter or the exit — the panel\n just sat parked off-screen. */}\n \n {isDrawerOpen ? (\n <>\n setIsDrawerOpen(false)}\n transition={shouldReduceMotion ? { duration: 0 } : SCRIM_FADE}\n type=\"button\"\n />\n {/* Reduced motion keeps the fade and drops the travel, rather than\n removing the transition altogether. */}\n \n open(NEW_CHAT_ID)}\n onSelect={open}\n onToggleCollapsed={() => setIsDrawerOpen(false)}\n />\n \n \n ) : null}\n \n\n setIsDrawerOpen(true)}\n title={active?.title ?? \"New chat\"}\n turns={active?.turns ?? []}\n />\n \n );\n};\n\nexport default ChatTemplate;\nexport type { ChatConversation, ChatTurn } from \"./chat-data\";\n","path":"index.tsx","target":"components/smoothui/chat-template/index.tsx","type":"registry:block"}],"name":"chat-template","registryDependencies":["https://smoothui.dev/r/ai-approval.json","https://smoothui.dev/r/ai-artifact.json","https://smoothui.dev/r/ai-context-meter.json","https://smoothui.dev/r/ai-conversation.json","https://smoothui.dev/r/ai-core.json","https://smoothui.dev/r/ai-diff.json","https://smoothui.dev/r/ai-loader.json","https://smoothui.dev/r/ai-message.json","https://smoothui.dev/r/ai-prompt-input.json","https://smoothui.dev/r/ai-reasoning.json","https://smoothui.dev/r/ai-response.json","https://smoothui.dev/r/ai-sources.json","https://smoothui.dev/r/ai-suggestions.json","https://smoothui.dev/r/ai-task-list.json","https://smoothui.dev/r/ai-tool-call.json","https://smoothui.dev/r/siri-orb.json"],"title":"Chat Template","type":"registry:block"}