Message

A chat message row with an avatar, content, and optional header/footer, alignable to either side.

AI

Assistant

How can I help you today?

Show me the docs.

Just now

Code

<script setup lang="ts">
import { Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter, MessageGroup } from '@jaltech/vuejs-ui/message'
</script>

<template>
  <MessageGroup>
    <Message align="start">
      <MessageAvatar>AI</MessageAvatar>
      <MessageContent>
        <MessageHeader>Assistant</MessageHeader>
        <div>How can I help you today?</div>
      </MessageContent>
    </Message>
    <Message align="end">
      <MessageContent>
        <div>Show me the docs.</div>
        <MessageFooter>Just now</MessageFooter>
      </MessageContent>
    </Message>
  </MessageGroup>
</template>