@ant-design/agentic-ui 2.24.2 → 2.24.3

package/dist/Plugins/code/components/ThinkBlock.js

@@ -4,7 +4,7 @@
  */ import React, { useContext } from "react";
 import { I18nContext } from "../../../I18n";
 import { EditorStoreContext } from "../../../MarkdownEditor/editor/store";
-import { ToolUseBarThink } from "../../../ToolUseBar";
+import { ToolUseBarThink } from "../../../ToolUseBarThink";
 /**
  * 将特殊标记恢复为代码块格式
  * @param content - 包含特殊标记的内容

package/dist/TaskList/index.js

@@ -59,8 +59,9 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { ChevronUp, CircleDashed, SuccessFill, X } from "@sofa-design/icons";
 import { ConfigProvider } from "antd";
 import classNames from "classnames";
+import { AnimatePresence, motion } from "framer-motion";
 import { useMergedState } from "rc-util";
-import React, { memo, useCallback, useContext } from "react";
+import React, { memo, useCallback, useContext, useMemo } from "react";
 import { ActionIconBox } from "../Components/ActionIconBox";
 import { Loading } from "../Components/Loading";
 import { I18nContext } from "../I18n";
@@ -80,7 +81,8 @@ var hasTaskContent = function(content) {
 };
 var getArrowRotation = function(collapsed) {
     return {
-        transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)'
+        transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)',
+        transition: 'transform 0.3s ease'
     };
 };
 var StatusIcon = function(param) {
@@ -109,6 +111,35 @@ var TaskListItem = function(param) {
         return onToggle(item.key);
     };
     var arrowTitle = isCollapsed ? (locale === null || locale === void 0 ? void 0 : locale['taskList.expand']) || '展开' : (locale === null || locale === void 0 ? void 0 : locale['taskList.collapse']) || '收起';
+    var contentVariants = useMemo(function() {
+        return {
+            expanded: {
+                height: 'auto',
+                opacity: 1
+            },
+            collapsed: {
+                height: 0,
+                opacity: 0
+            }
+        };
+    }, []);
+    var contentTransition = useMemo(function() {
+        return {
+            height: {
+                duration: 0.26,
+                ease: [
+                    0.4,
+                    0,
+                    0.2,
+                    1
+                ]
+            },
+            opacity: {
+                duration: 0.2,
+                ease: 'linear'
+            }
+        };
+    }, []);
     return /*#__PURE__*/ React.createElement("div", {
         key: item.key,
         className: buildClassName("".concat(prefixCls, "-thoughtChainItem"), hashId),
@@ -144,11 +175,19 @@ var TaskListItem = function(param) {
         onClick: handleToggle
     }, /*#__PURE__*/ React.createElement(ChevronUp, {
         "data-testid": "task-list-arrow"
-    })))), !isCollapsed && /*#__PURE__*/ React.createElement("div", {
+    })))), /*#__PURE__*/ React.createElement(AnimatePresence, {
+        initial: false
+    }, !isCollapsed && /*#__PURE__*/ React.createElement(motion.div, {
+        key: "task-content",
+        variants: contentVariants,
+        initial: "collapsed",
+        animate: "expanded",
+        exit: "collapsed",
+        transition: contentTransition,
         className: buildClassName("".concat(prefixCls, "-body"), hashId)
     }, /*#__PURE__*/ React.createElement("div", {
         className: buildClassName("".concat(prefixCls, "-content"), hashId)
-    }, item.content))));
+    }, item.content)))));
 };
 var getDefaultExpandedKeys = function(items, isControlled) {
     return isControlled ? [] : items.map(function(item) {

package/dist/ToolUseBar/{ToolUseBarItemComponents.d.ts → BarItem/Content.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToolCall } from './ToolUseBarItem';
+import { ToolCall } from '.';
 interface ToolImageProps {
     tool: ToolCall;
     prefixCls: string;

package/dist/ToolUseBar/{ToolUseBarItemComponents.js → BarItem/Content.js}

@@ -314,28 +314,18 @@ var ToolContentComponent = function(param) {
                 ]
             },
             opacity: {
-                duration: 0.26,
-                ease: [
-                    0.4,
-                    0,
-                    0.2,
-                    1
-                ]
+                duration: 0.2,
+                ease: 'linear'
             }
         };
     }, []);
