\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",[],[159,358],"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",[],[159,366],"d4cc7ba0-0ddd-11f1-bb81-42dde27851f2","Sidebar.tsx","d4cc7dee-0ddd-11f1-bb81-42dde27851f2","d456d4c2-0ddd-11f1-affc-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}\n",[],[159,382,374],"components","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",[],[159,382,384],"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",[],[159,382,392],"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}\n",[],[159,382,400],"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",[],[159,382,408],"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",[],[159,382,416],"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",[],[159,382,424],"d456d404-0ddd-11f1-affc-42dde27851f2",6,["D",1771538182654],[326,327,328,329,330,331,332],[159,382],["D",1771538182280],[325,333,334,335],[159],"d4899330-0ddd-11f1-affc-42dde27851f2","plans","d4899416-0ddd-11f1-affc-42dde27851f2",10,["D",1771538182987],[],[165,440],["D",1771538182578],[323],[165],"d47e06f0-0ddd-11f1-affc-42dde27851f2","routes","d47e07f4-0ddd-11f1-affc-42dde27851f2",9,["D",1771538182911],[],[171,450],"d46f556a-0ddd-11f1-affc-42dde27851f2","database","d46f5632-0ddd-11f1-affc-42dde27851f2",8,["D",1771538182814],[],[171,457],["D",1771538182437],[320,321],[171],"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",[],[177,467],"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",[],[177,475],"d703d18e-0ddd-11f1-9539-42dde27851f2","web-preview.tsx","d703d242-0ddd-11f1-9539-42dde27851f2","d4abe890-0ddd-11f1-bb81-42dde27851f2",131,["D",1771538187142],"\"use client\";\n\nimport {\n WebPreview,\n WebPreviewBody,\n WebPreviewConsole,\n WebPreviewNavigation,\n WebPreviewNavigationButton,\n WebPreviewUrl,\n} from \"@/components/ai-elements/web-preview\";\nimport {\n ArrowLeftIcon,\n ArrowRightIcon,\n ExternalLinkIcon,\n Maximize2Icon,\n MousePointerClickIcon,\n RefreshCcwIcon,\n} from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\n\nconst handleUrlChange = (url: string) => {\n console.log(\"URL changed to:\", url);\n};\n\nconst handleGoBack = () => {\n console.log(\"Go back\");\n};\n\nconst handleGoForward = () => {\n console.log(\"Go forward\");\n};\n\nconst handleReload = () => {\n console.log(\"Reload\");\n};\n\nconst handleSelect = () => {\n console.log(\"Select\");\n};\n\nconst handleOpenInNewTab = () => {\n console.log(\"Open in new tab\");\n};\n\nconst exampleLogs = [\n {\n level: \"log\" as const,\n message: \"Page loaded successfully\",\n timestamp: new Date(Date.now() - 10_000),\n },\n {\n level: \"warn\" as const,\n message: \"Deprecated API usage detected\",\n timestamp: new Date(Date.now() - 5000),\n },\n {\n level: \"error\" as const,\n message: \"Failed to load resource\",\n timestamp: new Date(),\n },\n];\n\nconst Example = () => {\n const [_fullscreen, setFullscreen] = useState(false);\n\n const handleToggleFullscreen = useCallback(\n () => setFullscreen((prev) => !prev),\n [],\n );\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 \n\n \n \n );\n};\n\nexport default Example;\n",[],[177,491,492,493,483],"skills","ai-elements","scripts","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",[],[177,491,492,493,495],"d7352306-0ddd-11f1-8b80-42dde27851f2","transcription.tsx","d7352414-0ddd-11f1-8b80-42dde27851f2",140,["D",1771538187463],"\"use client\";\n\nimport type { Experimental_TranscriptionResult as TranscriptionResult } from \"ai\";\n\nimport {\n Transcription,\n TranscriptionSegment,\n} from \"@/components/ai-elements/transcription\";\nimport { useCallback, useRef, useState } from \"react\";\n\nconst segments: TranscriptionResult[\"segments\"] = [\n {\n endSecond: 0.219,\n startSecond: 0.119,\n text: \"You\",\n },\n {\n endSecond: 0.259,\n startSecond: 0.219,\n text: \" \",\n },\n {\n endSecond: 0.439,\n startSecond: 0.259,\n text: \"can\",\n },\n {\n endSecond: 0.459,\n startSecond: 0.439,\n text: \" \",\n },\n {\n endSecond: 0.699,\n startSecond: 0.459,\n text: \"build\",\n },\n {\n endSecond: 0.72,\n startSecond: 0.699,\n text: \" \",\n },\n {\n endSecond: 0.799,\n startSecond: 0.72,\n text: \"and\",\n },\n {\n endSecond: 0.879,\n startSecond: 0.799,\n text: \" \",\n },\n {\n endSecond: 1.339,\n startSecond: 0.879,\n text: \"host\",\n },\n {\n endSecond: 1.359,\n startSecond: 1.339,\n text: \" \",\n },\n {\n endSecond: 1.539,\n startSecond: 1.36,\n text: \"many\",\n },\n {\n endSecond: 1.6,\n startSecond: 1.539,\n text: \" \",\n },\n {\n endSecond: 1.86,\n startSecond: 1.6,\n text: \"different\",\n },\n {\n endSecond: 1.899,\n startSecond: 1.86,\n text: \" \",\n },\n {\n endSecond: 2.099,\n startSecond: 1.899,\n text: \"types\",\n },\n {\n endSecond: 2.119,\n startSecond: 2.099,\n text: \" \",\n },\n {\n endSecond: 2.2,\n startSecond: 2.119,\n text: \"of\",\n },\n {\n endSecond: 2.259,\n startSecond: 2.2,\n text: \" \",\n },\n {\n endSecond: 2.96,\n startSecond: 2.259,\n text: \"applications\",\n },\n {\n endSecond: 3.479,\n startSecond: 2.96,\n text: \" \",\n },\n {\n endSecond: 3.699,\n startSecond: 3.48,\n text: \"from\",\n },\n {\n endSecond: 3.779,\n startSecond: 3.699,\n text: \" \",\n },\n {\n endSecond: 4.099,\n startSecond: 3.779,\n text: \"static\",\n },\n {\n endSecond: 4.179,\n startSecond: 4.099,\n text: \" \",\n },\n {\n endSecond: 4.519,\n startSecond: 4.179,\n text: \"sites\",\n },\n {\n endSecond: 4.539,\n startSecond: 4.519,\n text: \" \",\n },\n {\n endSecond: 4.759,\n startSecond: 4.539,\n text: \"with\",\n },\n {\n endSecond: 4.799,\n startSecond: 4.759,\n text: \" \",\n },\n {\n endSecond: 4.939,\n startSecond: 4.799,\n text: \"your\",\n },\n {\n endSecond: 4.96,\n startSecond: 4.939,\n text: \" \",\n },\n {\n endSecond: 5.219,\n startSecond: 4.96,\n text: \"favorite\",\n },\n {\n endSecond: 5.319,\n startSecond: 5.219,\n text: \" \",\n },\n {\n endSecond: 5.939,\n startSecond: 5.319,\n text: \"framework,\",\n },\n {\n endSecond: 5.96,\n startSecond: 5.939,\n text: \" \",\n },\n {\n endSecond: 6.519,\n startSecond: 5.96,\n text: \"multi-tenant\",\n },\n {\n endSecond: 6.559,\n startSecond: 6.519,\n text: \" \",\n },\n {\n endSecond: 7.259,\n startSecond: 6.559,\n text: \"applications\",\n },\n {\n endSecond: 7.699,\n startSecond: 7.259,\n text: \" \",\n },\n {\n endSecond: 7.759,\n startSecond: 7.699,\n text: \"or\",\n },\n {\n endSecond: 7.859,\n startSecond: 7.759,\n text: \" \",\n },\n {\n endSecond: 8.739,\n startSecond: 7.859,\n text: \"micro-frontends\",\n },\n {\n endSecond: 8.78,\n startSecond: 8.739,\n text: \" \",\n },\n {\n endSecond: 8.96,\n startSecond: 8.78,\n text: \"to\",\n },\n {\n endSecond: 9.099,\n startSecond: 8.96,\n text: \" \",\n },\n {\n endSecond: 9.779,\n startSecond: 9.099,\n text: \"AI-powered\",\n },\n {\n endSecond: 9.82,\n startSecond: 9.779,\n text: \" \",\n },\n {\n endSecond: 10.439,\n startSecond: 9.82,\n text: \"agents.\",\n },\n];\n\nconst Example = () => {\n const audioRef = useRef(null);\n const [currentTime, setCurrentTime] = useState(0);\n\n const handleSeek = useCallback((time: number) => {\n if (audioRef.current) {\n audioRef.current.currentTime = time;\n }\n }, []);\n\n const handleTimeUpdate = useCallback(() => {\n if (audioRef.current) {\n setCurrentTime(audioRef.current.currentTime);\n }\n }, []);\n\n return (\n

\n {/* biome-ignore lint/a11y/useMediaCaption: \"No caption needed\" */}\n {/* oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) */}\n

\n\n \n {(segment, index) => (\n \n )}\n \n

