@ant-design/agentic-ui 2.0.2 → 2.0.4

package/dist/ChatBoot/ButtonTabGroup.js

@@ -25,18 +25,26 @@ var ButtonTabGroup = ({
     onChange == null ? void 0 : onChange(key);
   };
   return wrapSSR(
-    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls} ${className || ""} ${hashId}`, role: "group", "aria-label": "Tab group" }, items.map((item) => /* @__PURE__ */ React.createElement(
-      ButtonTab,
+    /* @__PURE__ */ React.createElement(
+      "div",
       {
-        key: item.key,
-        selected: currentActiveKey === item.key,
-        onClick: () => handleTabClick(item.key, item.disabled),
-        onIconClick: item.onIconClick,
-        icon: item.icon,
-        className: item.disabled ? `${prefixCls}-item-disabled` : ""
+        className: `${prefixCls} ${className || ""} ${hashId}`,
+        role: "group",
+        "aria-label": "Tab group"
       },
-      item.label
-    )))
+      items.map((item) => /* @__PURE__ */ React.createElement(
+        ButtonTab,
+        {
+          key: item.key,
+          selected: currentActiveKey === item.key,
+          onClick: () => handleTabClick(item.key, item.disabled),
+          onIconClick: item.onIconClick,
+          icon: item.icon,
+          className: item.disabled ? `${prefixCls}-item-disabled` : ""
+        },
+        item.label
+      ))
+    )
   );
 };
 var ButtonTabGroup_default = ButtonTabGroup;

package/dist/index.d.ts

@@ -4,8 +4,8 @@ export * from './AgentRunBar';
 export * from './Bubble';
 export * from './Bubble/List';
 export * from './Bubble/type';
-export * from './ChatLayout';
 export * from './ChatBoot';
+export * from './ChatLayout';
 export * from './components/ActionIconBox';
 export * from './components/Button';
 export * from './components/LayoutHeader';

package/dist/index.js

@@ -4,8 +4,8 @@ export * from "./AgentRunBar";
 export * from "./Bubble";
 export * from "./Bubble/List";
 export * from "./Bubble/type";
-export * from "./ChatLayout";
 export * from "./ChatBoot";
+export * from "./ChatLayout";
 export * from "./components/ActionIconBox";
 export * from "./components/Button";
 export * from "./components/LayoutHeader";

package/dist/plugins/chart/AreaChart/index.d.ts

@@ -57,6 +57,8 @@ export interface AreaChartProps extends ChartContainerProps {
     hiddenY?: boolean;
     /** 头部工具条额外按钮 */
     toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
     /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
 }

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

@@ -103,6 +103,7 @@ var AreaChart = ({
   hiddenX = false,
   hiddenY = false,
   toolbarExtra,
+  renderFilterInToolbar = false,
   statistic: statisticConfig,
   variant
 }) => {
@@ -350,11 +351,26 @@ var AreaChart = ({
         theme,
         onDownload: handleDownload,
         extra: toolbarExtra,
-        dataTime
+        dataTime,
+        filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /* @__PURE__ */ React.createElement(
+          ChartFilter,
+          __spreadProps(__spreadValues({
+            filterOptions,
+            selectedFilter,
+            onFilterChange: setSelectedFilter
+          }, filterLabels && {
+            customOptions: filteredDataByFilterLabel,
+            selectedCustomSelection: selectedFilterLabel,
+            onSelectionChange: setSelectedFilterLabel
+          }), {
+            theme,
+            variant: "compact"
+          })
+        ) : void 0
       }
     ),
     statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
-    /* @__PURE__ */ React.createElement(
+    !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
       ChartFilter,
       __spreadProps(__spreadValues({
         filterOptions,

package/dist/plugins/chart/BarChart/index.d.ts

@@ -1,3 +1,4 @@
+import { ChartOptions } from 'chart.js';
 import React from 'react';
 import { ChartContainerProps } from '../components';
 import { StatisticConfigType } from '../hooks/useChartStatistic';
@@ -66,6 +67,8 @@ export interface BarChartProps extends ChartContainerProps {
     indexAxis?: 'x' | 'y';
     /** 头部工具条额外按钮 */
     toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
     /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
     /** 是否显示数据标签，默认false */
@@ -78,6 +81,8 @@ export interface BarChartProps extends ChartContainerProps {
         dataIndex: number;
         datasetIndex: number;
     }) => string;
+    /** 外部传入的 Chart.js 选项，会与默认选项合并 */
+    chartOptions?: Partial<ChartOptions<'bar'>>;
 }
 declare const BarChart: React.FC<BarChartProps>;
 export default BarChart;

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

@@ -87,10 +87,12 @@ var BarChart = ({
   stacked = false,
   indexAxis = "x",
   toolbarExtra,
+  renderFilterInToolbar = false,
   statistic: statisticConfig,
   variant,
   showDataLabels = false,
-  dataLabelFormatter
+  dataLabelFormatter,
+  chartOptions
 }) => {
   const safeData = Array.isArray(data) ? data : [];
   const [windowWidth, setWindowWidth] = useState(
@@ -350,10 +352,93 @@ var BarChart = ({
   const isLight = theme === "light";
   const axisTextColor = isLight ? "rgba(0, 25, 61, 0.3255)" : "rgba(255, 255, 255, 0.8)";
   const gridColor = isLight ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.2)";
-  const options = {
+  const calculateLabelWidth = (text, fontSize = 11) => {
+    const canvas = document.createElement("canvas");
+    const context2 = canvas.getContext("2d");
+    if (!context2)
+      return text.length * fontSize * 0.6;
+    context2.font = `${fontSize}px Arial, sans-serif`;
+    const metrics = context2.measureText(text);
+    return metrics.width;
+  };
+  const calculateMaxLabelWidth = useMemo(() => {
+    if (!showDataLabels || !filteredData.length)
+      return 0;
+    const fontSize = isMobile ? 10 : 11;
+    let maxWidth = 0;
+    filteredData.forEach((item) => {
+      const value = typeof item.y === "number" ? item.y : Number(item.y);
+      if (Number.isFinite(value)) {
+        let labelText = "";
+        if (dataLabelFormatter) {
+          labelText = dataLabelFormatter({
+            value,
+            label: String(item.x),
+            datasetLabel: String(item.type || "默认"),
+            dataIndex: 0,
+            datasetIndex: 0
+          });
+        } else {
+          labelText = value.toLocaleString();
+        }
+        const width2 = calculateLabelWidth(labelText, fontSize);
+        maxWidth = Math.max(maxWidth, width2);
+      }
+    });
+    return maxWidth;
+  }, [filteredData, showDataLabels, dataLabelFormatter, isMobile]);
+  const calculateDynamicPadding = useMemo(() => {
+    if (!showDataLabels || calculateMaxLabelWidth === 0)
+      return { top: 0, right: 0, bottom: 0, left: 0 };
+    const basePadding = 8;
+    const labelPadding = Math.ceil(calculateMaxLabelWidth);
+    if (indexAxis === "y") {
+      return {
+        top: basePadding,
+        right: Math.max(basePadding, labelPadding),
+        bottom: basePadding,
+        left: basePadding
+      };
+    } else {
+      return {
+        top: Math.max(basePadding, labelPadding),
+        right: basePadding,
+        bottom: basePadding,
+        left: basePadding
+      };
+    }
+  }, [showDataLabels, calculateMaxLabelWidth, indexAxis]);
+  const deepMerge = (target, source) => {
+    var _a;
+    if (!source || typeof source !== "object")
+      return source;
+    if (!target || typeof target !== "object")
+      return source;
+    const result = __spreadValues({}, target);
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        if (typeof source[key] === "object" && source[key] !== null && !Array.isArray(source[key])) {
+          if (key === "layout" && source[key].padding && ((_a = target.layout) == null ? void 0 : _a.padding)) {
+            result[key] = __spreadProps(__spreadValues(__spreadValues({}, target[key]), source[key]), {
+              padding: __spreadValues(__spreadValues({}, target[key].padding), source[key].padding)
+            });
+          } else {
+            result[key] = deepMerge(target[key] || {}, source[key]);
+          }
+        } else {
+          result[key] = source[key];
+        }
+      }
+    }
+    return result;
+  };
+  const defaultOptions = {
     responsive: true,
     maintainAspectRatio: false,
     indexAxis,
+    layout: {
+      padding: calculateDynamicPadding
+    },
     plugins: __spreadValues({
       legend: {
         display: showLegend,
@@ -387,7 +472,9 @@ var BarChart = ({
             const dsIndex = context2.datasetIndex;
             const dIndex = context2.dataIndex;
             const currentStack = (_b = (_a = chart.data.datasets) == null ? void 0 : _a[dsIndex]) == null ? void 0 : _b.stack;
-            const currentValue = Number((_f = (_e = (_d = (_c = chart.data.datasets) == null ? void 0 : _c[dsIndex]) == null ? void 0 : _d.data) == null ? void 0 : _e[dIndex]) != null ? _f : 0);
+            const currentValue = Number(
+              (_f = (_e = (_d = (_c = chart.data.datasets) == null ? void 0 : _c[dsIndex]) == null ? void 0 : _d.data) == null ? void 0 : _e[dIndex]) != null ? _f : 0
+            );
             const sameStackIndexes = chart.data.datasets.map((_, i) => i).filter((i) => {
               var _a2, _b2, _c2;
               const ds = (_a2 = chart.data.datasets) == null ? void 0 : _a2[i];
@@ -423,7 +510,9 @@ var BarChart = ({
           if (stacked) {
             const chart = context2.chart;
             const datasets = chart.data.datasets;
-            const currentValue = Number((_d = (_c = (_b = datasets == null ? void 0 : datasets[datasetIndex]) == null ? void 0 : _b.data) == null ? void 0 : _c[dataIndex]) != null ? _d : 0);
+            const currentValue = Number(
+              (_d = (_c = (_b = datasets == null ? void 0 : datasets[datasetIndex]) == null ? void 0 : _b.data) == null ? void 0 : _c[dataIndex]) != null ? _d : 0
+            );
             const currentStack = (_e = datasets == null ? void 0 : datasets[datasetIndex]) == null ? void 0 : _e.stack;
             let total = 0;
             datasets.forEach((dataset, i) => {
@@ -521,6 +610,7 @@ var BarChart = ({
       }
     }
   };
+  const options = chartOptions ? deepMerge(defaultOptions, chartOptions) : defaultOptions;
   const handleDownload = () => {
     downloadChart(chartRef.current, "bar-chart");
   };
@@ -544,11 +634,26 @@ var BarChart = ({
         theme,
         onDownload: handleDownload,
         extra: toolbarExtra,
-        dataTime
+        dataTime,
+        filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /* @__PURE__ */ React.createElement(
+          ChartFilter,
+          __spreadProps(__spreadValues({
+            filterOptions,
+            selectedFilter,
+            onFilterChange: setSelectedFilter
+          }, filterLabels && {
+            customOptions: filteredDataByFilterLabel,
+            selectedCustomSelection: selectedFilterLabel,
+            onSelectionChange: setSelectedFilterLabel
+          }), {
+            theme,
+            variant: "compact"
+          })
+        ) : void 0
       }
     ),
     statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
-    /* @__PURE__ */ React.createElement(
+    !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
       ChartFilter,
       __spreadProps(__spreadValues({
         filterOptions,

package/dist/plugins/chart/FunnelChart/index.d.ts

@@ -44,6 +44,8 @@ export interface FunnelChartProps extends ChartContainerProps {
     showPercent?: boolean;
     /** 头部工具条额外按钮 */
     toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
     typeNames?: {
         rate?: string;
         /** 类型名称，用于图例和数据集标签 */

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

@@ -70,6 +70,7 @@ var FunnelChart = (_a) => {
     legendAlign = "start",
     showPercent = true,
     toolbarExtra,
+    renderFilterInToolbar = false,
     typeNames,
     statistic
   } = _b, props = __objRest(_b, [
@@ -86,6 +87,7 @@ var FunnelChart = (_a) => {
     "legendAlign",
     "showPercent",
     "toolbarExtra",
+    "renderFilterInToolbar",
     "typeNames",
     "statistic"
   ]);
@@ -552,10 +554,25 @@ var FunnelChart = (_a) => {
         theme,
         onDownload: handleDownload,
         dataTime,
-        extra: toolbarExtra
+        extra: toolbarExtra,
+        filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /* @__PURE__ */ React.createElement(
+          ChartFilter,
+          __spreadProps(__spreadValues({
+            filterOptions,
+            selectedFilter,
+            onFilterChange: setSelectedFilter
+          }, customOptions && {
+            customOptions,
+            selectedCustomSelection: selectedFilterLabel,
+            onSelectionChange: setSelectedFilterLabel
+          }), {
+            theme,
+            variant: "compact"
+          })
+        ) : void 0
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
       ChartFilter,
       __spreadProps(__spreadValues({
         filterOptions,

package/dist/plugins/chart/LineChart/index.d.ts

@@ -57,6 +57,8 @@ export interface LineChartProps extends ChartContainerProps {
     hiddenY?: boolean;
     /** 头部工具条额外按钮 */
     toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
     /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
 }

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

@@ -98,6 +98,7 @@ var LineChart = (_a) => {
     hiddenX = false,
     hiddenY = false,
     toolbarExtra,
+    renderFilterInToolbar = false,
     statistic: statisticConfig
   } = _b, props = __objRest(_b, [
     "title",
@@ -117,6 +118,7 @@ var LineChart = (_a) => {
     "hiddenX",
     "hiddenY",
     "toolbarExtra",
+    "renderFilterInToolbar",
     "statistic"
   ]);
   const safeData = Array.isArray(data) ? data : [];
@@ -352,11 +354,26 @@ var LineChart = (_a) => {
         theme,
         onDownload: handleDownload,
         extra: toolbarExtra,
-        dataTime
+        dataTime,
+        filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /* @__PURE__ */ React.createElement(
+          ChartFilter,
+          __spreadProps(__spreadValues({
+            filterOptions,
+            selectedFilter,
+            onFilterChange: setSelectedFilter
+          }, filterLabels && {
+            customOptions: filteredDataByFilterLabel,
+            selectedCustomSelection: selectedFilterLabel,
+            onSelectionChange: setSelectedFilterLabel
+          }), {
+            theme,
+            variant: "compact"
+          })
+        ) : void 0
       }
     ),
     statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
-    /* @__PURE__ */ React.createElement(
+    !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
       ChartFilter,
       __spreadProps(__spreadValues({
         filterOptions,

package/dist/plugins/chart/RadarChart/index.d.ts

@@ -15,6 +15,8 @@ interface RadarChartProps extends ChartContainerProps {
     height?: number | string;
     className?: string;
     toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
     dataTime?: string;
     borderColor?: string;
     backgroundColor?: string;

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

@@ -93,6 +93,7 @@ var RadarChart = (_a) => {
     height = 400,
     className,
     toolbarExtra,
+    renderFilterInToolbar = false,
     dataTime,
     borderColor,
     backgroundColor,
@@ -106,6 +107,7 @@ var RadarChart = (_a) => {
     "height",
     "className",
     "toolbarExtra",
+    "renderFilterInToolbar",
     "dataTime",
     "borderColor",
     "backgroundColor",
@@ -531,10 +533,25 @@ var RadarChart = (_a) => {
             title: title || "雷达图",
             onDownload: handleDownload,
             extra: toolbarExtra,
-            dataTime
+            dataTime,
+            filter: renderFilterInToolbar && filterEnum.length > 0 ? /* @__PURE__ */ React.createElement(
+              ChartFilter,
+              __spreadProps(__spreadValues({
+                filterOptions: filterEnum,
+                selectedFilter,
+                onFilterChange: setSelectedFilter
+              }, filterLabels && {
+                customOptions: filteredDataByFilterLabel,
+                selectedCustomSelection: selectedFilterLabel,
+                onSelectionChange: setSelectedFilterLabel
+              }), {
+                theme: currentConfig.theme,
+                variant: "compact"
+              })
+            ) : void 0
           }
         ),
-        filterEnum.length > 0 && /* @__PURE__ */ React.createElement(
+        !renderFilterInToolbar && filterEnum.length > 0 && /* @__PURE__ */ React.createElement(
           ChartFilter,
           __spreadProps(__spreadValues({
             filterOptions: filterEnum,

package/dist/plugins/chart/ScatterChart/index.d.ts

@@ -15,6 +15,8 @@ export interface ScatterChartProps extends ChartContainerProps {
     height?: number | string;
     className?: string;
     toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
     dataTime?: string;
     xUnit?: string;
     yUnit?: string;

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

@@ -75,6 +75,7 @@ var ScatterChart = (_a) => {
     className,
     title,
     toolbarExtra,
+    renderFilterInToolbar = false,
     dataTime,
     xUnit = "月",
     yUnit,
@@ -93,6 +94,7 @@ var ScatterChart = (_a) => {
     "className",
     "title",
     "toolbarExtra",
+    "renderFilterInToolbar",
     "dataTime",
     "xUnit",
     "yUnit",
@@ -567,10 +569,25 @@ var ScatterChart = (_a) => {
             title: title || "散点图",
             onDownload: handleDownload,
             extra: toolbarExtra,
-            dataTime
+            dataTime,
+            filter: renderFilterInToolbar && filterEnum.length > 0 ? /* @__PURE__ */ React.createElement(
+              ChartFilter,
+              __spreadProps(__spreadValues({
+                filterOptions: filterEnum,
+                selectedFilter,
+                onFilterChange: setSelectedFilter
+              }, filterLabels && {
+                customOptions: filteredDataByFilterLabel,
+                selectedCustomSelection: selectedFilterLabel,
+                onSelectionChange: setSelectedFilterLabel
+              }), {
+                theme: currentConfig.theme,
+                variant: "compact"
+              })
+            ) : void 0
           }
         ),
-        filterEnum.length > 0 && /* @__PURE__ */ React.createElement(
+        !renderFilterInToolbar && filterEnum.length > 0 && /* @__PURE__ */ React.createElement(
           ChartFilter,
           __spreadProps(__spreadValues({
             filterOptions: filterEnum,

package/dist/plugins/chart/components/ChartFilter/ChartFilter.d.ts

@@ -16,6 +16,7 @@ export interface ChartFilterProps {
     onSelectionChange?: (region: string) => void;
     className?: string;
     theme?: 'light' | 'dark';
+    variant?: 'default' | 'compact';
 }
 declare const ChartFilter: React.FC<ChartFilterProps>;
 export default ChartFilter;

package/dist/plugins/chart/components/ChartFilter/ChartFilter.js

@@ -13,7 +13,8 @@ var ChartFilter = ({
   selectedCustomSelection,
   onSelectionChange,
   className = "",
-  theme = "light"
+  theme = "light",
+  variant = "default"
 }) => {
   var _a, _b;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
@@ -40,6 +41,7 @@ var ChartFilter = ({
         className: classNames(
           prefixCls,
           `${prefixCls}-${theme}`,
+          `${prefixCls}-${variant}`,
           hashId,
           className
         )

package/dist/plugins/chart/components/ChartFilter/style.js

@@ -144,6 +144,11 @@ var genStyle = (token) => {
             }
           }
         }
+      },
+      // Compact variant for toolbar integration
+      "&-compact": {
+        padding: "0",
+        flexWrap: "nowrap"
       }
     }
   };

package/dist/plugins/chart/components/ChartToolBar/ChartToolBar.d.ts

@@ -6,6 +6,7 @@ export interface ChartToolBarProps {
     theme?: 'light' | 'dark';
     onDownload?: () => void;
     extra?: React.ReactNode;
+    filter?: React.ReactNode;
 }
 declare const ChartToolBar: React.FC<ChartToolBarProps>;
 export default ChartToolBar;

package/dist/plugins/chart/components/ChartToolBar/ChartToolBar.js

@@ -12,7 +12,8 @@ var ChartToolBar = ({
   className = "",
   theme = "light",
   onDownload,
-  extra
+  extra,
+  filter
 }) => {
   var _a, _b;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
@@ -44,7 +45,7 @@ var ChartToolBar = ({
         {
           className: classNames(`${prefixCls}-time-icon`, hashId)
         }
-      ), /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefixCls}-data-time`, hashId) }, ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a.dataTime) || "数据时间", ": ", dataTime)) : null, extra, handleDownload ? /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefixCls}-data-time`, hashId) }, ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a.dataTime) || "数据时间", ": ", dataTime)) : null, filter, extra, handleDownload ? /* @__PURE__ */ React.createElement(
         Tooltip,
         {
           mouseEnterDelay: 0.3,

package/package.json

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