@ant-design/agentic-ui 2.11.2 → 2.12.0

package/dist/Plugins/mermaid/Mermaid.js

@@ -210,16 +210,46 @@ var mermaidLoader = null;
 /**
  * Mermaid 渲染器组件实现
  * 负责实际的图表渲染逻辑
- */ var MermaidRendererImpl = function(props) {
+ */ /**
+ * 检查 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;
+};
+var MermaidRendererImpl = function(props) {
     var _props_element;
     var _useGetSetState = _sliced_to_array(useGetSetState({
         code: '',
-        error: ''
+        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));
     }, []);
@@ -230,22 +260,31 @@ var mermaidLoader = null;
         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: ''
+                    error: '',
+                    isTyping: false
                 });
                 if (divRef.current) {
                     divRef.current.innerHTML = '';
                 }
+                lastCodeRef.current = '';
+                changeCountRef.current = 0;
                 timer.current = null;
             }, 0);
             return function() {
@@ -255,116 +294,246 @@ var mermaidLoader = null;
                 }
             };
         }
-        var delay = currentState.code ? 300 : 0;
-        timer.current = window.setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-            var _mermaidRef_current, api, _tmp, svg, error, api1, parseError, _document_querySelector;
-            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;
-                        return [
-                            4,
-                            api.render(id, nextCode)
-                        ];
-                    case 4:
-                        svg = _state.sent().svg;
-                        if (divRef.current) {
-                            divRef.current.innerHTML = svg;
-                        }
-                        setState({
-                            code: nextCode,
-                            error: ''
-                        });
-                        return [
-                            3,
-                            11
-                        ];
-                    case 5:
-                        error = _state.sent();
-                        api1 = mermaidRef.current;
-                        if (!api1) return [
-                            3,
-                            9
-                        ];
-                        _state.label = 6;
-                    case 6:
-                        _state.trys.push([
-                            6,
-                            8,
-                            ,
-                            9
-                        ]);
-                        return [
-                            4,
-                            api1.parse(nextCode)
-                        ];
-                    case 7:
-                        _state.sent();
-                        return [
-                            3,
-                            9
-                        ];
-                    case 8:
-                        parseError = _state.sent();
-                        setState({
-                            error: String(parseError),
-                            code: ''
-                        });
-                        return [
-                            2
-                        ];
-                    case 9:
-                        setState({
-                            error: String(error),
-                            code: ''
-                        });
-                        return [
-                            3,
-                            11
-                        ];
-                    case 10:
-                        (_document_querySelector = document.querySelector('#d' + id)) === null || _document_querySelector === void 0 ? void 0 : _document_querySelector.classList.add('hidden');
-                        return [
-                            7
-                        ];
-                    case 11:
-                        timer.current = null;
-                        return [
-                            2
-                        ];
-                }
+        // 检测代码是否在快速变化（流式输入）
+        var isCodeChanging = nextCode !== lastCodeRef.current;
+        if (isCodeChanging) {
+            changeCountRef.current += 1;
+            lastCodeRef.current = nextCode;
+            // 如果代码在快速变化，标记为正在输入
+            setState({
+                isTyping: true
             });
-        }), delay);
+        }
+        // 检查代码是否可能完整
+        var likelyComplete = isCodeLikelyComplete(nextCode);
+        // 防抖延迟：根据代码变化频率动态调整
+        // 如果代码变化频繁（流式输入），使用更长的延迟
+        var baseDelay = 300;
+        var typingDelay = changeCountRef.current > 3 ? 1000 : 800; // 频繁变化时延长到 1 秒
+        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 ? 0 : 500;
+            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;
+                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) {
+                                // 清理旧内容
+                                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);
+                                    } else {
+                                        wrapper.innerHTML = svg;
+                                    }
+                                }
+                                divRef.current.appendChild(wrapper);
+                            }
+                            // 渲染成功，重置状态
+                            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,
@@ -383,7 +552,12 @@ var mermaidLoader = null;
             padding: '0.75rem 0',
             borderRadius: '1em',
             display: 'flex',
-            justifyContent: 'center'
+            justifyContent: 'center',
+            // 增加隔离：防止内容溢出影响其他元素
+            position: 'relative',
+            isolation: 'isolate',
+            contain: 'layout style paint',
+            overflow: 'hidden'
         },
         contentEditable: false
     }, /*#__PURE__*/ React.createElement("div", {
@@ -391,19 +565,47 @@ var mermaidLoader = null;
         ref: divRef,
         style: {
             width: '100%',
+            maxWidth: '100%',
             display: 'flex',
             justifyContent: 'center',
-            visibility: snapshot.code && !snapshot.error ? 'visible' : 'hidden'
+            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'
+        },
+        // 使用 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 && /*#__PURE__*/ React.createElement("div", {
+    }, "正在加载..."), snapshot.error && !snapshot.isTyping && /*#__PURE__*/ React.createElement("div", {
         style: {
             textAlign: 'center',
-            color: 'rgba(239, 68, 68, 0.8)'
+            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 && /*#__PURE__*/ React.createElement("div", {
+    }, snapshot.error), !snapshot.code && !snapshot.error && !snapshot.isTyping && /*#__PURE__*/ React.createElement("div", {
         style: {
             textAlign: 'center',
-            color: '#6B7280'
+            color: '#6B7280',
+            padding: '0.5rem',
+            position: 'relative',
+            zIndex: 1
         }
     }, "Empty"));
 };

package/dist/Schema/SchemaEditor/AceEditorWrapper.d.ts

@@ -1,4 +1,4 @@
-import { Ace } from 'ace-builds';
+import type { Ace } from 'ace-builds';
 import React from 'react';
 interface AceEditorWrapperProps {
     /** 代码内容 */