-    if (!showContent || !expanded) {
-        return /*#__PURE__*/ React.createElement("div", {
-            style: {
-                overflow: 'hidden',
-                height: 1,
-                opacity: 0,
-                visibility: 'hidden'
-            },
-            role: "presentation",
-            "aria-hidden": "true"
-        }, contentDom, errorDom);
-    }
+    // 缓存样式对象
+    var containerStyle = useMemo(function() {
+        return {
+            overflow: 'hidden',
+            willChange: 'height, opacity'
+        };
+    }, []);
     return /*#__PURE__*/ React.createElement(AnimatePresence, {
         initial: false,
         mode: "sync"
@@ -348,9 +338,16 @@ var ToolContentComponent = function(param) {
         animate: "expanded",
         exit: "collapsed",
         transition: contentTransition,
+        style: containerStyle
+    }, contentDom, errorDom) : null, !showContent || !expanded ? /*#__PURE__*/ React.createElement("div", {
         style: {
-            overflow: 'hidden'
-        }
+            overflow: 'hidden',
+            height: 1,
+            opacity: 0,
+            visibility: 'hidden'
+        },
+        role: "presentation",
+        "aria-hidden": "true"
     }, contentDom, errorDom) : null);
 };
 export var ToolContent = /*#__PURE__*/ memo(ToolContentComponent);

package/dist/ToolUseBar/{ToolUseBarItem.js → BarItem/index.js}

@@ -60,7 +60,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 import classnames from "classnames";
 import { useMergedState } from "rc-util";
 import React, { memo, useCallback, useMemo } from "react";
