\n ))}\n \n );\n};\n\nconst models = [\n { id: \"gpt-4o\", name: \"GPT-4o\" },\n { id: \"claude-opus-4-20250514\", name: \"Claude 4 Opus\" },\n];\n\nconst InputDemo = () => {\n const [text, setText] = useState(\"\");\n const [model, setModel] = useState(models[0].id);\n const [useWebSearch, setUseWebSearch] = useState(false);\n\n const { messages, status, sendMessage } = useChat();\n\n const handleSubmit = (message: PromptInputMessage) => {\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n sendMessage(\n {\n text: message.text || \"Sent with attachments\",\n files: message.files,\n },\n {\n body: {\n model: model,\n webSearch: useWebSearch,\n },\n },\n );\n setText(\"\");\n };\n\n return (\n

\n \n \n {messages.map((message) => (\n \n \n {message.parts.map((part, i) => {\n switch (part.type) {\n case \"text\":\n return (\n \n {part.text}\n \n );\n default:\n return null;\n }\n })}\n \n \n ))}\n \n \n \n\n \n \n \n \n \n setText(e.target.value)}\n value={text}\n />\n \n \n \n \n \n \n \n \n \n setUseWebSearch(!useWebSearch)}\n tooltip={{ content: \"Search the web\", shortcut: \"⌘K\" }}\n variant={useWebSearch ? \"default\" : \"ghost\"}\n >\n \n Search\n \n {\n setModel(value);\n }}\n value={model}\n >\n \n \n \n \n {models.map((model) => (\n \n {model.name}\n \n ))}\n \n \n \n \n \n \n

\n );\n};\n\nexport default InputDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/chat/route.ts\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const {\n model,\n messages,\n webSearch,\n }: {\n messages: UIMessage[];\n model: string;\n webSearch?: boolean;\n } = await req.json();\n\n const result = streamText({\n model: webSearch ? \"perplexity/sonar\" : model,\n messages: await convertToModelMessages(messages),\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\n## Features\n\n- Auto-resizing textarea that adjusts height based on content\n- File attachment support with drag-and-drop\n- Image preview for image attachments\n- Configurable file constraints (max files, max size, accepted types)\n- Automatic submit button icons based on status\n- Support for keyboard shortcuts (Enter to submit, Shift+Enter for new line)\n- Customizable min/max height for the textarea\n- Flexible toolbar with support for custom actions and tools\n- Built-in model selection dropdown\n- Built-in native speech recognition button (Web Speech API)\n- Optional provider for lifted state management\n- Form automatically resets on submit\n- Responsive design with mobile-friendly controls\n- Clean, modern styling with customizable themes\n- Form-based submission handling\n- Hidden file input sync for native form posts\n- Global document drop support (opt-in)\n\n## Examples\n\n### Cursor style\n\nSee `scripts/prompt-input-cursor.tsx` for this example.\n\n### Button tooltips\n\nButtons can display tooltips with optional keyboard shortcut hints. Hover over\nthe buttons below to see the tooltips.\n\nSee `scripts/prompt-input-tooltip.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------------- | --------------------------------------------------------- | ------- | ---------------------------------------------------------------------- |\n| `onSubmit` | `(message: PromptInputMessage, event: FormEvent) => void` | - | Handler called when the form is submitted with message text and files. |\n| `accept` | `string` | - | File types to accept (e.g., |\n| `multiple` | `boolean` | - | Whether to allow multiple file selection. |\n| `globalDrop` | `boolean` | - | When true, accepts file drops anywhere on the document. |\n| `syncHiddenInput` | `boolean` | - | Render a hidden input with given name for native form posts. |\n| `maxFiles` | `number` | - | Maximum number of files allowed. |\n| `maxFileSize` | `number` | - | Maximum file size in bytes. |\n| `onError` | `(err: { code:` | - | Handler for file validation errors. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root form element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Textarea component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the toolbar div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | -------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the tools div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------ |\n| `tooltip` | `string | { content: ReactNode; shortcut?: string; side?: ` | - |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n#### Tooltip Examples\n\n```tsx\n// Simple string tooltip\n\n \n\n\n// Tooltip with keyboard shortcut hint\n\n \n\n\n// Tooltip with custom position\n\n \n\n```\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `status` | `ChatStatus` | - | Current chat status to determine button icon (submitted, streaming, error). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Select component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectValue component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the body div. |\n\n### Attachments\n\nAttachment components have been moved to a separate module. See the\n[Attachment](/components/attachment) component documentation for details on\n``, ``, ``,\n``, and ``.\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenu component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `label` | `string` | - | Label for the menu item. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------- | ----------------- | ------- | --------------------------------------------------------------- |\n| `initialInput` | `string` | - | Initial text input value. |\n| `children` | `React.ReactNode` | - | Child components that will have access to the provider context. |\n\nOptional global provider that lifts PromptInput state outside of PromptInput.\nWhen used, it allows you to access and control the input state from anywhere\nwithin the provider tree. If not used, PromptInput stays fully self-managed.\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `...props` | `Omit,` | - | Any other props (except align) are spread to the InputGroupAddon component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------ | ---------------------------------------- | ------- | ------------------------------------------------------ |\n| `openDelay` | `number` | `0` | Delay in milliseconds before opening. |\n| `closeDelay` | `number` | `0` | Delay in milliseconds before closing. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the HoverCard component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the HoverCardTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `align` | `unknown` | - | Alignment of the hover card content. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the HoverCardContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | --------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the h3 element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Command component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandInput component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandList component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandEmpty component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandGroup component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandSeparator component. |\n\n## Hooks\n\n### `usePromptInputAttachments`\n\nAccess and manage file attachments within a PromptInput context.\n\n```tsx\nconst attachments = usePromptInputAttachments();\n\n// Available methods:\nattachments.files; // Array of current attachments\nattachments.add(files); // Add new files\nattachments.remove(id); // Remove an attachment by ID\nattachments.clear(); // Clear all attachments\nattachments.openFileDialog(); // Open file selection dialog\n```\n\n### `usePromptInputController`\n\nAccess the full PromptInput controller from a PromptInputProvider. Only\navailable when using the provider.\n\n```tsx\nconst controller = usePromptInputController();\n\n// Available methods:\ncontroller.textInput.value; // Current text input value\ncontroller.textInput.setInput(value); // Set text input value\ncontroller.textInput.clear(); // Clear text input\ncontroller.attachments; // Same as usePromptInputAttachments\n```\n\n### `useProviderAttachments`\n\nAccess attachments context from a PromptInputProvider. Only available when using\nthe provider.\n\n```tsx\nconst attachments = useProviderAttachments();\n\n// Same interface as usePromptInputAttachments\n```\n\n### `usePromptInputReferencedSources`\n\nAccess referenced sources context within a PromptInput.\n\n```tsx\nconst sources = usePromptInputReferencedSources();\n\n// Available methods:\nsources.sources; // Array of current referenced sources\nsources.add(sources); // Add new source(s)\nsources.remove(id); // Remove a source by ID\nsources.clear(); // Clear all sources\n```\n",[],[161,180,187,194,463],{"_106":471,"_97":472,"_162":473,"_164":195,"_165":147,"_166":474,"_168":169,"_108":475,"_102":33,"_171":205,"_173":476,"_174":22,"_175":-5,"_176":477,"_100":478},"d5946ed0-0ddd-11f1-adf3-42dde27851f2","queue.md","d5946f8e-0ddd-11f1-adf3-42dde27851f2",54,["D",1771538184731],"# Queue\n\nA comprehensive queue component system for displaying message lists, todos, and\ncollapsible task sections in AI applications.\n\nThe `Queue` component provides a flexible system for displaying lists of\nmessages, todos, attachments, and collapsible sections. Perfect for showing AI\nworkflow progress, pending tasks, message history, or any structured list of\nitems in your application.\n\nSee `scripts/queue.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add queue\n```\n\n## Features\n\n- Flexible component system with composable parts\n- Collapsible sections with smooth animations\n- Support for completed/pending state indicators\n- Built-in scroll area for long lists\n- Attachment display with images and file indicators\n- Hover-revealed action buttons for queue items\n- TypeScript support with comprehensive type definitions\n- Customizable styling with Tailwind CSS\n- Responsive design with mobile-friendly interactions\n- Keyboard navigation and accessibility support\n- Theme-aware with automatic dark mode support\n\n## Examples\n\n### With PromptInput\n\nSee `scripts/queue-prompt-input.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `defaultOpen` | `boolean` | `true` | Whether the section is open by default. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the button element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `label` | `string` | - | The label text to display. |\n| `count` | `number` | - | The count to display before the label. |\n| `icon` | `React.ReactNode` | - | An optional icon to display before the count. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the ScrollArea component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | --------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the li element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------------------- |\n| `completed` | `boolean` | `false` | Whether the item is completed. Affects the indicator styling. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------------------------------------------- |\n| `completed` | `boolean` | `false` | Whether the item is completed. Affects text styling with strikethrough and opacity. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ---------------------------------------------------- |\n| `completed` | `boolean` | `false` | Whether the item is completed. Affects text styling. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | ----------------------------------------------------------------------------- |\n| `...props` | `Omit,` | - | Any other props (except variant and size) are spread to the Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the img element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n## Type Exports\n\n### `QueueMessagePart`\n\nInterface for message parts within queue messages.\n\n```tsx\ninterface QueueMessagePart {\n type: string;\n text?: string;\n url?: string;\n filename?: string;\n mediaType?: string;\n}\n```\n\n### `QueueMessage`\n\nInterface for queue message items.\n\n```tsx\ninterface QueueMessage {\n id: string;\n parts: QueueMessagePart[];\n}\n```\n\n### `QueueTodo`\n\nInterface for todo items in the queue.\n\n```tsx\ninterface QueueTodo {\n id: string;\n title: string;\n description?: string;\n status?: \"pending\" | \"completed\";\n}\n```\n",[],[161,180,187,194,472],{"_106":480,"_97":481,"_162":482,"_164":195,"_165":147,"_166":483,"_168":169,"_108":484,"_102":33,"_171":205,"_173":485,"_174":22,"_175":-5,"_176":486,"_100":487},"d5085c6a-0ddd-11f1-affc-42dde27851f2","reasoning.md","d5085d00-0ddd-11f1-affc-42dde27851f2",28,["D",1771538183806],"# Reasoning\n\nA collapsible component that displays AI reasoning content, automatically\nopening during streaming and closing when finished.\n\nThe `Reasoning` component displays AI reasoning content, automatically opening\nduring streaming and closing when finished.\n\nSee `scripts/reasoning.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add reasoning\n```\n\n## Usage with AI SDK\n\nBuild a chatbot with reasoning using Deepseek R1 or other reasoning models.\n\nSome models (like GPT with high reasoning effort) return multiple reasoning\nparts instead of a single streaming block. The example below consolidates all\nreasoning parts into a single component to avoid displaying multiple\n\"Thinking...\" indicators.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n Reasoning,\n ReasoningContent,\n ReasoningTrigger,\n} from \"@/components/ai-elements/reasoning\";\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport {\n PromptInput,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Spinner } from \"@/components/ui/spinner\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport { useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport type { UIMessage } from \"ai\";\n\nconst MessageParts = ({\n message,\n isLastMessage,\n isStreaming,\n}: {\n message: UIMessage;\n isLastMessage: boolean;\n isStreaming: boolean;\n}) => {\n // Consolidate all reasoning parts into one block\n const reasoningParts = message.parts.filter(\n (part) => part.type === \"reasoning\",\n );\n const reasoningText = reasoningParts.map((part) => part.text).join(\"\\n\\n\");\n const hasReasoning = reasoningParts.length > 0;\n\n // Check if reasoning is still streaming (last part is reasoning on last message)\n const lastPart = message.parts.at(-1);\n const isReasoningStreaming = isLastMessage && isStreaming &&\n lastPart?.type === \"reasoning\";\n\n return (\n <>\n {hasReasoning && (\n \n \n {reasoningText}\n \n )}\n {message.parts.map((part, i) => {\n if (part.type === \"text\") {\n return (\n \n {part.text}\n \n );\n }\n return null;\n })}\n \n );\n};\n\nconst ReasoningDemo = () => {\n const [input, setInput] = useState(\"\");\n\n const { messages, sendMessage, status } = useChat();\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n sendMessage({ text: input });\n setInput(\"\");\n };\n\n const isStreaming = status === \"streaming\";\n\n return (\n

\n \n \n {messages.map((message, index) => (\n \n \n \n \n \n ))}\n {status === \"submitted\" && }\n \n \n \n\n \n setInput(e.currentTarget.value)}\n className=\"pr-12\"\n />\n \n \n

\n );\n};\n\nexport default ReasoningDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/chat/route.ts\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { model, messages }: { messages: UIMessage[]; model: string } =\n await req.json();\n\n const result = streamText({\n model: \"deepseek/deepseek-r1\",\n messages: await convertToModelMessages(messages),\n });\n\n return result.toUIMessageStreamResponse({\n sendReasoning: true,\n });\n}\n```\n\n## Reasoning vs Chain of Thought\n\nUse the `Reasoning` component when your model outputs thinking content as a\nsingle block or continuous stream (Deepseek R1, Claude with extended thinking,\netc.).\n\nIf your model outputs discrete, labeled steps (search queries, tool calls,\ndistinct thought stages), consider using the\n[Chain of Thought](/components/chain-of-thought) component instead for a more\nstructured visual representation.\n\n## Features\n\n- Automatically opens when streaming content and closes when finished\n- Manual toggle control for user interaction\n- Smooth animations and transitions powered by Radix UI\n- Visual streaming indicator with pulsing animation\n- Composable architecture with separate trigger and content components\n- Built with accessibility in mind including keyboard navigation\n- Responsive design that works across different screen sizes\n- Seamlessly integrates with both light and dark themes\n- Built on top of shadcn/ui Collapsible primitives\n- TypeScript support with proper type definitions\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------- | ------------------------------------------ | ------- | ------------------------------------------------------------------------------- |\n| `isStreaming` | `boolean` | `false` | Whether the reasoning is currently streaming (auto-opens and closes the panel). |\n| `open` | `boolean` | - | Controlled open state. |\n| `defaultOpen` | `boolean` | `true` | Default open state when uncontrolled. |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes. |\n| `duration` | `number` | - | Duration in seconds to display (can be controlled externally). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------------- | -------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |\n| `getThinkingMessage` | `(isStreaming: boolean, duration?: number) => ReactNode` | - | Optional function to customize the thinking message. Receives isStreaming and duration parameters. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------------- |\n| `children` | `string` | Required | The reasoning text to display (rendered via Streamdown). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CollapsibleContent component. |\n\n## Hooks\n\n### `useReasoning`\n\nAccess the reasoning context from child components.\n\n```tsx\nconst { isStreaming, isOpen, setIsOpen, duration } = useReasoning();\n```\n\nReturns:\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------- | ---------- | ----------------------------------------- |\n| `isStreaming` | `boolean` | - | Whether reasoning is currently streaming. |\n| `isOpen` | `boolean` | - | Whether the reasoning panel is open. |\n| `setIsOpen` | `(open: boolean) => void` | - | Function to set the open state. |\n| `duration` | `number | undefined` | - |\n",[],[161,180,187,194,481],{"_106":489,"_97":490,"_162":491,"_164":195,"_165":147,"_166":492,"_168":169,"_108":493,"_102":33,"_171":205,"_173":494,"_174":22,"_175":-5,"_176":495,"_100":496},"d51bd290-0ddd-11f1-affc-42dde27851f2","sandbox.md","d51bd344-0ddd-11f1-affc-42dde27851f2",31,["D",1771538183944],"# Sandbox\n\nA collapsible container for displaying AI-generated code and output in chat\ninterfaces.\n\nThe `Sandbox` component provides a structured way to display AI-generated code\nalongside its execution output in chat conversations. It features a collapsible\ncontainer with status indicators and tabbed navigation between code and output\nviews. It's designed to be used with `CodeBlock` for displaying code and\n`StackTrace` for displaying errors.\n\nSee `scripts/sandbox.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add sandbox\n```\n\n## Features\n\n- Collapsible container with smooth animations\n- Status badges showing execution state (Pending, Running, Completed, Error)\n- Tabs for Code and Output views\n- Syntax-highlighted code display\n- Copy button for easy code sharing\n- Works with AI SDK tool state patterns\n\n## Usage with AI SDK\n\nThe Sandbox component integrates with the AI SDK's tool state to show code\ngeneration progress:\n\n```tsx title=\"components/code-sandbox.tsx\"\n\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\nimport {\n Sandbox,\n SandboxContent,\n SandboxHeader,\n SandboxTabContent,\n SandboxTabs,\n SandboxTabsBar,\n SandboxTabsList,\n SandboxTabsTrigger,\n} from \"@/components/ai-elements/sandbox\";\nimport { CodeBlock } from \"@/components/ai-elements/code-block\";\n\ntype CodeSandboxProps = {\n toolPart: ToolUIPart;\n};\n\nexport const CodeSandbox = ({ toolPart }: CodeSandboxProps) => {\n const code = toolPart.input?.code ?? \"\";\n const output = toolPart.output?.logs ?? \"\";\n\n return (\n \n \n \n \n \n \n Code\n Output\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n```\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------- | ----------- | -------------------------------------------------------------------------- |\n| `title` | `string` | `undefined` | The title displayed in the header (e.g., filename). |\n| `state` | `ToolUIPart[` | Required | The current execution state, used to display the appropriate status badge. |\n| `className` | `string` | - | Additional CSS classes for the header. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ----------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------- | ------- | ------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Tabs component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------ |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying TabsList component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying TabsTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying TabsContent component. |\n",[],[161,180,187,194,490],{"_106":498,"_97":499,"_162":500,"_164":195,"_165":147,"_166":501,"_168":169,"_108":502,"_102":33,"_171":205,"_173":503,"_174":22,"_175":-5,"_176":504,"_100":505},"d5ea7334-0ddd-11f1-bf1c-42dde27851f2","schema-display.md","d5ea73fc-0ddd-11f1-bf1c-42dde27851f2",75,["D",1771538185220],"# Schema Display\n\nDisplay REST API endpoint documentation with parameters, request/response\nbodies.\n\nThe `SchemaDisplay` component visualizes REST API endpoints with HTTP methods,\npaths, parameters, and request/response schemas.\n\nSee `scripts/schema-display.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add schema-display\n```\n\n## Features\n\n- Color-coded HTTP methods\n- Path parameter highlighting\n- Collapsible parameters section\n- Request/response body schemas\n- Nested object property display\n- Required field indicators\n\n## Method Colors\n\n| Method | Color |\n| -------- | ------ |\n| `GET` | Green |\n| `POST` | Blue |\n| `PUT` | Orange |\n| `PATCH` | Yellow |\n| `DELETE` | Red |\n\n## Examples\n\n### Basic Usage\n\nSee `scripts/schema-display-basic.tsx` for this example.\n\n### With Parameters\n\nSee `scripts/schema-display-params.tsx` for this example.\n\n### With Request/Response Bodies\n\nSee `scripts/schema-display-body.tsx` for this example.\n\n### Nested Properties\n\nSee `scripts/schema-display-nested.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------- | ------------------- | ------- | ------------------------- |\n| `method` | `unknown` | - | HTTP method. |\n| `path` | `string` | - | API endpoint path. |\n| `description` | `string` | - | Endpoint description. |\n| `parameters` | `SchemaParameter[]` | - | URL/query parameters. |\n| `requestBody` | `SchemaProperty[]` | - | Request body properties. |\n| `responseBody` | `SchemaProperty[]` | - | Response body properties. |\n\n### `SchemaParameter`\n\n```tsx\ninterface SchemaParameter {\n name: string;\n type: string;\n required?: boolean;\n description?: string;\n location?: \"path\" | \"query\" | \"header\";\n}\n```\n\n### `SchemaProperty`\n\n```tsx\ninterface SchemaProperty {\n name: string;\n type: string;\n required?: boolean;\n description?: string;\n properties?: SchemaProperty[]; // For objects\n items?: SchemaProperty; // For arrays\n}\n```\n\n### Subcomponents\n\n- `SchemaDisplayHeader` - Header container\n- `SchemaDisplayMethod` - Color-coded method badge\n- `SchemaDisplayPath` - Path with highlighted parameters\n- `SchemaDisplayDescription` - Description text\n- `SchemaDisplayContent` - Content container\n- `SchemaDisplayParameters` - Collapsible parameters section\n- `SchemaDisplayParameter` - Individual parameter\n- `SchemaDisplayRequest` - Collapsible request body\n- `SchemaDisplayResponse` - Collapsible response body\n- `SchemaDisplayProperty` - Schema property (recursive)\n- `SchemaDisplayExample` - Code example block\n",[],[161,180,187,194,499],{"_106":507,"_97":508,"_162":509,"_164":195,"_165":147,"_166":510,"_168":169,"_108":511,"_102":33,"_171":205,"_173":512,"_174":22,"_175":-5,"_176":513,"_100":514},"d50e0296-0ddd-11f1-affc-42dde27851f2","shimmer.md","d50e037c-0ddd-11f1-affc-42dde27851f2",29,["D",1771538183853],"# Shimmer\n\nAn animated text shimmer component for creating eye-catching loading states and\nprogressive reveal effects.\n\nThe `Shimmer` component provides an animated shimmer effect that sweeps across\ntext, perfect for indicating loading states, progressive reveals, or drawing\nattention to dynamic content in AI applications.\n\nSee `scripts/shimmer.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add shimmer\n```\n\n## Features\n\n- Smooth animated shimmer effect using CSS gradients and Framer Motion\n- Customizable animation duration and spread\n- Polymorphic component - render as any HTML element via the `as` prop\n- Automatic spread calculation based on text length\n- Theme-aware styling using CSS custom properties\n- Infinite looping animation with linear easing\n- TypeScript support with proper type definitions\n- Memoized for optimal performance\n- Responsive and accessible design\n- Uses `text-transparent` with background-clip for crisp text rendering\n\n## Examples\n\n### Different Durations\n\nSee `scripts/shimmer-duration.tsx` for this example.\n\n### Custom Elements\n\nSee `scripts/shimmer-elements.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------- | ------- | -------------------------------------------------------------------------- |\n| `children` | `string` | - | The text content to apply the shimmer effect to. |\n| `as` | `ElementType` | - | The HTML element or React component to render. |\n| `className` | `string` | - | Additional CSS classes to apply to the component. |\n| `duration` | `number` | `2` | The duration of the shimmer animation in seconds. |\n| `spread` | `number` | `2` | The spread multiplier for the shimmer gradient, multiplied by text length. |\n",[],[161,180,187,194,508],{"_106":516,"_97":517,"_162":518,"_164":195,"_165":147,"_166":519,"_168":169,"_108":520,"_102":33,"_171":205,"_173":521,"_174":22,"_175":-5,"_176":522,"_100":523},"d5d38110-0ddd-11f1-9539-42dde27851f2","snippet.md","d5d381ec-0ddd-11f1-9539-42dde27851f2",70,["D",1771538185112],"# Snippet\n\nLightweight inline code display for terminal commands and short code references.\n\nThe `Snippet` component provides a lightweight way to display terminal commands\nand short code snippets with copy functionality. Built on top of InputGroup,\nit's designed for brief code references in text.\n\nSee `scripts/snippet.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add snippet\n```\n\n## Features\n\n- Composable architecture with InputGroup\n- Optional prefix text (e.g., `$` for terminal commands)\n- Built-in copy button\n- Compact design for chat/markdown\n\n## Examples\n\n### Without Prefix\n\nSee `scripts/snippet-plain.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | -------- | ---------------------------------------------------- |\n| `code` | `string` | Required | The code content to display. |\n| `children` | `React.ReactNode` | - | Child elements like SnippetAddon, SnippetInput, etc. |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroup component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ---------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroupAddon component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------------- | ------- | --------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroupText component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |\n| `...props` | `Omit,` | - | Spread to the InputGroupInput component. Value and readOnly are set automatically. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ----------------------------------------- |\n| `onCopy` | `() => void` | - | Callback fired after a successful copy. |\n| `onError` | `(error: Error) => void` | - | Callback fired if copying fails. |\n| `timeout` | `number` | `2000` | How long to show the copied state (ms). |\n| `children` | `React.ReactNode` | - | Custom button content. |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroupButton component. |\n",[],[161,180,187,194,517],{"_106":525,"_97":526,"_162":527,"_164":195,"_165":147,"_166":528,"_168":169,"_108":529,"_102":33,"_171":205,"_173":530,"_174":22,"_175":-5,"_176":531,"_100":532},"d5423d5e-0ddd-11f1-a0cd-42dde27851f2","sources.md","d5423e26-0ddd-11f1-a0cd-42dde27851f2",38,["D",1771538184181],"# Sources\n\nA component that allows a user to view the sources or citations used to generate\na response.\n\nThe `Sources` component allows a user to view the sources or citations used to\ngenerate a response.\n\nSee `scripts/sources.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add sources\n```\n\n## Usage with AI SDK\n\nBuild a simple web search agent with Perplexity Sonar.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n Source,\n Sources,\n SourcesContent,\n SourcesTrigger,\n} from \"@/components/ai-elements/sources\";\nimport {\n Input,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport { useState } from \"react\";\nimport { DefaultChatTransport } from \"ai\";\n\nconst SourceDemo = () => {\n const [input, setInput] = useState(\"\");\n const { messages, sendMessage, status } = useChat({\n transport: new DefaultChatTransport({\n api: \"/api/sources\",\n }),\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim()) {\n sendMessage({ text: input });\n setInput(\"\");\n }\n };\n\n return (\n

\n \n \n {messages.map((message) => (\n

\n {message.role === \"assistant\" && (\n \n part.type === \"source-url\",\n ).length}\n />\n {message.parts.map((part, i) => {\n switch (part.type) {\n case \"source-url\":\n return (\n \n \n \n );\n }\n })}\n \n )}\n \n \n {message.parts.map((part, i) => {\n switch (part.type) {\n case \"text\":\n return (\n \n {part.text}\n \n );\n default:\n return null;\n }\n })}\n \n \n

\n ))}\n \n \n \n

\n\n \n setInput(e.currentTarget.value)}\n className=\"pr-12\"\n />\n \n \n

\n );\n};\n\nexport default SourceDemo;\n```\n\nAdd the following route to your backend:\n\n```tsx title=\"api/chat/route.ts\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\nimport { perplexity } from \"@ai-sdk/perplexity\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { messages }: { messages: UIMessage[] } = await req.json();\n\n const result = streamText({\n model: \"perplexity/sonar\",\n system:\n \"You are a helpful assistant. Keep your responses short (< 100 words) unless you are asked for more details. ALWAYS USE SEARCH.\",\n messages: await convertToModelMessages(messages),\n });\n\n return result.toUIMessageStreamResponse({\n sendSources: true,\n });\n}\n```\n\n## Features\n\n- Collapsible component that allows a user to view the sources or citations used\n to generate a response\n- Customizable trigger and content components\n- Support for custom sources or citations\n- Responsive design with mobile-friendly controls\n- Clean, modern styling with customizable themes\n\n## Examples\n\n### Custom rendering\n\nSee `scripts/sources-custom.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- |\n| `count` | `number` | Required | The number of sources to display in the trigger. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the content container. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.AnchorHTMLAttributes` | - | Any other props are spread to the anchor element. |\n",[],[161,180,187,194,526],{"_106":534,"_97":535,"_162":536,"_164":195,"_165":147,"_166":537,"_168":169,"_108":538,"_102":33,"_171":205,"_173":539,"_174":22,"_175":-5,"_176":540,"_100":541},"d5824d7c-0ddd-11f1-b72b-42dde27851f2","speech-input.md","d5824e62-0ddd-11f1-b72b-42dde27851f2",50,["D",1771538184603],"# Speech Input\n\nA button component that captures voice input and converts it to text, with\ncross-browser support.\n\nThe `SpeechInput` component provides an easy-to-use interface for capturing\nvoice input in your application. It uses the Web Speech API for real-time\ntranscription in supported browsers (Chrome, Edge), and falls back to\nMediaRecorder with an external transcription service for browsers that don't\nsupport Web Speech API (Firefox, Safari).\n\nSee `scripts/speech-input.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add speech-input\n```\n\n## Features\n\n- Built on Web Speech API (SpeechRecognition) with MediaRecorder fallback\n- Cross-browser support (Chrome, Edge, Firefox, Safari)\n- Continuous speech recognition with interim results\n- Visual feedback with pulse animation when listening\n- Loading state during transcription processing\n- Automatic browser compatibility detection\n- Final transcript extraction and callbacks\n- Error handling and automatic state management\n- Extends shadcn/ui Button component\n- Full TypeScript support\n\n## Props\n\n### ``\n\nThe component extends the shadcn/ui Button component, so all Button props are\navailable.\n\n| Prop | Type | Default | Description |\n| ----------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onTranscriptionChange` | `(text: string) => void` | - | Callback fired when final transcription text is available. Only fires for completed phrases, not interim results. |\n| `onAudioRecorded` | `(audioBlob: Blob) => Promise` | - | Callback for MediaRecorder fallback. Required for Firefox/Safari support. Receives recorded audio blob and should return transcribed text from an external service (e.g., OpenAI Whisper). |\n| `lang` | `string` | - | Language for speech recognition. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component, including variant, size, disabled, etc. |\n\n## Behavior\n\n### Speech Recognition Modes\n\nThe component automatically detects browser capabilities and uses the best\navailable method:\n\n| Browser | Mode | Behavior |\n| --------------- | -------------- | ------------------------------------------------------ |\n| Chrome, Edge | Web Speech API | Real-time transcription, no server required |\n| Firefox, Safari | MediaRecorder | Records audio, sends to external transcription service |\n| Unsupported | Disabled | Button is disabled |\n\n### Web Speech API Mode (Chrome, Edge)\n\nUses the Web Speech API with the following configuration:\n\n- **Continuous**: Set to `true` to keep recognition active until manually\n stopped\n- **Interim Results**: Set to `true` to receive partial results during speech\n- **Language**: Configurable via `lang` prop, defaults to `\"en-US\"`\n\n### MediaRecorder Mode (Firefox, Safari)\n\nWhen the Web Speech API is unavailable, the component falls back to recording\naudio:\n\n1. Records audio using `MediaRecorder` API\n2. On stop, creates an audio blob (`audio/webm`)\n3. Calls `onAudioRecorded` with the blob\n4. Waits for transcription result\n5. Passes result to `onTranscriptionChange`\n\n**Note**: The `onAudioRecorded` prop is required for this mode to work. Without\nit, the button will be disabled in Firefox/Safari.\n\n### Transcription Processing\n\nThe component only calls `onTranscriptionChange` with **final transcripts**.\nInterim results (Web Speech API) are ignored to prevent incomplete text from\nbeing processed.\n\n### Visual States\n\n- **Default State**: Standard button appearance with microphone icon\n- **Listening State**: Pulsing animation with accent colors to indicate active\n listening\n- **Processing State**: Loading spinner while waiting for transcription\n (MediaRecorder mode)\n- **Disabled State**: Button is disabled when no API is available or required\n props are missing\n\n### Lifecycle\n\n1. **Mount**: Detects available APIs and initializes appropriate mode\n2. **Click**: Toggles between listening/recording and stopped states\n3. **Stop (MediaRecorder)**: Processes audio and waits for transcription\n4. **Unmount**: Stops recognition/recording and releases microphone\n\n## Browser Support\n\nThe component provides cross-browser support through a two-tier system:\n\n| Browser | API Used | Requirements |\n| ------- | -------------- | ---------------------- |\n| Chrome | Web Speech API | None |\n| Edge | Web Speech API | None |\n| Firefox | MediaRecorder | `onAudioRecorded` prop |\n| Safari | MediaRecorder | `onAudioRecorded` prop |\n\nFor full cross-browser support, provide the `onAudioRecorded` callback that\nsends audio to a transcription service like OpenAI Whisper, Google Cloud\nSpeech-to-Text, or AssemblyAI.\n\n## Accessibility\n\n- Uses semantic button element via shadcn/ui Button\n- Visual feedback for listening state\n- Keyboard accessible (can be triggered with Space/Enter)\n- Screen reader friendly with proper button semantics\n\n## Usage with MediaRecorder Fallback\n\nTo support Firefox and Safari, provide an `onAudioRecorded` callback that sends\naudio to a transcription service:\n\n```tsx\nconst handleAudioRecorded = async (audioBlob: Blob): Promise => {\n const formData = new FormData();\n formData.append(\"file\", audioBlob, \"audio.webm\");\n formData.append(\"model\", \"whisper-1\");\n\n const response = await fetch(\n \"https://api.openai.com/v1/audio/transcriptions\",\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,\n },\n body: formData,\n },\n );\n\n const data = await response.json();\n return data.text;\n};\n\n console.log(text)}\n onAudioRecorded={handleAudioRecorded}\n/>;\n```\n\n## Notes\n\n- Requires a secure context (HTTPS or localhost)\n- Browser may prompt user for microphone permission\n- Only final transcripts trigger the `onTranscriptionChange` callback\n- Language is configurable via the `lang` prop\n- Continuous recognition continues until button is clicked again\n- Errors are logged to console and automatically stop recognition/recording\n- MediaRecorder fallback requires the `onAudioRecorded` prop to be provided\n- Audio is recorded in `audio/webm` format for the MediaRecorder fallback\n\n## TypeScript\n\nThe component includes full TypeScript definitions for the Web Speech API:\n\n- `SpeechRecognition`\n- `SpeechRecognitionEvent`\n- `SpeechRecognitionResult`\n- `SpeechRecognitionAlternative`\n- `SpeechRecognitionErrorEvent`\n\nThese types are properly declared for both standard and webkit-prefixed\nimplementations.\n",[],[161,180,187,194,535],{"_106":543,"_97":544,"_162":545,"_164":195,"_165":147,"_166":546,"_168":169,"_108":547,"_102":33,"_171":205,"_173":548,"_174":22,"_175":-5,"_176":549,"_100":550},"d56a9c68-0ddd-11f1-a690-42dde27851f2","stack-trace.md","d56a9d44-0ddd-11f1-a690-42dde27851f2",46,["D",1771538184418],"# Stack Trace\n\nDisplays formatted JavaScript/Node.js error stack traces with syntax\nhighlighting and collapsible frames.\n\nThe `StackTrace` component displays formatted JavaScript/Node.js error stack\ntraces with clickable file paths, internal frame dimming, and collapsible\ncontent.\n\nSee `scripts/stack-trace.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add stack-trace\n```\n\n## Usage with AI SDK\n\nBuild an error display tool that shows stack traces from AI-generated code using\nthe [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nexport default function Page() {\n const { messages } = useChat({\n api: \"/api/run-code\",\n });\n\n return (\n

\n {messages.map((message) => {\n const toolInvocations = message.parts?.filter(\n (part) => part.type === \"tool-invocation\",\n );\n\n return toolInvocations?.map((tool) => {\n if (tool.toolName === \"runCode\" && tool.result?.error) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n return null;\n });\n })}\n

\n );\n}\n```\n\nAdd the following route to your backend:\n\n```tsx title=\"api/run-code/route.ts\"\nimport { streamText, tool } from \"ai\";\nimport { z } from \"zod\";\n\nexport async function POST(req: Request) {\n const { messages } = await req.json();\n\n const result = streamText({\n model: \"openai/gpt-4o\",\n messages,\n tools: {\n runCode: tool({\n description: \"Execute JavaScript code and return any errors\",\n parameters: z.object({\n code: z.string(),\n }),\n execute: async ({ code }) => {\n try {\n // Execute code in sandbox\n eval(code);\n return { success: true };\n } catch (error) {\n return { error: (error as Error).stack };\n }\n },\n }),\n },\n });\n\n return result.toDataStreamResponse();\n}\n```\n\n## Features\n\n- Parses standard JavaScript/Node.js stack trace format\n- Highlights error type in red\n- Dims internal frames (node_modules, node: paths)\n- Collapsible content with smooth animation\n- Copy full stack trace to clipboard\n- Clickable file paths with line/column numbers\n\n## Examples\n\n### Collapsed by Default\n\nSee `scripts/stack-trace-collapsed.tsx` for this example.\n\n### Hide Internal Frames\n\nSee `scripts/stack-trace-no-internal.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------------- | -------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------- |\n| `trace` | `string` | - | The raw stack trace string to parse and display. |\n| `open` | `boolean` | - | Controlled open state. |\n| `defaultOpen` | `boolean` | `false` | Whether the content is expanded by default. |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes. |\n| `onFilePathClick` | `(path: string, line?: number, column?: number) => void` | - | Callback when a file path is clicked. Receives the file path, line number, and column number. |\n| `children` | `React.ReactNode` | - | Child elements (StackTraceHeader, StackTraceContent, etc.). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Header content (typically StackTraceError and StackTraceActions). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------- | ------- | ------------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Error content (typically StackTraceErrorType and StackTraceErrorMessage). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | --------------------------------------- | ------- | -------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom content. Defaults to the parsed error type (e.g., |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | --------------------------------------- | ------- | ----------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom content. Defaults to the parsed error message. |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Action buttons (typically StackTraceCopyButton and StackTraceExpandButton). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `onCopy` | `() => void` | - | Callback fired after a successful copy. |\n| `onError` | `(error: Error) => void` | - | Callback fired if copying fails. |\n| `timeout` | `number` | `2000` | How long to show the copied state (ms). |\n| `children` | `React.ReactNode` | - | Custom content for the button. Defaults to copy/check icons. |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------- | ------- | ------------------------------------------------ |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |\n| `maxHeight` | `number` | `400` | Maximum height of the content area. Enables scrolling when content exceeds this height. |\n| `children` | `React.ReactNode` | - | Content to display (typically StackTraceFrames). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------------- | -------------------------------------- | ------- | ------------------------------------------------------------ |\n| `showInternalFrames` | `boolean` | `true` | Whether to show internal frames (node_modules, node: paths). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n",[],[161,180,187,194,544],{"_106":552,"_97":553,"_162":554,"_164":195,"_165":147,"_166":555,"_168":169,"_108":556,"_102":33,"_171":205,"_173":557,"_174":22,"_175":-5,"_176":558,"_100":559},"d58a3762-0ddd-11f1-adf3-42dde27851f2","suggestion.md","d58a3852-0ddd-11f1-adf3-42dde27851f2",52,["D",1771538184653],"# Suggestion\n\nA suggestion component that displays a horizontal row of clickable suggestions\nfor user interaction.\n\nThe `Suggestion` component displays a horizontal row of clickable suggestions\nfor user interaction.\n\nSee `scripts/suggestion.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add suggestion\n```\n\n## Usage with AI SDK\n\nBuild a simple input with suggestions users can click to send a message to the\nLLM.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n Input,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Suggestion, Suggestions } from \"@/components/ai-elements/suggestion\";\nimport { useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\n\nconst suggestions = [\n \"Can you explain how to play tennis?\",\n \"What is the weather in Tokyo?\",\n \"How do I make a really good fish taco?\",\n];\n\nconst SuggestionDemo = () => {\n const [input, setInput] = useState(\"\");\n const { sendMessage, status } = useChat();\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim()) {\n sendMessage({ text: input });\n setInput(\"\");\n }\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n sendMessage({ text: suggestion });\n };\n\n return (\n

\n \n {suggestions.map((suggestion) => (\n \n ))}\n \n \n setInput(e.currentTarget.value)}\n className=\"pr-12\"\n />\n \n \n

\n );\n};\n\nexport default SuggestionDemo;\n```\n\n## Features\n\n- Horizontal row of clickable suggestion buttons\n- Customizable styling with variant and size options\n- Flexible layout that wraps suggestions on smaller screens\n- onClick callback that emits the selected suggestion string\n- Support for both individual suggestions and suggestion lists\n- Clean, modern styling with hover effects\n- Responsive design with mobile-friendly touch targets\n- TypeScript support with proper type definitions\n\n## Examples\n\n### Usage with AI Input\n\nSee `scripts/suggestion-input.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying ScrollArea component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------ | ------------------------------------------- | -------- | ------------------------------------------------------------------------ |\n| `suggestion` | `string` | Required | The suggestion string to display and emit on click. |\n| `onClick` | `(suggestion: string) => void` | - | Callback fired when the suggestion is clicked. |\n| `...props` | `Omit,` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n",[],[161,180,187,194,553],{"_106":561,"_97":562,"_162":563,"_164":195,"_165":147,"_166":564,"_168":169,"_108":565,"_102":33,"_171":205,"_173":566,"_174":22,"_175":-5,"_176":567,"_100":568},"d5ab951a-0ddd-11f1-9539-42dde27851f2","task.md","d5ab95ec-0ddd-11f1-9539-42dde27851f2",60,["D",1771538184885],"# Task\n\nA collapsible task list component for displaying AI workflow progress, with\nstatus indicators and optional descriptions.\n\nThe `Task` component provides a structured way to display task lists or workflow\nprogress with collapsible details, status indicators, and progress tracking. It\nconsists of a main `Task` container with `TaskTrigger` for the clickable header\nand `TaskContent` for the collapsible content area.\n\nSee `scripts/task.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add task\n```\n\n## Usage with AI SDK\n\nBuild a mock async programming agent using\n[`experimental_generateObject`](/docs/reference/ai-sdk-ui/use-object).\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { experimental_useObject as useObject } from \"@ai-sdk/react\";\nimport {\n Task,\n TaskContent,\n TaskItem,\n TaskItemFile,\n TaskTrigger,\n} from \"@/components/ai-elements/task\";\nimport { Button } from \"@/components/ui/button\";\nimport { tasksSchema } from \"@/app/api/task/route\";\nimport {\n SiCss,\n SiHtml5,\n SiJavascript,\n SiJson,\n SiMarkdown,\n SiReact,\n SiTypescript,\n} from \"@icons-pack/react-simple-icons\";\n\nconst iconMap = {\n react: { component: SiReact, color: \"#149ECA\" },\n typescript: { component: SiTypescript, color: \"#3178C6\" },\n javascript: { component: SiJavascript, color: \"#F7DF1E\" },\n css: { component: SiCss, color: \"#1572B6\" },\n html: { component: SiHtml5, color: \"#E34F26\" },\n json: { component: SiJson, color: \"#000000\" },\n markdown: { component: SiMarkdown, color: \"#000000\" },\n};\n\nconst TaskDemo = () => {\n const { object, submit, isLoading } = useObject({\n api: \"/api/agent\",\n schema: tasksSchema,\n });\n\n const handleSubmit = (taskType: string) => {\n submit({ prompt: taskType });\n };\n\n const renderTaskItem = (item: any, index: number) => {\n if (item?.type === \"file\" && item.file) {\n const iconInfo = iconMap[item.file.icon as keyof typeof iconMap];\n if (iconInfo) {\n const IconComponent = iconInfo.component;\n return (\n \n {item.text}\n \n \n {item.file.name}\n \n \n );\n }\n }\n return item?.text || \"\";\n };\n\n return (\n

\n handleSubmit(\"React component development\")}\n disabled={isLoading}\n variant=\"outline\"\n >\n React Development\n \n

\n\n

\n {isLoading && !object && (\n

Generating tasks...

\n )}\n\n {object?.tasks?.map((task: any, taskIndex: number) => (\n \n \n \n {task.items?.map((item: any, itemIndex: number) => (\n \n {renderTaskItem(item, itemIndex)}\n \n ))}\n \n \n ))}\n

\n );\n};\n\nexport default TaskDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/agent.ts\"\nimport { streamObject } from \"ai\";\nimport { z } from \"zod\";\n\nexport const taskItemSchema = z.object({\n type: z.enum([\"text\", \"file\"]),\n text: z.string(),\n file: z\n .object({\n name: z.string(),\n icon: z.string(),\n color: z.string().optional(),\n })\n .optional(),\n});\n\nexport const taskSchema = z.object({\n title: z.string(),\n items: z.array(taskItemSchema),\n status: z.enum([\"pending\", \"in_progress\", \"completed\"]),\n});\n\nexport const tasksSchema = z.object({\n tasks: z.array(taskSchema),\n});\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { prompt } = await req.json();\n\n const result = streamObject({\n model: \"openai/gpt-4o\",\n schema: tasksSchema,\n prompt:\n `You are an AI assistant that generates realistic development task workflows. Generate a set of tasks that would occur during ${prompt}.\n\n Each task should have:\n - A descriptive title\n - Multiple task items showing the progression\n - Some items should be plain text, others should reference files\n - Use realistic file names and appropriate file types\n - Status should progress from pending to in_progress to completed\n\n For file items, use these icon types: 'react', 'typescript', 'javascript', 'css', 'html', 'json', 'markdown'\n\n Generate 3-4 tasks total, with 4-6 items each.`,\n });\n\n return result.toTextStreamResponse();\n}\n```\n\n## Features\n\n- Visual icons for pending, in-progress, completed, and error states\n- Expandable content for task descriptions and additional information\n- Built-in progress counter showing completed vs total tasks\n- Optional progressive reveal of tasks with customizable timing\n- Support for custom content within task items\n- Full type safety with proper TypeScript definitions\n- Keyboard navigation and screen reader support\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------ | ------- | ------------------------------------------------------------- |\n| `defaultOpen` | `boolean` | `true` | Whether the task is open by default. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the root Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- |\n| `title` | `string` | Required | The title of the task that will be displayed in the trigger. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n",[],[161,180,187,194,562],{"_106":570,"_97":571,"_162":572,"_164":195,"_165":147,"_166":573,"_168":169,"_108":574,"_102":33,"_171":205,"_173":575,"_174":22,"_175":-5,"_176":576,"_100":577},"d5b215e8-0ddd-11f1-8b80-42dde27851f2","terminal.md","d5b216a6-0ddd-11f1-8b80-42dde27851f2",62,["D",1771538184603],"# Terminal\n\nDisplay streaming console output with full ANSI color support.\n\nThe `Terminal` component displays console output with ANSI color support,\nstreaming indicators, and auto-scroll functionality.\n\nSee `scripts/terminal.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add terminal\n```\n\n## Features\n\n- Full ANSI color support (256 colors, bold, italic, underline)\n- Streaming mode with cursor animation\n- Auto-scroll to latest output\n- Copy output to clipboard\n- Clear button support\n- Dark terminal theme\n\n## ANSI Support\n\nThe Terminal uses `ansi-to-react` to parse ANSI escape codes:\n\n```bash\n\\x1b[32m✓\\x1b[0m Success # Green checkmark\n\\x1b[31m✗\\x1b[0m Error # Red X\n\\x1b[33mwarn\\x1b[0m Warning # Yellow text\n\\x1b[1mBold\\x1b[0m # Bold text\n```\n\n## Examples\n\n### Basic Usage\n\nSee `scripts/terminal-basic.tsx` for this example.\n\n### Streaming Mode\n\nSee `scripts/terminal-streaming.tsx` for this example.\n\n### With Clear Button\n\nSee `scripts/terminal-clear.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------ | ------- | ------------------------------------------------ |\n| `output` | `string` | - | Terminal output text (supports ANSI codes). |\n| `isStreaming` | `boolean` | `false` | Show streaming indicator. |\n| `autoScroll` | `boolean` | `true` | Auto-scroll to bottom on new output. |\n| `onClear` | `() => void` | - | Callback to clear output (enables clear button). |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| --------- | ------------------------ | ------- | ----------------------------------- |\n| `onCopy` | `() => void` | - | Callback after successful copy. |\n| `onError` | `(error: Error) => void` | - | Callback if copying fails. |\n| `timeout` | `number` | `2000` | Duration to show copied state (ms). |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | --------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n",[],[161,180,187,194,571],{"_106":579,"_97":580,"_162":581,"_164":195,"_165":147,"_166":582,"_168":169,"_108":583,"_102":33,"_171":205,"_173":584,"_174":22,"_175":-5,"_176":585,"_100":586},"d5a5199c-0ddd-11f1-b67a-42dde27851f2","test-results.md","d5a51a64-0ddd-11f1-b67a-42dde27851f2",59,["D",1771538184840],"# Test Results\n\nDisplay test suite results with pass/fail/skip status and error details.\n\nThe `TestResults` component displays test suite results including summary\nstatistics, progress, individual tests, and error details.\n\nSee `scripts/test-results.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add test-results\n```\n\n## Features\n\n- Summary statistics (passed/failed/skipped)\n- Progress bar visualization\n- Collapsible test suites\n- Individual test status and duration\n- Error messages with stack traces\n- Color-coded status indicators\n\n## Status Colors\n\n| Status | Color | Use Case |\n| --------- | --------------- | ---------------- |\n| `passed` | Green | Test succeeded |\n| `failed` | Red | Test failed |\n| `skipped` | Yellow | Test skipped |\n| `running` | Blue (animated) | Test in progress |\n\n## Examples\n\n### Basic Usage\n\nSee `scripts/test-results-basic.tsx` for this example.\n\n### With Test Suites\n\nSee `scripts/test-results-suites.tsx` for this example.\n\n### With Error Details\n\nSee `scripts/test-results-errors.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | --------- | ------- | ----------------------- |\n| `summary` | `unknown` | - | Test results summary. |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | --------- | ------- | --------------------- |\n| `name` | `string` | - | Suite name. |\n| `status` | `unknown` | - | Overall suite status. |\n| `defaultOpen` | `boolean` | - | Initially expanded. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------- | ------- | -------------------- |\n| `name` | `string` | - | Test name. |\n| `status` | `unknown` | - | Test status. |\n| `duration` | `number` | - | Test duration in ms. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `passed` | `number` | `0` | Number of passed tests. |\n| `failed` | `number` | `0` | Number of failed tests. |\n| `skipped` | `number` | `0` | Number of skipped tests. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | -------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the p element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the pre element. |\n",[],[161,180,187,194,580],{"_106":588,"_97":589,"_162":590,"_164":195,"_165":147,"_166":591,"_168":169,"_108":592,"_102":33,"_171":205,"_173":593,"_174":22,"_175":-5,"_176":594,"_100":595},"d54a1f56-0ddd-11f1-adf3-42dde27851f2","tool.md","d54a2046-0ddd-11f1-adf3-42dde27851f2",40,["D",1771538184247],"# Tool\n\nA collapsible component for displaying tool invocation details in AI chatbot\ninterfaces.\n\nThe `Tool` component displays a collapsible interface for showing/hiding tool\ndetails. It is designed to take the `ToolUIPart` type from the AI SDK and\ndisplay it in a collapsible interface.\n\nSee `scripts/tool.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add tool\n```\n\n## Usage in AI SDK\n\nBuild a simple stateful weather app that renders the last message in a tool\nusing [`useChat`](/docs/reference/ai-sdk-ui/use-chat).\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport, type ToolUIPart } from \"ai\";\nimport { Button } from \"@/components/ui/button\";\nimport { MessageResponse } from \"@/components/ai-elements/message\";\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"@/components/ai-elements/tool\";\n\ntype WeatherToolInput = {\n location: string;\n units: \"celsius\" | \"fahrenheit\";\n};\n\ntype WeatherToolOutput = {\n location: string;\n temperature: string;\n conditions: string;\n humidity: string;\n windSpeed: string;\n lastUpdated: string;\n};\n\ntype WeatherToolUIPart = ToolUIPart<{\n fetch_weather_data: {\n input: WeatherToolInput;\n output: WeatherToolOutput;\n };\n}>;\n\nconst Example = () => {\n const { messages, sendMessage, status } = useChat({\n transport: new DefaultChatTransport({\n api: \"/api/weather\",\n }),\n });\n\n const handleWeatherClick = () => {\n sendMessage({ text: \"Get weather data for San Francisco in fahrenheit\" });\n };\n\n const latestMessage = messages[messages.length - 1];\n const weatherTool = latestMessage?.parts?.find(\n (part) => part.type === \"tool-fetch_weather_data\",\n ) as WeatherToolUIPart | undefined;\n\n return (\n

\n \n\n {weatherTool && (\n \n \n \n \n \n {formatWeatherResult(weatherTool.output)}\n \n }\n errorText={weatherTool.errorText}\n />\n \n \n )}\n

\n );\n};\n\nfunction formatWeatherResult(result: WeatherToolOutput): string {\n return `**Weather for ${result.location}**\n\n**Temperature:** ${result.temperature} \n**Conditions:** ${result.conditions} \n**Humidity:** ${result.humidity} \n**Wind Speed:** ${result.windSpeed} \n\n*Last updated: ${result.lastUpdated}*`;\n}\n\nexport default Example;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/weather/route.tsx\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\nimport { z } from \"zod\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { messages }: { messages: UIMessage[] } = await req.json();\n\n const result = streamText({\n model: \"openai/gpt-4o\",\n messages: await convertToModelMessages(messages),\n tools: {\n fetch_weather_data: {\n description: \"Fetch weather information for a specific location\",\n parameters: z.object({\n location: z\n .string()\n .describe(\"The city or location to get weather for\"),\n units: z\n .enum([\"celsius\", \"fahrenheit\"])\n .default(\"celsius\")\n .describe(\"Temperature units\"),\n }),\n inputSchema: z.object({\n location: z.string(),\n units: z.enum([\"celsius\", \"fahrenheit\"]).default(\"celsius\"),\n }),\n execute: async ({ location, units }) => {\n await new Promise((resolve) => setTimeout(resolve, 1500));\n\n const temp = units === \"celsius\"\n ? Math.floor(Math.random() * 35) + 5\n : Math.floor(Math.random() * 63) + 41;\n\n return {\n location,\n temperature: `${temp}°${units === \"celsius\" ? \"C\" : \"F\"}`,\n conditions: \"Sunny\",\n humidity: `12%`,\n windSpeed: `35 ${units === \"celsius\" ? \"km/h\" : \"mph\"}`,\n lastUpdated: new Date().toLocaleString(),\n };\n },\n },\n },\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\n## Features\n\n- Collapsible interface for showing/hiding tool details\n- Visual status indicators with icons and badges\n- Support for multiple tool execution states (pending, running, completed,\n error)\n- Formatted parameter display with JSON syntax highlighting\n- Result and error handling with appropriate styling\n- Composable structure for flexible layouts\n- Accessible keyboard navigation and screen reader support\n- Consistent styling that matches your design system\n- Auto-opens completed tools by default for better UX\n\n## Examples\n\n### Input Streaming (Pending)\n\nShows a tool in its initial state while parameters are being processed.\n\nSee `scripts/tool-input-streaming.tsx` for this example.\n\n### Input Available (Running)\n\nShows a tool that's actively executing with its parameters.\n\nSee `scripts/tool-input-available.tsx` for this example.\n\n### Output Available (Completed)\n\nShows a completed tool with successful results. Opens by default to show the\nresults. In this instance, the output is a JSON object, so we can use the\n`CodeBlock` component to display it.\n\nSee `scripts/tool-output-available.tsx` for this example.\n\n### Output Error\n\nShows a tool that encountered an error during execution. Opens by default to\ndisplay the error.\n\nSee `scripts/tool-output-error.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the root Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |\n| `title` | `string` | - | Custom title to display instead of the derived tool name. |\n| `type` | `ToolUIPart[` | Required | The type/name of the tool. |\n| `state` | `ToolUIPart[` | Required | The current state of the tool (input-streaming, input-available, output-available, or output-error). |\n| `toolName` | `string` | - | Required when type is |\n| `className` | `string` | - | Additional CSS classes to apply to the header. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ----------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | --------------------------------------------------------------------- |\n| `input` | `ToolUIPart[` | - | The input parameters passed to the tool, displayed as formatted JSON. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------- |\n| `output` | `React.ReactNode` | - | The output/result of the tool execution. |\n| `errorText` | `ToolUIPart[` | - | An error message if the tool execution failed. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n\n## Type Exports\n\n### `ToolPart`\n\nUnion type representing both static and dynamic tool UI parts.\n\n```tsx\ntype ToolPart = ToolUIPart | DynamicToolUIPart;\n```\n\n## Utilities\n\n### `getStatusBadge`\n\nReturns a Badge component with icon and label based on tool state.\n\n```tsx\nimport { getStatusBadge } from \"@/components/ai-elements/tool\";\n\n// Returns a Badge with appropriate icon and label\nconst badge = getStatusBadge(\"output-available\");\n```\n\nSupported states:\n\n- `input-streaming` - \"Pending\"\n- `input-available` - \"Running\"\n- `approval-requested` - \"Awaiting Approval\"\n- `approval-responded` - \"Responded\"\n- `output-available` - \"Completed\"\n- `output-error` - \"Error\"\n- `output-denied` - \"Denied\"\n",[],[161,180,187,194,589],{"_106":597,"_97":598,"_162":599,"_164":195,"_165":147,"_166":600,"_168":169,"_108":601,"_102":33,"_171":205,"_173":602,"_174":22,"_175":-5,"_176":603,"_100":604},"d5386cf2-0ddd-11f1-8b80-42dde27851f2","toolbar.md","d5386dec-0ddd-11f1-8b80-42dde27851f2",36,["D",1771538184128],"# Toolbar\n\nA styled toolbar component for React Flow nodes with flexible positioning and\ncustom actions.\n\nThe `Toolbar` component provides a positioned toolbar that attaches to nodes in\nReact Flow canvases. It features modern card styling with backdrop blur and\nflexbox layout for action buttons and controls.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add toolbar\n```\n\n## Features\n\n- Attaches to any React Flow node\n- Bottom positioning by default\n- Rounded card design with border\n- Theme-aware background styling\n- Flexbox layout with gap spacing\n- Full TypeScript support\n- Compatible with all React Flow NodeToolbar features\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------ | ------- | --------------------------------------------------------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply to the toolbar. |\n| `...props` | `ComponentProps` | - | Any other props from @xyflow/react NodeToolbar component (position, offset, isVisible, etc.). |\n",[],[161,180,187,194,598],{"_106":606,"_97":607,"_162":608,"_164":195,"_165":147,"_166":609,"_168":169,"_108":610,"_102":33,"_171":205,"_173":611,"_174":22,"_175":-5,"_176":612,"_100":613},"d5a1e4fc-0ddd-11f1-acc9-42dde27851f2","transcription.md","d5a1e5c4-0ddd-11f1-acc9-42dde27851f2",58,["D",1771538184813],"# Transcription\n\nA composable component for displaying interactive, synchronized transcripts from\nAI SDK transcribe() results with click-to-seek functionality.\n\nThe `Transcription` component provides a flexible render props interface for\ndisplaying audio transcripts with synchronized playback. It automatically\nhighlights the current segment based on playback time and supports click-to-seek\nfunctionality for interactive navigation.\n\nSee `scripts/transcription.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add transcription\n```\n\n## Features\n\n- Render props pattern for maximum flexibility\n- Automatic segment highlighting based on current time\n- Click-to-seek functionality for interactive navigation\n- Controlled and uncontrolled component patterns\n- Automatic filtering of empty segments\n- Visual state indicators (active, past, future)\n- Built on Radix UI's `useControllableState` for flexible state management\n- Full TypeScript support with AI SDK transcription types\n\n## Props\n\n### ``\n\nRoot component that provides context and manages transcript state. Uses render\nprops pattern for rendering segments.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `segments` | `TranscriptionSegment[]` | - | Array of transcription segments from AI SDK transcribe() function. |\n| `currentTime` | `number` | `0` | Current playback time in seconds (controlled). |\n| `onSeek` | `(time: number) => void` | - | Callback fired when a segment is clicked or when currentTime changes. |\n| `children` | `(segment: TranscriptionSegment, index: number) => ReactNode` | - | Render function that receives each segment and its index. |\n| `...props` | `Omit`\n\nIndividual segment button with automatic state styling and click-to-seek\nfunctionality.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `segment` | `TranscriptionSegment` | - | The transcription segment data. |\n| `index` | `number` | - | The segment index. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the button element. |\n\n## Behavior\n\n### Render Props Pattern\n\nThe component uses a render props pattern where the `children` prop is a\nfunction that receives each segment and its index. This provides maximum\nflexibility for custom rendering while still benefiting from automatic state\nmanagement and context.\n\n### Segment Highlighting\n\nSegments are automatically styled based on their relationship to the current\nplayback time:\n\n- **Active** (`isActive`): When `currentTime` is within the segment's time\n range. Styled with primary color.\n- **Past** (`isPast`): When `currentTime` is after the segment's end time.\n Styled with muted foreground.\n- **Future**: When `currentTime` is before the segment's start time. Styled with\n dimmed muted foreground.\n\n### Click-to-Seek\n\nWhen `onSeek` is provided, segments become interactive buttons. Clicking a\nsegment calls `onSeek` with the segment's start time, allowing your audio/video\nplayer to seek to that position.\n\n### Empty Segment Filtering\n\nThe component automatically filters out segments with empty or whitespace-only\ntext to avoid rendering unnecessary elements.\n\n### State Management\n\nUses Radix UI's `useControllableState` hook to support both controlled and\nuncontrolled patterns. When `currentTime` is provided, the component operates in\ncontrolled mode. Otherwise, it maintains its own internal state.\n\n## Data Format\n\nThe component expects segments from the AI SDK `transcribe()` function:\n\n```ts\ntype TranscriptionSegment = {\n text: string;\n startSecond: number;\n endSecond: number;\n};\n```\n\n## Styling\n\nThe component uses data attributes for custom styling:\n\n- `data-slot=\"transcription\"`: Root container\n- `data-slot=\"transcription-segment\"`: Individual segment button\n- `data-active`: Present on the currently playing segment\n- `data-index`: The segment's index in the array\n\nDefault segment appearance:\n\n- Active segment: `text-primary` (primary brand color)\n- Past segments: `text-muted-foreground`\n- Future segments: `text-muted-foreground/60` (dimmed)\n- Interactive segments: `cursor-pointer hover:text-foreground`\n- Non-interactive segments: `cursor-default`\n\n## Accessibility\n\n- Uses semantic `\n \n );\n}\n```\n\n#### Return Value\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------- | ------------------- | ------------------------------------------ |\n| `value` | `string | undefined` | - |\n| `setValue` | `(value: string | undefined) => void` | - |\n| `open` | `boolean` | - | Whether the dialog is currently open. |\n| `setOpen` | `(open: boolean) => void` | - | Function to control the dialog open state. |\n",[],[161,180,187,194,616],{"_106":624,"_97":625,"_162":626,"_164":195,"_165":147,"_166":627,"_168":169,"_108":628,"_102":33,"_171":205,"_173":629,"_174":22,"_175":-5,"_176":630,"_100":631},"d59be052-0ddd-11f1-b72b-42dde27851f2","web-preview.md","d59be14c-0ddd-11f1-b72b-42dde27851f2",56,["D",1771538184708],"# Web Preview\n\nA composable component for previewing the result of a generated UI, with support\nfor live examples and code display.\n\nThe `WebPreview` component provides a flexible way to showcase the result of a\ngenerated UI component, along with its source code. It is designed for\ndocumentation and demo purposes, allowing users to interact with live examples\nand view the underlying implementation.\n\nSee `scripts/web-preview.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add web-preview\n```\n\n## Usage with AI SDK\n\nBuild a simple v0 clone using the\n[v0 Platform API](https://v0.dev/docs/api/platform).\n\nInstall the `v0-sdk` package:\n\n```package-install\nnpm i v0-sdk\n```\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n WebPreview,\n WebPreviewBody,\n WebPreviewNavigation,\n WebPreviewUrl,\n} from \"@/components/ai-elements/web-preview\";\nimport { useState } from \"react\";\nimport {\n Input,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Spinner } from \"@/components/ui/spinner\";\n\nconst WebPreviewDemo = () => {\n const [previewUrl, setPreviewUrl] = useState(\"\");\n const [prompt, setPrompt] = useState(\"\");\n const [isGenerating, setIsGenerating] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!prompt.trim()) return;\n setPrompt(\"\");\n\n setIsGenerating(true);\n try {\n const response = await fetch(\"/api/v0\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt }),\n });\n\n const data = await response.json();\n setPreviewUrl(data.demo || \"/\");\n console.log(\"Generation finished:\", data);\n } catch (error) {\n console.error(\"Generation failed:\", error);\n } finally {\n setIsGenerating(false);\n }\n };\n\n return (\n

\n {isGenerating\n ? (\n

\n \n

\n Generating app, this may take a few seconds...\n

\n )\n : previewUrl\n ? (\n \n \n \n \n \n \n )\n : (\n

\n Your generated app will appear here\n

\n )}\n

\n\n \n setPrompt(e.currentTarget.value)}\n className=\"pr-12 min-h-[60px]\"\n />\n \n \n

\n );\n};\n\nexport default WebPreviewDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/v0/route.ts\"\nimport { v0 } from \"v0-sdk\";\n\nexport async function POST(req: Request) {\n const { prompt }: { prompt: string } = await req.json();\n\n const result = await v0.chats.create({\n system: \"You are an expert coder\",\n message: prompt,\n modelConfiguration: {\n modelId: \"v0-1.5-sm\",\n imageGenerations: false,\n thinking: false,\n },\n });\n\n return Response.json({\n demo: result.demo,\n webUrl: result.webUrl,\n });\n}\n```\n\n## Features\n\n- Live preview of UI components\n- Composable architecture with dedicated sub-components\n- Responsive design modes (Desktop, Tablet, Mobile)\n- Navigation controls with back/forward functionality\n- URL input and example selector\n- Full screen mode support\n- Console logging with timestamps\n- Context-based state management\n- Consistent styling with the design system\n- Easy integration into documentation pages\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | -------------------------------------- | ------- | ------------------------------------------- |\n| `defaultUrl` | `string` | - | The initial URL to load in the preview. |\n| `onUrlChange` | `(url: string) => void` | - | Callback fired when the URL changes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the navigation container. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `tooltip` | `string` | - | Tooltip text to display on hover. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------ | ------- | ----------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Input component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------- |\n| `loading` | `React.ReactNode` | - | Optional loading indicator to display over the preview. |\n| `...props` | `React.IframeHTMLAttributes` | - | Any other props are spread to the underlying iframe. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |\n| `logs` | `Array<{ level:` | - | Console log entries to display in the console panel. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n",[],[161,180,187,194,625],[161,180,187,194],{"_106":634,"_97":635,"_162":636,"_164":188,"_165":147,"_166":637,"_168":169,"_108":638,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":639,"_100":1099},"d4abe7b4-0ddd-11f1-bb81-42dde27851f2","scripts","d4abe890-0ddd-11f1-bb81-42dde27851f2",13,["D",1771538183208],[640,650,659,668,677,686,695,704,713,722,731,740,749,758,766,775,784,793,802,811,820,829,838,847,856,865,874,883,892,901,910,919,928,937,946,955,964,973,982,991,1000,1009,1018,1027,1036,1045,1054,1063,1072,1081,1090],{"_106":641,"_97":642,"_162":643,"_164":636,"_165":147,"_166":644,"_168":169,"_108":645,"_102":33,"_171":646,"_173":647,"_174":22,"_175":-5,"_176":648,"_100":649},"d5f845fe-0ddd-11f1-9539-42dde27851f2","agent.tsx","d5f846b2-0ddd-11f1-9539-42dde27851f2",78,["D",1771538185384],"script","\"use client\";\n\nimport {\n Agent,\n AgentContent,\n AgentHeader,\n AgentInstructions,\n AgentOutput,\n AgentTool,\n AgentTools,\n} from \"@/components/ai-elements/agent\";\nimport { z } from \"zod\";\n\nconst webSearchTool = {\n description: \"Search the web for information\",\n inputSchema: z.object({\n query: z.string().describe(\"The search query\"),\n }),\n};\n\nconst readUrlTool = {\n description: \"Read and parse a URL\",\n inputSchema: z.object({\n url: z.string().url().describe(\"The URL to read\"),\n }),\n};\n\nconst summarizeTool = {\n description: \"Summarize text into key points\",\n inputSchema: z.object({\n maxPoints: z.number().optional().describe(\"Maximum number of key points\"),\n text: z.string().describe(\"The text to summarize\"),\n }),\n};\n\nconst outputSchema = `z.object({\n sentiment: z.enum(['positive', 'negative', 'neutral']),\n score: z.number(),\n summary: z.string(),\n})`;\n\nconst Example = () => (\n \n \n \n \n You are a helpful research assistant. Your job is to search the web for\n information and summarize findings for the user. Always cite your\n sources and provide accurate, up-to-date information.\n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,642],{"_106":651,"_97":652,"_162":653,"_164":636,"_165":147,"_166":654,"_168":169,"_108":655,"_102":33,"_171":646,"_173":656,"_174":22,"_175":-5,"_176":657,"_100":658},"d6286d42-0ddd-11f1-bf1c-42dde27851f2","attachments-list.tsx","d6286e00-0ddd-11f1-bf1c-42dde27851f2",87,["D",1771538185670],"\"use client\";\n\nimport {\n Attachment,\n AttachmentInfo,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst initialAttachments = [\n {\n filename: \"mountain-landscape.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\" as const,\n url:\n \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop\",\n },\n {\n filename: \"quarterly-report-2024.pdf\",\n id: nanoid(),\n mediaType: \"application/pdf\",\n type: \"file\" as const,\n url: \"\",\n },\n {\n filename: \"product-demo.mp4\",\n id: nanoid(),\n mediaType: \"video/mp4\",\n type: \"file\" as const,\n url: \"\",\n },\n {\n filename: \"api-reference\",\n id: nanoid(),\n mediaType: \"text/html\",\n title: \"API Documentation\",\n type: \"source-document\" as const,\n url: \"https://docs.example.com/api\",\n },\n {\n filename: \"meeting-recording.mp3\",\n id: nanoid(),\n mediaType: \"audio/mpeg\",\n type: \"file\" as const,\n url: \"\",\n },\n];\n\ninterface AttachmentItemProps {\n attachment: (typeof initialAttachments)[0];\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\nconst Example = () => {\n const [attachments, setAttachments] = useState(initialAttachments);\n\n const handleRemove = useCallback((id: string) => {\n setAttachments((prev) => prev.filter((a) => a.id !== id));\n }, []);\n\n return (\n

\n \n {attachments.map((attachment) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,652],{"_106":660,"_97":661,"_162":662,"_164":636,"_165":147,"_166":663,"_168":169,"_108":664,"_102":33,"_171":646,"_173":665,"_174":22,"_175":-5,"_176":666,"_100":667},"d6d56d30-0ddd-11f1-99d1-42dde27851f2","attachments.tsx","d6d56e20-0ddd-11f1-99d1-42dde27851f2",120,["D",1771538186807],"\"use client\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst initialAttachments = [\n {\n filename: \"mountain-landscape.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\" as const,\n url:\n \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop\",\n },\n {\n filename: \"ocean-sunset.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\" as const,\n url:\n \"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=400&fit=crop\",\n },\n {\n filename: \"document.pdf\",\n id: nanoid(),\n mediaType: \"application/pdf\",\n type: \"file\" as const,\n url: \"\",\n },\n {\n filename: \"video.mp4\",\n id: nanoid(),\n mediaType: \"video/mp4\",\n type: \"file\" as const,\n url: \"\",\n },\n];\n\ninterface AttachmentItemProps {\n attachment: (typeof initialAttachments)[0];\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\nconst Example = () => {\n const [attachments, setAttachments] = useState(initialAttachments);\n\n const handleRemove = useCallback((id: string) => {\n setAttachments((prev) => prev.filter((a) => a.id !== id));\n }, []);\n\n return (\n

\n \n {attachments.map((attachment) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,661],{"_106":669,"_97":670,"_162":671,"_164":636,"_165":147,"_166":672,"_168":169,"_108":673,"_102":33,"_171":646,"_173":674,"_174":22,"_175":-5,"_176":675,"_100":676},"d694cb54-0ddd-11f1-b433-42dde27851f2","audio-player-remote.tsx","d694cc30-0ddd-11f1-b433-42dde27851f2",109,["D",1771538186399],"\"use client\";\n\nimport {\n AudioPlayer,\n AudioPlayerControlBar,\n AudioPlayerDurationDisplay,\n AudioPlayerElement,\n AudioPlayerMuteButton,\n AudioPlayerPlayButton,\n AudioPlayerSeekBackwardButton,\n AudioPlayerSeekForwardButton,\n AudioPlayerTimeDisplay,\n AudioPlayerTimeRange,\n AudioPlayerVolumeRange,\n} from \"@/components/ai-elements/audio-player\";\n\nconst Example = () => (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,670],{"_106":678,"_97":679,"_162":680,"_164":636,"_165":147,"_166":681,"_168":169,"_108":682,"_102":33,"_171":646,"_173":683,"_174":22,"_175":-5,"_176":684,"_100":685},"d69164b4-0ddd-11f1-8ab1-42dde27851f2","audio-player.tsx","d6916572-0ddd-11f1-8ab1-42dde27851f2",108,["D",1771538186354],"\"use client\";\n\nimport type { Experimental_SpeechResult as SpeechResult } from \"ai\";\n\nimport {\n AudioPlayer,\n AudioPlayerControlBar,\n AudioPlayerDurationDisplay,\n AudioPlayerElement,\n AudioPlayerMuteButton,\n AudioPlayerPlayButton,\n AudioPlayerSeekBackwardButton,\n AudioPlayerSeekForwardButton,\n AudioPlayerTimeDisplay,\n AudioPlayerTimeRange,\n AudioPlayerVolumeRange,\n} from \"@/components/ai-elements/audio-player\";\nimport { useEffect, useState } from \"react\";\n\nconst Example = () => {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n const fetchData = async () => {\n const response = await fetch(\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2025-11-10T22_07_46_Hayden_pvc_sp108_s50_sb75_se0_b_m2.mp3\",\n );\n const arrayBuffer = await response.arrayBuffer();\n const base64 = Buffer.from(arrayBuffer).toString(\"base64\");\n\n const newData: SpeechResult[\"audio\"] = {\n base64,\n format: \"mp3\",\n mediaType: \"audio/mpeg\",\n uint8Array: new Uint8Array(arrayBuffer),\n };\n\n setData(newData);\n };\n\n if (!data) {\n fetchData();\n }\n }, [data]);\n\n if (!data) {\n return

;\n }\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,679],{"_106":687,"_97":688,"_162":689,"_164":636,"_165":147,"_166":690,"_168":169,"_108":691,"_102":33,"_171":646,"_173":692,"_174":22,"_175":-5,"_176":693,"_100":694},"d6168672-0ddd-11f1-a7af-42dde27851f2","checkpoint.tsx","d616874e-0ddd-11f1-a7af-42dde27851f2",83,["D",1771538185426],"\"use client\";\n\nimport {\n Checkpoint,\n CheckpointIcon,\n CheckpointTrigger,\n} from \"@/components/ai-elements/checkpoint\";\nimport {\n Conversation,\n ConversationContent,\n} from \"@/components/ai-elements/conversation\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport { nanoid } from \"nanoid\";\nimport { Fragment, memo, useCallback, useState } from \"react\";\n\ninterface MessageType {\n id: string;\n role: \"user\" | \"assistant\";\n content: string;\n}\n\nconst initialMessages: MessageType[] = [\n {\n content: \"What is React?\",\n id: nanoid(),\n role: \"user\",\n },\n {\n content:\n \"React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Meta and a community of developers.\",\n id: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"How does component state work?\",\n id: nanoid(),\n role: \"user\",\n },\n];\n\ninterface CheckpointItemProps {\n checkpoint: { messageCount: number; timestamp: Date };\n onRestore: (messageCount: number) => void;\n}\n\nconst CheckpointItem = memo(\n ({ checkpoint, onRestore }: CheckpointItemProps) => {\n const handleClick = useCallback(\n () => onRestore(checkpoint.messageCount),\n [onRestore, checkpoint.messageCount],\n );\n return (\n \n \n \n Restore checkpoint\n \n \n );\n },\n);\n\nCheckpointItem.displayName = \"CheckpointItem\";\n\nconst Example = () => {\n const [messages, setMessages] = useState(initialMessages);\n const [checkpoints] = useState([\n { messageCount: 2, timestamp: new Date(Date.now() - 3_600_000) },\n ]);\n\n const handleRestore = useCallback((messageCount: number) => {\n setMessages(initialMessages.slice(0, messageCount));\n }, []);\n\n return (\n

\n \n \n {messages.map((message, index) => {\n const checkpoint = checkpoints.find(\n (cp) => cp.messageCount === index + 1,\n );\n\n return (\n \n \n \n {message.content}\n \n \n {checkpoint && (\n \n )}\n \n );\n })}\n \n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,688],{"_106":696,"_97":697,"_162":698,"_164":636,"_165":147,"_166":699,"_168":169,"_108":700,"_102":33,"_171":646,"_173":701,"_174":22,"_175":-5,"_176":702,"_100":703},"d667f782-0ddd-11f1-a0cd-42dde27851f2","code-block-dark.tsx","d667f868-0ddd-11f1-a0cd-42dde27851f2",100,["D",1771538186118],"\"use client\";\n\nimport {\n CodeBlock,\n CodeBlockActions,\n CodeBlockCopyButton,\n CodeBlockFilename,\n CodeBlockHeader,\n CodeBlockTitle,\n} from \"@/components/ai-elements/code-block\";\nimport { FileIcon } from \"lucide-react\";\n\nconst handleCopy = () => {\n console.log(\"Copied code to clipboard\");\n};\n\nconst handleCopyError = () => {\n console.error(\"Failed to copy code to clipboard\");\n};\n\nconst code = `function MyComponent(props) {\n return (\n

