@ant-design/agentic-ui 2.27.6 → 2.27.8

package/dist/Plugins/mermaid/Mermaid.js

@@ -1,11 +1,3 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -35,44 +27,6 @@ function _async_to_generator(fn) {
         });
     };
 }
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-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 _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();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 function _ts_generator(thisArg, body) {
     var f, y, t, g, _ = {
         label: 0,
@@ -168,447 +122,10 @@ 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 库
- * 使用单例模式确保只加载一次，并初始化配置
- */ export var loadMermaid = /*#__PURE__*/ function() {
-    var _ref = _async_to_generator(function() {
-        return _ts_generator(this, function(_state) {
-            if (typeof window === 'undefined') {
-                throw new Error('Mermaid 仅在浏览器环境中可用');
-            }
-            if (!mermaidLoader) {
-                // 使用 webpack 魔法注释确保正确代码分割和解析
-                // webpackChunkName 指定 chunk 名称，webpackMode 指定加载模式
-                mermaidLoader = import(/* webpackChunkName: "mermaid" */ /* webpackMode: "lazy" */ "mermaid").then(function(module) {
-                    var api = module.default;
-                    if (api === null || api === void 0 ? void 0 : api.initialize) {
-                        api.initialize({
-                            startOnLoad: false
-                        });
-                    }
-                    return api;
-                }).catch(function(error) {
-                    mermaidLoader = null;
-                    throw error;
-                });
-            }
-            return [
-                2,
-                mermaidLoader
-            ];
-        });
-    });
-    return function loadMermaid() {
-        return _ref.apply(this, arguments);
-    };
-}();
-/**
- * Mermaid 渲染器组件实现
- * 负责实际的图表渲染逻辑
- */ /**
- * 检查 Mermaid 代码是否可能完整
- * 用于流式输入时判断是否应该尝试渲染
- */ var isCodeLikelyComplete = function(code) {
-    return isCodeBlockLikelyComplete(code, 'mermaid');
-};
-var MermaidRendererImpl = function(props) {
-    var _props_element;
-    var _useGetSetState = _sliced_to_array(useGetSetState({
-        code: '',
-        error: '',
-        isTyping: false
-    }), 2), state = _useGetSetState[0], setState = _useGetSetState[1];
-    var containerRef = useRef(null);
-    var divRef = useRef(null);
-    var timer = useRef(null);
-    var renderTimer = useRef(null); // 实际渲染的定时器
-    var mermaidRef = useRef(null);
-    var lastCodeRef = useRef(''); // 记录上一次的代码
-    var changeCountRef = useRef(0); // 记录变化次数
-    var id = useMemo(function() {
-        return 'm' + (Date.now() + Math.ceil(Math.random() * 1000));
-    }, []);
-    var isVisible = useIntersectionOnce(containerRef);
-    useEffect(function() {
-        var nextCode = props.element.value || '';
-        var currentState = state();
-        if (!isVisible) {
-            return undefined;
-        }
-        // 如果代码没有变化且没有错误，不需要重新渲染
-        if (currentState.code === nextCode && currentState.error === '') {
-            return undefined;
-        }
-        // 清理所有定时器
-        if (timer.current !== null) {
-            window.clearTimeout(timer.current);
-            timer.current = null;
-        }
-        if (renderTimer.current !== null) {
-            window.clearTimeout(renderTimer.current);
-            renderTimer.current = null;
-        }
-        if (!nextCode) {
-            timer.current = window.setTimeout(function() {
-                setState({
-                    code: '',
-                    error: '',
-                    isTyping: false
-                });
-                if (divRef.current) {
-                    divRef.current.innerHTML = '';
-                }
-                lastCodeRef.current = '';
-                changeCountRef.current = 0;
-                timer.current = null;
-            }, 0);
-            return function() {
-                if (timer.current !== null) {
-                    window.clearTimeout(timer.current);
-                    timer.current = null;
-                }
-            };
-        }
-        // 检测代码是否在快速变化（流式输入）
-        var isCodeChanging = nextCode !== lastCodeRef.current;
-        if (isCodeChanging) {
-            changeCountRef.current += 1;
-            lastCodeRef.current = nextCode;
-            // 如果代码在快速变化，标记为正在输入
-            setState({
-                isTyping: true
-            });
-        }
-        // 检查代码是否可能完整
-        var likelyComplete = isCodeLikelyComplete(nextCode);
-        // 防抖延迟：根据代码变化频率动态调整
-        // 如果代码变化频繁（流式输入），使用更长的延迟以减少抖动
-        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() {
-            // 再次检查代码是否还在变化
-            var finalCode = props.element.value || '';
-            if (finalCode !== nextCode) {
-                // 代码还在变化，重新调度
-                timer.current = null;
-                return;
-            }
-            // 第二层防抖：实际渲染
-            // 如果代码可能不完整，再等待一段时间，增加延迟以减少抖动
-            var finalDelay = likelyComplete ? 200 : 800; // 增加延迟时间
-            renderTimer.current = window.setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-                var _mermaidRef_current, api, _tmp, trimmedCode, svg, container, error, api1, finalCode, parseError, tempElement;
-                return _ts_generator(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            _state.trys.push([
-                                0,
-                                5,
-                                10,
-                                11
-                            ]);
-                            if (!((_mermaidRef_current = mermaidRef.current) !== null && _mermaidRef_current !== void 0)) return [
-                                3,
-                                1
-                            ];
-                            _tmp = _mermaidRef_current;
-                            return [
-                                3,
-                                3
-                            ];
-                        case 1:
-                            return [
-                                4,
-                                loadMermaid()
-                            ];
-                        case 2:
-                            _tmp = _state.sent();
-                            _state.label = 3;
-                        case 3:
-                            api = _tmp;
-                            mermaidRef.current = api;
-                            // 验证代码是否完整（基本检查）
-                            trimmedCode = nextCode.trim();
-                            if (!trimmedCode) {
-                                setState({
-                                    code: '',
-                                    error: ''
-                                });
-                                if (divRef.current) {
-                                    divRef.current.innerHTML = '';
-                                }
-                                timer.current = null;
-                                return [
-                                    2
-                                ];
-                            }
-                            return [
-                                4,
-                                api.render(id, trimmedCode)
-                            ];
-                        case 4:
-                            svg = _state.sent().svg;
-                            if (divRef.current) {
-                                // 使用更平滑的更新方式，避免抖动
-                                // 先设置透明度，然后更新内容，最后恢复透明度
-                                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 {
-                                        // 如果解析失败，直接使用原始 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;
-                                        }
-                                    }
-                                    container.appendChild(wrapper);
-                                    // 恢复透明度，实现淡入效果
-                                    requestAnimationFrame(function() {
-                                        container.style.opacity = '1';
-                                        container.style.transition = 'opacity 0.3s ease-in-out';
-                                    });
-                                });
-                            }
-                            // 渲染成功，重置状态
-                            setState({
-                                code: nextCode,
-                                error: '',
-                                isTyping: false
-                            });
-                            changeCountRef.current = 0; // 重置变化计数
-                            return [
-                                3,
-                                11
-                            ];
-                        case 5:
-                            error = _state.sent();
-                            api1 = mermaidRef.current;
-                            finalCode = props.element.value || '';
-                            // 如果代码还在变化中，不显示错误（可能是中间状态）
-                            if (finalCode !== nextCode || state().isTyping) {
-                                // 代码还在变化，可能是流式输入，不显示错误
-                                renderTimer.current = null;
-                                return [
-                                    2
-                                ];
-                            }
-                            if (!api1) return [
-                                3,
-                                9
-                            ];
-                            _state.label = 6;
-                        case 6:
-                            _state.trys.push([
-                                6,
-                                8,
-                                ,
-                                9
-                            ]);
-                            return [
-                                4,
-                                api1.parse(finalCode)
-                            ];
-                        case 7:
-                            _state.sent();
-                            // 如果能解析，说明可能是渲染问题，不显示错误
-                            renderTimer.current = null;
-                            return [
-                                2
-                            ];
-                        case 8:
-                            parseError = _state.sent();
-                            // 确实是语法错误，但只在代码稳定后显示
-                            if (finalCode === nextCode && !state().isTyping) {
-                                setState({
-                                    error: String(parseError),
-                                    code: '',
-                                    isTyping: false
-                                });
-                                // 确保清理渲染内容
-                                if (divRef.current) {
-                                    divRef.current.innerHTML = '';
-                                }
-                            }
-                            renderTimer.current = null;
-                            return [
-                                2
-                            ];
-                        case 9:
-                            // 其他错误，只在代码稳定后显示
-                            if (finalCode === nextCode && !state().isTyping) {
-                                setState({
-                                    error: String(error),
-                                    code: '',
-                                    isTyping: false
-                                });
-                                // 确保清理渲染内容
-                                if (divRef.current) {
-                                    divRef.current.innerHTML = '';
-                                }
-                            }
-                            return [
-                                3,
-                                11
-                            ];
-                        case 10:
-                            // 清理 Mermaid 生成的临时元素
-                            tempElement = document.querySelector('#d' + id);
-                            if (tempElement) {
-                                tempElement.classList.add('hidden');
-                                // 尝试移除临时元素，避免 DOM 污染
-                                try {
-                                    if (tempElement.parentNode) {
-                                        tempElement.parentNode.removeChild(tempElement);
-                                    }
-                                } catch (e) {
-                                // 忽略移除失败
-                                }
-                            }
-                            renderTimer.current = null;
-                            return [
-                                7
-                            ];
-                        case 11:
-                            timer.current = null;
-                            return [
-                                2
-                            ];
-                    }
-                });
-            }), finalDelay);
-        }, delay);
-        return function() {
-            if (timer.current !== null) {
-                window.clearTimeout(timer.current);
-                timer.current = null;
-            }
-            if (renderTimer.current !== null) {
-                window.clearTimeout(renderTimer.current);
-                renderTimer.current = null;
-            }
-        };
-    }, [
-        props === null || props === void 0 ? void 0 : (_props_element = props.element) === null || _props_element === void 0 ? void 0 : _props_element.value,
-        id,
-        isVisible,
-        setState,
-        state
-    ]);
-    var snapshot = state();
-    return /*#__PURE__*/ React.createElement("div", {
-        ref: containerRef,
-        style: {
-            marginBottom: '0.75em',
-            cursor: 'default',
-            userSelect: 'none',
-            padding: '0.75rem 0',
-            borderRadius: '1em',
-            display: 'flex',
-            justifyContent: 'center',
-            // 增加隔离：防止内容溢出影响其他元素
-            position: 'relative',
-            isolation: 'isolate',
-            contain: 'layout style paint',
-            overflow: 'hidden'
-        },
-        contentEditable: false
-    }, /*#__PURE__*/ React.createElement("div", {
-        contentEditable: false,
-        ref: divRef,
-        style: {
-            width: '100%',
-            maxWidth: '100%',
-            minHeight: '200px',
-            display: 'flex',
-            justifyContent: 'center',
-            visibility: snapshot.code && !snapshot.error ? 'visible' : 'hidden',
-            // 增加隔离样式
-            position: 'relative',
-            isolation: 'isolate',
-            contain: 'layout style paint',
-            overflow: 'hidden',
-            // 防止 SVG 样式影响外部
-            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"
-    }), snapshot.isTyping && !snapshot.code && /*#__PURE__*/ React.createElement("div", {
-        style: {
-            textAlign: 'center',
-            color: '#6B7280',
-            padding: '0.5rem',
-            position: 'relative',
-            zIndex: 1,
-            fontStyle: 'italic'
-        }
-    }, "正在加载..."), snapshot.error && !snapshot.isTyping && /*#__PURE__*/ React.createElement("div", {
-        style: {
-            textAlign: 'center',
-            color: 'rgba(239, 68, 68, 0.8)',
-            padding: '0.5rem',
-            // 错误信息也增加隔离
-            position: 'relative',
-            zIndex: 1,
-            wordBreak: 'break-word',
-            maxWidth: '100%'
-        }
-    }, snapshot.error), !snapshot.code && !snapshot.error && !snapshot.isTyping && /*#__PURE__*/ React.createElement("div", {
-        style: {
-            textAlign: 'center',
-            color: '#6B7280',
-            padding: '0.5rem',
-            position: 'relative',
-            zIndex: 1
-        }
-    }, "Empty"));
-};
+import React, { lazy, Suspense } from "react";
+import { MermaidFallback } from "./MermaidFallback";
+import { MermaidRendererImpl } from "./MermaidRendererImpl";
+import { loadMermaid } from "./utils";
 /**
  * Mermaid 渲染器组件
  * 使用 React.lazy 延迟加载，仅在需要时加载 mermaid 库
@@ -631,20 +148,6 @@ var MermaidRendererImpl = function(props) {
         }
     });
 }));
-/**
- * 加载中的占位组件
- */ var MermaidFallback = function() {
-    return /*#__PURE__*/ React.createElement("div", {
-        style: {
-            marginBottom: '0.75em',
-            padding: '0.75rem 0',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#6B7280'
-        }
-    }, "加载中...");
-};
 /**
  * Mermaid 组件 - Mermaid图表渲染组件
  *

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * 加载中的占位组件
+ */
+export declare const MermaidFallback: () => React.JSX.Element;

