@blueking/chat-x 0.0.34 → 0.0.36

package/dist/mcp/generated/docs/activity-message.md

@@ -151,12 +151,12 @@ ActivityMessage 展示活动类消息：知识检索（knowledge_rag）、引用
 
 ## FlowAgent 执行情况模式
 
-`activityType` 设为 `MessageContentType.FlowAgent`（`'flow_agent'`），`content` 传入 `BkFlowMessageContent` 对象。用于展示蓝鲸标准运维（BkFlow）任务的执行状态、节点列表和统计信息。
+`activityType` 设为 `MessageContentType.FlowAgent`（`'flow_agent'`），`content` 传入 `BkFlowMessageContent` 任务数组。用于展示一个或多个蓝鲸标准运维（BkFlow）任务的执行状态、节点列表和统计信息。
 
 ### 核心交互
 
-- **标题栏**：显示「执行情况」+ 各状态计数（执行中 / 成功 / 失败 / 挂起），颜色区分
-- **任务组**：可折叠/展开的任务行，带状态图标和总耗时
+- **标题栏**：显示「执行情况」+ 所有任务聚合后的各状态计数（执行中 / 成功 / 失败 / 挂起），颜色区分
+- **任务组**：逐个展示任务行，带状态图标和总耗时
 - **节点列表**：每个节点显示状态圆点、名称和耗时；hover 时出现「详情」按钮
 - **节点详情**：点击「详情」按钮会通过 `useCustomTabConsumer` 在 `ChatContainer` 侧边栏新增自定义 Tab，展示节点配置（基础信息、输入参数、输出参数）
 
@@ -171,7 +171,7 @@ FlowAgentContent（activityType = 'flow_agent'）
 │       ├── Loading / ArrowIcon（随 status 切换）
 │       └── 执行情况：执行中 N / 成功 N / 失败 N / 挂起 N
 └── #default
-    └── TaskGroup
+    └── TaskGroup × N
         ├── TaskHeader（可折叠/展开）
         │   ├── 状态图标（running=Loading / success / failed / suspended）
         │   ├── task_name（HighlightKeyword 支持搜索高亮）
@@ -204,54 +204,56 @@ FlowAgentContent（activityType = 'flow_agent'）
   const collapsed = ref(false);
   const status = ref(MessageStatus.Complete);
 
