@ant-design/agentic-ui 2.30.9 → 2.30.10

package/dist/Constants/mobile.d.ts

@@ -6,8 +6,8 @@
 export declare const TABLE_COL_WIDTH_MIN_COLUMNS = 5;
 /** 编辑模式表格：列数 >= 此值时才计算并渲染 data col 元素，否则仅渲染行号列 */
 export declare const TABLE_EDIT_COL_WIDTH_MIN_COLUMNS = 3;
-/** 表格默认列宽 (px)，与 style.ts 中 --agentic-ui-table-cell-min-width (120px) 保持一致 */
-export declare const TABLE_DEFAULT_COL_WIDTH = 120;
+/** 表格默认列宽 (px)，与 style.ts 中 --agentic-ui-table-cell-min-width (40px) 保持一致 */
+export declare const TABLE_DEFAULT_COL_WIDTH = 40;
 /** 表格最后一列最小宽度 (px)，弹性列用于吸收剩余空间 */
 export declare const TABLE_LAST_COL_MIN_WIDTH = 80;
 export declare const MOBILE_PADDING = "clamp(4px, 2vw, 12px)";

package/dist/Constants/mobile.js

@@ -8,7 +8,7 @@ var MOBILE_TABLE_MIN_CELL_WIDTH = 96;
  * - 列数 >= 5：使用 TABLE_DEFAULT_COL_WIDTH 固定宽度
  */ export var TABLE_COL_WIDTH_MIN_COLUMNS = 5;
 /** 编辑模式表格：列数 >= 此值时才计算并渲染 data col 元素，否则仅渲染行号列 */ export var TABLE_EDIT_COL_WIDTH_MIN_COLUMNS = 3;
-/** 表格默认列宽 (px)，与 style.ts 中 --agentic-ui-table-cell-min-width (120px) 保持一致 */ export var TABLE_DEFAULT_COL_WIDTH = 120;
+/** 表格默认列宽 (px)，与 style.ts 中 --agentic-ui-table-cell-min-width (40px) 保持一致 */ export var TABLE_DEFAULT_COL_WIDTH = 40;
 /** 表格最后一列最小宽度 (px)，弹性列用于吸收剩余空间 */ export var TABLE_LAST_COL_MIN_WIDTH = 80;
 export var MOBILE_PADDING = "clamp(".concat(MOBILE_PADDING_MIN, ", ").concat(MOBILE_PADDING_SCALE, ", ").concat(MOBILE_PADDING_MAX, ")");
 export var MOBILE_BREAKPOINT = '768px';

package/dist/MarkdownEditor/editor/utils/findMatchingClose.js

@@ -101,26 +101,46 @@
     }
     return false;
 }
