{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aurora-ai-elements", "title": "Aurora AI Elements", "author": "jmagar ", "description": "Aurora-native AI Elements parity block covering chat, code, voice, workflow, media, and utility surfaces.", "dependencies": [ "lucide-react@^0.487.0" ], "registryDependencies": [ "@aurora/aurora-tokens", "@aurora/aurora-avatar", "@aurora/aurora-badge", "@aurora/aurora-button", "@aurora/aurora-select", "@aurora/aurora-separator", "@aurora/aurora-spinner", "@aurora/aurora-textarea", "@aurora/aurora-clipboard", "@aurora/aurora-safe-url" ], "files": [ { "path": "registry/aurora/blocks/ai/elements/ai-elements.tsx", "content": "\"use client\"\n\n// ---------------------------------------------------------------------------\n// ai-elements.tsx — explicit re-export barrel\n//\n// Previously this file was `export * from \"./core\"` which caused tsc\n// duplicate-export errors when core.tsx and the reskinned standalone files\n// both defined the same name (Canvas/Node, Action/Actions, Source/SourceItem/\n// SourceProps). This barrel uses a named list so TypeScript sees exactly one\n// owner per export.\n//\n// Owner map (one canonical file per conflicting name):\n// Canvas, Node → canvas.tsx (CD-parity reskin)\n// Action, Actions,\n// ActionProps, ActionsProps → action.tsx / actions.tsx\n// Source, SourceItem,\n// SourceProps → source.tsx (CD-parity reskin)\n// Sources → sources.tsx\n// Everything else → core.tsx\n//\n// Queue lives in core.tsx because the two barrel-consuming demos\n// (ai-element-page.tsx, parity-demo.tsx) pass `tasks: AgentTask[]`, which\n// is the core.tsx API. The standalone queue.tsx uses `items: QueueItem[]`\n// and is consumed only by its own demo (ai-queue-demo.tsx).\n// ---------------------------------------------------------------------------\n\n// ── Canvas + Node (canvas.tsx owns both) ────────────────────────────────────\nexport { Canvas, Node } from \"./canvas\"\nexport type { CanvasProps, CanvasEdge, NodeProps } from \"./canvas\"\n\n// ── Action + Actions (standalone reskins) ───────────────────────────────────\nexport { Action } from \"./action\"\nexport type { ActionProps } from \"./action\"\nexport { Actions } from \"./actions\"\nexport type { ActionsProps } from \"./actions\"\n\n// ── Source + SourceItem + SourceProps (source.tsx is canonical) ─────────────\nexport { Source } from \"./source\"\nexport type { SourceItem, SourceProps } from \"./source\"\n\n// ── Sources (sources.tsx is canonical) ──────────────────────────────────────\nexport { Sources } from \"./sources\"\nexport type { SourcesProps } from \"./sources\"\n\n// ── Everything else from core.tsx ───────────────────────────────────────────\n// Excludes the four collision groups above. core.tsx still owns:\n// Message, MessageAvatar, MessageContent, InlineCitation,\n// Conversation, ModelSelector, Queue (tasks API), TaskList,\n// TestResults, StackTrace, EnvironmentVariables, Checkpoint,\n// Confirmation, ContextPanel / Context, Shimmer, Suggestion,\n// Agent, Commit, JsxPreview, PackageInfo, Sandbox, SchemaDisplay,\n// Snippet, Image, OpenInChat, AudioPlayer, MicSelector, Persona,\n// SpeechInput, Transcription, VoiceSelector, Connection, Controls,\n// Edge, Panel\n// and all their prop interfaces.\nexport {\n Agent,\n AudioPlayer,\n Checkpoint,\n Commit,\n Confirmation,\n Connection,\n ContextPanel,\n ContextPanel as Context,\n Controls,\n Conversation,\n Edge,\n EnvironmentVariables,\n Image,\n InlineCitation,\n JsxPreview,\n Message,\n MessageAvatar,\n MessageContent,\n MicSelector,\n ModelSelector,\n OpenInChat,\n PackageInfo,\n Panel,\n Persona,\n Queue,\n Sandbox,\n SchemaDisplay,\n Shimmer,\n Snippet,\n SpeechInput,\n StackTrace,\n Suggestion,\n TaskList,\n TestResults,\n Transcription,\n VoiceSelector,\n} from \"./core\"\n\nexport type {\n AgentProps,\n AgentTask,\n AudioPlayerProps,\n CheckpointProps,\n CommitProps,\n ConfirmationProps,\n ConnectionProps,\n ContextPanelProps,\n ConversationProps,\n EdgeProps,\n EnvironmentVariable,\n EnvironmentVariablesProps,\n AuroraImageProps,\n InlineCitationProps,\n JsxPreviewProps,\n MessageAvatarProps,\n MessageProps,\n MicSelectorProps,\n ModelSelectorProps,\n OpenInChatProps,\n PackageInfoProps,\n PanelProps,\n PersonaProps,\n QueueProps,\n SandboxProps,\n SchemaDisplayProps,\n SnippetProps,\n SpeechInputProps,\n StackFrame,\n StackTraceProps,\n SuggestionOption,\n SuggestionProps,\n TaskListProps,\n TestResult,\n TestResultsProps,\n TranscriptionProps,\n TranscriptionSegment,\n VoiceSelectorProps,\n // ControlsProps lives only in core.tsx — no collision\n ControlsProps,\n} from \"./core\"\n", "type": "registry:component", "target": "@components/aurora/ai/ai-elements.tsx" }, { "path": "registry/aurora/blocks/ai/elements/core.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Bot,\n Boxes,\n Check,\n Copy,\n CircleCheck,\n CircleAlert,\n CircleDashed,\n ExternalLink,\n FileCode,\n FileText,\n FlaskConical,\n GitCommitHorizontal,\n KeyRound,\n Layers2,\n ListChecks,\n Mic,\n Network,\n Package,\n Play,\n Route,\n Save,\n Send,\n Sparkles,\n UserRound,\n Workflow,\n X,\n CircleX,\n} from \"lucide-react\"\nimport { Avatar as AuroraAvatar } from \"@/registry/aurora/ui/avatar\"\nimport { Badge } from \"@/registry/aurora/ui/badge\"\nimport { Button } from \"@/registry/aurora/ui/button\"\nimport { useClipboard } from \"@/registry/aurora/lib/use-clipboard\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\nimport { Separator } from \"@/registry/aurora/ui/separator\"\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from \"@/registry/aurora/ui/select\"\nimport { Spinner } from \"@/registry/aurora/ui/spinner\"\nimport { Textarea } from \"@/registry/aurora/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface MessageProps extends React.HTMLAttributes {\n role?: \"assistant\" | \"user\" | \"system\"\n}\n\nexport interface MessageAvatarProps extends React.HTMLAttributes {\n label: string\n tone?: \"cyan\" | \"rose\" | \"muted\" | \"orange\"\n}\n\nexport interface SourcesProps extends Omit, \"title\"> {\n title?: React.ReactNode\n}\n\nexport interface SourceItem {\n title: string\n href?: string\n description?: string\n badge?: string\n}\n\nexport interface SourceProps extends React.HTMLAttributes {\n source: SourceItem\n}\n\nexport interface InlineCitationProps extends React.AnchorHTMLAttributes {\n index: number\n}\n\nexport interface AgentTask {\n id: string\n title: string\n description?: string\n status: \"queued\" | \"running\" | \"completed\" | \"failed\"\n}\n\nexport interface TaskListProps extends React.HTMLAttributes {\n tasks: AgentTask[]\n}\n\nexport interface TestResult {\n name: string\n status: \"passed\" | \"failed\" | \"skipped\" | \"running\"\n duration?: string\n message?: string\n}\n\nexport interface TestResultsProps extends Omit, \"results\"> {\n results: TestResult[]\n}\n\nexport interface StackFrame {\n file: string\n line?: number\n column?: number\n label?: string\n}\n\nexport interface StackTraceProps extends React.HTMLAttributes {\n title?: string\n frames: StackFrame[]\n}\n\nexport interface EnvironmentVariable {\n key: string\n value?: string\n secret?: boolean\n required?: boolean\n}\n\nexport interface EnvironmentVariablesProps extends React.HTMLAttributes {\n variables: EnvironmentVariable[]\n}\n\nexport interface CheckpointProps extends React.HTMLAttributes {\n label: string\n description?: string\n}\n\nexport interface ConfirmationProps extends React.HTMLAttributes {\n title: string\n description?: string\n confirmLabel?: string\n cancelLabel?: string\n}\n\nexport interface ContextPanelProps extends React.HTMLAttributes {\n used?: number\n limit?: number\n label?: string\n}\n\nexport type ConversationProps = React.HTMLAttributes\n\nexport interface ModelSelectorProps extends React.HTMLAttributes {\n models: string[]\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n label?: string\n name?: string\n disabled?: boolean\n required?: boolean\n triggerId?: string\n triggerLabel?: string\n}\n\nexport interface QueueProps extends React.HTMLAttributes {\n tasks: AgentTask[]\n}\n\nexport interface SuggestionOption {\n id: string\n title: string\n description?: string\n badge?: string\n}\n\nexport interface SuggestionProps extends Omit, \"onClick\"> {\n options?: SuggestionOption[]\n disabled?: boolean\n onClick?: React.MouseEventHandler\n}\n\nexport interface AgentProps extends React.HTMLAttributes {\n name: string\n role?: string\n status?: \"idle\" | \"running\" | \"blocked\"\n}\n\nexport interface CommitProps extends React.HTMLAttributes {\n hash: string\n message: string\n author?: string\n}\n\nexport interface JsxPreviewProps extends React.HTMLAttributes {\n code: string\n}\n\nexport interface PackageInfoProps extends React.HTMLAttributes {\n name: string\n version: string\n description?: string\n}\n\nexport interface SandboxProps extends React.HTMLAttributes {\n title?: string\n command?: string\n status?: \"ready\" | \"running\" | \"idle\"\n runtime?: string\n paths?: string[]\n envCount?: number\n}\n\nexport interface SchemaDisplayProps extends React.HTMLAttributes {\n schema: unknown\n}\n\nexport interface SnippetProps extends React.HTMLAttributes {\n code: string\n language?: string\n}\n\nexport interface AuroraImageProps extends React.ImgHTMLAttributes {\n caption?: string\n}\n\nexport type OpenInChatProps = React.ButtonHTMLAttributes\n\nexport interface AudioPlayerProps extends React.HTMLAttributes {\n title?: string\n duration?: string\n}\n\nexport interface MicSelectorProps extends React.HTMLAttributes {\n devices: string[]\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n name?: string\n disabled?: boolean\n required?: boolean\n triggerId?: string\n triggerLabel?: string\n}\n\nexport interface PersonaProps extends React.HTMLAttributes {\n name: string\n description?: string\n}\n\nexport type SpeechInputProps = React.TextareaHTMLAttributes\n\nexport interface TranscriptionSegment {\n speaker: string\n timecode: string\n text: string\n confidence?: number\n}\n\nexport interface TranscriptionProps extends React.HTMLAttributes {\n segments: TranscriptionSegment[]\n}\n\nexport interface VoiceSelectorProps extends React.HTMLAttributes {\n voices: string[]\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n name?: string\n disabled?: boolean\n required?: boolean\n triggerId?: string\n triggerLabel?: string\n}\n\nexport type CanvasProps = React.HTMLAttributes\nexport interface ConnectionProps extends React.HTMLAttributes {\n from: string\n to: string\n}\nexport type ControlsProps = React.HTMLAttributes\nexport interface EdgeProps extends React.HTMLAttributes {\n label?: string\n}\nexport interface NodeProps extends React.HTMLAttributes {\n title: string\n description?: string\n}\nexport interface PanelProps extends Omit, \"title\"> {\n title?: React.ReactNode\n}\n\nconst taskTone = {\n queued: { color: \"var(--aurora-text-muted)\", icon: },\n running: { color: \"var(--axon-orange)\", icon: },\n completed: { color: \"var(--aurora-success)\", icon: },\n failed: { color: \"var(--aurora-error)\", icon: },\n}\n\nconst resultVariant = {\n passed: \"success\",\n failed: \"error\",\n skipped: \"neutral\",\n running: \"neutral\",\n} as const\n\nfunction formatStatusLabel(value: string) {\n return value\n .split(/[-_\\s]+/)\n .filter(Boolean)\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join(\" \")\n}\n\nfunction panelStyle(style?: React.CSSProperties): React.CSSProperties {\n return {\n background: \"var(--aurora-surface-raised)\",\n border: \"1px solid var(--aurora-border-strong)\",\n borderRadius: \"var(--aurora-radius-1)\",\n boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n ...style,\n }\n}\n\nfunction previewValue(value?: string, secret?: boolean) {\n if (!value) return \"Unset\"\n if (secret) {\n const visible = value.slice(0, 6)\n return `${visible}${value.length > 6 ? \"••••\" : \"\"}`\n }\n return value.length > 18 ? `${value.slice(0, 18)}…` : value\n}\n\nfunction formatTokenCount(value: number) {\n if (value >= 1000) return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k`\n return `${value}`\n}\n\nfunction stringifyWithOrder(value: unknown) {\n return JSON.stringify(value, null, 2)\n}\n\nfunction renderJsonValue(value: unknown, depth = 0): React.ReactNode {\n const indent = \" \".repeat(depth)\n\n if (Array.isArray(value)) {\n if (value.length === 0) return []\n return (\n <>\n [\n {\"\\n\"}\n {value.map((item, index) => (\n \n {indent}\n {\" \"}\n {renderJsonValue(item, depth + 1)}\n {index < value.length - 1 ? , : null}\n {\"\\n\"}\n \n ))}\n {indent}\n ]\n \n )\n }\n\n if (value && typeof value === \"object\") {\n const entries = Object.entries(value)\n if (entries.length === 0) return {`{}`}\n return (\n <>\n {`{`}\n {\"\\n\"}\n {entries.map(([key, entryValue], index) => (\n \n {indent}\n {\" \"}\n {`\"${key}\"`}\n : \n {renderJsonValue(entryValue, depth + 1)}\n {index < entries.length - 1 ? , : null}\n {\"\\n\"}\n \n ))}\n {indent}\n {`}`}\n \n )\n }\n\n if (typeof value === \"string\") return {`\"${value}\"`}\n if (typeof value === \"number\") return {value}\n if (typeof value === \"boolean\") return {String(value)}\n if (value === null) return null\n return {String(value)}\n}\n\nfunction CopyButton({ value, label = \"Copy\" }: { value: string; label?: string }) {\n const { copied, error, copy } = useClipboard(1200)\n const handleCopy = React.useCallback(() => void copy(value), [copy, value])\n\n return (\n \n {copied ? (\n \n ) : (\n \n )}\n {copied ? \"Copied\" : error ? \"Unable to copy\" : label}\n \n )\n}\n\nfunction CodeSurface({\n icon,\n title,\n value,\n children,\n}: {\n icon: React.ReactNode\n title: string\n value: string\n children: React.ReactNode\n}) {\n return (\n
\n
\n
\n {icon}\n {title}\n
\n \n
\n {children}\n
\n )\n}\n\nfunction SelectorCard({\n icon,\n title,\n description,\n values,\n value,\n defaultValue,\n onValueChange,\n name,\n disabled,\n required,\n triggerId,\n triggerLabel,\n placeholder,\n}: {\n icon: React.ReactNode\n title: string\n description: string\n values: string[]\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n name?: string\n disabled?: boolean\n required?: boolean\n triggerId?: string\n triggerLabel?: string\n placeholder?: string\n}) {\n return (\n
\n
\n
\n {icon}\n {title}\n
\n

\n {description}\n

\n
\n \n
\n )\n}\n\nconst Message = ({ ref, className, role = \"assistant\", style, ...props }: MessageProps & { ref?: React.Ref }) => (\n \n)\nMessage.displayName = \"Message\"\n\nconst MessageAvatar = ({ ref, className, label, tone = \"orange\", style, ...props }: MessageAvatarProps & { ref?: React.Ref> }) => {\n const color =\n tone === \"rose\"\n ? \"var(--aurora-accent-pink)\"\n : tone === \"muted\"\n ? \"var(--aurora-text-muted)\"\n : tone === \"cyan\"\n ? \"var(--aurora-accent-primary)\"\n : \"var(--axon-orange)\"\n\n return (\n \n )\n }\nMessageAvatar.displayName = \"MessageAvatar\"\n\nconst bubbleTone = {\n assistant: {\n background: \"linear-gradient(180deg, color-mix(in srgb, var(--axon-orange) 10%, var(--aurora-panel-medium)), color-mix(in srgb, var(--axon-orange) 5%, var(--aurora-panel-medium)))\",\n borderColor: \"color-mix(in srgb, var(--axon-orange) 30%, var(--aurora-border-default))\",\n shadow: \"0 14px 30px color-mix(in srgb, var(--axon-orange) 7%, transparent), var(--aurora-highlight-medium)\",\n },\n user: {\n background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-primary) 13%, var(--aurora-panel-medium)), color-mix(in srgb, var(--aurora-accent-primary) 7%, var(--aurora-panel-medium)))\",\n borderColor: \"color-mix(in srgb, var(--aurora-accent-primary) 36%, var(--aurora-border-default))\",\n shadow: \"0 14px 30px color-mix(in srgb, var(--aurora-accent-primary) 7%, transparent), var(--aurora-highlight-medium)\",\n },\n system: {\n background: \"color-mix(in srgb, var(--aurora-text-muted) 8%, var(--aurora-panel-medium))\",\n borderColor: \"var(--aurora-border-default)\",\n shadow: \"var(--aurora-highlight-medium)\",\n },\n} as const\n\nconst MessageContent = ({ ref, className, style, tone = \"assistant\", ...props }: React.HTMLAttributes & { tone?: MessageProps[\"role\"] } & { ref?: React.Ref }) => (\n \n )\nMessageContent.displayName = \"MessageContent\"\n\n// LEARNED: umbrella registry exports need the same URL boundary as standalone blocks.\nconst InlineCitation = ({ ref, className, index, style, children, href, ...props }: InlineCitationProps & { ref?: React.Ref }) => (\n \n {children ?? index}\n \n )\nInlineCitation.displayName = \"InlineCitation\"\n\nconst Sources = ({ ref, className, title = \"Sources\", style, children, ...props }: SourcesProps & { ref?: React.Ref }) => (\n
\n
\n \n {title}\n
\n
{children}
\n
\n)\nSources.displayName = \"Sources\"\n\nconst Source = ({ ref, className, source, style, ...props }: SourceProps & { ref?: React.Ref }) => (\n \n \n {source.title}\n {source.badge ? {source.badge} : null}\n \n \n {source.description ? {source.description} : null}\n \n)\nSource.displayName = \"Source\"\n\nconst TaskList = ({ ref, className, tasks, style, ...props }: TaskListProps & { ref?: React.Ref }) => (\n
\n
\n \n Tasks\n
\n \n
\n {tasks.map((task) => {\n const tone = taskTone[task.status]\n return (\n \n {tone.icon}\n \n {task.title}\n {task.description ? {task.description} : null}\n \n \n {formatStatusLabel(task.status)}\n \n
\n )\n })}\n
\n \n)\nTaskList.displayName = \"TaskList\"\n\nconst TestResults = ({ ref, className, results, style, ...props }: TestResultsProps & { ref?: React.Ref }) => (\n
\n
\n \n Test Results\n
\n \n
\n {results.map((result) => (\n \n {result.name}\n {result.duration ?? \"\"}\n
\n \n {formatStatusLabel(result.status)}\n \n
\n {result.message ? {result.message} : null}\n
\n ))}\n
\n \n)\nTestResults.displayName = \"TestResults\"\n\nconst StackTrace = ({ ref, className, title = \"Stack Trace\", frames, style, ...props }: StackTraceProps & { ref?: React.Ref }) => (\n
\n
\n \n {title}\n
\n
\n {frames.map((frame, index) => (\n
\n {index + 1}\n \n \n {frame.file}{frame.line ? `:${frame.line}` : \"\"}{frame.column ? `:${frame.column}` : \"\"}\n \n {frame.label ? {frame.label} : null}\n \n
\n ))}\n
\n
\n)\nStackTrace.displayName = \"StackTrace\"\n\nconst EnvironmentVariables = ({ ref, className, variables, style, ...props }: EnvironmentVariablesProps & { ref?: React.Ref }) => (\n
\n
\n \n Environment\n
\n \n
\n {variables.map((item) => (\n
\n {item.key}\n \n {previewValue(item.value, item.secret)}\n \n \n {item.required ? Required : null}\n {item.secret ? Secret : null}\n \n
\n ))}\n
\n
\n )\nEnvironmentVariables.displayName = \"EnvironmentVariables\"\n\nconst Checkpoint = ({ ref, label, description, className, style, ...props }: CheckpointProps & { ref?: React.Ref }) => (\n
\n \n
\n
{label}
\n {description ?
{description}
: null}\n
\n
\n )\nCheckpoint.displayName = \"Checkpoint\"\n\nconst Confirmation = ({ ref, title, description, confirmLabel = \"Approve\", cancelLabel = \"Cancel\", className, style, ...props }: ConfirmationProps & { ref?: React.Ref }) => (\n
\n
\n \n {title}\n
\n {description ?

{description}

: null}\n
\n \n \n
\n
\n )\nConfirmation.displayName = \"Confirmation\"\n\nconst ContextPanel = ({ ref, used = 42100, limit = 128000, label = \"Context\", className, style, ...props }: ContextPanelProps & { ref?: React.Ref }) => {\n const percent = limit > 0 ? Math.min(Math.max((used / limit) * 100, 0), 100) : 0\n\n return (\n \n
\n
\n \n {label}\n
\n
\n {formatTokenCount(used)} / {formatTokenCount(limit)}\n
\n
\n \n \n \n {Math.round(percent)}%\n \n \n \n )\n }\nContextPanel.displayName = \"ContextPanel\"\n\nconst Conversation = ({ ref, className, style, ...props }: ConversationProps & { ref?: React.Ref }) => (\n \n )\nConversation.displayName = \"Conversation\"\n\nconst ModelSelector = ({ ref, models, value, defaultValue, onValueChange, label = \"Model\", name, disabled, required, triggerId, triggerLabel, className, style, ...props }: ModelSelectorProps & { ref?: React.Ref }) => (\n
\n }\n title={label}\n description=\"Select a model for this conversation.\"\n values={models}\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n name={name}\n disabled={disabled}\n required={required}\n triggerId={triggerId}\n triggerLabel={triggerLabel ?? label}\n />\n
\n )\nModelSelector.displayName = \"ModelSelector\"\n\nconst Queue = ({ ref, tasks, ...props }: QueueProps & { ref?: React.Ref }) => \nQueue.displayName = \"Queue\"\n\nconst Shimmer = ({ ref, className, style, ...props }: React.HTMLAttributes & { ref?: React.Ref }) => (\n \n )\nShimmer.displayName = \"Shimmer\"\n\nconst Suggestion = ({ ref, className, style, options, children, onClick, disabled, ...props }: SuggestionProps & { ref?: React.Ref }) => (\n
\n {(options ?? [{ id: \"default\", title: typeof children === \"string\" ? children : \"Suggested next step\" }]).map((option) => (\n \n \n \n {option.title}\n {option.badge ? {option.badge} : null}\n \n {option.description ? {option.description} : null}\n \n \n ))}\n
\n )\nSuggestion.displayName = \"Suggestion\"\n\nconst Agent = ({ ref, name, role, status = \"idle\", className, style, ...props }: AgentProps & { ref?: React.Ref }) => (\n
\n \n \n {name}\n {role ? {role} : null}\n \n \n {formatStatusLabel(status)}\n \n
\n )\nAgent.displayName = \"Agent\"\n\nconst Commit = ({ ref, hash, message, author, className, style, ...props }: CommitProps & { ref?: React.Ref }) => (\n
\n \n \n {message}\n {hash}{author ? ` by ${author}` : \"\"}\n \n
\n )\nCommit.displayName = \"Commit\"\n\nconst JsxPreview = ({ ref, code, className, style, ...props }: JsxPreviewProps & { ref?: React.Ref }) => (\n
\n } title=\"JSX Preview\" value={code}>\n 
{code}
\n \n
\n )\nJsxPreview.displayName = \"JsxPreview\"\n\nconst PackageInfo = ({ ref, name, version, description, className, style, ...props }: PackageInfoProps & { ref?: React.Ref }) => (\n
\n \n \n {name}\n {version}\n {description ? {description} : null}\n \n
\n )\nPackageInfo.displayName = \"PackageInfo\"\n\nconst Sandbox = ({ ref, title = \"Sandbox\", command = \"pnpm dev\", status = \"running\", runtime = \"Node 20\", paths = [\"/workdir/app\", \"/workdir/.next\"], envCount = 8, className, style, children, ...props }: SandboxProps & { ref?: React.Ref }) => (\n
\n
\n {title}\n \n {formatStatusLabel(status)}\n \n
\n
\n
\n {command}\n {runtime}\n {envCount} Env Vars\n
\n
\n {paths.map((path) => (\n
\n \n {path}\n
\n ))}\n
\n
\n \n \n
\n
\n {children}\n
\n )\nSandbox.displayName = \"Sandbox\"\n\nconst SchemaDisplay = ({ ref, schema, className, style, ...props }: SchemaDisplayProps & { ref?: React.Ref }) => (\n
\n } title=\"Schema Display\" value={stringifyWithOrder(schema)}>\n \n {renderJsonValue(schema)}\n \n \n
\n )\nSchemaDisplay.displayName = \"SchemaDisplay\"\n\nconst Snippet = ({ ref, code, language = \"tsx\", className, style, ...props }: SnippetProps & { ref?: React.Ref }) => (\n
\n } title=\"Snippet\" value={code}>\n \n {language}\n {\"\\n\"}\n {code}\n \n \n
\n )\nSnippet.displayName = \"Snippet\"\n\nconst Image = ({ ref, caption, className, style, alt = \"\", ...props }: AuroraImageProps & { ref?: React.Ref }) => (\n
\n {alt}\n {caption ?
{caption}
: null}\n
\n )\nImage.displayName = \"Image\"\n\nconst OpenInChat = ({ ref, children = \"Open in Chat\", ...props }: OpenInChatProps & { ref?: React.Ref }) => (\n \n )\nOpenInChat.displayName = \"OpenInChat\"\n\nconst AudioPlayer = ({ ref, title = \"Voice Response\", duration = \"00:42\", className, style, ...props }: AudioPlayerProps & { ref?: React.Ref }) => (\n
\n \n \n {title}\n \n \n {duration}\n
\n )\nAudioPlayer.displayName = \"AudioPlayer\"\n\nconst MicSelector = ({ ref, devices, value, defaultValue, onValueChange, name, disabled, required, triggerId, triggerLabel, ...props }: MicSelectorProps & { ref?: React.Ref }) => (\n
\n }\n title=\"Microphone\"\n description=\"Swap inputs without dropping back to a native control.\"\n values={devices}\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n name={name}\n disabled={disabled}\n required={required}\n triggerId={triggerId}\n triggerLabel={triggerLabel ?? \"Microphone\"}\n />\n
\n )\nMicSelector.displayName = \"MicSelector\"\n\nconst Persona = ({ ref, name, description, className, style, ...props }: PersonaProps & { ref?: React.Ref }) => (\n
\n \n \n {name}\n {description ? {description} : null}\n \n
\n )\nPersona.displayName = \"Persona\"\n\nconst SpeechInput = ({ ref, className, style, ...props }: SpeechInputProps & { ref?: React.Ref }) => (\n
\n
Speech Input
\n