rt-chat-messages 1.0.0

package/README.md

@@ -0,0 +1,131 @@
+# @rongxiaobao/chat-messages
+
+AI 对话消息展示组件库，提供开箱即用的 Markdown 渲染、代码高亮、Mermaid 图表、多模态消息（语音/图片/文件）展示功能。
+
+## 特性
+
+- 📦 **开箱即用**：封装了复杂的 Markdown 和流式消息渲染逻辑
+- 🎨 **零 UI 库依赖**：内置基础 UI 组件，不依赖 Element Plus 等庞大组件库
+- 📱 **响应式设计**：完美适配 PC 和移动端
+- 🌙 **深色模式**：内置深色模式支持
+- 🛠 **Mermaid & KaTeX**：内置图表和数学公式支持
+- 🤖 **Agent 支持**：内置 Agent 执行步骤展示
+
+## 安装
+
+```bash
+npm install @rongxiaobao/chat-messages
+```
+
+## 快速使用
+
+### 引入样式
+
+在你的入口文件 (main.ts) 中引入样式：
+
+```ts
+import "@rongxiaobao/chat-messages/style.css";
+```
+
+### 使用组件
+
+```vue
+<template>
+  <div class="chat-container">
+    <ChatMessageList
+      :messages="messages"
+      :is-streaming="isStreaming"
+      :is-typing="isWaiting"
+      app-name="荣小宝"
+      @copy="handleCopy"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ChatMessageList } from "@rongxiaobao/chat-messages";
+import { ref } from "vue";
+
+const messages = ref([
+  { role: "user", content: "你好" },
+  { role: "assistant", content: "你好！我是荣小宝，有什么可以帮你？" },
+]);
+const isStreaming = ref(false);
+const isWaiting = ref(false);
+
+const handleCopy = (message) => {
+  console.log("Copy:", message.content);
+};
+</script>
+
+<style>
+.chat-container {
+  height: 600px; /* 必须给容器高度 */
+}
+</style>
+```
+
+## 组件 API
+
+### ChatMessageList
+
+**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 步骤                  |
+
+**Events**
+
+| 事件名          | 参数                     | 说明               |
+| --------------- | ------------------------ | ------------------ |
+| `copy`          | `(message: ChatMessage)` | 点击复制按钮时触发 |
+| `scroll`        | `(event: Event)`         | 滚动事件           |
+| `scroll-bottom` | -                        | 滚动到底部时触发   |
+
+### 类型定义
+
+```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;
+}
+```
+
+### MultimodalMessage / MarkdownMessage
+
+这两个组件也可以单独使用，用于渲染单条消息或 Markdown 内容。
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+```