Hello! How can I help you today?
Can you explain what Vue composables are?
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-message.json"
Usage
<script setup lang="ts">
import { Copy } from '@lucide/vue'
import { ChatMessage } from '@/components/chat-message'
const actions = [
{ label: 'Copy message', icon: Copy }
]
</script>
<template>
<ChatMessage
id="1"
role="assistant"
:parts="[{ type: 'text', text: 'Hello!' }]"
side="left"
:actions="actions"
/>
</template>Examples
Default
Hello! How can I help you today?
Can you explain what Vue composables are?
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Message ID. |
role | 'user' | 'assistant' | 'system' | — | Message role. |
parts | UIMessage['parts'] | — | Message parts from AI SDK. |
side | 'left' | 'right' | 'left' | Which side to render the message. |
actions | ChatMessageAction[] | [] | Action buttons shown on hover. Each icon is a Vue component and each label is used for the tooltip and accessible button name. |
class | string | — | Additional CSS classes. |
Slots
| Slot | Props | Description |
|---|---|---|
leading | — | Content rendered before the message (e.g., avatar). |
content | { id, role, parts } | Custom message content renderer. |
Types
interface ChatMessageAction {
label: string
icon: Component
onClick?: (e: MouseEvent, message: UIMessage) => void
}