{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-chat-panel",
  "type": "registry:component",
  "title": "Chat panel",
  "description": "The whole family working together: a message, a pause, a streamed reply.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/chat-panel.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/chat-panel.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { ArrowUpIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, inkButton, paper } from \"./surfaces\";\n\nexport function ChatPanel({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"chat-panel\"\n      className={cn(\n        paper,\n        \"flex h-[270px] w-full max-w-md flex-col overflow-hidden rounded-[24px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ChatPanelMessages({\n  className,\n  ...props\n}: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"chat-panel-messages\"\n      className={cn(\n        \"flex flex-1 flex-col justify-end gap-2.5 overflow-y-auto p-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ChatPanelUserMessage({\n  className,\n  ...props\n}: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"chat-panel-user-message\"\n      className={cn(\n        field,\n        \"fade-in slide-in-from-bottom-1 animate-in self-end rounded-2xl px-3 py-1.5 text-xs duration-300\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ChatPanelAssistantMessage({\n  className,\n  ...props\n}: ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"chat-panel-assistant-message\"\n      className={cn(\n        \"text-foreground/70 max-w-[85%] self-start text-xs leading-relaxed\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ChatPanelTyping({\n  className,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\">) {\n  return (\n    <div\n      data-slot=\"chat-panel-typing\"\n      className={cn(\n        \"fade-in animate-in flex gap-1 self-start px-1 duration-300\",\n        className,\n      )}\n      {...props}\n    >\n      {[\"-0.32s\", \"-0.16s\", \"0s\"].map((delay) => (\n        <span\n          key={delay}\n          aria-hidden\n          className=\"bg-foreground/40 size-1 animate-bounce rounded-full motion-reduce:animate-none\"\n          style={{ animationDelay: delay, animationDuration: \"1.1s\" }}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function ChatPanelComposer({\n  placeholder,\n  onSend,\n  className,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\" | \"placeholder\"> & {\n  placeholder: string;\n  onSend?: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"chat-panel-composer\"\n      className={cn(\n        field,\n        \"mx-3 mb-3 flex h-10 shrink-0 items-center justify-between rounded-full py-1.5 ps-4 pe-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-foreground/35 text-[13px]\">{placeholder}</span>\n      <button\n        type=\"button\"\n        aria-label=\"Send\"\n        onClick={onSend}\n        disabled={!onSend}\n        className={cn(\n          inkButton,\n          \"flex size-7 items-center justify-center rounded-full disabled:pointer-events-none disabled:opacity-30\",\n        )}\n      >\n        <ArrowUpIcon className=\"size-3.5\" />\n      </button>\n    </div>\n  );\n}\n"
    }
  ]
}