{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "message", "title": "Message", "description": "No balloons. Of the speech bubble only its tail is left, a leaning hairline. What they wrote is roman; what you wrote sits on the other side, in italic.", "registryDependencies": [ "https://thedirectors.agency/ui/r/0nlytype.json", "https://thedirectors.agency/ui/r/avatar.json", "https://thedirectors.agency/ui/r/badge.json", "https://thedirectors.agency/ui/r/spinner.json" ], "files": [ { "path": "registry/0nlytype/ui/message.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { roll } from \"@/lib/0nlytype/roll\"\nimport { Avatar, type AvatarProps } from \"@/components/ui/avatar\"\nimport { Spinner } from \"@/components/ui/spinner\"\n\ntype MessageProps = React.ComponentProps<\"article\"> & {\n /** Theirs sit at the start in roman; yours sit at the end, in italic. */\n from?: \"them\" | \"you\"\n /** Writes the body in from the left when it mounts. */\n arriving?: boolean\n /**\n * script: a play text. The name stands in the margin, the words in the column, and only the type says who is speaking.\n * quote: no face. A large quotation mark opens theirs at the start and closes yours at the end.\n */\n variant?: \"default\" | \"script\" | \"quote\"\n}\n\n/** A message: what they wrote is roman, what you wrote is italic. */\nfunction Message({ className, from = \"them\", arriving, variant = \"default\", ...props }: MessageProps) {\n return (\n \n )\n}\n\n/** The face beside the message. It sits in the message's grid, so it must be a direct child. */\nfunction MessageAvatar({ className, ...props }: AvatarProps) {\n // The header already names the person, so the ring is decoration for assistive tech.\n return \n}\n\ntype MessageHeaderProps = Omit, \"children\"> & {\n name: React.ReactNode\n time: React.ReactNode\n /** The machine-readable time, such as 2026-09-30T09:40. */\n dateTime?: string\n}\n\n/** The name and the time. Yours flips them, time first, so the name stays beside your avatar. */\nfunction MessageHeader({ name, time, dateTime, className, ...props }: MessageHeaderProps) {\n return (\n
\n {name}\n \n
\n )\n}\n\nfunction MessageBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return
\n}\n\ntype MessageBubbleProps = React.ComponentProps<\"p\"> & {\n /** Which side the tail leans to. Set \"end\" for what you wrote. */\n align?: \"start\" | \"end\"\n /** ink: reversed type in a block, the tail under it. mark: a highlighter behind the words. */\n variant?: \"default\" | \"ink\" | \"mark\"\n}\n\n/** No balloon. Of the speech bubble only its tail is left, a leaning hairline. */\nfunction MessageBubble({ align = \"start\", variant = \"default\", className, children, ...props }: MessageBubbleProps) {\n const shared = {\n \"data-slot\": \"message-bubble\",\n \"data-align\": align === \"end\" ? \"end\" : undefined,\n \"data-variant\": variant === \"default\" ? undefined : variant,\n }\n // The highlighter needs an inline paragraph inside the block, so the marker wraps.\n if (variant === \"mark\") {\n return (\n
)}>\n

{children}

\n
\n )\n }\n return (\n

\n {children}\n

\n )\n}\n\ntype MessageTypingProps = Omit, \"children\"> & {\n /** True only while the other side is writing. Keep it mounted and drive this, so the words are heard when it starts. */\n writing: boolean\n /** What a screen reader hears while it shows, such as \"Ada is writing\". */\n label?: string\n /** Which side the tail leans to, as on a bubble. */\n align?: \"start\" | \"end\"\n}\n\n/**\n * The other side is writing: the tail and three periods where their words will be, in pencil, breathing\n * as a busy button's do. Not writing, it stays mounted as an empty, silent status that takes no room.\n */\nfunction MessageTyping({ writing, label = \"Writing\", align = \"start\", className, ...props }: MessageTypingProps) {\n return (\n \n {writing ? (\n <>\n \n {label}\n \n ) : null}\n

\n )\n}\n\nfunction MessageFooter({ className, ...props }: React.ComponentProps<\"footer\">) {\n return