@ant-design/agentic-ui 2.29.3 → 2.29.4

package/dist/AgentRunBar/Robot.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-export type RobotStatus = 'default' | 'thinking' | 'dazing' | 'pause';
-export interface RobotProps {
+type RobotStatus = 'default' | 'thinking' | 'dazing' | 'pause';
+interface RobotProps {
     /** 机器人状态 */
     status?: RobotStatus;
     /** 机器人大小 */

package/dist/AgentRunBar/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export * from './Robot';
 /**
  * 任务状态枚举
  * @enum {string}

package/dist/AgentRunBar/index.js

@@ -20,6 +20,7 @@ import { I18nContext } from "../I18n";
 import { PauseIcon, PlayIcon, SimplePauseIcon, SimplePlayIcon, SimpleStopIcon, StopIcon } from "./icons";
 import Robot from "./Robot";
 import { useStyle } from "./style";
+export * from "./Robot";
 /**
  * 任务状态枚举
  * @enum {string}

package/dist/MarkdownEditor/editor/plugins/withMarkdown.js

@@ -111,7 +111,8 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { Editor, Node, Path, Range, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
 export var inlineNode = new Set([
-    'break'
+    'break',
+    'inline-katex'
 ]);
 var voidNode = new Set([
     'hr',

package/dist/MarkdownEditor/editor/style.js

@@ -139,8 +139,17 @@ var genStyle = function(token) {
         '[data-hidden]': {
             display: 'none'
         },
-        // KaTeX容器样式
+        // KaTeX容器样式和公式样式修复
+        // 确保 white-space: nowrap 不被父元素的 pre-wrap 覆盖
+        // KaTeX 库生成的元素需要 nowrap 来防止公式堆叠
+        '.katex': {
+            whiteSpace: 'nowrap !important'
+        },
         '.katex-container': {
+            whiteSpace: 'nowrap !important',
+            '& *': {
+                whiteSpace: 'nowrap !important'
+            },
             '.newline': {
                 margin: '4px 0'
             }

package/dist/MarkdownInputField/MarkdownInputField.js

@@ -195,7 +195,7 @@ import { useVoiceInputManager } from "./VoiceInputManager";
     var _props_style, _props_attachment, _props_enlargeable, _props_refinePrompt, _props_enlargeable1, _props_enlargeable2;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var baseCls = getPrefixCls('agentic-md-input-field');
-    var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
+    var _useStyle = useStyle(baseCls, props.disableHoverAnimation), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
     // 状态管理
     var _useMarkdownInputFieldState = useMarkdownInputFieldState({
         value: props.value,

package/dist/MarkdownInputField/hooks/useMarkdownInputFieldHandlers.js

@@ -175,6 +175,7 @@ function _ts_generator(thisArg, body) {
     }
 }
 import React from "react";
+import { Editor, Transforms } from "slate";
 import { useRefFunction } from "../../Hooks/useRefFunction";
 import { upLoadFileToServer } from "../AttachmentButton";
 import { isMobileDevice } from "../AttachmentButton/utils";
@@ -323,11 +324,38 @@ import { getFileListFromDataTransferItems } from "../FilePaste";
     }());
     // 键盘事件：早返回减少嵌套
     var handleKeyDown = useRefFunction(function(e) {
-        var _markdownEditorRef_current;
+        var _markdownEditorRef_current, _markdownEditorRef_current_markdownEditorRef, _markdownEditorRef_current1;
         if (markdownEditorRef === null || markdownEditorRef === void 0 ? void 0 : (_markdownEditorRef_current = markdownEditorRef.current) === null || _markdownEditorRef_current === void 0 ? void 0 : _markdownEditorRef_current.store.inputComposition) return;
+        var editor = markdownEditorRef === null || markdownEditorRef === void 0 ? void 0 : (_markdownEditorRef_current1 = markdownEditorRef.current) === null || _markdownEditorRef_current1 === void 0 ? void 0 : (_markdownEditorRef_current_markdownEditorRef = _markdownEditorRef_current1.markdownEditorRef) === null || _markdownEditorRef_current_markdownEditorRef === void 0 ? void 0 : _markdownEditorRef_current_markdownEditorRef.current;
         var isEnter = e.key === 'Enter';
         var isMod = e.ctrlKey || e.metaKey;
         var isShift = e.shiftKey;
+        // 处理 Home 键：移动到文档开头
+        if (e.key === 'Home' && !isMod && editor) {
+            e.preventDefault();
+            e.stopPropagation();
+            var start = Editor.start(editor, []);
+            Transforms.select(editor, start);
+            return;
+        }
+        // 处理 End 键：移动到文档末尾
+        if (e.key === 'End' && !isMod && editor) {
+            e.preventDefault();
+            e.stopPropagation();
+            var end = Editor.end(editor, []);
+            Transforms.select(editor, end);
+            return;
+        }
+        // 处理 Ctrl+A / Cmd+A：全选
+        if ((e.key === 'a' || e.key === 'A') && isMod && !isShift && editor) {
+            e.preventDefault();
+            e.stopPropagation();
+            Transforms.select(editor, {
+                anchor: Editor.start(editor, []),
+                focus: Editor.end(editor, [])
+            });
+            return;
+        }
         // 手机端禁用 Enter 键发送
         if (isEnter && !isMod && !isShift && isMobileDevice()) {
             return; // 让编辑器正常处理换行

package/dist/MarkdownInputField/style.d.ts

@@ -3,9 +3,10 @@ export declare const addGlowBorderOffset: (size: string | number) => string;
 /**
  * Probubble
  * @param prefixCls
+ * @param disableHoverAnimation 是否禁用 hover 动画
  * @returns
  */
-export declare function useStyle(prefixCls?: string): {
+export declare function useStyle(prefixCls?: string, disableHoverAnimation?: boolean): {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
     hashId: string;
 };

package/dist/MarkdownInputField/style.js

@@ -104,8 +104,13 @@ var stopIconRotate = new Keyframes('stopIconRotate', {
     }
 });
 var genStyle = function(token) {
+    var hoverStyle = token.disableHoverAnimation ? {} : {
+        '&:hover': {
+            boxShadow: '0px 0px 1px 0px rgba(10, 48, 104, 0.25), 0px 2px 7px 0px rgba(10, 48, 104, 0.05), 0px 2px 5px -2px rgba(10, 48, 104, 0.06)'
+        }
+    };
     var _obj, _obj1;
-    return _obj1 = {}, _define_property(_obj1, token.componentCls, {
+    return _obj1 = {}, _define_property(_obj1, token.componentCls, _object_spread_props(_object_spread({
         width: '100%',
         height: '100%',
         display: 'flex',
@@ -125,10 +130,8 @@ var genStyle = function(token) {
             outline: '1px solid transparent',
             outlineColor: 'var(--mif-active-outline-color, transparent)'
         },
-        boxShadow: '0px 0px 1px 0px rgba(10, 48, 104, 0.15), 0px 1.5px 4px -1px rgba(10, 48, 104, 0.04)',
-        '&:hover': {
-            boxShadow: '0px 0px 1px 0px rgba(10, 48, 104, 0.25), 0px 2px 7px 0px rgba(10, 48, 104, 0.05), 0px 2px 5px -2px rgba(10, 48, 104, 0.06)'
-        },
+        boxShadow: '0px 0px 1px 0px rgba(10, 48, 104, 0.15), 0px 1.5px 4px -1px rgba(10, 48, 104, 0.04)'
+    }, hoverStyle), {
         '&-focused': {
             boxShadow: '0px 0px 1px 0px rgba(10, 48, 104, 0.25), 0px 2px 7px 0px rgba(10, 48, 104, 0.05), 0px 2px 5px -2px rgba(10, 48, 104, 0.06)'
         },
@@ -281,7 +284,7 @@ var genStyle = function(token) {
             animationTimingFunction: 'linear',
             animationIterationCount: 'infinite'
         }
-    }), _define_property(_obj1, "".concat(token.componentCls, "-before-tools"), {
+    })), _define_property(_obj1, "".concat(token.componentCls, "-before-tools"), {
         display: 'flex',
         gap: 8,
         width: '100%',
@@ -304,11 +307,13 @@ var genStyle = function(token) {
 /**
  * Probubble
  * @param prefixCls
+ * @param disableHoverAnimation 是否禁用 hover 动画
  * @returns
- */ export function useStyle(prefixCls) {
+ */ export function useStyle(prefixCls, disableHoverAnimation) {
     return useEditorStyleRegister('MarkdownInputField', function(token) {
         var proChatToken = _object_spread_props(_object_spread({}, token), {
-            componentCls: ".".concat(prefixCls)
+            componentCls: ".".concat(prefixCls),
+            disableHoverAnimation: disableHoverAnimation
         });
         return [
             resetComponent(proChatToken),

package/dist/MarkdownInputField/types/MarkdownInputFieldProps.d.ts

@@ -421,4 +421,14 @@ export type MarkdownInputFieldProps = {
      * @description 自定义发送按钮的样式和行为
      */
     sendButtonProps?: SendButtonCustomizationProps;
+    /**
+     * 是否禁用 hover 动画
+     * @description 控制是否在鼠标悬停时显示阴影动画效果
+     * @default false
+     * @example
+     * ```tsx
+     * <MarkdownInputField disableHoverAnimation={true} />
+     * ```
+     */
+    disableHoverAnimation?: boolean;
 };

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

@@ -82,7 +82,7 @@ import { Line } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
 import { useChartDataFilter, useChartStatistics, useChartTheme, useResponsiveSize } from "../hooks";
-import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents } from "../utils";
+import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents, resolveCssVariable } from "../utils";
 import { useStyle } from "./style";
 /**
  * 面积图组件
@@ -166,6 +166,8 @@ import { useStyle } from "./style";
         var datasets = types.map(function(type, index) {
             var provided = color;
             var baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColorList[index % defaultColorList.length] : provided || defaultColorList[index % defaultColorList.length];
+            // 解析 CSS 变量为实际颜色值（Canvas 需要实际颜色值）
+            var resolvedColor = resolveCssVariable(baseColor);
             // 为每个类型收集数据点
             var typeData = xValues.map(function(x) {
                 var dataPoint = findDataPointByXValue(filteredData, x, type);
@@ -176,19 +178,20 @@ import { useStyle } from "./style";
             return {
                 label: type || '默认',
                 data: typeData,
-                borderColor: baseColor,
+                borderColor: resolvedColor,
                 backgroundColor: function(ctx) {
                     var chart = ctx.chart;
                     var chartArea = chart.chartArea;
-                    if (!chartArea) return hexToRgba(baseColor, 0.2);
+                    // 对于所有颜色（包括解析后的 CSS 变量），使用渐变效果
+                    if (!chartArea) return hexToRgba(resolvedColor, 0.2);
                     var top = chartArea.top, bottom = chartArea.bottom;
                     var gradient = chart.ctx.createLinearGradient(0, top, 0, bottom);
                     // 顶部颜色更实，向下逐渐透明，形成柔和的面积过渡
-                    gradient.addColorStop(0, hexToRgba(baseColor, 0.28));
-                    gradient.addColorStop(1, hexToRgba(baseColor, 0.05));
+                    gradient.addColorStop(0, hexToRgba(resolvedColor, 0.28));
+                    gradient.addColorStop(1, hexToRgba(resolvedColor, 0.05));
                     return gradient;
                 },
-                pointBackgroundColor: baseColor,
+                pointBackgroundColor: resolvedColor,
                 pointBorderColor: '#fff',
                 pointBorderWidth: 1,
                 borderWidth: 3,
@@ -203,7 +206,8 @@ import { useStyle } from "./style";
     }, [
         filteredData,
         types,
-        xValues
+        xValues,
+        color
     ]);
     var options = {
         responsive: true,

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

@@ -120,7 +120,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Bar } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
-import { extractAndSortXValues, findDataPointByXValue, hexToRgba } from "../utils";
+import { extractAndSortXValues, findDataPointByXValue, hexToRgba, resolveCssVariable } from "../utils";
 import { useStyle } from "./style";
 /**
  * @fileoverview 柱状图组件文件
@@ -183,7 +183,7 @@ var BarChart = function(param) {
     // 从数据中提取唯一的类别作为筛选选项
     var categories = useMemo(function() {
         var uniqueCategories = _to_consumable_array(new Set(safeData.map(function(item) {
-            return item.category;
+            return item === null || item === void 0 ? void 0 : item.category;
         }))).filter(Boolean);
         return uniqueCategories;
     }, [
@@ -192,7 +192,7 @@ var BarChart = function(param) {
     // 从数据中提取 filterLabel，过滤掉 undefined 值
     var validFilterLabels = useMemo(function() {
         return safeData.map(function(item) {
-            return item.filterLabel;
+            return item === null || item === void 0 ? void 0 : item.filterLabel;
         }).filter(function(filterLabel) {
             return filterLabel !== undefined;
         });
@@ -225,9 +225,9 @@ var BarChart = function(param) {
         var withFilterLabel = !filterLabels || !selectedFilterLabel ? base : base.filter(function(item) {
             return item.filterLabel === selectedFilterLabel;
         });
-        // 最终统一过滤掉 x 为空（null/undefined）的数据，避免后续 toString 报错
+        // 最终统一过滤掉 x 为空（null/undefined/空字符串）的数据，避免后续 toString 报错
         return withFilterLabel.filter(function(item) {
-            return item.x !== null && item.x !== undefined;
+            return item.x !== null && item.x !== undefined && item.x !== '' && String(item.x).trim() !== '';
         });
     }, [
         safeData,
@@ -250,7 +250,7 @@ var BarChart = function(param) {
             var uniqueValues = _to_consumable_array(new Set(filteredData.map(function(item) {
                 return item.x;
             }).filter(function(x) {
-                return x !== null && x !== undefined;
+                return x !== null && x !== undefined && x !== '' && String(x).trim() !== '';
             })));
             return uniqueValues;
         }
@@ -305,6 +305,13 @@ var BarChart = function(param) {
                 return Array.isArray(provided) ? provided[i] || provided[0] || defaultColorList[i % defaultColorList.length] : provided || defaultColorList[i % defaultColorList.length];
             };
             var baseColor = pickByIndex(index);
+            // 解析 CSS 变量为实际颜色值（Canvas 需要实际颜色值）
+            var resolvedBaseColor = resolveCssVariable(baseColor);
+            var resolvedProvidedColors = Array.isArray(provided) ? provided.map(function(c) {
+                return resolveCssVariable(c);
+            }) : provided ? [
+                resolveCssVariable(provided)
+            ] : null;
             // 为每个类型收集数据点
             var typeData = xValues.map(function(x) {
                 var dataPoint = findDataPointByXValue(filteredData, x, type);
@@ -318,12 +325,12 @@ var BarChart = function(param) {
                 borderColor: function(ctx) {
                     var parsed = ctx.parsed;
                     var value = indexAxis === 'y' ? typeof (parsed === null || parsed === void 0 ? void 0 : parsed.x) === 'number' ? parsed.x : 0 : typeof (parsed === null || parsed === void 0 ? void 0 : parsed.y) === 'number' ? parsed.y : 0;
-                    var base = baseColor;
+                    var base = resolvedBaseColor;
                     if (!color && isDiverging) {
                         base = value >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
-                    } else if (Array.isArray(color) && isDiverging) {
-                        var pos = color[0] || baseColor;
-                        var neg = color[1] || color[0] || baseColor;
+                    } else if (resolvedProvidedColors && isDiverging) {
+                        var pos = resolvedProvidedColors[0] || resolvedBaseColor;
+                        var neg = resolvedProvidedColors[1] || resolvedProvidedColors[0] || resolvedBaseColor;
                         base = value >= 0 ? pos : neg;
                     }
                     return hexToRgba(base, 0.95);
@@ -332,23 +339,23 @@ var BarChart = function(param) {
                     var chart = ctx.chart;
                     var chartArea = chart.chartArea;
                     var parsed = ctx.parsed;
-                    if (!chartArea) return hexToRgba(baseColor, 0.6);
+                    if (!chartArea) return hexToRgba(resolvedBaseColor, 0.6);
                     var xScale = chart.scales['x'];
                     var yScale = chart.scales['y'];
                     var startAlpha = 0.65;
                     var endAlpha = 0.95;
                     // 安全检查：确保坐标轴已正确初始化
                     if (!xScale || !yScale || typeof xScale.getPixelForValue !== 'function' || typeof yScale.getPixelForValue !== 'function') {
-                        return hexToRgba(baseColor, 0.6);
+                        return hexToRgba(resolvedBaseColor, 0.6);
                     }
                     if (indexAxis === 'y') {
                         var value = typeof (parsed === null || parsed === void 0 ? void 0 : parsed.x) === 'number' ? parsed.x : 0;
-                        var base = baseColor;
+                        var base = resolvedBaseColor;
                         if (!color && isDiverging) {
                             base = value >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
-                        } else if (Array.isArray(color) && isDiverging) {
-                            var pos = color[0] || baseColor;
-                            var neg = color[1] || color[0] || baseColor;
+                        } else if (resolvedProvidedColors && isDiverging) {
+                            var pos = resolvedProvidedColors[0] || resolvedBaseColor;
+                            var neg = resolvedProvidedColors[1] || resolvedProvidedColors[0] || resolvedBaseColor;
                             base = value >= 0 ? pos : neg;
                         }
                         // 当值为 0 时，直接返回纯色，避免渐变范围为 0 导致的显示问题
@@ -369,12 +376,12 @@ var BarChart = function(param) {
                         return gradient;
                     }
                     var value1 = typeof (parsed === null || parsed === void 0 ? void 0 : parsed.y) === 'number' ? parsed.y : 0;
-                    var base1 = baseColor;
+                    var base1 = resolvedBaseColor;
                     if (!color && isDiverging) {
                         base1 = value1 >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
-                    } else if (Array.isArray(color) && isDiverging) {
-                        var pos1 = color[0] || baseColor;
-                        var neg1 = color[1] || color[0] || baseColor;
+                    } else if (resolvedProvidedColors && isDiverging) {
+                        var pos1 = resolvedProvidedColors[0] || resolvedBaseColor;
+                        var neg1 = resolvedProvidedColors[1] || resolvedProvidedColors[0] || resolvedBaseColor;
                         base1 = value1 >= 0 ? pos1 : neg1;
                     }
                     // 当值为 0 时，直接返回纯色，避免渐变范围为 0 导致的显示问题
@@ -511,12 +518,17 @@ var BarChart = function(param) {
     var calculateLabelWidth = function(text) {
         var fontSize = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 11;
         // 创建临时canvas来测量文本宽度
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
-        if (!context) return text.length * fontSize * 0.6; // 备用估算
-        context.font = "".concat(fontSize, "px Arial, sans-serif");
-        var metrics = context.measureText(text);
-        return metrics.width;
+        try {
+            var canvas = document.createElement('canvas');
+            var context = canvas.getContext('2d');
+            if (!context) return text.length * fontSize * 0.6; // 备用估算
+            context.font = "".concat(fontSize, "px Arial, sans-serif");
+            var metrics = context.measureText(text);
+            return metrics.width;
+        } catch (e) {
+            // 在测试环境或无法使用 canvas 时使用备用估算
+            return text.length * fontSize * 0.6;
+        }
     };
     // 计算所需的最大标签宽度
     var calculateMaxLabelWidth = useMemo(function() {

package/dist/Plugins/chart/DonutChart/index.js

@@ -142,6 +142,7 @@ import React, { useContext, useMemo, useRef, useState } from "react";
 import { Doughnut } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
+import { resolveCssVariable } from "../utils";
 import { SINGLE_MODE_DESKTOP_CUTOUT, SINGLE_MODE_MOBILE_CUTOUT } from "./constants";
 import { useAutoCategory, useFilterLabels, useMobile, useResponsiveDimensions } from "./hooks";
 import LegendView from "./Legend";
@@ -471,25 +472,30 @@ import { useStyle } from "./style";
             return sum + (Number.isFinite(v) ? v : 0);
         }, 0);
         var backgroundColors = cfg.backgroundColor || defaultColorList;
+        // 解析 CSS 变量为实际颜色值（Canvas 需要实际颜色值）
+        var resolvedBackgroundColors = backgroundColors.map(function(color) {
+            return resolveCssVariable(color);
+        });
         var _cfg_backgroundColor_;
         var mainColor = (_cfg_backgroundColor_ = (_cfg_backgroundColor = cfg.backgroundColor) === null || _cfg_backgroundColor === void 0 ? void 0 : _cfg_backgroundColor[0]) !== null && _cfg_backgroundColor_ !== void 0 ? _cfg_backgroundColor_ : defaultColorList[idx % defaultColorList.length];
+        var resolvedMainColor = resolveCssVariable(mainColor);
         var chartJsData = {
             labels: labels,
             datasets: [
                 {
                     data: safeValues,
                     backgroundColor: isSingleValueMode ? [
-                        mainColor,
+                        resolvedMainColor,
                         'transparent'
-                    ] : backgroundColors.slice(0, values.length),
+                    ] : resolvedBackgroundColors.slice(0, values.length),
                     borderColor: isSingleValueMode ? [
                         cfg.borderColor || '#fff',
                         'transparent'
                     ] : cfg.borderColor || '#fff',
                     hoverBackgroundColor: isSingleValueMode ? [
-                        mainColor,
+                        resolvedMainColor,
                         'transparent'
-                    ] : backgroundColors.slice(0, values.length),
+                    ] : resolvedBackgroundColors.slice(0, values.length),
                     hoverBorderColor: isSingleValueMode ? [
                         cfg.borderColor || '#fff',
                         'transparent'

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

@@ -143,7 +143,7 @@ import { Bar } from "react-chartjs-2";
 import ChartStatistic from "../ChartStatistic";
 import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
-import { findDataPointByXValue, isXValueEqual, toNumber } from "../utils";
+import { findDataPointByXValue, isXValueEqual, resolveCssVariable, toNumber } from "../utils";
 import { useStyle } from "./style";
 var funnelChartComponentsRegistered = false;
 var FunnelChart = function(_param) {
@@ -329,6 +329,8 @@ var FunnelChart = function(_param) {
     // 计算数据：使用浮动条 [-w/2, w/2] 居中呈现，形成对称“漏斗条”
     var processedData = useMemo(function() {
         var baseColor = color || defaultColorList[0];
+        // 解析 CSS 变量为实际颜色值（Canvas 需要实际颜色值）
+        var resolvedBaseColor = resolveCssVariable(baseColor);
         var labels = stages.map(function(x) {
             return x.toString();
         });
@@ -397,7 +399,7 @@ var FunnelChart = function(_param) {
         var count = Math.max(1, stages.length - 1);
         var colorList = stages.map(function(_, i) {
             var t = i / count * 0.6; // 限制变浅上限，避免变白
-            return lighten(baseColor, t);
+            return lighten(resolvedBaseColor, t);
         });
         return {
             labels: labels,

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

@@ -109,7 +109,7 @@ import { Line } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
 import { useChartDataFilter, useChartStatistics, useChartTheme, useResponsiveSize } from "../hooks";
-import { extractAndSortXValues, findDataPointByXValue, registerLineChartComponents } from "../utils";
+import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents, resolveCssVariable } from "../utils";
 import { useStyle } from "./style";
 var LineChart = function(_param) {
     var title = _param.title, data = _param.data, _param_width = _param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 400 : _param_height, className = _param.className, classNamesProp = _param.classNames, dataTime = _param.dataTime, _param_theme = _param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, color = _param.color, _param_showLegend = _param.showLegend, showLegend = _param_showLegend === void 0 ? true : _param_showLegend, _param_legendPosition = _param.legendPosition, legendPosition = _param_legendPosition === void 0 ? 'bottom' : _param_legendPosition, _param_legendAlign = _param.legendAlign, legendAlign = _param_legendAlign === void 0 ? 'start' : _param_legendAlign, _param_showGrid = _param.showGrid, showGrid = _param_showGrid === void 0 ? true : _param_showGrid, _param_xPosition = _param.xPosition, xPosition = _param_xPosition === void 0 ? 'bottom' : _param_xPosition, _param_yPosition = _param.yPosition, yPosition = _param_yPosition === void 0 ? 'left' : _param_yPosition, _param_hiddenX = _param.hiddenX, hiddenX = _param_hiddenX === void 0 ? false : _param_hiddenX, _param_hiddenY = _param.hiddenY, hiddenY = _param_hiddenY === void 0 ? false : _param_hiddenY, toolbarExtra = _param.toolbarExtra, _param_renderFilterInToolbar = _param.renderFilterInToolbar, renderFilterInToolbar = _param_renderFilterInToolbar === void 0 ? false : _param_renderFilterInToolbar, statisticConfig = _param.statistic, _param_loading = _param.loading, loading = _param_loading === void 0 ? false : _param_loading, props = _object_without_properties(_param, [
@@ -190,6 +190,8 @@ var LineChart = function(_param) {
         var datasets = types.map(function(type, index) {
             var provided = color;
             var baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColorList[index % defaultColorList.length] : provided || defaultColorList[index % defaultColorList.length];
+            // 解析 CSS 变量为实际颜色值（Canvas 需要实际颜色值）
+            var resolvedColor = resolveCssVariable(baseColor);
             // 为每个类型收集数据点
             var typeData = xValues.map(function(x) {
                 var dataPoint = findDataPointByXValue(filteredData, x, type);
@@ -200,9 +202,9 @@ var LineChart = function(_param) {
             return {
                 label: type || '默认',
                 data: typeData,
-                borderColor: baseColor,
-                backgroundColor: "".concat(baseColor, "33"),
-                pointBackgroundColor: baseColor,
+                borderColor: resolvedColor,
+                backgroundColor: hexToRgba(resolvedColor, 0.2),
+                pointBackgroundColor: resolvedColor,
                 pointBorderColor: '#fff',
                 pointBorderWidth: 1,
                 borderWidth: 3,
@@ -217,7 +219,8 @@ var LineChart = function(_param) {
     }, [
         filteredData,
         types,
-        xValues
+        xValues,
+        color
     ]);
     var options = {
         responsive: true,
@@ -386,7 +389,7 @@ var LineChart = function(_param) {
         }, config), {
             theme: theme
         }));
-    })), /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
+    })), !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
         filterOptions: filterOptions,
         selectedFilter: selectedFilter,
         onFilterChange: setSelectedFilter

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

@@ -135,6 +135,7 @@ import { Radar } from "react-chartjs-2";
 import ChartStatistic from "../ChartStatistic";
 import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
+import { hexToRgba, resolveCssVariable } from "../utils";
 import { useStyle } from "./style";
 var radarChartComponentsRegistered = false;
 var RadarChart = function(_param) {
@@ -319,13 +320,15 @@ var RadarChart = function(_param) {
         var safeIndex = Math.max(0, index % defaultColorList.length);
         var safeDefaultColor = defaultColorList[safeIndex] || '#1677ff';
         var finalColor = baseColor || safeDefaultColor;
+        // 解析 CSS 变量为实际颜色值（Canvas 需要实际颜色值）
+        var resolvedColor = resolveCssVariable(finalColor);
         return {
             label: type || '默认',
             data: scores,
-            borderColor: finalColor,
-            backgroundColor: "".concat(finalColor, "20"),
+            borderColor: resolvedColor,
+            backgroundColor: hexToRgba(resolvedColor, 0.125),
             borderWidth: isMobile ? 1.5 : 2,
-            pointBackgroundColor: finalColor,
+            pointBackgroundColor: resolvedColor,
             pointBorderColor: '#fff',
             pointBorderWidth: isMobile ? 1 : 2,
             pointRadius: isMobile ? 3 : 4,

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

@@ -135,6 +135,7 @@ import { Scatter } from "react-chartjs-2";
 import ChartStatistic from "../ChartStatistic";
 import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
+import { hexToRgba, resolveCssVariable } from "../utils";
 import { useStyle } from "./style";
 var scatterChartComponentsRegistered = false;
 var ScatterChart = function(_param) {
@@ -337,11 +338,13 @@ var ScatterChart = function(_param) {
         var safeIndex = Math.max(0, index % defaultColorList.length);
         var safeDefaultColor = defaultColorList[safeIndex] || '#1677ff';
         var finalColor = baseColor || safeDefaultColor;
+        // 解析 CSS 变量为实际颜色值（Canvas 需要实际颜色值）
+        var resolvedColor = resolveCssVariable(finalColor);
         return {
             label: type || '默认',
             data: coordinates,
-            backgroundColor: "".concat(finalColor, "99"),
-            borderColor: finalColor,
+            backgroundColor: hexToRgba(resolvedColor, 0.6),
+            borderColor: resolvedColor,
             pointRadius: isMobile ? 4 : 6,
             pointHoverRadius: isMobile ? 6 : 8
         };

package/dist/Plugins/chart/utils.d.ts

@@ -287,11 +287,26 @@ export declare const getDataHash: (data: any[]) => string;
  */
 export declare const isConfigEqual: (config1: any, config2: any) => boolean;
 /**
- * 将十六进制颜色转换为带透明度的 RGBA 字符串
+ * 从浏览器 DOM 中解析 CSS 变量的实际颜色值
  *
- * 支持3位和6位十六进制颜色格式，并添加透明度。
+ * @param {string} cssVar - CSS 变量表达式（如 'var(--color-blue)'）
+ * @returns {string} 解析后的颜色值（如 '#1d7afc'）或原值
  *
- * @param {string} hex - 十六进制颜色值（如 '#ff0000' 或 '#f00'）
+ * @example
+ * ```typescript
+ * resolveCssVariable('var(--color-blue-control-fill-primary)'); // '#1d7afc'
+ * resolveCssVariable('#ff0000'); // '#ff0000'
+ * ```
+ *
+ * @since 1.0.0
+ */
+export declare const resolveCssVariable: (cssVar: string) => string;
+/**
+ * 将十六进制颜色或CSS变量转换为带透明度的 RGBA 字符串
+ *
+ * 支持3位和6位十六进制颜色格式、CSS变量（如 var(--color-name)），并添加透明度。
+ *
+ * @param {string} color - 颜色值（如 '#ff0000'、'#f00' 或 'var(--color-blue)'）
  * @param {number} alpha - 透明度值（0-1之间）
  * @returns {string} RGBA 颜色字符串
  *
@@ -299,9 +314,10 @@ export declare const isConfigEqual: (config1: any, config2: any) => boolean;
  * ```typescript
  * hexToRgba('#ff0000', 0.5); // 'rgba(255, 0, 0, 0.5)'
  * hexToRgba('#f00', 0.8); // 'rgba(255, 0, 0, 0.8)'
+ * hexToRgba('var(--color-blue)', 0.5); // 'rgba(29, 122, 252, 0.5)'
  * ```
  *
  * @since 1.0.0
  */
-export declare const hexToRgba: (hex: string, alpha: number) => string;
+export declare const hexToRgba: (color: string, alpha: number) => string;
 export { registerBarChartComponents, registerChartComponents, registerLineChartComponents, } from './utils/registerChart';

package/dist/Plugins/chart/utils.js

@@ -231,9 +231,13 @@ var intl = new Intl.NumberFormat('en-US', {
  *
  * @since 1.0.0
  */ export var extractAndSortXValues = function(data) {
-    // 提取所有 x 值并归一化
+    // 提取所有 x 值并归一化，同时过滤掉空值（null/undefined/空字符串）
     var normalizedValues = data.map(function(item) {
-        return normalizeXValue(item.x);
+        return item.x;
+    }).filter(function(x) {
+        return x !== null && x !== undefined && x !== '' && String(x).trim() !== '';
+    }).map(function(x) {
+        return normalizeXValue(x);
     });
     // 去重并排序
     var uniqueValues = _to_consumable_array(new Set(normalizedValues));
@@ -437,11 +441,78 @@ var intl = new Intl.NumberFormat('en-US', {
     return true;
 };
 /**
- * 将十六进制颜色转换为带透明度的 RGBA 字符串
+ * 将 RGB/RGBA 颜色字符串转换为十六进制格式
  *
- * 支持3位和6位十六进制颜色格式，并添加透明度。
+ * @param {string} rgb - RGB/RGBA 颜色字符串（如 'rgb(29, 122, 252)' 或 'rgba(29, 122, 252, 0.5)'）
+ * @returns {string} 十六进制颜色值（如 '#1d7afc'）
  *
- * @param {string} hex - 十六进制颜色值（如 '#ff0000' 或 '#f00'）
+ * @since 1.0.0
+ */ var rgbToHex = function(rgb) {
+    var match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (!match) return rgb;
+    var r = parseInt(match[1], 10);
+    var g = parseInt(match[2], 10);
+    var b = parseInt(match[3], 10);
+    return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1));
+};
+/**
+ * 从浏览器 DOM 中解析 CSS 变量的实际颜色值
+ *
+ * @param {string} cssVar - CSS 变量表达式（如 'var(--color-blue)'）
+ * @returns {string} 解析后的颜色值（如 '#1d7afc'）或原值
+ *
+ * @example
+ * ```typescript
+ * resolveCssVariable('var(--color-blue-control-fill-primary)'); // '#1d7afc'
+ * resolveCssVariable('#ff0000'); // '#ff0000'
+ * ```
+ *
+ * @since 1.0.0
+ */ export var resolveCssVariable = function() {
+    var cssVariableCache = new Map();
+    return function(cssVar) {
+        // 如果不是 CSS 变量，直接返回
+        if (!cssVar.trim().startsWith('var(')) {
+            return cssVar;
+        }
+        if (cssVariableCache.has(cssVar)) {
+            return cssVariableCache.get(cssVar);
+        }
+        // 提取变量名，如 'var(--color-blue)' => '--color-blue'
+        var match = cssVar.match(/var\((--[^)]+)\)/);
+        if (!match) {
+            // 无法匹配也缓存，避免重复解析
+            cssVariableCache.set(cssVar, cssVar);
+            return cssVar;
+        }
+        var resolvedColor = cssVar;
+        // 从 DOM 中获取计算后的样式值
+        if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+            try {
+                // 创建临时元素来获取计算后的颜色值
+                var tempEl = document.createElement('div');
+                tempEl.style.color = cssVar;
+                document.body.appendChild(tempEl);
+                var computedColor = window.getComputedStyle(tempEl).color;
+                document.body.removeChild(tempEl);
+                // 如果解析成功，将 rgb/rgba 转换为十六进制
+                if (computedColor && computedColor !== cssVar) {
+                    resolvedColor = rgbToHex(computedColor);
+                }
+            } catch (e) {
+                console.warn("Failed to resolve CSS variable: ".concat(cssVar), e);
+            }
+        }
+        cssVariableCache.set(cssVar, resolvedColor);
+        return resolvedColor;
+    };
+}();
+/**
+ * 将十六进制颜色或CSS变量转换为带透明度的 RGBA 字符串
+ *
+ * 支持3位和6位十六进制颜色格式、CSS变量（如 var(--color-name)），并添加透明度。
+ *
+ * @param {string} color - 颜色值（如 '#ff0000'、'#f00' 或 'var(--color-blue)'）
  * @param {number} alpha - 透明度值（0-1之间）
  * @returns {string} RGBA 颜色字符串
  *
@@ -449,11 +520,15 @@ var intl = new Intl.NumberFormat('en-US', {
  * ```typescript
  * hexToRgba('#ff0000', 0.5); // 'rgba(255, 0, 0, 0.5)'
  * hexToRgba('#f00', 0.8); // 'rgba(255, 0, 0, 0.8)'
+ * hexToRgba('var(--color-blue)', 0.5); // 'rgba(29, 122, 252, 0.5)'
  * ```
  *
  * @since 1.0.0
- */ export var hexToRgba = function(hex, alpha) {
-    var sanitized = hex.replace('#', '');
+ */ export var hexToRgba = function(color, alpha) {
+    // 解析 CSS 变量为实际颜色值
+    var resolvedColor = resolveCssVariable(color);
+    // 处理十六进制颜色
+    var sanitized = resolvedColor.replace('#', '');
     var isShort = sanitized.length === 3;
     var r = parseInt(isShort ? sanitized[0] + sanitized[0] : sanitized.slice(0, 2), 16);
     var g = parseInt(isShort ? sanitized[1] + sanitized[1] : sanitized.slice(2, 4), 16);

package/dist/ToolUseBarThink/style.js

@@ -57,7 +57,7 @@ var genStyle = function(token) {
     return _define_property({}, token.componentCls, {
         position: 'relative',
         cursor: 'pointer',
-        borderRadius: '24px',
+        borderRadius: 'var(--radius-card-base)',
         boxSizing: 'border-box',
         border: 'var(--color-gray-border-light)',
         boxShadow: 'var(--shadow-border-base)',
@@ -128,16 +128,17 @@ var genStyle = function(token) {
             width: '100%',
             display: 'flex',
             alignItems: 'center',
-            gap: '8px',
+            gap: '4px',
             zIndex: 1
         },
         '&-header': {
             height: 24,
             display: 'flex',
             alignItems: 'center',
-            gap: 8,
+            gap: 4,
             flex: 1,
             justifyContent: 'space-between',
+            paddingRight: 4,
             '&-light': {
                 gap: 4
             }

package/dist/typing.d.ts

@@ -1,5 +1,32 @@
-declare module '*.svg';
-declare module '*.webp';
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: string;
+  export default content;
+}
 declare module 'direction' {
   function direction(text: string): 'neutral' | 'ltr' | 'rtl';
   export default direction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.29.3",
+  "version": "2.29.4",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -24,11 +24,15 @@
     "prepare": "husky install && dumi setup",
     "prepublishOnly": "father doctor && pnpm run test && pnpm run build",
     "prettier": "prettier --write \"{src,docs,test}/**/*.{js,jsx,ts,tsx,css,less,json,md}\"",
+    "preview": "pnpm dumi preview",
     "report:demo": "node scripts/generateDemoReport.js",
     "start": "pnpm run dev",
     "test": "vitest --run --exclude \"**/e2e/**\"",
     "test:coverage": "vitest --run --exclude \"**/e2e/**\" --coverage",
-    "test:e2e": "vitest run e2e",
+    "test:e2e": "playwright test",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:skip-server": "cross-env SKIP_WEBSERVER=1 playwright test",
+    "test:e2e:ui": "playwright test --ui",
     "tsc": "tsc --noEmit"
   },
   "lint-staged": {
@@ -57,8 +61,10 @@
     "@better-scroll/scroll-bar": "^2.5.1",
     "@galacean/effects": "^2.6.5",
     "@juggle/resize-observer": "^3.4.0",
+    "@react-three/fiber": "^8.18.0",
     "@schema-element-editor/host-sdk": "^2.1.1",
     "@sofa-design/icons": "^1.6.1",
+    "@types/three": "^0.182.0",
     "ace-builds": "^1.43.4",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -67,7 +73,9 @@
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
+    "cross-env": "^7.0.3",
     "dayjs": "^1.11.19",
     "diacritics": "^1.3.0",
     "direction": "^1.0.4",
@@ -111,10 +119,14 @@
     "slate-hyperscript": "0.100.0",
     "slate-react": "0.120.0",
     "string-width": "^7.2.0",
+    "styled-components": "^6.1.19",
+    "tailwind-merge": "^3.4.0",
+    "three": "^0.182.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.44.0",
     "@swc/core": "^1.3.53",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -134,6 +146,7 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-resizable": "^3.0.8",
     "@types/reveal.js": "^5.2.1",
+    "@types/styled-components": "^5.1.36",
     "@types/uuid": "^10.0.0",
     "@umijs/lint": "^4.5.3",
     "@vitejs/plugin-react": "^4.7.0",