ChatStream

Streaming chat log container. role=log with polite announcements, bottom-anchored content, auto-follow that yields to the user's scroll, and typing dots while a response streams.

Examples

Streaming log

Summarize the Q2 retro notes.

Three themes: release cadence slipped, on-call load clustered on two people, and the design hand-off improved after the Figma templates landed.

{#snippet aiAvatar()}
  <Avatar src="/avatars/assistant.svg" alt="Assistant" size="sm" />
{/snippet}

<ChatStream streaming={streaming} typingLabel="Assistant is thinking…" style="height: 280px;">
  {#each messages as m}
    <ChatMessage role={m.role} avatar={m.role === 'assistant' ? aiAvatar : undefined}>
      {m.body}
    </ChatMessage>
  {/each}
</ChatStream>

Props

Prop	Type	Default	Description
`streaming`	`boolean`	`—`	Marks the log aria-busy and shows TypingDots at the tail.
`typingLabel`	`string`	`—`	Label next to the dots ("Assistant is thinking…").
`autoFollow`	`boolean`	`—`	Stick to the bottom on new content unless the user scrolled up. Default true.
`children`	`Snippet`	`—`	ChatMessage rows.

Install

CLI

npx @a3tai/mittsu add chat-stream