hadcn chat
ChatBubble
The ChatBubble component chat-bubble.svelte is the main component in this library.
It is used to display a chat bubble along with its message, avatar and other content.
Wrap the ChatBubble component with ChatMessageList to properly show the chat bubbles.
US
Hello, how has your day been? I hope you are doing well.
AI
Hi, I am doing well, thank you for asking. How can I help you today?
US
{message.message}
Examples
- Default layout with actions and altered styles
- Default layout without actions and without altered styles
US
Hello!
AI
Hover me!
AI
{#each chatMessages as message}
{message.message}
{/each}
US
Help me with my essay.
AI
I can help you with that. What do you need help with?
{#each messages_without_actions as message, index}
{@const variant = message.sender === 'user' ? 'sent' : 'received'}
{message.message}
{#if message.sender === 'bot'}
{#each actionwoutIcons as {icon, type}}
{@const Icon = icon}
console.log('Action ' + type + ' clicked for message ' + index)}
>
{#snippet icon()}
{/snippet}
{/each}
{/if}
{/each}
API Reference
ChatBubble
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'sent' | 'received' | 'received' | The variant of the chat bubble. Used to display the correct position of the chat bubble and the correct colors. |
layout | 'default' | 'ai' | 'default' | The layout of the chat bubble. Used to display various layouts. |
children | Snippet | null | The children of the chat bubble. |
class | string | null | Additional classes to apply to the chat bubble. |
ChatBubbleMessage
| Prop | Type | Default | Description |
|---|---|---|---|
isLoading | boolean | false | If the message is loading. Shows loading component MessageLoading if true. |
class | string | null | Additional classes to apply to the message. |
ChatBubbleAvatar
You can also just use the
Avatarcomponent fromshadcn-svelteinstead
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | null | The source of the avatar. |
fallback | string | null | The fallback of the avatar. |
class | string | null | Additional classes to apply to the avatar. |
ChatBubbleAction
| Prop | Type | Default | Description |
|---|---|---|---|
icon | Snippet | null | The icon of the action. |
onclick | () => void | null | The onclick event of the action. |
class | string | null | Additional classes to apply to the action. |
On this page