{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "model-picker",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react",
    "ai",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://agent-elements.21st.dev/r/suggestions.json"
  ],
  "files": [
    {
      "path": "registry/agent-elements/components/input/model-picker.tsx",
      "content": "\"use client\";\n\nimport { memo, useCallback, useState } from \"react\";\nimport { IconCheck, IconChevronDown } from \"@tabler/icons-react\";\nimport type { ModelOption } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { Popover } from \"./popover\";\n\nexport type ModelPickerProps = {\n  models: ModelOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (modelId: string) => void;\n  placeholder?: string;\n  className?: string;\n};\n\nexport const ModelPicker = memo(function ModelPicker({\n  models,\n  value,\n  defaultValue,\n  onChange,\n  placeholder = \"Auto\",\n  className,\n}: ModelPickerProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const activeId = isControlled ? value : internalValue;\n  const activeModel = models.find((m) => m.id === activeId) ?? models[0];\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = useCallback(\n    (id: string) => {\n      if (!isControlled) setInternalValue(id);\n      onChange?.(id);\n      setOpen(false);\n    },\n    [isControlled, onChange],\n  );\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={setOpen}\n      side=\"top\"\n      align=\"start\"\n      trigger={\n        <button\n          type=\"button\"\n          className={cn(\n            \"inline-flex h-7 items-center gap-1 rounded-[6px] px-2 text-[12px] leading-4 text-foreground/40 transition-colors hover:bg-foreground/6 cursor-pointer\",\n            className,\n          )}\n          aria-label=\"Select model\"\n        >\n          <span className=\"font-medium\">\n            {activeModel?.name ?? placeholder}\n          </span>\n          {activeModel?.version && (\n            <span className=\"font-normal text-foreground/25\">\n              {activeModel.version}\n            </span>\n          )}\n          <IconChevronDown className=\"size-3 text-foreground/40\" />\n        </button>\n      }\n    >\n      {models.map((model) => {\n        const isActive = model.id === activeModel?.id;\n        return (\n          <button\n            key={model.id}\n            type=\"button\"\n            onClick={() => handleSelect(model.id)}\n            className={cn(\n              \"flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[12px] leading-4 text-an-foreground transition-colors hover:bg-foreground/6 cursor-pointer\",\n              isActive && \"bg-foreground/6\",\n            )}\n          >\n            <span className=\"flex-1 truncate\">\n              {model.name}\n              {model.version && (\n                <span className=\"ml-1 text-foreground/40\">{model.version}</span>\n              )}\n            </span>\n            {isActive && (\n              <IconCheck className=\"size-3.5 shrink-0 text-foreground/60\" />\n            )}\n          </button>\n        );\n      })}\n    </Popover>\n  );\n});\n\nexport type ModelBadgeProps = {\n  models: ModelOption[];\n  value?: string;\n  placeholder?: string;\n  className?: string;\n};\n\nexport const ModelBadge = memo(function ModelBadge({\n  models,\n  value,\n  placeholder = \"Auto\",\n  className,\n}: ModelBadgeProps) {\n  const activeModel = models.find((m) => m.id === value) ?? models[0];\n  return (\n    <div\n      className={cn(\n        \"inline-flex h-7 items-center px-2 text-[12px] leading-4 text-foreground/30\",\n        className,\n      )}\n    >\n      <span className=\"font-medium\">{activeModel?.name ?? placeholder}</span>\n      {activeModel?.version && (\n        <span className=\"ml-0.5 font-normal text-foreground/20\">\n          {activeModel.version}\n        </span>\n      )}\n    </div>\n  );\n});\n",
      "type": "registry:ui",
      "target": "components/agent-elements/input/model-picker.tsx"
    },
    {
      "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<string, string>;\n  light: Record<string, string>;\n  dark: Record<string, string>;\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<string>;\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<string, unknown>;\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<CustomToolRendererProps>\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 <AgentChat> 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<ChatClassNames>;\n  slots?: Partial<ChatSlots>;\n  toolRenderers?: Record<string, React.ComponentType<CustomToolRendererProps>>;\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/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/components/input/popover.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { cn } from \"../utils/cn\";\n\nexport type PopoverSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport type PopoverProps = {\n  trigger: ReactNode;\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  side?: PopoverSide;\n  align?: PopoverAlign;\n  sideOffset?: number;\n  className?: string;\n};\n\nexport function Popover({\n  trigger,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"start\",\n  sideOffset = 6,\n  className,\n}: PopoverProps) {\n  return (\n    <BasePopover.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange ? (next) => onOpenChange(next) : undefined}\n    >\n      <BasePopover.Trigger\n        render={(props) => (\n          <span {...props} className=\"inline-flex\">\n            {trigger}\n          </span>\n        )}\n      />\n      <BasePopover.Portal>\n        <BasePopover.Positioner side={side} align={align} sideOffset={sideOffset}>\n          <BasePopover.Popup\n            className={cn(\n              \"min-w-[180px] rounded-[10px] border border-an-border-color bg-an-background p-1 shadow-lg outline-none\",\n              \"text-an-foreground\",\n              className,\n            )}\n          >\n            {children}\n          </BasePopover.Popup>\n        </BasePopover.Positioner>\n      </BasePopover.Portal>\n    </BasePopover.Root>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/agent-elements/input/popover.tsx"
    },
    {
      "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<string[]>([]);\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    <div className={cn(\"px-3 py-2 space-y-2 bg-background\", className)}>\n      <div\n        className=\"flex items-center justify-between gap-px\"\n        data-total-questions={resolvedTotal}\n      >\n        <div className=\"flex items-center gap-2 text-sm text-an-tool-color\">\n          <span className=\"h-5 min-w-5 px-1 rounded-[4px] inline-flex items-center justify-center text-sm font-medium text-an-tool-color-muted\">\n            {clampedIndex}\n          </span>\n          <span>{activeQuestion.title}</span>\n        </div>\n      </div>\n\n      {activeQuestion.kind !== \"text\" &&\n        (activeQuestion.options?.length ?? 0) > 0 && (\n          <div className=\"space-y-px\">\n            {activeQuestion.options!.map((option, idx) => {\n              const checked = selectedIds.includes(option.id);\n              return (\n                <button\n                  key={option.id}\n                  type=\"button\"\n                  onClick={() => {\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                  <span\n                    className={cn(\n                      \"h-5 min-w-5 px-1 rounded-[4px] inline-flex items-center justify-center text-sm font-medium border\",\n                      checked\n                        ? \"bg-an-primary-color text-an-send-button-color border-an-primary-color\"\n                        : \"bg-transparent text-an-tool-color-muted border-border\",\n                    )}\n                  >\n                    {optionBadge(idx)}\n                  </span>\n                  <span className=\"text-sm text-an-tool-color\">\n                    {option.label}\n                    {option.description && (\n                      <span className=\"text-an-tool-color-muted\">\n                        {\" \"}\n                        {option.description}\n                      </span>\n                    )}\n                  </span>\n                </button>\n              );\n            })}\n\n            {customEnabled && (\n              <div className=\"pt-1 flex items-center gap-2\">\n                <span\n                  className={cn(\n                    \"h-5 min-w-5 px-1 rounded-[4px] inline-flex items-center justify-center text-sm font-medium border\",\n                    selectedIds.includes(QUESTION_CUSTOM_ID)\n                      ? \"bg-an-primary-color text-an-send-button-color border-an-primary-color\"\n                      : \"bg-transparent text-an-tool-color-muted border-border\",\n                  )}\n                >\n                  {optionBadge(activeQuestion.options!.length)}\n                </span>\n                <input\n                  value={customText}\n                  onChange={(event) =>\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              </div>\n            )}\n          </div>\n        )}\n\n      {activeQuestion.kind === \"text\" && (\n        <textarea\n          value={textValue}\n          onChange={(event) => 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      <div\n        className={cn(\n          \"flex items-center gap-1.5\",\n          showNav ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {showNav && (\n          <div className=\"flex items-center gap-1.5\">\n            {onPreviousQuestion && (\n              <button\n                type=\"button\"\n                onClick={onPreviousQuestion}\n                disabled={!canGoPrev}\n                className=\"h-6 px-2 rounded-[4px] text-sm text-muted-foreground hover:text-an-tool-color disabled:opacity-60\"\n              >\n                Previous\n              </button>\n            )}\n            {onNextQuestion && (\n              <button\n                type=\"button\"\n                onClick={onNextQuestion}\n                disabled={!canGoNext}\n                className=\"h-6 px-2 rounded-[4px] text-sm text-muted-foreground hover:text-an-tool-color disabled:opacity-60\"\n              >\n                Next\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex items-center justify-end gap-1.5\">\n          {allowSkip && (\n            <button\n              type=\"button\"\n              onClick={handleSkip}\n              className=\"h-6 px-2 rounded-[4px] text-sm text-muted-foreground hover:text-an-tool-color hover:bg-muted/50 active:scale-[0.98] transition-[background-color,color,transform] duration-150\"\n            >\n              {skipLabel}\n            </button>\n          )}\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={!canSubmit}\n            className=\"h-6 px-2.5 rounded-[4px] text-sm font-medium bg-an-primary-color text-an-send-button-color hover:bg-an-primary-color/90 active:scale-[0.98] transition-[background-color,transform] duration-150 disabled:opacity-60 disabled:hover:bg-an-primary-color disabled:active:scale-100\"\n          >\n            {primaryLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/agent-elements/question/question-prompt.tsx"
    },
    {
      "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\"": ""
  }
}