@ant-design/agentic-ui 2.0.4 → 2.0.6

package/dist/ToolUseBar/index.d.ts

@@ -15,46 +15,4 @@ interface ToolUseBarProps {
     testId?: string;
     light?: boolean;
 }
-/**
- * ToolUseBar 组件 - 工具使用栏组件
- *
- * 该组件显示工具使用列表，支持工具的展开/折叠、激活状态管理等功能。
- * 每个工具项显示工具名称、目标、时间等信息，支持点击交互。
- *
- * @component
- * @description 工具使用栏组件，显示工具使用列表和状态
- * @param {ToolUseBarProps} props - 组件属性
- * @param {ToolUseItem[]} [props.tools] - 工具使用列表
- * @param {string[]} [props.activeKeys] - 当前激活的工具ID列表
- * @param {string[]} [props.defaultActiveKeys] - 默认激活的工具ID列表
- * @param {(keys: string[]) => void} [props.onActiveKeysChange] - 激活状态变化回调
- * @param {string[]} [props.expandedKeys] - 当前展开的工具ID列表
- * @param {string[]} [props.defaultExpandedKeys] - 默认展开的工具ID列表
- * @param {(keys: string[]) => void} [props.onExpandedKeysChange] - 展开状态变化回调
- * @param {(tool: ToolUseItem) => void} [props.onToolClick] - 工具点击回调
- * @param {string} [props.className] - 自定义CSS类名
- * @param {React.CSSProperties} [props.style] - 自定义样式
- *
- * @example
- * ```tsx
- * <ToolUseBar
- *   tools={toolList}
- *   activeKeys={['tool1', 'tool2']}
- *   onActiveKeysChange={(keys) => setActiveKeys(keys)}
- *   expandedKeys={['tool1']}
- *   onExpandedKeysChange={(keys) => setExpandedKeys(keys)}
- *   onToolClick={(tool) => console.log('点击工具:', tool.toolName)}
- * />
- * ```
- *
- * @returns {React.ReactElement} 渲染的工具使用栏组件
- *
- * @remarks
- * - 支持工具列表的受控和非受控展开/折叠
- * - 支持工具的受控和非受控激活状态管理
- * - 显示工具名称、目标、时间等信息
- * - 支持工具点击交互
- * - 提供加载状态显示
- * - 支持错误状态处理
- */
-export declare const ToolUseBar: React.FC<ToolUseBarProps>;
+export declare const ToolUseBar: React.NamedExoticComponent<ToolUseBarProps>;

package/dist/ToolUseBar/index.js

