@ant-design/agentic-ui 2.30.33 → 2.31.0

package/dist/Plugins/chart/hooks/useDetectTheme.d.ts

@@ -19,14 +19,17 @@ export interface DetectThemeOptions {
     observeChanges?: boolean;
 }
 /**
- * 自动检测当前主题的 Hook
+ * 自动检测当前主题的 Hook（单例模式）
+ *
+ * 所有 hook 实例共享同一个 MutationObserver 和 matchMedia 监听器，
+ * 避免页面上多个图表时创建重复的 DOM 监听。
  *
  * 检测策略（按优先级）：
  * 1. 检查 `html[data-theme='dark']` 属性
  * 2. 检查指定 CSS 变量的亮度值
  * 3. 检查 `--color-gray-bg-page` 的亮度值
  *
- * @param options 检测配置选项
+ * @param options 检测配置选项（observeChanges 为 false 时跳过监听）
  * @returns 检测到的主题 'light' | 'dark'
  *
  * @example
@@ -34,12 +37,8 @@ export interface DetectThemeOptions {
  * const theme = useDetectTheme();
  * // theme: 'light' | 'dark'
  *
- * // 自定义配置
- * const theme = useDetectTheme({
- *   cssVariable: '--color-primary-bg-page',
- *   darknessThreshold: 128,
- *   observeChanges: true,
- * });
+ * // 禁用监听（仅检测一次）
+ * const theme = useDetectTheme({ observeChanges: false });
  * ```
  */
 export declare const useDetectTheme: (options?: DetectThemeOptions) => 'light' | 'dark';

package/dist/Plugins/chart/hooks/useDetectTheme.js

@@ -44,7 +44,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     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);
 }
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 /**
  * 解析颜色值为 RGB
  */ var parseColorToRgb = function parseColorToRgb(color) {
@@ -131,43 +131,31 @@ import { useEffect, useState } from "react";
     }
     return 'light';
 };
