Components
ChatMessages
Display a list of chat messages.
Usage
Use the ChatMessages component to display a list of messages in a chat interface.
Hello!
Hi there!
How are you?
<script setup>
import { ref } from 'vue'
const messages = ref([
{ id: 1, content: 'Hello!', sender: 'user' },
{ id: 2, content: 'Hi there!', sender: 'bot' },
{ id: 3, content: 'How are you?', sender: 'user' }
])
</script>
<template>
<ZChatMessages :messages="messages" />
</template>
Props
messagesrequired
ChatMessage[]
Slots
default
Use the #default slot to customize the rendering of each message. You'll have access to the message object in the slot scope.
Config
{
wrapper: 'grid grid-cols-6 gap-y-2'
}