# Message Bubble

- Page: <https://kznlabs.github.io/labsUI/components/chat>

## Message Bubble (`message-bubble`, component)

User/assistant chat bubbles with avatar slot, streaming dots and copyable code blocks.

- Install: `npx @kznlabs/labsui add message-bubble`
- Docs: <https://kznlabs.github.io/labsUI/components/chat>
- Brings: utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<MessageBubble>`: Chat bubble. Children are rich content: <p>, inline <code>, lists, <Code>.
  - `from: "user" | "assistant"`: Side and surface: "user" on the right in the accent, "assistant" on the left.
  - `avatar?: ReactNode`: Avatar slot, e.g. `<Avatar size="sm" />`.
  - `children?: ReactNode`: Message content: text, code, attachments.
  - `name?: string`: Sender shown above the bubble.
  - `streaming?: boolean`: Shows animated typing dots after the content.
  - `time?: string`: Time shown next to the name, e.g. "12:04".

### Usage

```tsx
<MessageBubble from="assistant" avatar={<Avatar … />} streaming>…<Code code={src} language="tsx" /></MessageBubble>
```

### Example: message.tsx

```tsx
import { Avatar } from "@/components/ui/avatar";
import { Code } from "@/components/ui/code";
import { MessageBubble } from "@/components/ui/message-bubble";
export function Reply({ code }: { code: string }) {
  return (
    <MessageBubble
      from="assistant"
      avatar={<Avatar size="sm" alt="Assistant" />}
      streaming
    >
      <p>Here is the component:</p>
      <Code code={code} language="tsx" />
    </MessageBubble>
  );
}
```