{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-message", "title": "RetroMessage", "description": "Mac OS 9 chat transcript parts: a scrolling message thread, user and assistant messages built from AI SDK-style parts, and copy/retry actions.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.1", "@ui-sdk/react@0.1.0-beta.1" ], "registryDependencies": [ "https://nostalgia-ui.com/r/nostalgia-theme.json", "https://nostalgia-ui.com/r/retro-ai.json", "https://nostalgia-ui.com/r/retro-bevel-button.json", "https://nostalgia-ui.com/r/retro-icons.json", "https://nostalgia-ui.com/r/retro-motion.json", "https://nostalgia-ui.com/r/retro-scrollbar.json", "https://nostalgia-ui.com/r/retro-streaming-text.json", "https://nostalgia-ui.com/r/retro-thinking.json" ], "files": [ { "path": "registry/new-york/ui/retro-message.tsx", "content": "\"use client\"\n\n/*\n * RetroMessage: the transcript side of a Mac OS 9 AI chat.\n *\n * white inset well\n * parts, in order\n * Copy, Try Again\n * \n * \n *\n * Crafted moments:\n * - The thread holds the end in view while a reply types, and lets go the\n * moment you scroll up to read. If more arrives while you're up there, a\n * small \"New messages\" bevel button rises from the bottom edge and takes\n * you back (UI SDK Scroll Area's stick-to-end, with a Platinum scrollbar).\n * - Copy answers in place: the button reads \"Copied\" with a check for a\n * moment, at the same width, so nothing beside it moves.\n *\n * Messages enter with the family's fade and 4px rise (160ms; classic and\n * reduced motion: instant). Text streams through RetroStreamingText's paced\n * reveal with the insertion caret in the last paragraph or code block.\n * Text formatting is deliberately small: blank lines make paragraphs, single\n * newlines stay, `inline code` and fenced ``` blocks render in Monaco, **bold** is bold.\n */\n\nimport * as React from \"react\"\nimport {\n createScrollAreaController,\n ScrollArea as ScrollAreaPrimitive,\n ScrollAreaContent as ScrollAreaContentPrimitive,\n ScrollAreaScrollToEnd as ScrollAreaScrollToEndPrimitive,\n ScrollAreaViewport as ScrollAreaViewportPrimitive,\n} from \"@ui-sdk/react/scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n isToolPart,\n messageText,\n toolNameOf,\n type RetroChatMessage,\n type RetroChatRole,\n type RetroFilePart,\n type RetroMessagePart,\n type RetroToolPart,\n} from \"@/registry/new-york/lib/retro-ai\"\nimport { useMergedRef } from \"@/registry/new-york/lib/retro-motion\"\nimport { RetroBevelButton } from \"@/registry/new-york/ui/retro-bevel-button\"\nimport { RetroIconDocument } from \"@/registry/new-york/ui/retro-icons\"\nimport { RetroScrollBar } from \"@/registry/new-york/ui/retro-scrollbar\"\nimport { RetroCaret, useRetroStreamingText } from \"@/registry/new-york/ui/retro-streaming-text\"\nimport { RetroReasoning, RetroWatchIcon } from \"@/registry/new-york/ui/retro-thinking\"\n\n/** The family's entrance: fade and rise 4px, 160ms. */\nconst ENTER =\n \"transition-[opacity,translate] duration-160 ease-[cubic-bezier(0.23,1,0.32,1)] starting:translate-y-1 starting:opacity-0 in-data-[flair=classic]:transition-none motion-reduce:transition-none\"\n\n/* ── pixel glyphs ──────────────────────────────────────── */\n\n/** The assistant's avatar: a 16px compact Macintosh with a happy face. */\nfunction RetroAssistantIcon({ className, ...props }: React.SVGAttributes) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction Glyph({ children, size = 12 }: { children: React.ReactNode; size?: number }) {\n return (\n \n {children}\n \n )\n}\n\nconst CopyGlyph = () => (\n \n \n \n \n \n \n)\n\nconst CheckGlyph = () => (\n \n \n \n)\n\nconst RetryGlyph = () => (\n \n \n \n)\n\nconst StopGlyph = () => (\n \n \n \n \n \n)\n\nconst CautionGlyph = () => (\n \n \n \n \n \n \n)\n\nconst DownGlyph = () => (\n \n \n \n)\n\n/* ── thread ────────────────────────────────────────────── */\n\ntype ScrollController = ReturnType\n\ninterface RetroMessageThreadContextValue {\n /** Scroll to the newest message and follow it again (call after Send). */\n scrollToEnd: (behavior?: \"instant\" | \"smooth\") => void\n}\n\nconst ThreadContext = React.createContext(null)\n\n/** The enclosing thread's controls, e.g. to scroll to the end after Send. */\nfunction useRetroMessageThread() {\n const context = React.useContext(ThreadContext)\n if (!context) throw new Error(\"useRetroMessageThread must be used inside \")\n return context\n}\n\ninterface RetroMessageThreadProps extends Omit, \"children\"> {\n children?: React.ReactNode\n /**\n * A reply is streaming. The log is marked aria-busy meanwhile, so screen\n * readers read the finished reply once instead of every word.\n */\n streaming?: boolean\n /** Accessible name of the log. Default \"Conversation\". */\n label?: string\n /** Text of the button that jumps back down. Default \"New messages\". */\n jumpLabel?: string\n /** Classes for the inner column (padding, gap, max width). */\n contentClassName?: string\n /** Drive the scroll position from outside (`createScrollAreaController()`). */\n controller?: ScrollController\n}\n\nfunction RetroMessageThread({\n children,\n streaming = false,\n label = \"Conversation\",\n jumpLabel = \"New messages\",\n contentClassName,\n controller: controllerProp,\n className,\n ...props\n}: RetroMessageThreadProps) {\n const [ownController] = React.useState(createScrollAreaController)\n const controller = controllerProp ?? ownController\n /* content arrived while the reader was scrolled up */\n const [hasNew, setHasNew] = React.useState(false)\n\n const contentRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n if (!node) return\n let height = node.offsetHeight\n const observer = new ResizeObserver(() => {\n const next = node.offsetHeight\n if (next > height && !controller.isSticking() && !controller.isAtEnd()) setHasNew(true)\n height = next\n })\n observer.observe(node)\n return () => observer.disconnect()\n },\n [controller]\n )\n\n const context = React.useMemo(\n () => ({\n scrollToEnd: (behavior = \"smooth\") => {\n setHasNew(false)\n controller.scrollToEnd({ behavior })\n },\n }),\n [controller]\n )\n\n return (\n \n \n \n {\n if (hasNew && (controller.isSticking() || controller.isAtEnd())) setHasNew(false)\n }}\n className=\"h-full w-full pr-[16px] focus-visible:os9-focus-ring\"\n >\n \n \n {children}\n \n \n \n \n {hasNew ? (\n
\n setHasNew(false)}\n render={\n }\n className={cn(\"pointer-events-auto not-data-visible:hidden\", ENTER)}\n />\n }\n >\n {jumpLabel}\n \n
\n ) : null}\n \n \n \n )\n}\n\n/* ── message ───────────────────────────────────────────── */\n\nconst MessageContext = React.createContext(\"assistant\")\n\ninterface RetroMessageProps extends Omit, \"children\"> {\n /** The message to render; its parts render in order. */\n message?: RetroChatMessage\n /** Who wrote it, for custom content without `message`. Default \"assistant\". */\n from?: RetroChatRole\n /**\n * This message is the reply still arriving. Parts without their own\n * `state` take the last one as streaming.\n */\n streaming?: boolean\n /** Renders a tool part (e.g. `(part) => `). */\n renderTool?: (part: RetroToolPart, index: number) => React.ReactNode\n /** Replace the assistant's icon, or `false` for none. */\n avatar?: React.ReactNode | false\n /** Extra content after the parts, such as RetroMessageActions. */\n children?: React.ReactNode\n}\n\nfunction RetroMessage({\n message,\n from: fromProp,\n streaming = false,\n renderTool,\n avatar,\n className,\n children,\n ...props\n}: RetroMessageProps) {\n const from = message?.role ?? fromProp ?? \"assistant\"\n return (\n \n \n {from === \"assistant\" && avatar !== false ? (\n \n {avatar ?? }\n \n ) : null}\n \n {message ? (\n \n \n \n ) : null}\n {children}\n \n \n \n )\n}\n\n/** The body of a message: prose for the assistant, a lavender box for the user. */\nfunction RetroMessageContent({ className, ...props }: React.ComponentProps<\"div\">) {\n const from = React.useContext(MessageContext)\n return (\n \n )\n}\n\n/* ── parts ─────────────────────────────────────────────── */\n\nfunction RetroMessageParts({\n parts,\n streaming,\n renderTool,\n}: {\n parts: RetroMessagePart[]\n streaming: boolean\n renderTool?: (part: RetroToolPart, index: number) => React.ReactNode\n}) {\n const last = parts.length - 1\n return parts.map((part, i) => {\n if (isToolPart(part)) {\n return (\n \n {renderTool ? renderTool(part, i) : }\n \n )\n }\n const partStreaming =\n \"state\" in part && part.state\n ? part.state === \"streaming\"\n : streaming && i === last\n switch (part.type) {\n case \"text\":\n return \n case \"reasoning\":\n return \n case \"file\":\n return \n default:\n return null\n }\n })\n}\n\n/* fenced code: ``` or ```lang on a line of its own */\nconst FENCE = /^\\s*```\\s*([\\w+#.-]*)\\s*$/\n\ntype Block =\n | { kind: \"p\"; text: string }\n | { kind: \"code\"; lang: string; code: string }\n\nfunction parseBlocks(text: string): Block[] {\n const blocks: Block[] = []\n let para: string[] = []\n let code: { lang: string; lines: string[] } | null = null\n const flush = () => {\n if (para.length) blocks.push({ kind: \"p\", text: para.join(\"\\n\") })\n para = []\n }\n for (const line of text.split(\"\\n\")) {\n const fence = FENCE.exec(line)\n if (code) {\n if (fence && !fence[1]) {\n blocks.push({ kind: \"code\", lang: code.lang, code: code.lines.join(\"\\n\") })\n code = null\n } else code.lines.push(line)\n } else if (fence) {\n flush()\n code = { lang: fence[1], lines: [] }\n } else if (line.trim() === \"\") flush()\n else para.push(line)\n }\n flush()\n /* still streaming inside a fence: show what has arrived */\n if (code) blocks.push({ kind: \"code\", lang: code.lang, code: code.lines.join(\"\\n\") })\n return blocks\n}\n\n/* `code` and **bold**; anything else stays plain text */\nfunction inline(text: string) {\n return text.split(/(`[^`\\n]+`|\\*\\*[^*\\n]+\\*\\*)/g).map((piece, i) =>\n i % 2 === 0 ? (\n piece\n ) : piece.startsWith(\"`\") ? (\n \n {piece.slice(1, -1)}\n \n ) : (\n \n {piece.slice(2, -2)}\n \n )\n )\n}\n\ninterface RetroMessageTextProps extends Omit, \"children\"> {\n text: string\n /** More text may still arrive: pace the reveal and show the caret. */\n streaming?: boolean\n}\n\n/**\n * Message text: paragraphs on blank lines, single newlines kept, `inline\n * code` and fenced blocks in Monaco. No markdown dependency.\n */\nfunction RetroMessageText({ text, streaming = false, className, ref, ...props }: RetroMessageTextProps) {\n const { shown, phase, ref: paceRef } = useRetroStreamingText(text, streaming)\n const mergedRef = useMergedRef(ref, paceRef as React.Ref)\n const blocks = parseBlocks(shown)\n const caret = \n if (blocks.length === 0) blocks.push({ kind: \"p\", text: \"\" })\n const last = blocks.length - 1\n\n return (\n \n {blocks.map((block, i) =>\n block.kind === \"p\" ? (\n

\n {inline(block.text)}\n {i === last ? caret : null}\n

\n ) : (\n
\n {block.lang ? (\n
\n {block.lang}\n
\n ) : null}\n 
\n              \n                {block.code}\n                {i === last ? caret : null}\n              \n
\n
\n )\n )}\n \n )\n}\n\nfunction FilePart({ part }: { part: RetroFilePart }) {\n if (part.mediaType.startsWith(\"image/\")) {\n return (\n // eslint-disable-next-line @next/next/no-img-element\n \n )\n }\n return (\n \n \n {part.filename ?? \"Attachment\"}\n \n )\n}\n\nconst TOOL_STATE: Record = {\n \"input-streaming\": { label: \"Preparing…\", icon: },\n \"input-available\": { label: \"Running…\", icon: },\n \"approval-requested\": { label: \"Waiting for you\", icon: },\n \"approval-responded\": { label: \"Running…\", icon: },\n \"output-available\": { label: \"Done\", icon: },\n \"output-error\": { label: \"Error\", icon: },\n \"output-denied\": { label: \"Not allowed\", icon: },\n}\n\n/** A plain row for tool parts when no `renderTool` is given. */\nfunction DefaultToolRow({ part }: { part: RetroToolPart }) {\n const { label, icon } = TOOL_STATE[part.state]\n return (\n
\n {icon}\n {toolNameOf(part)}\n \n {part.state === \"output-error\" && part.errorText ? part.errorText : label}\n \n
\n )\n}\n\n/* ── actions ───────────────────────────────────────────── */\n\nconst COPIED_MS = 1600\n\ninterface RetroMessageActionsProps extends Omit, \"onCopy\"> {\n /** The message whose text Copy copies. */\n message?: RetroChatMessage\n /** Text to copy instead of the message's. */\n text?: string\n /** Called after copying, with the text. */\n onCopy?: (text: string) => void\n /** Shows Try Again. */\n onRetry?: () => void\n /** Keep them visible rather than showing on hover and focus. */\n alwaysVisible?: boolean\n}\n\n/**\n * Copy and Try Again under a reply. They show while the pointer is over the\n * message or focus is inside it, and always on touch screens. Pass more\n * buttons as children.\n */\nfunction RetroMessageActions({\n message,\n text,\n onCopy,\n onRetry,\n alwaysVisible = false,\n className,\n children,\n ...props\n}: RetroMessageActionsProps) {\n const [copied, setCopied] = React.useState(false)\n const timer = React.useRef(0)\n React.useEffect(() => () => window.clearTimeout(timer.current), [])\n\n const copy = async () => {\n const value = text ?? (message ? messageText(message) : \"\")\n try {\n await navigator.clipboard.writeText(value)\n } catch {\n return\n }\n onCopy?.(value)\n setCopied(true)\n window.clearTimeout(timer.current)\n timer.current = window.setTimeout(() => setCopied(false), COPIED_MS)\n }\n\n return (\n \n : }>\n {/* both labels share one cell, so the button keeps its width */}\n \n Copy\n \n Copied\n \n \n \n \n {copied ? \"Copied\" : \"\"}\n \n {onRetry ? (\n }>\n Try Again\n \n ) : null}\n {children}\n \n )\n}\n\nexport {\n RetroMessageThread,\n RetroMessage,\n RetroMessageContent,\n RetroMessageText,\n RetroMessageActions,\n RetroAssistantIcon,\n useRetroMessageThread,\n}\nexport type {\n RetroMessageThreadProps,\n RetroMessageProps,\n RetroMessageTextProps,\n RetroMessageActionsProps,\n}\n", "type": "registry:ui" } ], "type": "registry:ui" }