\n );\n};\n\nexport default Example;\n",[],[177,491,492,493,503],"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",[],[177,491,492,493,511],"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",[],[177,491,492,493,519],"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",[],[177,491,492,493,527],"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",[],[177,491,492,493,535],"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",[],[177,491,492,493,543],"d71d09ec-0ddd-11f1-91c8-42dde27851f2","test-results.tsx","d71d0a8c-0ddd-11f1-91c8-42dde27851f2",135,["D",1771538187293],"\"use client\";\n\nimport {\n Test,\n TestError,\n TestErrorMessage,\n TestErrorStack,\n TestResults,\n TestResultsContent,\n TestResultsDuration,\n TestResultsHeader,\n TestResultsProgress,\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 \n\n \n \n \n \n \n \n \n Expected status 200 but received 500\n \n \n {` at Object. (src/user.test.ts:45:12)\n at Promise.then.completed (node_modules/jest-circus/build/utils.js:391:28)`}\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n Connection timed out after 5000ms\n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[177,491,492,493,551],"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",[],[177,491,492,493,559],"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",[],[177,491,492,493,567],"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",[],[177,491,492,493,575],"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",[],[177,491,492,493,583],"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",[],[177,491,492,493,591],"d75aa414-0ddd-11f1-a928-42dde27851f2",["D",1771538187707],[],[177,491,492,493,32],"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",[],[177,491,492,493,603],"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",[],[177,491,492,493,611],"d753e9e4-0ddd-11f1-8b80-42dde27851f2","suggestion-input.tsx","d753ec46-0ddd-11f1-8b80-42dde27851f2",146,["D",1771538187653],"\"use client\";\n\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\n\nimport {\n PromptInput,\n PromptInputButton,\n PromptInputFooter,\n PromptInputSelect,\n PromptInputSelectContent,\n PromptInputSelectItem,\n PromptInputSelectTrigger,\n PromptInputSelectValue,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Suggestion, Suggestions } from \"@/components/ai-elements/suggestion\";\nimport { GlobeIcon, MicIcon, PlusIcon, SendIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst suggestions: { key: string; value: string }[] = [\n { key: nanoid(), value: \"What are the latest trends in AI?\" },\n { key: nanoid(), value: \"How does machine learning work?\" },\n { key: nanoid(), value: \"Explain quantum computing\" },\n { key: nanoid(), value: \"Best practices for React development\" },\n { key: nanoid(), value: \"Tell me about TypeScript benefits\" },\n { key: nanoid(), value: \"How to optimize database queries?\" },\n { key: nanoid(), value: \"What is the difference between SQL and NoSQL?\" },\n { key: nanoid(), value: \"Explain cloud computing basics\" },\n];\n\nconst models = [\n { id: \"gpt-4\", name: \"GPT-4\" },\n { id: \"gpt-3.5-turbo\", name: \"GPT-3.5 Turbo\" },\n { id: \"claude-2\", name: \"Claude 2\" },\n { id: \"claude-instant\", name: \"Claude Instant\" },\n { id: \"palm-2\", name: \"PaLM 2\" },\n { id: \"llama-2-70b\", name: \"Llama 2 70B\" },\n { id: \"llama-2-13b\", name: \"Llama 2 13B\" },\n { id: \"cohere-command\", name: \"Command\" },\n { id: \"mistral-7b\", name: \"Mistral 7B\" },\n];\n\nconst 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 console.log(\"Submitted message:\", message.text || \"Sent with attachments\");\n console.log(\"Attached files:\", message.files);\n};\n\ninterface SuggestionItemProps {\n suggestion: { key: string; value: string };\n onSuggestionClick: (value: string) => void;\n}\n\nconst SuggestionItem = memo(\n ({ suggestion, onSuggestionClick }: SuggestionItemProps) => {\n const handleClick = useCallback(\n () => onSuggestionClick(suggestion.value),\n [onSuggestionClick, suggestion.value],\n );\n return (\n \n );\n },\n);\n\nSuggestionItem.displayName = \"SuggestionItem\";\n\nconst Example = () => {\n const [model, setModel] = useState(models[0].id);\n const [text, setText] = useState(\"\");\n\n const handleSuggestionClick = useCallback((suggestion: string) => {\n setText(suggestion);\n }, []);\n\n const handleTextChange = useCallback(\n (e: React.ChangeEvent) => setText(e.target.value),\n [],\n );\n\n return (\n

\n \n {suggestions.map((suggestion) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n Search\n \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 );\n};\n\nexport default Example;\n",[],[177,491,492,493,619],"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",[],[177,491,492,493,627],"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",[],[177,491,492,493,635],"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",[],[177,491,492,493,643],"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",[],[177,491,492,493,651],"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",[],[177,491,492,493,659],"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",[],[177,491,492,493,667],"d73fafe2-0ddd-11f1-9f87-42dde27851f2","snippet.tsx","d73fb08c-0ddd-11f1-9f87-42dde27851f2",142,["D",1771538187501],"\"use client\";\n\nimport {\n Snippet,\n SnippetAddon,\n SnippetCopyButton,\n SnippetInput,\n SnippetText,\n} from \"@/components/ai-elements/snippet\";\n\nconst Example = () => (\n

\n \n \n $\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[177,491,492,493,675],"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",[],[177,491,492,493,683],"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",[],[177,491,492,493,691],"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",[],[177,491,492,493,699],"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",[],[177,491,492,493,707],"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",[],[177,491,492,493,715],"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",[],[177,491,492,493,723],"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",[],[177,491,492,493,731],"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",[],[177,491,492,493,739],"d709808e-0ddd-11f1-99d1-42dde27851f2","schema-display-basic.tsx","d709816a-0ddd-11f1-99d1-42dde27851f2",132,["D",1771538187172],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[177,491,492,493,747],"d722934e-0ddd-11f1-9539-42dde27851f2","sandbox.tsx","d722942a-0ddd-11f1-9539-42dde27851f2",136,["D",1771538187310],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport {\n CodeBlock,\n CodeBlockCopyButton,\n} from \"@/components/ai-elements/code-block\";\nimport {\n Sandbox,\n SandboxContent,\n SandboxHeader,\n SandboxTabContent,\n SandboxTabs,\n SandboxTabsBar,\n SandboxTabsList,\n SandboxTabsTrigger,\n} from \"@/components/ai-elements/sandbox\";\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\";\nimport { Button } from \"@/components/ui/button\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst code = `import math\n\ndef calculate_primes(limit):\n \"\"\"Find all prime numbers up to a given limit using Sieve of Eratosthenes.\"\"\"\n sieve = [True] * (limit + 1)\n sieve[0] = sieve[1] = False\n \n for i in range(2, int(math.sqrt(limit)) + 1):\n if sieve[i]:\n for j in range(i * i, limit + 1, i):\n sieve[j] = False\n \n return [i for i, is_prime in enumerate(sieve) if is_prime]\n\nif __name__ == \"__main__\":\n primes = calculate_primes(50)\n print(f\"Found {len(primes)} prime numbers up to 50:\")\n print(primes)`;\n\nconst outputs: Record = {\n \"input-available\": undefined,\n \"input-streaming\": undefined,\n \"output-available\": `Found 15 prime numbers up to 50:\n[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47]`,\n \"output-error\":\n `TypeError: Cannot read properties of undefined (reading 'map')\n at calculatePrimes (/src/utils/primes.ts:15:23)\n at runCalculation (/src/components/Calculator.tsx:42:12)\n at onClick (/src/components/Button.tsx:18:5)\n at HTMLButtonElement.dispatch (node_modules/react-dom/cjs/react-dom.development.js:3456:9)\n at node_modules/react-dom/cjs/react-dom.development.js:4245:12`,\n};\n\nconst states: ToolUIPart[\"state\"][] = [\n \"input-streaming\",\n \"input-available\",\n \"output-available\",\n \"output-error\",\n];\n\ninterface StateButtonProps {\n s: ToolUIPart[\"state\"];\n currentState: ToolUIPart[\"state\"];\n onStateChange: (state: ToolUIPart[\"state\"]) => void;\n}\n\nconst StateButton = memo(\n ({ s, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(() => onStateChange(s), [onStateChange, s]);\n return (\n \n {s}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [state, setState] = useState(\"output-available\");\n\n const handleStateChange = useCallback((s: ToolUIPart[\"state\"]) => {\n setState(s);\n }, []);\n\n return (\n

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

\n\n \n \n \n \n \n \n Code\n Output\n \n \n \n \n \n \n \n \n {state === \"output-error\"\n ? (\n \n \n \n \n \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",[],[177,491,492,493,755],"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",[],[177,491,492,493,763],"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",[],[177,491,492,493,771],"d710d2b2-0ddd-11f1-9539-42dde27851f2","queue-prompt-input.tsx","d710d366-0ddd-11f1-9539-42dde27851f2",133,["D",1771538187226],"\"use client\";\n\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\nimport type { QueueTodo } from \"@/components/ai-elements/queue\";\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 PromptInputHeader,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n} from \"@/components/ai-elements/prompt-input\";\nimport {\n Queue,\n QueueItem,\n QueueItemAction,\n QueueItemActions,\n QueueItemContent,\n QueueItemDescription,\n QueueItemIndicator,\n QueueSection,\n QueueSectionContent,\n} from \"@/components/ai-elements/queue\";\nimport { CheckIcon, GlobeIcon, Trash2 } from \"lucide-react\";\nimport { memo, useCallback, useRef, 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 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\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 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\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 [todos, setTodos] = useState(sampleTodos);\n\n const handleRemoveTodo = useCallback((id: string) => {\n setTodos((prev) => prev.filter((todo) => todo.id !== id));\n }, []);\n\n const [text, setText] = useState(\"\");\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 const timeoutRef = useRef(null);\n\n const handleTextChange = useCallback(\n (e: React.ChangeEvent) => setText(e.target.value),\n [],\n );\n\n const handleModelSelect = useCallback((id: string) => {\n setModel(id);\n setModelSelectorOpen(false);\n }, []);\n\n const selectedModelData = models.find((m) => m.id === model);\n\n const stop = () => {\n console.log(\"Stopping request...\");\n\n // Clear any pending timeouts\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n\n setStatus(\"ready\");\n };\n\n const handleSubmit = useCallback(\n (message: PromptInputMessage) => {\n // If currently streaming or submitted, stop instead of submitting\n if (status === \"streaming\" || status === \"submitted\") {\n stop();\n return;\n }\n\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 console.log(\"Submitting message:\", message);\n\n setTimeout(() => {\n setStatus(\"streaming\");\n }, SUBMITTING_TIMEOUT);\n\n timeoutRef.current = setTimeout(() => {\n setStatus(\"ready\");\n timeoutRef.current = null;\n }, STREAMING_TIMEOUT);\n },\n [status],\n );\n\n return (\n

\n \n {todos.length > 0 && (\n \n \n

\n {todos.map((todo) => (\n \n ))}\n

\n \n \n )}\n \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\nexport default Example;\n",[],[177,491,492,493,779],"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",[],[177,491,492,493,787],"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",[],[177,491,492,493,795],"d7014540-0ddd-11f1-99d1-42dde27851f2","prompt-input-cursor.tsx","d7014608-0ddd-11f1-99d1-42dde27851f2",130,["D",1771538187126],"\"use client\";\n\nimport type { AttachmentData } from \"@/components/ai-elements/attachments\";\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\nimport type { SourceDocumentUIPart } from \"ai\";\n\nimport {\n Attachment,\n AttachmentInfo,\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 PromptInputBody,\n PromptInputButton,\n PromptInputCommand,\n PromptInputCommandEmpty,\n PromptInputCommandGroup,\n PromptInputCommandInput,\n PromptInputCommandItem,\n PromptInputCommandList,\n PromptInputCommandSeparator,\n PromptInputFooter,\n PromptInputHeader,\n PromptInputHoverCard,\n PromptInputHoverCardContent,\n PromptInputHoverCardTrigger,\n PromptInputProvider,\n PromptInputSubmit,\n PromptInputTab,\n PromptInputTabBody,\n PromptInputTabItem,\n PromptInputTabLabel,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n usePromptInputReferencedSources,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n AtSignIcon,\n CheckIcon,\n FilesIcon,\n GlobeIcon,\n ImageIcon,\n RulerIcon,\n} 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: AttachmentData;\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 SourceItemProps {\n source: AttachmentData;\n onRemove: (id: string) => void;\n}\n\nconst SourceItem = memo(({ source, onRemove }: SourceItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(source.id),\n [onRemove, source.id],\n );\n return (\n \n \n \n \n \n );\n});\n\nSourceItem.displayName = \"SourceItem\";\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\ninterface SourceCommandItemProps {\n source: SourceDocumentUIPart;\n index: number;\n onAdd: (source: SourceDocumentUIPart) => void;\n}\n\nconst SourceCommandItem = memo(\n ({ source, index, onAdd }: SourceCommandItemProps) => {\n const handleSelect = useCallback(() => onAdd(source), [onAdd, source]);\n return (\n \n \n

\n {source.title}\n \n {source.filename}\n \n

\n \n );\n },\n);\n\nSourceCommandItem.displayName = \"SourceCommandItem\";\n\nconst sampleSources: SourceDocumentUIPart[] = [\n {\n filename: \"packages/elements/src\",\n mediaType: \"text/plain\",\n sourceId: \"1\",\n title: \"prompt-input.tsx\",\n type: \"source-document\",\n },\n {\n filename: \"apps/test/app/examples\",\n mediaType: \"text/plain\",\n sourceId: \"2\",\n title: \"queue.tsx\",\n type: \"source-document\",\n },\n {\n filename: \"packages/elements/src\",\n mediaType: \"text/plain\",\n sourceId: \"3\",\n title: \"queue.tsx\",\n type: \"source-document\",\n },\n];\n\nconst sampleTabs = {\n active: [{ path: \"packages/elements/src/task-queue-panel.tsx\" }],\n recents: [\n { path: \"apps/test/app/examples/task-queue-panel.tsx\" },\n { path: \"apps/test/app/page.tsx\" },\n { path: \"packages/elements/src/task.tsx\" },\n { path: \"apps/test/app/examples/prompt-input.tsx\" },\n { path: \"packages/elements/src/queue.tsx\" },\n { path: \"apps/test/app/examples/queue.tsx\" },\n ],\n};\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 PromptInputReferencedSourcesDisplay = () => {\n const refs = usePromptInputReferencedSources();\n\n const handleRemove = useCallback((id: string) => refs.remove(id), [refs]);\n\n if (refs.sources.length === 0) {\n return null;\n }\n\n return (\n \n {refs.sources.map((source) => (\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 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 \n 1\n \n \n \n

