hadcn chat
ExpandableChat
The ExpandableChat expandable-chat.svelte component gives an easily installable
component for quickly creating a chat support ui feature.
See the example on the popover below
Chat with our AI ✨
Ask any question for our AI to answer
AI
Hello there. How can I help you today?
API Reference
ExpandableChat
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "bottom-right" | "bottom-left" | "bottom-right" | Position of the chat widget on the screen |
| size | "sm" | "md" | "lg" | "xl" | "full" | "md" | Size of the chat window |
| icon | Snippet | - | Custom icon for the chat toggle button |
| class | string | - | Additional CSS classes for the main container |
| children | Snippet | - | Content of the chat window |
ExpandableChatHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | - | Additional CSS classes for the header section |
ExpandableChatBody
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | - | Additional CSS classes for the body section |
ExpandableChatFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | - | Additional CSS classes for the footer section |
ExpandableChatToggle (internal component)
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | Snippet | - | Custom icon for the toggle button |
| isOpen | boolean | - | Current open/closed state of the chat window |
| toggleChat | () => void | - | Function to toggle the chat window open/closed |
| class | string | - | Additional CSS classes for the toggle button |
On this page