@ant-design/agentic-ui 2.30.19 → 2.30.20

package/dist/Bubble/MessagesContent/MarkdownPreview.js

@@ -94,8 +94,8 @@ import { MessagesContext } from "./BubbleContext";
  * />
  * ```
  */ export var MarkdownPreview = function MarkdownPreview(props) {
-    var _ref, _ref1;
-    var _props_markdownRenderConfig, _props_markdownRenderConfig1, _props_originData, _props_originData1;
+    var _ref, _ref1, _ref2;
+    var _props_markdownRenderConfig, _props_markdownRenderConfig1, _props_originData, _props_originData1, _props_originData2;
     var content = props.content, extra = props.extra, typing = props.typing, htmlRef = props.htmlRef, fncProps = props.fncProps, docListNode = props.docListNode, beforeContent = props.beforeContent, afterContent = props.afterContent;
     var MarkdownEditorRef = React.useRef(undefined);
     var hidePadding = (useContext(MessagesContext) || {}).hidePadding;
@@ -105,6 +105,7 @@ import { MessagesContext } from "./BubbleContext";
     var extraShowOnHover = config === null || config === void 0 ? void 0 : config.extraShowOnHover;
     var token = theme.useToken().token;
     var renderMode = (_ref = (_ref1 = (_props_markdownRenderConfig = props.markdownRenderConfig) === null || _props_markdownRenderConfig === void 0 ? void 0 : _props_markdownRenderConfig.renderMode) !== null && _ref1 !== void 0 ? _ref1 : (_props_markdownRenderConfig1 = props.markdownRenderConfig) === null || _props_markdownRenderConfig1 === void 0 ? void 0 : _props_markdownRenderConfig1.renderType) !== null && _ref !== void 0 ? _ref : 'slate';
+    var shouldAnimateMarkdown = Boolean(typing) && ((_ref2 = (_props_originData = props.originData) === null || _props_originData === void 0 ? void 0 : _props_originData.isLast) !== null && _ref2 !== void 0 ? _ref2 : true);
     var isPaddingHidden = useMemo(function() {
         return !!extra;
     }, [
@@ -121,15 +122,15 @@ import { MessagesContext } from "./BubbleContext";
         renderMode
     ]);
     var markdown = useMemo(function() {
-        var _ref;
-        var _content_includes, _htmlRef_current, _htmlRef_current1, _props_markdownRenderConfig, _props_originData, _props_originData1, _props_originData2, _props_markdownRenderConfig1, _props_markdownRenderConfig2, _props_markdownRenderConfig3;
+        var _ref, _ref1;
+        var _content_includes, _htmlRef_current, _htmlRef_current1, _props_markdownRenderConfig, _props_originData, _props_originData1, _props_originData2, _props_markdownRenderConfig1, _props_markdownRenderConfig2, _props_originData3, _props_markdownRenderConfig3;
         // MarkdownRenderer 渲染路径——轻量，不创建 Slate 实例
         if (renderMode === 'markdown') {
-            var _props_originData3, _props_markdownRenderConfig4, _props_markdownRenderConfig5, _props_markdownRenderConfig6, _props_markdownRenderConfig7, _props_markdownRenderConfig8, _props_markdownRenderConfig9, _props_markdownRenderConfig10;
+            var _props_originData4, _props_markdownRenderConfig4, _props_markdownRenderConfig5, _props_markdownRenderConfig6, _props_markdownRenderConfig7, _props_markdownRenderConfig8, _props_markdownRenderConfig9, _props_markdownRenderConfig10;
             return /*#__PURE__*/ React.createElement(MarkdownRenderer, {
                 content: content,
-                streaming: typing,
-                isFinished: (_props_originData3 = props.originData) === null || _props_originData3 === void 0 ? void 0 : _props_originData3.isFinished,
+                streaming: shouldAnimateMarkdown,
+                isFinished: (_props_originData4 = props.originData) === null || _props_originData4 === void 0 ? void 0 : _props_originData4.isFinished,
                 plugins: (_props_markdownRenderConfig4 = props.markdownRenderConfig) === null || _props_markdownRenderConfig4 === void 0 ? void 0 : _props_markdownRenderConfig4.plugins,
                 queueOptions: (_props_markdownRenderConfig5 = props.markdownRenderConfig) === null || _props_markdownRenderConfig5 === void 0 ? void 0 : _props_markdownRenderConfig5.queueOptions,
                 streamingParagraphAnimation: (_props_markdownRenderConfig6 = props.markdownRenderConfig) === null || _props_markdownRenderConfig6 === void 0 ? void 0 : _props_markdownRenderConfig6.streamingParagraphAnimation,
@@ -168,7 +169,7 @@ import { MessagesContext } from "./BubbleContext";
             editorStyle: _object_spread({
                 fontSize: 14
             }, ((_props_markdownRenderConfig1 = props.markdownRenderConfig) === null || _props_markdownRenderConfig1 === void 0 ? void 0 : _props_markdownRenderConfig1.editorStyle) || {}),
-            typewriter: (_ref = (_props_markdownRenderConfig2 = props.markdownRenderConfig) === null || _props_markdownRenderConfig2 === void 0 ? void 0 : _props_markdownRenderConfig2.typewriter) !== null && _ref !== void 0 ? _ref : typing,
+            typewriter: ((_ref = (_props_markdownRenderConfig2 = props.markdownRenderConfig) === null || _props_markdownRenderConfig2 === void 0 ? void 0 : _props_markdownRenderConfig2.typewriter) !== null && _ref !== void 0 ? _ref : shouldAnimateMarkdown) && ((_ref1 = (_props_originData3 = props.originData) === null || _props_originData3 === void 0 ? void 0 : _props_originData3.isLast) !== null && _ref1 !== void 0 ? _ref1 : true),
             style: _object_spread({
                 minWidth: minWidth ? "min(".concat(minWidth, "px,100%)") : undefined,
                 maxWidth: standalone ? '100%' : undefined,
@@ -180,8 +181,8 @@ import { MessagesContext } from "./BubbleContext";
     }, [
         hidePadding,
         typing,
-        (_props_originData = props.originData) === null || _props_originData === void 0 ? void 0 : _props_originData.isLast,
-        (_props_originData1 = props.originData) === null || _props_originData1 === void 0 ? void 0 : _props_originData1.isFinished,
+        (_props_originData1 = props.originData) === null || _props_originData1 === void 0 ? void 0 : _props_originData1.isLast,
+        (_props_originData2 = props.originData) === null || _props_originData2 === void 0 ? void 0 : _props_originData2.isFinished,
         isPaddingHidden,
         content,
         renderMode,

package/dist/MarkdownInputField/style.js

@@ -222,8 +222,7 @@ var genStyle = function genStyle(token) {
         '&-typing-hint': {
             position: 'absolute',
             left: 'var(--padding-3x)',
-            top: '50%',
-            transform: 'translateY(-50%)',
+            top: '10%',
             pointerEvents: 'none',
             zIndex: 10,
             display: 'flex',

package/dist/TaskList/TaskList.js

@@ -139,12 +139,16 @@ export var TaskList = /*#__PURE__*/ memo(function(param) {
         items,
         locale
     ]), summaryStatus = _useMemo.summaryStatus, summaryText = _useMemo.summaryText, progressText = _useMemo.progressText;
+    var isCancelled = items.some(function(i) {
+        return i.status === 'error';
+    });
     var renderItems = function renderItems() {
-        return items.map(function(item, index) {
+        var visibleItems = isCancelled ? items.slice(-1) : items;
+        return visibleItems.map(function(item, index) {
             return /*#__PURE__*/ React.createElement(TaskListItem, {
                 key: item.key,
                 item: item,
-                isLast: index === items.length - 1,
+                isLast: index === visibleItems.length - 1,
                 prefixCls: prefixCls,
                 hashId: hashId,
                 expandedKeys: internalExpandedKeys,

package/dist/ThoughtChainList/ThoughtChainListItem.js

@@ -105,6 +105,7 @@ import { TableSql } from "./TableSql";
 import { TitleInfo } from "./TitleInfo";
 import { ToolCall } from "./ToolCall";
 import { WebSearch } from "./WebSearch";
+var DETAIL_COLLAPSE_DURATION_MS = 160;
 /**
  * ThoughtChainItemDetail 组件 - 思维链项详情组件
  *
@@ -327,6 +328,7 @@ var ThoughtChainItemMotion = /*#__PURE__*/ React.memo(function(param) {
  */ export var ThoughtChainListItem = /*#__PURE__*/ React.memo(function(props) {
     var _props_bubble, _thoughtChainListItem_meta;
     var _React_useState = _sliced_to_array(React.useState(false), 2), collapse = _React_useState[0], setCollapse = _React_useState[1];
+    var _React_useState1 = _sliced_to_array(React.useState(true), 2), shouldRenderDetail = _React_useState1[0], setShouldRenderDetail = _React_useState1[1];
     var thoughtChainListItem = props.thoughtChainListItem, prefixCls = props.prefixCls, hashId = props.hashId, setDocMeta = props.setDocMeta;
     var markdownRenderProps = useMemo(function() {
         return props.markdownRenderProps || {
@@ -352,6 +354,20 @@ var ThoughtChainItemMotion = /*#__PURE__*/ React.memo(function(param) {
     var handleCollapseChange = React.useCallback(function(change) {
         setCollapse(change);
     }, []);
+    React.useEffect(function() {
+        if (!collapse) {
+            setShouldRenderDetail(true);
+            return;
+        }
+        var timer = window.setTimeout(function() {
+            setShouldRenderDetail(false);
+        }, DETAIL_COLLAPSE_DURATION_MS);
+        return function() {
+            window.clearTimeout(timer);
+        };
+    }, [
+        collapse
+    ]);
     var titleDom = /*#__PURE__*/ React.createElement(TitleInfo, {
         title: thoughtChainListItem.info,
         costMillis: thoughtChainListItem.costMillis,
@@ -393,13 +409,22 @@ var ThoughtChainItemMotion = /*#__PURE__*/ React.memo(function(param) {
             minWidth: 0,
             maxWidth: '100%'
         }
-    }, props.titleRender ? props.titleRender(thoughtChainListItem, titleDom) : titleDom, /*#__PURE__*/ React.createElement("div", {
+    }, props.titleRender ? props.titleRender(thoughtChainListItem, titleDom) : titleDom, shouldRenderDetail ? /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: 'grid',
+            gridTemplateRows: collapse ? '0fr' : '1fr',
+            opacity: collapse ? 0 : 1,
+            transition: 'grid-template-rows 0.16s ease, opacity 0.12s ease',
+            pointerEvents: collapse ? 'none' : 'auto'
+        },
+        "aria-hidden": collapse
+    }, /*#__PURE__*/ React.createElement("div", {
         style: {
             display: 'flex',
             flexDirection: 'column',
-            height: !collapse ? 'auto' : '0px',
             overflow: 'hidden',
+            minHeight: 0,
             gap: 8
         }
-    }, !collapse ? props.contentRender ? props.contentRender(thoughtChainListItem, content) : content : null)));
+    }, props.contentRender ? props.contentRender(thoughtChainListItem, content) : content)) : null));
 });

package/dist/ThoughtChainList/index.js

@@ -158,7 +158,7 @@ import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import { motion } from "framer-motion";
 import { merge } from "lodash-es";
-import React, { useContext, useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { ActionIconBox } from "../Components/ActionIconBox";
 import { useAutoScroll } from "../Hooks/useAutoScroll";
@@ -168,6 +168,7 @@ import { FlipText } from "./FlipText";
 import { useStyle } from "./style";
 import { ThoughtChainListItem } from "./ThoughtChainListItem";
 import { TitleInfo } from "./TitleInfo";
+var COLLAPSE_ANIMATION_DURATION_MS = 160;
 // Initialize dayjs plugins
 try {
     dayjs.extend(duration);
@@ -258,8 +259,23 @@ var ThoughtChainContent = /*#__PURE__*/ React.memo(function(_0) {
     var containerRef = useAutoScroll({
         SCROLL_TOLERANCE: 30
     }).containerRef;
+    var _useState = _sliced_to_array(useState(!collapse), 2), shouldRenderItems = _useState[0], setShouldRenderItems = _useState[1];
+    useEffect(function() {
+        if (!collapse) {
+            setShouldRenderItems(true);
+            return;
+        }
+        var timer = window.setTimeout(function() {
+            setShouldRenderItems(false);
+        }, COLLAPSE_ANIMATION_DURATION_MS);
+        return function() {
+            window.clearTimeout(timer);
+        };
+    }, [
+        collapse
+    ]);
     var processedItems = useMemo(function() {
-        if (collapse) return [];
+        if (!shouldRenderItems) return [];
         return thoughtChainList.map(function(item, index) {
             var _item_output, _item_output1, _item_output2, _item_output3, _item_output4;
             var info = item.info;
@@ -288,7 +304,7 @@ var ThoughtChainContent = /*#__PURE__*/ React.memo(function(_0) {
     }, [
         thoughtChainList,
         bubble === null || bubble === void 0 ? void 0 : bubble.isFinished,
-        collapse
+        shouldRenderItems
     ]);
     var mergedMarkdownProps = useMemo(function() {
         return merge(markdownRenderProps || {}, {

package/dist/ThoughtChainList/style.js

@@ -161,7 +161,8 @@ var genStyle = function genStyle(token) {
             borderRadius: '0px 0px 12px 12px',
             maxHeight: '566px',
             padding: '12px 12px',
-            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+            opacity: 1,
+            transition: 'max-height 0.16s cubic-bezier(0.4, 0, 0.2, 1), padding 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s linear',
             overflow: 'auto',
             '&&-compact': {
                 padding: 8
@@ -169,7 +170,8 @@ var genStyle = function genStyle(token) {
             '&&-collapse': {
                 maxHeight: '0px',
                 padding: '0',
-                opacity: 0
+                opacity: 0,
+                overflow: 'hidden'
             },
             '&-list': {
                 display: 'flex',

package/dist/ToolUseBar/BarItem/Content.js

@@ -98,10 +98,11 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { Api, ChevronUp, ChevronsDownUp, ChevronsUpDown, X } from "@sofa-design/icons";
 import classNames from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRefFunction } from "../../Hooks/useRefFunction";
 /** 内容超出此高度时自动收起 */ var CONTENT_COLLAPSE_THRESHOLD = 200;
+/** 工具详情收起动画时长（毫秒） */ var TOOL_CONTENT_COLLAPSE_DURATION_MS = 160;
 var ToolImageComponent = function ToolImageComponent(param) {
     var tool = param.tool, prefixCls = param.prefixCls, hashId = param.hashId, _param_disableAnimation = param.disableAnimation, disableAnimation = _param_disableAnimation === void 0 ? false : _param_disableAnimation;
     var toolImageWrapperClassName = useMemo(function() {
@@ -325,6 +326,7 @@ var ToolContentComponent = function ToolContentComponent(param) {
     var contentInnerRef = useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), isContentOverflowing = _useState[0], setIsContentOverflowing = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), contentExpanded = _useState1[0], setContentExpanded = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(expanded), 2), shouldRenderContent = _useState2[0], setShouldRenderContent = _useState2[1];
     var toolContainerClassName = useMemo(function() {
         return classNames("".concat(prefixCls, "-tool-container"), hashId, _define_property({}, "".concat(prefixCls, "-tool-container-light"), light));
     }, [
@@ -409,6 +411,25 @@ var ToolContentComponent = function ToolContentComponent(param) {
         tool.errorMessage,
         checkOverflow
     ]);
+    useEffect(function() {
+        if (!showContent) {
+            setShouldRenderContent(false);
+            return;
+        }
+        if (expanded) {
+            setShouldRenderContent(true);
+            return;
+        }
+        var timer = window.setTimeout(function() {
+            setShouldRenderContent(false);
+        }, TOOL_CONTENT_COLLAPSE_DURATION_MS);
+        return function() {
+            window.clearTimeout(timer);
+        };
+    }, [
+        expanded,
+        showContent
+    ]);
     var handleContentExpandToggle = useRefFunction(function() {
         setContentExpanded(function(prev) {
             return !prev;
@@ -449,41 +470,6 @@ var ToolContentComponent = function ToolContentComponent(param) {
         contentExpandClassName,
         handleContentExpandToggle
     ]);
-    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'
-            }
-        };
-    }, []);
-    var containerStyle = useMemo(function() {
-        return {
-            overflow: 'hidden',
-            willChange: 'height, opacity'
-        };
-    }, []);
     var innerContent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
         ref: contentInnerRef,
         style: contentInnerStyle
@@ -491,26 +477,17 @@ var ToolContentComponent = function ToolContentComponent(param) {
     // 禁用动画时使用简单的显示/隐藏
     if (disableAnimation) {
         return showContent && expanded ? /*#__PURE__*/ React.createElement("div", {
-            className: toolContainerClassName,
+            className: classNames(toolContainerClassName, _define_property({}, "".concat(prefixCls, "-tool-container-expanded"), true)),
             "data-testid": "tool-user-item-tool-container",
             style: {
                 overflow: 'hidden'
             }
         }, innerContent) : null;
     }
-    return /*#__PURE__*/ React.createElement(AnimatePresence, {
-        initial: false,
-        mode: "sync"
-    }, expanded ? /*#__PURE__*/ React.createElement(motion.div, {
-        key: "tool-content",
-        className: toolContainerClassName,
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, showContent && shouldRenderContent ? /*#__PURE__*/ React.createElement("div", {
+        className: classNames(toolContainerClassName, _define_property({}, "".concat(prefixCls, "-tool-container-expanded"), expanded)),
         "data-testid": "tool-user-item-tool-container",
-        variants: contentVariants,
-        initial: "collapsed",
-        animate: "expanded",
-        exit: "collapsed",
-        transition: contentTransition,
-        style: containerStyle
+        "aria-hidden": !expanded
     }, innerContent) : null, !showContent ? /*#__PURE__*/ React.createElement("div", {
         style: {
             overflow: 'hidden',

package/dist/ToolUseBar/style.js

@@ -76,7 +76,7 @@ var genStyle = function genStyle(token) {
             minHeight: '20px',
             backdropFilter: 'blur(8px)',
             width: 'max-content',
-            transition: 'border-radius 0.4s ease',
+            transition: 'border-radius 0.16s cubic-bezier(0.4, 0, 0.2, 1)',
             display: 'flex',
             alignItems: 'center',
             flexDirection: 'column',
@@ -307,12 +307,21 @@ var genStyle = function genStyle(token) {
             display: 'flex',
             flexDirection: 'column',
             width: '100%',
-            maxHeight: 700,
+            maxHeight: 0,
             overflow: 'hidden',
-            overflowY: 'auto',
+            opacity: 0,
+            pointerEvents: 'none',
+            transition: 'max-height 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s linear',
             position: 'relative',
             paddingInline: 4,
-            paddingBottom: 4,
+            paddingBottom: 0,
+            '&-expanded': {
+                maxHeight: 700,
+                opacity: 1,
+                pointerEvents: 'auto',
+                overflowY: 'auto',
+                paddingBottom: 4
+            },
             '&-light': {
                 borderLeft: '1px solid var(--color-gray-border-light)',
                 paddingLeft: 12,

package/dist/Workspace/Browser/index.js

@@ -197,8 +197,7 @@ export var BrowserItemComponent = function BrowserItemComponent(param) {
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(prefixCls, "-result-item-title"), hashId)
     }, item.title)))), /*#__PURE__*/ React.createElement("div", {
-        className: classNames("".concat(prefixCls, "-result-item-site"), hashId),
-        onClick: handleOpen
+        className: classNames("".concat(prefixCls, "-result-item-site"), hashId)
     }, renderSiteAvatar(item.site, item.icon), /*#__PURE__*/ React.createElement(Tooltip, {
         title: item.site,
         mouseEnterDelay: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.30.19",
+  "version": "2.30.20",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",