# ChatPanel

`ChatPanel` supplies the growing flex-column body shared by inline and floating conversations.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { ChatPanel, ChatThread, ChatMessage } from "@dg/ui";
</script>

<div class="conversation">
  <ChatPanel><ChatThread><ChatMessage text="Welcome." /></ChatThread></ChatPanel>
</div>

<style>
  /* A bounded inline viewport lets the thread scroll within the page. */
  .conversation {
    display: flex;
    flex-direction: column;
    height: 32rem;
  }
</style>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the panel element.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.

## Parameters

| Name       | Type      | Default     | Description                                                                                        |
| ---------- | --------- | ----------- | -------------------------------------------------------------------------------------------------- |
| `children` | `Snippet` | `undefined` | Flex-column body, usually `ChatThread` and `ChatComposer`. An inline parent must provide a height. |

## Accessibility

The panel is a layout div. Compose `ChatThread` for a named scrolling region and `ChatComposer` for a labeled input. The inline parent must supply a bounded height.