{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-thread",
  "type": "registry:ui",
  "title": "Chat thread",
  "description": "Scrolling chat thread for React that renders user, assistant and system messages as bubbles, auto scrolls to the newest one and uses a live log role.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/message-bubble.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/chat-thread.tsx",
      "type": "registry:ui",
      "target": "components/ui/chat-thread.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { MessageBubble } from \"@/components/ui/message-bubble\"\n\ntype Msg = {\n  id: string\n  role: \"user\" | \"assistant\" | \"system\"\n  content: React.ReactNode\n  streaming?: boolean\n}\n\nfunction ChatThread({\n  messages,\n  className,\n  empty,\n}: {\n  messages: Msg[]\n  className?: string\n  empty?: React.ReactNode\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  React.useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    el.scrollTop = el.scrollHeight\n  }, [messages])\n  return (\n    <div\n      ref={ref}\n      data-slot=\"chat-thread\"\n      role=\"log\"\n      aria-live=\"polite\"\n      className={cn(\"flex min-h-48 flex-col gap-3 overflow-y-auto\", className)}\n    >\n      {messages.length === 0 ? empty ?? (\n        <p className=\"py-10 text-center text-sm text-fg-muted\">No messages yet</p>\n      ) : (\n        messages.map((m) => (\n          <MessageBubble key={m.id} role={m.role} streaming={m.streaming}>\n            {m.content}\n          </MessageBubble>\n        ))\n      )}\n    </div>\n  )\n}\nexport { ChatThread }\n"
    }
  ]
}