Conversation

The Conversation component wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.

Messages will appear here as the conversation progresses.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/conversation.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/conversation

Name	Type	Default
`class`	`string`
`initial`	`ScrollBehavior`	`'smooth'`
`resize`	`ScrollBehavior`	`'smooth'`
`children`	`Snippet`
`ref`	`HTMLDivElement`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

Name	Type	Default
`class`	`string`
`children`	`Snippet`
`ref`	`HTMLDivElement`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

Name	Type	Default
`class`	`string`
`title`	`string`	`'No messages yet'`
`description`	`string`	`'Start a conversation to see messages here'`
`icon`	`Snippet`
`children`	`Snippet`
`ref`	`HTMLDivElement`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

Name	Type	Default
`class`	`string`
`onclick`	`MouseEventHandler<HTMLButtonElement>`
`...restProps`	`ButtonProps`