# ChatThread

`ChatThread` provides a focusable scrolling region containing a polite live message log and optional notice.

## Usage

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

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

<ChatThread label="Support conversation">
  {#snippet notice()}<p class="metadata">Example conversation</p>{/snippet}
  <ChatMessage role="user" text="Where can I find the archive?" />
  <ChatMessage text="Open the Archive page." />
</ChatThread>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the scrolling region; it owns its role, accessible name, focusability and scrolling handlers.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.

## Parameters

| Name         | Type      | Default     | Description                                                                                                                                  |
| ------------ | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`      | `string`  | `undefined` | Accessible name of the keyboard-focusable scrolling region. Defaults to the built-in text in the `Page` language.                            |
| `notice`     | `Snippet` | `undefined` | Optional notice before the live message log.                                                                                                 |
| `children`   | `Snippet` | `undefined` | Messages or an empty-state introduction inside a polite live log.                                                                            |
| `autoscroll` | `boolean` | `false`     | Follow content growth until wheel, touch, scrolling keys or scrollbar interaction. Toggle false then true to start following a new response. |

## Methods

| Name               | Description                                                                                 |
| ------------------ | ------------------------------------------------------------------------------------------- |
| `isAtBottom()`     | Return whether the reader is at the latest content. Access with bind:this before appending. |
| `scrollToBottom()` | Scroll to the latest content. Call after await tick() when messages were just updated.      |
| `scrollToTop()`    | Scroll to the beginning. Access with bind:this.                                             |

## Accessibility

The scrolling region has tabindex="0" and a configurable name. Messages sit inside a polite role="log"; the notice sits outside that live log. Scrolling is explicit by default: the parent calls a method after tick() when needed. Optional autoscroll follows growing content without animation and yields to reader scrolling for the current response. Applications can call `isAtBottom()` before the next response to decide whether following should resume.