@ant-design/agentic-ui 2.0.3 → 2.0.5

package/dist/ToolUseBar/ToolUseBarItem.d.ts

@@ -23,4 +23,4 @@ export interface ToolUseBarItemProps {
     defaultExpanded?: boolean;
     light?: boolean;
 }
-export declare const ToolUseBarItem: React.FC<ToolUseBarItemProps>;
+export declare const ToolUseBarItem: React.NamedExoticComponent<ToolUseBarItemProps>;

package/dist/ToolUseBar/ToolUseBarItem.js

@@ -1,10 +1,15 @@
 // src/ToolUseBar/ToolUseBarItem.tsx
-import { Api, ChevronUp, X } from "@sofa-design/icons";
 import classnames from "classnames";
-import { motion } from "framer-motion";
 import { useMergedState } from "rc-util";
-import React, { useMemo } from "react";
-var ToolUseBarItem = ({
+import React, { memo, useCallback, useMemo } from "react";
+import {
+  ToolContent,
+  ToolExpand,
+  ToolHeaderRight,
+  ToolImage,
+  ToolTime
+} from "./ToolUseBarItemComponents";
+var ToolUseBarItemComponent = ({
   tool,
   prefixCls,
   hashId,
@@ -16,194 +21,116 @@ var ToolUseBarItem = ({
   defaultExpanded,
   light = false
 }) => {
-  var _a, _b;
   const [expanded, setExpanded] = useMergedState(defaultExpanded != null ? defaultExpanded : false, {
     value: isExpanded,
     onChange: onExpandedChange ? (value) => onExpandedChange(tool.id, value) : void 0
   });
-  const errorDom = useMemo(() => {
-    return tool.status === "error" && tool.errorMessage ? /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-content-error`, hashId) }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classnames(`${prefixCls}-tool-content-error-icon`, hashId)
-      },
-      /* @__PURE__ */ React.createElement(X, null)
-    ), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classnames(`${prefixCls}-tool-content-error-text`, hashId)
-      },
-      tool.errorMessage
-    )) : null;
-  }, [tool.status, tool.errorMessage, prefixCls, hashId]);
-  const contentDom = useMemo(() => {
-    return tool.content ? /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-content`, hashId) }, tool.content) : null;
-  }, [tool.content, prefixCls, hashId]);
   const showContent = useMemo(() => {
-    return !!errorDom || !!contentDom;
-  }, [errorDom, contentDom]);
-  const handleClick = (e) => {
-    onClick == null ? void 0 : onClick(tool.id);
-    if (onActiveChange && !showContent) {
-      onActiveChange(tool.id, !isActive);
-    }
-    if (!showContent)
-      return;
-    if (e.target instanceof Element) {
-      const tag = e.target.tagName.toLowerCase();
-      if (["a", "button", "input", "textarea", "select", "label"].includes(tag))
+    return !!(tool.status === "error" && tool.errorMessage) || !!tool.content;
+  }, [tool.status, tool.errorMessage, tool.content]);
+  const toolClassName = useMemo(() => {
+    return classnames(`${prefixCls}-tool ${hashId}`, {
+      [`${prefixCls}-tool-success`]: tool.status === "success",
+      [`${prefixCls}-tool-loading`]: tool.status === "loading",
+      [`${prefixCls}-tool-loading-light`]: tool.status === "loading" && light,
+      [`${prefixCls}-tool-error`]: tool.status === "error",
+      [`${prefixCls}-tool-idle`]: tool.status === "idle",
+      [`${prefixCls}-tool-active`]: isActive && !expanded,
+      [`${prefixCls}-tool-expanded`]: expanded,
+      [`${prefixCls}-tool-light`]: light
+    });
+  }, [prefixCls, hashId, tool.status, light, isActive, expanded]);
+  const toolBarClassName = useMemo(() => {
+    return classnames(`${prefixCls}-tool-bar`, hashId);
+  }, [prefixCls, hashId]);
+  const toolHeaderClassName = useMemo(() => {
+    return classnames(`${prefixCls}-tool-header`, hashId);
+  }, [prefixCls, hashId]);
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(tool.id);
+      if (onActiveChange && !showContent) {
+        onActiveChange(tool.id, !isActive);
+      }
+      if (!showContent)
         return;
-    }
-    setExpanded((prev) => !prev);
-  };
-  const handleExpandClick = (e) => {
-    e.stopPropagation();
-    setExpanded((prev) => !prev);
-  };
+      if (e.target instanceof Element) {
+        const tag = e.target.tagName.toLowerCase();
+        if (["a", "button", "input", "textarea", "select", "label"].includes(tag))
+          return;
+      }
+      setExpanded((prev) => !prev);
+    },
+    [onClick, tool.id, onActiveChange, showContent, isActive, setExpanded]
+  );
+  const handleExpandClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      setExpanded((prev) => !prev);
+    },
+    [setExpanded]
+  );
   if (tool.type === "summary") {
     return /* @__PURE__ */ React.createElement(
-      "div",
+      ToolContent,
       {
-        className: classnames(`${prefixCls}-tool-container`, hashId),
-        "data-testid": "tool-user-item-tool-container "
-      },
-      contentDom
+        tool,
+        prefixCls,
+        hashId,
+        light,
+        showContent: true,
+        expanded: true
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { key: tool.id, "data-testid": "ToolUserItem", className: toolClassName }, /* @__PURE__ */ React.createElement(
     "div",
     {
-      key: tool.id,
-      "data-testid": "ToolUserItem",
-      className: classnames(`${prefixCls}-tool ${hashId}`, {
-        [`${prefixCls}-tool-success`]: tool.status === "success",
-        [`${prefixCls}-tool-loading`]: tool.status === "loading",
-        [`${prefixCls}-tool-loading-light`]: tool.status === "loading" && light,
-        [`${prefixCls}-tool-error`]: tool.status === "error",
-        [`${prefixCls}-tool-idle`]: tool.status === "idle",
-        [`${prefixCls}-tool-active`]: isActive && !expanded,
-        [`${prefixCls}-tool-expanded`]: expanded,
-        [`${prefixCls}-tool-light`]: light
-      })
+      className: toolBarClassName,
+      "data-testid": "tool-user-item-tool-bar",
+      onClick: handleClick
     },
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classnames(`${prefixCls}-tool-bar`, hashId),
-        "data-testid": "tool-user-item-tool-bar",
-        onClick: (e) => {
-          handleClick(e);
-        }
+        className: toolHeaderClassName,
+        "data-testid": "tool-user-item-tool-header"
       },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classnames(`${prefixCls}-tool-header`, hashId),
-          "data-testid": "tool-user-item-tool-header"
-        },
-        /* @__PURE__ */ React.createElement(
-          motion.div,
-          {
-            className: classnames(`${prefixCls}-tool-image-wrapper`, hashId, {
-              [`${prefixCls}-tool-image-wrapper-rotating`]: tool.status === "loading",
-              [`${prefixCls}-tool-image-wrapper-loading`]: tool.status === "loading"
-            }),
-            animate: tool.status === "loading" ? {
-              "--rotate": ["0deg", "360deg"]
-            } : {},
-            transition: tool.status === "loading" ? {
-              "--rotate": {
-                duration: 1,
-                repeat: Infinity,
-                ease: "linear"
-              }
-            } : {},
-            style: {
-              "--rotation": tool.status === "loading" ? "360deg" : "0deg"
-            }
-          },
-          /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-image`, hashId) }, tool.icon ? tool.icon : /* @__PURE__ */ React.createElement(Api, null))
-        )
-      ),
-      /* @__PURE__ */ React.createElement(
-        motion.div,
-        {
-          className: classnames(
-            `${prefixCls}-tool-header-right`,
-            {
-              [`${prefixCls}-tool-header-right-light`]: light
-            },
-            hashId
-          ),
-          animate: tool.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: tool.status === "loading" ? {
-            maskImage: {
-              duration: 1,
-              repeat: Infinity,
-              ease: "linear"
-            }
-          } : {},
-          style: {
-            maskImage: tool.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
-          }
-        },
-        tool.toolName && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classnames(`${prefixCls}-tool-name`, hashId, {
-              [`${prefixCls}-tool-name-loading`]: tool.status === "loading"
-            })
-          },
-          tool.toolName
-        ),
-        tool.toolTarget && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classnames(`${prefixCls}-tool-target`, hashId, {
-              [`${prefixCls}-tool-target-loading`]: tool.status === "loading",
-              [`${prefixCls}-tool-target-light`]: light
-            }),
-            title: (_b = (_a = tool.toolTarget) == null ? void 0 : _a.toString()) != null ? _b : void 0
-          },
-          tool.toolTarget
-        )
-      ),
-      tool.time && /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-time`, hashId) }, tool.time),
-      showContent && /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classnames(`${prefixCls}-tool-expand`, hashId),
-          onClick: handleExpandClick
-        },
-        /* @__PURE__ */ React.createElement(
-          ChevronUp,
-          {
-            style: {
-              transition: "transform 0.3s ease-in-out",
-              transform: expanded ? "rotate(180deg)" : "rotate(0deg)"
-            }
-          }
-        )
-      )
+      /* @__PURE__ */ React.createElement(ToolImage, { tool, prefixCls, hashId })
     ),
