MessageAvatar

MessageAvatar 根据消息角色渲染头像，支持自定义图片地址。

导入方式

按需导入

import { MessageAvatar } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <MessageAvatar />

基础用法

U

AI

🔧

<script setup lang="ts">
import { MessageAvatar } from '@weimin96/ai-chat-vue'
</script>

<template>
  <div class="flex gap-4">
    <MessageAvatar role="user" name="User" />
    <MessageAvatar role="assistant" name="AI" />
    <MessageAvatar role="tool" name="Tool" />
  </div>
</template>

API

属性	类型	默认值	说明
role	MessageRole	必填	消息角色
src	string	undefined	自定义头像图片
name	string	undefined	头像替代文本

注意事项

未传入 src 时，组件会使用角色默认视觉样式。