@ant-design/agentic-ui 2.8.0 → 2.10.0

package/dist/ToolUseBar/ToolUseBarItemComponents.js

@@ -1,287 +1,356 @@
-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 _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/ToolUseBarItemComponents.tsx
+    return obj;
+}
+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;
+}
 import { Api, ChevronUp, X } from "@sofa-design/icons";
 import classnames from "classnames";
 import { AnimatePresence, motion } from "framer-motion";
 import React, { memo, useCallback, useMemo } from "react";
-var ToolImageComponent = ({
-  tool,
-  prefixCls,
-  hashId
-}) => {
-  const toolImageWrapperClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-image-wrapper`, hashId, {
-      [`${prefixCls}-tool-image-wrapper-rotating`]: tool.status === "loading",
-      [`${prefixCls}-tool-image-wrapper-loading`]: tool.status === "loading"
-    });
-  }, [prefixCls, hashId, tool.status]);
-  const toolImageClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-image`, hashId);
-  }, [prefixCls, hashId]);
-  const loadingAnimationConfig = useMemo(
-    () => ({
-      animate: {
-        "--rotate": ["0deg", "360deg"]
-      },
-      transition: {
-        "--rotate": {
-          duration: 1,
-          repeat: Infinity,
-          ease: "linear"
-        }
-      },
-      style: {
-        "--rotation": "360deg"
-      }
-    }),
-    []
-  );
-  const idleAnimationConfig = useMemo(
-    () => ({
-      style: {
-        "--rotation": "0deg"
-      }
-    }),
-    []
-  );
-  const animationProps = useMemo(() => {
-    return tool.status === "loading" ? loadingAnimationConfig : idleAnimationConfig;
-  }, [tool.status, loadingAnimationConfig, idleAnimationConfig]);
-  const iconElement = useMemo(() => {
-    return tool.icon ? tool.icon : /* @__PURE__ */ React.createElement(Api, null);
-  }, [tool.icon]);
-  return /* @__PURE__ */ React.createElement(motion.div, __spreadValues({ className: toolImageWrapperClassName }, animationProps), /* @__PURE__ */ React.createElement("div", { className: toolImageClassName }, iconElement));
+var ToolImageComponent = function(param) {
+    var tool = param.tool, prefixCls = param.prefixCls, hashId = param.hashId;
+    var toolImageWrapperClassName = useMemo(function() {
+        var _obj;
+        return classnames("".concat(prefixCls, "-tool-image-wrapper"), hashId, (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-tool-image-wrapper-rotating"), tool.status === 'loading'), _define_property(_obj, "".concat(prefixCls, "-tool-image-wrapper-loading"), tool.status === 'loading'), _obj));
+    }, [
+        prefixCls,
+        hashId,
+        tool.status
+    ]);
+    var toolImageClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-image"), hashId);
+    }, [
+        prefixCls,
+        hashId
+    ]);
+    // 缓存动画配置，避免重复创建对象
+    var loadingAnimationConfig = useMemo(function() {
+        return {
+            animate: {
+                '--rotate': [
+                    '0deg',
+                    '360deg'
+                ]
+            },
+            transition: {
+                '--rotate': {
+                    duration: 1,
+                    repeat: Infinity,
+                    ease: 'linear'
+                }
+            },
+            style: {
+                '--rotation': '360deg'
+            }
+        };
+    }, []);
+    var idleAnimationConfig = useMemo(function() {
+        return {
+            style: {
+                '--rotation': '0deg'
+            }
+        };
+    }, []);
+    var animationProps = useMemo(function() {
+        return tool.status === 'loading' ? loadingAnimationConfig : idleAnimationConfig;
+    }, [
+        tool.status,
+        loadingAnimationConfig,
+        idleAnimationConfig
+    ]);
+    // 缓存图标渲染
+    var iconElement = useMemo(function() {
+        return tool.icon ? tool.icon : /*#__PURE__*/ React.createElement(Api, null);
+    }, [
+        tool.icon
+    ]);
+    return /*#__PURE__*/ React.createElement(motion.div, _object_spread({
+        className: toolImageWrapperClassName
+    }, animationProps), /*#__PURE__*/ React.createElement("div", {
+        className: toolImageClassName
+    }, iconElement));
 };
