@ant-design/agentic-ui 2.8.0 → 2.10.0

package/dist/ToolUseBar/ToolUseBarThink.js

@@ -1,425 +1,364 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+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, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
     }
-  return a;
-};
-
-// src/ToolUseBar/ToolUseBarThink.tsx
-import {
-  Brain,
-  ChevronDown,
-  ChevronsDownUp,
-  ChevronsUpDown
-} from "@sofa-design/icons";
+    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;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+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);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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 { Brain, ChevronDown, ChevronsDownUp, ChevronsUpDown } from "@sofa-design/icons";
 import { ConfigProvider } from "antd";
 import classNames from "classnames";
 import { motion } from "framer-motion";
 import { useMergedState } from "rc-util";
 import React, { memo, useCallback, useContext, useEffect } from "react";
 import { useStyle } from "./thinkStyle";
-var getChevronStyle = (expanded) => ({
-  transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
-  transition: "transform 0.2s"
-});
+var getChevronStyle = function(expanded) {
+    return {
+        transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)',
+        transition: 'transform 0.2s'
+    };
+};
 var FLOATING_ICON_STYLE = {
-  fontSize: 16,
-  color: "var(--color-gray-text-light)"
+    fontSize: 16,
+    color: 'var(--color-gray-text-light)'
 };
 var LOADING_ANIMATION = {
-  animate: {
-    "--rotate": ["0deg", "360deg"]
-  },
-  transition: {
-    "--rotate": {
-      duration: 1,
-      repeat: Infinity,
-      ease: "linear"
+    animate: {
+        '--rotate': [
+            '0deg',
+            '360deg'
+        ]
+    },
+    transition: {
+        '--rotate': {
+            duration: 1,
+            repeat: Infinity,
+            ease: 'linear'
+        }
+    },
+    style: {
+        '--rotation': '360deg'
     }
-  },
-  style: {
-    "--rotation": "360deg"
-  }
 };
 var IDLE_ANIMATION = {
-  animate: {},
-  transition: {},
-  style: {
-    "--rotation": "0deg"
-  }
+    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"
+    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%)'
     }
