@ant-design/agentic-ui 2.0.4 → 2.0.5

package/dist/ToolUseBar/ToolUseBarThink.js

@@ -26,9 +26,234 @@ import { ConfigProvider } from "antd";
 import classNamesFn from "classnames";
 import { motion } from "framer-motion";
 import { useMergedState } from "rc-util";
-import React, { useContext, useEffect } from "react";
+import React, {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo
+} from "react";
 import { useStyle } from "./thinkStyle";
-var ToolUseBarThink = ({
+var LightModeIconComponent = ({
+  prefixCls,
+  hashId,
+  hover,
+  expandedState
+}) => {
+  const iconClassName = useMemo(() => {
+    return classNamesFn(
+      `${prefixCls}-header-left-icon`,
+      {
+        [`${prefixCls}-header-left-icon-light`]: true
+      },
+      hashId
+    );
+  }, [prefixCls, hashId]);
+  const chevronStyle = useMemo(() => {
+    return {
+      transform: expandedState ? "rotate(0deg)" : "rotate(-90deg)",
+      transition: "transform 0.2s"
+    };
+  }, [expandedState]);
+  const iconElement = useMemo(() => {
+    return hover ? /* @__PURE__ */ React.createElement(ChevronDown, { style: chevronStyle }) : /* @__PURE__ */ React.createElement(Brain, null);
+  }, [hover, chevronStyle]);
+  return /* @__PURE__ */ React.createElement("div", { className: iconClassName }, iconElement);
+};
+var LightModeIcon = memo(LightModeIconComponent);
+var HeaderContentComponent = ({
+  toolName,
+  toolTarget,
+  prefixCls,
+  hashId,
+  light,
+  classNames,
+  styles
+}) => {
+  const nameClassName = useMemo(() => {
+    return classNamesFn(
+      `${prefixCls}-name`,
+      {
+        [`${prefixCls}-name-light`]: light
+      },
+      hashId,
+      classNames == null ? void 0 : classNames.name
+    );
+  }, [prefixCls, hashId, light, classNames == null ? void 0 : classNames.name]);
+  const targetClassName = useMemo(() => {
+    return classNamesFn(`${prefixCls}-target`, hashId, classNames == null ? void 0 : classNames.target);
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.target]);
+  const nameElement = useMemo(() => {
+    return toolName ? /* @__PURE__ */ React.createElement("div", { className: nameClassName, style: styles == null ? void 0 : styles.name }, toolName) : null;
+  }, [toolName, nameClassName, styles == null ? void 0 : styles.name]);
+  const targetElement = useMemo(() => {
+    return toolTarget ? /* @__PURE__ */ React.createElement("div", { className: targetClassName, style: styles == null ? void 0 : styles.target }, toolTarget) : /* @__PURE__ */ React.createElement("div", null);
+  }, [toolTarget, targetClassName, styles == null ? void 0 : styles.target]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, nameElement, targetElement);
+};
+var HeaderContent = memo(HeaderContentComponent);
+var TimeElementComponent = ({
+  time,
+  prefixCls,
+  hashId,
+  classNames,
+  styles
+}) => {
+  const timeClassName = useMemo(() => {
+    return classNamesFn(`${prefixCls}-time`, hashId, classNames == null ? void 0 : classNames.time);
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.time]);
+  const timeElement = useMemo(() => {
+    return time ? /* @__PURE__ */ React.createElement("div", { className: timeClassName, style: styles == null ? void 0 : styles.time }, time) : null;
+  }, [time, timeClassName, styles == null ? void 0 : styles.time]);
+  return timeElement;
+};
+var TimeElement = memo(TimeElementComponent);
+var ExpandButtonComponent = ({
+  thinkContent,
+  light,
+  expandedState,
+  prefixCls,
+  hashId,
+  classNames,
+  styles,
+  onToggleExpand
+}) => {
+  const expandClassName = useMemo(() => {
+    return classNamesFn(`${prefixCls}-expand`, hashId, classNames == null ? void 0 : classNames.expand);
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.expand]);
+  const expandIcon = useMemo(() => {
+    return !expandedState ? /* @__PURE__ */ React.createElement(ChevronsUpDown, null) : /* @__PURE__ */ React.createElement(ChevronsDownUp, null);
+  }, [expandedState]);
+  const expandElement = useMemo(() => {
+    return thinkContent && !light ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: expandClassName,
+        onClick: onToggleExpand,
+        style: styles == null ? void 0 : styles.expand
+      },
+      expandIcon
+    ) : null;
+  }, [
+    thinkContent,
+    light,
+    expandClassName,
+    onToggleExpand,
+    styles == null ? void 0 : styles.expand,
+    expandIcon
+  ]);
+  return expandElement;
+};
+var ExpandButton = memo(ExpandButtonComponent);
+var ThinkContainerComponent = ({
+  thinkContent,
+  expandedState,
+  floatingExpandedState,
+  status,
+  light,
+  prefixCls,
+  hashId,
+  classNames,
+  styles,
+  onToggleFloatingExpand
+}) => {
+  const containerClassName = useMemo(() => {
+    return classNamesFn(
+      `${prefixCls}-container`,
+      hashId,
+      classNames == null ? void 0 : classNames.container,
+      {
+        [`${prefixCls}-container-expanded`]: expandedState,
+        [`${prefixCls}-container-loading`]: status === "loading" && !floatingExpandedState,
+        [`${prefixCls}-container-light`]: light,
+        [`${prefixCls}-container-floating-expanded`]: floatingExpandedState
+      }
+    );
+  }, [
+    prefixCls,
+    hashId,
+    classNames == null ? void 0 : classNames.container,
+    expandedState,
+    status,
+    floatingExpandedState,
+    light
+  ]);
+  const containerStyle = useMemo(() => {
+    return __spreadValues(__spreadValues({}, expandedState ? {} : {
+      height: 1,
+      padding: "0 8px",
+      margin: 0,
+      overflow: "hidden",
+      minHeight: 0,
+      visibility: "hidden"
+    }), styles == null ? void 0 : styles.container);
+  }, [expandedState, styles == null ? void 0 : styles.container]);
+  const contentClassName = useMemo(() => {
+    return classNamesFn(`${prefixCls}-content`, hashId, classNames == null ? void 0 : classNames.content);
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.content]);
+  const floatingExpandClassName = useMemo(() => {
+    return classNamesFn(
+      `${prefixCls}-floating-expand`,
+      hashId,
+      classNames == null ? void 0 : classNames.floatingExpand
+    );
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.floatingExpand]);
+  const floatingIconStyle = useMemo(() => {
+    return {
+      fontSize: 16,
+      color: "var(--color-gray-text-light)"
+    };
+  }, []);
+  const floatingIcon = useMemo(() => {
+    return !floatingExpandedState ? /* @__PURE__ */ React.createElement(ChevronsUpDown, { style: floatingIconStyle }) : /* @__PURE__ */ React.createElement(ChevronsDownUp, { style: floatingIconStyle });
+  }, [floatingExpandedState, floatingIconStyle]);
+  const floatingText = useMemo(() => {
+    return floatingExpandedState ? "收起" : "展开";
+  }, [floatingExpandedState]);
+  const floatingExpandElement = useMemo(() => {
+    return status === "loading" && !light ? /* @__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
+    ) : null;
+  }, [
+    status,
+    light,
+    floatingExpandClassName,
+    onToggleFloatingExpand,
+    styles == null ? void 0 : styles.floatingExpand,
+    floatingIcon,
+    floatingText
+  ]);
+  const containerElement = useMemo(() => {
+    return thinkContent ? /* @__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),
+      floatingExpandElement
+    ) : null;
+  }, [
+    thinkContent,
+    containerClassName,
+    containerStyle,
+    contentClassName,
+    styles == null ? void 0 : styles.content,
+    floatingExpandElement
+  ]);
+  return containerElement;
+};
+var ThinkContainer = memo(ThinkContainerComponent);
+var ToolUseBarThinkComponent = ({
   toolName,
   toolTarget,
   time,
@@ -60,37 +285,109 @@ var ToolUseBarThink = ({
       onChange: onFloatingExpandedChange
     }
   );
-  const defaultIcon = /* @__PURE__ */ React.createElement(Brain, null);
-  const handleToggleExpand = () => {
+  const defaultIcon = useMemo(() => /* @__PURE__ */ React.createElement(Brain, null), []);
+  const handleToggleExpand = useCallback(() => {
     setExpandedState(!expandedState);
-  };
-  const handleToggleFloatingExpand = () => {
+  }, [expandedState, setExpandedState]);
+  const handleToggleFloatingExpand = useCallback(() => {
     setFloatingExpandedState(!floatingExpandedState);
-  };
+  }, [floatingExpandedState, setFloatingExpandedState]);
   useEffect(() => {
     if (status === "loading") {
       setExpandedState(true);
     }
-  }, [status]);
+  }, [status, setExpandedState]);
   const [hover, setHover] = React.useState(false);
+  const rootClassName = useMemo(() => {
+    return classNamesFn(prefixCls, hashId, classNames == null ? void 0 : classNames.root, {
+      [`${prefixCls}-expanded`]: !expandedState,
+      [`${prefixCls}-loading`]: status === "loading",
+      [`${prefixCls}-active`]: expandedState,
+      [`${prefixCls}-success`]: status === "success",
+      [`${prefixCls}-light`]: light
+    });
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.root, expandedState, status, light]);
+  const barClassName = useMemo(() => {
+    return classNamesFn(`${prefixCls}-bar`, hashId, classNames == null ? void 0 : classNames.bar);
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.bar]);
+  const headerClassName = useMemo(() => {
+    return classNamesFn(`${prefixCls}-header`, hashId, classNames == null ? void 0 : classNames.header, {
+      [`${prefixCls}-header-light`]: light
+    });
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.header, light]);
+  const headerLeftClassName = useMemo(() => {
+    return classNamesFn(
+      `${prefixCls}-header-left`,
+      hashId,
+      classNames == null ? void 0 : classNames.headerLeft
+    );
+  }, [prefixCls, hashId, classNames == null ? void 0 : classNames.headerLeft]);
+  const loadingAnimationConfig = useMemo(
+    () => ({
+      animate: {
+        "--rotate": ["0deg", "360deg"]
+      },
+      transition: {
+        "--rotate": {
+          duration: 1,
+          repeat: Infinity,
+          ease: "linear"
+        }
+      },
+      style: {
+        "--rotation": "360deg"
+      }
+    }),
+    []
+  );
+  const idleAnimationConfig = useMemo(
+    () => ({
+      animate: {},
+      transition: {},
+      style: {
+        "--rotation": "0deg"
+      }
+    }),
+    []
+  );
+  const imageAnimationProps = useMemo(() => {
+    return status === "loading" ? loadingAnimationConfig : idleAnimationConfig;
+  }, [status, loadingAnimationConfig, idleAnimationConfig]);
+  const headerRightAnimationConfig = useMemo(() => {
+    if (status === "loading") {
+      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%)"
+        }
+      };
+    }
+    return {};
+  }, [status]);
   return wrapSSR(
     /* @__PURE__ */ React.createElement(
       "div",
       {
         "data-testid": testId || "ToolUseBarThink",
-        className: classNamesFn(prefixCls, hashId, classNames == null ? void 0 : classNames.root, {
-          [`${prefixCls}-expanded`]: !expandedState,
-          [`${prefixCls}-loading`]: status === "loading",
-          [`${prefixCls}-active`]: expandedState,
-          [`${prefixCls}-success`]: status === "success",
-          [`${prefixCls}-light`]: light
-        }),
+        className: rootClassName,
         style: styles == null ? void 0 : styles.root
       },
       /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: classNamesFn(`${prefixCls}-bar`, hashId, classNames == null ? void 0 : classNames.bar),
+          className: barClassName,
           "data-testid": "tool-use-bar-think-bar",
           style: styles == null ? void 0 : styles.bar,
           onClick: handleToggleExpand
@@ -98,236 +395,109 @@ var ToolUseBarThink = ({
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNamesFn(
-              `${prefixCls}-header`,
-              hashId,
-              classNames == null ? void 0 : classNames.header,
-              {
-                [`${prefixCls}-header-light`]: light
-              }
-            ),
+            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",
+          /* @__PURE__ */ React.createElement("div", { className: headerLeftClassName, style: styles == null ? void 0 : styles.headerLeft }, light ? /* @__PURE__ */ React.createElement(
+            LightModeIcon,
             {
+              prefixCls,
+              hashId,
+              hover,
+              expandedState,
+              classNames
+            }
+          ) : /* @__PURE__ */ React.createElement(
+            motion.div,
+            __spreadValues({
               className: classNamesFn(
-                `${prefixCls}-header-left`,
+                `${prefixCls}-image-wrapper`,
                 hashId,
-                classNames == null ? void 0 : classNames.headerLeft
-              ),
-              style: styles == null ? void 0 : styles.headerLeft
-            },
-            light ? /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                className: classNamesFn(
-                  `${prefixCls}-header-left-icon`,
-                  {
-                    [`${prefixCls}-header-left-icon-light`]: light
-                  },
-                  hashId
-                )
-              },
-              hover ? /* @__PURE__ */ React.createElement(
-                ChevronDown,
+                classNames == null ? void 0 : classNames.imageWrapper,
                 {
-                  style: {
-                    transform: expandedState ? "rotate(0deg)" : "rotate(-90deg)",
-                    transition: "transform 0.2s"
-                  }
+                  [`${prefixCls}-image-wrapper-rotating`]: status === "loading",
+                  [`${prefixCls}-image-wrapper-loading`]: status === "loading"
                 }
-              ) : /* @__PURE__ */ React.createElement(Brain, null)
-            ) : /* @__PURE__ */ React.createElement(
-              motion.div,
+              )
+            }, imageAnimationProps),
+            icon || /* @__PURE__ */ React.createElement(
+              "div",
               {
                 className: classNamesFn(
-                  `${prefixCls}-image-wrapper`,
+                  `${prefixCls}-image`,
                   hashId,
-                  classNames == null ? void 0 : classNames.imageWrapper,
-                  {
-                    [`${prefixCls}-image-wrapper-rotating`]: status === "loading",
-                    [`${prefixCls}-image-wrapper-loading`]: status === "loading"
-                  }
+                  classNames == null ? void 0 : classNames.image
                 ),
-                animate: status === "loading" ? {
-                  "--rotate": ["0deg", "360deg"]
-                } : {},
-                transition: status === "loading" ? {
-                  "--rotate": {
-                    duration: 1,
-                    repeat: Infinity,
-                    ease: "linear"
-                  }
-                } : {},
-                style: {
-                  "--rotation": status === "loading" ? "360deg" : "0deg"
-                }
+                style: styles == null ? void 0 : styles.image
               },
-              icon || /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  className: classNamesFn(
-                    `${prefixCls}-image`,
-                    hashId,
-                    classNames == null ? void 0 : classNames.image
-                  ),
-                  style: styles == null ? void 0 : styles.image
-                },
-                defaultIcon
-              )
+              defaultIcon
             )
-          ),
+          )),
           /* @__PURE__ */ React.createElement(
             motion.div,
-            {
-              className: classNamesFn(`${prefixCls}-header-right`, hashId),
-              animate: status === "loading" ? {
-                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: status === "loading" ? {
-                maskImage: {
-                  duration: 1,
-                  repeat: Infinity,
-                  ease: "linear"
-                }
-              } : {},
-              style: {
-                maskImage: status === "loading" ? "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%)" : void 0
-              }
-            },
-            toolName && /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                className: classNamesFn(
-                  `${prefixCls}-name`,
-                  {
-                    [`${prefixCls}-name-light`]: light
-                  },
-                  hashId,
-                  classNames == null ? void 0 : classNames.name
-                ),
-                style: styles == null ? void 0 : styles.name
-              },
-              toolName
-            ),
-            toolTarget ? /* @__PURE__ */ React.createElement(
-              "div",
+            __spreadValues({
+              className: classNamesFn(`${prefixCls}-header-right`, hashId)
+            }, headerRightAnimationConfig),
+            /* @__PURE__ */ React.createElement(
+              HeaderContent,
               {
-                className: classNamesFn(
-                  `${prefixCls}-target`,
-                  hashId,
-                  classNames == null ? void 0 : classNames.target
-                ),
-                style: styles == null ? void 0 : styles.target
-              },
-              toolTarget
-            ) : /* @__PURE__ */ React.createElement("div", null)
+                toolName,
+                toolTarget,
+                prefixCls,
+                hashId,
+                light,
+                classNames,
+                styles
+              }
+            )
           )
         ),
