Studio
2

Conversation

Installation

pnpm dlx @mielui/svelte add conversation

Usage

Give Root a bounded height so Content can scroll. Bind follow when the surrounding interface needs to reflect whether new output is being followed.

The scroll button runs your click handler first. Call preventDefault() to keep the current scroll position and follow state.

import * as Conversation from '@mielui/svelte/components/conversation';
import * as Message from '@mielui/svelte/components/message';

let follow = $state(true);

<Conversation.Root bind:follow class="h-[32rem]">
  <Conversation.Content aria-label="Support conversation">
    <Message.Root from="assistant">
      <Message.Content>I found the failed request.</Message.Content>
    </Message.Root>
  </Conversation.Content>
  <Conversation.ScrollButton />
</Conversation.Root>

Scroll ownership

New messages should not pull readers away from earlier content. Conversation preserves their position while follow is false. ScrollButton returns to the latest message and resumes following new output.

Examples

Empty state

Follow live output

API reference

Conversation.Root

Manages transcript scrolling.

Prop Type Default
follow Bindable boolean | undefined

Whether new content should keep the transcript pinned to its latest message.

 true
threshold number | undefined

Distance from the bottom, in pixels, that still counts as following.

 80
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —

Conversation.Content

Contains conversation messages.

Prop Type Default
transcriptClass string | undefined

Classes applied to the inner transcript stack rather than the scroll viewport.

 —
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Conversation.Empty

Renders an empty conversation state.

Prop Type Default
icon Snippet<[]> | undefined —
title string | undefined 'Start a conversation'
description string | undefined 'Ask a question or share what you are working on.'
action Snippet<[]> | undefined —
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —

Conversation.ScrollButton

Scrolls to the latest message.

Prop Type Default
label string | undefined 'Scroll to latest message'
class string | undefined —