\n Attached Project Rules\n

\n Always Apply:\n

ultracite.mdc

\n Click to manage\n

\n \n \n \n \n \n \n 1 Tab\n \n \n \n \n Active Tabs\n \n {sampleTabs.active.map((tab) => (\n \n \n \n {tab.path}\n \n \n ))}\n \n \n \n Recents\n \n {sampleTabs.recents.map((tab) => (\n \n \n \n {tab.path}\n \n \n ))}\n \n \n

\n Only file paths are included\n

\n \n \n \n \n \n \n \n \n \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

\n );\n};\n\nexport default Example;\n\nconst SampleFilesMenu = () => {\n const refs = usePromptInputReferencedSources();\n\n const handleAdd = useCallback(\n (source: SourceDocumentUIPart) => refs.add(source),\n [refs],\n );\n\n return (\n \n \n \n \n No results found.\n \n \n \n \n Active Tabs\n ✓\n \n \n \n \n {sampleSources\n .filter(\n (source) =>\n !refs.sources.some(\n (s) =>\n s.title === source.title && s.filename === source.filename,\n ),\n )\n .map((source, index) => (\n \n ))}\n \n \n \n );\n};\n",[],[177,491,492,493,803],"d744223e-0ddd-11f1-91c8-42dde27851f2","plan.tsx","d74422fc-0ddd-11f1-91c8-42dde27851f2",143,["D",1771538187561],"\"use client\";\n\nimport {\n Plan,\n PlanAction,\n PlanContent,\n PlanDescription,\n PlanFooter,\n PlanHeader,\n PlanTitle,\n PlanTrigger,\n} from \"@/components/ai-elements/plan\";\nimport { Button } from \"@/components/ui/button\";\nimport { FileText } from \"lucide-react\";\n\nconst Example = () => (\n \n \n

\n \n Rewrite AI Elements to SolidJS\n

\n \n Rewrite the AI Elements component library from React to SolidJS while\n maintaining compatibility with existing React-based shadcn/ui\n components using solid-js/compat, updating all 29 components and their\n test suite.\n \n

\n \n \n \n

Overview

\n This plan outlines the migration strategy for converting the AI\n Elements library from React to SolidJS, ensuring compatibility and\n maintaining existing functionality.\n

Key Steps

Set up SolidJS project structure
Install solid-js/compat for React compatibility
Migrate components one by one
Update test suite for each component
Verify compatibility with shadcn/ui

\n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[177,491,492,493,811],"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",[],[177,491,492,493,819],"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",[],[177,491,492,493,827],"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",[],[177,491,492,493,835],"d7276d10-0ddd-11f1-91c8-42dde27851f2","persona-glint.tsx","d7276dce-0ddd-11f1-91c8-42dde27851f2",137,["D",1771538187373],"\"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",[],[177,491,492,493,843],"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",[],[177,491,492,493,851],"d6f84486-0ddd-11f1-9539-42dde27851f2","package-info.tsx","d6f8454e-0ddd-11f1-9539-42dde27851f2",128,["D",1771538187054],"\"use client\";\n\nimport {\n PackageInfo,\n PackageInfoChangeType,\n PackageInfoContent,\n PackageInfoDependencies,\n PackageInfoDependency,\n PackageInfoDescription,\n PackageInfoHeader,\n PackageInfoName,\n PackageInfoVersion,\n} from \"@/components/ai-elements/package-info\";\n\nconst Example = () => (\n

\n \n \n \n \n \n \n \n A JavaScript library for building user interfaces.\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",[],[177,491,492,493,859],"d72f825c-0ddd-11f1-9f87-42dde27851f2","open-in-chat.tsx","d72f82fc-0ddd-11f1-9f87-42dde27851f2",139,["D",1771538187427],"\"use client\";\n\nimport {\n OpenIn,\n OpenInChatGPT,\n OpenInClaude,\n OpenInContent,\n OpenInCursor,\n OpenInScira,\n OpenInT3,\n OpenInTrigger,\n OpenInv0,\n} from \"@/components/ai-elements/open-in-chat\";\n\nconst Example = () => {\n const sampleQuery = \"How can I implement authentication in Next.js?\";\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Example;\n",[],[177,491,492,493,867],"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",[],[177,491,492,493,875],"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",[],[177,491,492,493,883],"d74b49d8-0ddd-11f1-8b80-42dde27851f2","message.tsx","d74b4a8c-0ddd-11f1-8b80-42dde27851f2",144,["D",1771538187594],"\"use client\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n Message,\n MessageAction,\n MessageActions,\n MessageBranch,\n MessageBranchContent,\n MessageBranchNext,\n MessageBranchPage,\n MessageBranchPrevious,\n MessageBranchSelector,\n MessageContent,\n MessageResponse,\n MessageToolbar,\n} from \"@/components/ai-elements/message\";\nimport {\n CopyIcon,\n RefreshCcwIcon,\n ThumbsDownIcon,\n ThumbsUpIcon,\n} from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst messages: {\n key: string;\n from: \"user\" | \"assistant\";\n versions?: { id: string; content: string }[];\n content?: string;\n attachments?: {\n id: string;\n type: \"file\";\n url: string;\n mediaType?: string;\n filename?: string;\n }[];\n}[] = [\n {\n attachments: [\n {\n filename: \"palace-of-fine-arts.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\",\n url:\n \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop\",\n },\n {\n filename: \"react-hooks-guide.pdf\",\n id: nanoid(),\n mediaType: \"application/pdf\",\n type: \"file\",\n url: \"\",\n },\n ],\n content: \"How do React hooks work and when should I use them?\",\n from: \"user\",\n key: nanoid(),\n },\n {\n from: \"assistant\",\n key: nanoid(),\n versions: [\n {\n content: `# React Hooks Guide\n\nReact hooks are functions that let you \"hook into\" React state and lifecycle features from function components. Here's what you need to know:\n\n## Core Hooks\n\n### useState\nAdds state to functional components:\n\n\\`\\`\\`jsx\nconst [count, setCount] = useState(0);\n\nreturn (\n \n);\n\\`\\`\\`\n\n### useEffect\nHandles side effects (data fetching, subscriptions, DOM updates):\n\n\\`\\`\\`jsx\nuseEffect(() => {\n document.title = \\`You clicked \\${count} times\\`;\n\n // Cleanup function (optional)\n return () => {\n document.title = 'React App';\n };\n}, [count]); // Dependency array\n\\`\\`\\`\n\n## When to Use Hooks\n\n- ✅ **Function components** - Hooks only work in function components\n- ✅ **Replacing class components** - Modern React favors hooks over classes\n- ✅ **Sharing stateful logic** - Create custom hooks to reuse logic\n- ❌ **Class components** - Use lifecycle methods instead\n\n## Rules of Hooks\n\n1. Only call hooks at the **top level** (not inside loops, conditions, or nested functions)\n2. Only call hooks from **React functions** (components or custom hooks)\n\nWould you like to explore more advanced hooks like \\`useCallback\\` or \\`useMemo\\`?`,\n id: nanoid(),\n },\n {\n content:\n `React hooks are special functions that let you use React features in function components. The most common ones are:\n\n- **useState** - for managing component state\n- **useEffect** - for side effects like data fetching\n- **useContext** - for consuming context values\n- **useRef** - for accessing DOM elements\n\nHere's a simple example:\n\n\\`\\`\\`jsx\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n \n );\n}\n\\`\\`\\`\n\nWhich specific hook would you like to learn more about?`,\n id: nanoid(),\n },\n {\n content:\n `Absolutely! React hooks are a powerful feature introduced in React 16.8. They solve several problems:\n\n## Key Benefits\n\n1. **Simpler code** - No need for class components\n2. **Reusable logic** - Extract stateful logic into custom hooks\n3. **Better organization** - Group related code together\n\n## Most Popular Hooks\n\n| Hook | Purpose |\n|------|---------|\n| useState | Add state to components |\n| useEffect | Handle side effects |\n| useContext | Access context values |\n| useReducer | Complex state logic |\n| useCallback | Memoize functions |\n| useMemo | Memoize values |\n\nThe beauty of hooks is that they let you reuse stateful logic without changing your component hierarchy. Want to dive into a specific hook?`,\n id: nanoid(),\n },\n ],\n },\n];\n\nconst handleCopy = (content: string) => {\n navigator.clipboard.writeText(content);\n};\n\nconst handleRetry = () => {\n console.log(\"Retrying...\");\n};\n\ninterface LikeActionProps {\n messageKey: string;\n isLiked: boolean;\n onToggle: (key: string) => void;\n}\n\nconst LikeAction = memo(\n ({ messageKey, isLiked, onToggle }: LikeActionProps) => {\n const handleClick = useCallback(\n () => onToggle(messageKey),\n [messageKey, onToggle],\n );\n return (\n \n \n \n );\n },\n);\n\nLikeAction.displayName = \"LikeAction\";\n\ninterface DislikeActionProps {\n messageKey: string;\n isDisliked: boolean;\n onToggle: (key: string) => void;\n}\n\nconst DislikeAction = memo(\n ({ messageKey, isDisliked, onToggle }: DislikeActionProps) => {\n const handleClick = useCallback(\n () => onToggle(messageKey),\n [messageKey, onToggle],\n );\n return (\n \n \n \n );\n },\n);\n\nDislikeAction.displayName = \"DislikeAction\";\n\ninterface CopyActionProps {\n content: string;\n}\n\nconst CopyAction = memo(({ content }: CopyActionProps) => {\n const handleClick = useCallback(() => handleCopy(content), [content]);\n return (\n \n \n \n );\n});\n\nCopyAction.displayName = \"CopyAction\";\n\nconst Example = () => {\n const [liked, setLiked] = useState>({});\n const [disliked, setDisliked] = useState>({});\n\n const handleToggleLike = useCallback((key: string) => {\n setLiked((prev) => ({ ...prev, [key]: !prev[key] }));\n }, []);\n\n const handleToggleDislike = useCallback((key: string) => {\n setDisliked((prev) => ({ ...prev, [key]: !prev[key] }));\n }, []);\n\n return (\n

