@ant-design/agentic-ui 2.30.30 → 2.30.31

package/dist/ToolUseBarThink/index.js

@@ -6,9 +6,6 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -22,9 +19,6 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -52,30 +46,9 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
 function _unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array(o, minLen);
@@ -87,141 +60,92 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { Brain, ChevronDown, ChevronsDownUp, ChevronsUpDown } from "@sofa-design/icons";
 import { ConfigProvider } from "antd";
 import classNames from "clsx";
-import { motion } from "framer-motion";
 import { useMergedState } from "rc-util";
 import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useRefFunction } from "../Hooks/useRefFunction";
 import { useLocale } from "../I18n";
 import { useStyle } from "./style";
-var getChevronStyle = function getChevronStyle(expanded) {
-    return {
-        transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)',
-        transition: 'transform 0.2s'
-    };
-};
+if (typeof CSS !== 'undefined' && CSS.registerProperty) {
+    try {
+        CSS.registerProperty({
+            name: '--think-rotate',
+            syntax: '<angle>',
+            inherits: true,
+            initialValue: '0deg'
+        });
+    } catch (unused) {
+    // already registered
+    }
+}
 var FLOATING_ICON_STYLE = {
     fontSize: 16,
     color: 'var(--color-gray-text-light)'
 };
-/** 内容超出此高度时自动收起 */ var CONTENT_COLLAPSE_THRESHOLD = 200;
-var LOADING_ANIMATION = {
-    animate: {
-        '--rotate': [
-            '0deg',
-            '360deg'
-        ]
-    },
-    transition: {
-        '--rotate': {
-            duration: 1,
-            repeat: Infinity,
-            ease: 'linear'
-        }
-    },
-    style: {
-        '--rotation': '360deg'
-    }
-};
-var IDLE_ANIMATION = {
-    animate: {},
-    transition: {},
-    style: {
-        '--rotation': '0deg'
-    }
-};
-var HEADER_RIGHT_LOADING_ANIMATION = {
-    animate: {
-        maskImage: [
-            'linear-gradient(to right, rgba(0,0,0,0.99)  -50%, rgba(0,0,0,0.15)   -50%,rgba(0,0,0,0.99)  150%)',
-            'linear-gradient(to right, rgba(0,0,0,0.99)  -50%,  rgba(0,0,0,0.15)  150%,rgba(0,0,0,0.99)  150%)'
-        ]
-    },
-    transition: {
-        maskImage: {
-            duration: 1,
-            repeat: Infinity,
-            ease: 'linear'
-        }
-    },
-    style: {
-        maskImage: 'linear-gradient(to right, rgba(0,0,0,0.99) -30%, rgba(0,0,0,0.15) -50%, rgba(0,0,0,0.99) 120%)'
-    }
+var CONTENT_COLLAPSE_THRESHOLD = 200;
+var CHEVRON_EXPANDED = {
+    transform: 'rotate(0deg)',
+    transition: 'transform 0.2s'
 };
-var buildClassName = function buildClassName() {
-    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-        args[_key] = arguments[_key];
-    }
-    return classNames.apply(void 0, _to_consumable_array(args));
+var CHEVRON_COLLAPSED = {
+    transform: 'rotate(-90deg)',
+    transition: 'transform 0.2s'
 };
-var LightModeIcon = function LightModeIcon(param) {
-    var prefixCls = param.prefixCls, hashId = param.hashId, hover = param.hover, expandedState = param.expandedState;
-    var iconClassName = buildClassName("".concat(prefixCls, "-header-left-icon"), "".concat(prefixCls, "-header-left-icon-light"), hashId);
-    var chevronStyle = getChevronStyle(expandedState);
-    var icon = hover ? /*#__PURE__*/ React.createElement(ChevronDown, {
-        style: chevronStyle
-    }) : /*#__PURE__*/ React.createElement(Brain, null);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: iconClassName
-    }, icon);
+var CONTENT_CLAMPED_STYLE = {
+    maxHeight: CONTENT_COLLAPSE_THRESHOLD,
+    overflow: 'hidden'
 };