-import { ToolContent, ToolExpand, ToolHeaderRight, ToolImage, ToolTime } from "./ToolUseBarItemComponents";
+import { ToolContent, ToolExpand, ToolHeaderRight, ToolImage, ToolTime } from "./Content";
 var ToolUseBarItemComponent = function(param) {
     var tool = param.tool, prefixCls = param.prefixCls, hashId = param.hashId, onClick = param.onClick, isActive = param.isActive, onActiveChange = param.onActiveChange, isExpanded = param.isExpanded, onExpandedChange = param.onExpandedChange, defaultExpanded = param.defaultExpanded, _param_light = param.light, light = _param_light === void 0 ? false : _param_light;
     // 使用 useMergedState 来管理展开状态

package/dist/ToolUseBar/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ToolCall } from './ToolUseBarItem';
-export * from './ToolUseBarItem';
-export * from './ToolUseBarThink';
+import { ToolCall } from './BarItem';
+export * from './BarItem';
 interface ToolUseBarProps {
     tools?: ToolCall[];
     onToolClick?: (id: string) => void;

package/dist/ToolUseBar/index.js

@@ -87,10 +87,9 @@ import { ConfigProvider } from "antd";
 import classNames from "classnames";
 import { useMergedState } from "rc-util";
 import React, { memo, useCallback, useContext, useMemo } from "react";
-import { ToolUseBarItem } from "./ToolUseBarItem";
+import { ToolUseBarItem } from "./BarItem";
 import { useStyle } from "./style";
-export * from "./ToolUseBarItem";
-export * from "./ToolUseBarThink";
+export * from "./BarItem";
 /**
  * ToolUseBar 组件 - 工具使用栏组件
  *

package/dist/{ToolUseBar/ToolUseBarThink.js → ToolUseBarThink/index.js}

@@ -87,10 +87,10 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { Brain, ChevronDown, ChevronsDownUp, ChevronsUpDown } from "@sofa-design/icons";
 import { ConfigProvider } from "antd";
 import classNames from "classnames";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useMergedState } from "rc-util";
-import React, { memo, useCallback, useContext, useEffect } from "react";
-import { useStyle } from "./thinkStyle";
+import React, { memo, useCallback, useContext, useEffect, useMemo } from "react";
+import { useStyle } from "./style";
 var getChevronStyle = function(expanded) {
     return {
         transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)',
@@ -193,22 +193,10 @@ var ExpandButton = function(param) {
         style: styles === null || styles === void 0 ? void 0 : styles.expand
     }, expandIcon);
 };
-var getContainerStyle = function(expanded, customStyle) {
-    return _object_spread({}, expanded ? {} : {
-        height: 1,
-        padding: '0 8px',
-        margin: 0,
-        overflow: 'hidden',
-        minHeight: 0,
-        visibility: 'hidden'
-    }, customStyle);
-};
 var ThinkContainer = function(param) {
     var thinkContent = param.thinkContent, expandedState = param.expandedState, floatingExpandedState = param.floatingExpandedState, status = param.status, light = param.light, prefixCls = param.prefixCls, hashId = param.hashId, customClassNames = param.classNames, styles = param.styles, onToggleFloatingExpand = param.onToggleFloatingExpand;
-    if (!thinkContent) return null;
     var _obj;
     var containerClassName = buildClassName("".concat(prefixCls, "-container"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.container, (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-container-expanded"), expandedState), _define_property(_obj, "".concat(prefixCls, "-container-loading"), status === 'loading' && !floatingExpandedState), _define_property(_obj, "".concat(prefixCls, "-container-light"), light), _define_property(_obj, "".concat(prefixCls, "-container-floating-expanded"), floatingExpandedState), _obj));
-    var containerStyle = getContainerStyle(expandedState, styles === null || styles === void 0 ? void 0 : styles.container);
     var contentClassName = buildClassName("".concat(prefixCls, "-content"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.content);
     var floatingExpandClassName = buildClassName("".concat(prefixCls, "-floating-expand"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.floatingExpand);
     var floatingIcon = floatingExpandedState ? /*#__PURE__*/ React.createElement(ChevronsDownUp, {
@@ -218,19 +206,72 @@ var ThinkContainer = function(param) {
     });
     var floatingText = floatingExpandedState ? '收起' : '展开';
     var showFloatingExpand = status === 'loading' && !light;
-    return /*#__PURE__*/ React.createElement("div", {
+    // 缓存容器元素
+    var contentVariants = useMemo(function() {
+        return {
+            expanded: {
+                height: 'auto',
+                opacity: 1
+            },
+            collapsed: {
+                height: 0,
+                opacity: 0
+            }
+        };
+    }, []);
+    var contentTransition = useMemo(function() {
+        return {
+            height: {
+                duration: 0.26,
+                ease: [
+                    0.4,
+                    0,
+                    0.2,
+                    1
+                ]
+            },
+            opacity: {
+                duration: 0.2,
+                ease: 'linear'
+            }
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement(AnimatePresence, {
+        initial: false,
+        mode: "sync"
+    }, expandedState ? /*#__PURE__*/ React.createElement(motion.div, {
+        variants: contentVariants,
+        initial: "collapsed",
+        key: "think-container",
+        animate: "expanded",
+        exit: "collapsed",
+        transition: contentTransition,
         className: containerClassName,
-        "data-testid": "tool-use-bar-think-container",
-        style: containerStyle
+        "data-testid": "tool-use-bar-think-container"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: contentClassName,
+        style: styles === null || styles === void 0 ? void 0 : styles.content
+    }, thinkContent), showFloatingExpand ? /*#__PURE__*/ React.createElement("div", {
+        className: floatingExpandClassName,
+        onClick: onToggleFloatingExpand,
+        "data-testid": "tool-use-bar-think-floating-expand",
+        style: styles === null || styles === void 0 ? void 0 : styles.floatingExpand
+    }, floatingIcon, floatingText) : null) : null, !expandedState ? /*#__PURE__*/ React.createElement("div", {
+        style: {
+            visibility: 'hidden',
+            height: 1,
+            overflow: 'hidden',
+            opacity: 0
+        }
     }, /*#__PURE__*/ React.createElement("div", {
         className: contentClassName,
         style: styles === null || styles === void 0 ? void 0 : styles.content
-    }, thinkContent), showFloatingExpand && /*#__PURE__*/ React.createElement("div", {
+    }, thinkContent), showFloatingExpand ? /*#__PURE__*/ React.createElement("div", {
         className: floatingExpandClassName,
         onClick: onToggleFloatingExpand,
         "data-testid": "tool-use-bar-think-floating-expand",
         style: styles === null || styles === void 0 ? void 0 : styles.floatingExpand
-    }, floatingIcon, floatingText));
+    }, floatingIcon, floatingText) : null) : null);
 };
 /**
  * ToolUseBarThink 组件
@@ -348,7 +389,7 @@ var ThinkContainer = function(param) {
         classNames: customClassNames,
         styles: styles,
         onToggleExpand: handleToggleExpand
-    })), /*#__PURE__*/ React.createElement(ThinkContainer, {
+    })), thinkContent ? /*#__PURE__*/ React.createElement(ThinkContainer, {
         thinkContent: thinkContent,
         expandedState: expandedState,
         floatingExpandedState: floatingExpandedState,
@@ -359,6 +400,6 @@ var ThinkContainer = function(param) {
         classNames: customClassNames,
         styles: styles,
         onToggleFloatingExpand: handleToggleFloatingExpand
-    })));
+    }) : null));
 };
 export var ToolUseBarThink = /*#__PURE__*/ memo(ToolUseBarThinkComponent);