\n {/* biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Demo component with complex rendering logic */}\n {messages.map((message) => (\n \n {message.versions?.length && message.versions.length > 1\n ? (\n \n \n {message.versions?.map((version) => (\n \n {version.content}\n \n ))}\n \n {message.from === \"assistant\" && (\n \n \n \n \n \n \n \n \n \n \n \n \n v.id)?.content ||\n \"\"}\n />\n \n \n )}\n \n )\n : (\n

\n {message.attachments && message.attachments.length > 0 && (\n \n {message.attachments.map((attachment) => (\n \n \n \n \n ))}\n \n )}\n \n {message.from === \"assistant\"\n ? {message.content}\n : (\n message.content\n )}\n \n {message.from === \"assistant\" && message.versions && (\n \n \n \n \n \n \n \n \n )}\n

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

\n );\n};\n\nexport default Example;\n",[],[177,491,492,493,891],"d6f0b284-0ddd-11f1-a928-42dde27851f2","jsx-preview.tsx","d6f0b34c-0ddd-11f1-a928-42dde27851f2",126,["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",[],[177,491,492,493,899],"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",[],[177,491,492,493,907],"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",[],[177,491,492,493,915],"d6f4d01c-0ddd-11f1-bf1c-42dde27851f2","file-tree-selection.tsx","d6f4d0c6-0ddd-11f1-bf1c-42dde27851f2",127,["D",1771538185742],"\"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\nexport default Example;\n",[],[177,491,492,493,923],"d7504c1c-0ddd-11f1-a81b-42dde27851f2","environment-variables.tsx","d7504cee-0ddd-11f1-a81b-42dde27851f2",145,["D",1771538187642],"\"use client\";\n\nimport {\n EnvironmentVariable,\n EnvironmentVariableCopyButton,\n EnvironmentVariableGroup,\n EnvironmentVariableName,\n EnvironmentVariableRequired,\n EnvironmentVariables,\n EnvironmentVariablesContent,\n EnvironmentVariablesHeader,\n EnvironmentVariablesTitle,\n EnvironmentVariablesToggle,\n EnvironmentVariableValue,\n} from \"@/components/ai-elements/environment-variables\";\n\nconst variables = [\n {\n name: \"DATABASE_URL\",\n required: true,\n value: \"postgresql://localhost:5432/mydb\",\n },\n { name: \"API_KEY\", required: true, value: \"sk-1234567890abcdef\" },\n { name: \"NODE_ENV\", required: false, value: \"production\" },\n { name: \"PORT\", required: false, value: \"3000\" },\n];\n\nconst handleCopy = () => {\n console.log(\"Copied!\");\n};\n\nconst Example = () => (\n \n \n \n \n \n \n {variables.map((variable) => (\n \n \n \n {variable.required && }\n \n \n \n \n \n \n ))}\n \n \n);\n\nexport default Example;\n",[],[177,491,492,493,931],"d6fd483c-0ddd-11f1-99d1-42dde27851f2","conversation.tsx","d6fd4904-0ddd-11f1-99d1-42dde27851f2",129,["D",1771538187101],"\"use client\";\n\nimport {\n Conversation,\n ConversationContent,\n ConversationDownload,\n ConversationEmptyState,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport { Message, MessageContent } from \"@/components/ai-elements/message\";\nimport { MessageSquareIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\nimport { useEffect, useState } from \"react\";\n\nconst messages: {\n key: string;\n content: string;\n role: \"user\" | \"assistant\";\n}[] = [\n {\n content: \"Hello, how are you?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"I'm good, thank you! How can I assist you today?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"I'm looking for information about your services.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content:\n \"Sure! We offer a variety of AI solutions. What are you interested in?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"I'm interested in natural language processing tools.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Great choice! We have several NLP APIs. Would you like a demo?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Yes, a demo would be helpful.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Alright, I can show you a sentiment analysis example. Ready?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Yes, please proceed.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Here is a sample: 'I love this product!' → Positive sentiment.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Impressive! Can it handle multiple languages?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Absolutely, our models support over 20 languages.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"How do I get started with the API?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"You can sign up on our website and get an API key instantly.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Is there a free trial available?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Yes, we offer a 14-day free trial with full access.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"What kind of support do you provide?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"We provide 24/7 chat and email support for all users.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Thank you for the information!\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"You're welcome! Let me know if you have any more questions.\",\n key: nanoid(),\n role: \"assistant\",\n },\n];\n\nconst Example = () => {\n const [visibleMessages, setVisibleMessages] = useState<\n {\n key: string;\n content: string;\n role: \"user\" | \"assistant\";\n }[]\n >([]);\n\n useEffect(() => {\n let currentIndex = 0;\n const interval = setInterval(() => {\n if (currentIndex < messages.length && messages[currentIndex]) {\n const currentMessage = messages[currentIndex];\n setVisibleMessages((prev) => [\n ...prev,\n {\n content: currentMessage.content,\n key: currentMessage.key,\n role: currentMessage.role,\n },\n ]);\n currentIndex += 1;\n } else {\n clearInterval(interval);\n }\n }, 500);\n\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n \n {visibleMessages.length === 0\n ? (\n }\n title=\"Start a conversation\"\n />\n )\n : (\n visibleMessages.map(({ key, content, role }) => (\n \n {content}\n \n ))\n )}\n \n \n \n \n );\n};\n\nexport default Example;\n",[],[177,491,492,493,939],"d72b949e-0ddd-11f1-8b80-42dde27851f2","context.tsx","d72b9534-0ddd-11f1-8b80-42dde27851f2",138,["D",1771538187400],"\"use client\";\n\nimport {\n Context,\n ContextCacheUsage,\n ContextContent,\n ContextContentBody,\n ContextContentFooter,\n ContextContentHeader,\n ContextInputUsage,\n ContextOutputUsage,\n ContextReasoningUsage,\n ContextTrigger,\n} from \"@/components/ai-elements/context\";\n\nconst Example = () => (\n

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

\n);\n\nexport default Example;\n",[],[177,491,492,493,947],"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 \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 Reject\n \n \n Approve\n \n \n \n

\n);\n\nexport default Example;\n",[],[177,491,492,493,955],"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",[],[177,491,492,493,963],"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\nexport default Example;\n",[],[177,491,492,493,971],"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",[],[177,491,492,493,979],"d73a699c-0ddd-11f1-91c8-42dde27851f2","code-block.tsx","d73a6a5a-0ddd-11f1-91c8-42dde27851f2",141,["D",1771538187485],"\"use client\";\n\nimport type { BundledLanguage } from \"shiki\";\n\nimport {\n CodeBlock,\n CodeBlockActions,\n CodeBlockCopyButton,\n CodeBlockFilename,\n CodeBlockHeader,\n CodeBlockLanguageSelector,\n CodeBlockLanguageSelectorContent,\n CodeBlockLanguageSelectorItem,\n CodeBlockLanguageSelectorTrigger,\n CodeBlockLanguageSelectorValue,\n CodeBlockTitle,\n} from \"@/components/ai-elements/code-block\";\nimport { FileIcon } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\n\nconst codeExamples = {\n go: {\n code: `package main\n\nimport \"fmt\"\n\nfunc greet(name string) string {\n return fmt.Sprintf(\"Hello, %s!\", name)\n}\n\nfunc main() {\n fmt.Println(greet(\"World\"))\n}`,\n filename: \"greet.go\",\n },\n python: {\n code: `def greet(name: str) -> str:\n return f\"Hello, {name}!\"\n\nprint(greet(\"World\"))`,\n filename: \"greet.py\",\n },\n rust: {\n code: `fn greet(name: &str) -> String {\n format!(\"Hello, {}!\", name)\n}\n\nfn main() {\n println!(\"{}\", greet(\"World\"));\n}`,\n filename: \"greet.rs\",\n },\n typescript: {\n code: `function greet(name: string): string {\n return \\`Hello, \\${name}!\\`;\n}\n\nconsole.log(greet(\"World\"));`,\n filename: \"greet.ts\",\n },\n} as const;\n\ntype Language = keyof typeof codeExamples;\n\nconst languages: { value: Language; label: string }[] = [\n { label: \"TypeScript\", value: \"typescript\" },\n { label: \"Python\", value: \"python\" },\n { label: \"Rust\", value: \"rust\" },\n { label: \"Go\", value: \"go\" },\n];\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 Example = () => {\n const [language, setLanguage] = useState(\"typescript\");\n const { code, filename } = codeExamples[language];\n\n const handleLanguageChange = useCallback((value: string) => {\n setLanguage(value as Language);\n }, []);\n\n return (\n \n \n \n \n {filename}\n \n \n \n \n \n \n \n {languages.map((lang) => (\n \n {lang.label}\n \n ))}\n \n \n \n \n \n \n );\n};\n\nexport default Example;\n",[],[177,491,492,493,987],"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",[],[177,491,492,493,995],"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",[],[177,491,492,493,1003],"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",[],[177,491,492,493,1011],"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",[],[177,491,492,493,1019],"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",[],[177,491,492,493,1027],"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",[],[177,491,492,493,1035],"d715c178-0ddd-11f1-8b80-42dde27851f2","artifact.tsx","d715c25e-0ddd-11f1-8b80-42dde27851f2",134,["D",1771538187236],"\"use client\";\n\nimport {\n Artifact,\n ArtifactAction,\n ArtifactActions,\n ArtifactContent,\n ArtifactDescription,\n ArtifactHeader,\n ArtifactTitle,\n} from \"@/components/ai-elements/artifact\";\nimport { CodeBlock } from \"@/components/ai-elements/code-block\";\nimport {\n CopyIcon,\n DownloadIcon,\n PlayIcon,\n RefreshCwIcon,\n ShareIcon,\n} from \"lucide-react\";\n\nconst handleRun = () => {\n console.log(\"Run\");\n};\n\nconst handleCopy = () => {\n console.log(\"Copy\");\n};\n\nconst handleRegenerate = () => {\n console.log(\"Regenerate\");\n};\n\nconst handleDownload = () => {\n console.log(\"Download\");\n};\n\nconst handleShare = () => {\n console.log(\"Share\");\n};\n\nconst code = `# Dijkstra's Algorithm implementation\nimport heapq\n\ndef dijkstra(graph, start):\n distances = {node: float('inf') for node in graph}\n distances[start] = 0\n heap = [(0, start)]\n visited = set()\n \n while heap:\n current_distance, current_node = heapq.heappop(heap)\n if current_node in visited:\n continue\n visited.add(current_node)\n \n for neighbor, weight in graph[current_node].items():\n distance = current_distance + weight\n if distance < distances[neighbor]:\n distances[neighbor] = distance\n heapq.heappush(heap, (distance, neighbor))\n \n return distances\n\n# Example graph\n graph = {\n 'A': {'B': 1, 'C': 4},\n 'B': {'A': 1, 'C': 2, 'D': 5},\n 'C': {'A': 4, 'B': 2, 'D': 1},\n 'D': {'B': 5, 'C': 1}\n}\n\nprint(dijkstra(graph, 'A'))`;\n\nconst Example = () => (\n \n \n

\n Dijkstra's Algorithm Implementation\n Updated 1 minute ago\n

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

\n \n \n \n \n \n);\n\nexport default Example;\n",[],[177,491,492,493,1043],"d5f845fe-0ddd-11f1-9539-42dde27851f2","agent.tsx","d5f846b2-0ddd-11f1-9539-42dde27851f2",78,["D",1771538185384],"\"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",[],[177,491,492,493,1051],"d4abe7b4-0ddd-11f1-bb81-42dde27851f2","d493db2e-0ddd-11f1-affc-42dde27851f2",13,["D",1771538183208],[245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316],[177,491,492,493],"d59be052-0ddd-11f1-b72b-42dde27851f2","web-preview.md","d59be14c-0ddd-11f1-b72b-42dde27851f2","d49faa8a-0ddd-11f1-affc-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",[],[177,491,492,1073,1065],"references","d5981f6c-0ddd-11f1-845e-42dde27851f2","voice-selector.md","d5982016-0ddd-11f1-845e-42dde27851f2",55,["D",1771538184750],"# Voice Selector\n\nA composable dialog component for selecting AI voices with metadata display and\nsearch functionality.\n\nThe `VoiceSelector` component provides a flexible and composable interface for\nselecting AI voices. Built on shadcn/ui's Dialog and Command components, it\nfeatures a searchable voice list with support for metadata display (gender,\naccent, age), grouping, and customizable layouts. The component includes a\ncontext provider for accessing voice selection state from any nested component.\n\nSee `scripts/voice-selector.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add voice-selector\n```\n\n## Features\n\n- Fully composable architecture with granular control components\n- Built on shadcn/ui Dialog and Command components\n- React Context API for accessing state in nested components\n- Searchable voice list with real-time filtering\n- Support for voice metadata with icons and emojis (gender icons, accent flags,\n age)\n- Voice preview button with play/pause/loading states\n- Voice grouping with separators and bullet dividers\n- Keyboard navigation support\n- Controlled and uncontrolled component patterns\n- Full TypeScript support with proper types for all components\n\n## Props\n\n### ``\n\nRoot Dialog component that provides context for all child components. Manages\nboth voice selection and dialog open states.\n\n| Prop | Type | Default | Description |\n| --------------- | ------------------------------------- | ------------------- | --------------------------------------------------------------------------- |\n| `value` | `string` | - | The selected voice ID (controlled). |\n| `defaultValue` | `string` | - | The default selected voice ID (uncontrolled). |\n| `onValueChange` | `(value: string | undefined) => void` | - |\n| `defaultOpen` | `boolean` | `false` | The default open state (uncontrolled). |\n| `open` | `boolean` | - | The open state (controlled). |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback fired when the open state changes. |\n| `modal` | `boolean` | `true` | Whether the dialog is modal (blocks interaction with the rest of the page). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Dialog component. |\n\n### ``\n\nButton or element that opens the voice selector dialog.\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |\n| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the DialogTrigger component. |\n\n### ``\n\nContainer for the Command component and voice list, rendered inside the dialog.\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |\n| `title` | `ReactNode` | - | The title for screen readers. Hidden visually but accessible to assistive technologies. |\n| `className` | `string` | - | Additional CSS classes to apply to the dialog content. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the DialogContent component. |\n\n### ``\n\nAlternative dialog implementation using CommandDialog for a full-screen command\npalette style.\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | ---------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandDialog component. |\n\n### ``\n\nSearch input for filtering voices.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `placeholder` | `string` | - | Placeholder text for the search input. |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandInput component. |\n\n### ``\n\nScrollable container for voice items and groups.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandList component. |\n\n### ``\n\nMessage shown when no voices match the search query.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `children` | `ReactNode` | - | The message to display. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandEmpty component. |\n\n### ``\n\nGroups related voices together with an optional heading.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `heading` | `string` | - | The heading text for the group. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandGroup component. |\n\n### ``\n\nSelectable item representing a voice.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ---------------------------------------------------------------- |\n| `value` | `string` | - | The unique identifier for this voice. Used for search filtering. |\n| `onSelect` | `(value: string) => void` | - | Callback fired when the voice is selected. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandItem component. |\n\n### ``\n\nVisual separator between voice groups.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandSeparator component. |\n\n### ``\n\nDisplays the voice name with proper styling.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays the voice gender metadata with icons from Lucide. Supports multiple\ngender identities with corresponding icons.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------------------------------- |\n| `value` | `unknown` | - | The gender value that determines which icon to display. Supported values: |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `children` | `ReactNode` | - | Override the icon with custom content. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays the voice accent metadata with emoji flags representing different\ncountries/regions.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------ |\n| `value` | `unknown` | - | The accent value that determines which flag emoji to display. Supports 27 different accents including: |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `children` | `ReactNode` | - | Override the flag emoji with custom content. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays the voice age metadata with muted styling and tabular numbers for\nconsistent alignment.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays a description for the voice with muted styling.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nContainer for grouping voice attributes (gender, accent, age) together. Use with\n`VoiceSelectorBullet` for separation.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ---------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\nDisplays a bullet separator (•) between voice attributes. Hidden from screen\nreaders via `aria-hidden`.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays keyboard shortcuts for voice items.\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandShortcut component. |\n\n### ``\n\nA button that allows users to preview/play a voice sample before selecting it.\nShows play, pause, or loading icons based on state.\n\n| Prop | Type | Default | Description |\n| ----------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------ |\n| `playing` | `boolean` | - | Whether the voice is currently playing. Shows pause icon when true. |\n| `loading` | `boolean` | - | Whether the voice preview is loading. Shows loading spinner and disables the button. |\n| `onPlay` | `() => void` | - | Callback fired when the preview button is clicked. |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `Omit\n

Selected voice: {value ?? \"None\"}

\n \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",[],[177,491,492,1073,1075],"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 {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",[],[177,491,492,1073,1099],"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",[],[177,491,492,1073,1107],"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",[],[177,491,492,1073,1115],"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",[],[177,491,492,1073,1123],"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",[],[177,491,492,1073,1131],"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",[],[177,491,492,1073,1139],"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",[],[177,491,492,1073,1147],"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",[],[177,491,492,1073,1155],"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",[],[177,491,492,1073,1163],"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",[],[177,491,492,1073,1171],"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",[],[177,491,492,1073,1179],"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",[],[177,491,492,1073,1187],"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",[],[177,491,492,1073,1195],"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",[],[177,491,492,1073,1203],"d59eb3f4-0ddd-11f1-adf3-42dde27851f2","prompt-input.md","d59eb4b2-0ddd-11f1-adf3-42dde27851f2",57,["D",1771538184788],"# Prompt Input\n\nAllows a user to send a message with file attachments to a large language model.\nIt includes a textarea, file upload capabilities, a submit button, and a\ndropdown for selecting the model.\n\nThe `PromptInput` component allows a user to send a message with file\nattachments to a large language model. It includes a textarea, file upload\ncapabilities, a submit button, and a dropdown for selecting the model.\n\nSee `scripts/prompt-input.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add prompt-input\n```\n\n## Usage with AI SDK\n\nBuild a fully functional chat app using `PromptInput`,\n[`Conversation`](/components/conversation) with a model picker:\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n PromptInput,\n PromptInputActionAddAttachments,\n PromptInputActionMenu,\n PromptInputActionMenuContent,\n PromptInputActionMenuTrigger,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputHeader,\n type PromptInputMessage,\n PromptInputSelect,\n PromptInputSelectContent,\n PromptInputSelectItem,\n PromptInputSelectTrigger,\n PromptInputSelectValue,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n} from \"@/components/ai-elements/prompt-input\";\nimport { GlobeIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\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\";\n\nconst PromptInputAttachmentsDisplay = () => {\n const attachments = usePromptInputAttachments();\n\n if (attachments.files.length === 0) {\n return null;\n }\n\n return (\n \n {attachments.files.map((attachment) => (\n attachments.remove(attachment.id)}\n >\n \n \n \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",[],[177,491,492,1073,1211],"d5c34098-0ddd-11f1-acc9-42dde27851f2","plan.md","d5c34174-0ddd-11f1-acc9-42dde27851f2",66,["D",1771538184888],"# Plan\n\nA collapsible plan component for displaying AI-generated execution plans with\nstreaming support and shimmer animations.\n\nThe `Plan` component provides a flexible system for displaying AI-generated\nexecution plans with collapsible content. Perfect for showing multi-step\nworkflows, task breakdowns, and implementation strategies with support for\nstreaming content and loading states.\n\nSee `scripts/plan.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add plan\n```\n\n## Features\n\n- Collapsible content with smooth animations\n- Streaming support with shimmer loading states\n- Built on shadcn/ui Card and Collapsible components\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- Context-based state management for streaming\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------- |\n| `isStreaming` | `boolean` | `false` | Whether content is currently streaming. Enables shimmer animations on title and description. |\n| `defaultOpen` | `boolean` | - | Whether the plan is expanded 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 CardHeader component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------- |\n| `children` | `string` | - | The title text. Displays with shimmer animation when isStreaming is true. |\n| `...props` | `Omit,` | - | Any other props (except children) are spread to the CardTitle component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------- |\n| `children` | `string` | - | The description text. Displays with shimmer animation when isStreaming is true. |\n| `...props` | `Omit,` | - | Any other props (except children) are spread to the CardDescription component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. Renders as a Button with chevron icon. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CardContent 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 CardAction component. |\n",[],[177,491,492,1073,1219],"d62e1de6-0ddd-11f1-acc9-42dde27851f2","persona.md","d62e1ed6-0ddd-11f1-acc9-42dde27851f2",89,["D",1771538185099],"# Persona\n\nAn animated AI visual component powered by Rive that responds to different\nstates like listening, thinking, and speaking.\n\nThe `Persona` component displays an animated AI visual that responds to\ndifferent conversational states. Built with Rive WebGL2, it provides smooth,\nhigh-performance animations for various AI interaction states including idle,\nlistening, thinking, speaking, and asleep. The component supports multiple\nvisual variants to match different design aesthetics.\n\nSee `scripts/persona-obsidian.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add persona\n```\n\n## Features\n\n- Smooth state-based animations powered by Rive\n- Multiple visual variants (obsidian, mana, opal, halo, glint, command)\n- Responsive to five distinct states: idle, listening, thinking, speaking, and\n asleep\n- WebGL2-accelerated rendering for optimal performance\n- Customizable size and styling\n- Lifecycle callbacks for load, ready, pause, play, and stop events\n- TypeScript support with full type definitions\n\n## Variants\n\nThe Persona component comes with 6 distinct visual variants, each with its own\nunique aesthetic:\n\n### Obsidian (Default)\n\nSee `scripts/persona-obsidian.tsx` for this example.\n\n### Mana\n\nSee `scripts/persona-mana.tsx` for this example.\n\n### Opal\n\nSee `scripts/persona-opal.tsx` for this example.\n\n### Halo\n\nSee `scripts/persona-halo.tsx` for this example.\n\n### Glint\n\nSee `scripts/persona-glint.tsx` for this example.\n\n### Command\n\nSee `scripts/persona-command.tsx` for this example.\n\n## Props\n\n### ``\n\nThe root component that renders the animated AI visual.\n\n| Prop | Type | Default | Description |\n| ------------- | ----------------- | ------- | --------------------------------------------------------------------------- |\n| `state` | `unknown` | - | The current state of the AI persona. Controls which animation is displayed. |\n| `variant` | `unknown` | - | The visual style variant to display. |\n| `className` | `string` | - | Additional CSS classes to apply to the component. |\n| `onLoad` | `RiveParameters[` | - | Callback fired when the Rive file starts loading. |\n| `onLoadError` | `RiveParameters[` | - | Callback fired if the Rive file fails to load. |\n| `onReady` | `() => void` | - | Callback fired when the Rive animation is ready to play. |\n| `onPause` | `RiveParameters[` | - | Callback fired when the animation is paused. |\n| `onPlay` | `RiveParameters[` | - | Callback fired when the animation starts playing. |\n| `onStop` | `RiveParameters[` | - | Callback fired when the animation is stopped. |\n\n## States\n\nThe Persona component responds to five distinct states, each triggering\ndifferent animations:\n\n- **idle**: The default resting state when the AI is not active\n- **listening**: Displayed when the AI is actively listening to user input\n (e.g., during voice recording)\n- **thinking**: Shown when the AI is processing or generating a response\n- **speaking**: Active when the AI is delivering a response (e.g.,\n text-to-speech output)\n- **asleep**: A dormant state for when the AI is inactive or in low-power mode\n\n## Usage Examples\n\n### Basic Usage\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\n\nexport default function App() {\n return ;\n}\n```\n\n### With State Management\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\nimport { useState } from \"react\";\n\nexport default function App() {\n const [state, setState] = useState<\n \"idle\" | \"listening\" | \"thinking\" | \"speaking\" | \"asleep\"\n >(\"idle\");\n\n const startListening = () => setState(\"listening\");\n const startThinking = () => setState(\"thinking\");\n const startSpeaking = () => setState(\"speaking\");\n const reset = () => setState(\"idle\");\n\n return (\n

\n \n

\n \n \n \n \n

\n );\n}\n```\n\n### With Custom Styling\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\n\nexport default function App() {\n return (\n \n );\n}\n```\n\n### With Lifecycle Callbacks\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\n\nexport default function App() {\n return (\n console.log(\"Animation ready\")}\n onLoad={() => console.log(\"Starting to load\")}\n onLoadError={(error) => console.error(\"Failed to load:\", error)}\n onPlay={() => console.log(\"Animation playing\")}\n onPause={() => console.log(\"Animation paused\")}\n onStop={() => console.log(\"Animation stopped\")}\n />\n );\n}\n```\n",[],[177,491,492,1073,1227],"d563224e-0ddd-11f1-8b80-42dde27851f2","panel.md","d5632320-0ddd-11f1-8b80-42dde27851f2",45,["D",1771538184410],"# Panel\n\nA styled panel component for React Flow-based canvases to position custom UI\nelements.\n\nThe `Panel` component provides a positioned container for custom UI elements on\nReact Flow canvases. It includes modern card styling with backdrop blur and\nflexible positioning options.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add panel\n```\n\n## Features\n\n- Flexible positioning (top-left, top-right, bottom-left, bottom-right,\n top-center, bottom-center)\n- Rounded pill design with backdrop blur\n- Theme-aware card background\n- Flexbox layout for easy content alignment\n- Subtle drop shadow for depth\n- Full TypeScript support\n- Compatible with React Flow's panel system\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------ | ------- | --------------------------------------------------- |\n| `position` | `unknown` | - | Position of the panel on the canvas. |\n| `className` | `string` | - | Additional CSS classes to apply to the panel. |\n| `...props` | `ComponentProps` | - | Any other props from @xyflow/react Panel component. |\n",[],[177,491,492,1073,1235],"d5c093fc-0ddd-11f1-b72b-42dde27851f2","package-info.md","d5c094ce-0ddd-11f1-b72b-42dde27851f2",65,["D",1771538185010],"# Package Info\n\nDisplay dependency information and version changes.\n\nThe `PackageInfo` component displays package dependency information including\nversion changes and change type badges.\n\nSee `scripts/package-info.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add package-info\n```\n\n## Features\n\n- Version change display (current → new)\n- Color-coded change type badges\n- Dependencies list\n- Description support\n\n## Change Types\n\n| Type | Color | Use Case |\n| --------- | ------ | ------------------ |\n| `major` | Red | Breaking changes |\n| `minor` | Yellow | New features |\n| `patch` | Green | Bug fixes |\n| `added` | Blue | New dependency |\n| `removed` | Gray | Removed dependency |\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------------- | -------------------------------------- | -------- | ---------------------------- |\n| `name` | `string` | Required | Package name. |\n| `currentVersion` | `string` | - | Current installed version. |\n| `newVersion` | `string` | - | New version being installed. |\n| `changeType` | `unknown` | - | Type of version change. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the header div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom name content. Defaults to the name from context. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `children` | `React.ReactNode` | - | Custom change type label. Defaults to the changeType from context. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the Badge component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | --------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom version content. Defaults to version transition display. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | ------------------------ |\n| `...props` | `React.HTMLAttributes` | - | Spread to the p element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | -------- | ---------------------- |\n| `name` | `string` | Required | Dependency name. |\n| `version` | `string` | - | Dependency version. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the row div. |\n",[],[177,491,492,1073,1243],"d5539108-0ddd-11f1-8b80-42dde27851f2","open-in-chat.md","d55391da-0ddd-11f1-8b80-42dde27851f2",42,["D",1771538184307],"# Open In Chat\n\nA dropdown menu for opening queries in various AI chat platforms including\nChatGPT, Claude, T3, Scira, and v0.\n\nThe `OpenIn` component provides a dropdown menu that allows users to open\nqueries in different AI chat platforms with a single click.\n\nSee `scripts/open-in-chat.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add open-in-chat\n```\n\n## Features\n\n- Pre-configured links to popular AI chat platforms\n- Context-based query passing for cleaner API\n- Customizable dropdown trigger button\n- Automatic URL parameter encoding for queries\n- Support for ChatGPT, Claude, T3 Chat, Scira AI, v0, and Cursor\n- Branded icons for each platform\n- TypeScript support with proper type definitions\n- Accessible dropdown menu with keyboard navigation\n- External link indicators for clarity\n\n## Supported Platforms\n\n- **ChatGPT** - Opens query in OpenAI's ChatGPT with search hints\n- **Claude** - Opens query in Anthropic's Claude AI\n- **T3 Chat** - Opens query in T3 Chat platform\n- **Scira AI** - Opens query in Scira's AI assistant\n- **v0** - Opens query in Vercel's v0 platform\n- **Cursor** - Opens query in Cursor AI editor\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `query` | `string` | - | The query text to be sent to all AI platforms. |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying radix-ui DropdownMenu component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom trigger button. |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying DropdownMenuTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply to the dropdown content. |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying DropdownMenuContent component. |\n\n### ``, ``, ``, ``, ``, ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying DropdownMenuItem component. The query is automatically provided via context from the parent OpenIn component. |\n\n### ``, ``, ``\n\nAdditional composable components for custom dropdown menu items, labels, and\nseparators that follow the same props pattern as their underlying radix-ui\ncounterparts.\n",[],[177,491,492,1073,1251],"d5571e5e-0ddd-11f1-adf3-42dde27851f2","node.md","d5571f12-0ddd-11f1-adf3-42dde27851f2",43,["D",1771538184320],"# Node\n\nA composable node component for React Flow-based canvases with Card-based\nstyling.\n\nThe `Node` component provides a composable, Card-based node for React Flow\ncanvases. It includes support for connection handles, structured layouts, and\nconsistent styling using shadcn/ui components.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add node\n```\n\n## Features\n\n- Built on shadcn/ui Card components for consistent styling\n- Automatic handle placement (left for target, right for source)\n- Composable sub-components (Header, Title, Description, Action, Content,\n Footer)\n- Semantic structure for organizing node information\n- Pre-styled sections with borders and backgrounds\n- Responsive sizing with fixed small width\n- Full TypeScript support with proper type definitions\n- Compatible with React Flow's node system\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------------- | ------- | -------------------------------------------------------------------------------------- |\n| `handles` | `unknown` | - | Configuration for connection handles. Target renders on the left, source on the right. |\n| `className` | `string` | - | Additional CSS classes to apply to the node. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying Card component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |\n| `className` | `string` | - | Additional CSS classes to apply to the header. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardHeader component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------- | ------- | ----------------------------------------------------------------- |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardTitle component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------- | ------- | ----------------------------------------------------------------------- |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardDescription component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardAction component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply to the content. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |\n| `className` | `string` | - | Additional CSS classes to apply to the footer. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardFooter component. |\n",[],[177,491,492,1073,1259],"d5b5d4f8-0ddd-11f1-9539-42dde27851f2","model-selector.md","d5b5d5ca-0ddd-11f1-9539-42dde27851f2",63,["D",1771538184940],"# Model Selector\n\nA searchable command palette for selecting AI models in your chat interface.\n\nThe `ModelSelector` component provides a searchable command palette interface\nfor selecting AI models. It's built on top of the cmdk library and provides a\nkeyboard-navigable interface with search functionality.\n\nSee `scripts/model-selector.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add model-selector\n```\n\n## Features\n\n- Searchable interface with keyboard navigation\n- Fuzzy search filtering across model names\n- Grouped model organization by provider\n- Keyboard shortcuts support\n- Empty state handling\n- Customizable styling with Tailwind CSS\n- Built on cmdk for excellent accessibility\n- TypeScript support with proper type definitions\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Dialog component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DialogTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `title` | `ReactNode` | - | Accessible title for the dialog (rendered in sr-only). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DialogContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandDialog component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandInput component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandList component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandEmpty component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandGroup component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandShortcut component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandSeparator component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------- | -------- | -------------------------------------------------------------------------------------------------- |\n| `provider` | `string` | Required | The AI provider name. Supports major providers like |\n| `...props` | `Omit`\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying span element. |\n",[],[177,491,492,1073,1267],"d5049576-0ddd-11f1-a0cd-42dde27851f2","mic-selector.md","d504962a-0ddd-11f1-a0cd-42dde27851f2",27,["D",1771538183790],"# Mic Selector\n\nA composable dropdown component for selecting audio input devices with\npermission handling and device change detection.\n\nThe `MicSelector` component provides a flexible and composable interface for\nselecting microphone input devices. Built on shadcn/ui's Command and Popover\ncomponents, it features automatic device detection, permission handling, dynamic\ndevice list updates, and intelligent device name parsing.\n\nSee `scripts/mic-selector.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add mic-selector\n```\n\n## Features\n\n- Fully composable architecture with granular control components\n- Automatic audio input device enumeration\n- Permission-based device name display\n- Real-time device change detection via devicechange events\n- Intelligent device label parsing with ID extraction\n- Controlled and uncontrolled component patterns\n- Responsive width matching between trigger and content\n- Built on shadcn/ui Command and Popover components\n- Full TypeScript support with proper types for all components\n\n## Props\n\n### ``\n\nRoot Popover component that provides context for all child components.\n\n| Prop | Type | Default | Description |\n| --------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |\n| `defaultValue` | `string` | - | The default selected device ID (uncontrolled). |\n| `value` | `string` | - | The selected device ID (controlled). |\n| `onValueChange` | `(deviceId: string) => void` | - | Callback fired when the selected device changes. |\n| `defaultOpen` | `boolean` | `false` | The default open state (uncontrolled). |\n| `open` | `boolean` | - | The open state (controlled). |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback fired when the open state changes. Automatically requests microphone permission when opened without permission. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Popover component. |\n\n### ``\n\nButton that opens the microphone selector popover. Automatically tracks its\nwidth to match the popover content.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | --------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component. |\n\n### ``\n\nDisplays the currently selected microphone name or a placeholder.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nContainer for the Command component, rendered inside the popover.\n\n| Prop | Type | Default | Description |\n| ---------------- | --------------------------------------------- | ------- | --------------------------------------------------------- |\n| `popoverOptions` | `React.ComponentProps` | - | Props to pass to the underlying PopoverContent component. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Command component. |\n\n### ``\n\nSearch input for filtering microphones.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandInput component. |\n\n### ``\n\nWrapper for the list of microphone items. Uses render props pattern to provide\naccess to device data.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------ | ------- | ------------------------------------------------------------- |\n| `children` | `(devices: MediaDeviceInfo[]) => ReactNode` | - | Render function that receives the array of available devices. |\n| `...props` | `Omit,` | - | Any other props are spread to the CommandList component. |\n\n### ``\n\nMessage shown when no microphones match the search.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `children` | `ReactNode` | - | The message to display. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandEmpty component. |\n\n### ``\n\nSelectable item representing a microphone.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `value` | `string` | - | The device ID for this item. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandItem component. |\n\n### ``\n\nDisplays a formatted microphone label with intelligent device ID parsing.\nAutomatically extracts and styles device IDs in the format (XXXX:XXXX).\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `device` | `MediaDeviceInfo` | - | The MediaDeviceInfo object for the device. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n## Hooks\n\n### `useAudioDevices()`\n\nA custom hook for managing audio input devices. This hook is used internally by\nthe `MicSelector` component but can also be used independently.\n\n```tsx\nimport { useAudioDevices } from \"@repo/elements/mic-selector\";\n\nexport default function Example() {\n const { devices, loading, error, hasPermission, loadDevices } =\n useAudioDevices();\n\n return (\n

\n {loading &&

Loading devices...

}\n {error &&

Error: {error}

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

{device.label}

)}\n {!hasPermission && (\n \n )}\n

\n );\n}\n```\n\n#### Return Value\n\n| Prop | Type | Default | Description |\n| --------------- | --------------------- | ------- | ---------------------------------------------------------------- |\n| `devices` | `MediaDeviceInfo[]` | - | Array of available audio input devices. |\n| `loading` | `boolean` | - | Whether devices are currently being loaded. |\n| `error` | `string | null` | - |\n| `hasPermission` | `boolean` | - | Whether microphone permission has been granted. |\n| `loadDevices` | `() => Promise` | - | Function to request microphone permission and load device names. |\n\n## Behavior\n\n### Permission Handling\n\nThe component implements a two-stage permission approach:\n\n1. **Without Permission**: Initially loads devices without requesting\n permission. Device labels may show as generic names (e.g., \"Microphone 1\").\n2. **With Permission**: When the popover is opened and permission hasn't been\n granted, automatically requests microphone access and displays actual device\n names.\n\n### Device Label Parsing\n\nThe `MicSelectorLabel` component intelligently parses device names that include\nhardware IDs in the format `(XXXX:XXXX)`. It splits the label into the device\nname and ID, styling the ID with muted text for better readability.\n\nFor example: `\"MacBook Pro Microphone (1a2b:3c4d)\"` becomes:\n\n- Device name: `\"MacBook Pro Microphone\"`\n- Device ID: `\"(1a2b:3c4d)\"` (styled with muted color)\n\n### Width Synchronization\n\nThe `MicSelectorTrigger` uses a ResizeObserver to track its width and\nautomatically synchronizes it with the `MicSelectorContent` popover width for a\ncohesive appearance.\n\n### Device Change Detection\n\nThe component listens for `devicechange` events (e.g., plugging/unplugging\nmicrophones) and automatically updates the device list in real-time.\n\n## Accessibility\n\n- Uses semantic HTML with proper ARIA attributes via shadcn/ui components\n- Full keyboard navigation support through Command component\n- Screen reader friendly with proper labels and roles\n- Searchable device list for quick selection\n\n## Notes\n\n- Requires a secure context (HTTPS or localhost) for microphone access\n- Browser may prompt user for microphone permission on first open\n- Device labels are only fully descriptive after permission is granted\n- Component handles cleanup of temporary media streams during permission\n requests\n- Uses Radix UI's `useControllableState` for flexible controlled/uncontrolled\n patterns\n",[],[177,491,492,1073,1275],"d5bafd2a-0ddd-11f1-9539-42dde27851f2","message.md","d5bafdfc-0ddd-11f1-9539-42dde27851f2",64,["D",1771538184986],"# Message\n\nA comprehensive suite of components for displaying chat messages, including\nmessage rendering, branching, actions, and markdown responses.\n\nThe `Message` component suite provides a complete set of tools for building chat\ninterfaces. It includes components for displaying messages from users and AI\nassistants, managing multiple response branches, adding action buttons, and\nrendering markdown content.\n\nSee `scripts/message.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add message\n```\n\n## Features\n\n- Displays messages from both user and AI assistant with distinct styling and\n automatic alignment\n- Minimalist flat design with user messages in secondary background and\n assistant messages full-width\n- **Response branching** with navigation controls to switch between multiple AI\n response versions\n- **Markdown rendering** with GFM support (tables, task lists, strikethrough),\n math equations, and smart streaming\n- **Action buttons** for common operations (retry, like, dislike, copy, share)\n with tooltips and state management\n- **File attachments** display with support for images and generic files with\n preview and remove functionality\n- Code blocks with syntax highlighting and copy-to-clipboard functionality\n- Keyboard accessible with proper ARIA labels\n- Responsive design that adapts to different screen sizes\n- Seamless light/dark theme integration\n\n## Usage with AI SDK\n\nBuild a simple chat UI where the user can copy or regenerate the most recent\nmessage.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { useState } from \"react\";\nimport {\n MessageAction,\n MessageActions,\n} from \"@/components/ai-elements/message\";\nimport { Message, MessageContent } from \"@/components/ai-elements/message\";\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport {\n Input,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport { MessageResponse } from \"@/components/ai-elements/message\";\nimport { CopyIcon, RefreshCcwIcon } from \"lucide-react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport { Fragment } from \"react\";\n\nconst ActionsDemo = () => {\n const [input, setInput] = useState(\"\");\n const { messages, sendMessage, status, regenerate } = 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 return (\n

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