-/**
- * 检查 Mermaid 代码是否完整
- */ function isMermaidCodeComplete(code) {
-    // 检查是否包含基本的 Mermaid 图表类型关键字
-    var hasChartType = code.includes('graph') || code.includes('sequenceDiagram') || code.includes('gantt') || code.includes('pie') || code.includes('classDiagram') || code.includes('stateDiagram') || code.includes('erDiagram') || code.includes('journey') || code.includes('gitgraph') || code.includes('flowchart');
-    if (!hasChartType) return false;
-    // 检查基本结构完整性
+var MERMAID_DIAGRAM_KEYWORDS = [
+    'graph',
+    'flowchart',
+    'sequenceDiagram',
+    'gantt',
+    'pie',
+    'classDiagram',
+    'stateDiagram',
+    'erDiagram',
+    'journey',
+    'gitgraph',
+    'xychart-beta',
+    'mindmap',
+    'timeline',
+    'quadrantChart',
+    'sankey-beta',
+    'block-beta',
+    'packet-beta',
+    'kanban',
+    'architecture-beta',
+    'requirementDiagram',
+    'zenuml',
+    'C4Context',
+    'C4Container',
+    'C4Component',
+    'C4Deployment'
+];
+var MERMAID_INCOMPLETE_TAIL = [
+    /graph\s*$/i,
+    /-->?\s*$/
+];
+function isMermaidCodeComplete(code) {
+    if (!MERMAID_DIAGRAM_KEYWORDS.some(function(kw) {
+        return code.includes(kw);
+    })) return false;
     if (code.length < 10) return false;
-    // 检查括号匹配
-    var hasUnclosedBrackets = checkUnclosedBrackets(code);
-    if (hasUnclosedBrackets) return false;
-    // 检查是否以常见的不完整模式结尾
-    var incompletePatterns = [
-        /graph\s*$/i,
-        /-->?\s*$/
-    ];
-    var endsWithIncomplete = incompletePatterns.some(function(pattern) {
-        return pattern.test(code);
+    if (checkUnclosedBrackets(code)) return false;
+    return !MERMAID_INCOMPLETE_TAIL.some(function(re) {
+        return re.test(code);
     });
-    return !endsWithIncomplete;
 }
 /**
  * 检查代码块是否完整（基于代码内容）

package/dist/MarkdownEditor/style.js

@@ -64,8 +64,8 @@ var TABLE_CELL = {
     textAlign: 'left',
     lineHeight: '24px',
     fontSize: '1em',
-    minWidth: 'var(--agentic-ui-table-cell-min-width, 120px)',
-    width: 'var(--agentic-ui-table-cell-min-width, 120px)',
+    minWidth: 'var(--agentic-ui-table-cell-min-width, 40px)',
+    width: 'var(--agentic-ui-table-cell-min-width, 40px)',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -155,6 +155,8 @@ var genTableStyle = function genTableStyle(token, mobileBreakpoint, mobilePaddin
             borderBottom: 'none'
         }), _define_property(_obj, 'tr td:first-child:not(.config-td)', {
             fontWeight: 600
+        }), _define_property(_obj, 'tbody tr:not(.config-tr)', {
+            animation: 'agenticTableRowFadeIn 0.3s ease both'
         }), _define_property(_obj, 'tbody tr:not(.config-tr):hover', {
             background: 'linear-gradient(var(--agentic-ui-table-hover-bg, rgba(0, 0, 0, 0.04)), var(--agentic-ui-table-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--agentic-ui-table-cell-bg, #ffffff), var(--agentic-ui-table-cell-bg, #ffffff))'
         }), _define_property(_obj, "@media (max-width: ".concat(mobileBreakpoint, ")"), {
@@ -295,6 +297,15 @@ var genTableStyle = function genTableStyle(token, mobileBreakpoint, mobilePaddin
         '&:hover': {
             color: '#52c41a'
         }
+    }), _define_property(_obj1, '@keyframes agenticTableRowFadeIn', {
+        from: {
+            opacity: 0,
+            transform: 'translateY(4px)'
+        },
+        to: {
+            opacity: 1,
+            transform: 'translateY(0)'
+        }
     }), _obj1;
 };
 var genStyle = function genStyle(token) {

package/dist/MarkdownEditor/types.d.ts

@@ -344,7 +344,7 @@ export type MarkdownEditorProps = {
      * - `--agentic-ui-table-header-bg` 表头背景色，默认 #f7f7f9
      * - `--agentic-ui-table-hover-bg` 行悬停背景色，默认 rgba(0,0,0,0.04)
      * - `--agentic-ui-table-cell-bg` 单元格背景色，默认 #ffffff
-     * - `--agentic-ui-table-cell-min-width` 单元格最小宽度，默认 120px
+     * - `--agentic-ui-table-cell-min-width` 单元格最小宽度，默认 40px
      * - `--agentic-ui-table-cell-padding` 单元格内边距，默认 16px 12px
      * @example style={{ ['--agentic-ui-table-border-color']: '#ddd', ['--agentic-ui-table-header-bg']: '#f0f0f0' } as React.CSSProperties}
      */

package/dist/MarkdownRenderer/markdownReactShared.js

@@ -684,7 +684,7 @@ var extractLanguageFromClassName = function extractLanguageFromClassName(classNa
                     whiteSpace: 'normal',
                     maxWidth: '20%'
                 },
-                children: children
+                children: wrapAnimation(children)
             }));
         },
         td: function td(props) {
@@ -698,7 +698,7 @@ var extractLanguageFromClassName = function extractLanguageFromClassName(classNa
                     whiteSpace: 'normal',
                     maxWidth: '20%'
                 },
-                children: children
+                children: wrapAnimation(children)
             }));
         },
         // input[type=checkbox]：task list 的 checkbox（兜底，主逻辑在 li 中）