package/dist/{ToolUseBar/thinkStyle.js → ToolUseBarThink/style.js}

@@ -63,13 +63,12 @@ var genStyle = function(token) {
         boxShadow: 'var(--shadow-border-base)',
         minHeight: '20px',
         width: 'auto',
-        transition: 'padding 0.2s ease',
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
         gap: '8px',
         zIndex: 1,
-        padding: '2px',
+        padding: '4px',
         paddingRight: '4px',
         marginBottom: '12px',
         '*': {
@@ -175,8 +174,7 @@ var genStyle = function(token) {
             color: 'var(--color-gray-text-disabled)',
             fontSize: 'var(--font-size-base)',
             cursor: 'pointer',
-            borderRadius: '12px',
-            transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)'
+            borderRadius: '12px'
         },
         '&-name': {
             fontWeight: 500,
@@ -208,6 +206,7 @@ var genStyle = function(token) {
             zIndex: 0,
             '&-loading': {
                 borderRadius: '50%',
+                transition: 'border-radius 0.3s ease-in-out',
                 position: 'relative',
                 '&::after': {
                     content: '""',
@@ -330,7 +329,6 @@ var genStyle = function(token) {
             backdropFilter: 'blur(8px)',
             border: '1px solid rgba(0, 19, 41, 0.1)',
             boxShadow: '0px 2px 8px rgba(0, 19, 41, 0.15)',
-            transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
             font: 'var(--font-text-body-emphasized-base)',
             color: 'var(--color-gray-text-default)',
             padding: '16px 5px',

package/dist/Workspace/File/FileComponent.js

@@ -228,7 +228,8 @@ import { ConfigProvider, Image, Input, Spin, Typography, message } from "antd";
 import { Check, ChevronDown as DownIcon, Download as DownloadIcon, Eye as EyeIcon, Locate, ChevronRight as RightIcon, Search, SquareArrowOutUpRight as ShareIcon } from "@sofa-design/icons";
 import { Empty } from "antd";
 import classNames from "classnames";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { I18nContext } from "../../I18n";
 import { formatFileSize, formatLastModified } from "../utils";
@@ -581,6 +582,35 @@ var FileGroupComponent = function(param) {
     var group = param.group, onToggle = param.onToggle, onGroupDownload = param.onGroupDownload, onDownload = param.onDownload, onFileClick = param.onFileClick, onPreview = param.onPreview, onShare = param.onShare, onLocate = param.onLocate, prefixCls = param.prefixCls, hashId = param.hashId, bindDomId = param.bindDomId;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var finalPrefixCls = prefixCls || getPrefixCls('workspace-file');
+    var contentVariants = useMemo(function() {
+        return {
+            expanded: {
+                height: 'auto',
+                opacity: 1
+            },
+            collapsed: {
+                height: 0,
+                opacity: 0
+            }
+        };
+    }, []);
+    var contentTransition = useMemo(function() {
+        return {
+            height: {
+                duration: 0.26,
+                ease: [
+                    0.4,
+                    0,
+                    0.2,
+                    1
+                ]
+            },
+            opacity: {
+                duration: 0.2,
+                ease: 'linear'
+            }
+        };
+    }, []);
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(finalPrefixCls, "-container--group"), hashId)
     }, /*#__PURE__*/ React.createElement(GroupHeader, {
@@ -589,7 +619,18 @@ var FileGroupComponent = function(param) {
         onGroupDownload: onGroupDownload,
         prefixCls: finalPrefixCls,
         hashId: hashId
-    }), !group.collapsed && /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(AnimatePresence, {
+        initial: false
+    }, !group.collapsed && /*#__PURE__*/ React.createElement(motion.div, {
+        key: "group-content",
+        variants: contentVariants,
+        initial: "collapsed",
+        animate: "expanded",
+        exit: "collapsed",
+        transition: contentTransition,
+        style: {
+            overflow: 'hidden'
+        },
         className: classNames("".concat(finalPrefixCls, "-group-content"), hashId)
     }, group.children.map(function(file) {
         return /*#__PURE__*/ React.createElement(FileItemComponent, {
@@ -604,7 +645,7 @@ var FileGroupComponent = function(param) {
             hashId: hashId,
             bindDomId: !!bindDomId
         });
-    })));
+    }))));
 };
 export var FileComponent = function(param) {
     var nodes = param.nodes, onGroupDownload = param.onGroupDownload, onDownload = param.onDownload, onShare = param.onShare, onFileClick = param.onFileClick, onLocate = param.onLocate, onToggleGroup = param.onToggleGroup, onPreview = param.onPreview, onBack = param.onBack, resetKey = param.resetKey, markdownEditorProps = param.markdownEditorProps, customActions = param.customActions, actionRef = param.actionRef, loading = param.loading, loadingRender = param.loadingRender, emptyRender = param.emptyRender, keyword = param.keyword, onChange = param.onChange, _param_showSearch = param.showSearch, showSearch = _param_showSearch === void 0 ? false : _param_showSearch, searchPlaceholder = param.searchPlaceholder, _param_bindDomId = param.bindDomId, bindDomId = _param_bindDomId === void 0 ? false : _param_bindDomId;

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from './MarkdownEditor/editor/store';
 export * from './MarkdownEditor/editor/utils';
 export * from './MarkdownEditor/editor/utils/docx/index';
 export * from './MarkdownEditor/editor/utils/markdownToHtml';
+export * from './ToolUseBarThink';
 export * from './Types';
 export { default as Workspace } from './Workspace';
 export * from './AnswerAlert';

package/dist/index.js

@@ -30,6 +30,7 @@ export * from "./MarkdownEditor/editor/store";
 export * from "./MarkdownEditor/editor/utils";
 export * from "./MarkdownEditor/editor/utils/docx/index";
 export * from "./MarkdownEditor/editor/utils/markdownToHtml";
+export * from "./ToolUseBarThink";
 export * from "./Types";
 export { default as Workspace } from "./Workspace";
 // HTML to Markdown conversion utilities

package/dist/typing.d.ts

@@ -1,4 +1,4 @@
-declare module '*.svg';
+declare module '*.svg';
 declare module '*.webp';
 declare module 'direction' {
   function direction(text: string): 'neutral' | 'ltr' | 'rtl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.24.2",
+  "version": "2.24.3",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "prettier": "prettier --write \"{src,docs,test}/**/*.{js,jsx,ts,tsx,css,less,json,md}\"",
     "report:demo": "node scripts/generateDemoReport.js",
     "start": "npm run dev",
-    "test": "echo 'test'",
+    "test": "vitest  --run",
     "test:coverage": "vitest --run --coverage",
     "tsc": "tsc --noEmit"
   },