Hello, {props.name}!

This is an example React component.

\n );\n}`;\n\nconst Example = () => (\n

\n \n \n \n \n MyComponent.jsx\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,697],{"_106":705,"_97":706,"_162":707,"_164":636,"_165":147,"_166":708,"_168":169,"_108":709,"_102":33,"_171":646,"_173":710,"_174":22,"_175":-5,"_176":711,"_100":712},"d66fc6f6-0ddd-11f1-acc9-42dde27851f2","commit.tsx","d66fc7dc-0ddd-11f1-acc9-42dde27851f2",102,["D",1771538186160],"\"use client\";\n\nimport {\n Commit,\n CommitActions,\n CommitAuthor,\n CommitAuthorAvatar,\n CommitContent,\n CommitCopyButton,\n CommitFile,\n CommitFileAdditions,\n CommitFileChanges,\n CommitFileDeletions,\n CommitFileIcon,\n CommitFileInfo,\n CommitFilePath,\n CommitFiles,\n CommitFileStatus,\n CommitHash,\n CommitHeader,\n CommitInfo,\n CommitMessage,\n CommitMetadata,\n CommitSeparator,\n CommitTimestamp,\n} from \"@/components/ai-elements/commit\";\n\nconst handleCopy = () => {\n console.log(\"Copied hash!\");\n};\n\nconst hash = \"a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0\";\nconst timestamp = new Date(Date.now() - 1000 * 60 * 60 * 2);\n\nconst files = [\n {\n additions: 150,\n deletions: 0,\n path: \"src/auth/login.tsx\",\n status: \"added\" as const,\n },\n {\n additions: 45,\n deletions: 0,\n path: \"src/auth/logout.tsx\",\n status: \"added\" as const,\n },\n {\n additions: 23,\n deletions: 8,\n path: \"src/lib/session.ts\",\n status: \"modified\" as const,\n },\n];\n\nconst Example = () => (\n \n \n \n \n \n \n feat: Add user authentication flow\n \n {hash.slice(0, 7)}\n \n \n \n \n \n \n \n \n \n \n {files.map((file) => (\n \n \n \n \n {file.path}\n \n \n \n \n \n \n ))}\n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,706],{"_106":714,"_97":715,"_162":716,"_164":636,"_165":147,"_166":717,"_168":169,"_108":718,"_102":33,"_171":646,"_173":719,"_174":22,"_175":-5,"_176":720,"_100":721},"d63a69c0-0ddd-11f1-a7cf-42dde27851f2","confirmation-accepted.tsx","d63a6a56-0ddd-11f1-a7cf-42dde27851f2",92,["D",1771538185822],"\"use client\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst Example = () => (\n

\n \n \n \n This tool wants to delete the file{\" \"}\n \n /tmp/example.txt\n \n . Do you approve this action?\n \n \n \n You approved this tool execution\n \n \n \n You rejected this tool execution\n \n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,715],{"_106":723,"_97":724,"_162":725,"_164":636,"_165":147,"_166":726,"_168":169,"_108":727,"_102":33,"_171":646,"_173":728,"_174":22,"_175":-5,"_176":729,"_100":730},"d622399a-0ddd-11f1-a7cf-42dde27851f2","confirmation-rejected.tsx","d6223a62-0ddd-11f1-a7cf-42dde27851f2",86,["D",1771538185586],"\"use client\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst Example = () => (\n

\n);\n\nexport default Example;\n",[],[161,180,187,635,724],{"_106":732,"_97":733,"_162":734,"_164":636,"_165":147,"_166":735,"_168":169,"_108":736,"_102":33,"_171":646,"_173":737,"_174":22,"_175":-5,"_176":738,"_100":739},"d64ebb0a-0ddd-11f1-bf00-42dde27851f2","confirmation.tsx","d64ebbc8-0ddd-11f1-bf00-42dde27851f2",96,["D",1771538185945],"\"use client\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationAction,\n ConfirmationActions,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst handleReject = () => {\n // In production, call respondToConfirmationRequest with approved: false\n};\n\nconst handleApprove = () => {\n // In production, call respondToConfirmationRequest with approved: true\n};\n\nconst Example = () => (\n

\n);\n\nexport default Example;\n",[],[161,180,187,635,733],{"_106":741,"_97":742,"_162":743,"_164":636,"_165":147,"_166":744,"_168":169,"_108":745,"_102":33,"_171":646,"_173":746,"_174":22,"_175":-5,"_176":747,"_100":748},"d63fe620-0ddd-11f1-acc9-42dde27851f2","file-tree.tsx","d63fe706-0ddd-11f1-acc9-42dde27851f2",93,["D",1771538185782],"\"use client\";\n\nimport {\n FileTree,\n FileTreeFile,\n FileTreeFolder,\n} from \"@/components/ai-elements/file-tree\";\nimport { useState } from \"react\";\n\nconst Example = () => {\n const [selectedPath, setSelectedPath] = useState();\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Example;\n",[],[161,180,187,635,742],{"_106":750,"_97":751,"_162":752,"_164":636,"_165":147,"_166":753,"_168":169,"_108":754,"_102":33,"_171":646,"_173":755,"_174":22,"_175":-5,"_176":756,"_100":757},"d62b0ad4-0ddd-11f1-93ea-42dde27851f2","inline-citation.tsx","d62b0b7e-0ddd-11f1-93ea-42dde27851f2",88,["D",1771538185723],"\"use client\";\n\nimport {\n InlineCitation,\n InlineCitationCard,\n InlineCitationCardBody,\n InlineCitationCardTrigger,\n InlineCitationCarousel,\n InlineCitationCarouselContent,\n InlineCitationCarouselHeader,\n InlineCitationCarouselIndex,\n InlineCitationCarouselItem,\n InlineCitationCarouselNext,\n InlineCitationCarouselPrev,\n InlineCitationSource,\n InlineCitationText,\n} from \"@/components/ai-elements/inline-citation\";\n\nconst citation = {\n sources: [\n {\n description:\n \"A comprehensive study on the recent developments in natural language processing technologies and their applications.\",\n title: \"Advances in Natural Language Processing\",\n url: \"https://example.com/nlp-advances\",\n },\n {\n description:\n \"An overview of the most significant machine learning breakthroughs in the past year.\",\n title: \"Breakthroughs in Machine Learning\",\n url: \"https://mlnews.org/breakthroughs\",\n },\n {\n description:\n \"A report on how artificial intelligence is transforming healthcare and diagnostics.\",\n title: \"AI in Healthcare: Current Trends\",\n url: \"https://healthai.com/trends\",\n },\n {\n description:\n \"A discussion on the ethical considerations and challenges in the development of AI.\",\n title: \"Ethics of Artificial Intelligence\",\n url: \"https://aiethics.org/overview\",\n },\n {\n description:\n \"Insights into the technical challenges and solutions for scaling deep learning architectures.\",\n title: \"Scaling Deep Learning Models\",\n url: \"https://deeplearninghub.com/scaling-models\",\n },\n {\n description:\n \"A summary of the latest benchmarks and evaluation metrics for natural language understanding systems.\",\n title: \"Natural Language Understanding Benchmarks\",\n url: \"https://nlubenchmarks.com/latest\",\n },\n ],\n text:\n \"The technology continues to evolve rapidly, with new breakthroughs being announced regularly\",\n};\n\nconst Example = () => (\n

\n According to recent studies, artificial intelligence has shown remarkable\n progress in natural language processing.{\" \"}\n \n {citation.text}\n \n source.url)}\n />\n \n \n \n \n \n \n \n \n {citation.sources.map((source) => (\n \n \n \n ))}\n \n \n \n \n \n .\n

\n);\n\nexport default Example;\n",[],[161,180,187,635,751],{"_106":759,"_97":760,"_162":761,"_164":636,"_165":147,"_166":103,"_168":169,"_108":762,"_102":33,"_171":646,"_173":763,"_174":22,"_175":-5,"_176":764,"_100":765},"d6f0b284-0ddd-11f1-a928-42dde27851f2","jsx-preview.tsx","d6f0b34c-0ddd-11f1-a928-42dde27851f2",["D",1771538187003],"\"use client\";\n\nimport {\n JSXPreview,\n JSXPreviewContent,\n JSXPreviewError,\n} from \"@/components/ai-elements/jsx-preview\";\nimport { Button } from \"@/components/ui/button\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst handleError = (error: Error) => {\n console.log(\"JSX Parse Error:\", error);\n};\n\nconst fullJsx = `

