Message
The Message component displays a chat interface message from either
a user or an AI.
It includes an avatar, a name, and a message content.
Hello, how are you?
Ha
Hello! I'm doing well, thank you for asking. How can I help you today?
As
Can you help me understand Svelte 5 runes?
Ha
Absolutely! Svelte 5 introduces runes like $state, $derived, and $props which provide a more powerful and flexible reactivity system. Would you like me to explain any specific rune?
As
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Render messages in a list with the AI SDK's Chat class.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/chat/+server.ts
Props
Message
| Prop | Type | Default | Description |
|---|---|---|---|
from | 'user' | 'assistant' | - | The role of the message sender (user or assistant) |
children | Snippet | - | Child components to render (typically MessageContent and MessageAvatar) |
class | string | - | Additional CSS classes to apply to the message container |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
MessageAvatar
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | URL of the avatar image |
name | string | - | Name of the user (used for fallback text) |
class | string | - | Additional CSS classes to apply to the avatar |
...restProps | ComponentProps<typeof Avatar> | - | All other Avatar component props are supported |
MessageContent
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'contained' | 'flat' | 'contained' | Visual style variant of the message content |
children | Snippet | - | Content to render inside the message |
class | string | - | Additional CSS classes to apply to the content container |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |