# Chat

Bundle name: `"components/chat"`

Implementation: [chat.css](./chat.css)

## Classes

### `button-icon-and-text`

Applies to the components: `button`, `a`

Used in combination with button variant classes within chat component. See button component documentation for details

### `button-icon-only`

Applies to the components: `button`, `a`

Used in combination with button variant classes within chat component. See button component documentation for details

### `button-primary`

Applies to the components: `button`, `a`

Primary button styling within chat component. See button component documentation for details

### `button-secondary`

Applies to the components: `button`, `a`

Secondary button styling within chat component. See button component documentation for details

### `button-tertiary`

Applies to the components: `button`, `a`

Tertiary button styling within chat component. See button component documentation for details

### `chat`

Applies to the components: `ch-chat`

Main chat component class. Provides styling for a conversational interface that supports messages, file attachments, live audio, and customizable avatars

### `chat-attached-files-viewer`

Applies to the components: Elements within `ch-chat`

Styles the viewer for attached files in the chat component, displaying uploaded or in-progress files

### `chat-file-upload-menu`

Applies to the components: Elements within `ch-chat`

Styles the file upload menu interface within the chat component

### `chat-live-audio-button`

Applies to the components: `button` within `ch-chat`

Styles the button used to activate or control live audio functionality in the chat component

### `chat-live-audio-container`

Applies to the components: Container elements within `ch-chat`

Container for live audio interface elements. Provides centered flex layout with accent surface styling and dashed border

### `dropdown`

Applies to the components: Dropdown elements within `ch-chat`

Dropdown component styling within chat. See dropdown component documentation for details

### `footer-slot`

Applies to the components: Slotted footer content in `ch-chat`

Styles applied to custom footer content slotted into the chat component

### `header-slot`

Applies to the components: Slotted header content in `ch-chat`

Styles applied to custom header content slotted into the chat component

## Notes

- The `"components/chat"` bundle is sufficient for styling `ch-chat`. You do **not** need `"components/code"` separately — `ch-markdown-viewer`'s styles already include code block styling