@@ -18,13 +18,12 @@ var __objRest = (source, exclude) => {
 import { ConfigProvider } from "antd";
 import classNames from "classnames";
 import { useMergedState } from "rc-util";
-import React, { useContext } from "react";
-import { useRefFunction } from "../hooks/useRefFunction";
+import React, { memo, useCallback, useContext, useMemo } from "react";
 import { ToolUseBarItem } from "./ToolUseBarItem";
 import { useStyle } from "./style";
 export * from "./ToolUseBarItem";
 export * from "./ToolUseBarThink";
-var ToolUseBar = (_a) => {
+var ToolUseBarComponent = (_a) => {
   var _b = _a, {
     tools,
     onActiveKeysChange,
@@ -54,13 +53,16 @@ var ToolUseBar = (_a) => {
       onChange: onExpandedKeysChange
     }
   );
-  const handleActiveChange = useRefFunction((id, active) => {
-    if (onActiveKeysChange) {
-      const newActiveKeys = active ? [...activeKeys, id] : activeKeys.filter((key) => key !== id);
-      setActiveKeys(newActiveKeys);
-    }
-  });
-  const handleExpandedChange = useRefFunction(
+  const handleActiveChange = useCallback(
+    (id, active) => {
+      if (onActiveKeysChange) {
+        const newActiveKeys = active ? [...activeKeys, id] : activeKeys.filter((key) => key !== id);
+        setActiveKeys(newActiveKeys);
+      }
+    },
+    [onActiveKeysChange, activeKeys, setActiveKeys]
+  );
+  const handleExpandedChange = useCallback(
     (id, expanded) => {
       const newExpandedKeys = expanded ? [...expandedKeys, id] : expandedKeys.filter((key) => key !== id);
       const removedKeys = expandedKeys.filter(
@@ -70,45 +72,54 @@ var ToolUseBar = (_a) => {
       if (onExpandedKeysChange) {
         onExpandedKeysChange(newExpandedKeys, removedKeys);
       }
-    }
+    },
+    [onExpandedKeysChange, expandedKeys, setExpandedKeys]
   );
+  const toolItems = useMemo(() => {
+    if (!(tools == null ? void 0 : tools.length))
+      return null;
+    return tools.map((tool) => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement(
+        ToolUseBarItem,
+        {
+          key: tool.id,
+          tool,
+          onClick: props.onToolClick,
+          isActive: activeKeys.includes(tool.id),
+          onActiveChange: handleActiveChange,
+          isExpanded: onExpandedKeysChange ? expandedKeys.includes(tool.id) : void 0,
+          onExpandedChange: onExpandedKeysChange ? handleExpandedChange : void 0,
+          defaultExpanded: (_a2 = props.defaultExpandedKeys) == null ? void 0 : _a2.includes(tool.id),
+          prefixCls,
+          hashId,
+          light
+        }
+      );
+    });
+  }, [
+    tools,
+    props.onToolClick,
+    activeKeys,
+    handleActiveChange,
+    onExpandedKeysChange,
+    expandedKeys,
+    handleExpandedChange,
+    props.defaultExpandedKeys,
+    prefixCls,
+    hashId,
+    light
+  ]);
+  const containerClassName = useMemo(() => {
+    return classNames(prefixCls, hashId, props.className);
+  }, [prefixCls, hashId, props.className]);
   if (!(tools == null ? void 0 : tools.length))
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames(prefixCls, hashId, props.className),
-        "data-testid": "ToolUse"
-      }
-    );
+    return /* @__PURE__ */ React.createElement("div", { className: containerClassName, "data-testid": "ToolUse" });
   return wrapSSR(
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames(prefixCls, hashId, props.className),
-        "data-testid": "ToolUse"
-      },
-      tools.map((tool) => {
-        var _a2;
-        return /* @__PURE__ */ React.createElement(
-          ToolUseBarItem,
-          {
-            key: tool.id,
-            tool,
-            onClick: props.onToolClick,
-            isActive: activeKeys.includes(tool.id),
-            onActiveChange: handleActiveChange,
-            isExpanded: onExpandedKeysChange ? expandedKeys.includes(tool.id) : void 0,
-            onExpandedChange: onExpandedKeysChange ? handleExpandedChange : void 0,
-            defaultExpanded: (_a2 = props.defaultExpandedKeys) == null ? void 0 : _a2.includes(tool.id),
-            prefixCls,
-            hashId,
-            light
-          }
-        );
-      })
-    )
+    /* @__PURE__ */ React.createElement("div", { className: containerClassName, "data-testid": "ToolUse" }, toolItems)
   );
 };
+var ToolUseBar = memo(ToolUseBarComponent);
 export {
   ToolUseBar
 };

package/dist/ToolUseBar/thinkStyle.js

