rt-chat-messages

AI 对话消息展示组件库，提供开箱即用的 Markdown 渲染、代码高亮、Mermaid 图表、多模态消息（语音/图片/文件）展示功能。

预览

特性

- 📦 开箱即用：封装了复杂的 Markdown 和流式消息渲染逻辑
- 🎨 零 UI 库依赖：内置基础 UI 组件，不依赖 Element Plus 等庞大组件库
- 📱 响应式设计：完美适配 PC 和移动端
- 🌙 深色模式：内置深色模式支持
- 🛠 Mermaid & KaTeX：内置图表和数学公式支持
- 🤖 Agent 支持：内置 Agent 执行步骤展示

安装

``bash
npm install rt-chat-messages
`

快速使用

$3

在你的入口文件 (main.ts) 中引入样式：

`ts
import "rt-chat-messages/style.css";
`

$3

`vue





`

组件 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
``