rt-chat-messages 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -15
- package/dist/chat-messages.es.js +428 -412
- package/dist/chat-messages.umd.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/components/AgentSteps.vue.d.ts +5 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# rt-chat-messages
|
|
2
2
|
|
|
3
3
|
AI 对话消息展示组件库，提供开箱即用的 Markdown 渲染、代码高亮、Mermaid 图表、多模态消息（语音/图片/文件）展示功能。
|
|
4
4
|
|
|
@@ -14,7 +14,7 @@ AI 对话消息展示组件库，提供开箱即用的 Markdown 渲染、代码
|
|
|
14
14
|
## 安装
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
npm install
|
|
17
|
+
npm install rt-chat-messages
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
## 快速使用
|
|
@@ -24,7 +24,7 @@ npm install @rongxiaobao/chat-messages
|
|
|
24
24
|
在你的入口文件 (main.ts) 中引入样式：
|
|
25
25
|
|
|
26
26
|
```ts
|
|
27
|
-
import "
|
|
27
|
+
import "rt-chat-messages/style.css";
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
### 使用组件
|
|
@@ -43,7 +43,7 @@ import "@rongxiaobao/chat-messages/style.css";
|
|
|
43
43
|
</template>
|
|
44
44
|
|
|
45
45
|
<script setup>
|
|
46
|
-
import { ChatMessageList } from "
|
|
46
|
+
import { ChatMessageList } from "rt-chat-messages";
|
|
47
47
|
import { ref } from "vue";
|
|
48
48
|
|
|
49
49
|
const messages = ref([
|
|
@@ -71,17 +71,32 @@ const handleCopy = (message) => {
|
|
|
71
71
|
|
|
72
72
|
**Props**
|
|
73
73
|
|
|
74
|
-
| 属性 | 类型 | 默认值 | 说明
|
|
75
|
-
| ---------------- | --------------- | ---------- |
|
|
76
|
-
| `messages` | `ChatMessage[]` | `[]` | 消息列表
|
|
77
|
-
| `isStreaming` | `boolean` | `false` | 是否正在流式输出（用于优化渲染性能）
|
|
78
|
-
| `isTyping` | `boolean` | `false` | 是否显示输入的等待动画
|
|
79
|
-
| `autoScroll` | `boolean` | `true` | 是否自动跟随内容滚动到底部
|
|
80
|
-
| `showWelcome` | `boolean` | `true` | 是否显示欢迎页（当无消息时）
|
|
81
|
-
| `appName` | `string` | `'AI助手'` | 欢迎页显示的名称
|
|
82
|
-
| `appLogo` | `string` | - | 欢迎页 Logo URL
|
|
83
|
-
| `agentSteps` | `AgentStep[]` | `[]` | Agent
|
|
84
|
-
| `showAgentSteps` | `boolean` | `true` | 是否显示 Agent 步骤
|
|
74
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
75
|
+
| ---------------- | --------------- | ---------- | -------------------------------------------------- |
|
|
76
|
+
| `messages` | `ChatMessage[]` | `[]` | 消息列表 |
|
|
77
|
+
| `isStreaming` | `boolean` | `false` | 是否正在流式输出（用于优化渲染性能） |
|
|
78
|
+
| `isTyping` | `boolean` | `false` | 是否显示输入的等待动画 |
|
|
79
|
+
| `autoScroll` | `boolean` | `true` | 是否自动跟随内容滚动到底部 |
|
|
80
|
+
| `showWelcome` | `boolean` | `true` | 是否显示欢迎页（当无消息时） |
|
|
81
|
+
| `appName` | `string` | `'AI助手'` | 欢迎页显示的名称 |
|
|
82
|
+
| `appLogo` | `string` | - | 欢迎页 Logo URL |
|
|
83
|
+
| `agentSteps` | `AgentStep[]` | `[]` | Agent 执行步骤（用于展示思考过程），格式见下方定义 |
|
|
84
|
+
| `showAgentSteps` | `boolean` | `true` | 是否显示 Agent 步骤 |
|
|
85
|
+
|
|
86
|
+
#### AgentStep 类型定义
|
|
87
|
+
|
|
88
|
+
```typescript
|
|
89
|
+
export interface AgentStep {
|
|
90
|
+
/** 唯一标识符 */
|
|
91
|
+
name: string;
|
|
92
|
+
/** 显示名称 */
|
|
93
|
+
displayName: string;
|
|
94
|
+
/** 状态 */
|
|
95
|
+
status: "running" | "completed" | "error";
|
|
96
|
+
/** 开始时间戳 (ms) */
|
|
97
|
+
startTime?: number;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
85
100
|
|
|
86
101
|
**Events**
|
|
87
102
|
|