@@ -219,6 +219,8 @@ var genStyle = (token) => {
         padding: 8,
         display: "flex",
         maxHeight: 700,
+        overflow: "hidden",
+        overflowY: "auto",
         position: "relative",
         "&-light": {
           borderLeft: "1px solid var(--color-gray-border-light)",

package/dist/components/VisualList/index.d.ts

@@ -49,48 +49,4 @@ export interface VisualListProps {
     /** 描述文字 */
     description?: string;
 }
-/**
- * VisualList 组件 - 视觉列表组件
- *
- * 一个灵活的图片列表组件，支持多种尺寸、形状和自定义渲染。
- * 基于 css-in-js 样式系统，提供良好的主题支持和样式隔离。
- *
- * @component
- * @description 用于展示图片列表的组件，支持头像、缩略图等多种场景
- * @example
- * ```tsx
- * import { VisualList, VisualListItem } from '@ant-design/agentic-ui';
- *
- * const imageData: VisualListItem[] = [
- *   {
- *     id: '1',
- *     src: 'https://example.com/image1.jpg',
- *     alt: 'Image 1',
- *     title: 'Image Title',
- *     href: 'https://example.com/profile/1'
- *   }
- * ];
- *
- * // 基础用法
- * <VisualList data={imageData} />
- *
- * // 大尺寸圆形头像
- * <VisualList data={imageData} shape="circle" />
- *
- * // 带边框的列表
- * <VisualList data={imageData} variant="outline" />
- *
- * // 无边框的列表
- * <VisualList data={imageData} variant="borderless" />
- *
- * // 带描述文字的列表
- * <VisualList data={imageData} description="用户头像列表" />
- *
- * // 过滤数据
- * <VisualList data={imageData} filter={(item) => item.href !== undefined} />
- * ```
- *
- * @param props - 组件属性
- * @returns 渲染的视觉列表组件
- */
-export declare const VisualList: React.FC<VisualListProps>;
+export declare const VisualList: React.NamedExoticComponent<VisualListProps>;

package/dist/components/VisualList/index.js

@@ -21,13 +21,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 // src/components/VisualList/index.tsx
 import { SquareArrowUpRight } from "@sofa-design/icons";
 import classNames from "classnames";
-import React, { useState } from "react";
+import React, { memo, useMemo, useState } from "react";
+import { useRefFunction } from "../../hooks/useRefFunction";
 import { useStyle } from "./style";
-var VisualList = ({
+var VisualListComponent = ({
   className,
   style,
-  data = [],
-  filter = () => true,
+  data,
+  filter,
   emptyRender,
   renderItem,
   loading = false,
@@ -41,6 +42,108 @@ var VisualList = ({
   description
 }) => {
   const { wrapSSR, hashId } = useStyle(prefixCls);
+  const displayList = useMemo(() => {
+    if (!filter) {
+      return data || [];
+    }
+    return (data == null ? void 0 : data.filter(filter)) || [];
+  }, [data, filter]);
+  const containerClassName = useMemo(() => {
+    return classNames(
+      `${prefixCls}-container`,
+      hashId,
+      {
+        [`${prefixCls}-outline`]: variant === "outline",
+        [`${prefixCls}-borderless`]: variant === "borderless",
+        [`${prefixCls}-default`]: variant === "default"
+      },
+      className
+    );
+  }, [prefixCls, hashId, variant, className]);
+  const ImageComponent = memo(({ item, prefixCls: prefixCls2, hashId: hashId2, shape: shape2, imageStyle: imageStyle2, onImageError }) => {
+    const [imageError, setImageError] = useState(false);
+    const handleImageError = useRefFunction(() => {
+      setImageError(true);
+      onImageError();
+    });
+    if (imageError || !item.src) {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-type": "image",
+          className: classNames(`${prefixCls2}-default-icon`, hashId2),
+          style: __spreadProps(__spreadValues({}, imageStyle2), {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "#f5f5f5",
+            border: "1px solid #d9d9d9",
+            borderRadius: shape2 === "circle" ? "50%" : "4px"
+          })
+        },
+        /* @__PURE__ */ React.createElement(SquareArrowUpRight, null)
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: item.src,
+        alt: item.alt || item.title || "",
+        title: item.title,
+        className: classNames(`${prefixCls2}-image`, hashId2),
+        style: imageStyle2,
+        onError: handleImageError
+      }
+    );
+  });
+  const defaultRenderItem = useRefFunction(
+    (item, index) => {
+      const itemClassNames = [
+        `${prefixCls}-item`,
+        shape === "circle" ? `${prefixCls}-item-circle` : "",
+        hashId
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ React.createElement("li", { key: item.id || index, className: itemClassNames, style: itemStyle }, item.href ? /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: item.href,
+          className: classNames(`${prefixCls}-link`, hashId),
+          style: linkStyle
+        },
+        /* @__PURE__ */ React.createElement(
+          ImageComponent,
+          {
+            item,
+            prefixCls,
+            hashId,
+            shape,
+            imageStyle,
+            onImageError: () => {
+            }
+          }
+        )
+      ) : /* @__PURE__ */ React.createElement(
+        ImageComponent,
+        {
+          item,
+          prefixCls,
+          hashId,
+          shape,
+          imageStyle,
+          onImageError: () => {
+          }
+        }
+      ));
+    }
+  );
+  const listItems = useMemo(() => {
+    return displayList.map((item, index) => {
+      if (renderItem) {
+        return renderItem(item, index);
+      }
+      return defaultRenderItem(item, index);
+    });
+  }, [displayList, renderItem, defaultRenderItem]);
   if (loading) {
     return wrapSSR(
       /* @__PURE__ */ React.createElement(
@@ -58,7 +161,6 @@ var VisualList = ({
       )
     );
   }
-  const displayList = data.filter(filter);
   if (displayList.length === 0) {
     return wrapSSR(
       /* @__PURE__ */ React.createElement(
@@ -76,76 +178,11 @@ var VisualList = ({
       )
     );
   }
-  const defaultRenderItem = (item, index) => {
-    const itemClassNames = [
-      `${prefixCls}-item`,
-      shape === "circle" ? `${prefixCls}-item-circle` : "",
-      hashId
-    ].filter(Boolean).join(" ");
-    const ImageComponent = () => {
-      const [imageError, setImageError] = useState(false);
-      const handleImageError = () => {
-        setImageError(true);
-      };
-      if (imageError || !item.src) {
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            "data-type": "image",
-            className: classNames(`${prefixCls}-default-icon`, hashId),
-            style: __spreadProps(__spreadValues({}, imageStyle), {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: "#f5f5f5",
-              border: "1px solid #d9d9d9",
-              borderRadius: "4px"
-            })
-          },
-          /* @__PURE__ */ React.createElement(SquareArrowUpRight, null)
-        );
-      }
-      return /* @__PURE__ */ React.createElement(
-        "img",
-        {
-          src: item.src,
-          alt: item.alt || item.title || "",
-          title: item.title,
-          className: classNames(`${prefixCls}-image`, hashId),
-          style: imageStyle,
-          onError: handleImageError
-        }
-      );
-    };
-    return /* @__PURE__ */ React.createElement("li", { key: item.id || index, className: itemClassNames, style: itemStyle }, item.href ? /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: item.href,
-        className: classNames(`${prefixCls}-link`, hashId),
-        style: linkStyle
-      },
-      /* @__PURE__ */ React.createElement(ImageComponent, null)
-    ) : /* @__PURE__ */ React.createElement(ImageComponent, null));
-  };
-  const containerClassName = classNames(
-    `${prefixCls}-container`,
-    hashId,
-    {
-      [`${prefixCls}-outline`]: variant === "outline",
-      [`${prefixCls}-borderless`]: variant === "borderless",
-      [`${prefixCls}-default`]: variant === "default"
-    },
-    className
-  );
   return wrapSSR(
-    /* @__PURE__ */ React.createElement("div", { className: containerClassName, style }, /* @__PURE__ */ React.createElement("ul", { className: classNames(prefixCls, hashId) }, displayList.map((item, index) => {
-      if (renderItem) {
-        return renderItem(item, index);
-      }
-      return defaultRenderItem(item, index);
-    })), /* @__PURE__ */ React.createElement("div", { style: { width: 4 } }), description && /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-description`, hashId) }, description))
+    /* @__PURE__ */ React.createElement("div", { className: containerClassName, style }, /* @__PURE__ */ React.createElement("ul", { className: classNames(prefixCls, hashId) }, listItems), /* @__PURE__ */ React.createElement("div", { style: { width: 4 } }), description && /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-description`, hashId) }, description))
   );
 };
+var VisualList = memo(VisualListComponent);
 export {
   VisualList
 };

package/dist/plugins/chart/BarChart/index.js

@@ -391,7 +391,7 @@ var BarChart = ({
     if (!showDataLabels || calculateMaxLabelWidth === 0)
       return { top: 0, right: 0, bottom: 0, left: 0 };
     const basePadding = 8;
-    const labelPadding = Math.ceil(calculateMaxLabelWidth);
+    const labelPadding = Math.ceil(calculateMaxLabelWidth) + 12;
     if (indexAxis === "y") {
       return {
         top: basePadding,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",