Components
ChatMessage
Display a single chat message with avatar, content, and metadata.
Usage
Use the ChatMessage component to display a single message in a chat interface.
Hello! How can I assist you today?
Hi there! I have a question about Vue.js.
<script setup>
const aiMessage = {
content: 'Hello! How can I assist you today?',
isUser: false
}
const userMessage = {
content: 'Hi there! I have a question about Vue.js.',
isUser: true
}
</script>
<template>
<div class="grid grid-cols-6 gap-y-2">
<ZChatMessage :message="aiMessage" />
<ZChatMessage :message="userMessage" />
</div>
</template>
Props
messagerequired
Record<string, any>
Slots
avatar
Use the #avatar slot to customize the avatar display.
content
Use the #content slot to customize the message content.
metadata
Use the #metadata slot to customize the message metadata (e.g., timestamp, status).
Config
{
wrapper: {
base: 'p-3 rounded-lg',
user: 'col-start-6',
assistant: 'col-start-1 col-end-3'
},
container: {
base: 'flex items-center',
user: 'justify-start flex-row-reverse',
assistant: 'flex-row'
},
avatar: {
background: 'bg-gray-500',
text: 'text-white font-medium'
},
message: {
base: 'relative text-sm py-2 px-4 shadow rounded-xl',
user: 'mr-3 bg-gray-100 dark:bg-gray-800',
assistant: 'ml-3 bg-gray-50 dark:bg-gray-800'
}
}