@ant-design/agentic-ui 2.14.1 → 2.16.1

package/dist/Plugins/mermaid/Mermaid.js

@@ -171,6 +171,7 @@ function _ts_generator(thisArg, body) {
 import React, { lazy, Suspense, useEffect, useMemo, useRef } from "react";
 import { useGetSetState } from "react-use";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
+import { isCodeBlockLikelyComplete } from "../../MarkdownEditor/editor/utils/findMatchingClose";
 var mermaidLoader = null;
 /**
  * 加载 Mermaid 库
@@ -214,27 +215,7 @@ var mermaidLoader = null;
  * 检查 Mermaid 代码是否可能完整
  * 用于流式输入时判断是否应该尝试渲染
  */ var isCodeLikelyComplete = function(code) {
-    var trimmed = code.trim();
-    if (!trimmed) return false;
-    // 检查是否包含基本的 Mermaid 图表类型关键字
-    var hasChartType = trimmed.includes('graph') || trimmed.includes('sequenceDiagram') || trimmed.includes('gantt') || trimmed.includes('pie') || trimmed.includes('classDiagram') || trimmed.includes('stateDiagram') || trimmed.includes('erDiagram') || trimmed.includes('journey') || trimmed.includes('gitgraph') || trimmed.includes('flowchart');
-    if (!hasChartType) return false;
-    // 检查基本结构完整性（简单启发式检查）
-    // 如果代码很短，可能是正在输入中
-    if (trimmed.length < 10) return false;
-    // 检查是否以常见的不完整模式结尾
-    var incompletePatterns = [
-        /graph\s*$/i,
-        /-->?\s*$/,
-        /\[.*$/,
-        /\(.*$/,
-        /{.*$/
-    ];
-    // 如果匹配不完整模式，可能还在输入中
-    var endsWithIncomplete = incompletePatterns.some(function(pattern) {
-        return pattern.test(trimmed);
-    });
-    return !endsWithIncomplete;
+    return isCodeBlockLikelyComplete(code, 'mermaid');
 };
 var MermaidRendererImpl = function(props) {
     var _props_element;
@@ -307,9 +288,9 @@ var MermaidRendererImpl = function(props) {
         // 检查代码是否可能完整
         var likelyComplete = isCodeLikelyComplete(nextCode);
         // 防抖延迟：根据代码变化频率动态调整
-        // 如果代码变化频繁（流式输入），使用更长的延迟
-        var baseDelay = 300;
-        var typingDelay = changeCountRef.current > 3 ? 1000 : 800; // 频繁变化时延长到 1 秒
+        // 如果代码变化频繁（流式输入），使用更长的延迟以减少抖动
+        var baseDelay = 500; // 增加基础延迟
+        var typingDelay = changeCountRef.current > 3 ? 1500 : 1200; // 频繁变化时延长到 1.5 秒
         var delay = currentState.code ? likelyComplete ? baseDelay : typingDelay : 0;
         // 第一层防抖：检测代码变化
         timer.current = window.setTimeout(function() {
@@ -321,10 +302,10 @@ var MermaidRendererImpl = function(props) {
                 return;
             }
             // 第二层防抖：实际渲染
-            // 如果代码可能不完整，再等待一段时间
-            var finalDelay = likelyComplete ? 0 : 500;
+            // 如果代码可能不完整，再等待一段时间，增加延迟以减少抖动
+            var finalDelay = likelyComplete ? 200 : 800; // 增加延迟时间
             renderTimer.current = window.setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-                var _mermaidRef_current, api, _tmp, trimmedCode, svg, wrapper, parser, svgDoc, svgElement, existingStyle, newStyle, allElements, tempDiv, extractedSvg, error, api1, finalCode, parseError, tempElement;
+                var _mermaidRef_current, api, _tmp, trimmedCode, svg, container, error, api1, finalCode, parseError, tempElement;
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
@@ -376,46 +357,62 @@ var MermaidRendererImpl = function(props) {
                         case 4:
                             svg = _state.sent().svg;
                             if (divRef.current) {
-                                // 清理旧内容
-                                divRef.current.innerHTML = '';
-                                // 创建隔离的容器包装 SVG
-                                wrapper = document.createElement('div');
-                                wrapper.style.cssText = "\n            position: relative;\n            width: 100%;\n            max-width: 100%;\n            overflow: hidden;\n            isolation: isolate;\n            contain: layout style paint;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n          ";
-                                // 解析 SVG 并添加隔离属性
-                                parser = new DOMParser();
-                                svgDoc = parser.parseFromString(svg, 'image/svg+xml');
-                                svgElement = svgDoc.querySelector('svg');
-                                if (svgElement) {
-                                    // 确保 SVG 不会溢出
-                                    existingStyle = svgElement.getAttribute('style') || '';
-                                    newStyle = "".concat(existingStyle, "; max-width: 100%; height: auto; overflow: hidden;").trim();
-                                    svgElement.setAttribute('style', newStyle);
-                                    // 添加隔离属性和类名
-                                    svgElement.setAttribute('data-mermaid-svg', 'true');
-                                    svgElement.setAttribute('class', (svgElement.getAttribute('class') || '') + ' mermaid-isolated');
-                                    // 限制 SVG 内部元素的样式影响范围
-                                    allElements = svgElement.querySelectorAll('*');
-                                    allElements.forEach(function(el) {
-                                        // 确保内部元素不会影响外部
-                                        if (el instanceof SVGElement) {
-                                            el.setAttribute('data-mermaid-internal', 'true');
-                                        }
-                                    });
-                                    wrapper.appendChild(svgElement);
-                                } else {
-                                    // 如果解析失败，直接使用原始 SVG，但添加包装
-                                    tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = svg;
-                                    extractedSvg = tempDiv.querySelector('svg');
-                                    if (extractedSvg) {
-                                        extractedSvg.setAttribute('style', 'max-width: 100%; height: auto; overflow: hidden;');
-                                        extractedSvg.setAttribute('data-mermaid-svg', 'true');
-                                        wrapper.appendChild(extractedSvg);
+                                // 使用更平滑的更新方式，避免抖动
+                                // 先设置透明度，然后更新内容，最后恢复透明度
+                                container = divRef.current;
+                                // 如果已有内容，先淡出
+                                if (container.children.length > 0) {
+                                    container.style.opacity = '0';
+                                    container.style.transition = 'opacity 0.2s ease-in-out';
+                                }
+                                // 使用 requestAnimationFrame 确保平滑更新
+                                requestAnimationFrame(function() {
+                                    // 清理旧内容
+                                    container.innerHTML = '';
+                                    // 创建隔离的容器包装 SVG
+                                    var wrapper = document.createElement('div');
+                                    wrapper.style.cssText = "\n                position: relative;\n                width: 100%;\n                max-width: 100%;\n                overflow: hidden;\n                isolation: isolate;\n                contain: layout style paint;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                min-height: 200px; /* 保持最小高度，避免尺寸抖动 */\n              ";
+                                    // 解析 SVG 并添加隔离属性
+                                    var parser = new DOMParser();
+                                    var svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+                                    var svgElement = svgDoc.querySelector('svg');
+                                    if (svgElement) {
+                                        // 确保 SVG 不会溢出
+                                        var existingStyle = svgElement.getAttribute('style') || '';
+                                        var newStyle = "".concat(existingStyle, "; max-width: 100%; height: auto; overflow: hidden;").trim();
+                                        svgElement.setAttribute('style', newStyle);
+                                        // 添加隔离属性和类名
+                                        svgElement.setAttribute('data-mermaid-svg', 'true');
+                                        svgElement.setAttribute('class', (svgElement.getAttribute('class') || '') + ' mermaid-isolated');
+                                        // 限制 SVG 内部元素的样式影响范围
+                                        var allElements = svgElement.querySelectorAll('*');
+                                        allElements.forEach(function(el) {
+                                            // 确保内部元素不会影响外部
+                                            if (el instanceof SVGElement) {
+                                                el.setAttribute('data-mermaid-internal', 'true');
+                                            }
+                                        });
+                                        wrapper.appendChild(svgElement);
                                     } else {
-                                        wrapper.innerHTML = svg;
+                                        // 如果解析失败，直接使用原始 SVG，但添加包装
+                                        var tempDiv = document.createElement('div');
+                                        tempDiv.innerHTML = svg;
+                                        var extractedSvg = tempDiv.querySelector('svg');
+                                        if (extractedSvg) {
+                                            extractedSvg.setAttribute('style', 'max-width: 100%; height: auto; overflow: hidden;');
+                                            extractedSvg.setAttribute('data-mermaid-svg', 'true');
+                                            wrapper.appendChild(extractedSvg);
+                                        } else {
+                                            wrapper.innerHTML = svg;
+                                        }
                                     }
-                                }
-                                divRef.current.appendChild(wrapper);
+                                    container.appendChild(wrapper);
+                                    // 恢复透明度，实现淡入效果
+                                    requestAnimationFrame(function() {
+                                        container.style.opacity = '1';
+                                        container.style.transition = 'opacity 0.3s ease-in-out';
+                                    });
+                                });
                             }
                             // 渲染成功，重置状态
                             setState({
@@ -566,6 +563,7 @@ var MermaidRendererImpl = function(props) {
         style: {
             width: '100%',
             maxWidth: '100%',
+            minHeight: '200px',
             display: 'flex',
             justifyContent: 'center',
             visibility: snapshot.code && !snapshot.error ? 'visible' : 'hidden',
@@ -575,7 +573,9 @@ var MermaidRendererImpl = function(props) {
             contain: 'layout style paint',
             overflow: 'hidden',
             // 防止 SVG 样式影响外部
-            pointerEvents: snapshot.code && !snapshot.error ? 'auto' : 'none'
+            pointerEvents: snapshot.code && !snapshot.error ? 'auto' : 'none',
+            // 添加过渡效果，使更新更平滑
+            transition: 'opacity 0.3s ease-in-out, min-height 0.2s ease-in-out'
         },
         // 使用 data 属性标记，方便样式隔离
         "data-mermaid-container": "true"

package/dist/Plugins/mermaid/index.js

@@ -253,7 +253,7 @@ import { Mermaid } from "./Mermaid";
             } catch (error) {}
         }
     }, /*#__PURE__*/ React.createElement(Copy, null)))), /*#__PURE__*/ React.createElement("div", {
-        className: 'ant-agentic-md-editor-hidden'
+        "data-hidden": true
     }, props.children)), /*#__PURE__*/ React.createElement(Mermaid, {
         element: props.element
     }));

package/dist/ThoughtChainList/index.js

@@ -19,6 +19,20 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -46,6 +60,10 @@ 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_destructuring_empty(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -375,11 +393,12 @@ var ThoughtChainContent = /*#__PURE__*/ React.memo(function(_param) {
     var _thoughtChainList_at, _thoughtChainList_at1;
     var locale = useContext(I18nContext).locale;
     var thoughtChainList = props.thoughtChainList, loading = props.loading, _props_bubble = props.//@ts-ignore
-    bubble, bubble = _props_bubble === void 0 ? props.chatItem : _props_bubble, style = props.style, compact = props.compact, markdownRenderProps = props.markdownRenderProps, _props_finishAutoCollapse = props.finishAutoCollapse, finishAutoCollapse = _props_finishAutoCollapse === void 0 ? true : _props_finishAutoCollapse, onDocMetaClick = props.onDocMetaClick;
+    bubble, bubble = _props_bubble === void 0 ? props.chatItem : _props_bubble, customStyle = props.style, compact = props.compact, markdownRenderProps = props.markdownRenderProps, _props_finishAutoCollapse = props.finishAutoCollapse, finishAutoCollapse = _props_finishAutoCollapse === void 0 ? true : _props_finishAutoCollapse, onDocMetaClick = props.onDocMetaClick;
     var context = useContext(ConfigProvider.ConfigContext);
     var _React_useState = _sliced_to_array(React.useState(false), 2), collapse = _React_useState[0], setCollapse = _React_useState[1];
     var prefixCls = context === null || context === void 0 ? void 0 : context.getPrefixCls('thought-chain-list');
     var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
+    var restStyle = _extends({}, _object_destructuring_empty(customStyle || {}));
     var _React_useState1 = _sliced_to_array(React.useState(null), 2), docMeta = _React_useState1[0], setDocMeta = _React_useState1[1];
     // 为组件实例生成唯一ID，避免多个实例间的key冲突
     var instanceId = 'ThoughtChainList';
@@ -458,7 +477,7 @@ var ThoughtChainContent = /*#__PURE__*/ React.memo(function(_param) {
         locale: locale
     }), /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(prefixCls), hashId),
-        style: style
+        style: restStyle
     }, /*#__PURE__*/ React.createElement(motion.div, {
         transition: {
             duration: 0.3

package/dist/ThoughtChainList/style.js

@@ -53,6 +53,7 @@ function _object_spread_props(target, source) {
 import { resetComponent, useEditorStyleRegister } from "../Hooks/useStyle";
 var genStyle = function(token) {
     return _define_property({}, token.componentCls, {
+        padding: '12px',
         '*': {
             boxSizing: 'border-box'
         },

package/dist/Utils/loadCSS.js

@@ -1,6 +1,6 @@
 /**
  * @fileoverview CSS 异步加载工具
- * 
+ *
  * 提供动态加载 CSS 文件的功能，支持按需加载和缓存
  */ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -129,18 +129,18 @@ function _ts_generator(thisArg, body) {
 var loadedCSS = new Set();
 /**
  * 异步加载 CSS 文件
- * 
+ *
  * 对于 webpack 处理的 CSS 文件，应该使用动态 import 函数形式
  * webpack 会自动处理 CSS 的提取和加载
- * 
+ *
  * @param cssPath - CSS 文件路径（推荐使用函数形式的动态 import）
  * @returns Promise<void> 加载完成的 Promise
- * 
+ *
  * @example
  * ```typescript
  * // 推荐：使用动态 import 加载 CSS 模块（webpack 会自动处理）
  * await loadCSS(() => import('./katex.min.css'));
- * 
+ *
  * // 不推荐：直接使用字符串路径（仅适用于外部 URL）
  * await loadCSS('https://example.com/style.css');
  * ```
@@ -247,7 +247,7 @@ var loadedCSS = new Set();
 /**
  * 预加载 CSS 文件
  * 使用低优先级加载，不阻塞当前执行
- * 
+ *
  * @param cssPath - CSS 文件路径
  */ export var preloadCSS = function(cssPath) {
     if (typeof window === 'undefined') {

package/dist/WelcomeMessage/index.js

@@ -11,6 +11,24 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+function _object_destructuring_empty(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -96,13 +114,14 @@ import { useStyle } from "./style";
  * - 集成 Ant Design 主题系统
  * - 响应式布局适配
  */ export var WelcomeMessage = function(param) {
-    var title = param.title, description = param.description, classNames = param.classNames, titleAnimateProps = param.titleAnimateProps, descriptionAnimateProps = param.descriptionAnimateProps, style = param.style, rootClassName = param.rootClassName;
+    var title = param.title, description = param.description, classNames = param.classNames, titleAnimateProps = param.titleAnimateProps, descriptionAnimateProps = param.descriptionAnimateProps, customStyle = param.style, rootClassName = param.rootClassName;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var prefixCls = getPrefixCls('agentic-welcome');
     var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
+    var restStyle = _extends({}, _object_destructuring_empty(customStyle || {}));
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         className: classnames(prefixCls, hashId, rootClassName),
-        style: style
+        style: restStyle
     }, title && /*#__PURE__*/ React.createElement(TypingAnimation, _object_spread_props(_object_spread({
         as: "div"
     }, titleAnimateProps), {

package/dist/Workspace/Task/index.js

@@ -1,8 +1,8 @@
-import { Loading } from "../../Components/Loading";
 import { Check, CircleDashed, OctagonX } from "@sofa-design/icons";
 import { ConfigProvider } from "antd";
 import classNames from "classnames";
 import React, { useContext } from "react";
+import { Loading } from "../../Components/Loading";
 import { useTaskStyle } from "./style";
 var StatusIcon = function(param) {
     var status = param.status;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.14.1",
+  "version": "2.16.1",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -165,4 +165,4 @@
   "authors": [
     "qixian.cs@outlook.com"
   ]
-}
+}