rt-chat-messages 1.0.3 → 1.0.5

package/README.md

@@ -2,14 +2,21 @@
 
 AI 对话消息展示组件库，提供开箱即用的 Markdown 渲染、代码高亮、Mermaid 图表、多模态消息（语音/图片/文件）展示功能。
 
+## 预览
+
+<p align="center">
+  <img src="http://rt-rongmeibao.oss-cn-beijing.aliyuncs.com/trade-platform-web/20260206/80b22313-e3ed-428a-82ac-8ac8dac30e6b.png" alt="消息列表预览" width="320" />
+</p>
+
 ## 特性
 
 - 📦 **开箱即用**：封装了复杂的 Markdown 和流式消息渲染逻辑
 - 🎨 **零 UI 库依赖**：内置基础 UI 组件，不依赖 Element Plus 等庞大组件库
 - 📱 **响应式设计**：完美适配 PC 和移动端
 - 🌙 **深色模式**：内置深色模式支持
-- 🛠 **Mermaid & KaTeX**：内置图表和数学公式支持
-- 🤖 **Agent 支持**：内置 Agent 执行步骤展示
+- 🛠 **Mermaid & KaTeX**：内置图表和数学公式支持
+- 🤖 **Agent 支持**：内置 Agent 执行步骤展示
+- 🧩 **A2UI 支持**：可渲染 A2UI v0.9 结构化 UI，并透出用户交互事件
 
 ## 安装
 
@@ -36,11 +43,12 @@ import "rt-chat-messages/style.css";
       :messages="messages"
       :is-streaming="isStreaming"
       :is-typing="isWaiting"
-      app-name="荣小宝"
-      @copy="handleCopy"
-    />
-  </div>
-</template>
+      app-name="荣小宝"
+      @copy="handleCopy"
+      @a2ui-action="handleA2UIAction"
+    />
+  </div>
+</template>
 
 <script setup>
 import { ChatMessageList } from "rt-chat-messages";
@@ -53,10 +61,14 @@ const messages = ref([
 const isStreaming = ref(false);
 const isWaiting = ref(false);
 
-const handleCopy = (message) => {
-  console.log("Copy:", message.content);
-};
-</script>
+const handleCopy = (message) => {
+  console.log("Copy:", message.content);
+};
+
+const handleA2UIAction = (action) => {
+  console.log("A2UI action:", action);
+};
+</script>
 
 <style>
 .chat-container {
@@ -80,10 +92,54 @@ const handleCopy = (message) => {
 | `showWelcome`    | `boolean`       | `true`     | 是否显示欢迎页（当无消息时）                       |
 | `appName`        | `string`        | `'AI助手'` | 欢迎页显示的名称                                   |
 | `appLogo`        | `string`        | -          | 欢迎页 Logo URL                                    |
-| `agentSteps`     | `AgentStep[]`   | `[]`       | Agent 执行步骤（用于展示思考过程），格式见下方定义 |
-| `showAgentSteps` | `boolean`       | `true`     | 是否显示 Agent 步骤                                |
-
-#### AgentStep 类型定义
+| `agentSteps`     | `AgentStep[]`   | `[]`       | Agent 执行步骤（用于展示思考过程），格式见下方定义 |
+| `showAgentSteps` | `boolean`       | `true`     | 是否显示 Agent 步骤                                |
+| `enableA2UI`     | `boolean`       | `true`     | 是否启用 A2UI v0.9 结构化 UI 渲染                 |
+| `autoProvideA2UI` | `boolean`      | `true`     | 未在上层配置 A2UI 时，自动注入默认 catalog/theme   |
+| `hideA2UIRawContent` | `boolean`   | `true`     | 当 `content` 本身是 A2UI JSON 时隐藏原始 JSON      |
+| `a2uiActionHandler` | `(event) => A2UIMessage[] \| Promise<A2UIMessage[]>` | - | 处理 A2UI 组件动作并返回新的 A2UI 消息 |
+
+#### A2UI 消息格式
+
+组件会从 `message.a2ui`、`message.a2uiMessage`、`message.a2uiMessages`、`message.a2ui_message`、`message.a2ui_messages`、`message.metadata` 和纯 JSON `message.content` 中识别 A2UI v0.9 消息。
+
+```ts
+const messages = [
+  {
+    role: "assistant",
+    content: "",
+    a2uiMessages: [
+      {
+        version: "v0.9",
+        createSurface: {
+          surfaceId: "demo",
+          catalogId: "default",
+        },
+      },
+      {
+        version: "v0.9",
+        updateComponents: {
+          surfaceId: "demo",
+          components: [
+            {
+              id: "root",
+              component: "Card",
+              child: "title",
+            },
+            {
+              id: "title",
+              component: "Text",
+              text: "A2UI 内容",
+            },
+          ],
+        },
+      },
+    ],
+  },
+];
+```
+
+#### AgentStep 类型定义
 
 ```typescript
 export interface AgentStep {
@@ -102,19 +158,26 @@ export interface AgentStep {
 
 | 事件名          | 参数                     | 说明               |
 | --------------- | ------------------------ | ------------------ |
-| `copy`          | `(message: ChatMessage)` | 点击复制按钮时触发 |
-| `scroll`        | `(event: Event)`         | 滚动事件           |
-| `scroll-bottom` | -                        | 滚动到底部时触发   |
+| `copy`          | `(message: ChatMessage)` | 点击复制按钮时触发 |
+| `scroll`        | `(event: Event)`         | 滚动事件           |
+| `scroll-bottom` | -                        | 滚动到底部时触发   |
+| `a2ui-action`   | `(action, event)`        | A2UI 组件交互动作   |
+| `a2ui-error`    | `(error)`                | A2UI 渲染或动作处理异常 |
 
 ### 类型定义
 
 ```ts
 export interface ChatMessage {
   id?: string;
-  role: "user" | "assistant" | "system" | string;
-  content: string;
-  metadata?: string | any;
-  attachments?: FileAttachment[];
+  role: "user" | "assistant" | "system" | string;
+  content: string;
+  a2ui?: unknown;
+  a2uiMessage?: unknown;
+  a2uiMessages?: unknown;
+  a2ui_message?: unknown;
+  a2ui_messages?: unknown;
+  metadata?: string | any;
+  attachments?: FileAttachment[];
   create_time?: string;
   // 允许其他任意属性
   [key: string]: any;