{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-layout",
  "type": "registry:component",
  "title": "ChatLayout",
  "description": "Layout primitives for full chat threads, turns, and thoughts.",
  "dependencies": [],
  "registryDependencies": [
    "http://127.0.0.1:3000/r/activity.json",
    "http://127.0.0.1:3000/r/core.json",
    "http://127.0.0.1:3000/r/scroll-area.json"
  ],
  "files": [
    {
      "path": "src/registry/sources/control-ui/chat-layout.tsx",
      "target": "@components/control-ui/chat-layout.tsx",
      "type": "registry:component",
      "content": "import type { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { Activity, ActivityContent, ActivityTitle, ActivityTrigger } from \"@/components/control-ui/activity\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { skinAdornment, skinSlot } from \"@/components/control-ui/skin\";\nimport { ScrollArea } from \"@/components/control-ui/ui/scroll-area\";\n\ntype ChatThoughtCollapsible = {\n  Root: ElementType;\n  Trigger: ElementType;\n  Content: ElementType;\n};\n\nexport type ChatLayoutProps = ComponentProps<\"section\">;\n\nexport function ChatLayout({ children, className, ...props }: ChatLayoutProps) {\n  return (\n    <section\n      data-control-ui=\"chat-layout\"\n      data-slot=\"root\"\n      data-surface=\"panel\"\n      className={cn(\n        // border carries definition when flat skin collapses --shadow-size to 0\n        \"relative mx-auto flex min-h-[640px] w-full max-w-3xl flex-col overflow-hidden rounded-scene border bg-background shadow-md\",\n        skinSlot(\"chat-layout\", \"root\", {}),\n        className,\n      )}\n      {...props}\n    >\n      {skinAdornment(\"chat-layout\", \"titlebar\", {})}\n      {children}\n    </section>\n  );\n}\n\nexport type ChatThreadProps = ComponentProps<\"div\">;\n\nexport function ChatThread({ children, className, ...props }: ChatThreadProps) {\n  return (\n    <div\n      data-control-ui=\"chat-thread\"\n      data-slot=\"root\"\n      className={cn(\"flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto px-4 py-6 sm:px-8\", skinSlot(\"chat-thread\", \"root\", {}), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ChatTurnProps = ComponentProps<\"section\"> & {\n  from: \"user\" | \"assistant\";\n};\n\nexport function ChatTurn({ from, children, className, ...props }: ChatTurnProps) {\n  return (\n    <section\n      data-control-ui=\"chat-turn\"\n      data-slot=\"root\"\n      data-from={from}\n      className={cn(\"group/turn flex w-full flex-col\", from === \"user\" && \"items-end\", className)}\n      {...props}\n    >\n      {children}\n    </section>\n  );\n}\n\nexport type ChatThoughtProps = ComponentProps<\"div\"> & {\n  details?: ReactNode;\n  defaultOpen?: boolean;\n  collapsible?: ChatThoughtCollapsible;\n};\n\nexport function ChatThought({\n  children = \"Thought for a couple of seconds\",\n  details = \"Read the attachment, grouped the notes by intent, and kept the final markdown compact enough to scan.\",\n  defaultOpen = false,\n  collapsible,\n  className,\n  ...props\n}: ChatThoughtProps) {\n  if (collapsible) {\n    const Root = collapsible.Root;\n    const Trigger = collapsible.Trigger;\n    const Content = collapsible.Content;\n\n    return (\n      <Root\n        defaultOpen={defaultOpen}\n        data-control-ui=\"chat-thought\"\n        data-slot=\"root\"\n        className={cn(\"mb-2 self-start\", skinSlot(\"chat-thought\", \"root\", {}), className)}\n        {...props}\n      >\n        <Trigger\n          type=\"button\"\n          data-control-ui=\"chat-thought\"\n          data-slot=\"trigger\"\n          className=\"inline-flex items-center gap-1 rounded-[var(--radius-control)] px-1.5 py-1 text-caption font-medium text-muted-foreground transition hover:bg-foreground/4 hover:text-foreground [&[data-state=open]>span:last-child]:rotate-90\"\n        >\n          {children}\n          <span\n            aria-hidden=\"true\"\n            className=\"text-sm leading-none transition-transform duration-[var(--duration-base)] ease-[var(--ease-emphasized)]\"\n          >\n            ›\n          </span>\n        </Trigger>\n        <Content>\n          <ScrollArea\n            maxHeight=\"var(--activity-content-max-height, min(24rem, 50dvh))\"\n            lockAxis=\"x\"\n            viewportProps={{ \"data-control-ui\": \"activity\", \"data-slot\": \"content-viewport\" }}\n          >\n            <div\n              data-control-ui=\"chat-thought\"\n              data-slot=\"details\"\n              className={cn(\"min-w-0 px-1 pb-2 pt-1 text-caption leading-5 text-muted-foreground\", skinSlot(\"chat-thought\", \"details\", {}))}\n            >\n              {skinAdornment(\"chat-thought\", \"details\", {})}\n              {details}\n            </div>\n          </ScrollArea>\n        </Content>\n      </Root>\n    );\n  }\n\n  return (\n    <Activity\n      state=\"success\"\n      defaultOpen={defaultOpen}\n      data-control-ui=\"chat-thought\"\n      data-slot=\"root\"\n      className={cn(\"my-0 mb-2 self-start\", skinSlot(\"chat-thought\", \"root\", {}), className)}\n      {...props}\n    >\n      <ActivityTrigger\n        data-control-ui=\"chat-thought\"\n        data-slot=\"trigger\"\n        className=\"min-h-0 w-fit gap-1 px-1.5 py-1 text-caption font-medium\"\n      >\n        <ActivityTitle className=\"text-caption font-medium\">{children}</ActivityTitle>\n      </ActivityTrigger>\n      <ActivityContent\n        data-control-ui=\"chat-thought\"\n        data-slot=\"details\"\n        className={cn(\"text-caption leading-5 text-muted-foreground\", skinSlot(\"chat-thought\", \"details\", {}))}\n      >\n        {skinAdornment(\"chat-thought\", \"details\", {})}\n        {details}\n      </ActivityContent>\n    </Activity>\n  );\n}\n"
    }
  ],
  "meta": {}
}