What is in the collection?
ChatThread
ChatThread provides a focusable scrolling region containing a polite live message log and optional notice.
01Preview
02Usage
Load @dg/ui/styles.css once in the root layout.
<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>
03Notes
- 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.
04Parameters
| 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. |
05Methods
| 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. |
06Accessibility
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.