# ChatMessageList

Presentational container for chat messages — a `role="log"` / `aria-live="polite"` region with density-based spacing.

## Examples

### Default

There is no `@var-ui/astro` ChatMessageList — Astro and HTML previews use the core recipe log markup.

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

<ChatMessageList>
  <ChatMessage sender="assistant">
    <ChatMessageBubble>Hello! How can I help?</ChatMessageBubble>
  </ChatMessage>
  <ChatMessage sender="user">
    <ChatMessageBubble>What components ship in var-ui?</ChatMessageBubble>
  </ChatMessage>
</ChatMessageList>
```

```astro
---
// No @var-ui/astro ChatMessageList — core recipe log region.
import { chatMessage, chatMessageBubble, chatMessageList } from '@var-ui/core';

const l = chatMessageList({ density: 'balanced' });
const assistant = chatMessage({ sender: 'assistant' });
const user = chatMessage({ sender: 'user' });
const assistantBubble = chatMessageBubble({ sender: 'assistant', variant: 'filled', group: 'none' });
const userBubble = chatMessageBubble({ sender: 'user', variant: 'filled', group: 'none' });
---

<div class:list={[l.root]} role="log" aria-live="polite">
  <div class:list={[l.inner]}>
    <div class:list={[assistant.root]}>
      <div class:list={[assistant.content]}>
        <div class:list={[assistantBubble.root]}>Hello! How can I help?</div>
      </div>
    </div>
    <div class:list={[user.root]}>
      <div class:list={[user.content]}>
        <div class:list={[userBubble.root]}>What components ship in var-ui?</div>
      </div>
    </div>
  </div>
</div>
```

```html
<div data-density="balanced" class="var-ui-chat-message-list" role="log" aria-live="polite"><div data-density="balanced" class="var-ui-chat-message-list__inner"><div data-sender="assistant" class="var-ui-chat-message"><div data-sender="assistant" class="var-ui-chat-message__content"><div data-sender="assistant" data-variant="filled" data-group="none" class="var-ui-chat-message-bubble">Hello! How can I help?</div></div></div><div data-sender="user" class="var-ui-chat-message"><div data-sender="user" class="var-ui-chat-message__content"><div data-sender="user" data-variant="filled" data-group="none" class="var-ui-chat-message-bubble">What components ship in var-ui?</div></div></div></div></div>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  | Message elements — typically `ChatMessage`. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| density | ChatDensity \| undefined | no | balanced | Visual density — flows to child messages via context. |
| emptyState | ReactNode | no |  | Content shown when `children` is empty. |
| isStreaming | boolean \| undefined | no | false | Whether an assistant message is actively streaming. Sets `aria-busy` on the `role="log"` region so screen readers announce the completed message once, instead of re-announcing every streamed token. |

## Accessibility

Sets `aria-busy` on the log region while `isStreaming` is true so assistive tech waits for the full message instead of re-announcing every streamed token.