Message
A component for displaying messages in a conversation interface, with support for avatars, markdown content, and interactive actions.
Examples
Basic Message
Hello! How can I help you today?
AI
I can help with a variety of tasks: answering questions, providing information,
assisting with coding, generating creative content. What would you like help with today?
Message with Markdown
The markdown prop enables
rendering content as Markdown, perfect for rich text formatting in messages.
AI
Hello World! This message supports bold text, italics, and other Markdown features.
Message with Actions
You can use MessageActions and MessageAction to add
interactive elements to your messages.
Hello! How can I help you today?
AI
I can help with a variety of tasks: answering questions, providing information,
assisting with coding, generating creative content. What would you like help with
today?
Installation
Copy and paste the following code into your project.
Component API
Message
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Child components to render |
className | string | - | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
MessageAvatar
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | URL of the avatar image |
alt | string | - | Alt text for the avatar image |
fallback | string | - | Text to display if image fails to load |
className | string | - | Additional CSS classes |
MessageContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Content to display in the message |
markdown | boolean | false | Whether to render content as markdown |
className | string | - | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
MessageActions
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Child components to render |
className | string | - | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
MessageAction
| Prop | Type | Default | Description |
|---|---|---|---|
tooltip | Snippet | - | Content to show in the tooltip |
children | Snippet | - | Child component to trigger the tooltip |
className | string | - | Additional CSS classes for the tooltip |
side | "top" | "bottom" | "left" | "right" | "top" | Position of the tooltip relative to the trigger |
...props | TooltipProps | - | All other Tooltip component props are supported |