-var ToolImage = memo(ToolImageComponent);
-var ToolHeaderRightComponent = ({
-  tool,
-  prefixCls,
-  hashId,
-  light
-}) => {
-  const toolHeaderRightClassName = useMemo(() => {
-    return classnames(
-      `${prefixCls}-tool-header-right`,
-      {
-        [`${prefixCls}-tool-header-right-light`]: light
-      },
-      hashId
-    );
-  }, [prefixCls, hashId, light]);
-  const toolNameClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-name`, hashId, {
-      [`${prefixCls}-tool-name-loading`]: tool.status === "loading"
-    });
-  }, [prefixCls, hashId, tool.status]);
-  const toolTargetClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-target`, hashId, {
-      [`${prefixCls}-tool-target-loading`]: tool.status === "loading",
-      [`${prefixCls}-tool-target-light`]: light
-    });
-  }, [prefixCls, hashId, tool.status, light]);
-  const loadingAnimationConfig = useMemo(
-    () => ({
-      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%)"
-      }
-    }),
-    []
-  );
-  const animationProps = useMemo(() => {
-    return tool.status === "loading" ? loadingAnimationConfig : {};
-  }, [tool.status, loadingAnimationConfig]);
-  const toolNameElement = useMemo(() => {
-    return tool.toolName ? /* @__PURE__ */ React.createElement("div", { className: toolNameClassName }, tool.toolName) : null;
-  }, [tool.toolName, toolNameClassName]);
-  const toolTargetElement = useMemo(() => {
-    var _a, _b;
-    return tool.toolTarget ? /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: toolTargetClassName,
-        title: (_b = (_a = tool.toolTarget) == null ? void 0 : _a.toString()) != null ? _b : void 0
-      },
-      tool.toolTarget
-    ) : null;
-  }, [tool.toolTarget, toolTargetClassName]);
-  return /* @__PURE__ */ React.createElement(motion.div, __spreadValues({ className: toolHeaderRightClassName }, animationProps), toolNameElement, toolTargetElement);
+export var ToolImage = /*#__PURE__*/ memo(ToolImageComponent);
+var ToolHeaderRightComponent = function(param) {
+    var tool = param.tool, prefixCls = param.prefixCls, hashId = param.hashId, light = param.light;
+    var toolHeaderRightClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-header-right"), _define_property({}, "".concat(prefixCls, "-tool-header-right-light"), light), hashId);
+    }, [
+        prefixCls,
+        hashId,
+        light
+    ]);
+    var toolNameClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-name"), hashId, _define_property({}, "".concat(prefixCls, "-tool-name-loading"), tool.status === 'loading'));
+    }, [
+        prefixCls,
+        hashId,
+        tool.status
+    ]);
+    var toolTargetClassName = useMemo(function() {
+        var _obj;
+        return classnames("".concat(prefixCls, "-tool-target"), hashId, (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-tool-target-loading"), tool.status === 'loading'), _define_property(_obj, "".concat(prefixCls, "-tool-target-light"), light), _obj));
+    }, [
+        prefixCls,
+        hashId,
+        tool.status,
+        light
+    ]);
+    // 缓存加载动画配置
+    var loadingAnimationConfig = useMemo(function() {
+        return {
+            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 animationProps = useMemo(function() {
+        return tool.status === 'loading' ? loadingAnimationConfig : {};
+    }, [
+        tool.status,
+        loadingAnimationConfig
+    ]);
+    // 缓存工具名称和目标渲染
+    var toolNameElement = useMemo(function() {
+        return tool.toolName ? /*#__PURE__*/ React.createElement("div", {
+            className: toolNameClassName
+        }, tool.toolName) : null;
+    }, [
+        tool.toolName,
+        toolNameClassName
+    ]);
+    var toolTargetElement = useMemo(function() {
+        var _tool_toolTarget;
+        var _tool_toolTarget_toString;
+        return tool.toolTarget ? /*#__PURE__*/ React.createElement("div", {
+            className: toolTargetClassName,
+            title: (_tool_toolTarget_toString = (_tool_toolTarget = tool.toolTarget) === null || _tool_toolTarget === void 0 ? void 0 : _tool_toolTarget.toString()) !== null && _tool_toolTarget_toString !== void 0 ? _tool_toolTarget_toString : undefined
+        }, tool.toolTarget) : null;
+    }, [
+        tool.toolTarget,
+        toolTargetClassName
+    ]);
+    return /*#__PURE__*/ React.createElement(motion.div, _object_spread({
+        className: toolHeaderRightClassName
+    }, animationProps), toolNameElement, toolTargetElement);
 };
-var ToolHeaderRight = memo(ToolHeaderRightComponent);
-var ToolTimeComponent = ({
-  tool,
-  prefixCls,
-  hashId
-}) => {
-  const toolTimeClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-time`, hashId);
-  }, [prefixCls, hashId]);
-  const timeElement = useMemo(() => {
-    return tool.time ? /* @__PURE__ */ React.createElement("div", { className: toolTimeClassName }, tool.time) : null;
-  }, [tool.time, toolTimeClassName]);
-  return timeElement;
+export var ToolHeaderRight = /*#__PURE__*/ memo(ToolHeaderRightComponent);
+var ToolTimeComponent = function(param) {
+    var tool = param.tool, prefixCls = param.prefixCls, hashId = param.hashId;
+    var toolTimeClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-time"), hashId);
+    }, [
+        prefixCls,
+        hashId
+    ]);
+    // 缓存时间元素渲染
+    var timeElement = useMemo(function() {
+        return tool.time ? /*#__PURE__*/ React.createElement("div", {
+            className: toolTimeClassName
+        }, tool.time) : null;
+    }, [
+        tool.time,
+        toolTimeClassName
+    ]);
+    return timeElement;
 };
-var ToolTime = memo(ToolTimeComponent);
-var ToolExpandComponent = ({
-  showContent,
-  expanded,
-  prefixCls,
-  hashId,
-  onExpandClick
-}) => {
-  const toolExpandClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-expand`, hashId);
-  }, [prefixCls, hashId]);
-  const chevronStyle = useMemo(() => {
-    return {
-      transition: "transform 0.3s ease-in-out",
-      transform: expanded ? "rotate(180deg)" : "rotate(0deg)"
-    };
-  }, [expanded]);
-  const handleClick = useCallback(
-    (e) => {
-      onExpandClick(e);
-    },
-    [onExpandClick]
-  );
-  const expandElement = useMemo(() => {
-    if (!showContent)
-      return null;
-    return /* @__PURE__ */ React.createElement("div", { className: toolExpandClassName, onClick: handleClick }, /* @__PURE__ */ React.createElement(ChevronUp, { style: chevronStyle }));
-  }, [showContent, toolExpandClassName, handleClick, chevronStyle]);
-  return expandElement;
+export var ToolTime = /*#__PURE__*/ memo(ToolTimeComponent);
+var ToolExpandComponent = function(param) {
+    var showContent = param.showContent, expanded = param.expanded, prefixCls = param.prefixCls, hashId = param.hashId, onExpandClick = param.onExpandClick;
+    var toolExpandClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-expand"), hashId);
+    }, [
+        prefixCls,
+        hashId
+    ]);
+    // 缓存样式对象，避免重复创建
+    var chevronStyle = useMemo(function() {
+        return {
+            transition: 'transform 0.3s ease-in-out',
+            transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)'
+        };
+    }, [
+        expanded
+    ]);
+    // 使用 useCallback 优化点击处理函数
+    var handleClick = useCallback(function(e) {
+        onExpandClick(e);
+    }, [
+        onExpandClick
+    ]);
+    // 缓存展开按钮元素
+    var expandElement = useMemo(function() {
+        if (!showContent) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: toolExpandClassName,
+            onClick: handleClick
+        }, /*#__PURE__*/ React.createElement(ChevronUp, {
+            style: chevronStyle
+        }));
+    }, [
+        showContent,
+        toolExpandClassName,
+        handleClick,
+        chevronStyle
+    ]);
+    return expandElement;
 };