package/dist/MarkdownRenderer/renderers/MermaidRenderer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { RendererBlockProps } from '../types';
 /**
- * Mermaid 图表渲染器——复用 MarkdownEditor 的 MermaidRendererImpl。
- * 将代码块文本包装为 CodeNode 格式后直接传递给已有的 Mermaid 渲染组件。
+ * Mermaid 图表渲染器
+ * 加载 mermaid 库期间展示源码预览，加载完成后渲染图表。
  */
 export declare const MermaidBlockRenderer: React.FC<RendererBlockProps>;

package/dist/MarkdownRenderer/renderers/MermaidRenderer.js

@@ -1,5 +1,157 @@
-import React, { useMemo } from "react";
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
+    return d(g, "next", {
+        value: verb(0)
+    }), d(g, "throw", {
+        value: verb(1)
+    }), d(g, "return", {
+        value: verb(2)
+    }), typeof Symbol === "function" && d(g, Symbol.iterator, {
+        value: function() {
+            return this;
+        }
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+import React, { lazy, Suspense, useMemo } from "react";
+import { isBrowser } from "../../Plugins/mermaid/env";
+import { MermaidCodePreview } from "../../Plugins/mermaid/MermaidFallback";
 import { MermaidRendererImpl } from "../../Plugins/mermaid/MermaidRendererImpl";
+import { loadMermaid } from "../../Plugins/mermaid/utils";
+var LazyMermaidRenderer = /*#__PURE__*/ lazy(function() {
+    return _async_to_generator(function() {
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    return [
+                        4,
+                        loadMermaid()
+                    ];
+                case 1:
+                    _state.sent();
+                    return [
+                        2,
+                        {
+                            default: MermaidRendererImpl
+                        }
+                    ];
+            }
+        });
+    })();
+});
 var extractTextContent = function extractTextContent1(children) {
     var _children_props;
     if (typeof children === 'string') return children;
@@ -11,8 +163,8 @@ var extractTextContent = function extractTextContent1(children) {
     return '';
 };
 /**
- * Mermaid 图表渲染器——复用 MarkdownEditor 的 MermaidRendererImpl。
- * 将代码块文本包装为 CodeNode 格式后直接传递给已有的 Mermaid 渲染组件。
+ * Mermaid 图表渲染器
+ * 加载 mermaid 库期间展示源码预览，加载完成后渲染图表。
  */ export var MermaidBlockRenderer = function MermaidBlockRenderer(props) {
     var children = props.children;
     var code = extractTextContent(children);
@@ -31,13 +183,18 @@ var extractTextContent = function extractTextContent1(children) {
         code
     ]);
     if (!code.trim()) return null;
+    if (!isBrowser()) return null;
     return /*#__PURE__*/ React.createElement("div", {
         "data-be": "mermaid",
         style: {
             margin: '1em 0'
         }
-    }, /*#__PURE__*/ React.createElement(MermaidRendererImpl, {
+    }, /*#__PURE__*/ React.createElement(Suspense, {
+        fallback: /*#__PURE__*/ React.createElement(MermaidCodePreview, {
+            code: code
+        })
+    }, /*#__PURE__*/ React.createElement(LazyMermaidRenderer, {
         element: fakeElement
-    }));
+    })));
 };
 MermaidBlockRenderer.displayName = 'MermaidBlockRenderer';

package/dist/MarkdownRenderer/useStreaming.js