\n AI\n

AI-Generated Component

Rendered from JSX string

This component was dynamically rendered from a JSX string. The JSXPreview component supports streaming mode, automatically closing unclosed tags as content arrives.

\n React\n Streaming\n Dynamic\n

\n Generated just now\n \n

`;\n\nconst Example = () => {\n const [streamedJsx, setStreamedJsx] = useState(fullJsx);\n const [isStreaming, setIsStreaming] = useState(false);\n const intervalRef = useRef | null>(null);\n\n const simulateStreaming = useCallback(() => {\n setIsStreaming(true);\n setStreamedJsx(\"\");\n let index = 0;\n\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n\n intervalRef.current = setInterval(() => {\n if (index < fullJsx.length) {\n setStreamedJsx(fullJsx.slice(0, index + 15));\n index += 15;\n } else {\n setIsStreaming(false);\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n }\n }, 30);\n }, []);\n\n useEffect(\n () => () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n },\n [],\n );\n\n return (\n

\n \n {isStreaming ? \"Streaming...\" : \"Simulate Streaming\"}\n \n\n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,760],{"_106":767,"_97":768,"_162":769,"_164":636,"_165":147,"_166":770,"_168":169,"_108":771,"_102":33,"_171":646,"_173":772,"_174":22,"_175":-5,"_176":773,"_100":774},"d6b2d400-0ddd-11f1-8ab1-42dde27851f2","mic-selector.tsx","d6b2d4a0-0ddd-11f1-8ab1-42dde27851f2",115,["D",1771538186610],"\"use client\";\n\nimport {\n MicSelector,\n MicSelectorContent,\n MicSelectorEmpty,\n MicSelectorInput,\n MicSelectorItem,\n MicSelectorLabel,\n MicSelectorList,\n MicSelectorTrigger,\n MicSelectorValue,\n} from \"@/components/ai-elements/mic-selector\";\n\nconst handleOpenChange = (open: boolean) => {\n console.log(\"MicSelector is open?\", open);\n};\n\nconst handleValueChange = (newValue: string) => {\n console.log(\"MicSelector value:\", newValue);\n};\n\nconst Example = () => (\n

\n \n \n \n \n \n \n \n \n {(devices) =>\n devices.map((device) => (\n \n \n \n ))}\n \n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,768],{"_106":776,"_97":777,"_162":778,"_164":636,"_165":147,"_166":779,"_168":169,"_108":780,"_102":33,"_171":646,"_173":781,"_174":22,"_175":-5,"_176":782,"_100":783},"d64309d6-0ddd-11f1-a7cf-42dde27851f2","model-selector.tsx","d6430abc-0ddd-11f1-a7cf-42dde27851f2",94,["D",1771538185865],"\"use client\";\n\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorEmpty,\n ModelSelectorGroup,\n ModelSelectorInput,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorLogoGroup,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from \"@/components/ai-elements/model-selector\";\nimport { Button } from \"@/components/ui/button\";\nimport { CheckIcon } from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst models = [\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o\",\n name: \"GPT-4o\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o-mini\",\n name: \"GPT-4o Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"o1\",\n name: \"o1\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"o1-mini\",\n name: \"o1 Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-opus-4-20250514\",\n name: \"Claude 4 Opus\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-sonnet-4-20250514\",\n name: \"Claude 4 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-3.5-sonnet\",\n name: \"Claude 3.5 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-3.5-haiku\",\n name: \"Claude 3.5 Haiku\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-2.0-flash-exp\",\n name: \"Gemini 2.0 Flash\",\n providers: [\"google\", \"google-vertex\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-1.5-pro\",\n name: \"Gemini 1.5 Pro\",\n providers: [\"google\", \"google-vertex\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-1.5-flash\",\n name: \"Gemini 1.5 Flash\",\n providers: [\"google\", \"google-vertex\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.3-70b\",\n name: \"Llama 3.3 70B\",\n providers: [\"groq\", \"togetherai\", \"amazon-bedrock\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.1-405b\",\n name: \"Llama 3.1 405B\",\n providers: [\"togetherai\", \"amazon-bedrock\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.1-70b\",\n name: \"Llama 3.1 70B\",\n providers: [\"groq\", \"togetherai\", \"amazon-bedrock\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.1-8b\",\n name: \"Llama 3.1 8B\",\n providers: [\"groq\", \"togetherai\"],\n },\n {\n chef: \"DeepSeek\",\n chefSlug: \"deepseek\",\n id: \"deepseek-r1\",\n name: \"DeepSeek R1\",\n providers: [\"deepseek\", \"openrouter\"],\n },\n {\n chef: \"DeepSeek\",\n chefSlug: \"deepseek\",\n id: \"deepseek-v3\",\n name: \"DeepSeek V3\",\n providers: [\"deepseek\", \"openrouter\"],\n },\n {\n chef: \"DeepSeek\",\n chefSlug: \"deepseek\",\n id: \"deepseek-coder-v2\",\n name: \"DeepSeek Coder V2\",\n providers: [\"deepseek\", \"openrouter\"],\n },\n {\n chef: \"Mistral AI\",\n chefSlug: \"mistral\",\n id: \"mistral-large\",\n name: \"Mistral Large\",\n providers: [\"mistral\", \"azure\"],\n },\n {\n chef: \"Mistral AI\",\n chefSlug: \"mistral\",\n id: \"mistral-small\",\n name: \"Mistral Small\",\n providers: [\"mistral\", \"azure\"],\n },\n {\n chef: \"Mistral AI\",\n chefSlug: \"mistral\",\n id: \"codestral\",\n name: \"Codestral\",\n providers: [\"mistral\"],\n },\n {\n chef: \"Alibaba\",\n chefSlug: \"alibaba\",\n id: \"qwen-2.5-72b\",\n name: \"Qwen 2.5 72B\",\n providers: [\"alibaba\", \"openrouter\"],\n },\n {\n chef: \"Alibaba\",\n chefSlug: \"alibaba\",\n id: \"qwen-2.5-coder-32b\",\n name: \"Qwen 2.5 Coder 32B\",\n providers: [\"alibaba\", \"openrouter\"],\n },\n {\n chef: \"Alibaba\",\n chefSlug: \"alibaba\",\n id: \"qwen-max\",\n name: \"Qwen Max\",\n providers: [\"alibaba\"],\n },\n {\n chef: \"Cohere\",\n chefSlug: \"cohere\",\n id: \"command-r-plus\",\n name: \"Command R+\",\n providers: [\"cohere\", \"azure\", \"amazon-bedrock\"],\n },\n {\n chef: \"Cohere\",\n chefSlug: \"cohere\",\n id: \"command-r\",\n name: \"Command R\",\n providers: [\"cohere\", \"azure\", \"amazon-bedrock\"],\n },\n {\n chef: \"xAI\",\n chefSlug: \"xai\",\n id: \"grok-3\",\n name: \"Grok 3\",\n providers: [\"xai\"],\n },\n {\n chef: \"xAI\",\n chefSlug: \"xai\",\n id: \"grok-2-1212\",\n name: \"Grok 2 1212\",\n providers: [\"xai\"],\n },\n {\n chef: \"xAI\",\n chefSlug: \"xai\",\n id: \"grok-vision\",\n name: \"Grok Vision\",\n providers: [\"xai\"],\n },\n {\n chef: \"Moonshot AI\",\n chefSlug: \"moonshotai\",\n id: \"moonshot-v1-128k\",\n name: \"Moonshot v1 128K\",\n providers: [\"moonshotai\"],\n },\n {\n chef: \"Moonshot AI\",\n chefSlug: \"moonshotai\",\n id: \"moonshot-v1-32k\",\n name: \"Moonshot v1 32K\",\n providers: [\"moonshotai\"],\n },\n {\n chef: \"Perplexity\",\n chefSlug: \"perplexity\",\n id: \"sonar-pro\",\n name: \"Sonar Pro\",\n providers: [\"perplexity\"],\n },\n {\n chef: \"Perplexity\",\n chefSlug: \"perplexity\",\n id: \"sonar\",\n name: \"Sonar\",\n providers: [\"perplexity\"],\n },\n {\n chef: \"Vercel\",\n chefSlug: \"v0\",\n id: \"v0-chat\",\n name: \"v0 Chat\",\n providers: [\"vercel\"],\n },\n {\n chef: \"Amazon\",\n chefSlug: \"amazon-bedrock\",\n id: \"nova-pro\",\n name: \"Nova Pro\",\n providers: [\"amazon-bedrock\"],\n },\n {\n chef: \"Amazon\",\n chefSlug: \"amazon-bedrock\",\n id: \"nova-lite\",\n name: \"Nova Lite\",\n providers: [\"amazon-bedrock\"],\n },\n {\n chef: \"Amazon\",\n chefSlug: \"amazon-bedrock\",\n id: \"nova-micro\",\n name: \"Nova Micro\",\n providers: [\"amazon-bedrock\"],\n },\n];\n\ninterface ModelItemProps {\n model: (typeof models)[0];\n selectedModel: string;\n onSelect: (id: string) => void;\n}\n\nconst ModelItem = memo(({ model, selectedModel, onSelect }: ModelItemProps) => {\n const handleSelect = useCallback(\n () => onSelect(model.id),\n [onSelect, model.id],\n );\n return (\n \n \n {model.name}\n \n {model.providers.map((provider) => (\n \n ))}\n \n {selectedModel === model.id\n ? \n :

}\n \n );\n});\n\nModelItem.displayName = \"ModelItem\";\n\nconst Example = () => {\n const [open, setOpen] = useState(false);\n const [selectedModel, setSelectedModel] = useState(\"gpt-4o\");\n\n const handleModelSelect = useCallback((id: string) => {\n setSelectedModel(id);\n setOpen(false);\n }, []);\n\n const selectedModelData = models.find((model) => model.id === selectedModel);\n\n // Get unique chefs in order of appearance\n const chefs = [...new Set(models.map((model) => model.chef))];\n\n return (\n

\n \n \n \n \n \n \n \n No models found.\n {chefs.map((chef) => (\n \n {models\n .filter((model) => model.chef === chef)\n .map((model) => (\n \n ))}\n \n ))}\n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,777],{"_106":785,"_97":786,"_162":787,"_164":636,"_165":147,"_166":788,"_168":169,"_108":789,"_102":33,"_171":646,"_173":790,"_174":22,"_175":-5,"_176":791,"_100":792},"d6a5947a-0ddd-11f1-9b1e-42dde27851f2","persona-command.tsx","d6a59538-0ddd-11f1-9b1e-42dde27851f2",112,["D",1771538186523],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,786],{"_106":794,"_97":795,"_162":796,"_164":636,"_165":147,"_166":797,"_168":169,"_108":798,"_102":33,"_171":646,"_173":799,"_174":22,"_175":-5,"_176":800,"_100":801},"d63819a4-0ddd-11f1-93ea-42dde27851f2","persona-halo.tsx","d6381b66-0ddd-11f1-93ea-42dde27851f2",91,["D",1771538185809],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,795],{"_106":803,"_97":804,"_162":805,"_164":636,"_165":147,"_166":806,"_168":169,"_108":807,"_102":33,"_171":646,"_173":808,"_174":22,"_175":-5,"_176":809,"_100":810},"d6c1afd4-0ddd-11f1-99d1-42dde27851f2","persona-obsidian.tsx","d6c1b092-0ddd-11f1-99d1-42dde27851f2",117,["D",1771538186709],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,804],{"_106":812,"_97":813,"_162":814,"_164":636,"_165":147,"_166":815,"_168":169,"_108":816,"_102":33,"_171":646,"_173":817,"_174":22,"_175":-5,"_176":818,"_100":819},"d606d3bc-0ddd-11f1-a7cf-42dde27851f2","persona-opal.tsx","d606d48e-0ddd-11f1-a7cf-42dde27851f2",81,["D",1771538185483],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\ninterface StateButtonProps {\n state: { state: PersonaState; icon: LucideIcon; label: string };\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,813],{"_106":821,"_97":822,"_162":823,"_164":636,"_165":147,"_166":824,"_168":169,"_108":825,"_102":33,"_171":646,"_173":826,"_174":22,"_175":-5,"_176":827,"_100":828},"d6ed5440-0ddd-11f1-acc9-42dde27851f2","prompt-input-tooltip.tsx","d6ed5526-0ddd-11f1-acc9-42dde27851f2",125,["D",1771538186984],"\"use client\";\n\nimport {\n PromptInput,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n} from \"@/components/ai-elements/prompt-input\";\nimport { GlobeIcon, MicIcon, PaperclipIcon } from \"lucide-react\";\n\nconst handleSubmit = () => {\n // Handle submit\n};\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,822],{"_106":830,"_97":831,"_162":832,"_164":636,"_165":147,"_166":833,"_168":169,"_108":834,"_102":33,"_171":646,"_173":835,"_174":22,"_175":-5,"_176":836,"_100":837},"d6dcd660-0ddd-11f1-acc9-42dde27851f2","prompt-input.tsx","d6dcd732-0ddd-11f1-acc9-42dde27851f2",122,["D",1771538186887],"\"use client\";\n\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorEmpty,\n ModelSelectorGroup,\n ModelSelectorInput,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorLogoGroup,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from \"@/components/ai-elements/model-selector\";\nimport {\n PromptInput,\n PromptInputActionAddAttachments,\n PromptInputActionMenu,\n PromptInputActionMenuContent,\n PromptInputActionMenuTrigger,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputProvider,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n} from \"@/components/ai-elements/prompt-input\";\nimport { CheckIcon, GlobeIcon } from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst models = [\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o\",\n name: \"GPT-4o\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o-mini\",\n name: \"GPT-4o Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-opus-4-20250514\",\n name: \"Claude 4 Opus\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-sonnet-4-20250514\",\n name: \"Claude 4 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-2.0-flash-exp\",\n name: \"Gemini 2.0 Flash\",\n providers: [\"google\"],\n },\n];\n\nconst SUBMITTING_TIMEOUT = 200;\nconst STREAMING_TIMEOUT = 2000;\n\ninterface AttachmentItemProps {\n attachment: {\n id: string;\n type: \"file\";\n filename?: string;\n mediaType?: string;\n url: string;\n };\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\ninterface ModelItemProps {\n m: (typeof models)[0];\n selectedModel: string;\n onSelect: (id: string) => void;\n}\n\nconst ModelItem = memo(({ m, selectedModel, onSelect }: ModelItemProps) => {\n const handleSelect = useCallback(() => onSelect(m.id), [onSelect, m.id]);\n return (\n \n \n {m.name}\n \n {m.providers.map((provider) => (\n \n ))}\n \n {selectedModel === m.id\n ? \n :

}\n \n );\n});\n\nModelItem.displayName = \"ModelItem\";\n\nconst PromptInputAttachmentsDisplay = () => {\n const attachments = usePromptInputAttachments();\n\n const handleRemove = useCallback(\n (id: string) => attachments.remove(id),\n [attachments],\n );\n\n if (attachments.files.length === 0) {\n return null;\n }\n\n return (\n \n {attachments.files.map((attachment) => (\n \n ))}\n \n );\n};\n\nconst Example = () => {\n const [model, setModel] = useState(models[0].id);\n const [modelSelectorOpen, setModelSelectorOpen] = useState(false);\n const [status, setStatus] = useState<\n \"submitted\" | \"streaming\" | \"ready\" | \"error\"\n >(\"ready\");\n\n const selectedModelData = models.find((m) => m.id === model);\n\n const handleModelSelect = useCallback((id: string) => {\n setModel(id);\n setModelSelectorOpen(false);\n }, []);\n\n const handleSubmit = useCallback((message: PromptInputMessage) => {\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n setStatus(\"submitted\");\n\n // eslint-disable-next-line no-console\n console.log(\"Submitting message:\", message);\n\n setTimeout(() => {\n setStatus(\"streaming\");\n }, SUBMITTING_TIMEOUT);\n\n setTimeout(() => {\n setStatus(\"ready\");\n }, STREAMING_TIMEOUT);\n }, []);\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Search\n \n \n \n \n {selectedModelData?.chefSlug && (\n \n )}\n {selectedModelData?.name && (\n \n {selectedModelData.name}\n \n )}\n \n \n \n \n \n No models found.\n {[\"OpenAI\", \"Anthropic\", \"Google\"].map((chef) => (\n \n {models\n .filter((m) => m.chef === chef)\n .map((m) => (\n \n ))}\n \n ))}\n \n \n \n \n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,831],{"_106":839,"_97":840,"_162":841,"_164":636,"_165":147,"_166":842,"_168":169,"_108":843,"_102":33,"_171":646,"_173":844,"_174":22,"_175":-5,"_176":845,"_100":846},"d68a668c-0ddd-11f1-93ea-42dde27851f2","queue.tsx","d68a675e-0ddd-11f1-93ea-42dde27851f2",107,["D",1771538186298],"\"use client\";\n\nimport type { QueueMessage, QueueTodo } from \"@/components/ai-elements/queue\";\n\nimport {\n Queue,\n QueueItem,\n QueueItemAction,\n QueueItemActions,\n QueueItemAttachment,\n QueueItemContent,\n QueueItemDescription,\n QueueItemFile,\n QueueItemImage,\n QueueItemIndicator,\n QueueList,\n QueueSection,\n QueueSectionContent,\n QueueSectionLabel,\n QueueSectionTrigger,\n} from \"@/components/ai-elements/queue\";\nimport { ArrowUp, Trash2 } from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst sampleMessages: QueueMessage[] = [\n {\n id: \"msg-1\",\n parts: [{ text: \"How do I set up the project?\", type: \"text\" }],\n },\n {\n id: \"msg-2\",\n parts: [{ text: \"What is the roadmap for Q4?\", type: \"text\" }],\n },\n {\n id: \"msg-3\",\n parts: [\n { text: \"Update the default logo to this png.\", type: \"text\" },\n {\n filename: \"setup-guide.png\",\n mediaType: \"image/png\",\n type: \"file\",\n url: \"https://github.com/haydenbleasel.png\",\n },\n ],\n },\n {\n id: \"msg-4\",\n parts: [{ text: \"Please generate a changelog.\", type: \"text\" }],\n },\n {\n id: \"msg-5\",\n parts: [{ text: \"Add dark mode support.\", type: \"text\" }],\n },\n {\n id: \"msg-6\",\n parts: [{ text: \"Optimize database queries.\", type: \"text\" }],\n },\n {\n id: \"msg-7\",\n parts: [{ text: \"Set up CI/CD pipeline.\", type: \"text\" }],\n },\n];\n\nconst sampleTodos: QueueTodo[] = [\n {\n description: \"Complete the README and API docs\",\n id: \"todo-1\",\n status: \"completed\",\n title: \"Write project documentation\",\n },\n {\n id: \"todo-2\",\n status: \"pending\",\n title: \"Implement authentication\",\n },\n {\n description: \"Resolve crash on settings page\",\n id: \"todo-3\",\n status: \"pending\",\n title: \"Fix bug #42\",\n },\n {\n description: \"Unify queue and todo state management\",\n id: \"todo-4\",\n status: \"pending\",\n title: \"Refactor queue logic\",\n },\n {\n description: \"Increase test coverage for hooks\",\n id: \"todo-5\",\n status: \"pending\",\n title: \"Add unit tests\",\n },\n];\n\ninterface MessageActionsProps {\n messageId: string;\n onRemove: (e: React.MouseEvent, id: string) => void;\n onSend: (e: React.MouseEvent, id: string) => void;\n}\n\nconst MessageActions = memo(\n ({ messageId, onRemove, onSend }: MessageActionsProps) => {\n const handleRemove = useCallback(\n (e: React.MouseEvent) => onRemove(e, messageId),\n [onRemove, messageId],\n );\n const handleSend = useCallback(\n (e: React.MouseEvent) => onSend(e, messageId),\n [onSend, messageId],\n );\n return (\n \n \n \n \n \n \n \n \n );\n },\n);\n\nMessageActions.displayName = \"MessageActions\";\n\ninterface TodoItemProps {\n todo: QueueTodo;\n onRemove: (id: string) => void;\n}\n\nconst TodoItem = memo(({ todo, onRemove }: TodoItemProps) => {\n const isCompleted = todo.status === \"completed\";\n const handleRemove = useCallback(\n () => onRemove(todo.id),\n [onRemove, todo.id],\n );\n\n return (\n \n

\n \n \n {todo.title}\n \n \n \n \n \n \n

\n {todo.description && (\n \n {todo.description}\n \n )}\n \n );\n});\n\nTodoItem.displayName = \"TodoItem\";\n\nconst Example = () => {\n const [messages, setMessages] = useState(sampleMessages);\n const [todos, setTodos] = useState(sampleTodos);\n\n const handleRemoveMessage = useCallback((id: string) => {\n setMessages((prev) => prev.filter((msg) => msg.id !== id));\n }, []);\n\n const handleRemoveTodo = useCallback((id: string) => {\n setTodos((prev) => prev.filter((todo) => todo.id !== id));\n }, []);\n\n const handleSendNow = useCallback((id: string) => {\n console.log(\"Send now:\", id);\n setMessages((prev) => prev.filter((msg) => msg.id !== id));\n }, []);\n\n const handleMessageRemove = useCallback(\n (e: React.MouseEvent, id: string) => {\n e.preventDefault();\n e.stopPropagation();\n handleRemoveMessage(id);\n },\n [handleRemoveMessage],\n );\n\n const handleMessageSend = useCallback(\n (e: React.MouseEvent, id: string) => {\n e.preventDefault();\n e.stopPropagation();\n handleSendNow(id);\n },\n [handleSendNow],\n );\n\n if (messages.length === 0 && todos.length === 0) {\n return null;\n }\n\n return (\n \n {messages.length > 0 && (\n \n \n \n \n \n \n {messages.map((message) => {\n const summary = (() => {\n const textParts = message.parts.filter(\n (p) => p.type === \"text\",\n );\n const text = textParts\n .map((p) => p.text)\n .join(\" \")\n .trim();\n return text || \"(queued message)\";\n })();\n\n const hasFiles = message.parts.some(\n (p) => p.type === \"file\" && p.url,\n );\n\n return (\n \n

\n \n {summary}\n \n

\n {hasFiles && (\n \n {message.parts\n .filter((p) => p.type === \"file\" && p.url)\n .map((file) => {\n if (\n file.mediaType?.startsWith(\"image/\") &&\n file.url\n ) {\n return (\n \n );\n }\n return (\n \n {file.filename || \"file\"}\n \n );\n })}\n \n )}\n \n );\n })}\n \n \n \n )}\n {todos.length > 0 && (\n \n \n \n \n \n \n {todos.map((todo) => (\n \n ))}\n \n \n \n )}\n \n );\n};\n\nexport default Example;\n",[],[161,180,187,635,840],{"_106":848,"_97":849,"_162":850,"_164":636,"_165":147,"_166":851,"_168":169,"_108":852,"_102":33,"_171":646,"_173":853,"_174":22,"_175":-5,"_176":854,"_100":855},"d60f005a-0ddd-11f1-83d9-42dde27851f2","reasoning.tsx","d60f012c-0ddd-11f1-83d9-42dde27851f2",82,["D",1771538185498],"\"use client\";\n\nimport {\n Reasoning,\n ReasoningContent,\n ReasoningTrigger,\n} from \"@/components/ai-elements/reasoning\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nconst reasoningSteps = [\n \"Let me think about this problem step by step.\",\n \"\\n\\nFirst, I need to understand what the user is asking for.\",\n \"\\n\\nThey want a reasoning component that opens automatically when streaming begins and closes when streaming finishes. The component should be composable and follow existing patterns in the codebase.\",\n \"\\n\\nThis seems like a collapsible component with state management would be the right approach.\",\n].join(\"\");\n\nconst Example = () => {\n const [content, setContent] = useState(\"\");\n const [isStreaming, setIsStreaming] = useState(false);\n const [currentTokenIndex, setCurrentTokenIndex] = useState(0);\n const [tokens, setTokens] = useState([]);\n\n // Function to chunk text into fake tokens of 3-4 characters\n const chunkIntoTokens = useCallback((text: string): string[] => {\n const tokens: string[] = [];\n let i = 0;\n while (i < text.length) {\n // Random size between 3-4\n const chunkSize = Math.floor(Math.random() * 2) + 3;\n tokens.push(text.slice(i, i + chunkSize));\n i += chunkSize;\n }\n return tokens;\n }, []);\n\n useEffect(() => {\n const tokenizedSteps = chunkIntoTokens(reasoningSteps);\n setTokens(tokenizedSteps);\n setContent(\"\");\n setCurrentTokenIndex(0);\n setIsStreaming(true);\n }, [chunkIntoTokens]);\n\n useEffect(() => {\n if (!isStreaming || currentTokenIndex >= tokens.length) {\n if (isStreaming) {\n setIsStreaming(false);\n }\n return;\n }\n\n // Faster interval since we're streaming smaller chunks\n const timer = setTimeout(() => {\n setContent((prev) => prev + tokens[currentTokenIndex]);\n setCurrentTokenIndex((prev) => prev + 1);\n }, 25);\n\n return () => clearTimeout(timer);\n }, [isStreaming, currentTokenIndex, tokens]);\n\n return (\n

\n \n \n {content}\n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,849],{"_106":857,"_97":858,"_162":859,"_164":636,"_165":147,"_166":860,"_168":169,"_108":861,"_102":33,"_171":646,"_173":862,"_174":22,"_175":-5,"_176":863,"_100":864},"d6e1222e-0ddd-11f1-99d1-42dde27851f2","schema-display-body.tsx","d6e122e2-0ddd-11f1-99d1-42dde27851f2",123,["D",1771538186916],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[161,180,187,635,858],{"_106":866,"_97":867,"_162":868,"_164":636,"_165":147,"_166":869,"_168":169,"_108":870,"_102":33,"_171":646,"_173":871,"_174":22,"_175":-5,"_176":872,"_100":873},"d6618398-0ddd-11f1-a0cd-42dde27851f2","schema-display-nested.tsx","d66184ec-0ddd-11f1-a0cd-42dde27851f2",99,["D",1771538186065],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[161,180,187,635,867],{"_106":875,"_97":876,"_162":877,"_164":636,"_165":147,"_166":878,"_168":169,"_108":879,"_102":33,"_171":646,"_173":880,"_174":22,"_175":-5,"_176":881,"_100":882},"d66c453a-0ddd-11f1-8ab1-42dde27851f2","schema-display-params.tsx","d66c45f8-0ddd-11f1-8ab1-42dde27851f2",101,["D",1771538186141],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[161,180,187,635,876],{"_106":884,"_97":885,"_162":886,"_164":636,"_165":147,"_166":887,"_168":169,"_108":888,"_102":33,"_171":646,"_173":889,"_174":22,"_175":-5,"_176":890,"_100":891},"d6577de4-0ddd-11f1-8ab1-42dde27851f2","schema-display.tsx","d6577e8e-0ddd-11f1-8ab1-42dde27851f2",97,["D",1771538185973],"\"use client\";\n\nimport {\n SchemaDisplay,\n SchemaDisplayContent,\n SchemaDisplayDescription,\n SchemaDisplayHeader,\n SchemaDisplayMethod,\n SchemaDisplayParameters,\n SchemaDisplayPath,\n SchemaDisplayRequest,\n SchemaDisplayResponse,\n} from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n \n

\n \n \n

\n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,885],{"_106":893,"_97":894,"_162":895,"_164":636,"_165":147,"_166":896,"_168":169,"_108":897,"_102":33,"_171":646,"_173":898,"_174":22,"_175":-5,"_176":899,"_100":900},"d65e7d9c-0ddd-11f1-acc9-42dde27851f2","shimmer-duration.tsx","d65e7e96-0ddd-11f1-acc9-42dde27851f2",98,["D",1771538186026],"\"use client\";\n\nimport { Shimmer } from \"@/components/ai-elements/shimmer\";\n\nconst Example = () => (\n

Fast (1 second)

\n Loading quickly...\n

\n\n

Default (2 seconds)

\n Loading at normal speed...\n

\n\n

Slow (4 seconds)

\n Loading slowly...\n

\n\n

\n Very Slow (6 seconds)\n

\n Loading very slowly...\n

\n);\n\nexport default Example;\n",[],[161,180,187,635,894],{"_106":902,"_97":903,"_162":904,"_164":636,"_165":147,"_166":905,"_168":169,"_108":906,"_102":33,"_171":646,"_173":907,"_174":22,"_175":-5,"_176":908,"_100":909},"d679767e-0ddd-11f1-bf00-42dde27851f2","shimmer-elements.tsx","d679775a-0ddd-11f1-bf00-42dde27851f2",104,["D",1771538186234],"\"use client\";\n\nimport { Shimmer } from \"@/components/ai-elements/shimmer\";\n\nconst Example = () => (\n

\n As paragraph (default)\n

\n This is rendered as a paragraph\n

\n\n

As heading

\n \n Large Heading with Shimmer\n \n

\n\n

As span (inline)

\n Processing your request{\" \"}\n \n with AI magic\n \n ...\n

\n\n

\n As div with custom styling\n

\n \n Custom styled shimmer text\n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,903],{"_106":911,"_97":912,"_162":913,"_164":636,"_165":147,"_166":914,"_168":169,"_108":915,"_102":33,"_171":646,"_173":916,"_174":22,"_175":-5,"_176":917,"_100":918},"d6a18326-0ddd-11f1-bf00-42dde27851f2","shimmer.tsx","d6a1840c-0ddd-11f1-bf00-42dde27851f2",111,["D",1771538186320],"\"use client\";\n\nimport { Shimmer } from \"@/components/ai-elements/shimmer\";\n\nconst Example = () => (\n

\n This text has a shimmer effect\n \n Large Heading\n \n \n Slower shimmer with wider spread\n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,912],{"_106":920,"_97":921,"_162":922,"_164":636,"_165":147,"_166":923,"_168":169,"_108":924,"_102":33,"_171":646,"_173":925,"_174":22,"_175":-5,"_176":926,"_100":927},"d5e65e2a-0ddd-11f1-9539-42dde27851f2","snippet-plain.tsx","d5e65f10-0ddd-11f1-9539-42dde27851f2",74,["D",1771538185259],"\"use client\";\n\nimport {\n Snippet,\n SnippetAddon,\n SnippetCopyButton,\n SnippetInput,\n} from \"@/components/ai-elements/snippet\";\n\nconst Example = () => (\n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,921],{"_106":929,"_97":930,"_162":931,"_164":636,"_165":147,"_166":932,"_168":169,"_108":933,"_102":33,"_171":646,"_173":934,"_174":22,"_175":-5,"_176":935,"_100":936},"d699422e-0ddd-11f1-93ea-42dde27851f2","sources-custom.tsx","d6994332-0ddd-11f1-93ea-42dde27851f2",110,["D",1771538186446],"\"use client\";\n\nimport {\n Source,\n Sources,\n SourcesContent,\n SourcesTrigger,\n} from \"@/components/ai-elements/sources\";\nimport { ChevronDownIcon, ExternalLinkIcon } from \"lucide-react\";\n\nconst sources = [\n { href: \"https://stripe.com/docs/api\", title: \"Stripe API Documentation\" },\n { href: \"https://docs.github.com/en/rest\", title: \"GitHub REST API\" },\n {\n href: \"https://docs.aws.amazon.com/sdk-for-javascript/\",\n title: \"AWS SDK for JavaScript\",\n },\n];\n\nconst Example = () => (\n

\n \n \n

Using {sources.length} citations

\n \n \n \n {sources.map((source) => (\n \n {source.title}\n \n \n ))}\n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,930],{"_106":938,"_97":939,"_162":940,"_164":636,"_165":147,"_166":941,"_168":169,"_108":942,"_102":33,"_171":646,"_173":943,"_174":22,"_175":-5,"_176":944,"_100":945},"d5f0075e-0ddd-11f1-83d9-42dde27851f2","sources.tsx","d5f00812-0ddd-11f1-83d9-42dde27851f2",77,["D",1771538185333],"\"use client\";\n\nimport {\n Source,\n Sources,\n SourcesContent,\n SourcesTrigger,\n} from \"@/components/ai-elements/sources\";\n\nconst sources = [\n { href: \"https://stripe.com/docs/api\", title: \"Stripe API Documentation\" },\n { href: \"https://docs.github.com/en/rest\", title: \"GitHub REST API\" },\n {\n href: \"https://docs.aws.amazon.com/sdk-for-javascript/\",\n title: \"AWS SDK for JavaScript\",\n },\n];\n\nconst Example = () => (\n

\n \n \n \n {sources.map((source) => (\n \n ))}\n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,939],{"_106":947,"_97":948,"_162":949,"_164":636,"_165":147,"_166":950,"_168":169,"_108":951,"_102":33,"_171":646,"_173":952,"_174":22,"_175":-5,"_176":953,"_100":954},"d6cebe36-0ddd-11f1-b230-42dde27851f2","speech-input.tsx","d6cebf58-0ddd-11f1-b230-42dde27851f2",119,["D",1771538186778],"\"use client\";\n\nimport { SpeechInput } from \"@/components/ai-elements/speech-input\";\nimport { useCallback, useState } from \"react\";\n\n/**\n * Fallback handler for browsers that don't support Web Speech API (Firefox, Safari).\n * This function receives recorded audio and should send it to a transcription service.\n * Example uses OpenAI Whisper API - replace with your preferred service.\n */\nconst handleAudioRecorded = async (audioBlob: Blob): Promise => {\n const formData = new FormData();\n formData.append(\"file\", audioBlob, \"audio.webm\");\n formData.append(\"model\", \"whisper-1\");\n\n const response = await fetch(\n \"https://api.openai.com/v1/audio/transcriptions\",\n {\n body: formData,\n headers: {\n Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,\n },\n method: \"POST\",\n },\n );\n\n if (!response.ok) {\n throw new Error(\"Transcription failed\");\n }\n\n const data = await response.json();\n return data.text;\n};\n\nconst Example = () => {\n const [transcript, setTranscript] = useState(\"\");\n\n const handleTranscriptionChange = useCallback((text: string) => {\n setTranscript((prev) => {\n const newText = prev ? `${prev} ${text}` : text;\n return newText;\n });\n }, []);\n\n const handleClear = useCallback(() => {\n setTranscript(\"\");\n }, []);\n\n return (\n

\n \n {transcript && (\n \n Clear\n \n )}\n

\n {transcript\n ? (\n

\n Transcript:\n

{transcript}

\n )\n : (\n

\n Click the microphone to start speaking\n

\n )}\n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,948],{"_106":956,"_97":957,"_162":958,"_164":636,"_165":147,"_166":959,"_168":169,"_108":960,"_102":33,"_171":646,"_173":961,"_174":22,"_175":-5,"_176":962,"_100":963},"d61b215a-0ddd-11f1-9539-42dde27851f2","stack-trace-collapsed.tsx","d61b2222-0ddd-11f1-9539-42dde27851f2",84,["D",1771538185603],"\"use client\";\n\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nconst errorString =\n `TypeError: Cannot read properties of undefined (reading 'map')\n at UserList (/app/src/components/UserList.tsx:15:23)\n at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)\n at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,957],{"_106":965,"_97":966,"_162":967,"_164":636,"_165":147,"_166":968,"_168":169,"_108":969,"_102":33,"_171":646,"_173":970,"_174":22,"_175":-5,"_176":971,"_100":972},"d6e6bd06-0ddd-11f1-9f87-42dde27851f2","stack-trace-no-internal.tsx","d6e6bdd8-0ddd-11f1-9f87-42dde27851f2",124,["D",1771538186951],"\"use client\";\n\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nconst errorString =\n `TypeError: Cannot read properties of undefined (reading 'map')\n at UserList (/app/src/components/UserList.tsx:15:23)\n at App (/app/src/App.tsx:42:5)\n at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)\n at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)\n at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,966],{"_106":974,"_97":975,"_162":976,"_164":636,"_165":147,"_166":977,"_168":169,"_108":978,"_102":33,"_171":646,"_173":979,"_174":22,"_175":-5,"_176":980,"_100":981},"d6483d8e-0ddd-11f1-acc9-42dde27851f2","stack-trace.tsx","d6483e4c-0ddd-11f1-acc9-42dde27851f2",95,["D",1771538185913],"\"use client\";\n\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nconst handleFilePathClick = (path: string, line: number, col: number) => {\n console.log(`Open file: ${path}:${line}:${col}`);\n};\n\nconst handleCopy = () => {\n console.log(\"Stack trace copied\");\n};\n\nconst sampleStackTrace =\n `TypeError: Cannot read properties of undefined (reading 'map')\n at UserList (/app/components/UserList.tsx:15:23)\n at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)\n at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)\n at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)\n at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)\n at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)\n at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)\n at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)\n at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22776:12)\n at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,975],{"_106":983,"_97":984,"_162":985,"_164":636,"_165":147,"_166":986,"_168":169,"_108":987,"_102":33,"_171":646,"_173":988,"_174":22,"_175":-5,"_176":989,"_100":990},"d67ceee4-0ddd-11f1-a0cd-42dde27851f2","suggestion.tsx","d67cefb6-0ddd-11f1-a0cd-42dde27851f2",105,["D",1771538186245],"\"use client\";\n\nimport { Suggestion, Suggestions } from \"@/components/ai-elements/suggestion\";\n\nconst suggestions = [\n \"What are the latest trends in AI?\",\n \"How does machine learning work?\",\n \"Explain quantum computing\",\n \"Best practices for React development\",\n \"Tell me about TypeScript benefits\",\n \"How to optimize database queries?\",\n \"What is the difference between SQL and NoSQL?\",\n \"Explain cloud computing basics\",\n];\n\nconst handleSuggestionClick = (suggestion: string) => {\n console.log(\"Selected suggestion:\", suggestion);\n};\n\nconst Example = () => (\n \n {suggestions.map((suggestion) => (\n \n ))}\n \n);\n\nexport default Example;\n",[],[161,180,187,635,984],{"_106":992,"_97":993,"_162":994,"_164":636,"_165":147,"_166":995,"_168":169,"_108":996,"_102":33,"_171":646,"_173":997,"_174":22,"_175":-5,"_176":998,"_100":999},"d683476c-0ddd-11f1-b433-42dde27851f2","task.tsx","d6834884-0ddd-11f1-b433-42dde27851f2",106,["D",1771538186246],"\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { SiReact } from \"@icons-pack/react-simple-icons\";\nimport {\n Task,\n TaskContent,\n TaskItem,\n TaskItemFile,\n TaskTrigger,\n} from \"@/components/ai-elements/task\";\nimport { nanoid } from \"nanoid\";\n\nconst Example = () => {\n const tasks: { key: string; value: ReactNode }[] = [\n { key: nanoid(), value: 'Searching \"app/page.tsx, components structure\"' },\n {\n key: nanoid(),\n value: (\n \n Read\n \n \n page.tsx\n \n \n ),\n },\n { key: nanoid(), value: \"Scanning 52 files\" },\n { key: nanoid(), value: \"Scanning 2 files\" },\n {\n key: nanoid(),\n value: (\n \n Reading files\n \n \n layout.tsx\n \n \n ),\n },\n ];\n\n return (\n

