# Chat Documentation

## Installation

```bash
jsrepo add ui/chat
```

## Components

### List

The root container for chat messages.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLDivElement | null | false | true | A reference to the chat list element. |
| children | Snippet | - | false | false | The content of the chat list. |

### Bubble

A chat bubble.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLDivElement | null | false | true | A reference to the chat bubble element. |
| children | Snippet | - | false | false | The content of the chat bubble. |
| variant | "sent" | "received" | - | true | false | The variant of the chat bubble, indicating if the message was sent or received. |

### BubbleMessage

The message content within a chat bubble.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLDivElement | null | false | true | A reference to the chat bubble message element. |
| children | Snippet | - | false | false | The content of the chat bubble message. |
| typing | boolean | false | false | false | Whether to show a typing indicator instead of message content. |

### BubbleAvatar

The avatar shown next to a chat bubble, inherits all Avatar.Root props.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|