-var HeaderContent = function HeaderContent(param) {
-    var toolName = param.toolName, toolTarget = param.toolTarget, prefixCls = param.prefixCls, hashId = param.hashId, light = param.light, customClassNames = param.classNames, styles = param.styles;
-    var nameClassName = buildClassName("".concat(prefixCls, "-name"), _define_property({}, "".concat(prefixCls, "-name-light"), light), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.name);
-    var targetClassName = buildClassName("".concat(prefixCls, "-target"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.target);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, toolName && /*#__PURE__*/ React.createElement("div", {
-        className: nameClassName,
-        style: styles === null || styles === void 0 ? void 0 : styles.name
-    }, toolName), toolTarget ? /*#__PURE__*/ React.createElement("div", {
-        className: targetClassName,
-        style: styles === null || styles === void 0 ? void 0 : styles.target
-    }, toolTarget) : /*#__PURE__*/ React.createElement("div", null));
+var CONTAINER_STYLE = {
+    overflow: 'hidden'
 };
-var TimeElement = function TimeElement(param) {
-    var time = param.time, prefixCls = param.prefixCls, hashId = param.hashId, customClassNames = param.classNames, styles = param.styles;
-    if (!time) return null;
-    var timeClassName = buildClassName("".concat(prefixCls, "-time"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.time);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: timeClassName,
-        style: styles === null || styles === void 0 ? void 0 : styles.time
-    }, time);
-};
-var ExpandButton = function ExpandButton(param) {
-    var thinkContent = param.thinkContent, light = param.light, expandedState = param.expandedState, prefixCls = param.prefixCls, hashId = param.hashId, customClassNames = param.classNames, styles = param.styles, onToggleExpand = param.onToggleExpand;
-    if (!thinkContent || light) return null;
-    var expandClassName = buildClassName("".concat(prefixCls, "-expand"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.expand);
-    var expandIcon = expandedState ? /*#__PURE__*/ React.createElement(ChevronsDownUp, null) : /*#__PURE__*/ React.createElement(ChevronsUpDown, null);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: expandClassName,
-        onClick: onToggleExpand,
-        style: styles === null || styles === void 0 ? void 0 : styles.expand
-    }, expandIcon);
-};
-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 ToolUseBarThinkComponent = function ToolUseBarThinkComponent(param) {
+    var toolName = param.toolName, toolTarget = param.toolTarget, time = param.time, icon = param.icon, thinkContent = param.thinkContent, status = param.status, testId = param.testId, expanded = param.expanded, _param_defaultExpanded = param.defaultExpanded, defaultExpanded = _param_defaultExpanded === void 0 ? false : _param_defaultExpanded, onExpandedChange = param.onExpandedChange, floatingExpanded = param.floatingExpanded, _param_defaultFloatingExpanded = param.defaultFloatingExpanded, defaultFloatingExpanded = _param_defaultFloatingExpanded === void 0 ? false : _param_defaultFloatingExpanded, onFloatingExpandedChange = param.onFloatingExpandedChange, customClassNames = param.classNames, styles = param.styles, _param_light = param.light, light = _param_light === void 0 ? false : _param_light;
+    var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
+    var prefixCls = getPrefixCls('agentic-tool-use-bar-think');
+    var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
     var locale = useLocale();
-    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, {
-        style: FLOATING_ICON_STYLE
+    var _useMergedState = _sliced_to_array(useMergedState(defaultExpanded, {
+        value: expanded,
+        onChange: onExpandedChange
+    }), 2), expandedState = _useMergedState[0], setExpandedState = _useMergedState[1];
+    var _useMergedState1 = _sliced_to_array(useMergedState(defaultFloatingExpanded, {
+        value: floatingExpanded,
+        onChange: onFloatingExpandedChange
+    }), 2), floatingExpandedState = _useMergedState1[0], setFloatingExpandedState = _useMergedState1[1];
+    var _useState = _sliced_to_array(useState(false), 2), hover = _useState[0], setHover = _useState[1];
+    var onMouseMove = useCallback(function() {
+        return setHover(true);
+    }, []);
+    var onMouseLeave = useCallback(function() {
+        return setHover(false);
+    }, []);
+    var handleToggleExpand = useRefFunction(function() {
+        setExpandedState(!expandedState);
+    });
+    var handleToggleFloatingExpand = useRefFunction(function() {
+        setFloatingExpandedState(!floatingExpandedState);
     });
-    var floatingText = floatingExpandedState ? locale.collapse : locale.expand;
-    var showFloatingExpand = status === 'loading' && !light;
+    var isLoading = status === 'loading';
+    useEffect(function() {
+        if (isLoading) {
+            setExpandedState(true);
+        }
+    }, [
+        isLoading,
+        setExpandedState
+    ]);
+    // --- Container overflow detection ---
+    // Only active when expanded AND not loading (overflow UI is hidden during loading)
+    var contentInnerRef = useRef(null);
+    var _useState1 = _sliced_to_array(useState(false), 2), isContentOverflowing = _useState1[0], setIsContentOverflowing = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(false), 2), contentExpanded = _useState2[0], setContentExpanded = _useState2[1];
+    var needOverflowCheck = expandedState && !isLoading && !!thinkContent;
     var checkOverflow = useCallback(function() {
         var el = contentInnerRef.current;
         if (!el) return;
-        var scrollHeight = el.scrollHeight;
-        setIsContentOverflowing(scrollHeight > CONTENT_COLLAPSE_THRESHOLD);
+        setIsContentOverflowing(el.scrollHeight > CONTENT_COLLAPSE_THRESHOLD);
     }, []);
     useEffect(function() {
-        if (!expandedState || !thinkContent) return;
+        if (!needOverflowCheck) return;
         checkOverflow();
         var el = contentInnerRef.current;
         if (!el) return;
@@ -231,8 +155,7 @@ var ThinkContainer = function ThinkContainer(param) {
             return observer.disconnect();
         };
     }, [
-        expandedState,
-        thinkContent,
+        needOverflowCheck,
         checkOverflow
     ]);
     var handleContentExpandToggle = useRefFunction(function() {
@@ -240,195 +163,135 @@ var ThinkContainer = function ThinkContainer(param) {
             return !prev;
         });
     });