\n \n \n \n {tasks.map((task) => {task.value}\n )}\n \n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,993],{"_106":1001,"_97":1002,"_162":1003,"_164":636,"_165":147,"_166":1004,"_168":169,"_108":1005,"_102":33,"_171":646,"_173":1006,"_174":22,"_175":-5,"_176":1007,"_100":1008},"d6a99b60-0ddd-11f1-8ab1-42dde27851f2","terminal-streaming.tsx","d6a99c14-0ddd-11f1-8ab1-42dde27851f2",113,["D",1771538186538],"\"use client\";\n\nimport { Terminal } from \"@/components/ai-elements/terminal\";\nimport { useEffect, useState } from \"react\";\n\nconst lines = [\n \"\\u001B[36m$\\u001B[0m npm install\",\n \"Installing dependencies...\",\n \"\\u001B[32m✓\\u001B[0m react@19.0.0\",\n \"\\u001B[32m✓\\u001B[0m typescript@5.0.0\",\n \"\\u001B[32m✓\\u001B[0m vite@5.0.0\",\n \"\",\n \"\\u001B[32mDone!\\u001B[0m Installed 3 packages in 1.2s\",\n];\n\nconst Example = () => {\n const [output, setOutput] = useState(\"\");\n const [isStreaming, setIsStreaming] = useState(true);\n\n useEffect(() => {\n let lineIndex = 0;\n const interval = setInterval(() => {\n if (lineIndex < lines.length) {\n setOutput((prev) => prev + (prev ? \"\\n\" : \"\") + lines[lineIndex]);\n lineIndex += 1;\n } else {\n setIsStreaming(false);\n clearInterval(interval);\n }\n }, 500);\n\n return () => clearInterval(interval);\n }, []);\n\n return ;\n};\n\nexport default Example;\n",[],[161,180,187,635,1002],{"_106":1010,"_97":1011,"_162":1012,"_164":636,"_165":147,"_166":1013,"_168":169,"_108":1014,"_102":33,"_171":646,"_173":1015,"_174":22,"_175":-5,"_176":1016,"_100":1017},"d6b98dc2-0ddd-11f1-bf00-42dde27851f2","terminal.tsx","d6b98eb2-0ddd-11f1-bf00-42dde27851f2",116,["D",1771538186654],"\"use client\";\n\nimport {\n Terminal,\n TerminalActions,\n TerminalClearButton,\n TerminalContent,\n TerminalCopyButton,\n TerminalHeader,\n TerminalStatus,\n TerminalTitle,\n} from \"@/components/ai-elements/terminal\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nconst handleTerminalCopy = () => {\n console.log(\"Copied!\");\n};\n\nconst ansiOutput = `\\u001B[32m✓\\u001B[0m Compiled successfully in 1.2s\n\n\\u001B[1m\\u001B[34minfo\\u001B[0m - Collecting page data...\n\\u001B[1m\\u001B[34minfo\\u001B[0m - Generating static pages (0/3)\n\\u001B[32m✓\\u001B[0m Generated static pages (3/3)\n\n\\u001B[1m\\u001B[33mwarn\\u001B[0m - Using \\u001B[1mexperimental\\u001B[0m server actions\n\n\\u001B[36mRoute (app)\\u001B[0m \\u001B[36mSize\\u001B[0m \\u001B[36mFirst Load JS\\u001B[0m\n\\u001B[37m┌ ○ /\\u001B[0m \\u001B[32m5.2 kB\\u001B[0m \\u001B[32m87.3 kB\\u001B[0m\n\\u001B[37m├ ○ /about\\u001B[0m \\u001B[32m2.1 kB\\u001B[0m \\u001B[32m84.2 kB\\u001B[0m\n\\u001B[37m└ ○ /contact\\u001B[0m \\u001B[32m3.8 kB\\u001B[0m \\u001B[32m85.9 kB\\u001B[0m\n\n\\u001B[32m✓\\u001B[0m Build completed successfully!\n\\u001B[90mTotal time: 3.45s\\u001B[0m\n`;\n\nconst Example = () => {\n const [output, setOutput] = useState(\"\");\n const [isStreaming, setIsStreaming] = useState(true);\n\n useEffect(() => {\n let index = 0;\n const interval = setInterval(() => {\n if (index < ansiOutput.length) {\n setOutput(ansiOutput.slice(0, index + 10));\n index += 10;\n } else {\n setIsStreaming(false);\n clearInterval(interval);\n }\n }, 20);\n\n return () => clearInterval(interval);\n }, []);\n\n const handleClear = useCallback(() => {\n setOutput(\"\");\n setIsStreaming(false);\n }, []);\n\n return (\n \n \n Build Output\n