-/**
- * 自动检测当前主题的 Hook
- *
- * 检测策略（按优先级）：
- * 1. 检查 `html[data-theme='dark']` 属性
- * 2. 检查指定 CSS 变量的亮度值
- * 3. 检查 `--color-gray-bg-page` 的亮度值
- *
- * @param options 检测配置选项
- * @returns 检测到的主题 'light' | 'dark'
- *
- * @example
- * ```tsx
- * const theme = useDetectTheme();
- * // theme: 'light' | 'dark'
- *
- * // 自定义配置
- * const theme = useDetectTheme({
- *   cssVariable: '--color-primary-bg-page',
- *   darknessThreshold: 128,
- *   observeChanges: true,
- * });
- * ```
- */ export var useDetectTheme = function useDetectTheme() {
-    var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var _options_cssVariable = options.cssVariable, cssVariable = _options_cssVariable === void 0 ? '--color-gray-bg-page' : _options_cssVariable, _options_darknessThreshold = options.darknessThreshold, darknessThreshold = _options_darknessThreshold === void 0 ? 145 : _options_darknessThreshold, _options_observeChanges = options.observeChanges, observeChanges = _options_observeChanges === void 0 ? true : _options_observeChanges;
-    var _useState = _sliced_to_array(useState(function() {
-        return detectTheme(cssVariable, darknessThreshold);
-    }), 2), theme = _useState[0], setTheme = _useState[1];
-    useEffect(function() {
-        if (!observeChanges) return;
+// --- 单例主题检测：所有 hook 实例共享一个 MutationObserver + matchMedia 监听 ---
+var listeners = [];
+var currentTheme = 'light';
+var observerRef = null;
+var mediaQueryRef = null;
+var refCount = 0;
+var DEFAULT_CSS_VARIABLE = '--color-gray-bg-page';
+var DEFAULT_DARKNESS_THRESHOLD = 145;
+function subscribeTheme(listener) {
+    listeners.push(listener);
+    refCount++;
+    // 第一个订阅者时初始化全局监听器
+    if (refCount === 1 && typeof window !== 'undefined') {
+        currentTheme = detectTheme(DEFAULT_CSS_VARIABLE, DEFAULT_DARKNESS_THRESHOLD);
         var updateTheme = function updateTheme() {
-            setTheme(detectTheme(cssVariable, darknessThreshold));
+            var next = detectTheme(DEFAULT_CSS_VARIABLE, DEFAULT_DARKNESS_THRESHOLD);
+            if (next !== currentTheme) {
+                currentTheme = next;
+                listeners.forEach(function(fn) {
+                    return fn();
+                });
+            }
         };
-        // 监听 data-theme 属性变化
         var htmlElement = document.documentElement;
-        var observer = new MutationObserver(function(mutations) {
+        observerRef = new MutationObserver(function(mutations) {
             var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
             try {
                 for(var _iterator = mutations[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -192,7 +180,7 @@ import { useEffect, useState } from "react";
                 }
             }
         });
-        observer.observe(htmlElement, {
+        observerRef.observe(htmlElement, {
             attributes: true,
             attributeFilter: [
                 'data-theme',
@@ -200,23 +188,62 @@ import { useEffect, useState } from "react";
                 'style'
             ]
         });
-        // 监听 prefers-color-scheme 变化
-        var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        var handleMediaChange = function handleMediaChange() {
-            updateTheme();
-        };
-        mediaQuery.addEventListener('change', handleMediaChange);
-        // 初始检测
-        updateTheme();
-        return function() {
-            observer.disconnect();
-            mediaQuery.removeEventListener('change', handleMediaChange);
-        };
-    }, [
-        cssVariable,
-        darknessThreshold,
-        observeChanges
-    ]);
-    return theme;
+        mediaQueryRef = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQueryRef.addEventListener('change', updateTheme);
+    }
+    return function() {
+        listeners = listeners.filter(function(fn) {
+            return fn !== listener;
+        });
+        refCount--;
+        // 最后一个订阅者取消时清理全局监听器
+        if (refCount === 0) {
+            observerRef === null || observerRef === void 0 ? void 0 : observerRef.disconnect();
+            observerRef = null;
+            if (mediaQueryRef) {
+                mediaQueryRef.removeEventListener('change', function() {});
+                mediaQueryRef = null;
+            }
+        }
+    };
+}
+function getSnapshot() {
+    return currentTheme;
+}
+function getServerSnapshot() {
+    return 'light';
+}
+/**
+ * 自动检测当前主题的 Hook（单例模式）
+ *
+ * 所有 hook 实例共享同一个 MutationObserver 和 matchMedia 监听器，
+ * 避免页面上多个图表时创建重复的 DOM 监听。
+ *
+ * 检测策略（按优先级）：
+ * 1. 检查 `html[data-theme='dark']` 属性
+ * 2. 检查指定 CSS 变量的亮度值
+ * 3. 检查 `--color-gray-bg-page` 的亮度值
+ *
+ * @param options 检测配置选项（observeChanges 为 false 时跳过监听）
+ * @returns 检测到的主题 'light' | 'dark'
+ *
+ * @example
+ * ```tsx
+ * const theme = useDetectTheme();
+ * // theme: 'light' | 'dark'
+ *
+ * // 禁用监听（仅检测一次）
+ * const theme = useDetectTheme({ observeChanges: false });
+ * ```
+ */ export var useDetectTheme = function useDetectTheme() {
+    var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _options_observeChanges = options.observeChanges, observeChanges = _options_observeChanges === void 0 ? true : _options_observeChanges;
+    // 当 observeChanges 为 false 时，只做一次性检测，不订阅变更
+    var liveTheme = useSyncExternalStore(subscribeTheme, getSnapshot, getServerSnapshot);
+    if (!observeChanges) {
+        var _options_cssVariable, _options_darknessThreshold;
+        return detectTheme((_options_cssVariable = options.cssVariable) !== null && _options_cssVariable !== void 0 ? _options_cssVariable : DEFAULT_CSS_VARIABLE, (_options_darknessThreshold = options.darknessThreshold) !== null && _options_darknessThreshold !== void 0 ? _options_darknessThreshold : DEFAULT_DARKNESS_THRESHOLD);
+    }
+    return liveTheme;
 };
 export default useDetectTheme;

package/dist/ThoughtChainList/style.js

@@ -52,7 +52,16 @@ function _object_spread_props(target, source) {
 }
 import { resetComponent, useEditorStyleRegister } from "../Hooks/useStyle";
 var genStyle = function genStyle(token) {
-    return _define_property({}, token.componentCls, {
+    return _define_property({
+        '@keyframes thoughtChainSpin': {
+            '0%': {
+                transform: 'rotate(0deg)'
+            },
+            '100%': {
+                transform: 'rotate(360deg)'
+            }
+        }
+    }, token.componentCls, {
         padding: '12px',
         '*': {
             boxSizing: 'border-box'
@@ -87,8 +96,10 @@ var genStyle = function genStyle(token) {
                     zIndex: 1,
                     backgroundSize: '150%',
                     backgroundPosition: '0 0',
-                    backgroundImage: "conic-gradient(\n    from var(--angle, 0deg) at 50% 50%,\n    rgba(46, 255, 127, 0.7) 0deg,\n    rgba(120, 133, 255, 1) 90deg,\n    rgba(255, 0, 153, 0.4) 180deg,\n    rgba(0, 221, 255, 0.62) 270deg,\n    rgba(46, 255, 127, 0.7) 360deg\n  )",
-                    animationName: 'spin',
+                    backgroundImage: "conic-gradient(\n    rgba(46, 255, 127, 0.7) 0deg,\n    rgba(120, 133, 255, 1) 90deg,\n    rgba(255, 0, 153, 0.4) 180deg,\n    rgba(0, 221, 255, 0.62) 270deg,\n    rgba(46, 255, 127, 0.7) 360deg\n  )",
+                    transformOrigin: 'center center',
+                    willChange: 'transform',
+                    animationName: 'thoughtChainSpin',
                     animationDuration: '2s',
                     animationTimingFunction: 'linear',
                     animationIterationCount: 'infinite'

package/dist/Workspace/File/FileComponent.js

@@ -755,6 +755,7 @@ export var FileComponent = function FileComponent(param) {
         resetKey
     ]);
     // 监听 nodes 变化，同步更新 previewFile
+    // 当外部数据更新时，保持预览文件与最新数据同步
     useEffect(function() {
         if (!previewFile) return;
         // 在所有节点中查找与当前预览文件匹配的文件
@@ -768,7 +769,7 @@ export var FileComponent = function FileComponent(param) {
                         var found = findUpdatedFile(node.children);
                         if (found) return found;
                     } else {
-                        // 文件节点，比较 ID 或文件引用
+                        // 文件节点，比较 ID 或文件名+类型
                         if (node.id && node.id === previewFile.id || node.name === previewFile.name && node.type === previewFile.type) {
                             return node;
                         }
@@ -795,8 +796,15 @@ export var FileComponent = function FileComponent(param) {
         if (updatedFile) {
             setPreviewFile(updatedFile);
         }
+    // 注意：这里故意使用 nodes 而非 safeNodes 作为依赖
+    // 因为 safeNodes 每次渲染都会重新计算，会导致无限循环
+    // nodes 引用变化时才需要检查更新
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        nodes
+        nodes,
+        previewFile === null || previewFile === void 0 ? void 0 : previewFile.id,
+        previewFile === null || previewFile === void 0 ? void 0 : previewFile.name,
+        previewFile === null || previewFile === void 0 ? void 0 : previewFile.type
     ]);
     // 处理分组折叠/展开
     var handleToggleGroup = useRefFunction(function(groupId, type, collapsed) {
@@ -1022,7 +1030,9 @@ export var FileComponent = function FileComponent(param) {
         if (hasKeyword) {
             return /*#__PURE__*/ React.createElement(Typography.Text, {
                 type: "secondary"
-            }, ((locale === null || locale === void 0 ? void 0 : locale['workspace.noResultsFor']) || "未找到与「".concat(keyword, "」匹配的结果")).replace('${keyword}', String(keyword)));
+            }, compileTemplate((locale === null || locale === void 0 ? void 0 : locale['workspace.noResultsFor']) || '未找到与「${keyword}」匹配的结果', {
+                keyword: String(keyword)
+            }));
         }
         if (typeof emptyRender === 'function') {
             return emptyRender();
@@ -1044,12 +1054,8 @@ export var FileComponent = function FileComponent(param) {
     });
     // 渲染文件内容
     var renderFileContent = useRefFunction(function() {
-        if ((!nodes || nodes.length === 0) && !loading) {
-            return /*#__PURE__*/ React.createElement("div", {
-                className: classNames("".concat(prefixCls, "-empty"), hashId)
-            }, renderEmptyContent());
-        }
-        if (safeNodes.length === 0) {
+        // 统一的空状态判断：数据为空且非加载中
+        if (safeNodes.length === 0 && !loading) {
             return /*#__PURE__*/ React.createElement("div", {
                 className: classNames("".concat(prefixCls, "-empty"), hashId)
             }, renderEmptyContent());

package/dist/Workspace/File/FileTree/FileTreeComponent.js

@@ -214,9 +214,14 @@ var FileTreeComponent = function FileTreeComponent(param) {
         }
         // 须让 `Promise` 在失败时 reject，以便 rc-tree 不将 key 记为已加载，从而可再次展开重试
         return Promise.resolve(onLoadChildrenRef(source)).then(function(loaded) {
+            var children = loaded !== null && loaded !== void 0 ? loaded : [];
             setInnerTree(function(prev) {
-                return replaceNodeChildren(prev, k, loaded);
+                return replaceNodeChildren(prev, k, children);
             });
+        }).catch(function(error) {
+            console.error('Failed to load tree children:', error);
+            // 返回 reject 以便 rc-tree 不将 key 记为已加载，允许重试
+            throw error;
         });
     }, [
         onLoadChildrenRef,

package/dist/Workspace/File/PreviewComponent.js

@@ -185,7 +185,15 @@ var PlaceholderContent = function PlaceholderContent(param) {
         if (customContent || !processResult) return;
         var typeInference = processResult.typeInference, dataSource = processResult.dataSource;
         var isTextOrCode = typeInference.category === 'text' || typeInference.category === 'code';
-        if (!isTextOrCode) return;
+        // 非文本/代码类型时重置状态
+        if (!isTextOrCode) {
+            setContentState({
+                status: 'idle',
+                mdContent: '',
+                rawContent: ''
+            });
+            return;
+        }
         var setReadyContent = function setReadyContent(raw) {
             setContentState({
                 status: 'ready',
@@ -216,11 +224,19 @@ var PlaceholderContent = function PlaceholderContent(param) {
                 });
                 console.error('加载文本内容失败:', err);
             });
+        } else {
+            // 无数据源时重置状态，避免显示旧内容
+            setContentState({
+                status: 'idle',
+                mdContent: '',
+                rawContent: ''
+            });
         }
     }, [
         processResult,
         file.name,
-        customContent
+        customContent,
+        locale
     ]);
     useEffect(function() {
         var _editorRef_current;
@@ -249,14 +265,13 @@ var PlaceholderContent = function PlaceholderContent(param) {
     var isCurrentFileHtml = isHtmlFile(file.name, processResult === null || processResult === void 0 ? void 0 : processResult.dataSource.mimeType);
     var renderPreviewContent = function renderPreviewContent() {
         if (file.loading) {
-            var _file_content;
             return /*#__PURE__*/ React.createElement("div", {
                 className: classNames("".concat(prefixCls, "-content-loading"), hashId)
             }, /*#__PURE__*/ React.createElement("span", {
                 className: classNames("".concat(prefixCls, "-content-loading-tip"), hashId)
             }, /*#__PURE__*/ React.createElement(LoadingOutlined, null), (locale === null || locale === void 0 ? void 0 : locale['workspace.file.generating']) || '正在生成'), /*#__PURE__*/ React.createElement("div", {
                 className: classNames("".concat(prefixCls, "-content-loading-inner"), hashId)
-            }, (file === null || file === void 0 ? void 0 : (_file_content = file.content) === null || _file_content === void 0 ? void 0 : _file_content.padEnd(10000, file === null || file === void 0 ? void 0 : file.content)) || '...'.padEnd(10000, '...')));
+            }, (file === null || file === void 0 ? void 0 : file.content) || '...'));
         }
         if (customContent) {
             return /*#__PURE__*/ React.createElement("div", {
@@ -331,7 +346,7 @@ var PlaceholderContent = function PlaceholderContent(param) {
                 className: classNames("".concat(filePrefixCls, "-item-separator"), hashId)
             }, "|"), /*#__PURE__*/ React.createElement("span", {
                 className: classNames("".concat(filePrefixCls, "-item-time"), hashId)
-            }, formatLastModified(file.lastModified))))))), canDownload && onDownload && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+            }, formatLastModified(file.lastModified))))))), canDownload && onDownload ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
                 className: classNames("".concat(prefixCls, "-unsupported-text"), hashId)
             }, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.unsupportedPreview']) || '此文件无法预览，请下载查看。'), /*#__PURE__*/ React.createElement(Button, {
                 color: "default",
@@ -339,7 +354,9 @@ var PlaceholderContent = function PlaceholderContent(param) {
                 icon: /*#__PURE__*/ React.createElement(DownloadIcon, null),
                 onClick: handleDownload,
                 "aria-label": (locale === null || locale === void 0 ? void 0 : locale['workspace.file.download']) || '下载'
-            }, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.downloadButton']) || '下载'))));
+            }, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.downloadButton']) || '下载')) : /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-unsupported-text"), hashId)
+            }, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.unsupportedPreviewNoDownload']) || '此文件无法预览。')));
         }
         var renderTextOrCode = function renderTextOrCode() {
             if (isCurrentFileHtml) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.30.33",
+  "version": "2.31.0",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -25,19 +25,19 @@
     "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 && npm run test",
+    "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",
     "start": "pnpm run dev",
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",
-    "test:coverage:full": "cross-env VITEST_FULL_SUITE=1 vitest --run --coverage",
+    "test:coverage:full": "vitest --run --coverage --mode full",
     "test:e2e": "playwright test",
     "test:e2e:debug": "playwright test --debug",
     "test:e2e:skip-server": "cross-env SKIP_WEBSERVER=1 playwright test",
     "test:e2e:ui": "playwright test --ui",
-    "test:full": "cross-env VITEST_FULL_SUITE=1 vitest --run",
+    "test:full": "vitest --run --mode full",
     "tsc": "tsc --noEmit"
   },
   "lint-staged": {