@ant-design/agentic-ui 2.30.24 → 2.30.26

package/dist/Plugins/mermaid/style.js

@@ -51,99 +51,89 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { useEditorStyleRegister } from "../../Hooks/useStyle";
+/** 根容器内边距（与 ant-agentic-plugin-mermaid 设计一致） */ var MERMAID_ROOT_PADDING_PX = 8;
+/** 左上角工具栏占位，避免与流程图节点重叠 */ var MERMAID_TOOLBAR_RESERVE_INLINE = 72;
 var genStyle = function genStyle(token) {
-    var gridLightColor = 'rgba(0, 0, 0, 0.08)';
-    var gridDarkColor = 'rgba(255, 255, 255, 0.14)';
-    var _obj;
-    return _obj = {}, _define_property(_obj, token.componentCls, {
+    return _define_property({}, token.componentCls, {
         marginBottom: '0.75em',
         cursor: 'default',
         userSelect: 'none',
-        padding: '0.75rem 0',
+        padding: MERMAID_ROOT_PADDING_PX,
         borderRadius: '1em',
         maxWidth: '800px',
         border: "1px solid ".concat(token.colorBorder),
         backgroundColor: token.colorBgContainer,
         minWidth: '240px',
-        minHeight: '200px',
+        minHeight: 'auto',
         display: 'flex',
         justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'stretch',
         flexDirection: 'column',
         position: 'relative',
-        isolation: 'isolate',
-        contain: 'layout style paint',
         overflow: 'hidden',
         transition: 'height 0.3s ease, min-height 0.3s ease',
-        '&-fullscreen': {
-            width: '100%',
-            maxWidth: '100%',
-            height: '100%'
-        },
         '&-toolbar-float': {
             position: 'absolute',
-            top: token.paddingSM,
-            insetInlineEnd: token.paddingSM,
-            left: 'auto',
+            top: MERMAID_ROOT_PADDING_PX,
+            insetInlineStart: MERMAID_ROOT_PADDING_PX,
+            insetInlineEnd: 'auto',
             zIndex: 10,
             display: 'flex',
             alignItems: 'center',
             gap: token.paddingXXS,
             pointerEvents: 'auto'
         },
-        '&-viewport': {
-            flex: 1,
+        /**
+       * 不用 flex:1 撑满父级，避免矮图下方大块留白；
+       * 内边距为工具栏与四周安全区，内容 flex 居中。
+       */ '&-viewport': {
             width: '100%',
-            minHeight: 220,
-            overflow: 'hidden',
+            minHeight: 120,
+            boxSizing: 'border-box',
+            paddingBlock: token.paddingLG,
+            paddingInlineStart: token.paddingLG + MERMAID_TOOLBAR_RESERVE_INLINE,
+            paddingInlineEnd: token.paddingLG,
+            overflow: 'auto',
             position: 'relative',
-            touchAction: 'none',
-            cursor: 'grab'
-        },
-        '&-viewport[data-mermaid-panning="true"]': {
-            cursor: 'grabbing'
-        },
-        '&-viewport[data-mermaid-grid="true"]': {
-            backgroundSize: '28px 28px',
-            backgroundImage: "radial-gradient(circle, ".concat(gridLightColor, " 1.2px, transparent 1.2px)")
-        },
-        '&-viewport[data-mermaid-grid="true"]&-dark-grid': {
-            backgroundImage: "radial-gradient(circle, ".concat(gridDarkColor, " 1.2px, transparent 1.2px)")
+            touchAction: 'auto',
+            cursor: 'default',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center'
         },
         '& [data-mermaid-container="true"]': {
             zIndex: 0,
             width: '100%',
-            minHeight: 220,
-            display: 'block',
+            maxWidth: '100%',
+            minHeight: 0,
+            display: 'flex',
+            flexDirection: 'column',
             justifyContent: 'center',
+            alignItems: 'center',
             position: 'relative',
-            isolation: 'isolate',
-            contain: 'layout style paint',
             overflow: 'visible',
-            transition: 'opacity 0.3s ease, height 0.3s ease, min-height 0.3s ease, max-height 0.3s ease',
-            '--mermaid-pan-x': '0px',
-            '--mermaid-pan-y': '0px',
-            '--mermaid-scale': 1
+            transition: 'opacity 0.3s ease, height 0.3s ease, min-height 0.3s ease, max-height 0.3s ease'
         },
-        '& [data-mermaid-wrapper]': {
+        /**
+       * 须为确定宽度，子 SVG 的 width:100% 才能按 viewBox 算出高度；
+       * 使用 max-content 时百分比参照异常，易出现「有 DOM 但看不见」。
+       */ '& [data-mermaid-wrapper]': {
             position: 'relative',
-            width: 'max-content',
-            maxWidth: 'none',
+            width: '100%',
+            maxWidth: '100%',
+            boxSizing: 'border-box',
             overflow: 'visible',
-            isolation: 'isolate',
-            contain: 'layout style paint',
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'flex-start',
+            display: 'block',
             minHeight: 0,
-            transform: 'translate(var(--mermaid-pan-x), var(--mermaid-pan-y)) scale(var(--mermaid-scale))',
-            transformOrigin: '0 0',
-            willChange: 'transform'
+            marginInline: 'auto'
         },
         '& [data-mermaid-svg="true"]': {
+            display: 'block',
+            width: '100%',
             maxWidth: '100%',
             height: 'auto',
-            overflow: 'hidden'
+            overflow: 'visible'
         },
         '&-error': {
             textAlign: 'center',
@@ -181,6 +171,12 @@ var genStyle = function genStyle(token) {
             }
         },
         '& svg': {
+            '& foreignObject': {
+                overflow: 'visible'
+            },
+            '& foreignObject div': {
+                overflow: 'visible'
+            },
             '& .node': {
                 '& rect, & circle, & ellipse, & polygon': {
                     stroke: token.colorBorder,
@@ -188,9 +184,13 @@ var genStyle = function genStyle(token) {
                     fill: token.colorBgContainer
                 }
             },
-            '& text': {
-                dominantBaseline: 'middle',
-                textAnchor: 'middle',
+            /**
+         * 勿改 text-anchor / dominant-baseline：Mermaid 11 用 y、tspan 定位，
+         * 全局 middle 会把流程图标签挪出框外，看起来像空白。
+         */ '& text': {
+                fill: "".concat(token.colorText, " !important")
+            },
+            '& tspan': {
                 fill: "".concat(token.colorText, " !important")
             },
             '& .nodeLabel': {
@@ -207,9 +207,7 @@ var genStyle = function genStyle(token) {
                 fill: "".concat(token.colorText, " !important")
             }
         }
-    }), _define_property(_obj, "".concat(token.componentCls, '[data-mermaid-theme="dark"] ').concat(token.componentCls, '-viewport[data-mermaid-grid="true"]'), {
-        backgroundImage: "radial-gradient(circle, ".concat(gridDarkColor, " 1.2px, transparent 1.2px)")
-    }), _obj;
+    });
 };
 export function useStyle(prefixCls) {
     return useEditorStyleRegister('agentic-plugin-mermaid', function(token) {

package/dist/Plugins/mermaid/utils.js

@@ -35,6 +35,19 @@ function _async_to_generator(fn) {
         });
     };
 }
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _instanceof(left, right) {
     if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
         return !!right[Symbol.hasInstance](left);
@@ -69,6 +82,45 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -191,6 +243,16 @@ var DEFAULT_LIGHT_BORDER_COLOR = '#d9d9d9';
 var DEFAULT_DARK_BORDER_COLOR = '#434343';
 var DEFAULT_PRIMARY_COLOR = '#1677ff';
 var DEFAULT_FONT_FAMILY = 'Inter, -apple-system, Segoe UI, sans-serif';
+/**
+ * 与宿主样式共存：流程图默认用 foreignObject 画 HTML 标签，易被外层 CSS 影响；
+ * 顶层与 flowchart 同时关闭 htmlLabels，强制走 SVG 文本（Mermaid 11 读取二者之一）。
+ */ var MERMAID_BASE_INIT = {
+    startOnLoad: false,
+    htmlLabels: false,
+    flowchart: {
+        htmlLabels: false
+    }
+};
 var parseColorToRgb = function parseColorToRgb(color) {
     var normalizedColor = color.trim().toLowerCase();
     var shortHexMatch = normalizedColor.match(/^#([0-9a-f]{3})$/i);
@@ -318,17 +380,14 @@ export var applyMermaidTheme = function applyMermaidTheme(api, themeConfig) {
         return;
     }
     if (!themeConfig) {
-        api.initialize({
-            startOnLoad: false
-        });
+        api.initialize(_object_spread({}, MERMAID_BASE_INIT));
         return;
     }
-    api.initialize({
-        startOnLoad: false,
+    api.initialize(_object_spread_props(_object_spread({}, MERMAID_BASE_INIT), {
         theme: 'base',
         darkMode: themeConfig.darkMode,
         themeVariables: themeConfig.themeVariables
-    });
+    }));
 };
 /**
  * 加载 Mermaid 库
@@ -370,7 +429,7 @@ export var applyMermaidTheme = function applyMermaidTheme(api, themeConfig) {
     var svgElement = svgDoc.querySelector('svg');
     if (svgElement) {
         var existingStyle = svgElement.getAttribute('style') || '';
-        var newStyle = "".concat(existingStyle, "; max-width: 100%; height: auto; overflow: hidden;").trim();
+        var newStyle = "".concat(existingStyle, "; display: block; max-width: 100%; width: 100%; height: auto; overflow: visible;").trim();
         svgElement.setAttribute('style', newStyle);
         svgElement.setAttribute('data-mermaid-svg', 'true');
         svgElement.setAttribute('class', (svgElement.getAttribute('class') || '') + ' mermaid-isolated');
@@ -386,7 +445,7 @@ export var applyMermaidTheme = function applyMermaidTheme(api, themeConfig) {
         tempDiv.innerHTML = svg;
         var extractedSvg = tempDiv.querySelector('svg');
         if (extractedSvg) {
-            extractedSvg.setAttribute('style', 'max-width: 100%; height: auto; overflow: hidden;');
+            extractedSvg.setAttribute('style', 'display: block; max-width: 100%; width: 100%; height: auto; overflow: visible;');
             extractedSvg.setAttribute('data-mermaid-svg', 'true');
             wrapper.appendChild(extractedSvg);
         } else {

package/dist/Schema/SchemaForm/index.js

@@ -352,7 +352,7 @@ import { I18nContext, compileTemplate } from "../../I18n";
                 },
                 block: true,
                 icon: /*#__PURE__*/ React.createElement(Plus, null)
-            }, (locale === null || locale === void 0 ? void 0 : locale['schemaForm.addItem']) || '添加', " ", getPropertyTitle(property, key))));
+            }, (locale === null || locale === void 0 ? void 0 : locale['schemaForm.addItem']) || '添加', ' ', getPropertyTitle(property, key))));
         });
     }, [
         readonly,

package/dist/Workspace/File/FileComponent.js

@@ -241,8 +241,8 @@ import { Empty } from "antd";
 import classNames from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { useRefFunction } from "../../Hooks/useRefFunction";
 import { ActionIconBox } from "../../Components/ActionIconBox";
+import { useRefFunction } from "../../Hooks/useRefFunction";
 import { I18nContext, compileTemplate } from "../../I18n";
 import { formatFileSize, formatLastModified } from "../utils";
 import { fileTypeProcessor, isImageFile } from "./FileTypeProcessor";

package/dist/Workspace/File/PreviewComponent.js

@@ -270,7 +270,14 @@ var PlaceholderContent = function PlaceholderContent(param) {
             }, /*#__PURE__*/ React.createElement(Spin, {
                 size: "large",
                 tip: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.processing']) || '正在处理文件...'
-            }));
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-spin-anchor"), hashId),
+                style: {
+                    minHeight: 64,
+                    width: '100%'
+                },
+                "aria-hidden": true
+            })));
         }
         if (contentState.status === 'error') {
             return /*#__PURE__*/ React.createElement(PlaceholderContent, {
@@ -357,7 +364,14 @@ var PlaceholderContent = function PlaceholderContent(param) {
                 }, /*#__PURE__*/ React.createElement(Spin, {
                     size: "large",
                     tip: (locale === null || locale === void 0 ? void 0 : locale['workspace.loadingFileContent']) || '正在加载文件内容...'
-                }));
+                }, /*#__PURE__*/ React.createElement("div", {
+                    className: classNames("".concat(prefixCls, "-spin-anchor"), hashId),
+                    style: {
+                        minHeight: 64,
+                        width: '100%'
+                    },
+                    "aria-hidden": true
+                })));
             }
             return /*#__PURE__*/ React.createElement("div", {
                 className: classNames("".concat(prefixCls, "-text"), hashId)

package/dist/Workspace/File/index.d.ts

@@ -1,6 +1,6 @@
 export { FileComponent as File } from './FileComponent';
 export { PreviewComponent } from './PreviewComponent';
 export type { PreviewComponentProps } from './PreviewComponent';
+export { getFileTypeName } from '../types';
 export type { FileActionRef, FileBuiltinActions, FileNode, FileProps, FileRenderContext, FileType, GroupNode, } from '../types';
 export { getFileTypeIcon, getGroupIcon } from './utils';
-export { getFileTypeName } from '../types';

package/dist/Workspace/File/index.js

@@ -1,4 +1,5 @@
 export { FileComponent as File } from "./FileComponent";
 export { PreviewComponent } from "./PreviewComponent";
-export { getFileTypeIcon, getGroupIcon } from "./utils";
+// 导出类型和工具函数
 export { getFileTypeName } from "../types";
+export { getFileTypeIcon, getGroupIcon } from "./utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.30.24",
+  "version": "2.30.26",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "playwright:install": "playwright install --with-deps chromium",
     "prepare": "husky install && dumi setup",
+    "prepublishOnly": "npm run build",
     "prettier": "prettier --write \"{src,docs,test}/**/*.{js,jsx,ts,tsx,css,less,json,md}\"",
     "preview": "pnpm dumi preview",
     "report:demo": "node scripts/generateDemoReport.js",