Message

A component for displaying messages in a conversation interface, with support for avatars, markdown content, and interactive actions.

Hello! How can I help you today?

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

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

Examples

Markdown

The "markdown" prop enables rendering content as Markdown, perfect for rich text formatting in messages.

Hello World! This message supports bold text, italics, and other Markdown features.

With Actions

Use "MessageActions" and "MessageAction" to add interactive elements to your messages.

Hello! How can I help you today?

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?

Props

Message

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

MessageAvatar

Name	Type	Default
`src`	`string`
`alt`	`string`
`fallback`	`string`
`class`	`string`

MessageContent

Name	Type	Default
`children`	`Snippet`
`content`	`string`
`markdown`	`boolean`	`false`
`class`	`string`
`...props`	`HTMLAttributes<HTMLDivElement>`

MessageActions

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

MessageAction

Name	Type	Default
`tooltip`	`Snippet`
`children`	`Snippet`
`class`	`string`
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`
`...props`	`TooltipPrimitive.RootProps`