\n \n \n \n \n \n

\n \n \n \n );\n};\n\nexport default Example;\n",[],[161,180,187,635,1011],{"_106":1019,"_97":1020,"_162":1021,"_164":636,"_165":147,"_166":1022,"_168":169,"_108":1023,"_102":33,"_171":646,"_173":1024,"_174":22,"_175":-5,"_176":1025,"_100":1026},"d674cc6e-0ddd-11f1-93ea-42dde27851f2","test-results-basic.tsx","d674cd22-0ddd-11f1-93ea-42dde27851f2",103,["D",1771538185882],"\"use client\";\n\nimport {\n TestResults,\n TestResultsDuration,\n TestResultsHeader,\n TestResultsSummary,\n} from \"@/components/ai-elements/test-results\";\n\nconst Example = () => (\n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,1020],{"_106":1028,"_97":1029,"_162":1030,"_164":636,"_165":147,"_166":1031,"_168":169,"_108":1032,"_102":33,"_171":646,"_173":1033,"_174":22,"_175":-5,"_176":1034,"_100":1035},"d6ca012a-0ddd-11f1-9f87-42dde27851f2","test-results-errors.tsx","d6ca01f2-0ddd-11f1-9f87-42dde27851f2",118,["D",1771538186762],"\"use client\";\n\nimport {\n Test,\n TestError,\n TestErrorMessage,\n TestErrorStack,\n TestResults,\n TestResultsContent,\n TestResultsHeader,\n TestResultsSummary,\n TestSuite,\n TestSuiteContent,\n TestSuiteName,\n} from \"@/components/ai-elements/test-results\";\n\nconst stackTrace = ` at Object. (/app/src/api.test.ts:45:12)\n at Module._compile (node:internal/modules/cjs/loader:1369:14)\n at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n Expected 200, got 500\n {stackTrace}\n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,1029],{"_106":1037,"_97":1038,"_162":1039,"_164":636,"_165":147,"_166":1040,"_168":169,"_108":1041,"_102":33,"_171":646,"_173":1042,"_174":22,"_175":-5,"_176":1043,"_100":1044},"d5ffe53e-0ddd-11f1-9539-42dde27851f2","test-results-suites.tsx","d5ffe61a-0ddd-11f1-9539-42dde27851f2",80,["D",1771538185438],"\"use client\";\n\nimport {\n Test,\n TestResults,\n TestResultsContent,\n TestResultsHeader,\n TestResultsSummary,\n TestSuite,\n TestSuiteContent,\n TestSuiteName,\n} from \"@/components/ai-elements/test-results\";\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[161,180,187,635,1038],{"_106":1046,"_97":1047,"_162":1048,"_164":636,"_165":147,"_166":1049,"_168":169,"_108":1050,"_102":33,"_171":646,"_173":1051,"_174":22,"_175":-5,"_176":1052,"_100":1053},"d5ed243a-0ddd-11f1-9539-42dde27851f2","tool-input-available.tsx","d5ed24f8-0ddd-11f1-9539-42dde27851f2",76,["D",1771538185314],"\"use client\";\n\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n} from \"@/components/ai-elements/tool\";\nimport { nanoid } from \"nanoid\";\n\nconst toolCall = {\n errorText: undefined,\n input: {\n prompt: \"A futuristic cityscape at sunset with flying cars\",\n quality: \"high\",\n resolution: \"1024x1024\",\n style: \"digital_art\",\n },\n output: undefined,\n state: \"input-available\" as const,\n toolCallId: nanoid(),\n type: \"tool-image_generation\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,1047],{"_106":1055,"_97":1056,"_162":1057,"_164":636,"_165":147,"_166":1058,"_168":169,"_108":1059,"_102":33,"_171":646,"_173":1060,"_174":22,"_175":-5,"_176":1061,"_100":1062},"d5fb4786-0ddd-11f1-83d9-42dde27851f2","tool-input-streaming.tsx","d5fb4830-0ddd-11f1-83d9-42dde27851f2",79,["D",1771538185407],"\"use client\";\n\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n} from \"@/components/ai-elements/tool\";\nimport { nanoid } from \"nanoid\";\n\nconst toolCall = {\n errorText: undefined,\n input: {\n include_snippets: true,\n max_results: 10,\n query: \"latest AI market trends 2024\",\n },\n output: undefined,\n state: \"input-streaming\" as const,\n toolCallId: nanoid(),\n type: \"tool-web_search\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,1056],{"_106":1064,"_97":1065,"_162":1066,"_164":636,"_165":147,"_166":1067,"_168":169,"_108":1068,"_102":33,"_171":646,"_173":1069,"_174":22,"_175":-5,"_176":1070,"_100":1071},"d6d8857e-0ddd-11f1-bf00-42dde27851f2","tool-output-available.tsx","d6d8865a-0ddd-11f1-bf00-42dde27851f2",121,["D",1771538186858],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport { CodeBlock } from \"@/components/ai-elements/code-block\";\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"@/components/ai-elements/tool\";\nimport { nanoid } from \"nanoid\";\n\nconst toolCall: ToolUIPart = {\n errorText: undefined,\n input: {\n database: \"analytics\",\n params: [\"2024-01-01\"],\n query: \"SELECT COUNT(*) FROM users WHERE created_at >= ?\",\n },\n output: [\n {\n \"Created At\": \"2024-01-15\",\n Email: \"john@example.com\",\n Name: \"John Doe\",\n \"User ID\": 1,\n },\n {\n \"Created At\": \"2024-01-20\",\n Email: \"jane@example.com\",\n Name: \"Jane Smith\",\n \"User ID\": 2,\n },\n {\n \"Created At\": \"2024-02-01\",\n Email: \"bob@example.com\",\n Name: \"Bob Wilson\",\n \"User ID\": 3,\n },\n {\n \"Created At\": \"2024-02-10\",\n Email: \"alice@example.com\",\n Name: \"Alice Brown\",\n \"User ID\": 4,\n },\n {\n \"Created At\": \"2024-02-15\",\n Email: \"charlie@example.com\",\n Name: \"Charlie Davis\",\n \"User ID\": 5,\n },\n ],\n state: \"output-available\" as const,\n toolCallId: nanoid(),\n type: \"tool-database_query\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n {toolCall.state === \"output-available\" && (\n \n }\n />\n )}\n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,1065],{"_106":1073,"_97":1074,"_162":1075,"_164":636,"_165":147,"_166":1076,"_168":169,"_108":1077,"_102":33,"_171":646,"_173":1078,"_174":22,"_175":-5,"_176":1079,"_100":1080},"d63435a0-0ddd-11f1-a7cf-42dde27851f2","tool-output-error.tsx","d6343672-0ddd-11f1-a7cf-42dde27851f2",90,["D",1771538185704],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"@/components/ai-elements/tool\";\n\nconst toolCall: ToolUIPart = {\n errorText:\n \"Connection timeout: The request took longer than 5000ms to complete. Please check your network connection and try again.\",\n input: {\n headers: {\n Authorization: \"Bearer token123\",\n \"Content-Type\": \"application/json\",\n },\n method: \"GET\",\n timeout: 5000,\n url: \"https://api.example.com/data\",\n },\n output: undefined,\n state: \"output-error\" as const,\n toolCallId: \"api_request_1\",\n type: \"tool-api_request\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n {toolCall.state === \"output-error\" && (\n \n )}\n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,1074],{"_106":1082,"_97":1083,"_162":1084,"_164":636,"_165":147,"_166":1085,"_168":169,"_108":1086,"_102":33,"_171":646,"_173":1087,"_174":22,"_175":-5,"_176":1088,"_100":1089},"d61f6166-0ddd-11f1-bf1c-42dde27851f2","tool.tsx","d61f63b4-0ddd-11f1-bf1c-42dde27851f2",85,["D",1771538185634],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationAction,\n ConfirmationActions,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"@/components/ai-elements/tool\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst handleReject = () => {\n // In production, call addConfirmationResponse\n};\n\nconst handleAccept = () => {\n // In production, call addConfirmationResponse\n};\n\nconst toolCall: ToolUIPart = {\n errorText: undefined,\n input: {\n database: \"analytics\",\n params: [\"2024-01-01\"],\n query: \"SELECT COUNT(*) FROM users WHERE created_at >= ?\",\n },\n output: `| User ID | Name | Email | Created At |\n|---------|------|-------|------------|\n| 1 | John Doe | john@example.com | 2024-01-15 |\n| 2 | Jane Smith | jane@example.com | 2024-01-20 |\n| 3 | Bob Wilson | bob@example.com | 2024-02-01 |\n| 4 | Alice Brown | alice@example.com | 2024-02-10 |\n| 5 | Charlie Davis | charlie@example.com | 2024-02-15 |`,\n state: \"output-available\" as const,\n toolCallId: nanoid(),\n type: \"tool-database_query\" as const,\n};\n\nconst Example = () => (\n

\n {/* 1. input-streaming: Pending */}\n \n \n \n \n \n \n\n {/* 2. approval-requested: Awaiting Approval */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected\n \n \n \n \n Reject\n \n \n Accept\n \n \n \n \n \n\n {/* 3. approval-responded: Responded */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected\n \n \n \n \n \n\n {/* 4. input-available: Running */}\n \n \n \n \n \n \n\n {/* 5. output-available: Completed */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected\n \n \n \n {toolCall.state === \"output-available\" && (\n \n )}\n \n \n\n {/* 6. output-error: Error */}\n \n \n \n \n \n \n \n\n {/* 7. output-denied: Denied */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected: Query could impact production performance\n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[161,180,187,635,1083],{"_106":1091,"_97":1092,"_162":1093,"_164":636,"_165":147,"_166":1094,"_168":169,"_108":1095,"_102":33,"_171":646,"_173":1096,"_174":22,"_175":-5,"_176":1097,"_100":1098},"d6b04852-0ddd-11f1-93ea-42dde27851f2","voice-selector.tsx","d6b048fc-0ddd-11f1-93ea-42dde27851f2",114,["D",1771538186596],"\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport {\n VoiceSelector,\n VoiceSelectorAccent,\n VoiceSelectorAge,\n VoiceSelectorBullet,\n VoiceSelectorContent,\n VoiceSelectorDescription,\n VoiceSelectorEmpty,\n VoiceSelectorGender,\n VoiceSelectorInput,\n VoiceSelectorItem,\n VoiceSelectorList,\n VoiceSelectorName,\n VoiceSelectorPreview,\n VoiceSelectorTrigger,\n} from \"@/components/ai-elements/voice-selector\";\nimport { Button } from \"@/components/ui/button\";\nimport { memo, useCallback, useRef, useState } from \"react\";\n\nconst voices: {\n id: string;\n name: string;\n description: string;\n gender: ComponentProps[\"value\"];\n accent: ComponentProps[\"value\"];\n age: string;\n previewUrl: string;\n}[] = [\n {\n accent: \"american\",\n age: \"20-30\",\n description: \"Energetic, Social Media Creator\",\n gender: \"male\",\n id: \"liam\",\n name: \"Liam\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_16_50_Liam%20-%20Energetic%2C%20Social%20Media%20Creator_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"american\",\n age: \"30-40\",\n description: \"Dominant, Firm\",\n gender: \"male\",\n id: \"adam\",\n name: \"Adam\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_00_Adam%20-%20Dominant%2C%20Firm_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"british\",\n age: \"30-40\",\n description: \"Clear, Engaging Educator\",\n gender: \"female\",\n id: \"alice\",\n name: \"Alice\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_09_Alice%20-%20Clear%2C%20Engaging%20Educator_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"american\",\n age: \"50-60\",\n description: \"Wise, Mature, Balanced\",\n gender: \"male\",\n id: \"bill\",\n name: \"Bill\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_25_Bill%20-%20Wise%2C%20Mature%2C%20Balanced_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"american\",\n age: \"20-30\",\n description: \"Playful, Bright, Warm\",\n gender: \"female\",\n id: \"jessica\",\n name: \"Jessica\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_50_Jessica%20-%20Playful%2C%20Bright%2C%20Warm_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"british\",\n age: \"30-40\",\n description: \"Velvety Actress\",\n gender: \"female\",\n id: \"lily\",\n name: \"Lily\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_18_03_Lily%20-%20Velvety%20Actress_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n];\n\ninterface VoiceItemProps {\n voice: (typeof voices)[0];\n playingVoice: string | null;\n loadingVoice: string | null;\n onSelect: (id: string) => void;\n onPreview: (id: string) => void;\n}\n\nconst VoiceItem = memo(\n ({\n voice,\n playingVoice,\n loadingVoice,\n onSelect,\n onPreview,\n }: VoiceItemProps) => {\n const handleSelect = useCallback(\n () => onSelect(voice.id),\n [onSelect, voice.id],\n );\n const handlePreview = useCallback(\n () => onPreview(voice.id),\n [onPreview, voice.id],\n );\n return (\n \n \n {voice.name}\n {voice.description}\n \n \n \n {voice.age}\n \n \n \n );\n },\n);\n\nVoiceItem.displayName = \"VoiceItem\";\n\nconst Example = () => {\n const [open, setOpen] = useState(false);\n const [selectedVoice, setSelectedVoice] = useState(null);\n const [playingVoice, setPlayingVoice] = useState(null);\n const [loadingVoice, setLoadingVoice] = useState(null);\n const audioRef = useRef(null);\n\n const handleSelect = useCallback((voiceId: string) => {\n setSelectedVoice(voiceId);\n setOpen(false);\n }, []);\n\n const handlePreview = useCallback(\n (voiceId: string) => {\n const voice = voices.find((v) => v.id === voiceId);\n if (!voice) {\n return;\n }\n\n // If clicking the same voice that's playing, pause it\n if (playingVoice === voiceId) {\n audioRef.current?.pause();\n setPlayingVoice(null);\n return;\n }\n\n // Stop any currently playing audio\n if (audioRef.current) {\n audioRef.current.pause();\n audioRef.current = null;\n }\n\n setLoadingVoice(voiceId);\n\n const audio = new Audio(voice.previewUrl);\n audioRef.current = audio;\n\n audio.addEventListener(\"canplaythrough\", () => {\n setLoadingVoice(null);\n setPlayingVoice(voiceId);\n audio.play();\n });\n\n audio.addEventListener(\"ended\", () => {\n setPlayingVoice(null);\n });\n\n audio.addEventListener(\"error\", () => {\n setLoadingVoice(null);\n setPlayingVoice(null);\n });\n\n audio.load();\n },\n [playingVoice],\n );\n\n const selectedVoiceData = voices.find((voice) => voice.id === selectedVoice);\n\n return (\n

\n \n \n \n \n \n \n \n No voices found.\n {voices.map((voice) => (\n \n ))}\n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[161,180,187,635,1092],[161,180,187,635],[161,180,187],[161,180],{"_106":1103,"_97":1104,"_162":1105,"_164":163,"_165":147,"_166":1106,"_168":169,"_108":1107,"_102":33,"_171":205,"_173":1108,"_174":22,"_175":-5,"_176":1109,"_100":1110},"d4eea0f4-0ddd-11f1-a6ad-42dde27851f2","settings.json","d4eea1ee-0ddd-11f1-a6ad-42dde27851f2",22,["D",1771538183639],"{\n \"enabledPlugins\": {\n \"superpowers@claude-plugins-official\": true\n },\n \"hooks\": {\n \"PostToolUse\": [\n {\n \"matcher\": \"Write|Edit\",\n \"hooks\": [\n {\n \"type\": \"command\",\n \"command\": \"deno fmt \\\"$CLAUDE_FILE_PATH\\\" 2>/dev/null || true\"\n }\n ]\n }\n ]\n }\n}\n",[],[161,1104],{"_106":1112,"_97":1113,"_162":1114,"_164":163,"_165":147,"_166":1115,"_168":169,"_108":1116,"_102":33,"_171":205,"_173":1117,"_174":22,"_175":-5,"_176":1118,"_100":1119},"d4fbc73e-0ddd-11f1-af68-42dde27851f2","settings.local.json","d4fbc7f2-0ddd-11f1-af68-42dde27851f2",25,["D",1771538183724],"{\n \"env\": {\n \"ENABLE_TOOL_SEARCH\": \"true\",\n \"CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS\": \"1\",\n \"CLAUDE_CODE_DISABLE_AUTO_MEMORY\": \"0\"\n },\n \"permissions\": {\n \"allow\": [\n \"Bash(git status)\",\n \"Bash(git add:*)\",\n \"Bash(git commit:*)\",\n \"Bash(git push)\",\n \"Bash(git diff:*)\",\n \"Bash(git log:*)\",\n \"Bash(vt:*)\",\n \"Bash(find:*)\",\n \"Bash(tree:*)\",\n \"Bash(grep:*)\",\n \"Bash(deno check:*)\",\n \"mcp__playwright__*\",\n \"mcp__val-town__*\"\n ]\n },\n \"enabledMcpjsonServers\": [\"val-town\", \"playwright\"]\n}\n",[],[161,1113],[161],{"_106":1122,"_97":1123,"_162":1124,"_164":-5,"_165":147,"_166":1125,"_168":169,"_108":1126,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1127,"_100":1144},"d43583d0-0ddd-11f1-affc-42dde27851f2","backend","d4358470-0ddd-11f1-affc-42dde27851f2",3,["D",1771538182437],[1128,1136],{"_106":1129,"_97":1130,"_162":1131,"_164":1124,"_165":147,"_166":1132,"_168":169,"_108":1133,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1134,"_100":1135},"d46f556a-0ddd-11f1-affc-42dde27851f2","database","d46f5632-0ddd-11f1-affc-42dde27851f2",8,["D",1771538182814],[],[1123,1130],{"_106":1137,"_97":1138,"_162":1139,"_164":1124,"_165":147,"_166":1140,"_168":169,"_108":1141,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1142,"_100":1143},"d47e06f0-0ddd-11f1-affc-42dde27851f2","routes","d47e07f4-0ddd-11f1-affc-42dde27851f2",9,["D",1771538182911],[],[1123,1138],[1123],{"_106":1146,"_97":1147,"_162":1148,"_164":-5,"_165":147,"_166":1149,"_168":169,"_108":1150,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1151,"_100":1160},"d44b1e98-0ddd-11f1-affc-42dde27851f2","docs","d44b1f88-0ddd-11f1-affc-42dde27851f2",5,["D",1771538182578],[1152],{"_106":1153,"_97":1154,"_162":1155,"_164":1148,"_165":147,"_166":1156,"_168":169,"_108":1157,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1158,"_100":1159},"d4899330-0ddd-11f1-affc-42dde27851f2","plans","d4899416-0ddd-11f1-affc-42dde27851f2",10,["D",1771538182987],[],[1147,1154],[1147],{"_106":1162,"_97":1163,"_162":1164,"_164":-5,"_165":147,"_166":1165,"_168":169,"_108":1166,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1167,"_100":1266},"d41df620-0ddd-11f1-af68-42dde27851f2","frontend","d41df706-0ddd-11f1-af68-42dde27851f2",1,["D",1771538182280],[1168,1239,1248,1257],{"_106":1169,"_97":1170,"_162":1171,"_164":1164,"_165":147,"_166":1172,"_168":169,"_108":1173,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1174,"_100":1238},"d456d404-0ddd-11f1-affc-42dde27851f2","components","d456d4c2-0ddd-11f1-affc-42dde27851f2",6,["D",1771538182654],[1175,1184,1193,1202,1211,1220,1229],{"_106":1176,"_97":1177,"_162":1178,"_164":1171,"_165":147,"_166":1179,"_168":169,"_108":1180,"_102":33,"_171":646,"_173":1181,"_174":22,"_175":-5,"_176":1182,"_100":1183},"d4db277c-0ddd-11f1-a6ad-42dde27851f2","ChatApp.tsx","d4db2830-0ddd-11f1-a6ad-42dde27851f2",20,["D",1771538183519],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ChatApp.tsx\nimport React, {\n useCallback,\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { Conversation, ModelInfo } from \"../../shared/types.ts\";\nimport { Sidebar } from \"./Sidebar.tsx\";\nimport { ModelPicker } from \"./ModelPicker.tsx\";\nimport { ConversationView } from \"./ConversationView.tsx\";\n\nexport function ChatApp({ onLogout }: { onLogout: () => void }) {\n const [conversations, setConversations] = useState([]);\n const [activeConvId, setActiveConvId] = useState(null);\n const [models, setModels] = useState([]);\n const [showModelPicker, setShowModelPicker] = useState(false);\n\n const loadConversations = useCallback(async () => {\n const res = await fetch(\"/api/conversations\");\n const data = await res.json();\n setConversations(data);\n }, []);\n\n useEffect(() => {\n loadConversations();\n fetch(\"/api/models\").then((r) => r.json()).then(setModels);\n }, []);\n\n const handleNewChat = () => {\n setShowModelPicker(true);\n setActiveConvId(null);\n };\n\n const handleCreateConversation = async (selectedModelIds: string[]) => {\n const res = await fetch(\"/api/conversations\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n title: \"New Conversation\",\n model_ids: selectedModelIds,\n }),\n });\n const { id } = await res.json();\n setShowModelPicker(false);\n setActiveConvId(id);\n await loadConversations();\n };\n\n const handleDeleteConversation = async (id: string) => {\n await fetch(`/api/conversations/${id}`, { method: \"DELETE\" });\n if (activeConvId === id) setActiveConvId(null);\n await loadConversations();\n };\n\n return (\n

\n \n

\n {showModelPicker\n ? (\n setShowModelPicker(false)}\n />\n )\n : activeConvId\n ? (\n \n )\n : (\n

\n Select a conversation or start a new one\n

\n )}\n

\n );\n}\n",[],[1163,1170,1177],{"_106":1185,"_97":1186,"_162":1187,"_164":1171,"_165":147,"_166":1188,"_168":169,"_108":1189,"_102":33,"_171":646,"_173":1190,"_174":22,"_175":-5,"_176":1191,"_100":1192},"d4d24d82-0ddd-11f1-a6ad-42dde27851f2","ConversationView.tsx","d4d24e4a-0ddd-11f1-a6ad-42dde27851f2",18,["D",1771538183447],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ConversationView.tsx\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { ConversationDetail, ModelInfo } from \"../../shared/types.ts\";\nimport { MessageRow } from \"./MessageRow.tsx\";\nimport { PromptInput } from \"./PromptInput.tsx\";\n\ninterface ConversationViewProps {\n conversationId: string;\n models: ModelInfo[];\n onTitleUpdate: () => void;\n}\n\ninterface StreamingState {\n [modelId: string]: string;\n}\n\nexport function ConversationView(\n { conversationId, models, onTitleUpdate }: ConversationViewProps,\n) {\n const [conversation, setConversation] = useState(\n null,\n );\n const [streaming, setStreaming] = useState(false);\n const [streamingResponses, setStreamingResponses] = useState(\n {},\n );\n const [streamingMessageContent, setStreamingMessageContent] = useState<\n string | null\n >(null);\n const messagesEndRef = useRef(null);\n\n const modelNames = Object.fromEntries(models.map((m) => [m.id, m.name]));\n\n const loadConversation = useCallback(async () => {\n const res = await fetch(`/api/conversations/${conversationId}`);\n const data = await res.json();\n setConversation(data);\n }, [conversationId]);\n\n useEffect(() => {\n loadConversation();\n setStreamingResponses({});\n setStreamingMessageContent(null);\n }, [conversationId]);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [conversation, streamingResponses]);\n\n const handleSend = async (content: string) => {\n if (!conversation) return;\n\n setStreaming(true);\n setStreamingMessageContent(content);\n // Initialize streaming state for each model\n const initialState: StreamingState = {};\n for (const modelId of conversation.model_ids) {\n initialState[modelId] = \"\";\n }\n setStreamingResponses(initialState);\n\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ conversation_id: conversationId, content }),\n });\n\n const reader = response.body?.getReader();\n if (!reader) return;\n\n const decoder = new TextDecoder();\n let buffer = \"\";\n let currentEvent = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() || \"\";\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n currentEvent = line.slice(7).trim();\n } else if (line.startsWith(\"data: \")) {\n try {\n const data = JSON.parse(line.slice(6));\n if (currentEvent === \"chunk\" && data.content && data.model_id) {\n setStreamingResponses((prev) => ({\n ...prev,\n [data.model_id]: (prev[data.model_id] || \"\") + data.content,\n }));\n }\n } catch {\n // Skip unparseable\n }\n currentEvent = \"\";\n } else if (line.trim() === \"\") {\n currentEvent = \"\";\n }\n }\n }\n } catch (err) {\n console.error(\"Stream error:\", err);\n } finally {\n setStreaming(false);\n setStreamingMessageContent(null);\n setStreamingResponses({});\n await loadConversation();\n onTitleUpdate();\n }\n };\n\n if (!conversation) {\n return (\n

\n Loading...\n

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

\n {/* Header */}\n

{conversation.title}

\n {conversation.model_ids.map((id) => (\n \n {modelNames[id] || id}\n \n ))}\n

\n\n {/* Messages */}\n

\n {conversation.messages.map((msg) => (\n {\n const resp = msg.responses.find((r) => r.model_id === modelId);\n return { model_id: modelId, content: resp?.content || \"\" };\n })}\n modelNames={modelNames}\n />\n ))}\n\n {/* Currently streaming message */}\n {streamingMessageContent && (\n ({\n model_id: modelId,\n content: streamingResponses[modelId] || \"\",\n }))}\n modelNames={modelNames}\n streaming\n />\n )}\n

\n\n \n

\n );\n}\n",[],[1163,1170,1186],{"_106":1194,"_97":1195,"_162":1196,"_164":1171,"_165":147,"_166":1197,"_168":169,"_108":1198,"_102":33,"_171":646,"_173":1199,"_174":22,"_175":-5,"_176":1200,"_100":1201},"d5269e28-0ddd-11f1-8b80-42dde27851f2","Login.tsx","d5269f04-0ddd-11f1-8b80-42dde27851f2",33,["D",1771538183357],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/Login.tsx\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Login({ onSuccess }: { onSuccess: () => void }) {\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n try {\n const res = await fetch(\"/api/auth\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ password }),\n });\n if (res.ok) {\n onSuccess();\n } else {\n setError(\"Invalid password\");\n }\n } catch {\n setError(\"Connection error\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n \n

\n PromptCompare\n

\n setPassword(e.target.value)}\n placeholder=\"Password\"\n className=\"w-full px-3 py-2 border rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n autoFocus\n />\n {error &&

{error}

}\n \n {loading ? \"...\" : \"Sign In\"}\n \n \n

\n );\n}\n",[],[1163,1170,1195],{"_106":1203,"_97":1204,"_162":1205,"_164":1171,"_165":147,"_166":1206,"_168":169,"_108":1207,"_102":33,"_171":646,"_173":1208,"_174":22,"_175":-5,"_176":1209,"_100":1210},"d4d6f13e-0ddd-11f1-b72b-42dde27851f2","MessageRow.tsx","d4d6f210-0ddd-11f1-b72b-42dde27851f2",19,["D",1771538183476],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/MessageRow.tsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@15.0.6?deps=react@18.2.0,react-dom@18.2.0\";\n\ninterface MessageRowProps {\n userContent: string;\n responses: { model_id: string; content: string }[];\n modelNames: Record;\n streaming?: boolean;\n}\n\nexport function MessageRow(\n { userContent, responses, modelNames, streaming }: MessageRowProps,\n) {\n return (\n

\n {/* User message */}\n

\n {userContent}\n

\n\n {/* Model responses side by side */}\n \n {responses.map((resp) => (\n \n

\n {modelNames[resp.model_id] || resp.model_id}\n

\n ...'\n : 'No response',\n }}\n />\n

\n ))}\n

\n );\n}\n",[],[1163,1170,1204],{"_106":1212,"_97":1213,"_162":1214,"_164":1171,"_165":147,"_166":1215,"_168":169,"_108":1216,"_102":33,"_171":646,"_173":1217,"_174":22,"_175":-5,"_176":1218,"_100":1219},"d4c4acf4-0ddd-11f1-a0cd-42dde27851f2","ModelPicker.tsx","d4c4adc6-0ddd-11f1-a0cd-42dde27851f2",16,["D",1771538183358],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ModelPicker.tsx\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ModelInfo } from \"../../shared/types.ts\";\n\ninterface ModelPickerProps {\n models: ModelInfo[];\n onConfirm: (modelIds: string[]) => void;\n onCancel: () => void;\n}\n\nexport function ModelPicker({ models, onConfirm, onCancel }: ModelPickerProps) {\n const [selected, setSelected] = useState>(new Set());\n\n const toggle = (id: string) => {\n setSelected((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else if (next.size < 4) {\n next.add(id);\n }\n return next;\n });\n };\n\n // Group by family\n const families = new Map();\n for (const m of models) {\n const fam = m.family;\n if (!families.has(fam)) families.set(fam, []);\n families.get(fam)!.push(m);\n }\n\n return (\n

Select Models

\n Choose up to 4 models to compare ({selected.size}/4)\n

\n\n {Array.from(families.entries()).map(([family, familyModels]) => (\n

\n {family}\n

\n {familyModels.map((model) => (\n = 4\n ? \"opacity-50 cursor-not-allowed\"\n : \"\"\n }`}\n >\n toggle(model.id)}\n disabled={!selected.has(model.id) && selected.size >= 4}\n className=\"rounded\"\n />\n

\n {model.name}\n

\n \n ${model.cost.input}/${model.cost.output} per 1M\n \n \n ))}\n

\n ))}\n\n

\n \n Cancel\n \n onConfirm(Array.from(selected))}\n disabled={selected.size === 0}\n className=\"px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50\"\n >\n Start Comparison\n \n