-        time && /* @__PURE__ */ React.createElement(
-          "div",
+        /* @__PURE__ */ React.createElement(
+          TimeElement,
           {
-            className: classNamesFn(
-              `${prefixCls}-time`,
-              hashId,
-              classNames == null ? void 0 : classNames.time
-            ),
-            style: styles == null ? void 0 : styles.time
-          },
-          time
+            time,
+            prefixCls,
+            hashId,
+            classNames,
+            styles
+          }
         ),
-        thinkContent && !light && /* @__PURE__ */ React.createElement(
-          "div",
+        /* @__PURE__ */ React.createElement(
+          ExpandButton,
           {
-            className: classNamesFn(
-              `${prefixCls}-expand`,
-              hashId,
-              classNames == null ? void 0 : classNames.expand
-            ),
-            onClick: handleToggleExpand,
-            style: styles == null ? void 0 : styles.expand
-          },
-          !expandedState ? /* @__PURE__ */ React.createElement(ChevronsUpDown, null) : /* @__PURE__ */ React.createElement(ChevronsDownUp, null)
+            thinkContent,
+            light,
+            expandedState,
+            prefixCls,
+            hashId,
+            classNames,
+            styles,
+            onToggleExpand: handleToggleExpand
+          }
         )
       ),
-      thinkContent && /* @__PURE__ */ React.createElement(
-        "div",
+      /* @__PURE__ */ React.createElement(
+        ThinkContainer,
         {
-          className: classNamesFn(
-            `${prefixCls}-container`,
-            hashId,
-            classNames == null ? void 0 : classNames.container,
-            {
-              [`${prefixCls}-container-expanded`]: expandedState,
-              [`${prefixCls}-container-loading`]: status === "loading" && !floatingExpandedState,
-              [`${prefixCls}-container-light`]: light,
-              [`${prefixCls}-container-floating-expanded`]: floatingExpandedState
-            }
-          ),
-          "data-testid": "tool-use-bar-think-container",
-          style: __spreadValues(__spreadValues({}, expandedState ? {} : {
-            height: 1,
-            padding: "0 8px",
-            margin: 0,
-            overflow: "hidden",
-            minHeight: 0,
-            visibility: "hidden"
-          }), styles == null ? void 0 : styles.container)
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNamesFn(
-              `${prefixCls}-content`,
-              hashId,
-              classNames == null ? void 0 : classNames.content
-            ),
-            style: styles == null ? void 0 : styles.content
-          },
-          thinkContent
-        ),
-        status === "loading" && !light ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNamesFn(
-              `${prefixCls}-floating-expand`,
-              hashId,
-              classNames == null ? void 0 : classNames.floatingExpand
-            ),
-            onClick: handleToggleFloatingExpand,
-            "data-testid": "tool-use-bar-think-floating-expand",
-            style: styles == null ? void 0 : styles.floatingExpand
-          },
-          !floatingExpandedState ? /* @__PURE__ */ React.createElement(
-            ChevronsUpDown,
-            {
-              style: {
-                fontSize: 16,
-                color: "var(--color-gray-text-light)"
-              }
-            }
-          ) : /* @__PURE__ */ React.createElement(
-            ChevronsDownUp,
-            {
-              style: {
-                fontSize: 16,
-                color: "var(--color-gray-text-light)"
-              }
-            }
-          ),
-          floatingExpandedState ? "收起" : "展开"
-        ) : null
+          thinkContent,
+          expandedState,
+          floatingExpandedState,
+          status,
+          light,
+          prefixCls,
+          hashId,
+          classNames,
+          styles,
+          onToggleFloatingExpand: handleToggleFloatingExpand
+        }
       )
     )
   );
 };
+var ToolUseBarThink = memo(ToolUseBarThinkComponent);
 export {
   ToolUseBarThink
 };