{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-reasoning",
  "title": "AI: Reasoning",
  "description": "A collapsible reasoning panel that auto-opens while thinking and tracks duration.",
  "dependencies": [
    "@untitledui/icons@^0.0.22",
    "streamdown@^2.5.0"
  ],
  "registryDependencies": [
    "@nx-ui/utils",
    "@nx-ui/collapsible",
    "@nx-ui/ai-shimmer",
    "@nx-ui/ai-use-controllable-state"
  ],
  "files": [
    {
      "path": "components/ai/reasoning.tsx",
      "content": "\"use client\"\n\nimport {\n  type ComponentProps,\n  type ReactNode,\n  createContext,\n  memo,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\"\nimport { ChevronDown, Stars01 } from \"@untitledui/icons\"\nimport { Streamdown } from \"streamdown\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { cn } from \"@/lib/utils\"\n\nimport { Shimmer } from \"./shimmer\"\nimport { useControllableState } from \"./use-controllable-state\"\n\ntype ReasoningContextValue = {\n  isStreaming: boolean\n  isOpen: boolean\n  setIsOpen: (open: boolean) => void\n  duration: number | undefined\n}\n\nconst ReasoningContext = createContext<ReasoningContextValue | null>(null)\n\nexport const 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 Collapsible> & {\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<number | undefined>({\n      prop: durationProp,\n      defaultProp: undefined,\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={{\n          isStreaming,\n          isOpen: isOpen ?? false,\n          setIsOpen,\n          duration,\n        }}\n      >\n        <Collapsible\n          className={cn(\"not-prose mb-4\", className)}\n          onOpenChange={handleOpenChange}\n          open={isOpen}\n          {...props}\n        >\n          {children}\n        </Collapsible>\n      </ReasoningContext.Provider>\n    )\n  }\n)\n\nexport type ReasoningTriggerProps = ComponentProps<\n  typeof CollapsibleTrigger\n> & {\n  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode\n}\n\nconst defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {\n  if (isStreaming || duration === 0) {\n    return <Shimmer duration={1}>Thinking...</Shimmer>\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  ({\n    className,\n    children,\n    getThinkingMessage = defaultGetThinkingMessage,\n    ...props\n  }: ReasoningTriggerProps) => {\n    const { isStreaming, isOpen, duration } = useReasoning()\n\n    return (\n      <CollapsibleTrigger\n        className={cn(\n          \"flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <Stars01 className=\"size-4\" />\n            {getThinkingMessage(isStreaming, duration)}\n            <ChevronDown\n              className={cn(\n                \"size-4 transition-transform\",\n                isOpen ? \"rotate-180\" : \"rotate-0\"\n              )}\n            />\n          </>\n        )}\n      </CollapsibleTrigger>\n    )\n  }\n)\n\nexport type ReasoningContentProps = ComponentProps<\n  typeof CollapsibleContent\n> & {\n  children: string\n}\n\nexport const ReasoningContent = memo(\n  ({ className, children, ...props }: ReasoningContentProps) => (\n    <CollapsibleContent\n      className={cn(\n        \"mt-4 text-sm\",\n        \"data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-muted-foreground outline-none data-closed:animate-out data-open:animate-in\",\n        className\n      )}\n      {...props}\n    >\n      <Streamdown>{children}</Streamdown>\n    </CollapsibleContent>\n  )\n)\n\nReasoning.displayName = \"Reasoning\"\nReasoningTrigger.displayName = \"ReasoningTrigger\"\nReasoningContent.displayName = \"ReasoningContent\"\n",
      "type": "registry:ui",
      "target": "components/ai/reasoning.tsx"
    }
  ],
  "type": "registry:ui"
}