@daflow-ui/ui-agent-chat-message

DfAgentChatMessage

DfAgentChatMessage 是 DaFlow UI 中面向 AI / 聊天消息流的单条消息壳组件。

安装

pnpm add @daflow-ui/ui-agent-chat-message

基础用法

<script setup lang="ts">
import { DfAgentChatMessage } from '@daflow-ui/ui-agent-chat-message'
import '@daflow-ui/ui-agent-chat-message/style.css'
</script>

<template>
  <DfAgentChatMessage
    role="assistant"
    :author="{ name: 'DaFlow Agent', avatar: '' }"
  >
    Hello, how can I help you today?
  </DfAgentChatMessage>
</template>

Props

• role?: 'user' | 'assistant'
• author: { name: string; avatar: string }

说明：

• 组件不内置助手 / 用户默认头像。
• 如需品牌头像、角色头像或用户头像，请由业务侧显式传入 author.avatar。
• 无头像时请传空字符串 ''，组件会回退到名称首字符。

Slots

• header
• 组件只负责头部区块占位与整体消息单元边界；内部布局请在 slot 内自建容器。
• default
• footer
• 组件只负责底部区块占位与整体消息单元边界；模型信息、状态、操作区建议在 slot 内自建布局容器。