-var ToolExpand = memo(ToolExpandComponent);
-var ToolContentComponent = ({
-  tool,
-  prefixCls,
-  hashId,
-  light,
-  showContent,
-  expanded
-}) => {
-  const toolContainerClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-container`, hashId, {
-      [`${prefixCls}-tool-container-light`]: light
-    });
-  }, [prefixCls, hashId, light]);
-  const errorClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-content-error`, hashId);
-  }, [prefixCls, hashId]);
-  const errorIconClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-content-error-icon`, hashId);
-  }, [prefixCls, hashId]);
-  const errorTextClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-content-error-text`, hashId);
-  }, [prefixCls, hashId]);
-  const contentClassName = useMemo(() => {
-    return classnames(`${prefixCls}-tool-content`, hashId);
-  }, [prefixCls, hashId]);
-  const errorDom = useMemo(() => {
-    return tool.status === "error" && tool.errorMessage ? /* @__PURE__ */ React.createElement("div", { className: errorClassName }, /* @__PURE__ */ React.createElement("div", { className: errorIconClassName }, /* @__PURE__ */ React.createElement(X, null)), /* @__PURE__ */ React.createElement("div", { className: errorTextClassName }, tool.errorMessage)) : null;
-  }, [
-    tool.status,
-    tool.errorMessage,
-    errorClassName,
-    errorIconClassName,
-    errorTextClassName
-  ]);
-  const contentDom = useMemo(() => {
-    return tool.content ? /* @__PURE__ */ React.createElement("div", { className: contentClassName }, tool.content) : null;
-  }, [tool.content, contentClassName]);
-  const contentVariants = useMemo(
-    () => ({
-      expanded: {
-        height: "auto",
-        opacity: 1
-      },
-      collapsed: {
-        height: 0,
-        opacity: 0
-      }
-    }),
-    []
-  );
-  const contentTransition = useMemo(
-    () => ({
-      height: {
-        duration: 0.26,
-        ease: [0.4, 0, 0.2, 1]
-      },
-      opacity: {
-        duration: 0.26,
-        ease: [0.4, 0, 0.2, 1]
-      }
-    }),
-    []
-  );
-  if (!showContent || !expanded) {
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
+export var ToolExpand = /*#__PURE__*/ memo(ToolExpandComponent);
+var ToolContentComponent = function(param) {
+    var tool = param.tool, prefixCls = param.prefixCls, hashId = param.hashId, light = param.light, showContent = param.showContent, expanded = param.expanded;
+    var toolContainerClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-container"), hashId, _define_property({}, "".concat(prefixCls, "-tool-container-light"), light));
+    }, [
+        prefixCls,
+        hashId,
+        light
+    ]);
+    // 缓存错误样式类名
+    var errorClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-content-error"), hashId);
+    }, [
+        prefixCls,
+        hashId
+    ]);
+    var errorIconClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-content-error-icon"), hashId);
+    }, [
+        prefixCls,
+        hashId
+    ]);
+    var errorTextClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-content-error-text"), hashId);
+    }, [
+        prefixCls,
+        hashId
+    ]);
+    var contentClassName = useMemo(function() {
+        return classnames("".concat(prefixCls, "-tool-content"), hashId);
+    }, [
+        prefixCls,
+        hashId
+    ]);
+    var errorDom = useMemo(function() {
+        return tool.status === 'error' && tool.errorMessage ? /*#__PURE__*/ React.createElement("div", {
+            className: errorClassName
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: errorIconClassName
+        }, /*#__PURE__*/ React.createElement(X, null)), /*#__PURE__*/ React.createElement("div", {
+            className: errorTextClassName
+        }, tool.errorMessage)) : null;
+    }, [
+        tool.status,
+        tool.errorMessage,
+        errorClassName,
+        errorIconClassName,
+        errorTextClassName
+    ]);
+    var contentDom = useMemo(function() {
+        return tool.content ? /*#__PURE__*/ React.createElement("div", {
+            className: contentClassName
+        }, tool.content) : null;
+    }, [
+        tool.content,
+        contentClassName
+    ]);
+    // 缓存容器元素
+    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.26,
+                ease: [
+                    0.4,
+                    0,
+                    0.2,
+                    1
+                ]
+            }
+        };
+    }, []);
+    if (!showContent || !expanded) {
+        return /*#__PURE__*/ React.createElement("div", {
+            style: {
+                overflow: 'hidden',
+                height: 1,
+                opacity: 0,
+                visibility: 'hidden'
+            },
+            role: "presentation",
+            "aria-hidden": "true"
+        }, contentDom, errorDom);
+    }
+    return /*#__PURE__*/ React.createElement(AnimatePresence, {
+        initial: false,
+        mode: "sync"
+    }, expanded ? /*#__PURE__*/ React.createElement(motion.div, {
+        key: "tool-content",
+        className: toolContainerClassName,
+        "data-testid": "tool-user-item-tool-container",
+        variants: contentVariants,
+        initial: "collapsed",
+        animate: "expanded",
+        exit: "collapsed",
+        transition: contentTransition,
         style: {
-          overflow: "hidden",
-          height: 1,
-          opacity: 0,
-          visibility: "hidden"
-        },
-        role: "presentation",
-        "aria-hidden": "true"
-      },
-      contentDom,
-      errorDom
-    );
-  }
-  return /* @__PURE__ */ React.createElement(AnimatePresence, { initial: false, mode: "sync" }, expanded ? /* @__PURE__ */ React.createElement(
-    motion.div,
-    {
-      key: "tool-content",
-      className: toolContainerClassName,
-      "data-testid": "tool-user-item-tool-container",
-      variants: contentVariants,
-      initial: "collapsed",
-      animate: "expanded",
-      exit: "collapsed",
-      transition: contentTransition,
-      style: { overflow: "hidden" }
-    },
-    contentDom,
-    errorDom
-  ) : null);
-};
-var ToolContent = memo(ToolContentComponent);
-export {
-  ToolContent,
-  ToolExpand,
-  ToolHeaderRight,
-  ToolImage,
-  ToolTime
+            overflow: 'hidden'
+        }
+    }, contentDom, errorDom) : null);
 };
+export var ToolContent = /*#__PURE__*/ memo(ToolContentComponent);