Conversation
The Conversation component wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a simple conversational UI with Conversation and PromptInput:
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/chat/+server.ts
Features
- Automatic scrolling to the bottom when new messages are added
- Smooth scrolling behavior with configurable animation
- Scroll button that appears when not at the bottom
- Responsive design with customizable padding and spacing
- Flexible content layout with consistent message spacing
- Accessible with proper ARIA roles for screen readers
- Customizable styling through class prop
- Support for any number of child message components
Props
Conversation
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the conversation container |
initial | ScrollBehavior | 'smooth' | Scroll behavior for initial scroll to bottom ('auto' | 'smooth') |
resize | ScrollBehavior | 'smooth' | Scroll behavior when container resizes ('auto' | 'smooth') |
children | Snippet | - | Child components (typically ConversationContent and ConversationScrollButton) |
ref | HTMLDivElement | - | Bindable reference to the conversation container element |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ConversationContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the content container |
children | Snippet | - | Message components to render in the conversation |
ref | HTMLDivElement | - | Bindable reference to the content container element |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ConversationEmptyState
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the empty state container |
title | string | 'No messages yet' | Title text to display in the empty state |
description | string | 'Start a conversation to see messages here' | Description text to display in the empty state |
icon | Snippet | - | Custom icon snippet to display above the title |
children | Snippet | - | Custom content to replace the default empty state layout |
ref | HTMLDivElement | - | Bindable reference to the empty state container element |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ConversationScrollButton
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the scroll button |
onclick | MouseEventHandler<HTMLButtonElement> | - | Click handler for the scroll button |
...restProps | ButtonProps | - | All other Button component props are supported |