-    showContent && expanded ? /* @__PURE__ */ React.createElement(
-      "div",
+    /* @__PURE__ */ React.createElement(
+      ToolHeaderRight,
       {
-        className: classnames(`${prefixCls}-tool-container`, hashId, {
-          [`${prefixCls}-tool-container-light`]: light
-        }),
-        "data-testid": "tool-user-item-tool-container "
-      },
-      contentDom,
-      errorDom
-    ) : null
-  );
+        tool,
+        prefixCls,
+        hashId,
+        light
+      }
+    ),
+    /* @__PURE__ */ React.createElement(ToolTime, { tool, prefixCls, hashId }),
+    /* @__PURE__ */ React.createElement(
+      ToolExpand,
+      {
+        showContent,
+        expanded,
+        prefixCls,
+        hashId,
+        onExpandClick: handleExpandClick
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
+    ToolContent,
+    {
+      tool,
+      prefixCls,
+      hashId,
+      light,
+      showContent,
+      expanded
+    }
+  ));
 };
+var ToolUseBarItem = memo(ToolUseBarItemComponent);
 export {
   ToolUseBarItem
 };

package/dist/ToolUseBar/ToolUseBarItemComponents.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ToolCall } from './ToolUseBarItem';
+interface ToolImageProps {
+    tool: ToolCall;
+    prefixCls: string;
+    hashId: string;
+}
+export declare const ToolImage: React.NamedExoticComponent<ToolImageProps>;
+interface ToolHeaderRightProps {
+    tool: ToolCall;
+    prefixCls: string;
+    hashId: string;
+    light: boolean;
+}
+export declare const ToolHeaderRight: React.NamedExoticComponent<ToolHeaderRightProps>;
+interface ToolTimeProps {
+    tool: ToolCall;
+    prefixCls: string;
+    hashId: string;
+}
+export declare const ToolTime: React.NamedExoticComponent<ToolTimeProps>;
+interface ToolExpandProps {
+    showContent: boolean;
+    expanded: boolean;
+    prefixCls: string;
+    hashId: string;
+    onExpandClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const ToolExpand: React.NamedExoticComponent<ToolExpandProps>;
+interface ToolContentProps {
+    tool: ToolCall;
+    prefixCls: string;
+    hashId: string;
+    light: boolean;
+    showContent: boolean;
+    expanded: boolean;
+}
+export declare const ToolContent: React.NamedExoticComponent<ToolContentProps>;
+export {};

package/dist/ToolUseBar/ToolUseBarItemComponents.js

@@ -0,0 +1,242 @@
+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]);
+    }
+  return a;
+};
+
+// src/ToolUseBar/ToolUseBarItemComponents.tsx
+import { Api, ChevronUp, X } from "@sofa-design/icons";
+import classnames from "classnames";
+import { 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 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);
+};
+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;
+};
+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;
+};
+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 containerElement = useMemo(() => {
+    if (!showContent || !expanded)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: toolContainerClassName,
+        "data-testid": "tool-user-item-tool-container "
+      },
+      contentDom,
+      errorDom
+    );
+  }, [showContent, expanded, toolContainerClassName, contentDom, errorDom]);
+  return containerElement;
+};
+var ToolContent = memo(ToolContentComponent);
+export {
+  ToolContent,
+  ToolExpand,
+  ToolHeaderRight,
+  ToolImage,
+  ToolTime
+};

package/dist/ToolUseBar/ToolUseBarThink.d.ts

@@ -45,4 +45,4 @@ export interface ToolUseBarThinkProps {
         floatingExpand?: React.CSSProperties;
     };
 }
-export declare const ToolUseBarThink: React.FC<ToolUseBarThinkProps>;
+export declare const ToolUseBarThink: React.NamedExoticComponent<ToolUseBarThinkProps>;