{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-reasoning",
  "type": "registry:component",
  "title": "Chat Reasoning",
  "description": "A chat reasoning component for a nice chatbot experience. Ready for useChat().",
  "dependencies": [
    "ai"
  ],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/chat-reasoning/chat-reasoning.tsx",
      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { UIDataTypes, UIMessagePart, UITools } from \"ai\";\nimport React from \"react\";\n\nexport default function ChatReasoning({\n  partsInAccordion,\n  defaultValue,\n  renderMessagePart,\n  className,\n}: {\n  partsInAccordion: UIMessagePart<UIDataTypes, UITools>[];\n  defaultValue?: string;\n  renderMessagePart: (\n    part: UIMessagePart<UIDataTypes, UITools>,\n    key: string | number\n  ) => React.ReactNode;\n  className?: string;\n}) {\n  const [value, setValue] = React.useState<string | undefined>(defaultValue);\n\n  React.useEffect(() => {\n    setValue(defaultValue);\n  }, [defaultValue]);\n\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      value={value}\n      onValueChange={setValue}\n      className={cn(\"w-full\", className)}\n    >\n      <AccordionItem value=\"reasoning\" className=\"w-full\">\n        <AccordionTrigger className=\"text-md text-muted-foreground hover:no-underline hover:opacity-70 py-2 w-full\">\n          {defaultValue === \"reasoning\" ? \"Reasoning...\" : `Done reasoning.`}\n        </AccordionTrigger>\n        <AccordionContent className=\"p-0 -mt-1\">\n          <div className=\"flex flex-col gap-0\">\n            {partsInAccordion.map(\n              (part, index) =>\n                part.type !== \"step-start\" && (\n                  <div key={index} className=\"flex gap-2 pl-2\">\n                    <div className=\"flex flex-col items-center gap-1 pt-2 -mb-1\">\n                      <div className=\"w-2 h-2 bg-muted-foreground/50 rounded-full\" />\n                      <div\n                        className={cn(\n                          \"w-0.5 min-h-0 flex-1 bg-border rounded-full\",\n                          index === partsInAccordion.length - 1 &&\n                            \"bg-gradient-to-b from-border to-transparent\"\n                        )}\n                      />\n                    </div>\n                    <div className=\"flex-1\">{renderMessagePart(part, `accordion-${index}`)}</div>\n                  </div>\n                )\n            )}\n          </div>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/chat-reasoning.tsx"
    }
  ]
}