{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-thinking", "title": "RetroThinking", "description": "Mac OS 9 AI thinking states: the watch cursor and a barber pole while a reply is pending, and a collapsible reasoning panel.", "registryDependencies": [ "https://nostalgia-ui.com/r/nostalgia-theme.json", "https://nostalgia-ui.com/r/retro-ai.json", "https://nostalgia-ui.com/r/retro-collapsible.json", "https://nostalgia-ui.com/r/retro-progress.json", "https://nostalgia-ui.com/r/retro-streaming-text.json" ], "files": [ { "path": "registry/new-york/ui/retro-thinking.tsx", "content": "\"use client\"\n\n/*\n * RetroThinking / RetroReasoning: what an assistant shows before and while\n * it thinks.\n *\n * Crafted moments:\n * - The watch. OS 9's busy cursor was a wristwatch whose hands went round;\n * here it is a 16px pixel watch whose minute hand sweeps (classic flair\n * ticks it in eight hard steps, as the cursor did). Beside it a short\n * barber pole, and after three seconds a quiet count of the seconds, so a\n * long wait reads as work rather than a hang.\n * - The reasoning disclosure opens on its own while the model thinks and\n * closes itself when the answer starts, settling into \"Thought for 4\n * seconds\". Open or close it yourself and it leaves your choice alone.\n * Two-frame triangle and height morph from retro-collapsible.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { RetroReasoningPart } from \"@/registry/new-york/lib/retro-ai\"\nimport {\n RetroCollapsible,\n RetroCollapsibleContent,\n RetroCollapsibleTrigger,\n} from \"@/registry/new-york/ui/retro-collapsible\"\nimport { RetroProgress } from \"@/registry/new-york/ui/retro-progress\"\nimport { RetroStreamingText } from \"@/registry/new-york/ui/retro-streaming-text\"\n\n/* ── the watch ─────────────────────────────────────────── */\n\nconst WATCH_CSS = `\n@keyframes os9-watch-turn { to { transform: rotate(360deg); } }\n.os9-watch-hand { transform-box: view-box; }\n.os9-watch[data-running] .os9-watch-minute { animation: os9-watch-turn 1.6s linear infinite; }\n.os9-watch[data-running] .os9-watch-hour { animation: os9-watch-turn 19.2s linear infinite; }\n[data-flair=\"classic\"] .os9-watch[data-running] .os9-watch-minute,\n[data-flair=\"classic\"] .os9-watch[data-running] .os9-watch-hour { animation-timing-function: steps(8, end); }\n@media (prefers-reduced-motion: reduce) {\n .os9-watch[data-running] .os9-watch-hand { animation: none; }\n}\n`\n\nconst INK = \"var(--os9-black)\"\nconst STRAP = \"var(--os9-gray-500)\"\nconst TICK = \"var(--os9-gray-600)\"\n\n/* drawn on each pixel grid rather than scaled, so no pixel goes soft */\nfunction Watch16() {\n const origin = { transformOrigin: \"7.5px 7.5px\" }\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction Watch12() {\n const origin = { transformOrigin: \"5.5px 5.5px\" }\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n )\n}\n\ninterface RetroWatchIconProps extends React.SVGAttributes {\n /** Pixel size: 16 (default) or 12. */\n size?: 12 | 16\n /** Turn the hands. Default true. */\n running?: boolean\n}\n\n/**\n * The OS 9 wristwatch busy cursor as a 16px pixel icon. Use it anywhere\n * something is working: a pending reply, a running tool call.\n */\nfunction RetroWatchIcon({ size = 16, running = true, className, ...props }: RetroWatchIconProps) {\n return (\n <>\n \n \n {size === 16 ? : }\n \n \n )\n}\n\n/* ── elapsed seconds ───────────────────────────────────── */\n\n/** Whole seconds since `running` turned on; holds its value once it stops. */\nfunction useElapsedSeconds(running: boolean, since?: number) {\n const [seconds, setSeconds] = React.useState(0)\n React.useEffect(() => {\n if (!running) return\n const start = since ?? Date.now()\n const update = () => setSeconds(Math.max(0, Math.round((Date.now() - start) / 1000)))\n const timer = window.setInterval(update, 250)\n return () => {\n window.clearInterval(timer)\n update()\n }\n }, [running, since])\n return seconds\n}\n\nfunction secondsLabel(n: number) {\n return n === 1 ? \"1 second\" : `${n} seconds`\n}\n\n/* ── thinking (pending) ────────────────────────────────── */\n\ninterface RetroThinkingProps extends Omit, \"children\"> {\n /** Default \"Thinking…\". */\n label?: React.ReactNode\n /** When the request started (ms since epoch). Defaults to when this mounted. */\n since?: number\n /** Count the seconds after three have passed. Default true. */\n showElapsed?: boolean\n}\n\n/**\n * The pending state between Send and the first token. Its watch sits in the\n * same 16px column as RetroMessage's assistant icon, so it lines up in a\n * thread on its own.\n */\nfunction RetroThinking({\n label = \"Thinking…\",\n since,\n showElapsed = true,\n className,\n ...props\n}: RetroThinkingProps) {\n const seconds = useElapsedSeconds(true, since)\n return (\n \n \n {label}\n \n \n \n {showElapsed && seconds >= 3 ? (\n {seconds} sec\n ) : null}\n \n )\n}\n\n/* ── reasoning (disclosure) ────────────────────────────── */\n\ninterface RetroReasoningProps\n extends Omit<\n React.ComponentProps,\n \"children\" | \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"part\"\n > {\n /** A reasoning part from a message; supplies `text` and `streaming`. */\n part?: RetroReasoningPart\n /** The reasoning text. Overrides `part.text`. */\n text?: string\n /** The model is still thinking. Defaults to `part.state === \"streaming\"`. */\n streaming?: boolean\n /** How long it thought, in seconds. Measured while streaming if left out. */\n duration?: number\n /** Controlled open state. Left out, it opens while streaming and closes after. */\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n /** Custom content instead of the text. */\n children?: React.ReactNode\n}\n\nfunction RetroReasoning({\n part,\n text: textProp,\n streaming: streamingProp,\n duration,\n open: openProp,\n defaultOpen,\n onOpenChange,\n children,\n className,\n ...props\n}: RetroReasoningProps) {\n const text = textProp ?? part?.text ?? \"\"\n const streaming = streamingProp ?? part?.state === \"streaming\"\n const measured = useElapsedSeconds(streaming)\n const [everStreamed, setEverStreamed] = React.useState(streaming)\n if (streaming && !everStreamed) setEverStreamed(true)\n\n /* null: follow the stream; a boolean: the reader chose */\n const [chosen, setChosen] = React.useState(defaultOpen ?? null)\n const open = openProp ?? chosen ?? streaming\n\n const seconds = duration ?? (everStreamed ? Math.max(1, measured) : undefined)\n const label = streaming\n ? \"Thinking…\"\n : seconds !== undefined\n ? `Thought for ${secondsLabel(Math.round(seconds))}`\n : \"Thought for a moment\"\n\n return (\n {\n setChosen(next)\n onOpenChange?.(next)\n }}\n className={cn(\"flex flex-col\", className)}\n {...props}\n >\n \n {streaming ? : null}\n {label}\n \n \n
\n {children ?? }\n
\n \n \n )\n}\n\nexport { RetroThinking, RetroReasoning, RetroWatchIcon }\nexport type { RetroThinkingProps, RetroReasoningProps, RetroWatchIconProps }\n", "type": "registry:ui" } ], "type": "registry:ui" }