-    var showContentExpand = expandedState && thinkContent && status !== 'loading' && isContentOverflowing;
+    var showContentExpand = needOverflowCheck && isContentOverflowing;
+    var showFloatingExpand = isLoading && !light;
     var contentInnerStyle = useMemo(function() {
-        if (!showContentExpand) return undefined;
-        if (contentExpanded) return undefined;
-        return {
-            maxHeight: CONTENT_COLLAPSE_THRESHOLD,
-            overflow: 'hidden'
-        };
+        return showContentExpand && !contentExpanded ? CONTENT_CLAMPED_STYLE : undefined;
     }, [
         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 ? locale.collapse : locale.expand;
-        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,
-        locale
-    ]);
-    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);
-    // 收起时不渲染 thinkContent，无动画避免展开/收起卡顿
-    if (expandedState) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: containerClassName,
-            "data-testid": "tool-use-bar-think-container",
-            style: {
-                overflow: 'hidden'
-            }
-        }, innerContent);
-    }
-    if (showFloatingExpand) {
-        return /*#__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);
-    }
-    return null;
-};
-/**
- * ToolUseBarThink 组件
- *
- * 用于显示工具使用过程中的思考内容和状态
- *
- * @example
- * ```tsx
- * <ToolUseBarThink
- *   toolName="思考"
- *   toolTarget="分析问题"
- *   status="loading"
- *   thinkContent={<div>思考内容...</div>}
- * />
- * ```
- */ var ToolUseBarThinkComponent = function ToolUseBarThinkComponent(param) {
-    var toolName = param.toolName, toolTarget = param.toolTarget, time = param.time, icon = param.icon, thinkContent = param.thinkContent, status = param.status, testId = param.testId, expanded = param.expanded, _param_defaultExpanded = param.defaultExpanded, defaultExpanded = _param_defaultExpanded === void 0 ? false : _param_defaultExpanded, onExpandedChange = param.onExpandedChange, floatingExpanded = param.floatingExpanded, _param_defaultFloatingExpanded = param.defaultFloatingExpanded, defaultFloatingExpanded = _param_defaultFloatingExpanded === void 0 ? false : _param_defaultFloatingExpanded, onFloatingExpandedChange = param.onFloatingExpandedChange, customClassNames = param.classNames, styles = param.styles, _param_light = param.light, light = _param_light === void 0 ? false : _param_light;
-    var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
-    var prefixCls = getPrefixCls('agentic-tool-use-bar-think');
-    var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
-    var _useMergedState = _sliced_to_array(useMergedState(defaultExpanded, {
-        value: expanded,
-        onChange: onExpandedChange
-    }), 2), expandedState = _useMergedState[0], setExpandedState = _useMergedState[1];
-    var _useMergedState1 = _sliced_to_array(useMergedState(defaultFloatingExpanded, {
-        value: floatingExpanded,
-        onChange: onFloatingExpandedChange
-    }), 2), floatingExpandedState = _useMergedState1[0], setFloatingExpandedState = _useMergedState1[1];
-    var _React_useState = _sliced_to_array(React.useState(false), 2), hover = _React_useState[0], setHover = _React_useState[1];
-    var handleToggleExpand = useRefFunction(function() {
-        setExpandedState(!expandedState);
-    });
-    var handleToggleFloatingExpand = useRefFunction(function() {
-        setFloatingExpandedState(!floatingExpandedState);
-    });
-    useEffect(function() {
-        if (status === 'loading') {
-            setExpandedState(true);
-        }
+    // --- Class names (memoized) ---
+    var cls = useMemo(function() {
+        var _obj;
+        var root = classNames(prefixCls, hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.root, (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-expanded"), !expandedState), _define_property(_obj, "".concat(prefixCls, "-loading"), isLoading), _define_property(_obj, "".concat(prefixCls, "-active"), expandedState), _define_property(_obj, "".concat(prefixCls, "-success"), status === 'success'), _define_property(_obj, "".concat(prefixCls, "-light"), light), _obj));
+        var bar = classNames("".concat(prefixCls, "-bar"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.bar);
+        var header = classNames("".concat(prefixCls, "-header"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.header, _define_property({}, "".concat(prefixCls, "-header-light"), light));
+        var imageWrapper = classNames("".concat(prefixCls, "-image-wrapper"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.imageWrapper, _define_property({}, "".concat(prefixCls, "-image-wrapper-loading"), isLoading));
+        var headerRight = classNames("".concat(prefixCls, "-header-right"), hashId, _define_property({}, "".concat(prefixCls, "-header-right-loading"), isLoading));
+        var name = classNames("".concat(prefixCls, "-name"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.name, _define_property({}, "".concat(prefixCls, "-name-light"), light));
+        var _obj1;
+        var container = classNames("".concat(prefixCls, "-container"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.container, (_obj1 = {}, _define_property(_obj1, "".concat(prefixCls, "-container-expanded"), expandedState), _define_property(_obj1, "".concat(prefixCls, "-container-loading"), isLoading && !floatingExpandedState), _define_property(_obj1, "".concat(prefixCls, "-container-light"), light), _define_property(_obj1, "".concat(prefixCls, "-container-floating-expanded"), floatingExpandedState), _obj1));
+        var content = classNames("".concat(prefixCls, "-content"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.content, _define_property({}, "".concat(prefixCls, "-content-light"), light));
+        var floatingExpand = classNames("".concat(prefixCls, "-floating-expand"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.floatingExpand);
+        var target = classNames("".concat(prefixCls, "-target"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.target);
+        var timeEl = classNames("".concat(prefixCls, "-time"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.time);
+        var expand = classNames("".concat(prefixCls, "-expand"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.expand);
+        var contentExpand = classNames("".concat(prefixCls, "-content-expand"), hashId);
+        var lightIcon = classNames("".concat(prefixCls, "-header-left-icon"), "".concat(prefixCls, "-header-left-icon-light"), hashId);
+        return {
+            root: root,
+            bar: bar,
+            header: header,
+            imageWrapper: imageWrapper,
+            headerRight: headerRight,
+            name: name,
+            container: container,
+            content: content,
+            floatingExpand: floatingExpand,
+            target: target,
+            time: timeEl,
+            expand: expand,
+            contentExpand: contentExpand,
+            lightIcon: lightIcon
+        };
     }, [
+        prefixCls,
+        hashId,
+        customClassNames,
+        expandedState,
+        isLoading,
         status,
-        setExpandedState
+        light,
+        floatingExpandedState
     ]);
-    var _obj;
-    var rootClassName = buildClassName(prefixCls, hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.root, (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-expanded"), !expandedState), _define_property(_obj, "".concat(prefixCls, "-loading"), status === 'loading'), _define_property(_obj, "".concat(prefixCls, "-active"), expandedState), _define_property(_obj, "".concat(prefixCls, "-success"), status === 'success'), _define_property(_obj, "".concat(prefixCls, "-light"), light), _obj));
-    var barClassName = buildClassName("".concat(prefixCls, "-bar"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.bar);
-    var headerClassName = buildClassName("".concat(prefixCls, "-header"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.header, _define_property({}, "".concat(prefixCls, "-header-light"), light));
-    var headerLeftClassName = buildClassName("".concat(prefixCls, "-header-left"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.headerLeft);
-    var imageAnimationProps = status === 'loading' ? LOADING_ANIMATION : IDLE_ANIMATION;
-    var headerRightAnimation = status === 'loading' ? HEADER_RIGHT_LOADING_ANIMATION : {};
-    var _obj1;
-    var imageWrapperClassName = buildClassName("".concat(prefixCls, "-image-wrapper"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.imageWrapper, (_obj1 = {}, _define_property(_obj1, "".concat(prefixCls, "-image-wrapper-rotating"), status === 'loading'), _define_property(_obj1, "".concat(prefixCls, "-image-wrapper-loading"), status === 'loading'), _obj1));
-    var imageClassName = buildClassName("".concat(prefixCls, "-image"), hashId, customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.image);
-    var headerRightClassName = buildClassName("".concat(prefixCls, "-header-right"), hashId);
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         "data-testid": testId || 'ToolUseBarThink',
-        className: rootClassName,
+        className: cls.root,
         style: styles === null || styles === void 0 ? void 0 : styles.root
     }, /*#__PURE__*/ React.createElement("div", {
-        className: barClassName,
+        className: cls.bar,
         "data-testid": "tool-use-bar-think-bar",
         style: styles === null || styles === void 0 ? void 0 : styles.bar,
         onClick: handleToggleExpand
     }, /*#__PURE__*/ React.createElement("div", {
-        className: headerClassName,
+        className: cls.header,
         "data-testid": "tool-use-bar-think-header",
         style: styles === null || styles === void 0 ? void 0 : styles.header,
-        onMouseMove: function onMouseMove() {
-            return setHover(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-            return setHover(false);
-        }
+        onMouseMove: onMouseMove,
+        onMouseLeave: onMouseLeave
+    }, light ? /*#__PURE__*/ React.createElement("div", {
+        className: cls.lightIcon
+    }, hover ? /*#__PURE__*/ React.createElement(ChevronDown, {
+        style: expandedState ? CHEVRON_EXPANDED : CHEVRON_COLLAPSED
+    }) : /*#__PURE__*/ React.createElement(Brain, null)) : /*#__PURE__*/ React.createElement("div", {
+        className: cls.imageWrapper,
+        style: styles === null || styles === void 0 ? void 0 : styles.imageWrapper
+    }, icon || /*#__PURE__*/ React.createElement(Brain, null)), /*#__PURE__*/ React.createElement("div", {
+        className: cls.headerRight
+    }, toolName && /*#__PURE__*/ React.createElement("div", {
+        className: cls.name,
+        style: styles === null || styles === void 0 ? void 0 : styles.name
+    }, toolName), toolTarget && /*#__PURE__*/ React.createElement("div", {
+        className: cls.target,
+        style: styles === null || styles === void 0 ? void 0 : styles.target
+    }, toolTarget))), time && /*#__PURE__*/ React.createElement("div", {
+        className: cls.time,
+        style: styles === null || styles === void 0 ? void 0 : styles.time
+    }, time), thinkContent && !light && /*#__PURE__*/ React.createElement("div", {
+        className: cls.expand,
+        onClick: handleToggleExpand,
+        style: styles === null || styles === void 0 ? void 0 : styles.expand
+    }, expandedState ? /*#__PURE__*/ React.createElement(ChevronsDownUp, null) : /*#__PURE__*/ React.createElement(ChevronsUpDown, null))), thinkContent && expandedState && /*#__PURE__*/ React.createElement("div", {
+        className: cls.container,
+        "data-testid": "tool-use-bar-think-container",
+        style: CONTAINER_STYLE
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: contentInnerRef,
+        style: contentInnerStyle
     }, /*#__PURE__*/ React.createElement("div", {
-        className: headerLeftClassName,
-        style: styles === null || styles === void 0 ? void 0 : styles.headerLeft
-    }, light ? /*#__PURE__*/ React.createElement(LightModeIcon, {
-        prefixCls: prefixCls,
-        hashId: hashId,
-        hover: hover,
-        expandedState: expandedState
-    }) : /*#__PURE__*/ React.createElement(motion.div, _object_spread({
-        className: imageWrapperClassName
-    }, imageAnimationProps), icon || /*#__PURE__*/ React.createElement("div", {
-        className: imageClassName,
-        style: styles === null || styles === void 0 ? void 0 : styles.image
-    }, /*#__PURE__*/ React.createElement(Brain, null)))), /*#__PURE__*/ React.createElement(motion.div, _object_spread({
-        className: headerRightClassName
-    }, headerRightAnimation), /*#__PURE__*/ React.createElement(HeaderContent, {
-        toolName: toolName,
-        toolTarget: toolTarget,
-        prefixCls: prefixCls,
-        hashId: hashId,
-        light: light,
-        classNames: customClassNames,
-        styles: styles
-    }))), /*#__PURE__*/ React.createElement(TimeElement, {
-        time: time,
-        prefixCls: prefixCls,
-        hashId: hashId,
-        classNames: customClassNames,
-        styles: styles
-    }), /*#__PURE__*/ React.createElement(ExpandButton, {
-        thinkContent: thinkContent,
-        light: light,
-        expandedState: expandedState,
-        prefixCls: prefixCls,
-        hashId: hashId,
-        classNames: customClassNames,
-        styles: styles,
-        onToggleExpand: handleToggleExpand
-    })), thinkContent ? /*#__PURE__*/ React.createElement(ThinkContainer, {
-        thinkContent: thinkContent,
-        expandedState: expandedState,
-        floatingExpandedState: floatingExpandedState,
-        status: status,
-        light: light,
-        prefixCls: prefixCls,
-        hashId: hashId,
-        classNames: customClassNames,
-        styles: styles,
-        onToggleFloatingExpand: handleToggleFloatingExpand
-    }) : null));
+        className: cls.content,
+        style: styles === null || styles === void 0 ? void 0 : styles.content
+    }, thinkContent)), showContentExpand && /*#__PURE__*/ React.createElement("div", {
+        className: cls.contentExpand,
+        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();
+            }
+        }
+    }, contentExpanded ? /*#__PURE__*/ React.createElement(ChevronsDownUp, null) : /*#__PURE__*/ React.createElement(ChevronsUpDown, null), contentExpanded ? locale.collapse : locale.expand), showFloatingExpand && /*#__PURE__*/ React.createElement("div", {
+        className: cls.floatingExpand,
+        onClick: handleToggleFloatingExpand,
+        "data-testid": "tool-use-bar-think-floating-expand",
+        style: styles === null || styles === void 0 ? void 0 : styles.floatingExpand
+    }, floatingExpandedState ? /*#__PURE__*/ React.createElement(ChevronsDownUp, {
+        style: FLOATING_ICON_STYLE
+    }) : /*#__PURE__*/ React.createElement(ChevronsUpDown, {
+        style: FLOATING_ICON_STYLE
+    }), floatingExpandedState ? locale.collapse : locale.expand)), thinkContent && !expandedState && showFloatingExpand && /*#__PURE__*/ React.createElement("div", {
+        className: cls.floatingExpand,
+        onClick: handleToggleFloatingExpand,
+        "data-testid": "tool-use-bar-think-floating-expand",
+        style: styles === null || styles === void 0 ? void 0 : styles.floatingExpand
+    }, floatingExpandedState ? /*#__PURE__*/ React.createElement(ChevronsDownUp, {
+        style: FLOATING_ICON_STYLE
+    }) : /*#__PURE__*/ React.createElement(ChevronsUpDown, {
+        style: FLOATING_ICON_STYLE
+    }), floatingExpandedState ? locale.collapse : locale.expand)));
 };
 export var ToolUseBarThink = /*#__PURE__*/ memo(ToolUseBarThinkComponent);