{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "question-tool",
  "type": "registry:ui",
  "dependencies": [
    "@tabler/icons-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/agent-elements/components/question/question-tool.tsx",
      "content": "import { useEffect, useMemo, useState } from \"react\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMessageCircleQuestion,\n} from \"@tabler/icons-react\";\nimport { QuestionPrompt } from \"./question-prompt\";\nimport type { QuestionAnswer, QuestionConfig } from \"./question-prompt\";\n\nexport type QuestionToolPart = {\n  type: string;\n  toolCallId?: string;\n  state?: string;\n  input?: {\n    questions: QuestionConfig[];\n    questionIndex?: number;\n    totalQuestions?: number;\n    onPreviousQuestion?: () => void;\n    onNextQuestion?: () => void;\n    submitLabel?: string;\n    nextLabel?: string;\n    skipLabel?: string;\n    allowSkip?: boolean;\n    onSubmitAnswer?: (answer: QuestionAnswer) => void;\n  };\n  output?: {\n    answer?: QuestionAnswer;\n  };\n};\n\nexport type QuestionToolProps = {\n  part: QuestionToolPart;\n  chatStatus?: string;\n};\n\nfunction formatAnswer(answer: QuestionAnswer) {\n  if (answer.kind === \"skip\") return \"Skipped\";\n  if (answer.kind === \"text\") return answer.text || \"Answered\";\n  const ids = answer.selectedIds?.length ? answer.selectedIds.join(\", \") : \"\";\n  if (answer.text) return ids ? `${ids} (${answer.text})` : answer.text;\n  return ids || \"Answered\";\n}\n\nexport function QuestionTool({ part }: QuestionToolProps) {\n  const [localIndex, setLocalIndex] = useState(part.input?.questionIndex ?? 1);\n  const questions: QuestionConfig[] = part.input?.questions ?? [];\n  const totalQuestions = part.input?.totalQuestions ?? questions.length;\n  const isControlled = typeof part.input?.questionIndex === \"number\";\n  const questionIndex = isControlled\n    ? (part.input?.questionIndex ?? 1)\n    : questions.length > 0\n      ? localIndex\n      : (part.input?.questionIndex ?? 1);\n  const clampedIndex = Math.max(1, Math.min(questionIndex, totalQuestions));\n  const question = questions[clampedIndex - 1];\n  const [localAnswers, setLocalAnswers] = useState<\n    Record<number, QuestionAnswer>\n  >({});\n\n  useEffect(() => {\n    if (typeof part.input?.questionIndex === \"number\") {\n      setLocalIndex(part.input.questionIndex);\n    }\n  }, [part.input?.questionIndex]);\n\n  useEffect(() => {\n    setLocalAnswers({});\n    setLocalIndex(part.input?.questionIndex ?? 1);\n  }, [part.toolCallId]);\n\n  if (!question) return null;\n\n  const outputAnswer = part.output?.answer;\n  const answeredCount = Object.keys(localAnswers).length;\n  const isComplete =\n    totalQuestions === 1\n      ? !!outputAnswer || answeredCount >= 1\n      : totalQuestions > 0 && answeredCount >= totalQuestions;\n  const showNavigation = totalQuestions > 1 && !isComplete;\n  const canGoPrev = clampedIndex > 1;\n  const canGoNext = clampedIndex < totalQuestions;\n  const summaryAnswers = useMemo(() => {\n    if (!isComplete || totalQuestions <= 1) return [];\n    return Array.from({ length: totalQuestions }, (_, idx) => ({\n      index: idx + 1,\n      answer: localAnswers[idx + 1],\n    }));\n  }, [isComplete, localAnswers, totalQuestions]);\n  const summaryText = useMemo(() => {\n    if (!isComplete) return \"\";\n    if (summaryAnswers.length > 0) {\n      return summaryAnswers\n        .map(\n          (item) =>\n            `${item.index}: ${item.answer ? formatAnswer(item.answer) : \"Pending\"}`,\n        )\n        .join(\" • \");\n    }\n    if (outputAnswer) return formatAnswer(outputAnswer);\n    if (localAnswers[clampedIndex])\n      return formatAnswer(localAnswers[clampedIndex]);\n    return \"Pending\";\n  }, [isComplete, summaryAnswers, outputAnswer, localAnswers, clampedIndex]);\n\n  const goPrev = () => {\n    if (!canGoPrev) return;\n    part.input?.onPreviousQuestion?.();\n    if (!isControlled) {\n      setLocalIndex((prev) => Math.max(1, prev - 1));\n    }\n  };\n\n  const goNext = () => {\n    if (!canGoNext) return;\n    part.input?.onNextQuestion?.();\n    if (!isControlled) {\n      setLocalIndex((prev) => Math.min(totalQuestions, prev + 1));\n    }\n  };\n\n  return (\n    <div className=\"rounded-an-tool-border-radius border border-border bg-an-tool-background overflow-hidden\">\n      <div className=\"h-7 border-b border-border px-3 flex items-center justify-between text-xs text-an-tool-color-muted\">\n        <div className=\"inline-flex items-center gap-1.5\">\n          <IconMessageCircleQuestion className=\"w-3.5 h-3.5\" />\n          Question\n        </div>\n        {showNavigation && (\n          <div className=\"inline-flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={goPrev}\n              disabled={!canGoPrev}\n              className=\"size-5 inline-flex items-center justify-center rounded-[4px] hover:bg-an-background-secondary disabled:opacity-40\"\n              aria-label=\"Previous question\"\n            >\n              <IconChevronUp className=\"w-3.5 h-3.5\" />\n            </button>\n            <span>\n              {clampedIndex} of {totalQuestions}\n            </span>\n            <button\n              type=\"button\"\n              onClick={goNext}\n              disabled={!canGoNext}\n              className=\"size-5 inline-flex items-center justify-center rounded-[4px] hover:bg-an-background-secondary disabled:opacity-40\"\n              aria-label=\"Next question\"\n            >\n              <IconChevronDown className=\"w-3.5 h-3.5\" />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {isComplete ? (\n        <div className=\"px-3 py-2 text-xs text-an-tool-color-muted bg-background\">\n          {summaryText}\n        </div>\n      ) : (\n        <QuestionPrompt\n          key={`${clampedIndex}-${question.title}`}\n          questions={questions}\n          questionIndex={clampedIndex}\n          totalQuestions={totalQuestions}\n          initialAnswer={localAnswers[clampedIndex]}\n          submitLabel={part.input?.submitLabel}\n          nextLabel={part.input?.nextLabel}\n          skipLabel={part.input?.skipLabel}\n          allowSkip={part.input?.allowSkip}\n          onSubmit={(nextAnswer) => {\n            setLocalAnswers((prev) => ({\n              ...prev,\n              [clampedIndex]: nextAnswer,\n            }));\n            part.input?.onSubmitAnswer?.(nextAnswer);\n            if (clampedIndex < totalQuestions) {\n              goNext();\n            }\n          }}\n        />\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/agent-elements/question/question-tool.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/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/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\"": ""
  }
}