package/dist/Plugins/mermaid/MermaidFallback.js

@@ -0,0 +1,21 @@
+import { ConfigProvider, Skeleton } from "antd";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { useStyle } from "./style";
+/**
+ * 加载中的占位组件
+ */ export var MermaidFallback = function() {
+    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,
+        style: {
+            width: '100%',
+            minHeight: '200px',
+            maxWidth: '800px'
+        }
+    })));
+};

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

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

package/dist/Plugins/mermaid/MermaidRendererImpl.js

@@ -0,0 +1,39 @@
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useMemo, useRef } from "react";
+import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
+import { useMermaidRender } from "./useMermaidRender";
+import { useStyle } from "./style";
+/**
+ * Mermaid 渲染器组件实现
+ * 负责实际的图表渲染逻辑
+ */ export var MermaidRendererImpl = function(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;
+    var containerRef = useRef(null);
+    var divRef = useRef(null);
+    var id = useMemo(function() {
+        return 'm' + (Date.now() + Math.ceil(Math.random() * 1000));
+    }, []);
+    var isVisible = useIntersectionOnce(containerRef);
+    var _useMermaidRender = useMermaidRender(props.element.value || '', divRef, id, isVisible), error = _useMermaidRender.error, renderedCode = _useMermaidRender.renderedCode;
+    return wrapSSR(/*#__PURE__*/ React.createElement("div", {
+        ref: containerRef,
+        className: classNames(baseCls, hashId),
+        contentEditable: false
+    }, /*#__PURE__*/ React.createElement("div", {
+        contentEditable: false,
+        ref: divRef,
+        className: classNames(hashId),
+        style: {
+            visibility: renderedCode && !error ? 'visible' : 'hidden',
+            pointerEvents: renderedCode && !error ? 'auto' : 'none'
+        },
+        "data-mermaid-container": "true"
+    }), error && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(baseCls, "-error"), hashId)
+    }, error), !renderedCode && !error && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(baseCls, "-empty"), hashId)
+    }, "Empty")));
+};

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

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