\n );\n}\n",[],[1163,1170,1213],{"_106":1221,"_97":1222,"_162":1223,"_164":1171,"_165":147,"_166":1224,"_168":169,"_108":1225,"_102":33,"_171":646,"_173":1226,"_174":22,"_175":-5,"_176":1227,"_100":1228},"d4bb0c3a-0ddd-11f1-af68-42dde27851f2","PromptInput.tsx","d4bb0d02-0ddd-11f1-af68-42dde27851f2",14,["D",1771538183310],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/PromptInput.tsx\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface PromptInputProps {\n onSend: (content: string) => void;\n disabled: boolean;\n}\n\nexport function PromptInput({ onSend, disabled }: PromptInputProps) {\n const [value, setValue] = useState(\"\");\n const textareaRef = useRef(null);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const trimmed = value.trim();\n if (!trimmed || disabled) return;\n onSend(trimmed);\n setValue(\"\");\n if (textareaRef.current) textareaRef.current.style.height = \"auto\";\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n };\n\n const handleInput = () => {\n const el = textareaRef.current;\n if (el) {\n el.style.height = \"auto\";\n el.style.height = Math.min(el.scrollHeight, 200) + \"px\";\n }\n };\n\n return (\n \n );\n}\n",[],[1163,1170,1222],{"_106":1230,"_97":1231,"_162":1232,"_164":1171,"_165":147,"_166":1233,"_168":169,"_108":1234,"_102":33,"_171":646,"_173":1235,"_174":22,"_175":-5,"_176":1236,"_100":1237},"d4cc7ba0-0ddd-11f1-bb81-42dde27851f2","Sidebar.tsx","d4cc7dee-0ddd-11f1-bb81-42dde27851f2",17,["D",1771538183419],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/Sidebar.tsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Conversation } from \"../../shared/types.ts\";\n\ninterface SidebarProps {\n conversations: Conversation[];\n activeId: string | null;\n onSelect: (id: string) => void;\n onNewChat: () => void;\n onDelete: (id: string) => void;\n onLogout: () => void;\n}\n\nexport function Sidebar(\n { conversations, activeId, onSelect, onNewChat, onDelete, onLogout }:\n SidebarProps,\n) {\n return (\n

\n \n + New Comparison\n \n

\n {conversations.map((conv) => (\n onSelect(conv.id)}\n >\n {conv.title}\n {\n e.stopPropagation();\n onDelete(conv.id);\n }}\n className=\"opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-400 ml-2\"\n >\n x\n \n

\n ))}\n

\n {\n await fetch(\"/api/auth/logout\", { method: \"POST\" });\n onLogout();\n }}\n className=\"text-sm text-gray-400 hover:text-white\"\n >\n Sign out\n \n

\n );\n}\n",[],[1163,1170,1231],[1163,1170],{"_106":1240,"_97":1241,"_162":1242,"_164":1164,"_165":147,"_166":1243,"_168":169,"_108":1244,"_102":33,"_171":205,"_173":1245,"_174":22,"_175":-5,"_176":1246,"_100":1247},"d4bf34d6-0ddd-11f1-af68-42dde27851f2","index.html","d4bf36c0-0ddd-11f1-af68-42dde27851f2",15,["D",1771538183337],"\n\n\n \n \n \n PromptCompare\n \n \n \n \n \n

\n \n \n\n",[],[1163,1241],{"_106":1249,"_97":1250,"_162":1251,"_164":1164,"_165":147,"_166":1252,"_168":169,"_108":1253,"_102":33,"_171":646,"_173":1254,"_174":22,"_175":-5,"_176":1255,"_100":1256},"d5868c8e-0ddd-11f1-b033-42dde27851f2","index.tsx","d5868d9c-0ddd-11f1-b033-42dde27851f2",51,["D",1771538183354],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/index.tsx\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Login } from \"./components/Login.tsx\";\nimport { ChatApp } from \"./components/ChatApp.tsx\";\n\nfunction App() {\n const [authenticated, setAuthenticated] = useState(null);\n\n useEffect(() => {\n fetch(\"/api/auth/check\")\n .then((r) => r.json())\n .then((d) => setAuthenticated(d.authenticated))\n .catch(() => setAuthenticated(false));\n }, []);\n\n if (authenticated === null) {\n return (\n

\n Loading...\n