\n );\n};\n\nexport default ActionsDemo;\n```\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------- |\n| `from` | `UIMessage[` | - | The role of the message sender ( |\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

\n \n );\n};\n\nexport default Example;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/chat/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 delete_file: {\n description: \"Delete a file from the file system\",\n parameters: z.object({\n filePath: z.string().describe(\"The path to the file to delete\"),\n confirm: z\n .boolean()\n .default(false)\n .describe(\"Confirmation that the user wants to delete the file\"),\n }),\n requireApproval: true, // Enable approval workflow\n execute: async ({ filePath, confirm }) => {\n if (!confirm) {\n return {\n success: false,\n message: \"Deletion not confirmed\",\n };\n }\n\n // Simulate file deletion\n await new Promise((resolve) => setTimeout(resolve, 500));\n\n return {\n success: true,\n message: `Successfully deleted ${filePath}`,\n };\n },\n },\n },\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\n## Features\n\n- Context-based state management for approval workflow\n- Conditional rendering based on approval state\n- Support for approval-requested, approval-responded, output-denied, and\n output-available states\n- Built on shadcn/ui Alert and Button components\n- TypeScript support with comprehensive type definitions\n- Customizable styling with Tailwind CSS\n- Keyboard navigation and accessibility support\n- Theme-aware with automatic dark mode support\n\n## Examples\n\n### Approval Request State\n\nShows the approval request with action buttons when state is\n`approval-requested`.\n\nSee `scripts/confirmation-request.tsx` for this example.\n\n### Approved State\n\nShows the accepted status when user approves and state is `approval-responded`\nor `output-available`.\n\nSee `scripts/confirmation-accepted.tsx` for this example.\n\n### Rejected State\n\nShows the rejected status when user rejects and state is `output-denied`.\n\nSee `scripts/confirmation-rejected.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `approval` | `ToolUIPart[` | - | The approval object containing the approval ID and status. If not provided or undefined, the component will not render. |\n| `state` | `ToolUIPart[` | - | The current state of the tool (input-streaming, input-available, approval-requested, approval-responded, output-denied, or output-available). Will not render for input-streaming or input-available states. |\n| `className` | `string` | - | Additional CSS classes to apply to the Alert component. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Alert component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------- | ------- | ----------------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | The content to display when approval is requested. Only renders when state is |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | The content to display when approval is accepted. Only renders when approval.approved is true and state is |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------- | ------- | ----------------------------------------------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | The content to display when approval is rejected. Only renders when approval.approved is false and state is |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply to the actions container. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. Only renders when state is |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component. Styled with h-8 px-3 text-sm classes by default. |\n",[],[177,491,492,1073,1371],"d5cf9afa-0ddd-11f1-8b80-42dde27851f2","commit.md","d5cf9be0-0ddd-11f1-8b80-42dde27851f2",69,["D",1771538185030],"# Commit\n\nDisplay commit information with hash, message, author, and file changes.\n\nThe `Commit` component displays commit details including hash, message, author,\ntimestamp, and changed files.\n\nSee `scripts/commit.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add commit\n```\n\n## Features\n\n- Commit hash display with copy button\n- Author avatar with initials\n- Relative timestamp formatting\n- Collapsible file changes list\n- Color-coded file status (added/modified/deleted/renamed)\n- Line additions/deletions count\n\n## File Status\n\n| Status | Label | Color |\n| ---------- | ----- | ------ |\n| `added` | A | Green |\n| `modified` | M | Yellow |\n| `deleted` | D | Red |\n| `renamed` | R | Blue |\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Spread to the Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | -------- | ------------------------------- |\n| `initials` | `string` | Required | Author initials to display. |\n| `...props` | `React.ComponentProps` | - | Spread to the Avatar component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | --------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | --------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | --------------------------- |\n| `children` | `React.ReactNode` | - | Custom separator content. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | -------- | ---------------------------------------------------- |\n| `date` | `Date` | Required | Commit date. |\n| `children` | `React.ReactNode` | - | Custom timestamp content. Defaults to relative time. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the time element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | -------- | ----------------------------------- |\n| `hash` | `string` | Required | Commit hash to copy. |\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| `...props` | `React.ComponentProps` | - | Spread to the Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the row div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | -------- | --------------------------- |\n| `status` | `unknown` | Required | File change status. |\n| `children` | `React.ReactNode` | - | Custom status label. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | --------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the FileIcon component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | --------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | -------- | --------------------------- |\n| `count` | `number` | Required | Number of lines added. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | -------- | --------------------------- |\n| `count` | `number` | Required | Number of lines deleted. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the span element. |\n",[],[177,491,492,1073,1379],"d5c5c548-0ddd-11f1-adf3-42dde27851f2","code-block.md","d5c5c5f2-0ddd-11f1-adf3-42dde27851f2",67,["D",1771538185045],"# Code Block\n\nProvides syntax highlighting, line numbers, and copy to clipboard functionality\nfor code blocks.\n\nThe `CodeBlock` component provides syntax highlighting, line numbers, and copy\nto clipboard functionality for code blocks. It's fully composable, allowing you\nto customize the header, actions, and content.\n\nSee `scripts/code-block.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add code-block\n```\n\n## Usage\n\nThe CodeBlock is fully composable. Here's a basic example:\n\n```tsx\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\nexport const Example = () => (\n \n \n \n \n example.ts\n \n \n \n \n \n \n);\n```\n\n## Features\n\n- Syntax highlighting with Shiki\n- Line numbers (optional)\n- Copy to clipboard functionality\n- Automatic light/dark theme switching via CSS variables\n- Language selector for multi-language examples\n- Fully composable architecture\n- Accessible design\n\n## Examples\n\n### Dark Mode\n\nTo use the `CodeBlock` component in dark mode, wrap it in a `div` with the\n`dark` class.\n\nSee `scripts/code-block-dark.tsx` for this example.\n\n### Language Selector\n\nAdd a language selector to switch between different code implementations:\n\nSee `scripts/code-block.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------------- | ----------------- | ------- | ------------------------------------------------- |\n| `code` | `string` | - | The code content to display. |\n| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |\n| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |\n| `children` | `React.ReactNode` | - | Child elements like CodeBlockHeader. |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\nContainer for the header row. Uses flexbox with `justify-between`.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------- | ------- | -------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Header content (CodeBlockTitle, CodeBlockActions, etc.). |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\nLeft-aligned container for icon and filename. Uses flexbox with `gap-2`.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------- | ------- | ---------------------------------------------- |\n| `children` | `React.ReactNode` | - | Title content (icon, CodeBlockFilename, etc.). |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\nDisplays the filename in monospace font.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------- | ------- | ------------------------ |\n| `children` | `React.ReactNode` | - | The filename to display. |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\nRight-aligned container for action buttons. Uses flexbox with `gap-2`.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------- | ------- | ---------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Action buttons (CodeBlockCopyButton, CodeBlockLanguageSelector, etc.). |\n| `className` | `string` | - | Additional CSS classes. |\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\n### ``\n\nWrapper for the language selector. Extends shadcn/ui Select.\n\n| Prop | Type | Default | Description |\n| --------------- | ------------------------- | ------- | ---------------------------------------------- |\n| `value` | `string` | - | The currently selected language. |\n| `onValueChange` | `(value: string) => void` | - | Callback when the language changes. |\n| `children` | `React.ReactNode` | - | Selector components (Trigger, Content, Items). |\n\n### ``\n\nTrigger button for the language selector dropdown. Pre-styled for code block\nheader.\n\n### ``\n\nDisplays the selected language value.\n\n### ``\n\nDropdown content container. Defaults to `align=\"end\"`.\n\n### ``\n\nIndividual language option in the dropdown.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------- | ------- | ------------------- |\n| `value` | `string` | - | The language value. |\n| `children` | `React.ReactNode` | - | The display label. |\n\n### ``\n\nLow-level container component with performance optimizations\n(`contentVisibility`). Used internally by CodeBlock.\n\n### ``\n\nLow-level component that handles syntax highlighting. Used internally by\nCodeBlock, but can be used directly for custom layouts.\n\n| Prop | Type | Default | Description |\n| ----------------- | ----------------- | ------- | ------------------------------------------------- |\n| `code` | `string` | - | The code content to display. |\n| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |\n| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |\n",[],[177,491,492,1073,1387],"d572d2b6-0ddd-11f1-8b80-42dde27851f2","checkpoint.md","d572d392-0ddd-11f1-8b80-42dde27851f2",48,["D",1771538184496],"# Checkpoint\n\nA simple component for marking conversation history points and restoring the\nchat to a previous state.\n\nThe `Checkpoint` component provides a way to mark specific points in a\nconversation history and restore the chat to that state. Inspired by VSCode's\nCopilot checkpoint feature, it allows users to revert to an earlier conversation\nstate while maintaining a clear visual separation between different conversation\nsegments.\n\nSee `scripts/checkpoint.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add checkpoint\n```\n\n## Features\n\n- Simple flex layout with icon, trigger, and separator\n- Visual separator line for clear conversation breaks\n- Clickable restore button for reverting to checkpoint\n- Customizable icon (defaults to BookmarkIcon)\n- Keyboard accessible with proper ARIA labels\n- Responsive design that adapts to different screen sizes\n- Seamless light/dark theme integration\n\n## Usage with AI SDK\n\nBuild a chat interface with conversation checkpoints that allow users to restore\nto previous states.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { Fragment, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n Checkpoint,\n CheckpointIcon,\n CheckpointTrigger,\n} from \"@/components/ai-elements/checkpoint\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport {\n Conversation,\n ConversationContent,\n} from \"@/components/ai-elements/conversation\";\n\ntype CheckpointType = {\n id: string;\n messageIndex: number;\n timestamp: Date;\n messageCount: number;\n};\n\nconst CheckpointDemo = () => {\n const { messages, setMessages } = useChat();\n const [checkpoints, setCheckpoints] = useState([]);\n\n const createCheckpoint = (messageIndex: number) => {\n const checkpoint: CheckpointType = {\n id: nanoid(),\n messageIndex,\n timestamp: new Date(),\n messageCount: messageIndex + 1,\n };\n setCheckpoints([...checkpoints, checkpoint]);\n };\n\n const restoreToCheckpoint = (messageIndex: number) => {\n // Restore messages to checkpoint state\n setMessages(messages.slice(0, messageIndex + 1));\n // Remove checkpoints after this point\n setCheckpoints(checkpoints.filter((cp) => cp.messageIndex <= messageIndex));\n };\n\n return (\n

\n \n \n {messages.map((message, index) => {\n const checkpoint = checkpoints.find(\n (cp) => cp.messageIndex === index,\n );\n\n return (\n \n \n \n {message.content}\n \n \n {checkpoint && (\n \n \n \n restoreToCheckpoint(checkpoint.messageIndex)}\n >\n Restore checkpoint\n \n \n )}\n \n );\n })}\n \n \n