@@ -97,7 +97,8 @@ var STREAM_INCOMPLETE_REGEX = {
         /^[-+*]\s{1,3}(\*{1,3}|_{1,3})(?!\s)(?!.*\1$)[^\r\n]{0,1000}$/
     ],
     'inline-code': [
-        /^`[^`\r\n]{0,300}$/
+        /^`[^`\r\n]{0,300}$/,
+        /^`{2,}$/
     ]
 };
 var STREAMING_LOADING_PLACEHOLDER = '...';
@@ -301,12 +302,19 @@ var isInCodeBlock = function isInCodeBlock(text) {
         var chunk = text.slice(cache.processedLength);
         if (!chunk) return;
         cache.processedLength += chunk.length;
+        var wasInCodeBlock = isInCodeBlock(cache.completeMarkdown + cache.pending);
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
             for(var _iterator = chunk[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                 var char = _step.value;
                 cache.pending += char;
-                if (isInCodeBlock(cache.completeMarkdown + cache.pending)) {
+                var inCodeBlock = isInCodeBlock(cache.completeMarkdown + cache.pending);
+                if (inCodeBlock) {
+                    wasInCodeBlock = true;
+                    continue;
+                }
+                if (wasInCodeBlock) {
+                    wasInCodeBlock = false;
                     commitCache(cache);
                     continue;
                 }

package/dist/Plugins/mermaid/Mermaid.d.ts

@@ -3,38 +3,12 @@ import { CodeNode } from '../../MarkdownEditor/el';
 /**
  * Mermaid 组件 - Mermaid图表渲染组件
  *
- * 该组件使用Mermaid库渲染图表，支持流程图、时序图、甘特图等。
- * 使用 React.lazy 和 Suspense 实现代码分割和延迟加载，优化性能。
+ * 仅在代码块闭合（otherProps.finished !== false）时才渲染图表，
+ * 否则展示原始代码。加载过程中同样展示源码预览而非骨架屏。
  *
  * @component
- * @description Mermaid图表渲染组件，支持各种Mermaid图表类型
  * @param {Object} props - 组件属性
  * @param {CodeNode} props.element - 代码节点，包含Mermaid图表代码
- * @param {string} [props.element.value] - Mermaid图表代码字符串
- *
- * @example
- * ```tsx
- * <Mermaid
- *   element={{
- *     type: 'code',
- *     value: 'graph TD\nA[开始] --> B[处理] --> C[结束]'
- *   }}
- * />
- * ```
- *
- * @returns {React.ReactElement} 渲染的Mermaid图表组件
- *
- * @remarks
- * - 基于Mermaid库实现图表渲染
- * - 支持多种图表类型（流程图、时序图、甘特图等）
- * - 使用 React.lazy 和 Suspense 实现代码分割
- * - 提供延迟渲染优化性能
- * - 包含错误处理机制
- * - 支持空状态显示
- * - 提供美观的样式设计
- * - 禁用文本选择
- * - 居中显示图表
- * - 自动生成唯一ID
  */
 export declare const Mermaid: (props: {
     element: CodeNode;

package/dist/Plugins/mermaid/Mermaid.js

@@ -128,7 +128,7 @@ function _ts_generator(thisArg, body) {
 }
 import React, { lazy, Suspense } from "react";
 import { isBrowser } from "./env";
-import { MermaidFallback } from "./MermaidFallback";
+import { MermaidCodePreview } from "./MermaidFallback";
 import { MermaidRendererImpl } from "./MermaidRendererImpl";
 import { loadMermaid } from "./utils";
 /**
@@ -158,44 +158,27 @@ import { loadMermaid } from "./utils";
 /**
  * Mermaid 组件 - Mermaid图表渲染组件
  *
- * 该组件使用Mermaid库渲染图表，支持流程图、时序图、甘特图等。
- * 使用 React.lazy 和 Suspense 实现代码分割和延迟加载，优化性能。
+ * 仅在代码块闭合（otherProps.finished !== false）时才渲染图表，
+ * 否则展示原始代码。加载过程中同样展示源码预览而非骨架屏。
  *
  * @component
- * @description Mermaid图表渲染组件，支持各种Mermaid图表类型
  * @param {Object} props - 组件属性
  * @param {CodeNode} props.element - 代码节点，包含Mermaid图表代码
- * @param {string} [props.element.value] - Mermaid图表代码字符串
- *
- * @example
- * ```tsx
- * <Mermaid
- *   element={{
- *     type: 'code',
- *     value: 'graph TD\nA[开始] --> B[处理] --> C[结束]'
- *   }}
- * />
- * ```
- *
- * @returns {React.ReactElement} 渲染的Mermaid图表组件
- *
- * @remarks
- * - 基于Mermaid库实现图表渲染
- * - 支持多种图表类型（流程图、时序图、甘特图等）
- * - 使用 React.lazy 和 Suspense 实现代码分割
- * - 提供延迟渲染优化性能
- * - 包含错误处理机制
- * - 支持空状态显示
- * - 提供美观的样式设计
- * - 禁用文本选择
- * - 居中显示图表
- * - 自动生成唯一ID
  */ export var Mermaid = function Mermaid(props) {
+    var _props_element_otherProps;
     if (!isBrowser()) {
         return null;
     }
+    var isUnfinished = ((_props_element_otherProps = props.element.otherProps) === null || _props_element_otherProps === void 0 ? void 0 : _props_element_otherProps.finished) === false;
+    if (isUnfinished) {
+        return /*#__PURE__*/ React.createElement(MermaidCodePreview, {
+            code: props.element.value || ''
+        });
+    }
     return /*#__PURE__*/ React.createElement(Suspense, {
-        fallback: /*#__PURE__*/ React.createElement(MermaidFallback, null)
+        fallback: /*#__PURE__*/ React.createElement(MermaidCodePreview, {
+            code: props.element.value || ''
+        })
     }, /*#__PURE__*/ React.createElement(MermaidRenderer, {
         element: props.element
     }));

package/dist/Plugins/mermaid/MermaidFallback.d.ts

@@ -1,4 +1,7 @@
 /**
- * 加载中的占位组件
+ * Mermaid 源码预览组件
+ * 在加载 / 未闭合 / 等待渲染等阶段展示原始 Mermaid 代码
  */
-export declare const MermaidFallback: () => any;
+export declare const MermaidCodePreview: (props: {
+    code: string;
+}) => any;

package/dist/Plugins/mermaid/MermaidFallback.js

@@ -1,21 +1,24 @@
-import { ConfigProvider, Skeleton } from "antd";
+import { ConfigProvider } from "antd";
 import classNames from "clsx";
 import React, { useContext } from "react";
 import { useStyle } from "./style";
 /**
- * 加载中的占位组件
- */ export var MermaidFallback = function MermaidFallback() {
+ * Mermaid 源码预览组件
+ * 在加载 / 未闭合 / 等待渲染等阶段展示原始 Mermaid 代码
+ */ export var MermaidCodePreview = function MermaidCodePreview(props) {
     var context = useContext(ConfigProvider.ConfigContext);
     var baseCls = (context === null || context === void 0 ? void 0 : context.getPrefixCls('agentic-plugin-mermaid')) || 'agentic-plugin-mermaid';
     var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
-        className: classNames("".concat(baseCls, "-fallback"), hashId)
-    }, /*#__PURE__*/ React.createElement(Skeleton.Image, {
-        active: true,
+        className: classNames(baseCls, hashId),
+        contentEditable: false
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(baseCls, "-empty"), hashId)
+    }, /*#__PURE__*/ React.createElement("pre", {
         style: {
-            width: '100%',
-            minHeight: '200px',
-            maxWidth: '800px'
+            margin: 0,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word'
         }
-    })));
+    }, props.code))));
 };

package/dist/Plugins/mermaid/MermaidRendererImpl.d.ts

@@ -1,8 +1,4 @@
 import { CodeNode } from '../../MarkdownEditor/el';
-/**
- * Mermaid 渲染器组件实现
- * 负责实际的图表渲染逻辑
- */
 export declare const MermaidRendererImpl: (props: {
     element: CodeNode;
 }) => any;

package/dist/Plugins/mermaid/MermaidRendererImpl.js

@@ -4,10 +4,12 @@ import React, { useContext, useMemo, useRef } from "react";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
 import { useStyle } from "./style";
 import { useMermaidRender } from "./useMermaidRender";
-/**
- * Mermaid 渲染器组件实现
- * 负责实际的图表渲染逻辑
- */ export var MermaidRendererImpl = function MermaidRendererImpl(props) {
+var PRE_STYLE = {
+    margin: 0,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word'
+};
+export var MermaidRendererImpl = function MermaidRendererImpl(props) {
     var context = useContext(ConfigProvider.ConfigContext);
     var baseCls = (context === null || context === void 0 ? void 0 : context.getPrefixCls('agentic-plugin-mermaid')) || 'plugin-mermaid';
     var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
@@ -29,9 +31,9 @@ import { useMermaidRender } from "./useMermaidRender";
         renderedCode,
         isError
     ]);
-    var style = useMemo(function() {
+    var containerStyle = useMemo(function() {
         return {
-            visibility: isRendered ? 'visible' : 'hidden',
+            opacity: isRendered ? 1 : 0,
             pointerEvents: isRendered ? 'auto' : 'none',
             width: '100%',
             height: isRendered ? '100%' : '0',
@@ -42,8 +44,8 @@ import { useMermaidRender } from "./useMermaidRender";
     }, [
         isRendered
     ]);
-    var renderCode = props.element.value || '';
-    var dom = /*#__PURE__*/ React.createElement("div", {
+    var code = props.element.value || '';
+    return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
         className: classNames(baseCls, hashId),
         contentEditable: false
@@ -51,24 +53,15 @@ import { useMermaidRender } from "./useMermaidRender";
         contentEditable: false,
         ref: divRef,
         className: classNames(hashId),
-        style: style,
+        style: containerStyle,
         "data-mermaid-container": "true"
     }), error && /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(baseCls, "-error"), hashId)
     }, /*#__PURE__*/ React.createElement("pre", {
-        style: {
-            margin: 0,
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word'
-        }
-    }, renderCode)), !renderedCode && !error && /*#__PURE__*/ React.createElement("div", {
+        style: PRE_STYLE
+    }, code)), !renderedCode && !error && /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(baseCls, "-empty"), hashId)
     }, /*#__PURE__*/ React.createElement("pre", {
-        style: {
-            margin: 0,
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word'
-        }
-    }, renderCode)));
-    return wrapSSR(dom);
+        style: PRE_STYLE
+    }, code))));
 };

package/dist/Plugins/mermaid/style.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-/**
- * Mermaid 插件样式 Hook
- * @param prefixCls - 样式类名前缀
- * @returns 样式相关的 wrapSSR 和 hashId
- */
 export declare function useStyle(prefixCls?: string): {
     hashId: string;
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;

package/dist/Plugins/mermaid/style.js

@@ -53,7 +53,6 @@ function _object_spread_props(target, source) {
 import { useEditorStyleRegister } from "../../Hooks/useStyle";
 var genStyle = function genStyle(token) {
     return _define_property({}, token.componentCls, {
-        // 主容器样式
         marginBottom: '0.75em',
         cursor: 'default',
         userSelect: 'none',
@@ -68,23 +67,21 @@ var genStyle = function genStyle(token) {
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'column',
-        // 增加隔离：防止内容溢出影响其他元素
         position: 'relative',
         isolation: 'isolate',
         contain: 'layout style paint',
         overflow: 'hidden',
-        // 渲染容器样式
+        transition: 'height 0.3s ease, min-height 0.3s ease',
         '& [data-mermaid-container="true"]': {
             width: '100%',
             display: 'flex',
             justifyContent: 'center',
-            // 增加隔离样式
             position: 'relative',
             isolation: 'isolate',
             contain: 'layout style paint',
-            overflow: 'hidden'
+            overflow: 'hidden',
+            transition: 'opacity 0.3s ease, height 0.3s ease, min-height 0.3s ease, max-height 0.3s ease'
         },
-        // SVG 包装器样式（用于动态创建的 wrapper）
         '& [data-mermaid-wrapper]': {
             position: 'relative',
             width: '100%',
@@ -97,87 +94,47 @@ var genStyle = function genStyle(token) {
             alignItems: 'center',
             minHeight: '200px'
         },
-        // SVG 元素样式
         '& [data-mermaid-svg="true"]': {
             maxWidth: '100%',
             height: 'auto',
             overflow: 'hidden'
         },
-        // SVG 内部元素样式
-        '& [data-mermaid-internal="true"]': {
-        },
-        // 加载状态样式
-        '&-loading': {
-            textAlign: 'center',
-            color: '#6B7280',
-            padding: '0.5rem',
-            position: 'relative',
-            zIndex: 1,
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            minHeight: '200px',
-            // Skeleton 样式优化
-            '& .ant-skeleton': {
-                width: '100%',
-                maxWidth: '800px'
-            },
-            '& .ant-skeleton-image': {
-                width: '100%',
-                minHeight: '200px',
-                borderRadius: '12px'
-            }
-        },
-        // 错误状态样式
         '&-error': {
             textAlign: 'center',
             color: 'rgba(239, 68, 68, 0.8)',
             padding: '0.5rem',
             flex: 1,
-            // 错误信息也增加隔离
             position: 'relative',
             zIndex: 1,
             wordBreak: 'break-word',
             maxWidth: '100%',
             height: '100%',
-            width: '100%'
+            width: '100%',
+            animation: 'agenticMermaidFadeIn 0.3s ease'
         },
-        // 空状态样式
         '&-empty': {
-            textAlign: 'center',
+            textAlign: 'left',
             color: '#6B7280',
-            padding: '0.5rem',
+            padding: '0.75rem 1.5rem',
             position: 'relative',
             zIndex: 1,
             flex: 1,
             height: '100%',
-            width: '100%'
-        },
-        // Fallback 组件样式
-        '&-fallback': {
-            marginBottom: '0.75em',
-            padding: '0.75rem 0',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#6B7280',
             width: '100%',
-            minHeight: '200px',
-            // Skeleton 样式优化
-            '& .ant-skeleton': {
-                width: '100%',
-                maxWidth: '800px'
+            fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+            fontSize: '0.875em',
+            lineHeight: 1.7,
+            animation: 'agenticMermaidFadeIn 0.3s ease'
+        },
+        '@keyframes agenticMermaidFadeIn': {
+            from: {
+                opacity: 0
             },
-            '& .ant-skeleton-image': {
-                width: '100%',
-                minHeight: '200px',
-                borderRadius: '12px'
+            to: {
+                opacity: 1
             }
         },
-        // SVG 渲染优化样式
         '& svg': {
-            // 节点样式
             '& .node': {
                 '& rect, & circle, & ellipse, & polygon': {
                     stroke: '#333',
@@ -185,37 +142,27 @@ var genStyle = function genStyle(token) {
                     fill: '#fff'
                 }
             },
-            // 强制设置所有文字样式
             '& text': {
-                // 确保文字不会被裁剪
                 dominantBaseline: 'middle',
                 textAnchor: 'middle'
             },
-            // 节点标签 - 更大的字体
             '& .nodeLabel': {
                 fontWeight: 500,
                 fill: '#333 !important'
             },
-            // 边标签 - 稍小一些但仍然清晰
             '& .edgeLabel': {
                 fill: '#666 !important'
             },
-            // 专门针对流程图的文字
             '& .flowchart-label': {
                 fill: '#333 !important'
             },
-            // 针对不同类型的标签
             '& .label': {
                 fill: '#333 !important'
             }
         }
     });
 };
-/**
- * Mermaid 插件样式 Hook
- * @param prefixCls - 样式类名前缀
- * @returns 样式相关的 wrapSSR 和 hashId
- */ export function useStyle(prefixCls) {
+export function useStyle(prefixCls) {
     return useEditorStyleRegister('agentic-plugin-mermaid', function(token) {
         var editorToken = _object_spread_props(_object_spread({}, token), {
             componentCls: ".".concat(prefixCls)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.30.9",
+  "version": "2.30.10",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -91,10 +91,10 @@
     "lodash-es": "^4.17.23",
     "lottie-react": "^2.4.1",
     "markdown-it": "^14.1.1",
-    "mdast-util-directive": "^3.1.0",
-    "micromark-extension-directive": "^4.0.0",
     "markdown-it-container": "^4.0.0",
+    "mdast-util-directive": "^3.1.0",
     "mermaid": "^11.12.2",
+    "micromark-extension-directive": "^4.0.0",
     "mustache": "^4.2.0",
     "nanoid": "^5.1.6",
     "partial-json": "^0.1.7",