{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reasoning",
  "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/reasoning.tsx",
      "content": "\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport { createContext, memo, useContext, useEffect, useState } from \"react\"\nimport { BrainIcon, ChevronDownIcon } from \"lucide-react\"\nimport { Button } from \"react-aria-components\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Disclosure, DisclosurePanel } from \"@/registry/new-york/ui/disclosure\"\n\nimport { useControllableState } from \"../hooks/use-controllable-state\"\nimport { Response } from \"./response\"\nimport { Shimmer } from \"./shimmer\"\n\ntype ReasoningContextValue = {\n  isStreaming: boolean\n  isOpen: boolean\n  setIsOpen: (open: boolean) => void\n  duration: number\n}\n\nconst ReasoningContext = createContext<ReasoningContextValue | null>(null)\n\nconst useReasoning = () => {\n  const context = useContext(ReasoningContext)\n  if (!context) {\n    throw new Error(\"Reasoning components must be used within Reasoning\")\n  }\n  return context\n}\n\nexport type ReasoningProps = ComponentProps<typeof Disclosure> & {\n  isStreaming?: boolean\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  duration?: number\n}\n\nconst AUTO_CLOSE_DELAY = 1000\nconst MS_IN_S = 1000\n\nexport const Reasoning = memo(\n  ({\n    className,\n    isStreaming = false,\n    open,\n    defaultOpen = true,\n    onOpenChange,\n    duration: durationProp,\n    children,\n    ...props\n  }: ReasoningProps) => {\n    const [isOpen, setIsOpen] = useControllableState({\n      prop: open,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n    })\n    const [duration, setDuration] = useControllableState({\n      prop: durationProp,\n      defaultProp: 0,\n    })\n\n    const [hasAutoClosed, setHasAutoClosed] = useState(false)\n    const [startTime, setStartTime] = useState<number | null>(null)\n\n    // Track duration when streaming starts and ends\n    useEffect(() => {\n      if (isStreaming) {\n        if (startTime === null) {\n          setStartTime(Date.now())\n        }\n      } else if (startTime !== null) {\n        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S))\n        setStartTime(null)\n      }\n    }, [isStreaming, startTime, setDuration])\n\n    // Auto-open when streaming starts, auto-close when streaming ends (once only)\n    useEffect(() => {\n      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {\n        // Add a small delay before closing to allow user to see the content\n        const timer = setTimeout(() => {\n          setIsOpen(false)\n          setHasAutoClosed(true)\n        }, AUTO_CLOSE_DELAY)\n\n        return () => clearTimeout(timer)\n      }\n    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed])\n\n    const handleOpenChange = (newOpen: boolean) => {\n      setIsOpen(newOpen)\n    }\n\n    return (\n      <ReasoningContext.Provider\n        value={{ isStreaming, isOpen: isOpen ?? false, setIsOpen, duration }}\n      >\n        <Disclosure\n          className={cn(\"not-prose mb-4\", className)}\n          onExpandedChange={handleOpenChange}\n          isExpanded={isOpen}\n          {...props}\n        >\n          {children}\n        </Disclosure>\n      </ReasoningContext.Provider>\n    )\n  }\n)\n\nexport type ReasoningTriggerProps = ComponentProps<typeof Button>\n\nconst getThinkingMessage = (isStreaming: boolean, duration?: number) => {\n  if (isStreaming || duration === 0) {\n    return <Shimmer duration={1}>Thinking...</Shimmer>\n  }\n\n  if (duration === undefined) {\n    return <p>Thought for a few seconds</p>\n  }\n  return <p>Thought for {duration} seconds</p>\n}\n\nexport const ReasoningTrigger = memo(\n  ({ className, children, ...props }: ReasoningTriggerProps) => {\n    const { isStreaming, isOpen, duration } = useReasoning()\n\n    return (\n      <Button\n        slot=\"trigger\"\n        className={cn(\n          \"text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors\",\n          className\n        )}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <BrainIcon className=\"size-4\" />\n            {getThinkingMessage(isStreaming, duration)}\n            <ChevronDownIcon\n              className={cn(\n                \"size-4 transition-transform\",\n                isOpen ? \"rotate-180\" : \"rotate-0\"\n              )}\n            />\n          </>\n        )}\n      </Button>\n    )\n  }\n)\n\nexport type ReasoningContentProps = ComponentProps<typeof DisclosurePanel> & {\n  children: string\n}\n\nexport const ReasoningContent = memo(\n  ({ className, children, ...props }: ReasoningContentProps) => (\n    <DisclosurePanel\n      className={cn(\n        \"mt-4 text-sm\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none\",\n        className\n      )}\n      {...props}\n    >\n      <Response className=\"grid gap-2\">{children}</Response>\n    </DisclosurePanel>\n  )\n)\n\nReasoning.displayName = \"Reasoning\"\nReasoningTrigger.displayName = \"ReasoningTrigger\"\nReasoningContent.displayName = \"ReasoningContent\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}