\n );\n};\n\nexport default CheckpointDemo;\n```\n\n## Use Cases\n\n### Manual Checkpoints\n\nAllow users to manually create checkpoints at important conversation points:\n\n```tsx\n;\n```\n\n### Automatic Checkpoints\n\nCreate checkpoints automatically after significant conversation milestones:\n\n```tsx\nuseEffect(() => {\n // Create checkpoint every 5 messages\n if (messages.length > 0 && messages.length % 5 === 0) {\n createCheckpoint(messages.length - 1);\n }\n}, [messages.length]);\n```\n\n### Branching Conversations\n\nUse checkpoints to enable conversation branching where users can explore\ndifferent conversation paths:\n\n```tsx\nconst restoreAndBranch = (messageIndex: number) => {\n // Save current branch\n const currentBranch = messages.slice(messageIndex + 1);\n saveBranch(currentBranch);\n\n // Restore to checkpoint\n restoreToCheckpoint(messageIndex);\n};\n```\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |\n| `children` | `React.ReactNode` | - | The checkpoint icon and trigger components. Automatically includes a Separator at the end. |\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` | - | Custom icon content. If not provided, defaults to a BookmarkIcon from lucide-react. |\n| `...props` | `LucideProps` | - | Any other props are spread to the BookmarkIcon component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `children` | `React.ReactNode` | - | The text or content to display in the trigger button. |\n| `variant` | `string` | - | The button variant style. |\n| `size` | `string` | - | The button size. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n",[],[177,491,492,1073,1395],"d5e24ca4-0ddd-11f1-b72b-42dde27851f2","chain-of-thought.md","d5e24d76-0ddd-11f1-b72b-42dde27851f2",73,["D",1771538185232],"# Chain of Thought\n\nA collapsible component that visualizes AI reasoning steps with support for\nsearch results, images, and step-by-step progress indicators.\n\nThe `ChainOfThought` component provides a visual representation of an AI's\nreasoning process, showing step-by-step thinking with support for search\nresults, images, and progress indicators. It helps users understand how AI\narrives at conclusions.\n\nSee `scripts/chain-of-thought.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add chain-of-thought\n```\n\n## Features\n\n- Collapsible interface with smooth animations powered by Radix UI\n- Step-by-step visualization of AI reasoning process\n- Support for different step statuses (complete, active, pending)\n- Built-in search results display with badge styling\n- Image support with captions for visual content\n- Custom icons for different step types\n- Context-aware components using React Context API\n- Fully typed with TypeScript\n- Accessible with keyboard navigation support\n- Responsive design that adapts to different screen sizes\n- Smooth fade and slide animations for content transitions\n- Composable architecture for flexible customization\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------- | ------------------------- | ------- | --------------------------------------------------- |\n| `open` | `boolean` | - | Controlled open state of the collapsible. |\n| `defaultOpen` | `boolean` | `false` | Default open state when uncontrolled. |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback when the open state changes. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom header text. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ----------------------- | --------- | --------------------------------------------------- |\n| `icon` | `LucideIcon` | `DotIcon` | Icon to display for the step. |\n| `label` | `string` | - | The main text label for the step. |\n| `description` | `string` | - | Optional description text shown below the label. |\n| `status` | `unknown` | - | Visual status of the step. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | -------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any props are spread to the container div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------ | ------- | -------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any props are spread to the Badge component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any props are spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | -------------------------------------------------------- |\n| `caption` | `string` | - | Optional caption text displayed below the image. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div element. |\n",[],[177,491,492,1073,1403],"d5504e80-0ddd-11f1-a0cd-42dde27851f2","canvas.md","d5504f70-0ddd-11f1-a0cd-42dde27851f2",41,["D",1771538184287],"# Canvas\n\nA React Flow-based canvas component for building interactive node-based\ninterfaces.\n\nThe `Canvas` component provides a React Flow-based canvas for building\ninteractive node-based interfaces. It comes pre-configured with sensible\ndefaults for AI applications, including panning, zooming, and selection\nbehaviors.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add canvas\n```\n\n## Features\n\n- Pre-configured React Flow canvas with AI-optimized defaults\n- Pan on scroll enabled for intuitive navigation\n- Selection on drag for multi-node operations\n- Customizable background color using CSS variables\n- Delete key support (Backspace and Delete keys)\n- Auto-fit view to show all nodes\n- Disabled double-click zoom for better UX\n- Disabled pan on drag to prevent accidental canvas movement\n- Fully compatible with React Flow props and API\n\n## Props\n\n### `

Diff · v147