-  const flowContent: BkFlowMessageContent = {
-    task_id: 100,
-    task_name: '数据清洗流程',
-    task_state: 'FINISHED',
-    task_outputs: [],
-    statistics: {
-      total: 3,
-      state_counts: { FINISHED: 2, FAILED: 1 },
-    },
-    nodes: {
-      node1: {
-        id: 'node1',
-        name: '数据拉取',
-        state: 'FINISHED',
-        elapsed_time: 12,
-        start_time: '2025-01-01 10:00:00',
-        finish_time: '2025-01-01 10:00:12',
-        loop: 1,
-        retry: 0,
-        skip: false,
-        type: 'ServiceActivity',
-      },
-      node2: {
-        id: 'node2',
-        name: '数据转换',
-        state: 'FINISHED',
-        elapsed_time: 45,
-        start_time: '2025-01-01 10:00:12',
-        finish_time: '2025-01-01 10:00:57',
-        loop: 1,
-        retry: 0,
-        skip: false,
-        type: 'ServiceActivity',
+  const flowContent: BkFlowMessageContent = [
+    {
+      task_id: 100,
+      task_name: '数据清洗流程',
+      task_state: 'FINISHED',
+      task_outputs: [],
+      statistics: {
+        total: 3,
+        state_counts: { FINISHED: 2, FAILED: 1 },
       },
-      node3: {
-        id: 'node3',
-        name: '结果写入',
-        state: 'FAILED',
-        elapsed_time: 3,
-        start_time: '2025-01-01 10:00:57',
-        finish_time: '2025-01-01 10:01:00',
-        loop: 1,
-        retry: 0,
-        skip: false,
-        type: 'ServiceActivity',
+      nodes: {
+        node1: {
+          id: 'node1',
+          name: '数据拉取',
+          state: 'FINISHED',
+          elapsed_time: 12,
+          start_time: '2025-01-01 10:00:00',
+          finish_time: '2025-01-01 10:00:12',
+          loop: 1,
+          retry: 0,
+          skip: false,
+          type: 'ServiceActivity',
+        },
+        node2: {
+          id: 'node2',
+          name: '数据转换',
+          state: 'FINISHED',
+          elapsed_time: 45,
+          start_time: '2025-01-01 10:00:12',
+          finish_time: '2025-01-01 10:00:57',
+          loop: 1,
+          retry: 0,
+          skip: false,
+          type: 'ServiceActivity',
+        },
+        node3: {
+          id: 'node3',
+          name: '结果写入',
+          state: 'FAILED',
+          elapsed_time: 3,
+          start_time: '2025-01-01 10:00:57',
+          finish_time: '2025-01-01 10:01:00',
+          loop: 1,
+          retry: 0,
+          skip: false,
+          type: 'ServiceActivity',
+        },
       },
     },
-  };
+  ];
 </script>
 ```
 
@@ -264,16 +266,18 @@ const messages = [
     role: 'activity',
     activityType: MessageContentType.FlowAgent, // 'flow_agent'
     status: MessageStatus.Streaming,
-    content: {
-      task_id: 100,
-      task_name: '数据清洗流程',
-      task_state: 'RUNNING',
-      task_outputs: [],
-      statistics: { total: 3, state_counts: { RUNNING: 1, FINISHED: 2 } },
-      nodes: {
-        /* ... */
+    content: [
+      {
+        task_id: 100,
+        task_name: '数据清洗流程',
+        task_state: 'RUNNING',
+        task_outputs: [],
+        statistics: { total: 3, state_counts: { RUNNING: 1, FINISHED: 2 } },
+        nodes: {
+          /* ... */
+        },
       },
-    },
+    ],
   },
 ];
 ```
@@ -301,14 +305,16 @@ const messages = [
 ### 相关类型定义
 
 ```typescript
-import { MessageContentType, type BkFlowMessageContent, type BkFlowNode } from '@blueking/chat-x';
+import { MessageContentType, type BkFlowMessageContent, type BkFlowNode, type BkFlowTask } from '@blueking/chat-x';
+
+type BkFlowMessageContent = BkFlowTask[];
 
-type BkFlowMessageContent = {
+type BkFlowTask = {
   nodes: Record<string, BkFlowNode>;
   statistics: { state_counts: Record<string, number>; total: number };
   task_id: number;
   task_name: string;
-  task_outputs: unknown[];
+  task_outputs: unknown;
   task_state: string;
 };
 

package/dist/mcp/generated/docs/markdown-content.md

@@ -23,8 +23,8 @@ AI 消息内容渲染的核心原子组件，集成代码高亮、LaTeX 公式
 ## 组件结构与渲染流程
 
 ```
-props.content → completeMarkdownSyntax → md.parse → groupTokens → groupedTokens
-                                                                          │
+props.content → completeMarkdownSyntax → md.parse（html: true）→ groupTokens → groupedTokens
+                                                                               │
                           div.ai-markdown-content（contain: layout style）
                                         │
                         status === 'error' → CommonErrorContent（:content）
@@ -39,12 +39,21 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
                     ↓             ↓                    ↓               ↓
            MermaidContent  LatexContent        CodeContent    VNodeRenderer
            @mounted         @mounted           @mounted       @vue:mounted
-                    │
-                    └──── handleTokenMounted（throttle 100ms）→ containerScroll.toScrollBottom()
+                    │                                              │
+                    └──── handleTokenMounted（throttle 100ms）      │
+                         → containerScroll.toScrollBottom()        │
+                                                         sanitize（DOMPurify + sanitizeCSS）
+                                                         sanitizeHtmlFragment（流式片段净化）
 ```
 
 `VNodeRenderer` 的 `options` 中包含与当前 `MarkdownIt` 实例一致的 `mditOptions`（即 `md.options`），以便 `tokensToVNodes` 调用 `renderer.rules` 时第三参与 markdown-it 原生规则签名一致。
 
+`MarkdownIt` 构造时开启 `html: true`，允许行内 HTML 标签（如 `<font>`、`<div>`）通过 markdown-it 解析为 `html_inline` / `html_block` token。
+
+两组净化函数各司其职：
+- `sanitize`：DOMPurify 全局过滤后，再对 `style` 属性值进行 CSS 属性白名单校验（`sanitizeCSS`），用于最终渲染的完整 HTML。
+- `sanitizeHtmlFragment`：轻量级片段净化，**不自动闭合标签**，专用于流式渲染中拆分到多个 token 的 HTML 标签场景。
+
 ### Token 分组（groupTokens）
 
 `groupTokens` 使用栈将扁平 Token 数组转为分组数组，每组对应一个顶层 DOM 节点（段落、标题、列表、代码块等）：
@@ -189,15 +198,24 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
 
 ### 安全性
 
-`VNodeRenderer` 渲染的 HTML 统一经过 DOMPurify 过滤，并额外允许 KaTeX 所需标签：
+HTML 渲染采用两层安全策略：
+
+**第一层 — DOMPurify**：全局过滤，移除危险标签和属性，同时允许 KaTeX 和 `<font>` 标签所需的内容：
 
 ```typescript
 const domPurifyConfig = {
-  ADD_TAGS: ['semantics', 'mrow', 'mi', 'mo', 'mn', 'msup', 'msub', 'mfrac', 'mtext', 'annotation'],
-  ADD_ATTR: ['xmlns', 'mathvariant', 'encoding', 'style'],
+  ADD_TAGS: ['font', 'semantics', 'mrow', 'mi', 'mo', 'mn', 'msup', 'msub', 'mfrac', 'mtext', 'annotation'],
+  ADD_ATTR: ['xmlns', 'mathvariant', 'encoding', 'style', 'color', 'size', 'face'],
+  FORBID_TAGS: ['style'],
 };
 ```
 
+> `FORBID_TAGS: ['style']` 防止 `<style>` 标签注入全局 CSS，样式属性通过 `style` 属性（attribute）而非 `<style>` 标签（tag）控制。
+
+**第二层 — CSS 属性白名单**（`sanitizeCSS`）：DOMPurify 处理后，对 `style` 属性值做二次过滤，仅保留白名单内的安全 CSS 属性，拦截 `url()`、`expression()`、`javascript:` 等危险模式。
+
+**流式场景 — `sanitizeHtmlFragment`**：流式渲染中 HTML 标签可能被拆分到多个 `html_inline` token（如 `<font color="red">` 和 `</font>` 分属不同 token），DOMPurify 会自动闭合未匹配标签导致样式丢失。`sanitizeHtmlFragment` 只做危险模式匹配不自动闭合，专用于此场景。
+
 > `CodeContent`、`MermaidContent`、`LatexContent` 各自内部处理安全性（KaTeX `errorColor`、highlight.js 转义等），不经过 DOMPurify。
 
 ## 关联组件

package/dist/mcp/generated/docs/shortcut-render.md

@@ -411,6 +411,10 @@ interface BaseShortcutComponent {
 }
 ```
 
+## 样式说明
+
+组件内部使用 SCSS 变量 `$bk-prefix` 拼接 bkui-vue 组件类名（如 `Form`、`FormItem`、`Radio`、`Checkbox` 等），替代原先硬编码的 `.bk-*` 类名选择器，确保在不同构建环境下类名前缀的一致性。
+
 ## 关联组件
 
 - [ShortcutBtn](../atomic/shortcut-btn.md) — 与 Shortcut 数据模型一致的入口按钮

package/dist/mcp/generated/docs/use-message-group.md

@@ -111,7 +111,7 @@ const isExecutionMessage = (m: Message): boolean => {
 | 消息类型   | 搜索范围                                                     |
 | ---------- | ------------------------------------------------------------ |
 | toolCall   | `function.name`、`mcpName`、`description`、`arguments`、`id` |
-| flow_agent | `task_name`、各节点 `name`                                   |
+| flow_agent | 各任务 `task_name`、各节点 `name`                             |
 
 ## 分享模式
 

package/dist/mcp/generated/index.json

@@ -1,6 +1,6 @@
 {
   "version": "2.0.0",
-  "generatedAt": "2026-04-27T03:31:37.817Z",
+  "generatedAt": "2026-05-14T09:46:52.773Z",
   "domains": {
     "message": {
       "label": "消息展示",

package/dist/utils/css-sanitizer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 过滤 CSS 属性值，仅保留白名单中的安全属性，
+ * 并拦截 url()、expression()、javascript: 等危险模式。
+ *
+ * 注意：此函数是第二道防线。第一道由 DOMPurify 处理（过滤 script/event handler/javascript: URI 等）。
+ */
+export declare const sanitizeCSS: (cssValue: string) => string;

package/dist/utils/html-sanitizer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 轻量级 HTML 片段净化，不自动闭合标签。
+ * 用于流式渲染中 html_inline / html_block token 的净化——
+ * DOMPurify 会把孤立的 `<font color="red">` 补成 `<font color="red"></font>`，
+ * 导致后续内容无法继承样式，因此流式场景需要使用此函数。
+ */
+export declare const sanitizeHtmlFragment: (html: string) => string;

package/dist/utils/index.d.ts

@@ -1,3 +1,5 @@
+export * from './css-sanitizer';
 export * from './file';
+export * from './html-sanitizer';
 export * from './markdown-completer';
 export * from './utils';

package/dist/utils/tokens-to-vnodes.d.ts

@@ -17,6 +17,12 @@ export interface TokenToVNodeOptions {
      * HTML 净化函数，用于处理 innerHTML 的内容
      */
     sanitize?: (html: string) => string;
+    /**
+     * HTML 片段净化函数，用于流式场景下 html_inline/html_block token 的净化。
+     * 与 sanitize 不同，此函数不会自动闭合未匹配的标签，
+     * 因为流式渲染中 HTML 标签可能被拆分到不同的 token 中。
+     */
+    sanitizeHtmlFragment?: (html: string) => string;
 }
 type TokenAttrs = [string, string][];
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/chat-x",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI，为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
   "main": "index.js",
   "bin": {
@@ -78,7 +78,7 @@
     "vitepress": "2.0.0-alpha.16",
     "vitest": "^4.0.18",
     "vue-tsc": "^3.1.4",
-    "@blueking/chat-helper": "0.0.2"
+    "@blueking/chat-helper": "0.0.4"
   },
   "scripts": {
     "dev": "vite --config vite.config.ts",