# ChatMessageBubble

The chat bubble — a styled content container that reads `sender` from an ancestor `ChatMessage` to auto-style its background and text color. var-ui does zero markdown parsing; pass plain text or your own rendered tree as `children`.

## Examples

### Default

There is no `@var-ui/astro` ChatMessageBubble — Astro and HTML previews use the core bubble recipe (pass `sender` explicitly).

```tsx
import { ChatMessage, ChatMessageBubble } from '@var-ui/react';

<ChatMessage sender="assistant" name="Navi">
  <ChatMessageBubble group="first">First part of a multi-part reply.</ChatMessageBubble>
  <ChatMessageBubble group="last">Second part.</ChatMessageBubble>
</ChatMessage>
```

```astro
---
// No @var-ui/astro ChatMessageBubble — core recipe with group corners.
import { chatMessage, chatMessageBubble } from '@var-ui/core';

const m = chatMessage({ sender: 'assistant' });
const first = chatMessageBubble({ sender: 'assistant', variant: 'filled', group: 'first' });
const last = chatMessageBubble({ sender: 'assistant', variant: 'filled', group: 'last' });
---

<div class:list={[m.root]}>
  <div class:list={[m.content]}>
    <div class:list={[m.header]}><span class:list={[m.name]}>Navi</span></div>
    <div class:list={[first.root]}>First part of a multi-part reply.</div>
    <div class:list={[last.root]}>Second part.</div>
  </div>
</div>
```

```html
<div data-sender="assistant" class="var-ui-chat-message"><div data-sender="assistant" class="var-ui-chat-message__content"><div data-sender="assistant" class="var-ui-chat-message__header"><span data-sender="assistant" class="var-ui-chat-message__name">Navi</span></div><div data-sender="assistant" data-variant="filled" data-group="first" class="var-ui-chat-message-bubble">First part of a multi-part reply.</div><div data-sender="assistant" data-variant="filled" data-group="last" class="var-ui-chat-message-bubble">Second part.</div></div></div>
```

Use `group` when rendering several consecutive bubbles from the same sender, to tighten the corners between them.

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  | Bubble content — plain text or a consumer-rendered markdown tree. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| group | "middle" \| "first" \| "last" \| undefined | no |  | Position within a multi-bubble group from the same sender — tightens corners. |
| variant | "ghost" \| "filled" \| undefined | no | filled | Visual variant. `ghost` drops the background but keeps padding for alignment. |

## Accessibility

Content is rendered as-is — wire your own markdown renderer with accessible semantics if needed.