Theme

ChatThread

display @dryui/ui

Conversation thread container with restart action and auto-scroll behavior

chatthreadconversationlog

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

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 } 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'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Basic chat thread

svelte
<script lang="ts">
  import { ChatThread, ChatMessage } from '@dryui/ui';

  const messages = [
    { role: 'user', name: 'Alice', text: 'Hey, have you tried the new Svelte 5 runes yet?' },
    { role: 'assistant', name: 'Bot', text: 'Yes! The $state and $derived runes make reactivity much more explicit.' },
    { role: 'user', name: 'Alice', text: 'Do you think it simplifies component composition?' },
    { role: 'assistant', name: 'Bot', text: 'Absolutely. Snippets replace slots and give you typed render props out of the box.' },
  ];
</script>

<ChatThread messageCount={messages.length}>
  {#snippet children({ index })}
    <ChatMessage role={messages[index].role} name={messages[index].name}>
      {messages[index].text}
    </ChatMessage>
  {/snippet}
</ChatThread>

Chat thread with timestamps

svelte
<script lang="ts">
  import { ChatThread, ChatMessage } from '@dryui/ui';

  const messages = [
    { role: 'user', name: 'Jordan', text: 'Can we deploy the fix today?', timestamp: '2:15 PM' },
    { role: 'assistant', name: 'DevOps Bot', text: 'The pipeline is green. Ready to deploy to staging.', timestamp: '2:16 PM' },
    { role: 'user', name: 'Jordan', text: 'Go ahead and promote to production.', timestamp: '2:18 PM' },
  ];
</script>

<ChatThread messageCount={messages.length}>
  {#snippet children({ index })}
    <ChatMessage
      role={messages[index].role}
      name={messages[index].name}
      timestamp={messages[index].timestamp}
    >
      {messages[index].text}
    </ChatMessage>
  {/snippet}
</ChatThread>

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Prop Type Default Required Bindable
messageCount
number
— ✓ —
scrollKey
number
0 — —
children
Snippet<[
— ✓ —
index
number
— ✓ —
viewTransitionName
string
— ✓ —
isLatest
boolean
— ✓ —

Forwards <element> attributes via rest props. Common examples: id, class, aria-label. Omitted: children.