@ant-design/agentic-ui 2.29.45 → 2.29.47

package/dist/ToolUseBarThink/index.js

@@ -89,7 +89,7 @@ import { ConfigProvider } from "antd";
 import classNames from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { useMergedState } from "rc-util";
-import React, { memo, useContext, useEffect, useMemo } from "react";
+import React, { memo, useContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRefFunction } from "../Hooks/useRefFunction";
 import { useStyle } from "./style";
 var getChevronStyle = function getChevronStyle(expanded) {
@@ -102,6 +102,7 @@ var FLOATING_ICON_STYLE = {
     fontSize: 16,
     color: 'var(--color-gray-text-light)'
 };
+/** 内容超出此高度时自动收起 */ var CONTENT_COLLAPSE_THRESHOLD = 200;
 var LOADING_ANIMATION = {
     animate: {
         '--rotate': [
@@ -196,10 +197,14 @@ var ExpandButton = function ExpandButton(param) {
 };
 var ThinkContainer = function ThinkContainer(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;
+    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 _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 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 contentExpandClassName = buildClassName("".concat(prefixCls, "-content-expand"), hashId);
     var floatingIcon = floatingExpandedState ? /*#__PURE__*/ React.createElement(ChevronsDownUp, {
         style: FLOATING_ICON_STYLE
     }) : /*#__PURE__*/ React.createElement(ChevronsUpDown, {
@@ -207,6 +212,67 @@ var ThinkContainer = function ThinkContainer(param) {
     });
     var floatingText = floatingExpandedState ? '收起' : '展开';
     var showFloatingExpand = status === 'loading' && !light;
+    var checkOverflow = useCallback(function() {
+        var el = contentInnerRef.current;
+        if (!el) return;
+        var scrollHeight = el.scrollHeight;
+        setIsContentOverflowing(scrollHeight > CONTENT_COLLAPSE_THRESHOLD);
+    }, []);
+    useEffect(function() {
+        if (!expandedState || !thinkContent) return;
+        checkOverflow();
+        var el = contentInnerRef.current;
+        if (!el) return;
+        var observer = new ResizeObserver(checkOverflow);
+        observer.observe(el);
+        return function() {
+            return observer.disconnect();
+        };
+    }, [
+        expandedState,
+        thinkContent,
+        checkOverflow
+    ]);
+    var handleContentExpandToggle = useRefFunction(function() {
+        setContentExpanded(function(prev) {
+            return !prev;
+        });
+    });
+    var showContentExpand = expandedState && thinkContent && status !== 'loading' && isContentOverflowing;
+    var contentInnerStyle = useMemo(function() {
+        if (!showContentExpand) return undefined;
+        if (contentExpanded) return undefined;
+        return {
+            maxHeight: CONTENT_COLLAPSE_THRESHOLD,
+            overflow: 'hidden'
+        };
+    }, [
+        showContentExpand,
+        contentExpanded
+    ]);
+    var contentExpandButton = useMemo(function() {
+        if (!showContentExpand) return null;
+        var icon = contentExpanded ? /*#__PURE__*/ React.createElement(ChevronsDownUp, null) : /*#__PURE__*/ React.createElement(ChevronsUpDown, null);
+        var text = contentExpanded ? '收起' : '展开';
+        return /*#__PURE__*/ React.createElement("div", {
+            className: contentExpandClassName,
+            onClick: handleContentExpandToggle,
+            "data-testid": "tool-use-bar-think-content-expand",
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: function onKeyDown(e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleContentExpandToggle();
+                }
+            }
+        }, icon, text);
+    }, [
+        showContentExpand,
+        contentExpanded,
+        contentExpandClassName,
+        handleContentExpandToggle
+    ]);
     // 缓存容器元素
     var contentVariants = useMemo(function() {
         return {
@@ -237,6 +303,18 @@ var ThinkContainer = function ThinkContainer(param) {
             }
         };
     }, []);
+    var innerContent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        ref: contentInnerRef,
+        style: contentInnerStyle
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: contentClassName,
+        style: styles === null || styles === void 0 ? void 0 : styles.content
+    }, thinkContent)), contentExpandButton, 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);
     return /*#__PURE__*/ React.createElement(AnimatePresence, {
         initial: false,
         mode: "sync"
@@ -249,15 +327,7 @@ var ThinkContainer = function ThinkContainer(param) {
         transition: contentTransition,
         className: containerClassName,
         "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", {
+    }, innerContent) : null, !expandedState ? /*#__PURE__*/ React.createElement("div", {
         style: {
             visibility: 'hidden',
             height: 1,

package/dist/ToolUseBarThink/style.js

@@ -319,6 +319,25 @@ var genStyle = function genStyle(token) {
                 color: 'var(--color-gray-text-light)'
             }
         },
+        '&-content-expand': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+            marginTop: 8,
+            padding: '8px 16px',
+            fontSize: 'var(--font-size-base)',
+            cursor: 'pointer',
+            borderRadius: 'var(--radius-control-base)',
+            background: 'var(--color-gray-control-fill-active)',
+            color: 'var(--color-gray-text-secondary)',
+            font: 'var(--font-text-body-emphasized-sm)',
+            flexShrink: 0,
+            '&:hover': {
+                background: 'var(--color-gray-control-fill-hover)',
+                color: 'var(--color-gray-text-default)'
+            }
+        },
         '&-floating-expand': {
             position: 'absolute',
             bottom: '8px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.29.45",
+  "version": "2.29.47",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -24,7 +24,6 @@
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "prepare": "husky install && dumi setup",
-    "prepublishOnly": "father doctor && pnpm run test && pnpm 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",