{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-message",
  "title": "Chat message",
  "description": "one turn · user = bubble on the right, assistant = plain text on the left",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "components/kit/chat-message.tsx",
      "content": "import { BotIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport type * as React from 'react';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\n\ntype Props = {\n  role: 'user' | 'assistant';\n  /** Text, StreamingText, a ToolCallCard, an ApprovalCard: anything the turn contains. */\n  children: React.ReactNode;\n  /** Shown for the user's avatar. */\n  initials?: string;\n  className?: string;\n};\n\n/**\n * One turn in a conversation. The user's turn is a bubble on the right; the assistant's is plain text on\n * the left, so long answers read like a document, not a chat bubble.\n */\nexport function ChatMessage({ role, children, initials = 'You', className }: Props) {\n  const user = role === 'user';\n  return (\n    <div className={cn('flex gap-3', user && 'flex-row-reverse', className)}>\n      <Avatar className=\"size-8 shrink-0\">\n        <AvatarFallback className={cn('text-xs', !user && 'bg-primary text-primary-foreground')}>\n          {user ? initials.slice(0, 2) : <BotIcon className=\"size-4\" aria-label=\"Assistant\" />}\n        </AvatarFallback>\n      </Avatar>\n      <div\n        className={cn(\n          'flex min-w-0 flex-col gap-3 leading-7',\n          user ? 'bg-muted max-w-[80%] rounded-2xl rounded-tr-sm px-4 py-2.5' : 'flex-1 pt-1'\n        )}>\n        {children}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/chat-message.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ChatMessage"
    ],
    "api": "<ChatMessage role=\"user|assistant\" initials?>{content}</ChatMessage>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}