{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "thinking-block",
  "type": "registry:component",
  "title": "Thinking Block",
  "description": "Collapsible block showing AI thinking/reasoning with streaming support.",
  "dependencies": [
    "@vllnt/ui@^0.2.1",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/thinking-block/thinking-block.tsx",
      "content": "\"use client\";\n\nimport { useCallback, useEffect, useId, useState } from \"react\";\n\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type ThinkingBlockProps = {\n  className?: string;\n  /** Whether the content is still streaming. */\n  isStreaming?: boolean;\n  /** The thinking text content to display. */\n  thinking: string;\n};\n\n/** Collapsible thinking block with streaming support. */\nexport function ThinkingBlock({\n  className,\n  isStreaming = false,\n  thinking,\n}: ThinkingBlockProps) {\n  const [isExpanded, setIsExpanded] = useState(isStreaming);\n  const contentId = useId();\n\n  // Auto-open when streaming starts\n  useEffect(() => {\n    if (isStreaming) {\n      requestAnimationFrame(() => {\n        setIsExpanded(true);\n      });\n    }\n  }, [isStreaming]);\n\n  const toggleExpanded = useCallback(() => {\n    setIsExpanded((previous) => !previous);\n  }, []);\n\n  return (\n    <div className={cn(\"mb-2\", className)}>\n      <button\n        aria-controls={contentId}\n        aria-expanded={isExpanded}\n        className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors\"\n        onClick={toggleExpanded}\n        type=\"button\"\n      >\n        {isExpanded ? (\n          <ChevronDown className=\"size-3\" />\n        ) : (\n          <ChevronRight className=\"size-3\" />\n        )}\n        <span>\n          Thinking\n          {isStreaming ? <span className=\"ml-1 animate-pulse\">...</span> : null}\n        </span>\n      </button>\n      {isExpanded ? (\n        <div\n          className=\"mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto\"\n          id={contentId}\n        >\n          {thinking}\n          {isStreaming ? <span className=\"animate-pulse\">|</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}