{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-chat", "type": "registry:ui", "dependencies": [ "@base-ui/react", "@tabler/icons-react", "ai", "clsx", "tailwind-merge" ], "registryDependencies": [ "https://agent-elements.21st.dev/r/attachment-button.json", "https://agent-elements.21st.dev/r/bash-tool.json", "https://agent-elements.21st.dev/r/edit-tool.json", "https://agent-elements.21st.dev/r/error-message.json", "https://agent-elements.21st.dev/r/file-attachment.json", "https://agent-elements.21st.dev/r/generic-tool.json", "https://agent-elements.21st.dev/r/input-bar.json", "https://agent-elements.21st.dev/r/markdown.json", "https://agent-elements.21st.dev/r/mcp-tool.json", "https://agent-elements.21st.dev/r/message-list.json", "https://agent-elements.21st.dev/r/plan-tool.json", "https://agent-elements.21st.dev/r/question-tool.json", "https://agent-elements.21st.dev/r/search-tool.json", "https://agent-elements.21st.dev/r/send-button.json", "https://agent-elements.21st.dev/r/spiral-loader.json", "https://agent-elements.21st.dev/r/suggestions.json", "https://agent-elements.21st.dev/r/text-shimmer.json", "https://agent-elements.21st.dev/r/thinking-tool.json", "https://agent-elements.21st.dev/r/todo-tool.json", "https://agent-elements.21st.dev/r/tool-group.json", "https://agent-elements.21st.dev/r/user-message.json" ], "files": [ { "path": "registry/agent-elements/components/agent-chat.tsx", "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { MessageList } from \"./message-list\";\nimport { InputBar } from \"./input-bar\";\nimport { Suggestions, type SuggestionItem } from \"./input/suggestions\";\nimport { cn } from \"./utils/cn\";\nimport type { AgentChatProps } from \"./types\";\n\nexport function AgentChat({\n messages,\n onSend,\n status,\n onStop,\n error,\n classNames,\n slots,\n toolRenderers,\n attachments,\n showCopyToolbar,\n initialScrollBehavior,\n enableImagePreview,\n suggestions,\n emptyStatePosition = \"default\",\n emptySuggestionsPlacement = \"input\",\n emptySuggestionsPosition = \"top\",\n questionTool,\n className,\n style,\n}: AgentChatProps) {\n const rootRef = useRef(null);\n const [draft, setDraft] = useState(\"\");\n\n const ResolvedInputBar = slots?.InputBar ?? InputBar;\n const isEmpty = !error && messages.length === 0;\n const isCenteredEmptyState = isEmpty && emptyStatePosition === \"center\";\n\n const pendingQuestion = findPendingQuestion(messages, questionTool);\n const suggestionConfig = resolveSuggestions(suggestions);\n const showInputSuggestions =\n emptySuggestionsPlacement === \"input\" ||\n emptySuggestionsPlacement === \"both\";\n const showEmptySuggestions =\n isCenteredEmptyState &&\n (emptySuggestionsPlacement === \"empty\" ||\n emptySuggestionsPlacement === \"both\") &&\n suggestionConfig.items.length > 0;\n\n const handleEmptySuggestionSelect = (item: SuggestionItem) => {\n setDraft(item.value ?? item.label);\n };\n\n const emptySuggestionsNode = showEmptySuggestions ? (\n \n ) : null;\n\n const inputBarNode = (\n {\n questionTool?.onAnswer?.({\n toolCallId: pendingQuestion.toolCallId,\n question:\n pendingQuestion.questions[\n pendingQuestion.questionIndex\n ? pendingQuestion.questionIndex - 1\n : 0\n ],\n answer,\n });\n },\n }\n : undefined\n }\n />\n );\n\n return (\n \n {isCenteredEmptyState ? (\n
\n
\n {emptySuggestionsPosition === \"top\" ? emptySuggestionsNode : null}\n {inputBarNode}\n {emptySuggestionsPosition === \"bottom\"\n ? emptySuggestionsNode\n : null}\n
\n
\n ) : (\n \n )}\n {!isCenteredEmptyState ? inputBarNode : null}\n \n );\n}\n\nfunction resolveSuggestions(suggestions: AgentChatProps[\"suggestions\"]) {\n if (Array.isArray(suggestions)) {\n return {\n items: suggestions,\n className: undefined,\n itemClassName: undefined,\n };\n }\n return {\n items: suggestions?.items ?? [],\n className: suggestions?.className,\n itemClassName: suggestions?.itemClassName,\n };\n}\n\nfunction findPendingQuestion(\n messages: AgentChatProps[\"messages\"],\n questionTool: AgentChatProps[\"questionTool\"],\n) {\n for (let i = messages.length - 1; i >= 0; i -= 1) {\n const message = messages[i];\n if (message?.role !== \"assistant\") continue;\n const parts = message.parts ?? [];\n for (let p = parts.length - 1; p >= 0; p -= 1) {\n const part = parts[p] as {\n type?: string;\n toolCallId?: string;\n input?: {\n questions?: import(\"./question/question-prompt\").QuestionConfig[];\n question?: import(\"./question/question-prompt\").QuestionConfig;\n questionIndex?: number;\n totalQuestions?: number;\n onPreviousQuestion?: () => void;\n onNextQuestion?: () => void;\n submitLabel?: string;\n skipLabel?: string;\n allowSkip?: boolean;\n };\n output?: {\n answer?: import(\"./question/question-prompt\").QuestionAnswer;\n };\n };\n if (part?.type !== \"tool-Question\") continue;\n const input = part.input;\n const questions = input?.questions ?? [];\n const firstQuestion = questions[0] ?? input?.question;\n if (!firstQuestion) continue;\n if (part.output?.answer) return null;\n return {\n id: part.toolCallId ?? `question-${i}-${p}`,\n toolCallId: part.toolCallId,\n questions,\n question: firstQuestion,\n questionIndex: input?.questionIndex,\n totalQuestions:\n input?.totalQuestions ??\n (questions.length > 0 ? questions.length : undefined),\n onPreviousQuestion: input?.onPreviousQuestion,\n onNextQuestion: input?.onNextQuestion,\n submitLabel: questionTool?.submitLabel ?? input?.submitLabel,\n skipLabel: questionTool?.skipLabel ?? input?.skipLabel,\n allowSkip: questionTool?.allowSkip ?? input?.allowSkip,\n };\n }\n }\n return null;\n}\n\n// Legacy component alias kept for compatibility.\nexport const AnAgentChat = AgentChat;\n", "type": "registry:ui", "target": "components/agent-elements/agent-chat.tsx" }, { "path": "registry/agent-elements/utils/cn.ts", "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n", "type": "registry:lib", "target": "components/agent-elements/utils/cn.ts" }, { "path": "registry/agent-elements/types.ts", "content": "import type React from \"react\";\nimport type { UIMessage, ChatStatus } from \"ai\";\nimport type {\n QuestionAnswer,\n QuestionConfig,\n} from \"./question/question-prompt\";\nimport type { SuggestionItem } from \"./input/suggestions\";\n\nexport type InputSuggestions =\n | SuggestionItem[]\n | {\n items: SuggestionItem[];\n className?: string;\n itemClassName?: string;\n };\n\n/** Theme JSON generated by the playground */\nexport type ChatTheme = {\n theme: Record;\n light: Record;\n dark: Record;\n};\n\n/** Per-element CSS class overrides */\nexport type ChatClassNames = {\n root: string;\n userMessage: string;\n inputBar: string;\n};\n\n/** Props for createAgentChat() */\nexport type CreateAgentChatOptions = {\n agent: string;\n /** Provide either tokenUrl (simple) or getToken (full control) */\n tokenUrl?: string;\n getToken?: () => Promise;\n apiUrl?: string;\n /**\n * Sandbox ID — identifies the persistent sandbox environment.\n *\n * Each unique `sandboxId` maps to its own sandbox (isolated VM with persistent filesystem).\n * Requests with the same `sandboxId` share the same sandbox — files, git repos,\n * and session history persist across messages.\n *\n * If omitted, the relay creates a new sandbox per request.\n *\n * @example\n * // Per-user sandbox\n * createAgentChat({ agent: \"my-agent\", tokenUrl: \"/api/an/token\", sandboxId: `user-${userId}` })\n *\n * // Continue existing sandbox\n * createAgentChat({ agent: \"my-agent\", tokenUrl: \"/api/an/token\", sandboxId: sandbox.id })\n */\n sandboxId?: string;\n /**\n * Thread ID — identifies a specific conversation thread within the sandbox.\n * Requires `sandboxId` to be set. If omitted with `sandboxId`, creates a new thread.\n */\n threadId?: string;\n onFinish?: () => void;\n onError?: (error: Error) => void;\n};\n\n/** Props passed to custom tool renderer components */\nexport type CustomToolRendererProps = {\n name: string;\n input: Record;\n output: unknown | undefined;\n status: \"pending\" | \"streaming\" | \"success\" | \"error\";\n};\n\n/** Component slot overrides */\nexport type ChatSlots = {\n InputBar: React.ComponentType<{\n onSend: (message: { role: \"user\"; content: string }) => void;\n status: ChatStatus;\n onStop: () => void;\n [key: string]: unknown;\n }>;\n UserMessage: React.ComponentType<{\n message: UIMessage;\n className?: string;\n }>;\n ToolRenderer: React.ComponentType<{\n part: {\n type: string;\n toolCallId?: string;\n state?: string;\n input?: unknown;\n output?: unknown;\n result?: unknown;\n };\n nestedTools?: {\n type: string;\n toolCallId?: string;\n state?: string;\n input?: unknown;\n output?: unknown;\n result?: unknown;\n }[];\n chatStatus?: string;\n toolRenderers?: Record<\n string,\n React.ComponentType\n >;\n }>;\n};\n\n/** A model option for the model selector */\nexport type ModelOption = {\n id: string;\n name: string;\n version?: string;\n};\n\n/** Props for the drop-in component */\nexport type AgentChatProps = {\n messages: UIMessage[];\n onSend: (message: { role: \"user\"; content: string }) => void;\n status: ChatStatus;\n onStop: () => void;\n error?: Error;\n\n classNames?: Partial;\n slots?: Partial;\n toolRenderers?: Record>;\n\n /** Attachment configuration */\n attachments?: {\n onAttach?: () => void;\n images?: { id: string; filename: string; url: string; size?: number }[];\n files?: { id: string; filename: string; size?: number }[];\n onRemoveImage?: (id: string) => void;\n onRemoveFile?: (id: string) => void;\n onPaste?: (e: React.ClipboardEvent) => void;\n isDragOver?: boolean;\n };\n\n /** Show copy toolbar on text turns */\n showCopyToolbar?: boolean;\n\n /**\n * Where to position the scroll container on initial mount.\n * - \"bottom\" (default): classic chat behavior, pinned to the latest message.\n * - \"top\": start from the top of the conversation — useful for static demos\n * or read-only transcripts where the user should read top-to-bottom.\n */\n initialScrollBehavior?: \"bottom\" | \"top\";\n\n /**\n * When true (default) clicking an attached image opens a fullscreen\n * lightbox preview. Set to false to render images as plain thumbnails\n * (no click handler, no portal). Applies to both staged input attachments\n * and images inside user messages.\n */\n enableImagePreview?: boolean;\n\n suggestions?: InputSuggestions;\n\n emptyStatePosition?: \"default\" | \"center\";\n emptySuggestionsPlacement?: \"input\" | \"empty\" | \"both\";\n emptySuggestionsPosition?: \"top\" | \"bottom\";\n\n questionTool?: {\n submitLabel?: string;\n skipLabel?: string;\n allowSkip?: boolean;\n onAnswer?: (payload: {\n toolCallId?: string;\n question: QuestionConfig;\n answer: QuestionAnswer;\n }) => void;\n };\n\n className?: string;\n style?: React.CSSProperties;\n};\n\n// Legacy type aliases kept for compatibility.\nexport type AnTheme = ChatTheme;\nexport type AnClassNames = ChatClassNames;\nexport type AnSlots = ChatSlots;\nexport type CreateAnChatOptions = CreateAgentChatOptions;\nexport type AnModelOption = ModelOption;\nexport type AnAgentChatProps = AgentChatProps;\n", "type": "registry:lib", "target": "components/agent-elements/types.ts" }, { "path": "registry/agent-elements/components/question/question-prompt.tsx", "content": "import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type QuestionOption = {\n id: string;\n label: string;\n description?: string;\n};\n\nexport type QuestionConfig = {\n kind: \"single\" | \"multi\" | \"text\";\n title: string;\n description?: string;\n options?: QuestionOption[];\n allowCustom?: boolean;\n customLabel?: string;\n customPlaceholder?: string;\n minSelections?: number;\n maxSelections?: number;\n placeholder?: string;\n};\n\nexport type QuestionAnswer = {\n kind: \"single\" | \"multi\" | \"text\" | \"skip\";\n selectedIds?: string[];\n text?: string;\n};\n\nconst QUESTION_CUSTOM_ID = \"__custom__\";\n\nfunction optionBadge(idx: number) {\n return String.fromCharCode(65 + idx);\n}\n\nexport type QuestionPromptProps = {\n questions: QuestionConfig[];\n questionIndex?: number;\n totalQuestions?: number;\n onPreviousQuestion?: () => void;\n onNextQuestion?: () => void;\n initialAnswer?: QuestionAnswer;\n /** Label for the primary action on the LAST question (default \"Send\"). */\n submitLabel?: string;\n /** Label for the primary action when there are more questions ahead\n * (default \"Next\"). The host (e.g. QuestionTool) is expected to advance\n * to the next question after onSubmit fires. */\n nextLabel?: string;\n skipLabel?: string;\n allowSkip?: boolean;\n onSubmit: (answer: QuestionAnswer) => void;\n onSkip?: () => void;\n className?: string;\n};\n\nexport function QuestionPrompt({\n questions,\n questionIndex = 1,\n totalQuestions,\n onPreviousQuestion,\n onNextQuestion,\n submitLabel = \"Send\",\n nextLabel = \"Next\",\n skipLabel = \"Skip\",\n allowSkip = true,\n initialAnswer,\n onSubmit,\n onSkip,\n className,\n}: QuestionPromptProps) {\n const [selectedIds, setSelectedIds] = useState([]);\n const [customText, setCustomText] = useState(\"\");\n const [textValue, setTextValue] = useState(\"\");\n const resolvedTotal = totalQuestions ?? questions.length;\n const clampedIndex = Math.max(1, Math.min(questionIndex, resolvedTotal));\n const activeQuestion = questions[clampedIndex - 1];\n const customEnabled = activeQuestion?.allowCustom ?? false;\n const showNav =\n resolvedTotal > 1 && (!!onPreviousQuestion || !!onNextQuestion);\n const canGoPrev = clampedIndex > 1;\n const canGoNext = clampedIndex < resolvedTotal;\n const isLastQuestion = clampedIndex >= resolvedTotal;\n const primaryLabel = isLastQuestion ? submitLabel : nextLabel;\n\n useEffect(() => {\n if (!initialAnswer || initialAnswer.kind === \"skip\") {\n setSelectedIds([]);\n setCustomText(\"\");\n setTextValue(\"\");\n return;\n }\n\n if (activeQuestion?.kind === \"text\") {\n setSelectedIds([]);\n setCustomText(\"\");\n setTextValue(initialAnswer.text ?? \"\");\n return;\n }\n\n const nextSelected = new Set(initialAnswer.selectedIds ?? []);\n const nextCustomText = initialAnswer.text ?? \"\";\n if (customEnabled && nextCustomText.trim().length > 0) {\n nextSelected.add(QUESTION_CUSTOM_ID);\n }\n setSelectedIds(Array.from(nextSelected));\n setCustomText(nextCustomText);\n setTextValue(\"\");\n }, [\n activeQuestion?.kind,\n clampedIndex,\n customEnabled,\n initialAnswer?.kind,\n initialAnswer?.text,\n initialAnswer?.selectedIds?.join(\"|\"),\n ]);\n\n const canSubmit = useMemo(() => {\n if (activeQuestion?.kind === \"text\") return textValue.trim().length > 0;\n\n const selectedNonCustom = selectedIds.filter(\n (id) => id !== QUESTION_CUSTOM_ID,\n ).length;\n const hasCustomText = customText.trim().length > 0;\n const total = selectedNonCustom + (hasCustomText ? 1 : 0);\n\n if (activeQuestion?.kind === \"single\") {\n return total === 1;\n }\n\n const min = activeQuestion?.minSelections ?? 1;\n const max = activeQuestion?.maxSelections;\n if (total < min) return false;\n if (typeof max === \"number\" && total > max) return false;\n return total > 0;\n }, [\n activeQuestion?.kind,\n activeQuestion?.minSelections,\n activeQuestion?.maxSelections,\n selectedIds,\n customText,\n textValue,\n ]);\n\n const toggleMulti = (id: string) => {\n setSelectedIds((prev) =>\n prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],\n );\n };\n\n const handleSingleSelect = (id: string) => {\n setSelectedIds([id]);\n };\n\n const handleCustomTextChange = (nextValue: string) => {\n setCustomText(nextValue);\n if (!activeQuestion) return;\n if (activeQuestion.kind === \"single\") {\n setSelectedIds(nextValue.trim().length > 0 ? [QUESTION_CUSTOM_ID] : []);\n return;\n }\n setSelectedIds((prev) => {\n const hasCustom = prev.includes(QUESTION_CUSTOM_ID);\n if (nextValue.trim().length > 0 && !hasCustom) {\n return [...prev, QUESTION_CUSTOM_ID];\n }\n if (nextValue.trim().length === 0 && hasCustom) {\n return prev.filter((id) => id !== QUESTION_CUSTOM_ID);\n }\n return prev;\n });\n };\n\n const handleSubmit = () => {\n if (!canSubmit || !activeQuestion) return;\n if (activeQuestion.kind === \"text\") {\n onSubmit({ kind: \"text\", text: textValue.trim() });\n return;\n }\n\n const selectedNonCustom = selectedIds.filter(\n (id) => id !== QUESTION_CUSTOM_ID,\n );\n const answerText = customText.trim() || undefined;\n onSubmit({\n kind: activeQuestion.kind,\n selectedIds: selectedNonCustom,\n text: answerText || undefined,\n });\n };\n\n const handleSkip = () => {\n onSkip?.();\n onSubmit({ kind: \"skip\" });\n };\n\n if (!activeQuestion) return null;\n\n return (\n
\n \n
\n \n {clampedIndex}\n \n {activeQuestion.title}\n
\n
\n\n {activeQuestion.kind !== \"text\" &&\n (activeQuestion.options?.length ?? 0) > 0 && (\n
\n {activeQuestion.options!.map((option, idx) => {\n const checked = selectedIds.includes(option.id);\n return (\n {\n if (activeQuestion.kind === \"single\") {\n handleSingleSelect(option.id);\n if (customEnabled) setCustomText(\"\");\n } else {\n toggleMulti(option.id);\n }\n }}\n className=\"w-full text-left rounded-md px-2 py-1.5 flex items-center gap-2 hover:bg-an-background-secondary -mx-2\"\n >\n \n {optionBadge(idx)}\n \n \n {option.label}\n {option.description && (\n \n {\" \"}\n {option.description}\n \n )}\n \n \n );\n })}\n\n {customEnabled && (\n
\n \n {optionBadge(activeQuestion.options!.length)}\n \n \n handleCustomTextChange(event.target.value)\n }\n placeholder={\n activeQuestion.customPlaceholder ?? \"Type your answer\"\n }\n className=\"w-full h-7 rounded-md border border-border bg-background px-2 text-sm text-an-tool-color\"\n />\n
\n )}\n
\n )}\n\n {activeQuestion.kind === \"text\" && (\n setTextValue(event.target.value)}\n placeholder={activeQuestion.placeholder ?? \"Type your answer\"}\n rows={3}\n className=\"w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-an-tool-color resize-y\"\n />\n )}\n\n \n {showNav && (\n
\n {onPreviousQuestion && (\n \n Previous\n \n )}\n {onNextQuestion && (\n \n Next\n \n )}\n
\n )}\n
\n {allowSkip && (\n \n {skipLabel}\n \n )}\n \n {primaryLabel}\n \n
\n \n \n );\n}\n", "type": "registry:ui", "target": "components/agent-elements/question/question-prompt.tsx" }, { "path": "registry/agent-elements/components/tools/tool-row-base.tsx", "content": "import type { ReactNode } from \"react\";\nimport { Collapsible } from \"@base-ui/react/collapsible\";\nimport { TextShimmer } from \"../text-shimmer\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../utils/cn\";\n\nexport type ToolRowBaseProps = {\n icon?: ReactNode;\n shimmerLabel?: string;\n completeLabel: string;\n isAnimating: boolean;\n detail?: string;\n trailingContent?: ReactNode;\n expandable?: boolean;\n expanded?: boolean;\n defaultOpen?: boolean;\n onToggleExpand?: () => void;\n children?: ReactNode;\n};\n\nexport function ToolRowBase({\n icon,\n shimmerLabel,\n completeLabel,\n isAnimating,\n detail,\n trailingContent,\n expandable = false,\n expanded,\n defaultOpen = false,\n onToggleExpand,\n children,\n}: ToolRowBaseProps) {\n const isComplete = !isAnimating;\n const isExpanded = expanded ?? false;\n const canToggle = expandable && (isComplete || isExpanded || isAnimating);\n\n const row = (\n \n
\n {icon && (\n \n {icon}\n \n )}\n \n {isAnimating && shimmerLabel ? (\n \n {shimmerLabel}\n \n ) : (\n completeLabel\n )}\n \n {detail && (\n \n {detail}\n \n )}\n {trailingContent}\n
\n {expandable && (isComplete || isExpanded || isAnimating) && (\n
\n \n
\n )}\n \n );\n\n if (!expandable) {\n return
{row}
;\n }\n\n const rootProps =\n expanded === undefined\n ? { defaultOpen }\n : { open: expanded, onOpenChange: onToggleExpand };\n\n return (\n \n \n {row}\n \n \n {children}\n \n \n );\n}\n", "type": "registry:ui", "target": "components/agent-elements/tools/tool-row-base.tsx" }, { "path": "registry/agent-elements/components/tools/tool-renderer.tsx", "content": "import React, { memo } from \"react\";\nimport { toolRegistry, parseMcpToolType } from \"./tool-registry\";\nimport { getToolStatus } from \"../utils/format-tool\";\nimport { GenericTool } from \"./generic-tool\";\nimport { BashTool } from \"./bash-tool\";\nimport { EditTool } from \"./edit-tool\";\nimport { TodoTool } from \"./todo-tool\";\nimport { PlanTool } from \"./plan-tool\";\nimport { ToolGroup } from \"./tool-group\";\nimport { McpTool, unwrapMcpOutput } from \"./mcp-tool\";\nimport { ThinkingTool } from \"./thinking-tool\";\nimport { SearchTool } from \"./search-tool\";\nimport { QuestionTool } from \"../question/question-tool\";\nimport type { CustomToolRendererProps } from \"../types\";\n\nexport type ToolRendererProps = {\n part: any;\n nestedTools?: any[];\n chatStatus?: string;\n toolRenderers?: Record>;\n};\n\nfunction deriveToolStatus(\n part: any,\n chatStatus?: string,\n): CustomToolRendererProps[\"status\"] {\n if (part.state === \"input-streaming\") return \"streaming\";\n if (part.state === \"output-available\") return \"success\";\n if (part.state === \"output-error\") return \"error\";\n const { isPending } = getToolStatus(part, chatStatus);\n return isPending ? \"pending\" : \"success\";\n}\n\nexport const ToolRenderer = memo(function ToolRenderer({\n part,\n nestedTools,\n chatStatus,\n toolRenderers,\n}: ToolRendererProps) {\n const partType = part.type as string;\n\n // Specialized tool components with variant dispatch\n switch (partType) {\n case \"tool-Bash\":\n return ;\n case \"tool-Edit\":\n case \"tool-Write\":\n return ;\n case \"tool-WebSearch\":\n case \"tool-Grep\":\n case \"tool-Glob\":\n return ;\n case \"tool-PlanWrite\":\n return ;\n case \"tool-TodoWrite\":\n return ;\n case \"tool-Question\":\n return ;\n case \"tool-Task\":\n case \"tool-Agent\":\n const labelBase = part.type === \"tool-Agent\" ? \"Agent\" : \"Task\";\n return (\n \n );\n case \"tool-Thinking\":\n return ;\n }\n\n // MCP tools\n const mcpInfo = parseMcpToolType(partType);\n if (mcpInfo) {\n // Custom renderer for user-defined tools\n if (toolRenderers && mcpInfo.serverName === \"user-tools\") {\n const CustomRenderer = toolRenderers[mcpInfo.toolName];\n if (CustomRenderer) {\n return (\n }\n output={part.output ? unwrapMcpOutput(part.output) : undefined}\n status={deriveToolStatus(part, chatStatus)}\n />\n );\n }\n }\n return ;\n }\n\n // Registry-based generic tools (Read, Grep, Glob, WebFetch, etc.)\n const meta = toolRegistry[partType];\n if (meta) {\n const { isPending, isError } = getToolStatus(part, chatStatus);\n return (\n \n );\n }\n\n // Fallback: show tool name\n const toolName = partType.startsWith(\"tool-\") ? partType.slice(5) : partType;\n const { isPending, isError } = getToolStatus(part, chatStatus);\n return (\n \n );\n});\n", "type": "registry:ui", "target": "components/agent-elements/tools/tool-renderer.tsx" }, { "path": "registry/agent-elements/utils/tool-part-normalizer.ts", "content": "type AnyRecord = Record;\n\nfunction isRecord(value: unknown): value is AnyRecord {\n return typeof value === \"object\" && value !== null;\n}\n\nfunction parseStructuredJson(value: unknown): unknown {\n if (typeof value !== \"string\") return value;\n const trimmed = value.trim();\n if (!trimmed) return value;\n\n try {\n const parsed = JSON.parse(trimmed);\n return isRecord(parsed) || Array.isArray(parsed) ? parsed : value;\n } catch {\n return value;\n }\n}\n\nexport function normalizeToolPart(part: unknown): unknown {\n if (!isRecord(part)) return part;\n if (typeof part.type !== \"string\" || !part.type.startsWith(\"tool-\"))\n return part;\n\n const normalizedInput = parseStructuredJson(part.input);\n const normalizedOutput = parseStructuredJson(part.output);\n const normalizedResult = parseStructuredJson(part.result);\n\n const inputChanged = normalizedInput !== part.input;\n const outputChanged = normalizedOutput !== part.output;\n const resultChanged = normalizedResult !== part.result;\n\n if (!inputChanged && !outputChanged && !resultChanged) {\n return part;\n }\n\n const normalizedPart: AnyRecord = { ...part };\n if (inputChanged) normalizedPart.input = normalizedInput;\n if (outputChanged) normalizedPart.output = normalizedOutput;\n if (resultChanged) normalizedPart.result = normalizedResult;\n return normalizedPart;\n}\n\nexport function normalizeAssistantToolParts(parts: unknown[]): unknown[] {\n let changed = false;\n const normalizedParts = parts.map((part) => {\n const normalizedPart = normalizeToolPart(part);\n if (normalizedPart !== part) changed = true;\n return normalizedPart;\n });\n\n return changed ? normalizedParts : parts;\n}\n", "type": "registry:lib", "target": "components/agent-elements/utils/tool-part-normalizer.ts" }, { "path": "registry/agent-elements/components/input/input-typing.tsx", "content": "import { useState, useEffect, useRef } from \"react\";\n\nexport function useInputTyping(\n text: string,\n duration: number,\n isActive: boolean,\n onComplete: () => void,\n) {\n const [visibleChars, setVisibleChars] = useState(0);\n const [showImage, setShowImage] = useState(false);\n const onCompleteRef = useRef(onComplete);\n onCompleteRef.current = onComplete;\n\n useEffect(() => {\n if (!isActive) {\n setVisibleChars(0);\n setShowImage(false);\n return;\n }\n\n const imageDelay = duration * 0.1;\n const typingStart = duration * 0.15;\n const typingDuration = duration * 0.7;\n const charInterval = typingDuration / text.length;\n const sendDelay = duration * 0.15;\n const timers: ReturnType[] = [];\n\n timers.push(setTimeout(() => setShowImage(true), imageDelay));\n for (let i = 0; i < text.length; i++) {\n timers.push(\n setTimeout(\n () => setVisibleChars(i + 1),\n typingStart + charInterval * i,\n ),\n );\n }\n timers.push(\n setTimeout(\n () => onCompleteRef.current(),\n typingStart + typingDuration + sendDelay,\n ),\n );\n\n return () => timers.forEach(clearTimeout);\n }, [isActive, text, duration]);\n\n return { displayedText: text.slice(0, visibleChars), showImage };\n}\n", "type": "registry:ui", "target": "components/agent-elements/input/input-typing.tsx" }, { "path": "registry/agent-elements/components/image-lightbox.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n IconChevronLeft,\n IconChevronRight,\n IconX,\n} from \"@tabler/icons-react\";\nimport { cn } from \"./utils/cn\";\n\nexport type LightboxImage = {\n /** Stable identifier — used for keys and to know which image is active. */\n id: string;\n /** Resolvable image URL (https / data: / blob:). */\n url: string;\n /** Optional filename used for the alt text. */\n filename?: string;\n};\n\nexport type ImageLightboxProps = {\n /** Whether the overlay is open. */\n open: boolean;\n /** Close handler — wired to overlay click, X button, and Esc key. */\n onClose: () => void;\n /** Full set of images for gallery navigation. */\n images: LightboxImage[];\n /** Index in `images` to start on. */\n initialIndex?: number;\n};\n\n/**\n * Portal-based fullscreen image preview. Renders to `document.body` so it\n * escapes any clipping/transform/stacking context. Adapted from the\n * 21st-private-1 desktop chat — without copy/save (those are\n * desktop-API-specific).\n */\nexport function ImageLightbox({\n open,\n onClose,\n images,\n initialIndex = 0,\n}: ImageLightboxProps) {\n const [currentIndex, setCurrentIndex] = useState(initialIndex);\n const hasMultipleImages = images.length > 1;\n\n // Sync the active index whenever the consumer re-opens with a new initial.\n useEffect(() => {\n if (open) setCurrentIndex(initialIndex);\n }, [open, initialIndex]);\n\n const goToPrevious = useCallback(\n (event?: React.MouseEvent) => {\n event?.stopPropagation();\n setCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1));\n },\n [images.length],\n );\n\n const goToNext = useCallback(\n (event?: React.MouseEvent) => {\n event?.stopPropagation();\n setCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0));\n },\n [images.length],\n );\n\n // Esc / arrow-key navigation. Capture phase so we beat any local handlers\n // (e.g. an Editor that swallows Esc).\n useEffect(() => {\n if (!open) return;\n const handleKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"Escape\":\n event.preventDefault();\n event.stopPropagation();\n onClose();\n break;\n case \"ArrowLeft\":\n if (hasMultipleImages) goToPrevious();\n break;\n case \"ArrowRight\":\n if (hasMultipleImages) goToNext();\n break;\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown, true);\n return () =>\n window.removeEventListener(\"keydown\", handleKeyDown, true);\n }, [open, hasMultipleImages, onClose, goToPrevious, goToNext]);\n\n // Lock body scroll while open so the page underneath doesn't move.\n useEffect(() => {\n if (!open) return;\n const previousOverflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n return () => {\n document.body.style.overflow = previousOverflow;\n };\n }, [open]);\n\n if (typeof document === \"undefined\") return null;\n if (!open) return null;\n const currentImage = images[currentIndex] ?? images[0];\n if (!currentImage?.url) return null;\n\n return createPortal(\n \n \n \n \n\n {hasMultipleImages && (\n \n \n \n )}\n\n event.stopPropagation()}\n draggable={false}\n />\n\n {hasMultipleImages && (\n \n \n \n )}\n\n {hasMultipleImages && (\n
\n
\n {images.map((_, idx) => (\n {\n event.stopPropagation();\n setCurrentIndex(idx);\n }}\n aria-label={`Go to image ${idx + 1}`}\n className={cn(\n \"size-2 rounded-full transition-all\",\n idx === currentIndex\n ? \"bg-white scale-125\"\n : \"bg-white/40 hover:bg-white/60\",\n )}\n />\n ))}\n
\n \n {currentIndex + 1} / {images.length}\n \n
\n )}\n ,\n document.body,\n );\n}\n", "type": "registry:ui", "target": "components/agent-elements/image-lightbox.tsx" }, { "path": "registry/agent-elements/components/tools/tool-registry.ts", "content": "import type React from \"react\";\nimport {\n IconSearch as Search,\n IconEye as Eye,\n IconFolderSearch as FolderSearch,\n IconGitBranch as GitBranch,\n IconTerminal2 as Terminal,\n IconCircleX as XCircle,\n IconFileCode as FileCode2,\n IconSparkles as Sparkles,\n IconGlobe as Globe,\n IconFilePlus as FilePlus,\n IconChecklist as ListTodo,\n IconLogout as LogOut,\n} from \"@tabler/icons-react\";\n\nexport type ToolVariant = \"simple\" | \"collapsible\";\n\nexport type ToolMeta = {\n icon: React.ComponentType<{ className?: string }>;\n title: (part: any) => string;\n subtitle?: (part: any) => string;\n variant: ToolVariant;\n};\n\nfunction getDisplayPath(filePath: string): string {\n if (!filePath) return \"\";\n const prefixes = [\n \"/project/sandbox/repo/\",\n \"/project/sandbox/\",\n \"/project/\",\n \"/workspace/\",\n ];\n for (const prefix of prefixes) {\n if (filePath.startsWith(prefix)) return filePath.slice(prefix.length);\n }\n const worktreeMatch = filePath.match(\n /\\.21st\\/worktrees\\/[^/]+\\/[^/]+\\/(.+)$/,\n );\n if (worktreeMatch) return worktreeMatch[1]!;\n if (filePath.startsWith(\"/\")) {\n const parts = filePath.split(\"/\");\n const rootIndicators = [\"apps\", \"packages\", \"src\", \"lib\", \"components\"];\n const rootIndex = parts.findIndex((p) => rootIndicators.includes(p));\n if (rootIndex > 0) return parts.slice(rootIndex).join(\"/\");\n }\n return filePath;\n}\n\nfunction calculateDiffStats(oldString: string, newString: string) {\n const oldLines = oldString.split(\"\\n\");\n const newLines = newString.split(\"\\n\");\n const maxLines = Math.max(oldLines.length, newLines.length);\n let addedLines = 0;\n let removedLines = 0;\n for (let i = 0; i < maxLines; i++) {\n if (oldLines[i] !== undefined && newLines[i] !== undefined) {\n if (oldLines[i] !== newLines[i]) {\n removedLines++;\n addedLines++;\n }\n } else if (oldLines[i] !== undefined) {\n removedLines++;\n } else if (newLines[i] !== undefined) {\n addedLines++;\n }\n }\n return { addedLines, removedLines };\n}\n\nexport const toolRegistry: Record = {\n \"tool-Task\": {\n icon: Sparkles,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n const subagentType = part.input?.subagent_type || \"Agent\";\n return isPending\n ? `Running ${subagentType}`\n : `${subagentType} completed`;\n },\n subtitle: (part) => {\n const desc = part.input?.description || \"\";\n return desc.length > 50 ? desc.slice(0, 47) + \"...\" : desc;\n },\n variant: \"simple\",\n },\n // Agent tool — renamed from \"Task\" in claude-agent-sdk 0.2.63+\n \"tool-Agent\": {\n icon: Sparkles,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n const subagentType = part.input?.subagent_type || \"Agent\";\n return isPending\n ? `Running ${subagentType}`\n : `${subagentType} completed`;\n },\n subtitle: (part) => {\n const desc = part.input?.description || \"\";\n return desc.length > 50 ? desc.slice(0, 47) + \"...\" : desc;\n },\n variant: \"simple\",\n },\n \"tool-Skill\": {\n icon: Sparkles,\n title: () => \"Skill\",\n subtitle: (part) => part.input?.skill || \"\",\n variant: \"simple\",\n },\n \"tool-Grep\": {\n icon: Search,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n if (isPending) return \"Grepping\";\n const numFiles = part.output?.numFiles || 0;\n return numFiles > 0 ? `Grepped ${numFiles} files` : \"No matches\";\n },\n subtitle: (part) => {\n const pattern = part.input?.pattern || \"\";\n const path = part.input?.path || \"\";\n if (path) {\n const combined = `${pattern} in ${getDisplayPath(path)}`;\n return combined.length > 40 ? combined.slice(0, 37) + \"...\" : combined;\n }\n return pattern.length > 40 ? pattern.slice(0, 37) + \"...\" : pattern;\n },\n variant: \"simple\",\n },\n \"tool-Glob\": {\n icon: FolderSearch,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n if (isPending) return \"Exploring files\";\n const numFiles = part.output?.numFiles || 0;\n return numFiles > 0 ? `Found ${numFiles} files` : \"No files found\";\n },\n subtitle: (part) => {\n const pattern = part.input?.pattern || \"\";\n return pattern.length > 40 ? pattern.slice(0, 37) + \"...\" : pattern;\n },\n variant: \"simple\",\n },\n \"tool-Read\": {\n icon: Eye,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Reading\" : \"Read\";\n },\n subtitle: (part) => {\n const filePath = part.input?.file_path || \"\";\n if (!filePath) return \"\";\n return filePath.split(\"/\").pop() || \"\";\n },\n variant: \"simple\",\n },\n \"tool-Edit\": {\n icon: FileCode2,\n title: (part) => {\n const filePath = part.input?.file_path || \"\";\n if (!filePath) return \"Edit\";\n return filePath.split(\"/\").pop() || \"Edit\";\n },\n subtitle: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n if (isPending) return \"\";\n const oldString = part.input?.old_string || \"\";\n const newString = part.input?.new_string || \"\";\n if (!oldString && !newString) return \"\";\n if (oldString !== newString) {\n const { addedLines, removedLines } = calculateDiffStats(\n oldString,\n newString,\n );\n return `+${addedLines} -${removedLines}`;\n }\n return \"\";\n },\n variant: \"simple\",\n },\n \"tool-Write\": {\n icon: FilePlus,\n title: () => \"Create\",\n subtitle: (part) => {\n const filePath = part.input?.file_path || \"\";\n if (!filePath) return \"\";\n return filePath.split(\"/\").pop() || \"\";\n },\n variant: \"simple\",\n },\n \"tool-Bash\": {\n icon: Terminal,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Running command\" : \"Ran command\";\n },\n subtitle: (part) => {\n const command = part.input?.command || \"\";\n if (!command) return \"\";\n let normalized = command.replace(/\\\\\\s*\\n\\s*/g, \" \").trim();\n normalized = normalized.replace(\n /\\/(?:Users|home|root)\\/[^\\s\"']+/g,\n (match: string) => getDisplayPath(match),\n );\n return normalized.length > 50\n ? normalized.slice(0, 47) + \"...\"\n : normalized;\n },\n variant: \"simple\",\n },\n \"tool-WebFetch\": {\n icon: Globe,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Fetching\" : \"Fetched\";\n },\n subtitle: (part) => {\n const url = part.input?.url || \"\";\n try {\n return new URL(url).hostname.replace(\"www.\", \"\");\n } catch {\n return url.slice(0, 30);\n }\n },\n variant: \"simple\",\n },\n \"tool-WebSearch\": {\n icon: Search,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Searching web\" : \"Searched web\";\n },\n subtitle: (part) => {\n const query = part.input?.query || \"\";\n return query.length > 40 ? query.slice(0, 37) + \"...\" : query;\n },\n variant: \"collapsible\",\n },\n \"tool-TodoWrite\": {\n icon: ListTodo,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n const action = part.input?.action || \"update\";\n if (isPending) return action === \"add\" ? \"Adding todo\" : \"Updating todos\";\n return action === \"add\" ? \"Added todo\" : \"Updated todos\";\n },\n subtitle: (part) => {\n const todos = part.input?.todos || [];\n if (todos.length === 0) return \"\";\n return `${todos.length} ${todos.length === 1 ? \"item\" : \"items\"}`;\n },\n variant: \"simple\",\n },\n \"tool-PlanWrite\": {\n icon: Sparkles,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n const action = part.input?.action || \"create\";\n if (isPending) {\n if (action === \"create\") return \"Creating plan\";\n if (action === \"approve\") return \"Approving plan\";\n return \"Updating plan\";\n }\n const status = part.input?.plan?.status;\n if (status === \"awaiting_approval\") return \"Plan ready for review\";\n if (status === \"approved\") return \"Plan approved\";\n if (status === \"completed\") return \"Plan completed\";\n return action === \"create\" ? \"Created plan\" : \"Updated plan\";\n },\n variant: \"simple\",\n },\n \"tool-ExitPlanMode\": {\n icon: LogOut,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Finishing plan\" : \"Plan complete\";\n },\n variant: \"simple\",\n },\n \"tool-NotebookEdit\": {\n icon: FileCode2,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Editing notebook\" : \"Edited notebook\";\n },\n subtitle: (part) => {\n const filePath = part.input?.file_path || \"\";\n if (!filePath) return \"\";\n return filePath.split(\"/\").pop() || \"\";\n },\n variant: \"simple\",\n },\n \"tool-BashOutput\": {\n icon: Terminal,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Getting output\" : \"Command output\";\n },\n subtitle: (part) => {\n const output = part.output;\n if (typeof output === \"string\" && output.trim()) return output.trim();\n const command = part.input?.command || \"\";\n if (!command) return \"\";\n let normalized = command.replace(/\\\\\\s*\\n\\s*/g, \" \").trim();\n normalized = normalized.replace(\n /\\/(?:Users|home|root)\\/[^\\s\"']+/g,\n (match: string) => getDisplayPath(match),\n );\n return normalized.length > 50\n ? normalized.slice(0, 47) + \"...\"\n : normalized;\n },\n variant: \"simple\",\n },\n \"tool-KillShell\": {\n icon: XCircle,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Stopping shell\" : \"Shell stopped\";\n },\n subtitle: (part) => {\n const pid = part.input?.pid;\n return typeof pid === \"number\" ? `pid ${pid}` : \"\";\n },\n variant: \"simple\",\n },\n \"tool-cloning\": {\n icon: GitBranch,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Cloning repo\" : \"Repo cloned\";\n },\n subtitle: (part) => part.input?.repo ?? \"\",\n variant: \"simple\",\n },\n \"tool-Thinking\": {\n icon: Sparkles,\n title: (part) => {\n const isPending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n return isPending ? \"Thinking...\" : \"Thought\";\n },\n variant: \"collapsible\",\n },\n};\n\n// MCP tool parsing\nconst MCP_TOOL_PREFIX = \"tool-mcp__\";\n\nexport type McpToolInfo = {\n serverName: string;\n toolName: string;\n displayName: string;\n category: string;\n};\n\nconst BUILTIN_MCP_TOOLS: Record = {\n \"tool-ListMcpResources\": {\n serverName: \"mcp\",\n toolName: \"list_resources\",\n displayName: \"List Resources\",\n category: \"list\",\n },\n \"tool-ListMcpResourcesTool\": {\n serverName: \"mcp\",\n toolName: \"list_resources\",\n displayName: \"List Resources\",\n category: \"list\",\n },\n \"tool-ReadMcpResource\": {\n serverName: \"mcp\",\n toolName: \"read_resource\",\n displayName: \"Read Resource\",\n category: \"get\",\n },\n \"tool-ReadMcpResourceTool\": {\n serverName: \"mcp\",\n toolName: \"read_resource\",\n displayName: \"Read Resource\",\n category: \"get\",\n },\n};\n\nexport function parseMcpToolType(partType: string): McpToolInfo | null {\n const builtin = BUILTIN_MCP_TOOLS[partType];\n if (builtin) return builtin;\n if (!partType.startsWith(MCP_TOOL_PREFIX)) return null;\n const withoutPrefix = partType.slice(MCP_TOOL_PREFIX.length);\n const separatorIndex = withoutPrefix.indexOf(\"__\");\n if (separatorIndex === -1) return null;\n const serverName = withoutPrefix.slice(0, separatorIndex);\n const toolName = withoutPrefix.slice(separatorIndex + 2);\n return {\n serverName,\n toolName,\n displayName: toolName\n .replace(/_/g, \" \")\n .replace(/\\b\\w/g, (c) => c.toUpperCase())\n .trim(),\n category: \"other\",\n };\n}\n", "type": "registry:lib", "target": "components/agent-elements/tools/tool-registry.ts" }, { "path": "registry/agent-elements/utils/format-tool.ts", "content": "/**\n * Tool state cache for detecting AI SDK in-place mutations.\n * AI SDK mutates objects in-place during streaming, so we must\n * cache state externally and compare cached values.\n */\n\ntype CachedToolState = {\n state: string | undefined;\n inputJson: string;\n outputJson: string;\n};\n\nconst toolStateCache = new Map();\n\nfunction getToolStateSnapshot(part: any): CachedToolState {\n return {\n state: part.state,\n inputJson: JSON.stringify(part.input || {}),\n outputJson: JSON.stringify(part.output || {}),\n };\n}\n\nfunction hasToolStateChanged(toolCallId: string, part: any): boolean {\n const cached = toolStateCache.get(toolCallId);\n const current = getToolStateSnapshot(part);\n\n if (!cached) {\n toolStateCache.set(toolCallId, current);\n return true;\n }\n\n const changed =\n cached.state !== current.state ||\n cached.inputJson !== current.inputJson ||\n cached.outputJson !== current.outputJson;\n\n if (changed) {\n toolStateCache.set(toolCallId, current);\n }\n\n return changed;\n}\n\nfunction arePartsEqual(prev: any, next: any): boolean {\n if (prev.toolCallId !== next.toolCallId) return false;\n if (prev.type !== next.type) return false;\n\n const toolCallId = next.toolCallId;\n if (!toolCallId) {\n return prev.state === next.state;\n }\n\n const changed = hasToolStateChanged(toolCallId, next);\n return !changed;\n}\n\nfunction isToolCompleted(part: any): boolean {\n if (part.output !== undefined && part.output !== null) return true;\n if (part.state === \"error\") return true;\n if (part.state === \"result\") return true;\n return false;\n}\n\n/** Deep compare function for tool part props. Used with React.memo(). */\nexport function areToolPropsEqual(\n prevProps: { part: any; chatStatus?: string },\n nextProps: { part: any; chatStatus?: string },\n): boolean {\n const partsEqual = arePartsEqual(prevProps.part, nextProps.part);\n if (!partsEqual) return false;\n if (isToolCompleted(nextProps.part)) return true;\n if (prevProps.chatStatus !== nextProps.chatStatus) return false;\n return true;\n}\n\n/** Get tool status from part state */\nexport function getToolStatus(part: any, chatStatus?: string) {\n const basePending =\n part.state !== \"output-available\" && part.state !== \"output-error\";\n const isError =\n part.state === \"output-error\" ||\n (part.state === \"output-available\" && part.output?.success === false);\n const isSuccess = part.state === \"output-available\" && !isError;\n const isPending = basePending && chatStatus === \"streaming\";\n const isInterrupted =\n basePending && chatStatus !== \"streaming\" && chatStatus !== undefined;\n\n return { isPending, isError, isSuccess, isInterrupted };\n}\n", "type": "registry:lib", "target": "components/agent-elements/utils/format-tool.ts" }, { "path": "registry/agent-elements/components/spiral-loader-data.ts", "content": "export const spiralFastData = {\"nm\":\"spiral2\",\"h\":16,\"w\":16,\"meta\":{\"g\":\"@lottiefiles/toolkit-js 0.71.7\"},\"layers\":[{\"ty\":4,\"nm\":\"Vector 5821 copy Outlines\",\"sr\":1,\"st\":0,\"op\":30,\"ip\":0,\"ln\":\"18\",\"hasMask\":false,\"ao\":0,\"ks\":{\"a\":{\"a\":0,\"k\":[12.5,6.5,0]},\"s\":{\"a\":0,\"k\":[100,100,100]},\"p\":{\"a\":1,\"k\":[{\"o\":{\"x\":0.167,\"y\":0.167},\"i\":{\"x\":0.833,\"y\":0.833},\"s\":[12,8,0],\"t\":0},{\"s\":[4,8,0],\"t\":29}]},\"r\":{\"a\":0,\"k\":0},\"sa\":{\"a\":0,\"k\":0},\"o\":{\"a\":0,\"k\":24}},\"shapes\":[{\"ty\":\"gr\",\"nm\":\"Group 1\",\"it\":[{\"ty\":\"sh\",\"nm\":\"Path 1\",\"d\":1,\"ks\":{\"a\":0,\"k\":{\"c\":false,\"i\":[[0,0],[-0.289,3.296],[2.218,0],[-0.23,-2.627],[-4.452,0],[-0.289,3.296],[2.218,0],[-0.23,-2.627],[-4.452,0],[-0.289,3.296],[2.218,0],[-0.232,-2.627],[-4.443,0]],\"o\":[[4.452,0],[0.23,-2.627],[-2.218,0],[0.289,3.296],[4.452,0],[0.23,-2.627],[-2.218,0],[0.289,3.296],[4.452,0],[0.23,-2.627],[-2.218,0],[0.292,3.296],[0,0]],\"v\":[[-12,6],[-4.975,-1.012],[-8,-6],[-11.025,-1.012],[-4,6],[3.025,-1.012],[0,-6],[-3.025,-1.012],[4,6],[11.025,-1.012],[8,-6],[4.98,-1.012],[12,6]]}}},{\"ty\":\"st\",\"nm\":\"Stroke 1\",\"lc\":2,\"lj\":2,\"ml\":4,\"o\":{\"a\":0,\"k\":100},\"w\":{\"a\":0,\"k\":1.4},\"c\":{\"a\":0,\"k\":[1,1,1]}},{\"ty\":\"tr\",\"a\":{\"a\":0,\"k\":[0,0]},\"s\":{\"a\":0,\"k\":[100,100]},\"p\":{\"a\":0,\"k\":[12.5,6.5]},\"r\":{\"a\":0,\"k\":0},\"sa\":{\"a\":0,\"k\":0},\"o\":{\"a\":0,\"k\":100}}]},{\"ty\":\"tm\",\"nm\":\"Trim Paths 1\",\"e\":{\"a\":1,\"k\":[{\"o\":{\"x\":0.341,\"y\":0.488},\"i\":{\"x\":0.269,\"y\":0.75},\"s\":[44],\"t\":0},{\"s\":[77],\"t\":29}]},\"o\":{\"a\":0,\"k\":0},\"s\":{\"a\":1,\"k\":[{\"o\":{\"x\":0.32,\"y\":0.154},\"i\":{\"x\":0.826,\"y\":0.579},\"s\":[23],\"t\":0},{\"s\":[57],\"t\":29}]},\"m\":1}],\"ind\":1}],\"v\":\"5.7.0\",\"fr\":60,\"op\":30,\"ip\":0,\"assets\":[]};\n\nexport const spiralSlowData = {\"nm\":\"spiral1\",\"h\":16,\"w\":16,\"meta\":{\"g\":\"@lottiefiles/toolkit-js 0.71.7\"},\"layers\":[{\"ty\":4,\"nm\":\"Vector 5821 copy Outlines\",\"sr\":1,\"st\":0,\"op\":60,\"ip\":0,\"ln\":\"18\",\"hasMask\":false,\"ao\":0,\"ks\":{\"a\":{\"a\":0,\"k\":[12.5,6.5,0]},\"s\":{\"a\":0,\"k\":[100,100,100]},\"p\":{\"a\":1,\"k\":[{\"o\":{\"x\":0.167,\"y\":0.167},\"i\":{\"x\":0.833,\"y\":0.833},\"s\":[12,8,0],\"t\":0},{\"s\":[4,8,0],\"t\":59}]},\"r\":{\"a\":0,\"k\":0},\"sa\":{\"a\":0,\"k\":0},\"o\":{\"a\":0,\"k\":24}},\"shapes\":[{\"ty\":\"gr\",\"nm\":\"Group 1\",\"it\":[{\"ty\":\"sh\",\"nm\":\"Path 1\",\"d\":1,\"ks\":{\"a\":0,\"k\":{\"c\":false,\"i\":[[0,0],[-0.289,3.296],[2.218,0],[-0.23,-2.627],[-4.452,0],[-0.289,3.296],[2.218,0],[-0.23,-2.627],[-4.452,0],[-0.289,3.296],[2.218,0],[-0.232,-2.627],[-4.443,0]],\"o\":[[4.452,0],[0.23,-2.627],[-2.218,0],[0.289,3.296],[4.452,0],[0.23,-2.627],[-2.218,0],[0.289,3.296],[4.452,0],[0.23,-2.627],[-2.218,0],[0.292,3.296],[0,0]],\"v\":[[-12,6],[-4.975,-1.012],[-8,-6],[-11.025,-1.012],[-4,6],[3.025,-1.012],[0,-6],[-3.025,-1.012],[4,6],[11.025,-1.012],[8,-6],[4.98,-1.012],[12,6]]}}},{\"ty\":\"st\",\"nm\":\"Stroke 1\",\"lc\":2,\"lj\":2,\"ml\":4,\"o\":{\"a\":0,\"k\":100},\"w\":{\"a\":0,\"k\":1.4},\"c\":{\"a\":0,\"k\":[1,1,1]}},{\"ty\":\"tr\",\"a\":{\"a\":0,\"k\":[0,0]},\"s\":{\"a\":0,\"k\":[100,100]},\"p\":{\"a\":0,\"k\":[12.5,6.5]},\"r\":{\"a\":0,\"k\":0},\"sa\":{\"a\":0,\"k\":0},\"o\":{\"a\":0,\"k\":100}}]},{\"ty\":\"tm\",\"nm\":\"Trim Paths 1\",\"e\":{\"a\":1,\"k\":[{\"o\":{\"x\":0.341,\"y\":0.992},\"i\":{\"x\":0.269,\"y\":0.491},\"s\":[44],\"t\":0},{\"s\":[77],\"t\":59}]},\"o\":{\"a\":0,\"k\":0},\"s\":{\"a\":1,\"k\":[{\"o\":{\"x\":0.32,\"y\":0.313},\"i\":{\"x\":0.826,\"y\":0.143},\"s\":[23],\"t\":0},{\"s\":[57],\"t\":59}]},\"m\":1}],\"ind\":1}],\"v\":\"5.7.0\",\"fr\":60,\"op\":60,\"ip\":0,\"assets\":[]};\n", "type": "registry:lib", "target": "components/agent-elements/spiral-loader-data.ts" }, { "path": "registry/agent-elements/types/timeline.ts", "content": "export type StepState = \"pending\" | \"animating\" | \"complete\";\n\nexport type TimelineStep =\n | {\n id: string;\n type: \"input-typing\";\n content: string;\n image?: string;\n duration: number;\n }\n | {\n id: string;\n type: \"user-message\";\n content: string;\n image?: string;\n }\n | {\n id: string;\n type: \"tool-call\";\n toolName: string;\n toolDetail: string;\n duration: number;\n toolVariant?: \"thinking\" | \"action\" | \"search\";\n thoughtContent?: string;\n searchQuery?: string;\n searchSource?: string;\n filePath?: string;\n diffStats?: string;\n diffLines?: { type: \"add\" | \"remove\" | \"context\"; content: string }[];\n bashCommand?: string;\n bashOutput?: string;\n bashSuccess?: boolean;\n }\n | {\n id: string;\n type: \"assistant-stream\";\n content: string;\n }\n | {\n id: string;\n type: \"pause\";\n duration: number;\n };\n\nexport type Turn = { userStep?: TimelineStep; steps: TimelineStep[] };\n", "type": "registry:lib", "target": "components/agent-elements/types/timeline.ts" }, { "path": "registry/agent-elements/hooks/use-tool-complete.ts", "content": "import { useEffect, useRef } from \"react\";\n\nexport function useToolComplete(\n isAnimating: boolean,\n duration: number,\n onComplete: () => void,\n) {\n const onCompleteRef = useRef(onComplete);\n onCompleteRef.current = onComplete;\n\n useEffect(() => {\n if (!isAnimating) return;\n const t = setTimeout(() => onCompleteRef.current(), duration);\n return () => clearTimeout(t);\n }, [isAnimating, duration]);\n}\n", "type": "registry:lib", "target": "components/agent-elements/hooks/use-tool-complete.ts" }, { "path": "registry/agent-elements/utils/tool-adapters.ts", "content": "import type { TimelineStep, StepState } from \"../types/timeline\";\n\nfunction calculateDiffStatsFromPatch(\n patches: Array<{ lines?: string[] }>,\n): string | undefined {\n let addedLines = 0;\n let removedLines = 0;\n\n for (const patch of patches) {\n if (!patch.lines) continue;\n for (const line of patch.lines) {\n if (line.startsWith(\"+\")) addedLines++;\n else if (line.startsWith(\"-\")) removedLines++;\n }\n }\n\n if (addedLines === 0 && removedLines === 0) return undefined;\n\n const parts: string[] = [];\n if (addedLines > 0) parts.push(`+${addedLines}`);\n if (removedLines > 0) parts.push(`-${removedLines}`);\n return parts.join(\" \");\n}\n\nfunction getDiffLinesFromPatch(\n patches: Array<{ lines?: string[] }>,\n): { type: \"add\" | \"remove\" | \"context\"; content: string }[] {\n const result: { type: \"add\" | \"remove\" | \"context\"; content: string }[] = [];\n\n for (const patch of patches) {\n if (!patch.lines) continue;\n for (const line of patch.lines) {\n if (line.startsWith(\"+\")) {\n result.push({ type: \"add\", content: line.slice(1) });\n } else if (line.startsWith(\"-\")) {\n result.push({ type: \"remove\", content: line.slice(1) });\n } else if (line.startsWith(\" \")) {\n result.push({ type: \"context\", content: line.slice(1) });\n }\n }\n }\n\n return result;\n}\n\nexport function mapToolStateToStepState(\n aiState: \"partial-call\" | \"call\" | \"result\",\n): StepState {\n return aiState === \"result\" ? \"complete\" : \"animating\";\n}\n\nexport function mapToolNameToVariant(\n toolName: string,\n): \"thinking\" | \"action\" | \"search\" | undefined {\n const lower = toolName.toLowerCase();\n if (lower === \"thinking\" || lower === \"reasoning\") return \"thinking\";\n if (\n lower === \"websearch\" ||\n lower === \"web_search\" ||\n lower === \"grep\" ||\n lower === \"glob\" ||\n lower === \"webfetch\" ||\n lower === \"web_fetch\"\n )\n return \"search\";\n return undefined;\n}\n\nfunction extractToolDetail(\n toolName: string,\n args: Record,\n): string {\n switch (toolName) {\n case \"Bash\":\n return args?.command ? String(args.command).slice(0, 80) : \"\";\n case \"Edit\":\n case \"Write\":\n case \"Read\":\n return args?.file_path\n ? (String(args.file_path).split(\"/\").pop() ?? \"\")\n : \"\";\n case \"Grep\":\n return args?.pattern ? String(args.pattern) : \"\";\n case \"Glob\":\n return args?.pattern ? String(args.pattern) : \"\";\n case \"WebSearch\":\n case \"web_search\":\n return args?.query ? String(args.query) : \"\";\n case \"WebFetch\":\n case \"web_fetch\":\n return args?.url ? String(args.url).slice(0, 60) : \"\";\n default:\n return \"\";\n }\n}\n\nexport function mapToolInvocationToStep(\n toolCallId: string,\n toolInvocation: {\n toolName: string;\n args?: Record;\n state: \"partial-call\" | \"call\" | \"result\";\n result?: any;\n },\n): Extract {\n const { toolName, args = {}, result } = toolInvocation;\n const displayToolName =\n toolName === \"PlanWrite\"\n ? \"Plan\"\n : toolName === \"TodoWrite\"\n ? \"Todo\"\n : toolName;\n const detail = extractToolDetail(toolName, args);\n\n const step: Extract = {\n id: toolCallId,\n type: \"tool-call\",\n toolName: displayToolName,\n toolDetail: detail,\n duration: Number.MAX_SAFE_INTEGER,\n toolVariant: mapToolNameToVariant(toolName),\n };\n\n if (toolName === \"Bash\") {\n step.bashCommand = args?.command ? String(args.command) : undefined;\n if (toolInvocation.state === \"result\" && result) {\n if (typeof result === \"string\") {\n step.bashOutput = result;\n step.bashSuccess = true;\n } else if (typeof result === \"object\") {\n const stdout =\n typeof result?.stdout === \"string\"\n ? result.stdout\n : typeof result?.output === \"string\"\n ? result.output\n : \"\";\n const stderr = typeof result?.stderr === \"string\" ? result.stderr : \"\";\n step.bashOutput = [stdout, stderr]\n .filter(Boolean)\n .join(stdout && stderr ? \"\\n\" : \"\");\n const exitCode = result?.exitCode ?? result?.exit_code;\n step.bashSuccess = exitCode === undefined ? true : exitCode === 0;\n } else {\n step.bashOutput = JSON.stringify(result);\n step.bashSuccess = true;\n }\n }\n }\n\n if (toolName === \"Edit\" || toolName === \"Write\" || toolName === \"Read\") {\n step.filePath = args?.file_path ? String(args.file_path) : undefined;\n }\n\n if (toolName === \"Write\") {\n const content =\n typeof result?.content === \"string\"\n ? result.content\n : typeof args?.content === \"string\"\n ? args.content\n : \"\";\n\n if (content) {\n const lines = content.split(\"\\n\");\n step.diffStats = `+${lines.length}`;\n step.diffLines = lines.map((line: string) => ({\n type: \"add\",\n content: line,\n }));\n }\n }\n\n if (toolName === \"Edit\" && Array.isArray(result?.structuredPatch)) {\n step.diffStats = calculateDiffStatsFromPatch(result.structuredPatch);\n step.diffLines = getDiffLinesFromPatch(result.structuredPatch);\n }\n\n if (\n toolName === \"WebSearch\" ||\n toolName === \"web_search\" ||\n toolName === \"Grep\" ||\n toolName === \"Glob\"\n ) {\n step.searchQuery =\n (args?.query ?? args?.pattern)\n ? String(args?.query ?? args?.pattern)\n : undefined;\n step.searchSource =\n toolName === \"WebSearch\" || toolName === \"web_search\" ? \"web\" : \"code\";\n }\n\n if (\n toolName.toLowerCase() === \"thinking\" ||\n toolName.toLowerCase() === \"reasoning\"\n ) {\n step.thoughtContent =\n typeof args?.thought === \"string\"\n ? args.thought\n : typeof result === \"string\"\n ? result\n : undefined;\n }\n\n return step;\n}\n", "type": "registry:lib", "target": "components/agent-elements/utils/tool-adapters.ts" }, { "path": "registry/agent-elements/components/tools/tool-approval-footer.tsx", "content": "import { memo, useMemo, useState } from \"react\";\n\nexport type ToolApproval = {\n approveLabel?: string;\n rejectLabel?: string;\n onApprove?: () => void;\n onReject?: () => void;\n};\n\nexport type ToolApprovalFooterProps = ToolApproval & {\n isPending?: boolean;\n};\n\nexport const ToolApprovalFooter = memo(function ToolApprovalFooter({\n isPending,\n approveLabel,\n rejectLabel,\n onApprove,\n onReject,\n}: ToolApprovalFooterProps) {\n const [decision, setDecision] = useState<\"approved\" | \"rejected\" | null>(\n null,\n );\n\n const approveText =\n decision === \"approved\" ? \"Approved\" : (approveLabel ?? \"Next\");\n const rejectText =\n decision === \"rejected\" ? \"Skipped\" : (rejectLabel ?? \"Skip\");\n\n const handleApprove = () => {\n if (decision) return;\n setDecision(\"approved\");\n onApprove?.();\n };\n\n const handleReject = () => {\n if (decision) return;\n setDecision(\"rejected\");\n onReject?.();\n };\n\n const statusConfig = useMemo(() => {\n if (decision === \"approved\") return { label: \"Waiting\", dots: true };\n if (decision === \"rejected\") return { label: \"Canceled\", dots: false };\n if (isPending) return { label: \"Starting\", dots: true };\n // Default \"ready\" state — buttons themselves communicate the affordance,\n // an extra \"Ready\" label just adds noise. Render an empty spacer so the\n // buttons stay right-aligned via justify-between.\n return null;\n }, [decision, isPending]);\n\n return (\n
\n {statusConfig ? (\n \n {statusConfig.label}\n {statusConfig.dots && (\n \n \n .\n \n \n .\n \n \n .\n \n \n )}\n \n ) : (\n \n )}\n
\n \n {rejectText}\n \n \n {approveText}\n \n
\n
\n );\n});\n", "type": "registry:ui", "target": "components/agent-elements/tools/tool-approval-footer.tsx" }, { "path": "registry/agent-elements/icons/file-ext-icon.tsx", "content": "export function FileExtIcon({\n filename,\n className,\n}: {\n filename: string;\n className?: string;\n}) {\n const ext = filename.split(\".\").pop()?.toLowerCase() ?? \"\";\n const cls = className ?? \"w-2.5 h-2.5 shrink-0\";\n\n if (ext === \"ts\" || ext === \"tsx\") {\n return (\n \n \n \n );\n }\n if (ext === \"js\" || ext === \"mjs\" || ext === \"cjs\" || ext === \"jsx\") {\n return (\n \n \n \n \n );\n }\n if (ext === \"json\" || ext === \"jsonc\") {\n return (\n \n \n \n \n );\n }\n\n return null;\n}\n", "type": "registry:ui", "target": "components/agent-elements/icons/file-ext-icon.tsx" }, { "path": "registry/agent-elements/icons.tsx", "content": "import React from \"react\";\n\ntype IconProps = React.SVGProps & {\n className?: string;\n};\n\nexport function IconSpinner({ className, ...rest }: IconProps) {\n return (\n \n \n \n \n );\n}\n\nexport function CheckIcon(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconArrowRight(props: IconProps) {\n return (\n \n \n \n \n );\n}\n\nexport function IconDoubleChevronRight(props: IconProps) {\n return (\n \n \n \n );\n}\n", "type": "registry:ui", "target": "components/agent-elements/icons.tsx" }, { "path": "registry/agent-elements/icons/source-icons.ts", "content": "export type SourceType =\n | \"google\"\n | \"booking\"\n | \"tripadvisor\"\n | \"expedia\"\n | \"airbnb\"\n | \"github\"\n | \"stackoverflow\"\n | \"arxiv\"\n | \"scholar\"\n | \"stripe\"\n | \"zendesk\"\n | \"web\";\n", "type": "registry:lib", "target": "components/agent-elements/icons/source-icons.ts" }, { "path": "registry/agent-elements/agent-ui.css", "content": "/* Agent Elements tokens + utilities */\n\n/*\n * AN Agent Chat - CSS Custom Properties\n * These are the default values. Override by redefining these vars in your app CSS.\n */\n:root {\n /* Geometry — all radii derive from --an-border-radius */\n --an-border-radius: 16px;\n --an-message-border-radius: var(--an-border-radius);\n --an-input-border-radius: var(--an-border-radius);\n --an-tool-border-radius: 10px;\n --an-message-radius-inner-offset: 4px;\n --an-max-width: 420px;\n\n /* Colors - Light mode defaults */\n --an-background: #ffffff;\n --an-background-secondary: #f0f0f0;\n --an-background-tertiary: #f8f8f8;\n --an-foreground: #1a1a1a;\n --an-foreground-muted: #737373;\n --an-foreground-subtle: #a3a3a3;\n --an-border-color: #e4e4e7;\n --an-primary-color: #3b82f6;\n\n /* User Messages */\n --an-user-message-bg: #f5f5f5;\n --an-user-message-text: #1a1a1a;\n\n /* Input */\n --an-input-background: #ffffff;\n --an-input-border-color: #e4e4e7;\n --an-input-color: #1a1a1a;\n --an-input-placeholder-color: #a3a3a3;\n --an-input-focus-outline: transparent;\n --an-context-padding: 10px;\n\n /* Send/Stop Buttons */\n --an-send-button-bg: #3b82f6;\n --an-send-button-color: #ffffff;\n\n /* Tools */\n --an-tool-background: #f5f5f5;\n --an-tool-border-color: #e4e4e7;\n --an-tool-color: #1a1a1a;\n --an-tool-color-muted: #737373;\n\n /* Code */\n --an-code-background: #1e1e1e;\n --an-code-color: #d4d4d4;\n\n /* Diff colors */\n --an-diff-added-bg: rgba(34, 197, 94, 0.1);\n --an-diff-added-border: rgba(34, 197, 94, 0.5);\n --an-diff-added-text: #15803d;\n --an-diff-removed-bg: rgba(239, 68, 68, 0.1);\n --an-diff-removed-border: rgba(239, 68, 68, 0.5);\n --an-diff-removed-text: #dc2626;\n}\n\n/* Dark mode defaults */\n.dark {\n --an-background: #0a0a0a;\n --an-background-secondary: #242424;\n --an-background-tertiary: #141414;\n --an-foreground: #fafafa;\n --an-foreground-muted: #8c8c8c;\n --an-foreground-subtle: #71717a;\n --an-border-color: #2a2a2a;\n --an-primary-color: #60a5fa;\n\n --an-user-message-bg: #1a1a1a;\n --an-user-message-text: #fafafa;\n\n --an-input-background: #0a0a0a;\n --an-input-border-color: #2a2a2a;\n --an-input-color: #fafafa;\n --an-input-placeholder-color: #71717a;\n --an-input-focus-outline: transparent;\n --an-context-padding: 12px;\n\n --an-send-button-bg: #60a5fa;\n /* Dark mode uses a lighter primary (#60a5fa) — pair it with black text so\n labels like \"Approve\" / send-arrow have proper contrast instead of\n low-contrast white-on-light-blue. */\n --an-send-button-color: #0a0a0a;\n\n --an-tool-background: #141414;\n --an-tool-border-color: #2a2a2a;\n --an-tool-color: #fafafa;\n --an-tool-color-muted: #8c8c8c;\n\n --an-code-background: #0a0a0a;\n --an-code-color: #d4d4d4;\n\n --an-diff-added-bg: rgba(34, 197, 94, 0.15);\n --an-diff-added-border: rgba(34, 197, 94, 0.4);\n --an-diff-added-text: #4ade80;\n --an-diff-removed-bg: rgba(239, 68, 68, 0.15);\n --an-diff-removed-border: rgba(239, 68, 68, 0.4);\n --an-diff-removed-text: #f87171;\n}\n\n@theme inline {\n --color-an-background: var(--an-background);\n --color-an-background-secondary: var(--an-background-secondary);\n --color-an-background-tertiary: var(--an-background-tertiary);\n --color-an-foreground: var(--an-foreground);\n --color-an-foreground-muted: var(--an-foreground-muted);\n --color-an-foreground-subtle: var(--an-foreground-subtle);\n --color-an-border-color: var(--an-border-color);\n --color-an-primary-color: var(--an-primary-color);\n --color-an-user-message-bg: var(--an-user-message-bg);\n --color-an-user-message-text: var(--an-user-message-text);\n --color-an-input-background: var(--an-input-background);\n --color-an-input-border-color: var(--an-input-border-color);\n --color-an-input-color: var(--an-input-color);\n --color-an-input-placeholder-color: var(--an-input-placeholder-color);\n --color-an-input-focus-outline: var(--an-input-focus-outline);\n --color-an-send-button-bg: var(--an-send-button-bg);\n --color-an-send-button-color: var(--an-send-button-color);\n --color-an-tool-background: var(--an-tool-background);\n --color-an-tool-border-color: var(--an-tool-border-color);\n --color-an-tool-color: var(--an-tool-color);\n --color-an-tool-color-muted: var(--an-tool-color-muted);\n --color-an-code-background: var(--an-code-background);\n --color-an-code-color: var(--an-code-color);\n --color-an-diff-added-bg: var(--an-diff-added-bg);\n --color-an-diff-added-border: var(--an-diff-added-border);\n --color-an-diff-added-text: var(--an-diff-added-text);\n --color-an-diff-removed-bg: var(--an-diff-removed-bg);\n --color-an-diff-removed-border: var(--an-diff-removed-border);\n --color-an-diff-removed-text: var(--an-diff-removed-text);\n --radius-an-message: var(--an-message-border-radius);\n --radius-an-message-inner: calc(\n var(--an-message-border-radius) - var(--an-message-radius-inner-offset)\n );\n --radius-an-input-border-radius: var(--an-input-border-radius);\n --radius-an-tool-border-radius: var(--an-tool-border-radius);\n --spacing-an-context-padding: var(--an-context-padding);\n --max-width-an: var(--an-max-width);\n --spacing-an-user-message-x: 14px;\n --spacing-an-user-message-y: 10px;\n}\n\n/* TextShimmer animation */\n@keyframes an-shimmer {\n from {\n background-position: 100% center;\n }\n to {\n background-position: 0% center;\n }\n}\n\n@keyframes an-blink {\n 50% {\n opacity: 0;\n }\n}\n\n@keyframes loading-dots {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes an-ellipsis {\n 0% {\n width: 0;\n }\n 33% {\n width: 0.33em;\n }\n 66% {\n width: 0.66em;\n }\n 100% {\n width: 1em;\n }\n}\n\n.an-text-shimmer {\n display: inline-block;\n background-size: 250% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n var(--an-foreground-subtle, #a3a3a3) 0%,\n var(--an-foreground-subtle, #a3a3a3) 40%,\n var(--an-foreground-muted, #737373) 50%,\n var(--an-foreground-subtle, #a3a3a3) 60%,\n var(--an-foreground-subtle, #a3a3a3) 100%\n );\n background-repeat: no-repeat;\n}\n\n.an-text-shimmer--active {\n animation: an-shimmer var(--an-shimmer-duration, 2s) linear infinite;\n}\n\n.an-ellipsis {\n display: inline-block;\n overflow: hidden;\n width: 0;\n vertical-align: bottom;\n animation: an-ellipsis 1.2s steps(1, end) infinite;\n}\n\n.an-markdown pre code {\n counter-reset: none !important;\n}\n\n.an-markdown pre code > span::before {\n content: none !important;\n display: none !important;\n}\n\n.an-markdown pre code > span {\n padding-left: 0 !important;\n}\n\n/* Diff */\n.an-edit-diff,\n.an-edit-diff pre,\n.an-edit-diff code {\n font-size: 12px;\n}\n\n.dark .an-edit-tool-card {\n background-color: #000;\n}\n\n[data-theme=\"dark\"] .an-edit-tool-card {\n background-color: #000;\n}\n\n.dark .an-edit-tool-card .an-edit-diff,\n.dark .an-edit-tool-card .an-edit-diff pre,\n.dark .an-edit-tool-card .an-edit-diff code {\n background-color: #000 !important;\n}\n\n[data-theme=\"dark\"] .an-edit-tool-card .an-edit-diff,\n[data-theme=\"dark\"] .an-edit-tool-card .an-edit-diff pre,\n[data-theme=\"dark\"] .an-edit-tool-card .an-edit-diff code {\n background-color: #000 !important;\n}\n\n/* Markdown Code Block */\n.an-markdown [data-streamdown=\"code-block\"] {\n padding: 0;\n border: 1px solid var(--an-border-color);\n border-radius: var(--an-tool-border-radius);\n background: transparent;\n gap: 0;\n}\n\n.an-markdown [data-streamdown=\"code-block-header\"] {\n padding: 0px 10px 0px 8px;\n height: auto;\n font-size: 12px;\n height: 28px;\n background: transparent;\n border-bottom: 1px solid var(--color-an-tool-border-color);\n background-color: var(--an-tool-background);\n position: relative;\n}\n\n.an-markdown div:has(> [data-streamdown=\"code-block-actions\"]) {\n position: absolute;\n height: auto;\n margin: 0;\n top: 0;\n right: 0;\n height: 28px;\n padding-right: 8px;\n}\n\n.an-markdown [data-streamdown=\"code-block-actions\"] {\n background: transparent;\n border: none;\n backdrop-filter: none;\n padding: 0;\n}\n\n.an-markdown [data-streamdown=\"code-block-actions\"] button > svg {\n width: 14px;\n height: 14px;\n}\n\n.an-markdown [data-streamdown=\"code-block-body\"] {\n margin: 0;\n padding-top: 8px;\n padding-bottom: 8px;\n background: transparent;\n border: transparent;\n overflow-x: auto;\n}\n\n.an-markdown [data-streamdown=\"code-block\"] pre,\n.an-markdown [data-streamdown=\"code-block\"] code {\n font-size: 12px;\n background: transparent;\n}\n", "type": "registry:style", "target": "components/agent-elements/agent-ui.css" } ], "css": { "@import \"../components/agent-elements/agent-ui.css\"": "" } }