\n );\n }\n\n if (!authenticated) {\n return setAuthenticated(true)} />;\n }\n\n return setAuthenticated(false)} />;\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[1163,1250],{"_106":1258,"_97":1259,"_162":1260,"_164":1164,"_165":147,"_166":1261,"_168":169,"_108":1262,"_102":33,"_171":205,"_173":1263,"_174":22,"_175":-5,"_176":1264,"_100":1265},"d4e03898-0ddd-11f1-af68-42dde27851f2","style.css","d4e0394c-0ddd-11f1-af68-42dde27851f2",21,["D",1771538183552],"/* frontend/style.css */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nhtml, body, #root {\n height: 100%;\n}\nbody {\n font-family:\n -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* Markdown rendered in responses */\n.prose pre {\n background: #1e1e1e;\n color: #d4d4d4;\n padding: 1rem;\n border-radius: 0.5rem;\n overflow-x: auto;\n}\n.prose code {\n font-size: 0.875rem;\n}\n.prose p {\n margin-bottom: 0.5rem;\n}\n.prose ul, .prose ol {\n margin-left: 1.5rem;\n margin-bottom: 0.5rem;\n}\n",[],[1163,1259],[1163],{"_106":1268,"_97":1269,"_162":1270,"_164":-5,"_165":147,"_166":1271,"_168":169,"_108":1272,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1273,"_100":1274},"d440b0c0-0ddd-11f1-affc-42dde27851f2","shared","d440b188-0ddd-11f1-affc-42dde27851f2",4,["D",1771538182510],[],[1269],{"_106":1276,"_97":1277,"_162":1278,"_164":-5,"_165":147,"_166":1279,"_168":169,"_108":1280,"_102":33,"_171":205,"_173":1281,"_174":22,"_175":-5,"_176":1282,"_100":1283},"d4f91142-0ddd-11f1-b72b-42dde27851f2",".mcp.json","d4f9120a-0ddd-11f1-b72b-42dde27851f2",24,["D",1771538183639],"{\n \"mcpServers\": {\n \"val-town\": {\n \"type\": \"http\",\n \"url\": \"https://api.val.town/v3/mcp\"\n },\n \"playwright\": {\n \"command\": \"npx\",\n \"args\": [\"@playwright/mcp@latest\"]\n }\n }\n}\n",[],[1277],{"_106":1285,"_97":1286,"_162":1287,"_164":-5,"_165":147,"_166":1288,"_168":169,"_108":1289,"_102":33,"_171":205,"_173":1290,"_174":22,"_175":-5,"_176":1291,"_100":1292},"d4f27922-0ddd-11f1-bb81-42dde27851f2","deno.json","d4f279ea-0ddd-11f1-bb81-42dde27851f2",23,["D",1771538183658],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"fmt\": {\n \"exclude\": [\".claude/skills\"]\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[],[1286],"files",[159,178,185,192,199,209,218,227,236,245,254,263,272,281,290,299,308,317,326,335,344,353,362,371,380,389,398,407,416,425,434,443,452,461,470,479,488,497,506,515,524,533,542,551,560,569,578,587,596,605,614,623,633,640,650,659,668,677,686,695,704,713,722,731,740,749,758,766,775,784,793,802,811,820,829,838,847,856,865,874,883,892,901,910,919,928,937,946,955,964,973,982,991,1000,1009,1018,1027,1036,1045,1054,1063,1072,1081,1090,1102,1111,1121,1128,1136,1145,1152,1161,1168,1175,1184,1193,1202,1211,1220,1229,1239,1248,1257,1267,1275,1284],"counts",{"_1297":33,"_1298":1165,"_1299":33,"_1300":1301,"_1304":1305},"pulls","branches","forks","envVars",{"_1302":167,"_1303":33},"count","emptyCount","connections",{"_1302":33,"_1306":33},"unfilledCount","contents",[1309,1312,1315,1318,1321,1324,1327,1330,1333,1336,1339,1342,1345,1348,1351,1354,1357,1360,1363,1366,1369,1372,1375,1378,1381,1384,1387,1390,1393,1396,1399,1402,1405,1408,1411,1414,1417,1420,1423,1426,1429,1432,1435,1438,1441,1444,1447,1450],{"_106":200,"_97":201,"_162":202,"_164":195,"_165":147,"_166":203,"_168":169,"_108":1310,"_102":33,"_171":205,"_173":206,"_174":22,"_175":-5,"_100":1311},["D",1771538183762],[161,180,187,194,201],{"_106":210,"_97":211,"_162":212,"_164":195,"_165":147,"_166":213,"_168":169,"_108":1313,"_102":33,"_171":205,"_173":215,"_174":22,"_175":-5,"_100":1314},["D",1771538184476],[161,180,187,194,211],{"_106":219,"_97":220,"_162":221,"_164":195,"_165":147,"_166":222,"_168":169,"_108":1316,"_102":33,"_171":205,"_173":224,"_174":22,"_175":-5,"_100":1317},["D",1771538184054],[161,180,187,194,220],{"_106":228,"_97":229,"_162":230,"_164":195,"_165":147,"_166":231,"_168":169,"_108":1319,"_102":33,"_171":205,"_173":233,"_174":22,"_175":-5,"_100":1320},["D",1771538183955],[161,180,187,194,229],{"_106":237,"_97":238,"_162":239,"_164":195,"_165":147,"_166":240,"_168":169,"_108":1322,"_102":33,"_171":205,"_173":242,"_174":22,"_175":-5,"_100":1323},["D",1771538184287],[161,180,187,194,238],{"_106":246,"_97":247,"_162":248,"_164":195,"_165":147,"_166":249,"_168":169,"_108":1325,"_102":33,"_171":205,"_173":251,"_174":22,"_175":-5,"_100":1326},["D",1771538185232],[161,180,187,194,247],{"_106":255,"_97":256,"_162":257,"_164":195,"_165":147,"_166":258,"_168":169,"_108":1328,"_102":33,"_171":205,"_173":260,"_174":22,"_175":-5,"_100":1329},["D",1771538184496],[161,180,187,194,256],{"_106":264,"_97":265,"_162":266,"_164":195,"_165":147,"_166":267,"_168":169,"_108":1331,"_102":33,"_171":205,"_173":269,"_174":22,"_175":-5,"_100":1332},["D",1771538185045],[161,180,187,194,265],{"_106":273,"_97":274,"_162":275,"_164":195,"_165":147,"_166":276,"_168":169,"_108":1334,"_102":33,"_171":205,"_173":278,"_174":22,"_175":-5,"_100":1335},["D",1771538185030],[161,180,187,194,274],{"_106":282,"_97":283,"_162":284,"_164":195,"_165":147,"_166":285,"_168":169,"_108":1337,"_102":33,"_171":205,"_173":287,"_174":22,"_175":-5,"_100":1338},["D",1771538184151],[161,180,187,194,283],{"_106":291,"_97":292,"_162":293,"_164":195,"_165":147,"_166":294,"_168":169,"_108":1340,"_102":33,"_171":205,"_173":296,"_174":22,"_175":-5,"_100":1341},["D",1771538183895],[161,180,187,194,292],{"_106":300,"_97":301,"_162":302,"_164":195,"_165":147,"_166":303,"_168":169,"_108":1343,"_102":33,"_171":205,"_173":305,"_174":22,"_175":-5,"_100":1344},["D",1771538184072],[161,180,187,194,301],{"_106":309,"_97":310,"_162":311,"_164":195,"_165":147,"_166":312,"_168":169,"_108":1346,"_102":33,"_171":205,"_173":314,"_174":22,"_175":-5,"_100":1347},["D",1771538184908],[161,180,187,194,310],{"_106":318,"_97":319,"_162":320,"_164":195,"_165":147,"_166":321,"_168":169,"_108":1349,"_102":33,"_171":205,"_173":323,"_174":22,"_175":-5,"_100":1350},["D",1771538185160],[161,180,187,194,319],{"_106":327,"_97":328,"_162":329,"_164":195,"_165":147,"_166":330,"_168":169,"_108":1352,"_102":33,"_171":205,"_173":332,"_174":22,"_175":-5,"_100":1353},["D",1771538184555],[161,180,187,194,328],{"_106":336,"_97":337,"_162":338,"_164":195,"_165":147,"_166":339,"_168":169,"_108":1355,"_102":33,"_171":205,"_173":341,"_174":22,"_175":-5,"_100":1356},["D",1771538184003],[161,180,187,194,337],{"_106":345,"_97":346,"_162":347,"_164":195,"_165":147,"_166":348,"_168":169,"_108":1358,"_102":33,"_171":205,"_173":350,"_174":22,"_175":-5,"_100":1359},["D",1771538185167],[161,180,187,194,346],{"_106":354,"_97":355,"_162":356,"_164":195,"_165":147,"_166":357,"_168":169,"_108":1361,"_102":33,"_171":205,"_173":359,"_174":22,"_175":-5,"_100":1362},["D",1771538184217],[161,180,187,194,355],{"_106":363,"_97":364,"_162":365,"_164":195,"_165":147,"_166":366,"_168":169,"_108":1364,"_102":33,"_171":205,"_173":368,"_174":22,"_175":-5,"_100":1365},["D",1771538184379],[161,180,187,194,364],{"_106":372,"_97":373,"_162":374,"_164":195,"_165":147,"_166":375,"_168":169,"_108":1367,"_102":33,"_171":205,"_173":377,"_174":22,"_175":-5,"_100":1368},["D",1771538185081],[161,180,187,194,373],{"_106":381,"_97":382,"_162":383,"_164":195,"_165":147,"_166":384,"_168":169,"_108":1370,"_102":33,"_171":205,"_173":386,"_174":22,"_175":-5,"_100":1371},["D",1771538184986],[161,180,187,194,382],{"_106":390,"_97":391,"_162":392,"_164":195,"_165":147,"_166":393,"_168":169,"_108":1373,"_102":33,"_171":205,"_173":395,"_174":22,"_175":-5,"_100":1374},["D",1771538183790],[161,180,187,194,391],{"_106":399,"_97":400,"_162":401,"_164":195,"_165":147,"_166":402,"_168":169,"_108":1376,"_102":33,"_171":205,"_173":404,"_174":22,"_175":-5,"_100":1377},["D",1771538184940],[161,180,187,194,400],{"_106":408,"_97":409,"_162":410,"_164":195,"_165":147,"_166":411,"_168":169,"_108":1379,"_102":33,"_171":205,"_173":413,"_174":22,"_175":-5,"_100":1380},["D",1771538184320],[161,180,187,194,409],{"_106":417,"_97":418,"_162":419,"_164":195,"_165":147,"_166":420,"_168":169,"_108":1382,"_102":33,"_171":205,"_173":422,"_174":22,"_175":-5,"_100":1383},["D",1771538184307],[161,180,187,194,418],{"_106":426,"_97":427,"_162":428,"_164":195,"_165":147,"_166":429,"_168":169,"_108":1385,"_102":33,"_171":205,"_173":431,"_174":22,"_175":-5,"_100":1386},["D",1771538185010],[161,180,187,194,427],{"_106":435,"_97":436,"_162":437,"_164":195,"_165":147,"_166":438,"_168":169,"_108":1388,"_102":33,"_171":205,"_173":440,"_174":22,"_175":-5,"_100":1389},["D",1771538184410],[161,180,187,194,436],{"_106":444,"_97":445,"_162":446,"_164":195,"_165":147,"_166":447,"_168":169,"_108":1391,"_102":33,"_171":205,"_173":449,"_174":22,"_175":-5,"_100":1392},["D",1771538185099],[161,180,187,194,445],{"_106":453,"_97":454,"_162":455,"_164":195,"_165":147,"_166":456,"_168":169,"_108":1394,"_102":33,"_171":205,"_173":458,"_174":22,"_175":-5,"_100":1395},["D",1771538184888],[161,180,187,194,454],{"_106":462,"_97":463,"_162":464,"_164":195,"_165":147,"_166":465,"_168":169,"_108":1397,"_102":33,"_171":205,"_173":467,"_174":22,"_175":-5,"_100":1398},["D",1771538184788],[161,180,187,194,463],{"_106":471,"_97":472,"_162":473,"_164":195,"_165":147,"_166":474,"_168":169,"_108":1400,"_102":33,"_171":205,"_173":476,"_174":22,"_175":-5,"_100":1401},["D",1771538184731],[161,180,187,194,472],{"_106":480,"_97":481,"_162":482,"_164":195,"_165":147,"_166":483,"_168":169,"_108":1403,"_102":33,"_171":205,"_173":485,"_174":22,"_175":-5,"_100":1404},["D",1771538183806],[161,180,187,194,481],{"_106":489,"_97":490,"_162":491,"_164":195,"_165":147,"_166":492,"_168":169,"_108":1406,"_102":33,"_171":205,"_173":494,"_174":22,"_175":-5,"_100":1407},["D",1771538183944],[161,180,187,194,490],{"_106":498,"_97":499,"_162":500,"_164":195,"_165":147,"_166":501,"_168":169,"_108":1409,"_102":33,"_171":205,"_173":503,"_174":22,"_175":-5,"_100":1410},["D",1771538185220],[161,180,187,194,499],{"_106":507,"_97":508,"_162":509,"_164":195,"_165":147,"_166":510,"_168":169,"_108":1412,"_102":33,"_171":205,"_173":512,"_174":22,"_175":-5,"_100":1413},["D",1771538183853],[161,180,187,194,508],{"_106":516,"_97":517,"_162":518,"_164":195,"_165":147,"_166":519,"_168":169,"_108":1415,"_102":33,"_171":205,"_173":521,"_174":22,"_175":-5,"_100":1416},["D",1771538185112],[161,180,187,194,517],{"_106":525,"_97":526,"_162":527,"_164":195,"_165":147,"_166":528,"_168":169,"_108":1418,"_102":33,"_171":205,"_173":530,"_174":22,"_175":-5,"_100":1419},["D",1771538184181],[161,180,187,194,526],{"_106":534,"_97":535,"_162":536,"_164":195,"_165":147,"_166":537,"_168":169,"_108":1421,"_102":33,"_171":205,"_173":539,"_174":22,"_175":-5,"_100":1422},["D",1771538184603],[161,180,187,194,535],{"_106":543,"_97":544,"_162":545,"_164":195,"_165":147,"_166":546,"_168":169,"_108":1424,"_102":33,"_171":205,"_173":548,"_174":22,"_175":-5,"_100":1425},["D",1771538184418],[161,180,187,194,544],{"_106":552,"_97":553,"_162":554,"_164":195,"_165":147,"_166":555,"_168":169,"_108":1427,"_102":33,"_171":205,"_173":557,"_174":22,"_175":-5,"_100":1428},["D",1771538184653],[161,180,187,194,553],{"_106":561,"_97":562,"_162":563,"_164":195,"_165":147,"_166":564,"_168":169,"_108":1430,"_102":33,"_171":205,"_173":566,"_174":22,"_175":-5,"_100":1431},["D",1771538184885],[161,180,187,194,562],{"_106":570,"_97":571,"_162":572,"_164":195,"_165":147,"_166":573,"_168":169,"_108":1433,"_102":33,"_171":205,"_173":575,"_174":22,"_175":-5,"_100":1434},["D",1771538184603],[161,180,187,194,571],{"_106":579,"_97":580,"_162":581,"_164":195,"_165":147,"_166":582,"_168":169,"_108":1436,"_102":33,"_171":205,"_173":584,"_174":22,"_175":-5,"_100":1437},["D",1771538184840],[161,180,187,194,580],{"_106":588,"_97":589,"_162":590,"_164":195,"_165":147,"_166":591,"_168":169,"_108":1439,"_102":33,"_171":205,"_173":593,"_174":22,"_175":-5,"_100":1440},["D",1771538184247],[161,180,187,194,589],{"_106":597,"_97":598,"_162":599,"_164":195,"_165":147,"_166":600,"_168":169,"_108":1442,"_102":33,"_171":205,"_173":602,"_174":22,"_175":-5,"_100":1443},["D",1771538184128],[161,180,187,194,598],{"_106":606,"_97":607,"_162":608,"_164":195,"_165":147,"_166":609,"_168":169,"_108":1445,"_102":33,"_171":205,"_173":611,"_174":22,"_175":-5,"_100":1446},["D",1771538184813],[161,180,187,194,607],{"_106":615,"_97":616,"_162":617,"_164":195,"_165":147,"_166":618,"_168":169,"_108":1448,"_102":33,"_171":205,"_173":620,"_174":22,"_175":-5,"_100":1449},["D",1771538184750],[161,180,187,194,616],{"_106":624,"_97":625,"_162":626,"_164":195,"_165":147,"_166":627,"_168":169,"_108":1451,"_102":33,"_171":205,"_173":629,"_174":22,"_175":-5,"_100":1452},["D",1771538184708],[161,180,187,194,625],{"_106":193,"_97":194,"_162":195,"_164":188,"_165":147,"_166":196,"_168":169,"_108":1454,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_100":1455},["D",1771538183130],[161,180,187,194],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":1464,"_157":1469,"_1293":1848,"_205":1849,"_1307":1851,"_1948":-5,"_1949":-5,"_1950":-5,"_1951":-5,"_1952":1953,"_1300":-5},{"_106":107,"_97":98,"_108":1465,"_110":-5,"_111":22,"_112":113,"_114":74,"_115":-5,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":124,"_125":126,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":1466,"_139":1467,"_144":1468,"_156":22},["D",1771533418336],{"_95":96,"_137":138},{"_95":96,"_141":138,"_14":116,"_142":143},{"_102":146,"_97":45,"_106":147,"_148":107,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":98,"_155":96},[1470,1788,1797,1803,1839,1842,1845],{"_106":160,"_97":161,"_162":163,"_164":-5,"_165":147,"_166":167,"_168":169,"_108":170,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1471,"_100":1787},[1472,1781,1784],{"_106":179,"_97":180,"_162":181,"_164":163,"_165":147,"_166":182,"_168":169,"_108":183,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1473,"_100":1780},[1474],{"_106":186,"_97":187,"_162":188,"_164":181,"_165":147,"_166":189,"_168":169,"_108":190,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1475,"_100":1779},[1476,1623],{"_106":193,"_97":194,"_162":195,"_164":188,"_165":147,"_166":196,"_168":169,"_108":197,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1477,"_100":1622},[1478,1481,1484,1487,1490,1493,1496,1499,1502,1505,1508,1511,1514,1517,1520,1523,1526,1529,1532,1535,1538,1541,1544,1547,1550,1553,1556,1559,1562,1565,1568,1571,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1619],{"_106":200,"_97":201,"_162":202,"_164":195,"_165":147,"_166":203,"_168":169,"_108":204,"_102":33,"_171":205,"_173":206,"_174":22,"_175":-5,"_176":1479,"_100":1480},[],[161,180,187,194,201],{"_106":210,"_97":211,"_162":212,"_164":195,"_165":147,"_166":213,"_168":169,"_108":214,"_102":33,"_171":205,"_173":215,"_174":22,"_175":-5,"_176":1482,"_100":1483},[],[161,180,187,194,211],{"_106":219,"_97":220,"_162":221,"_164":195,"_165":147,"_166":222,"_168":169,"_108":223,"_102":33,"_171":205,"_173":224,"_174":22,"_175":-5,"_176":1485,"_100":1486},[],[161,180,187,194,220],{"_106":228,"_97":229,"_162":230,"_164":195,"_165":147,"_166":231,"_168":169,"_108":232,"_102":33,"_171":205,"_173":233,"_174":22,"_175":-5,"_176":1488,"_100":1489},[],[161,180,187,194,229],{"_106":237,"_97":238,"_162":239,"_164":195,"_165":147,"_166":240,"_168":169,"_108":241,"_102":33,"_171":205,"_173":242,"_174":22,"_175":-5,"_176":1491,"_100":1492},[],[161,180,187,194,238],{"_106":246,"_97":247,"_162":248,"_164":195,"_165":147,"_166":249,"_168":169,"_108":250,"_102":33,"_171":205,"_173":251,"_174":22,"_175":-5,"_176":1494,"_100":1495},[],[161,180,187,194,247],{"_106":255,"_97":256,"_162":257,"_164":195,"_165":147,"_166":258,"_168":169,"_108":259,"_102":33,"_171":205,"_173":260,"_174":22,"_175":-5,"_176":1497,"_100":1498},[],[161,180,187,194,256],{"_106":264,"_97":265,"_162":266,"_164":195,"_165":147,"_166":267,"_168":169,"_108":268,"_102":33,"_171":205,"_173":269,"_174":22,"_175":-5,"_176":1500,"_100":1501},[],[161,180,187,194,265],{"_106":273,"_97":274,"_162":275,"_164":195,"_165":147,"_166":276,"_168":169,"_108":277,"_102":33,"_171":205,"_173":278,"_174":22,"_175":-5,"_176":1503,"_100":1504},[],[161,180,187,194,274],{"_106":282,"_97":283,"_162":284,"_164":195,"_165":147,"_166":285,"_168":169,"_108":286,"_102":33,"_171":205,"_173":287,"_174":22,"_175":-5,"_176":1506,"_100":1507},[],[161,180,187,194,283],{"_106":291,"_97":292,"_162":293,"_164":195,"_165":147,"_166":294,"_168":169,"_108":295,"_102":33,"_171":205,"_173":296,"_174":22,"_175":-5,"_176":1509,"_100":1510},[],[161,180,187,194,292],{"_106":300,"_97":301,"_162":302,"_164":195,"_165":147,"_166":303,"_168":169,"_108":304,"_102":33,"_171":205,"_173":305,"_174":22,"_175":-5,"_176":1512,"_100":1513},[],[161,180,187,194,301],{"_106":309,"_97":310,"_162":311,"_164":195,"_165":147,"_166":312,"_168":169,"_108":313,"_102":33,"_171":205,"_173":314,"_174":22,"_175":-5,"_176":1515,"_100":1516},[],[161,180,187,194,310],{"_106":318,"_97":319,"_162":320,"_164":195,"_165":147,"_166":321,"_168":169,"_108":322,"_102":33,"_171":205,"_173":323,"_174":22,"_175":-5,"_176":1518,"_100":1519},[],[161,180,187,194,319],{"_106":327,"_97":328,"_162":329,"_164":195,"_165":147,"_166":330,"_168":169,"_108":331,"_102":33,"_171":205,"_173":332,"_174":22,"_175":-5,"_176":1521,"_100":1522},[],[161,180,187,194,328],{"_106":336,"_97":337,"_162":338,"_164":195,"_165":147,"_166":339,"_168":169,"_108":340,"_102":33,"_171":205,"_173":341,"_174":22,"_175":-5,"_176":1524,"_100":1525},[],[161,180,187,194,337],{"_106":345,"_97":346,"_162":347,"_164":195,"_165":147,"_166":348,"_168":169,"_108":349,"_102":33,"_171":205,"_173":350,"_174":22,"_175":-5,"_176":1527,"_100":1528},[],[161,180,187,194,346],{"_106":354,"_97":355,"_162":356,"_164":195,"_165":147,"_166":357,"_168":169,"_108":358,"_102":33,"_171":205,"_173":359,"_174":22,"_175":-5,"_176":1530,"_100":1531},[],[161,180,187,194,355],{"_106":363,"_97":364,"_162":365,"_164":195,"_165":147,"_166":366,"_168":169,"_108":367,"_102":33,"_171":205,"_173":368,"_174":22,"_175":-5,"_176":1533,"_100":1534},[],[161,180,187,194,364],{"_106":372,"_97":373,"_162":374,"_164":195,"_165":147,"_166":375,"_168":169,"_108":376,"_102":33,"_171":205,"_173":377,"_174":22,"_175":-5,"_176":1536,"_100":1537},[],[161,180,187,194,373],{"_106":381,"_97":382,"_162":383,"_164":195,"_165":147,"_166":384,"_168":169,"_108":385,"_102":33,"_171":205,"_173":386,"_174":22,"_175":-5,"_176":1539,"_100":1540},[],[161,180,187,194,382],{"_106":390,"_97":391,"_162":392,"_164":195,"_165":147,"_166":393,"_168":169,"_108":394,"_102":33,"_171":205,"_173":395,"_174":22,"_175":-5,"_176":1542,"_100":1543},[],[161,180,187,194,391],{"_106":399,"_97":400,"_162":401,"_164":195,"_165":147,"_166":402,"_168":169,"_108":403,"_102":33,"_171":205,"_173":404,"_174":22,"_175":-5,"_176":1545,"_100":1546},[],[161,180,187,194,400],{"_106":408,"_97":409,"_162":410,"_164":195,"_165":147,"_166":411,"_168":169,"_108":412,"_102":33,"_171":205,"_173":413,"_174":22,"_175":-5,"_176":1548,"_100":1549},[],[161,180,187,194,409],{"_106":417,"_97":418,"_162":419,"_164":195,"_165":147,"_166":420,"_168":169,"_108":421,"_102":33,"_171":205,"_173":422,"_174":22,"_175":-5,"_176":1551,"_100":1552},[],[161,180,187,194,418],{"_106":426,"_97":427,"_162":428,"_164":195,"_165":147,"_166":429,"_168":169,"_108":430,"_102":33,"_171":205,"_173":431,"_174":22,"_175":-5,"_176":1554,"_100":1555},[],[161,180,187,194,427],{"_106":435,"_97":436,"_162":437,"_164":195,"_165":147,"_166":438,"_168":169,"_108":439,"_102":33,"_171":205,"_173":440,"_174":22,"_175":-5,"_176":1557,"_100":1558},[],[161,180,187,194,436],{"_106":444,"_97":445,"_162":446,"_164":195,"_165":147,"_166":447,"_168":169,"_108":448,"_102":33,"_171":205,"_173":449,"_174":22,"_175":-5,"_176":1560,"_100":1561},[],[161,180,187,194,445],{"_106":453,"_97":454,"_162":455,"_164":195,"_165":147,"_166":456,"_168":169,"_108":457,"_102":33,"_171":205,"_173":458,"_174":22,"_175":-5,"_176":1563,"_100":1564},[],[161,180,187,194,454],{"_106":462,"_97":463,"_162":464,"_164":195,"_165":147,"_166":465,"_168":169,"_108":466,"_102":33,"_171":205,"_173":467,"_174":22,"_175":-5,"_176":1566,"_100":1567},[],[161,180,187,194,463],{"_106":471,"_97":472,"_162":473,"_164":195,"_165":147,"_166":474,"_168":169,"_108":475,"_102":33,"_171":205,"_173":476,"_174":22,"_175":-5,"_176":1569,"_100":1570},[],[161,180,187,194,472],{"_106":480,"_97":481,"_162":482,"_164":195,"_165":147,"_166":483,"_168":169,"_108":484,"_102":33,"_171":205,"_173":485,"_174":22,"_175":-5,"_176":1572,"_100":1573},[],[161,180,187,194,481],{"_106":489,"_97":490,"_162":491,"_164":195,"_165":147,"_166":492,"_168":169,"_108":493,"_102":33,"_171":205,"_173":494,"_174":22,"_175":-5,"_176":1575,"_100":1576},[],[161,180,187,194,490],{"_106":498,"_97":499,"_162":500,"_164":195,"_165":147,"_166":501,"_168":169,"_108":502,"_102":33,"_171":205,"_173":503,"_174":22,"_175":-5,"_176":1578,"_100":1579},[],[161,180,187,194,499],{"_106":507,"_97":508,"_162":509,"_164":195,"_165":147,"_166":510,"_168":169,"_108":511,"_102":33,"_171":205,"_173":512,"_174":22,"_175":-5,"_176":1581,"_100":1582},[],[161,180,187,194,508],{"_106":516,"_97":517,"_162":518,"_164":195,"_165":147,"_166":519,"_168":169,"_108":520,"_102":33,"_171":205,"_173":521,"_174":22,"_175":-5,"_176":1584,"_100":1585},[],[161,180,187,194,517],{"_106":525,"_97":526,"_162":527,"_164":195,"_165":147,"_166":528,"_168":169,"_108":529,"_102":33,"_171":205,"_173":530,"_174":22,"_175":-5,"_176":1587,"_100":1588},[],[161,180,187,194,526],{"_106":534,"_97":535,"_162":536,"_164":195,"_165":147,"_166":537,"_168":169,"_108":538,"_102":33,"_171":205,"_173":539,"_174":22,"_175":-5,"_176":1590,"_100":1591},[],[161,180,187,194,535],{"_106":543,"_97":544,"_162":545,"_164":195,"_165":147,"_166":546,"_168":169,"_108":547,"_102":33,"_171":205,"_173":548,"_174":22,"_175":-5,"_176":1593,"_100":1594},[],[161,180,187,194,544],{"_106":552,"_97":553,"_162":554,"_164":195,"_165":147,"_166":555,"_168":169,"_108":556,"_102":33,"_171":205,"_173":557,"_174":22,"_175":-5,"_176":1596,"_100":1597},[],[161,180,187,194,553],{"_106":561,"_97":562,"_162":563,"_164":195,"_165":147,"_166":564,"_168":169,"_108":565,"_102":33,"_171":205,"_173":566,"_174":22,"_175":-5,"_176":1599,"_100":1600},[],[161,180,187,194,562],{"_106":570,"_97":571,"_162":572,"_164":195,"_165":147,"_166":573,"_168":169,"_108":574,"_102":33,"_171":205,"_173":575,"_174":22,"_175":-5,"_176":1602,"_100":1603},[],[161,180,187,194,571],{"_106":579,"_97":580,"_162":581,"_164":195,"_165":147,"_166":582,"_168":169,"_108":583,"_102":33,"_171":205,"_173":584,"_174":22,"_175":-5,"_176":1605,"_100":1606},[],[161,180,187,194,580],{"_106":588,"_97":589,"_162":590,"_164":195,"_165":147,"_166":591,"_168":169,"_108":592,"_102":33,"_171":205,"_173":593,"_174":22,"_175":-5,"_176":1608,"_100":1609},[],[161,180,187,194,589],{"_106":597,"_97":598,"_162":599,"_164":195,"_165":147,"_166":600,"_168":169,"_108":601,"_102":33,"_171":205,"_173":602,"_174":22,"_175":-5,"_176":1611,"_100":1612},[],[161,180,187,194,598],{"_106":606,"_97":607,"_162":608,"_164":195,"_165":147,"_166":609,"_168":169,"_108":610,"_102":33,"_171":205,"_173":611,"_174":22,"_175":-5,"_176":1614,"_100":1615},[],[161,180,187,194,607],{"_106":615,"_97":616,"_162":617,"_164":195,"_165":147,"_166":618,"_168":169,"_108":619,"_102":33,"_171":205,"_173":620,"_174":22,"_175":-5,"_176":1617,"_100":1618},[],[161,180,187,194,616],{"_106":624,"_97":625,"_162":626,"_164":195,"_165":147,"_166":627,"_168":169,"_108":628,"_102":33,"_171":205,"_173":629,"_174":22,"_175":-5,"_176":1620,"_100":1621},[],[161,180,187,194,625],[161,180,187,194],{"_106":634,"_97":635,"_162":636,"_164":188,"_165":147,"_166":637,"_168":169,"_108":638,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1624,"_100":1778},[1625,1628,1631,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661,1664,1667,1670,1673,1676,1679,1682,1685,1688,1691,1694,1697,1700,1703,1706,1709,1712,1715,1718,1721,1724,1727,1730,1733,1736,1739,1742,1745,1748,1751,1754,1757,1760,1763,1766,1769,1772,1775],{"_106":641,"_97":642,"_162":643,"_164":636,"_165":147,"_166":644,"_168":169,"_108":645,"_102":33,"_171":646,"_173":647,"_174":22,"_175":-5,"_176":1626,"_100":1627},[],[161,180,187,635,642],{"_106":651,"_97":652,"_162":653,"_164":636,"_165":147,"_166":654,"_168":169,"_108":655,"_102":33,"_171":646,"_173":656,"_174":22,"_175":-5,"_176":1629,"_100":1630},[],[161,180,187,635,652],{"_106":660,"_97":661,"_162":662,"_164":636,"_165":147,"_166":663,"_168":169,"_108":664,"_102":33,"_171":646,"_173":665,"_174":22,"_175":-5,"_176":1632,"_100":1633},[],[161,180,187,635,661],{"_106":669,"_97":670,"_162":671,"_164":636,"_165":147,"_166":672,"_168":169,"_108":673,"_102":33,"_171":646,"_173":674,"_174":22,"_175":-5,"_176":1635,"_100":1636},[],[161,180,187,635,670],{"_106":678,"_97":679,"_162":680,"_164":636,"_165":147,"_166":681,"_168":169,"_108":682,"_102":33,"_171":646,"_173":683,"_174":22,"_175":-5,"_176":1638,"_100":1639},[],[161,180,187,635,679],{"_106":687,"_97":688,"_162":689,"_164":636,"_165":147,"_166":690,"_168":169,"_108":691,"_102":33,"_171":646,"_173":692,"_174":22,"_175":-5,"_176":1641,"_100":1642},[],[161,180,187,635,688],{"_106":696,"_97":697,"_162":698,"_164":636,"_165":147,"_166":699,"_168":169,"_108":700,"_102":33,"_171":646,"_173":701,"_174":22,"_175":-5,"_176":1644,"_100":1645},[],[161,180,187,635,697],{"_106":705,"_97":706,"_162":707,"_164":636,"_165":147,"_166":708,"_168":169,"_108":709,"_102":33,"_171":646,"_173":710,"_174":22,"_175":-5,"_176":1647,"_100":1648},[],[161,180,187,635,706],{"_106":714,"_97":715,"_162":716,"_164":636,"_165":147,"_166":717,"_168":169,"_108":718,"_102":33,"_171":646,"_173":719,"_174":22,"_175":-5,"_176":1650,"_100":1651},[],[161,180,187,635,715],{"_106":723,"_97":724,"_162":725,"_164":636,"_165":147,"_166":726,"_168":169,"_108":727,"_102":33,"_171":646,"_173":728,"_174":22,"_175":-5,"_176":1653,"_100":1654},[],[161,180,187,635,724],{"_106":732,"_97":733,"_162":734,"_164":636,"_165":147,"_166":735,"_168":169,"_108":736,"_102":33,"_171":646,"_173":737,"_174":22,"_175":-5,"_176":1656,"_100":1657},[],[161,180,187,635,733],{"_106":741,"_97":742,"_162":743,"_164":636,"_165":147,"_166":744,"_168":169,"_108":745,"_102":33,"_171":646,"_173":746,"_174":22,"_175":-5,"_176":1659,"_100":1660},[],[161,180,187,635,742],{"_106":750,"_97":751,"_162":752,"_164":636,"_165":147,"_166":753,"_168":169,"_108":754,"_102":33,"_171":646,"_173":755,"_174":22,"_175":-5,"_176":1662,"_100":1663},[],[161,180,187,635,751],{"_106":759,"_97":760,"_162":761,"_164":636,"_165":147,"_166":103,"_168":169,"_108":762,"_102":33,"_171":646,"_173":763,"_174":22,"_175":-5,"_176":1665,"_100":1666},[],[161,180,187,635,760],{"_106":767,"_97":768,"_162":769,"_164":636,"_165":147,"_166":770,"_168":169,"_108":771,"_102":33,"_171":646,"_173":772,"_174":22,"_175":-5,"_176":1668,"_100":1669},[],[161,180,187,635,768],{"_106":776,"_97":777,"_162":778,"_164":636,"_165":147,"_166":779,"_168":169,"_108":780,"_102":33,"_171":646,"_173":781,"_174":22,"_175":-5,"_176":1671,"_100":1672},[],[161,180,187,635,777],{"_106":785,"_97":786,"_162":787,"_164":636,"_165":147,"_166":788,"_168":169,"_108":789,"_102":33,"_171":646,"_173":790,"_174":22,"_175":-5,"_176":1674,"_100":1675},[],[161,180,187,635,786],{"_106":794,"_97":795,"_162":796,"_164":636,"_165":147,"_166":797,"_168":169,"_108":798,"_102":33,"_171":646,"_173":799,"_174":22,"_175":-5,"_176":1677,"_100":1678},[],[161,180,187,635,795],{"_106":803,"_97":804,"_162":805,"_164":636,"_165":147,"_166":806,"_168":169,"_108":807,"_102":33,"_171":646,"_173":808,"_174":22,"_175":-5,"_176":1680,"_100":1681},[],[161,180,187,635,804],{"_106":812,"_97":813,"_162":814,"_164":636,"_165":147,"_166":815,"_168":169,"_108":816,"_102":33,"_171":646,"_173":817,"_174":22,"_175":-5,"_176":1683,"_100":1684},[],[161,180,187,635,813],{"_106":821,"_97":822,"_162":823,"_164":636,"_165":147,"_166":824,"_168":169,"_108":825,"_102":33,"_171":646,"_173":826,"_174":22,"_175":-5,"_176":1686,"_100":1687},[],[161,180,187,635,822],{"_106":830,"_97":831,"_162":832,"_164":636,"_165":147,"_166":833,"_168":169,"_108":834,"_102":33,"_171":646,"_173":835,"_174":22,"_175":-5,"_176":1689,"_100":1690},[],[161,180,187,635,831],{"_106":839,"_97":840,"_162":841,"_164":636,"_165":147,"_166":842,"_168":169,"_108":843,"_102":33,"_171":646,"_173":844,"_174":22,"_175":-5,"_176":1692,"_100":1693},[],[161,180,187,635,840],{"_106":848,"_97":849,"_162":850,"_164":636,"_165":147,"_166":851,"_168":169,"_108":852,"_102":33,"_171":646,"_173":853,"_174":22,"_175":-5,"_176":1695,"_100":1696},[],[161,180,187,635,849],{"_106":857,"_97":858,"_162":859,"_164":636,"_165":147,"_166":860,"_168":169,"_108":861,"_102":33,"_171":646,"_173":862,"_174":22,"_175":-5,"_176":1698,"_100":1699},[],[161,180,187,635,858],{"_106":866,"_97":867,"_162":868,"_164":636,"_165":147,"_166":869,"_168":169,"_108":870,"_102":33,"_171":646,"_173":871,"_174":22,"_175":-5,"_176":1701,"_100":1702},[],[161,180,187,635,867],{"_106":875,"_97":876,"_162":877,"_164":636,"_165":147,"_166":878,"_168":169,"_108":879,"_102":33,"_171":646,"_173":880,"_174":22,"_175":-5,"_176":1704,"_100":1705},[],[161,180,187,635,876],{"_106":884,"_97":885,"_162":886,"_164":636,"_165":147,"_166":887,"_168":169,"_108":888,"_102":33,"_171":646,"_173":889,"_174":22,"_175":-5,"_176":1707,"_100":1708},[],[161,180,187,635,885],{"_106":893,"_97":894,"_162":895,"_164":636,"_165":147,"_166":896,"_168":169,"_108":897,"_102":33,"_171":646,"_173":898,"_174":22,"_175":-5,"_176":1710,"_100":1711},[],[161,180,187,635,894],{"_106":902,"_97":903,"_162":904,"_164":636,"_165":147,"_166":905,"_168":169,"_108":906,"_102":33,"_171":646,"_173":907,"_174":22,"_175":-5,"_176":1713,"_100":1714},[],[161,180,187,635,903],{"_106":911,"_97":912,"_162":913,"_164":636,"_165":147,"_166":914,"_168":169,"_108":915,"_102":33,"_171":646,"_173":916,"_174":22,"_175":-5,"_176":1716,"_100":1717},[],[161,180,187,635,912],{"_106":920,"_97":921,"_162":922,"_164":636,"_165":147,"_166":923,"_168":169,"_108":924,"_102":33,"_171":646,"_173":925,"_174":22,"_175":-5,"_176":1719,"_100":1720},[],[161,180,187,635,921],{"_106":929,"_97":930,"_162":931,"_164":636,"_165":147,"_166":932,"_168":169,"_108":933,"_102":33,"_171":646,"_173":934,"_174":22,"_175":-5,"_176":1722,"_100":1723},[],[161,180,187,635,930],{"_106":938,"_97":939,"_162":940,"_164":636,"_165":147,"_166":941,"_168":169,"_108":942,"_102":33,"_171":646,"_173":943,"_174":22,"_175":-5,"_176":1725,"_100":1726},[],[161,180,187,635,939],{"_106":947,"_97":948,"_162":949,"_164":636,"_165":147,"_166":950,"_168":169,"_108":951,"_102":33,"_171":646,"_173":952,"_174":22,"_175":-5,"_176":1728,"_100":1729},[],[161,180,187,635,948],{"_106":956,"_97":957,"_162":958,"_164":636,"_165":147,"_166":959,"_168":169,"_108":960,"_102":33,"_171":646,"_173":961,"_174":22,"_175":-5,"_176":1731,"_100":1732},[],[161,180,187,635,957],{"_106":965,"_97":966,"_162":967,"_164":636,"_165":147,"_166":968,"_168":169,"_108":969,"_102":33,"_171":646,"_173":970,"_174":22,"_175":-5,"_176":1734,"_100":1735},[],[161,180,187,635,966],{"_106":974,"_97":975,"_162":976,"_164":636,"_165":147,"_166":977,"_168":169,"_108":978,"_102":33,"_171":646,"_173":979,"_174":22,"_175":-5,"_176":1737,"_100":1738},[],[161,180,187,635,975],{"_106":983,"_97":984,"_162":985,"_164":636,"_165":147,"_166":986,"_168":169,"_108":987,"_102":33,"_171":646,"_173":988,"_174":22,"_175":-5,"_176":1740,"_100":1741},[],[161,180,187,635,984],{"_106":992,"_97":993,"_162":994,"_164":636,"_165":147,"_166":995,"_168":169,"_108":996,"_102":33,"_171":646,"_173":997,"_174":22,"_175":-5,"_176":1743,"_100":1744},[],[161,180,187,635,993],{"_106":1001,"_97":1002,"_162":1003,"_164":636,"_165":147,"_166":1004,"_168":169,"_108":1005,"_102":33,"_171":646,"_173":1006,"_174":22,"_175":-5,"_176":1746,"_100":1747},[],[161,180,187,635,1002],{"_106":1010,"_97":1011,"_162":1012,"_164":636,"_165":147,"_166":1013,"_168":169,"_108":1014,"_102":33,"_171":646,"_173":1015,"_174":22,"_175":-5,"_176":1749,"_100":1750},[],[161,180,187,635,1011],{"_106":1019,"_97":1020,"_162":1021,"_164":636,"_165":147,"_166":1022,"_168":169,"_108":1023,"_102":33,"_171":646,"_173":1024,"_174":22,"_175":-5,"_176":1752,"_100":1753},[],[161,180,187,635,1020],{"_106":1028,"_97":1029,"_162":1030,"_164":636,"_165":147,"_166":1031,"_168":169,"_108":1032,"_102":33,"_171":646,"_173":1033,"_174":22,"_175":-5,"_176":1755,"_100":1756},[],[161,180,187,635,1029],{"_106":1037,"_97":1038,"_162":1039,"_164":636,"_165":147,"_166":1040,"_168":169,"_108":1041,"_102":33,"_171":646,"_173":1042,"_174":22,"_175":-5,"_176":1758,"_100":1759},[],[161,180,187,635,1038],{"_106":1046,"_97":1047,"_162":1048,"_164":636,"_165":147,"_166":1049,"_168":169,"_108":1050,"_102":33,"_171":646,"_173":1051,"_174":22,"_175":-5,"_176":1761,"_100":1762},[],[161,180,187,635,1047],{"_106":1055,"_97":1056,"_162":1057,"_164":636,"_165":147,"_166":1058,"_168":169,"_108":1059,"_102":33,"_171":646,"_173":1060,"_174":22,"_175":-5,"_176":1764,"_100":1765},[],[161,180,187,635,1056],{"_106":1064,"_97":1065,"_162":1066,"_164":636,"_165":147,"_166":1067,"_168":169,"_108":1068,"_102":33,"_171":646,"_173":1069,"_174":22,"_175":-5,"_176":1767,"_100":1768},[],[161,180,187,635,1065],{"_106":1073,"_97":1074,"_162":1075,"_164":636,"_165":147,"_166":1076,"_168":169,"_108":1077,"_102":33,"_171":646,"_173":1078,"_174":22,"_175":-5,"_176":1770,"_100":1771},[],[161,180,187,635,1074],{"_106":1082,"_97":1083,"_162":1084,"_164":636,"_165":147,"_166":1085,"_168":169,"_108":1086,"_102":33,"_171":646,"_173":1087,"_174":22,"_175":-5,"_176":1773,"_100":1774},[],[161,180,187,635,1083],{"_106":1091,"_97":1092,"_162":1093,"_164":636,"_165":147,"_166":1094,"_168":169,"_108":1095,"_102":33,"_171":646,"_173":1096,"_174":22,"_175":-5,"_176":1776,"_100":1777},[],[161,180,187,635,1092],[161,180,187,635],[161,180,187],[161,180],{"_106":1103,"_97":1104,"_162":1105,"_164":163,"_165":147,"_166":1106,"_168":169,"_108":1107,"_102":33,"_171":205,"_173":1108,"_174":22,"_175":-5,"_176":1782,"_100":1783},[],[161,1104],{"_106":1112,"_97":1113,"_162":1114,"_164":163,"_165":147,"_166":1115,"_168":169,"_108":1116,"_102":33,"_171":205,"_173":1117,"_174":22,"_175":-5,"_176":1785,"_100":1786},[],[161,1113],[161],{"_106":1122,"_97":1123,"_162":1124,"_164":-5,"_165":147,"_166":1125,"_168":169,"_108":1126,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1789,"_100":1796},[1790,1793],{"_106":1129,"_97":1130,"_162":1131,"_164":1124,"_165":147,"_166":1132,"_168":169,"_108":1133,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1791,"_100":1792},[],[1123,1130],{"_106":1137,"_97":1138,"_162":1139,"_164":1124,"_165":147,"_166":1140,"_168":169,"_108":1141,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1794,"_100":1795},[],[1123,1138],[1123],{"_106":1146,"_97":1147,"_162":1148,"_164":-5,"_165":147,"_166":1149,"_168":169,"_108":1150,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1798,"_100":1802},[1799],{"_106":1153,"_97":1154,"_162":1155,"_164":1148,"_165":147,"_166":1156,"_168":169,"_108":1157,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1800,"_100":1801},[],[1147,1154],[1147],{"_106":1162,"_97":1163,"_162":1164,"_164":-5,"_165":147,"_166":1165,"_168":169,"_108":1166,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1804,"_100":1838},[1805,1829,1832,1835],{"_106":1169,"_97":1170,"_162":1171,"_164":1164,"_165":147,"_166":1172,"_168":169,"_108":1173,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1806,"_100":1828},[1807,1810,1813,1816,1819,1822,1825],{"_106":1176,"_97":1177,"_162":1178,"_164":1171,"_165":147,"_166":1179,"_168":169,"_108":1180,"_102":33,"_171":646,"_173":1181,"_174":22,"_175":-5,"_176":1808,"_100":1809},[],[1163,1170,1177],{"_106":1185,"_97":1186,"_162":1187,"_164":1171,"_165":147,"_166":1188,"_168":169,"_108":1189,"_102":33,"_171":646,"_173":1190,"_174":22,"_175":-5,"_176":1811,"_100":1812},[],[1163,1170,1186],{"_106":1194,"_97":1195,"_162":1196,"_164":1171,"_165":147,"_166":1197,"_168":169,"_108":1198,"_102":33,"_171":646,"_173":1199,"_174":22,"_175":-5,"_176":1814,"_100":1815},[],[1163,1170,1195],{"_106":1203,"_97":1204,"_162":1205,"_164":1171,"_165":147,"_166":1206,"_168":169,"_108":1207,"_102":33,"_171":646,"_173":1208,"_174":22,"_175":-5,"_176":1817,"_100":1818},[],[1163,1170,1204],{"_106":1212,"_97":1213,"_162":1214,"_164":1171,"_165":147,"_166":1215,"_168":169,"_108":1216,"_102":33,"_171":646,"_173":1217,"_174":22,"_175":-5,"_176":1820,"_100":1821},[],[1163,1170,1213],{"_106":1221,"_97":1222,"_162":1223,"_164":1171,"_165":147,"_166":1224,"_168":169,"_108":1225,"_102":33,"_171":646,"_173":1226,"_174":22,"_175":-5,"_176":1823,"_100":1824},[],[1163,1170,1222],{"_106":1230,"_97":1231,"_162":1232,"_164":1171,"_165":147,"_166":1233,"_168":169,"_108":1234,"_102":33,"_171":646,"_173":1235,"_174":22,"_175":-5,"_176":1826,"_100":1827},[],[1163,1170,1231],[1163,1170],{"_106":1240,"_97":1241,"_162":1242,"_164":1164,"_165":147,"_166":1243,"_168":169,"_108":1244,"_102":33,"_171":205,"_173":1245,"_174":22,"_175":-5,"_176":1830,"_100":1831},[],[1163,1241],{"_106":1249,"_97":1250,"_162":1251,"_164":1164,"_165":147,"_166":1252,"_168":169,"_108":1253,"_102":33,"_171":646,"_173":1254,"_174":22,"_175":-5,"_176":1833,"_100":1834},[],[1163,1250],{"_106":1258,"_97":1259,"_162":1260,"_164":1164,"_165":147,"_166":1261,"_168":169,"_108":1262,"_102":33,"_171":205,"_173":1263,"_174":22,"_175":-5,"_176":1836,"_100":1837},[],[1163,1259],[1163],{"_106":1268,"_97":1269,"_162":1270,"_164":-5,"_165":147,"_166":1271,"_168":169,"_108":1272,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":1840,"_100":1841},[],[1269],{"_106":1276,"_97":1277,"_162":1278,"_164":-5,"_165":147,"_166":1279,"_168":169,"_108":1280,"_102":33,"_171":205,"_173":1281,"_174":22,"_175":-5,"_176":1843,"_100":1844},[],[1277],{"_106":1285,"_97":1286,"_162":1287,"_164":-5,"_165":147,"_166":1288,"_168":169,"_108":1289,"_102":33,"_171":205,"_173":1290,"_174":22,"_175":-5,"_176":1846,"_100":1847},[],[1286],[1470,1472,1474,1476,1478,1481,1484,1487,1490,1493,1496,1499,1502,1505,1508,1511,1514,1517,1520,1523,1526,1529,1532,1535,1538,1541,1544,1547,1550,1553,1556,1559,1562,1565,1568,1571,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1619,1623,1625,1628,1631,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661,1664,1667,1670,1673,1676,1679,1682,1685,1688,1691,1694,1697,1700,1703,1706,1709,1712,1715,1718,1721,1724,1727,1730,1733,1736,1739,1742,1745,1748,1751,1754,1757,1760,1763,1766,1769,1772,1775,1781,1784,1788,1790,1793,1797,1799,1803,1805,1807,1810,1813,1816,1819,1822,1825,1829,1832,1835,1839,1842,1845],{"_106":193,"_97":194,"_162":195,"_164":188,"_165":147,"_166":196,"_168":169,"_108":1454,"_102":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_100":1850},[161,180,187,194],[1852,1854,1856,1858,1860,1862,1864,1866,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942,1944,1946],{"_106":200,"_97":201,"_162":202,"_164":195,"_165":147,"_166":203,"_168":169,"_108":1310,"_102":33,"_171":205,"_173":206,"_174":22,"_175":-5,"_100":1853},[161,180,187,194,201],{"_106":210,"_97":211,"_162":212,"_164":195,"_165":147,"_166":213,"_168":169,"_108":1313,"_102":33,"_171":205,"_173":215,"_174":22,"_175":-5,"_100":1855},[161,180,187,194,211],{"_106":219,"_97":220,"_162":221,"_164":195,"_165":147,"_166":222,"_168":169,"_108":1316,"_102":33,"_171":205,"_173":224,"_174":22,"_175":-5,"_100":1857},[161,180,187,194,220],{"_106":228,"_97":229,"_162":230,"_164":195,"_165":147,"_166":231,"_168":169,"_108":1319,"_102":33,"_171":205,"_173":233,"_174":22,"_175":-5,"_100":1859},[161,180,187,194,229],{"_106":237,"_97":238,"_162":239,"_164":195,"_165":147,"_166":240,"_168":169,"_108":1322,"_102":33,"_171":205,"_173":242,"_174":22,"_175":-5,"_100":1861},[161,180,187,194,238],{"_106":246,"_97":247,"_162":248,"_164":195,"_165":147,"_166":249,"_168":169,"_108":1325,"_102":33,"_171":205,"_173":251,"_174":22,"_175":-5,"_100":1863},[161,180,187,194,247],{"_106":255,"_97":256,"_162":257,"_164":195,"_165":147,"_166":258,"_168":169,"_108":1328,"_102":33,"_171":205,"_173":260,"_174":22,"_175":-5,"_100":1865},[161,180,187,194,256],{"_106":264,"_97":265,"_162":266,"_164":195,"_165":147,"_166":267,"_168":169,"_108":1331,"_102":33,"_171":205,"_173":269,"_174":22,"_175":-5,"_100":1867},[161,180,187,194,265],{"_106":273,"_97":274,"_162":275,"_164":195,"_165":147,"_166":276,"_168":169,"_108":1334,"_102":33,"_171":205,"_173":278,"_174":22,"_175":-5,"_100":1869},[161,180,187,194,274],{"_106":282,"_97":283,"_162":284,"_164":195,"_165":147,"_166":285,"_168":169,"_108":1337,"_102":33,"_171":205,"_173":287,"_174":22,"_175":-5,"_100":1871},[161,180,187,194,283],{"_106":291,"_97":292,"_162":293,"_164":195,"_165":147,"_166":294,"_168":169,"_108":1340,"_102":33,"_171":205,"_173":296,"_174":22,"_175":-5,"_100":1873},[161,180,187,194,292],{"_106":300,"_97":301,"_162":302,"_164":195,"_165":147,"_166":303,"_168":169,"_108":1343,"_102":33,"_171":205,"_173":305,"_174":22,"_175":-5,"_100":1875},[161,180,187,194,301],{"_106":309,"_97":310,"_162":311,"_164":195,"_165":147,"_166":312,"_168":169,"_108":1346,"_102":33,"_171":205,"_173":314,"_174":22,"_175":-5,"_100":1877},[161,180,187,194,310],{"_106":318,"_97":319,"_162":320,"_164":195,"_165":147,"_166":321,"_168":169,"_108":1349,"_102":33,"_171":205,"_173":323,"_174":22,"_175":-5,"_100":1879},[161,180,187,194,319],{"_106":327,"_97":328,"_162":329,"_164":195,"_165":147,"_166":330,"_168":169,"_108":1352,"_102":33,"_171":205,"_173":332,"_174":22,"_175":-5,"_100":1881},[161,180,187,194,328],{"_106":336,"_97":337,"_162":338,"_164":195,"_165":147,"_166":339,"_168":169,"_108":1355,"_102":33,"_171":205,"_173":341,"_174":22,"_175":-5,"_100":1883},[161,180,187,194,337],{"_106":345,"_97":346,"_162":347,"_164":195,"_165":147,"_166":348,"_168":169,"_108":1358,"_102":33,"_171":205,"_173":350,"_174":22,"_175":-5,"_100":1885},[161,180,187,194,346],{"_106":354,"_97":355,"_162":356,"_164":195,"_165":147,"_166":357,"_168":169,"_108":1361,"_102":33,"_171":205,"_173":359,"_174":22,"_175":-5,"_100":1887},[161,180,187,194,355],{"_106":363,"_97":364,"_162":365,"_164":195,"_165":147,"_166":366,"_168":169,"_108":1364,"_102":33,"_171":205,"_173":368,"_174":22,"_175":-5,"_100":1889},[161,180,187,194,364],{"_106":372,"_97":373,"_162":374,"_164":195,"_165":147,"_166":375,"_168":169,"_108":1367,"_102":33,"_171":205,"_173":377,"_174":22,"_175":-5,"_100":1891},[161,180,187,194,373],{"_106":381,"_97":382,"_162":383,"_164":195,"_165":147,"_166":384,"_168":169,"_108":1370,"_102":33,"_171":205,"_173":386,"_174":22,"_175":-5,"_100":1893},[161,180,187,194,382],{"_106":390,"_97":391,"_162":392,"_164":195,"_165":147,"_166":393,"_168":169,"_108":1373,"_102":33,"_171":205,"_173":395,"_174":22,"_175":-5,"_100":1895},[161,180,187,194,391],{"_106":399,"_97":400,"_162":401,"_164":195,"_165":147,"_166":402,"_168":169,"_108":1376,"_102":33,"_171":205,"_173":404,"_174":22,"_175":-5,"_100":1897},[161,180,187,194,400],{"_106":408,"_97":409,"_162":410,"_164":195,"_165":147,"_166":411,"_168":169,"_108":1379,"_102":33,"_171":205,"_173":413,"_174":22,"_175":-5,"_100":1899},[161,180,187,194,409],{"_106":417,"_97":418,"_162":419,"_164":195,"_165":147,"_166":420,"_168":169,"_108":1382,"_102":33,"_171":205,"_173":422,"_174":22,"_175":-5,"_100":1901},[161,180,187,194,418],{"_106":426,"_97":427,"_162":428,"_164":195,"_165":147,"_166":429,"_168":169,"_108":1385,"_102":33,"_171":205,"_173":431,"_174":22,"_175":-5,"_100":1903},[161,180,187,194,427],{"_106":435,"_97":436,"_162":437,"_164":195,"_165":147,"_166":438,"_168":169,"_108":1388,"_102":33,"_171":205,"_173":440,"_174":22,"_175":-5,"_100":1905},[161,180,187,194,436],{"_106":444,"_97":445,"_162":446,"_164":195,"_165":147,"_166":447,"_168":169,"_108":1391,"_102":33,"_171":205,"_173":449,"_174":22,"_175":-5,"_100":1907},[161,180,187,194,445],{"_106":453,"_97":454,"_162":455,"_164":195,"_165":147,"_166":456,"_168":169,"_108":1394,"_102":33,"_171":205,"_173":458,"_174":22,"_175":-5,"_100":1909},[161,180,187,194,454],{"_106":462,"_97":463,"_162":464,"_164":195,"_165":147,"_166":465,"_168":169,"_108":1397,"_102":33,"_171":205,"_173":467,"_174":22,"_175":-5,"_100":1911},[161,180,187,194,463],{"_106":471,"_97":472,"_162":473,"_164":195,"_165":147,"_166":474,"_168":169,"_108":1400,"_102":33,"_171":205,"_173":476,"_174":22,"_175":-5,"_100":1913},[161,180,187,194,472],{"_106":480,"_97":481,"_162":482,"_164":195,"_165":147,"_166":483,"_168":169,"_108":1403,"_102":33,"_171":205,"_173":485,"_174":22,"_175":-5,"_100":1915},[161,180,187,194,481],{"_106":489,"_97":490,"_162":491,"_164":195,"_165":147,"_166":492,"_168":169,"_108":1406,"_102":33,"_171":205,"_173":494,"_174":22,"_175":-5,"_100":1917},[161,180,187,194,490],{"_106":498,"_97":499,"_162":500,"_164":195,"_165":147,"_166":501,"_168":169,"_108":1409,"_102":33,"_171":205,"_173":503,"_174":22,"_175":-5,"_100":1919},[161,180,187,194,499],{"_106":507,"_97":508,"_162":509,"_164":195,"_165":147,"_166":510,"_168":169,"_108":1412,"_102":33,"_171":205,"_173":512,"_174":22,"_175":-5,"_100":1921},[161,180,187,194,508],{"_106":516,"_97":517,"_162":518,"_164":195,"_165":147,"_166":519,"_168":169,"_108":1415,"_102":33,"_171":205,"_173":521,"_174":22,"_175":-5,"_100":1923},[161,180,187,194,517],{"_106":525,"_97":526,"_162":527,"_164":195,"_165":147,"_166":528,"_168":169,"_108":1418,"_102":33,"_171":205,"_173":530,"_174":22,"_175":-5,"_100":1925},[161,180,187,194,526],{"_106":534,"_97":535,"_162":536,"_164":195,"_165":147,"_166":537,"_168":169,"_108":1421,"_102":33,"_171":205,"_173":539,"_174":22,"_175":-5,"_100":1927},[161,180,187,194,535],{"_106":543,"_97":544,"_162":545,"_164":195,"_165":147,"_166":546,"_168":169,"_108":1424,"_102":33,"_171":205,"_173":548,"_174":22,"_175":-5,"_100":1929},[161,180,187,194,544],{"_106":552,"_97":553,"_162":554,"_164":195,"_165":147,"_166":555,"_168":169,"_108":1427,"_102":33,"_171":205,"_173":557,"_174":22,"_175":-5,"_100":1931},[161,180,187,194,553],{"_106":561,"_97":562,"_162":563,"_164":195,"_165":147,"_166":564,"_168":169,"_108":1430,"_102":33,"_171":205,"_173":566,"_174":22,"_175":-5,"_100":1933},[161,180,187,194,562],{"_106":570,"_97":571,"_162":572,"_164":195,"_165":147,"_166":573,"_168":169,"_108":1433,"_102":33,"_171":205,"_173":575,"_174":22,"_175":-5,"_100":1935},[161,180,187,194,571],{"_106":579,"_97":580,"_162":581,"_164":195,"_165":147,"_166":582,"_168":169,"_108":1436,"_102":33,"_171":205,"_173":584,"_174":22,"_175":-5,"_100":1937},[161,180,187,194,580],{"_106":588,"_97":589,"_162":590,"_164":195,"_165":147,"_166":591,"_168":169,"_108":1439,"_102":33,"_171":205,"_173":593,"_174":22,"_175":-5,"_100":1939},[161,180,187,194,589],{"_106":597,"_97":598,"_162":599,"_164":195,"_165":147,"_166":600,"_168":169,"_108":1442,"_102":33,"_171":205,"_173":602,"_174":22,"_175":-5,"_100":1941},[161,180,187,194,598],{"_106":606,"_97":607,"_162":608,"_164":195,"_165":147,"_166":609,"_168":169,"_108":1445,"_102":33,"_171":205,"_173":611,"_174":22,"_175":-5,"_100":1943},[161,180,187,194,607],{"_106":615,"_97":616,"_162":617,"_164":195,"_165":147,"_166":618,"_168":169,"_108":1448,"_102":33,"_171":205,"_173":620,"_174":22,"_175":-5,"_100":1945},[161,180,187,194,616],{"_106":624,"_97":625,"_162":626,"_164":195,"_165":147,"_166":627,"_168":169,"_108":1451,"_102":33,"_171":205,"_173":629,"_174":22,"_175":-5,"_100":1947},[161,180,187,194,625],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

drewmcdonald

promptCompare