@ant-design/agentic-ui 2.30.30 → 2.30.31

package/dist/Workspace/index.js

@@ -72,14 +72,14 @@ 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 { FileStack, Language, ListTodo, MousePointerClick, X } from "@sofa-design/icons";
+import { FileStack, Language, ListTodo, MousePointerClick, TreeDownArrow, X } from "@sofa-design/icons";
 import { ConfigProvider, Segmented } from "antd";
 import classNames from "clsx";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ActionIconBox } from "../Components/ActionIconBox";
 import { I18nContext } from "../I18n";
 import Browser from "./Browser";
-import { File } from "./File";
+import { File, FileTree } from "./File";
 import { RealtimeFollowList } from "./RealtimeFollow";
 import { useWorkspaceStyle } from "./style";
 import { TaskList } from "./Task";
@@ -88,6 +88,7 @@ var ComponentType = /*#__PURE__*/ function(ComponentType) {
     ComponentType["BROWSER"] = "browser";
     ComponentType["TASK"] = "task";
     ComponentType["FILE"] = "file";
+    ComponentType["FILE_TREE"] = "fileTree";
     ComponentType["CUSTOM"] = "custom";
     return ComponentType;
 }(ComponentType || {});
@@ -113,6 +114,11 @@ var DEFAULT_CONFIG = function DEFAULT_CONFIG(locale) {
         icon: /*#__PURE__*/ React.createElement(FileStack, null),
         title: (locale === null || locale === void 0 ? void 0 : locale['workspace.file']) || '文件',
         label: (locale === null || locale === void 0 ? void 0 : locale['workspace.file']) || '文件'
+    }), _define_property(_obj, "fileTree", {
+        key: "fileTree",
+        icon: /*#__PURE__*/ React.createElement(TreeDownArrow, null),
+        title: (locale === null || locale === void 0 ? void 0 : locale['workspace.fileTree']) || '文件树',
+        label: (locale === null || locale === void 0 ? void 0 : locale['workspace.fileTree']) || '文件树'
     }), _define_property(_obj, "custom", {
         key: "custom",
         icon: null,
@@ -148,6 +154,9 @@ var TaskComponent = function TaskComponent(param) {
 var FileComponent = function FileComponent(props) {
     return /*#__PURE__*/ React.createElement(File, props);
 };
+var FileTreeComponent = function FileTreeComponent(props) {
+    return /*#__PURE__*/ React.createElement(FileTree, props);
+};
 var CustomComponent = function CustomComponent(param) {
     var children = param.children;
     return children || null;
@@ -169,6 +178,10 @@ var COMPONENT_MAP = new Map([
         FileComponent,
         "file"
     ],
+    [
+        FileTreeComponent,
+        "fileTree"
+    ],
     [
         CustomComponent,
         "custom"
@@ -195,17 +208,36 @@ var COMPONENT_MAP = new Map([
         locale
     ]);
     var _useState2 = _sliced_to_array(useState(''), 2), internalActiveTab = _useState2[0], setInternalActiveTab = _useState2[1];
-    var availableTabs = useMemo(function() {
-        var tabs = [];
+    var _useMemo = useMemo(function() {
+        var _keys_;
+        var panelEntries = [];
         React.Children.forEach(children, function(child, index) {
             if (!/*#__PURE__*/ React.isValidElement(child)) return;
-            var componentType = COMPONENT_MAP.get(child.type);
-            if (!componentType) return;
-            var tabConfig = resolveTabConfig(child.props.tab, defaultConfig[componentType], componentType === "custom" ? index : undefined);
-            tabs.push({
-                key: tabConfig.key,
+            var wType = COMPONENT_MAP.get(child.type);
+            if (!wType) return;
+            var tabConfig = resolveTabConfig(child.props.tab, defaultConfig[wType], wType === "custom" ? index : undefined);
+            panelEntries.push({
+                wType: wType,
+                child: child,
+                tabConfig: tabConfig
+            });
+        });
+        var keys = panelEntries.map(function(e) {
+            return e.tabConfig.key;
+        });
+        var isControlled = activeTabKey !== undefined;
+        var effectiveKeyForReset = isControlled && activeTabKey !== undefined && activeTabKey !== null && keys.includes(String(activeTabKey)) ? String(activeTabKey) : internalActiveTab && keys.includes(internalActiveTab) ? internalActiveTab : (_keys_ = keys[0]) !== null && _keys_ !== void 0 ? _keys_ : '';
+        var firstRealtimeIndex = panelEntries.findIndex(function(e) {
+            return e.wType === "realtime";
+        });
+        var tabs = panelEntries.map(function(entry) {
+            var wType = entry.wType, child = entry.child, tabConfig = entry.tabConfig;
+            var key = tabConfig.key;
+            var shouldPassResetKey = (wType === "file" || wType === "fileTree") && key === effectiveKeyForReset;
+            return {
+                key: key,
                 icon: tabConfig.icon,
-                componentType: componentType,
+                componentType: wType,
                 label: /*#__PURE__*/ React.createElement("div", {
                     className: classNames("".concat(prefixCls, "-tab-item"), hashId)
                 }, /*#__PURE__*/ React.createElement("span", {
@@ -213,18 +245,41 @@ var COMPONENT_MAP = new Map([
                 }, tabConfig.title), tabConfig.count !== undefined && /*#__PURE__*/ React.createElement("span", {
                     className: classNames("".concat(prefixCls, "-tab-count"), hashId)
                 }, tabConfig.count)),
-                content: /*#__PURE__*/ React.createElement(child.type, _object_spread({}, child.props, componentType === "file" && {
+                content: /*#__PURE__*/ React.createElement(child.type, _object_spread({}, child.props, shouldPassResetKey ? {
                     resetKey: resetKey
-                }))
-            });
+                } : {}))
+            };
         });
-        return tabs;
+        var options = [];
+        for(var i = 0; i < tabs.length; i += 1){
+            var tab = tabs[i];
+            options.push({
+                label: tab.label,
+                value: tab.key,
+                icon: tab.icon
+            });
+            var isFirstRealtime = firstRealtimeIndex === i && tab.componentType === "realtime";
+            if (isFirstRealtime && tabs.length > 1) {
+                options.push({
+                    label: '',
+                    value: '__divider__',
+                    disabled: true
+                });
+            }
+        }
+        return {
+            availableTabs: tabs,
+            segmentedOptions: options
+        };
     }, [
         children,
         defaultConfig,
         hashId,
-        prefixCls
-    ]);
+        prefixCls,
+        resetKey,
+        activeTabKey,
+        internalActiveTab
+    ]), availableTabs = _useMemo.availableTabs, segmentedOptions = _useMemo.segmentedOptions;
     useEffect(function() {
         if (!availableTabs.length) return;
         var isControlled = activeTabKey !== undefined;
@@ -318,26 +373,7 @@ var COMPONENT_MAP = new Map([
     }, /*#__PURE__*/ React.createElement(Segmented, {
         key: segmentedKey,
         className: classNames("".concat(prefixCls, "-segmented"), hashId),
-        options: availableTabs.reduce(function(acc, param, index) {
-            var label = param.label, key = param.key, icon = param.icon, componentType = param.componentType;
-            acc.push({
-                label: label,
-                value: key,
-                icon: icon
-            });
-            // 只在第一个"实时跟随"组件后插入分割线
-            var isFirstRealtime = componentType === "realtime" && availableTabs.findIndex(function(tab) {
-                return tab.componentType === "realtime";
-            }) === index;
-            if (isFirstRealtime && availableTabs.length > 1) {
-                acc.push({
-                    label: '',
-                    value: '__divider__',
-                    disabled: true
-                });
-            }
-            return acc;
-        }, []),
+        options: segmentedOptions,
         value: currentActiveTab,
         onChange: handleTabChange,
         block: true,
@@ -353,6 +389,7 @@ Workspace.Realtime = RealtimeComponent;
 Workspace.Browser = BrowserComponent;
 Workspace.Task = TaskComponent;
 Workspace.File = FileComponent;
+Workspace.FileTree = FileTreeComponent;
 Workspace.Custom = CustomComponent;
 export * from "./File";
 export default Workspace;

package/dist/Workspace/types.d.ts

@@ -10,13 +10,18 @@ export interface TabConfiguration {
     title?: ReactNode;
     count?: number;
 }
+/**
+ * 工作区内置子面板类型，与 `Workspace.Realtime` / `Workspace.File` 等一一对应
+ */
+export type WorkspacePanelType = 'realtime' | 'browser' | 'task' | 'file' | 'fileTree' | 'custom';
 export interface TabItem {
     key: string;
     label: ReactNode;
     title?: ReactNode;
     icon?: ReactNode;
     content?: ReactNode;
-    componentType?: string;
+    /** 子面板类型，用于分割线与内容策略 */
+    componentType?: WorkspacePanelType;
 }
 export interface WorkspaceProps {
     activeTabKey?: string;
@@ -168,7 +173,10 @@ export interface FileProps extends BaseChildProps {
     onToggleGroup?: (groupType: FileType, collapsed: boolean) => void;
     /** Group 子组件切换事件 */
     onGroupToggle?: (groupType: FileType, collapsed: boolean) => void;
-    /** 重置标识，用于重置预览状态（内部使用） */
+    /**
+     * 重置标识：切换工作区标签时 `Workspace` 会递增，仅在**当前激活**的 `Workspace.File` 上注入，用于关闭预览等；非激活页不接收以避免隐藏面板重复重置
+     * @internal
+     */
     resetKey?: number;
     onPreview?: (file: FileNode) => void | false | FileNode | ReactNode | Promise<void | false | FileNode | ReactNode>;
     /**
@@ -234,6 +242,66 @@ export interface FileProps extends BaseChildProps {
      */
     bindDomId?: boolean;
 }
+/**
+ * 工作区文件树节点（用于 {@link FileTreeProps}，与 `antd` Tree 的 `key` 对齐）
+ */
+export interface FileTreeNode {
+    /** 树节点唯一 key，与 Ant Design Tree 一致 */
+    key: string;
+    /** 展示名称 */
+    name: string;
+    /**
+     * 是否叶子（文件）节点
+     * @description
+     * - 懒加载**目录**必须 `isLeaf: false`；若未传 `isLeaf` 且也无 `children` 时视为**文件**（`isLeaf: true`），与「仅省略 `isLeaf` 表示普通文件」一致
+     * - 已有子节点时视为目录
+     */
+    isLeaf?: boolean;
+    /** 子节点；懒加载目录为 `isLeaf: false` 时可为 `[]` 或省略，展开后由 `onLoadChildren` 填充，空目录也保持为目录 */
+    children?: FileTreeNode[];
+    /** 节点图标 */
+    icon?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 业务 id，可选，便于与接口字段对应 */
+    id?: string;
+}
+/**
+ * Workspace 文件树：懒加载目录子项
+ */
+export interface FileTreeProps extends BaseChildProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * 根级树数据
+     * @description 子目录可在展开时通过 `onLoadChildren` 拉取并注入
+     */
+    treeData: FileTreeNode[];
+    /**
+     * 展开非叶子节点时拉取子节点
+     * @param node 当前被展开的节点
+     * @returns 子节点列表，可同步或异步
+     */
+    onLoadChildren: (node: FileTreeNode) => FileTreeNode[] | Promise<FileTreeNode[]>;
+    /** 选中节点（点击标题区域）时触发 */
+    onSelect?: (node: FileTreeNode) => void;
+    /** 是否显示连接线，透传 antd Tree */
+    showLine?: boolean;
+    /**
+     * 由 `Workspace` 在激活项上透传，与 `Workspace.File` 的 `resetKey` 同槽位；不用于清空已懒加载的树状态（树以 `treeData` 为唯一数据源同步）
+     * @internal
+     */
+    resetKey?: number;
+    /**
+     * 无数据时展示
+     * @description 与 File 的 `emptyRender` 行为一致
+     */
+    emptyRender?: ReactNode | (() => ReactNode);
+    /**
+     * 是否整行可点选（antd Tree `blockNode`），默认 `true`
+     */
+    blockNode?: boolean;
+}
 export interface CustomProps extends BaseChildProps {
     children?: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.30.30",
+  "version": "2.30.31",
   "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",