-  },
-  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 buildClassName = (...args) => classNames(...args);
-var LightModeIcon = ({
-  prefixCls,
-  hashId,
-  hover,
-  expandedState
-}) => {
-  const iconClassName = buildClassName(
-    `${prefixCls}-header-left-icon`,
-    `${prefixCls}-header-left-icon-light`,
-    hashId
-  );
-  const chevronStyle = getChevronStyle(expandedState);
-  const icon = hover ? /* @__PURE__ */ React.createElement(ChevronDown, { style: chevronStyle }) : /* @__PURE__ */ React.createElement(Brain, null);
-  return /* @__PURE__ */ React.createElement("div", { className: iconClassName }, icon);
+var buildClassName = function() {
+    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 HeaderContent = ({
-  toolName,
-  toolTarget,
-  prefixCls,
-  hashId,
-  light,
-  classNames: customClassNames,
-  styles
-}) => {
-  const nameClassName = buildClassName(
-    `${prefixCls}-name`,
-    { [`${prefixCls}-name-light`]: light },
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.name
-  );
-  const targetClassName = buildClassName(
-    `${prefixCls}-target`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.target
-  );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, toolName && /* @__PURE__ */ React.createElement("div", { className: nameClassName, style: styles == null ? void 0 : styles.name }, toolName), toolTarget ? /* @__PURE__ */ React.createElement("div", { className: targetClassName, style: styles == null ? void 0 : styles.target }, toolTarget) : /* @__PURE__ */ React.createElement("div", null));
+var LightModeIcon = function(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 TimeElement = ({
-  time,
-  prefixCls,
-  hashId,
-  classNames: customClassNames,
-  styles
-}) => {
-  if (!time)
-    return null;
-  const timeClassName = buildClassName(
-    `${prefixCls}-time`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.time
-  );
-  return /* @__PURE__ */ React.createElement("div", { className: timeClassName, style: styles == null ? void 0 : styles.time }, time);
+var HeaderContent = function(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 ExpandButton = ({
-  thinkContent,
-  light,
-  expandedState,
-  prefixCls,
-  hashId,
-  classNames: customClassNames,
-  styles,
-  onToggleExpand
-}) => {
-  if (!thinkContent || light)
-    return null;
-  const expandClassName = buildClassName(
-    `${prefixCls}-expand`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.expand
-  );
-  const expandIcon = expandedState ? /* @__PURE__ */ React.createElement(ChevronsDownUp, null) : /* @__PURE__ */ React.createElement(ChevronsUpDown, null);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: expandClassName,
-      onClick: onToggleExpand,
-      style: styles == null ? void 0 : styles.expand
-    },
-    expandIcon
-  );
+var TimeElement = function(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 getContainerStyle = (expanded, customStyle) => __spreadValues(__spreadValues({}, expanded ? {} : {
-  height: 1,
-  padding: "0 8px",
-  margin: 0,
-  overflow: "hidden",
-  minHeight: 0,
-  visibility: "hidden"
-}), customStyle);
-var ThinkContainer = ({
-  thinkContent,
-  expandedState,
-  floatingExpandedState,
-  status,
-  light,
-  prefixCls,
-  hashId,
-  classNames: customClassNames,
-  styles,
-  onToggleFloatingExpand
-}) => {
-  if (!thinkContent)
-    return null;
-  const containerClassName = buildClassName(
-    `${prefixCls}-container`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.container,
-    {
-      [`${prefixCls}-container-expanded`]: expandedState,
-      [`${prefixCls}-container-loading`]: status === "loading" && !floatingExpandedState,
-      [`${prefixCls}-container-light`]: light,
-      [`${prefixCls}-container-floating-expanded`]: floatingExpandedState
-    }
-  );
-  const containerStyle = getContainerStyle(expandedState, styles == null ? void 0 : styles.container);
-  const contentClassName = buildClassName(
-    `${prefixCls}-content`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.content
-  );
-  const floatingExpandClassName = buildClassName(
-    `${prefixCls}-floating-expand`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.floatingExpand
-  );
-  const floatingIcon = floatingExpandedState ? /* @__PURE__ */ React.createElement(ChevronsDownUp, { style: FLOATING_ICON_STYLE }) : /* @__PURE__ */ React.createElement(ChevronsUpDown, { style: FLOATING_ICON_STYLE });
-  const floatingText = floatingExpandedState ? "收起" : "展开";
-  const showFloatingExpand = status === "loading" && !light;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: containerClassName,
-      "data-testid": "tool-use-bar-think-container",
-      style: containerStyle
-    },
-    /* @__PURE__ */ React.createElement("div", { className: contentClassName, style: styles == null ? void 0 : styles.content }, thinkContent),
-    showFloatingExpand && /* @__PURE__ */ React.createElement(
-      "div",
-      {
+var ExpandButton = function(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 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, {
+        style: FLOATING_ICON_STYLE
+    }) : /*#__PURE__*/ React.createElement(ChevronsUpDown, {
+        style: FLOATING_ICON_STYLE
+    });
+    var floatingText = floatingExpandedState ? '收起' : '展开';
+    var showFloatingExpand = status === 'loading' && !light;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: containerClassName,
+        "data-testid": "tool-use-bar-think-container",
+        style: containerStyle
+    }, /*#__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 ? void 0 : styles.floatingExpand
-      },
-      floatingIcon,
-      floatingText
-    )
-  );
+        style: styles === null || styles === void 0 ? void 0 : styles.floatingExpand
+    }, floatingIcon, floatingText));
 };
-var ToolUseBarThinkComponent = ({
-  toolName,
-  toolTarget,
-  time,
-  icon,
-  thinkContent,
-  status,
-  testId,
-  expanded,
-  defaultExpanded = false,
-  onExpandedChange,
-  floatingExpanded,
-  defaultFloatingExpanded = false,
-  onFloatingExpandedChange,
-  classNames: customClassNames,
-  styles,
-  light = false
-}) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("agentic-tool-use-bar-think");
-  const { wrapSSR, hashId } = useStyle(prefixCls);
-  const [expandedState, setExpandedState] = useMergedState(defaultExpanded, {
-    value: expanded,
-    onChange: onExpandedChange
-  });
-  const [floatingExpandedState, setFloatingExpandedState] = useMergedState(
-    defaultFloatingExpanded,
-    {
-      value: floatingExpanded,
-      onChange: onFloatingExpandedChange
-    }
-  );
-  const [hover, setHover] = React.useState(false);
-  const handleToggleExpand = useCallback(() => {
-    setExpandedState(!expandedState);
-  }, [expandedState, setExpandedState]);
-  const handleToggleFloatingExpand = useCallback(() => {
-    setFloatingExpandedState(!floatingExpandedState);
-  }, [floatingExpandedState, setFloatingExpandedState]);
-  useEffect(() => {
-    if (status === "loading") {
-      setExpandedState(true);
-    }
-  }, [status, setExpandedState]);
-  const rootClassName = buildClassName(
-    prefixCls,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.root,
-    {
-      [`${prefixCls}-expanded`]: !expandedState,
-      [`${prefixCls}-loading`]: status === "loading",
-      [`${prefixCls}-active`]: expandedState,
-      [`${prefixCls}-success`]: status === "success",
-      [`${prefixCls}-light`]: light
-    }
-  );
-  const barClassName = buildClassName(
-    `${prefixCls}-bar`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.bar
-  );
-  const headerClassName = buildClassName(
-    `${prefixCls}-header`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.header,
-    { [`${prefixCls}-header-light`]: light }
-  );
-  const headerLeftClassName = buildClassName(
-    `${prefixCls}-header-left`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.headerLeft
-  );
-  const imageAnimationProps = status === "loading" ? LOADING_ANIMATION : IDLE_ANIMATION;
-  const headerRightAnimation = status === "loading" ? HEADER_RIGHT_LOADING_ANIMATION : {};
-  const imageWrapperClassName = buildClassName(
-    `${prefixCls}-image-wrapper`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.imageWrapper,
-    {
-      [`${prefixCls}-image-wrapper-rotating`]: status === "loading",
-      [`${prefixCls}-image-wrapper-loading`]: status === "loading"
-    }
-  );
-  const imageClassName = buildClassName(
-    `${prefixCls}-image`,
-    hashId,
-    customClassNames == null ? void 0 : customClassNames.image
-  );
-  const headerRightClassName = buildClassName(
-    `${prefixCls}-header-right`,
-    hashId
-  );
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        "data-testid": testId || "ToolUseBarThink",
+/**
+ * ToolUseBarThink 组件
+ *
+ * 用于显示工具使用过程中的思考内容和状态
+ *
+ * @example
+ * ```tsx
+ * <ToolUseBarThink
+ *   toolName="思考"
+ *   toolTarget="分析问题"
+ *   status="loading"
+ *   thinkContent={<div>思考内容...</div>}
+ * />
+ * ```
+ */ var ToolUseBarThinkComponent = function(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 = useCallback(function() {
+        setExpandedState(!expandedState);
+    }, [
+        expandedState,
+        setExpandedState
+    ]);
+    var handleToggleFloatingExpand = useCallback(function() {
+        setFloatingExpandedState(!floatingExpandedState);
+    }, [
+        floatingExpandedState,
+        setFloatingExpandedState
+    ]);
+    useEffect(function() {
+        if (status === 'loading') {
+            setExpandedState(true);
+        }
+    }, [
+        status,
+        setExpandedState
+    ]);
+    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,
-        style: styles == null ? void 0 : styles.root
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: barClassName,
-          "data-testid": "tool-use-bar-think-bar",
-          style: styles == null ? void 0 : styles.bar,
-          onClick: handleToggleExpand
+        style: styles === null || styles === void 0 ? void 0 : styles.root
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: barClassName,
+        "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,
+        "data-testid": "tool-use-bar-think-header",
+        style: styles === null || styles === void 0 ? void 0 : styles.header,
+        onMouseMove: function() {
+            return setHover(true);
         },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: headerClassName,
-            "data-testid": "tool-use-bar-think-header",
-            style: styles == null ? void 0 : styles.header,
-            onMouseMove: () => setHover(true),
-            onMouseLeave: () => setHover(false)
-          },
-          /* @__PURE__ */ React.createElement("div", { className: headerLeftClassName, style: styles == null ? void 0 : styles.headerLeft }, light ? /* @__PURE__ */ React.createElement(
-            LightModeIcon,
-            {
-              prefixCls,
-              hashId,
-              hover,
-              expandedState
-            }
-          ) : /* @__PURE__ */ React.createElement(
-            motion.div,
-            __spreadValues({
-              className: imageWrapperClassName
-            }, imageAnimationProps),
-            icon || /* @__PURE__ */ React.createElement("div", { className: imageClassName, style: styles == null ? void 0 : styles.image }, /* @__PURE__ */ React.createElement(Brain, null))
-          )),
-          /* @__PURE__ */ React.createElement(
-            motion.div,
-            __spreadValues({
-              className: headerRightClassName
-            }, headerRightAnimation),
-            /* @__PURE__ */ React.createElement(
-              HeaderContent,
-              {
-                toolName,
-                toolTarget,
-                prefixCls,
-                hashId,
-                light,
-                classNames: customClassNames,
-                styles
-              }
-            )
-          )
-        ),
-        /* @__PURE__ */ React.createElement(
-          TimeElement,
-          {
-            time,
-            prefixCls,
-            hashId,
-            classNames: customClassNames,
-            styles
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          ExpandButton,
-          {
-            thinkContent,
-            light,
-            expandedState,
-            prefixCls,
-            hashId,
-            classNames: customClassNames,
-            styles,
-            onToggleExpand: handleToggleExpand
-          }
-        )
-      ),
-      /* @__PURE__ */ React.createElement(
-        ThinkContainer,
-        {
-          thinkContent,
-          expandedState,
-          floatingExpandedState,
-          status,
-          light,
-          prefixCls,
-          hashId,
-          classNames: customClassNames,
-          styles,
-          onToggleFloatingExpand: handleToggleFloatingExpand
+        onMouseLeave: function() {
+            return setHover(false);
         }
-      )
-    )
-  );
-};
-var ToolUseBarThink = memo(ToolUseBarThinkComponent);
-export {
-  ToolUseBarThink
+    }, /*#__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
+    })), /*#__PURE__*/ React.createElement(ThinkContainer, {
+        thinkContent: thinkContent,
+        expandedState: expandedState,
+        floatingExpandedState: floatingExpandedState,
+        status: status,
+        light: light,
+        prefixCls: prefixCls,
+        hashId: hashId,
+        classNames: customClassNames,
+        styles: styles,
+        onToggleFloatingExpand: handleToggleFloatingExpand
+    })));
 };
+export var ToolUseBarThink = /*#__PURE__*/ memo(ToolUseBarThinkComponent);