ChatThread
Conversation thread container with restart action and auto-scroll behavior
Fran K. 09:02
Our production deploy has been queued for 18 minutes. Workspace: acme-prod.
Marco Support 09:03
Taking a look. Can you share the build id from the banner?
Fran K. 09:04
build_4a19c2f. The staging deploy 10 minutes earlier went through fine.
Marco Support 09:06
Found it. The us-east runner pool is saturated. I am draining a stuck worker now.
Marco Support 09:08
Your build just picked up. Should finish in ~2 minutes. I will leave this ticket open until you confirm.
Accessibility
- Treat the component as presentational unless it exposes interactive affordances, and label any interactive affordances explicitly.
- Keep heading, reading, and focus order aligned with the surrounding content.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { ChatThread, ChatMessage } from '@dryui/ui';
</script>
<ChatThread messageCount={messages.length}>
{#snippet children({ index })}
<ChatMessage role={messages[index].role} name={messages[index].name}>
{messages[index].message}
</ChatMessage>
{/snippet}
</ChatThread>Import options
Root package
ts
import { ChatThread } from '@dryui/ui'Per-component subpath
ts
import { ChatThread } from '@dryui/ui/chat-thread'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| messageCount | number | — | — | ✓ | — |
| scrollKey | number | — | 0 | — | — |
| children | Snippet<[{ index: number; isLatest: boolean }]> | Content rendered inside the component. | — | ✓ | — |