{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chain-of-thought",
  "registryDependencies": [
    "https://taki-ui.com/r/disclosure.json",
    "https://taki-ui.com/r/response.json",
    "https://taki-ui.com/r/shimmer.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ai-elements/chain-of-thought.tsx",
      "content": "\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport { createContext, memo, useContext, useMemo } from \"react\"\nimport {\n  BrainIcon,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  DotIcon,\n  type LucideIcon,\n} from \"lucide-react\"\nimport {\n  Button,\n  composeRenderProps,\n  DisclosureStateContext,\n} from \"react-aria-components\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Disclosure,\n  DisclosureHeader,\n  DisclosurePanel,\n} from \"@/registry/new-york/ui/disclosure\"\n\nimport { useControllableState } from \"../hooks/use-controllable-state\"\n\ntype ChainOfThoughtContextValue = {\n  isOpen: boolean\n  setIsOpen: (open: boolean) => void\n}\n\nconst ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(\n  null\n)\n\nconst useChainOfThought = () => {\n  const context = useContext(ChainOfThoughtContext)\n  if (!context) {\n    throw new Error(\n      \"ChainOfThought components must be used within ChainOfThought\"\n    )\n  }\n  return context\n}\n\nexport type ChainOfThoughtProps = ComponentProps<\"div\"> & {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n}\n\nexport const ChainOfThought = memo(\n  ({\n    className,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    children,\n    ...props\n  }: ChainOfThoughtProps) => {\n    const [isOpen, setIsOpen] = useControllableState({\n      value: open,\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n    })\n\n    const chainOfThoughtContext = useMemo(\n      () => ({ isOpen, setIsOpen }),\n      [isOpen, setIsOpen]\n    )\n\n    return (\n      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>\n        <Disclosure\n          className={cn(\"not-prose max-w-prose\", className)}\n          onExpandedChange={setIsOpen}\n          expanded={isOpen}\n          {...props}\n        >\n          {children}\n        </Disclosure>\n      </ChainOfThoughtContext.Provider>\n    )\n  }\n)\n\nexport type ChainOfThoughtHeaderProps = ComponentProps<typeof Button>\n\nexport const ChainOfThoughtHeader = memo(\n  ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {\n    const state = useContext(DisclosureStateContext)\n\n    return (\n      <Button\n        slot=\"trigger\"\n        className={cn(\n          \"text-muted-foreground group hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors\",\n          className\n        )}\n        {...props}\n      >\n        {composeRenderProps(children, (children) => (\n          <>\n            <div className=\"relative\">\n              <ChevronRightIcon\n                aria-hidden\n                className={cn(\n                  \"absolute top-0 left-0 size-4 transition-opacity group-hover:opacity-100\",\n                  state?.isExpanded ? \"rotate-90\" : \"opacity-0\"\n                )}\n              />\n              <BrainIcon\n                className={cn(\n                  \"size-4 transition-transform group-hover:scale-0\",\n                  state?.isExpanded ? \"scale-0\" : \"\"\n                )}\n              />\n            </div>\n            <span className=\"flex-1 text-left\">\n              {children ?? \"Chain of Thought\"}\n            </span>\n          </>\n        ))}\n      </Button>\n    )\n  }\n)\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n  icon?: LucideIcon\n  label: string\n  description?: string\n  status?: \"complete\" | \"active\" | \"pending\"\n}\n\nexport const ChainOfThoughtStep = memo(\n  ({\n    className,\n    icon: Icon = DotIcon,\n    label,\n    description,\n    status = \"complete\",\n    children,\n    ...props\n  }: ChainOfThoughtStepProps) => {\n    const statusStyles = {\n      complete: \"text-muted-foreground\",\n      active: \"text-foreground\",\n      pending: \"text-muted-foreground/50\",\n    }\n\n    return (\n      <div\n        className={cn(\n          \"flex gap-2 text-sm\",\n          statusStyles[status],\n          \"fade-in-0 slide-in-from-top-2 animate-in\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"relative mt-0.5\">\n          <Icon className=\"size-4\" />\n          <div className=\"bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px\" />\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          <div>{label}</div>\n          {description && (\n            <div className=\"text-muted-foreground text-xs\">{description}</div>\n          )}\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nexport type ChainOfThoughtSearchResultsProps = ComponentProps<\"div\">\n\nexport const ChainOfThoughtSearchResults = memo(\n  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props} />\n  )\n)\n\nexport type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>\n\nexport const ChainOfThoughtSearchResult = memo(\n  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (\n    <Badge\n      className={cn(\"gap-1 px-2 py-0.5 text-xs font-normal\", className)}\n      variant=\"secondary\"\n      {...props}\n    >\n      {children}\n    </Badge>\n  )\n)\n\nexport type ChainOfThoughtContentProps = ComponentProps<typeof DisclosurePanel>\n\nexport const ChainOfThoughtContent = memo(\n  ({ className, children, ...props }: ChainOfThoughtContentProps) => {\n    return (\n      <DisclosurePanel className={cn(\"mt-2 space-y-3\", className)} {...props}>\n        {children}\n      </DisclosurePanel>\n    )\n  }\n)\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"div\"> & {\n  caption?: string\n}\n\nexport const ChainOfThoughtImage = memo(\n  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (\n    <div className={cn(\"mt-2 space-y-2\", className)} {...props}>\n      <div className=\"bg-muted relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg p-3\">\n        {children}\n      </div>\n      {caption && <p className=\"text-muted-foreground text-xs\">{caption}</p>}\n    </div>\n  )\n)\n\nChainOfThought.displayName = \"ChainOfThought\"\nChainOfThoughtHeader.displayName = \"ChainOfThoughtHeader\"\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\"\nChainOfThoughtSearchResults.displayName = \"ChainOfThoughtSearchResults\"\nChainOfThoughtSearchResult.displayName = \"ChainOfThoughtSearchResult\"\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\"\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}