AI对话消息展示组件,开箱即用,支持Markdown、Mermaid、多模态内容
npm install rt-chat-messages
bash
npm install rt-chat-messages
`
快速使用
$3
在你的入口文件 (main.ts) 中引入样式:
`ts
import "rt-chat-messages/style.css";
`
$3
`vue
:messages="messages"
:is-streaming="isStreaming"
:is-typing="isWaiting"
app-name="荣小宝"
@copy="handleCopy"
/>
`
组件 API
$3
Props
| 属性 | 类型 | 默认值 | 说明 |
| ---------------- | --------------- | ---------- | -------------------------------------------------- |
| messages | ChatMessage[] | [] | 消息列表 |
| isStreaming | boolean | false | 是否正在流式输出(用于优化渲染性能) |
| isTyping | boolean | false | 是否显示输入的等待动画 |
| autoScroll | boolean | true | 是否自动跟随内容滚动到底部 |
| showWelcome | boolean | true | 是否显示欢迎页(当无消息时) |
| appName | string | 'AI助手' | 欢迎页显示的名称 |
| appLogo | string | - | 欢迎页 Logo URL |
| agentSteps | AgentStep[] | [] | Agent 执行步骤(用于展示思考过程),格式见下方定义 |
| showAgentSteps | boolean | true | 是否显示 Agent 步骤 |
#### AgentStep 类型定义
`typescript
export interface AgentStep {
/* 唯一标识符 /
name: string;
/* 显示名称 /
displayName: string;
/* 状态 /
status: "running" | "completed" | "error";
/* 开始时间戳 (ms) /
startTime?: number;
}
`
Events
| 事件名 | 参数 | 说明 |
| --------------- | ------------------------ | ------------------ |
| copy | (message: ChatMessage) | 点击复制按钮时触发 |
| scroll | (event: Event) | 滚动事件 |
| scroll-bottom | - | 滚动到底部时触发 |
$3
`ts
export interface ChatMessage {
id?: string;
role: "user" | "assistant" | "system" | string;
content: string;
metadata?: string | any;
attachments?: FileAttachment[];
create_time?: string;
// 允许其他任意属性
[key: string]: any;
}
export interface FileAttachment {
name: string;
size: number;
type: string;
fileType?: string;
}
`
$3
这两个组件也可以单独使用,用于渲染单条消息或 Markdown 内容。
开发
`bash
安装依赖
npm install
开发模式
npm run dev
构建
npm run build
``