@hsu-react/ui 0.0.13 → 0.0.14

package/src/components/Chart/Tree/index.tsx

@@ -21,7 +21,7 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
     const option: ChartsOption = {
       series: {
@@ -38,22 +38,22 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
     return option;
   }, [seriesData, series]);
 
-  // 处理图表 resize 的回调
+  // Callback handling chart resize
   const handleResize = useCallback(() => {
     chartInstanceRef.current?.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   useEffect(() => {
     if (!chartRef.current) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
 
-      // 首次初始化时添加 finished 事件监听
+      // Attach the finished event listener on first initialization
       chart.on("finished", () => {
         getImage?.(
           chart!.getDataURL({
@@ -65,33 +65,33 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
       });
     }
 
-    // 设置配置
+    // Apply the option
     chart.setOption(chartOption as ChartOptionType, true);
 
-    // 添加 resize 监听
+    // Add resize listener
     window.addEventListener("resize", handleResize);
 
-    // 添加 ResizeObserver
+    // Add ResizeObserver
     if (chartRef.current && !resizeObserverRef.current) {
       resizeObserverRef.current = new ResizeObserver(handleResize);
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [chartOption, handleResize, getImage]);
 
-  // 组件卸载时清理资源
+  // Clean up resources on unmount
   useEffect(() => {
     return () => {
-      // 清理 ResizeObserver
+      // Clean up the ResizeObserver
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;
       }
-      // 销毁图表实例
+      // Dispose the chart instance
       if (chartInstanceRef.current) {
         chartInstanceRef.current.off("finished");
         chartInstanceRef.current.dispose();

package/src/components/Chart/_utils/autoSmooth.ts

@@ -8,7 +8,7 @@ export interface AutoScrollByItemProps {
   startIndex?: number;
   autoPlay?: boolean;
   enableWheelScroll?: boolean;
-  /** 窗口变化回调（创建同步、自动滚动、滚轮、resize 均触发），参数为当前窗口 start/end 百分比 */
+  /** Window change callback (fired on creation sync, auto-scroll, wheel, and resize), receives the current window start/end percentages */
   onWindowChange?: (startPercent: number, endPercent: number) => void;
 }
 
@@ -42,8 +42,8 @@ export function autoScrollByItem(props: AutoScrollByItemProps) {
   let start = initialStartPercent;
   let end = Math.min(initialStartPercent + windowSizePercent, 100);
 
-  // 图表已有 dataZoom 窗口时（组件重渲染重建滚动器）从当前位置继续，
-  // 避免图例点选、坐标轴重算等触发的重渲染把已滚动位置重置回初始窗口
+  // If the chart already has a dataZoom window (scroller rebuilt on component re-render), continue from the current position
+  // to prevent re-renders triggered by legend toggling, axis recalculation, etc. from resetting the scrolled position back to the initial window
   const currentZoom = (
     chart.getOption() as { dataZoom?: Array<{ start?: number; end?: number }> }
   )?.dataZoom?.[0];

package/src/components/Chart/_utils/bubble.ts

@@ -79,10 +79,10 @@ export function drawCircles(
   const MIN_GAP = Math.max(1.5, avgRadius * 0.08);
   const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
 
-  // 按容器长宽比例将同心圆扩展为同心椭圆（面积守恒：aspectX * aspectY = 1）：
-  // - 容器正方形时 aspectX = aspectY = 1（标准圆形环）
-  // - 容器越扁平，长边方向被适度拉伸、短边方向被对应压缩，
-  //   使层层外扩既贴合区域比例，又不会让边缘气泡飞离中心，保持"同心紧凑"观感。
+  // Stretch concentric circles into concentric ellipses based on the container aspect ratio (area-preserving: aspectX * aspectY = 1):
+  // - For a square container, aspectX = aspectY = 1 (standard circular rings)
+  // - The flatter the container, the more the long axis is moderately stretched and the short axis correspondingly compressed,
+  //   so the outward ring expansion follows the region's proportions without letting edge bubbles drift away from the center, keeping a "concentric and compact" look.
   const aspectRatio = maxY > 0 ? maxX / maxY : 1;
   const aspectX = Math.sqrt(aspectRatio);
   const aspectY = 1 / aspectX;
@@ -107,7 +107,7 @@ export function drawCircles(
       continue;
     }
 
-    // 同心椭圆的"单位环半径"上限：需同时保证在 x、y 两个方向上不越界
+    // Upper bound of the concentric ellipse "unit ring radius": must stay within bounds in both the x and y directions
     const maxRingUnitX =
       aspectX > 0 ? Math.min(maxInnerX - centerX, centerX - minX) / aspectX : 0;
     const maxRingUnitY =
@@ -128,9 +128,9 @@ export function drawCircles(
     }
 
     // 1) Deterministic concentric rings.
-    // 环间距要同时满足：
-    // - 与最大气泡（位于中心）不重叠：centerRadius + radius + gap
-    // - 标准六边形紧致堆叠：2 * avgRadius + gap
+    // Ring spacing must satisfy both:
+    // - No overlap with the largest bubble (at the center): centerRadius + radius + gap
+    // - Standard hexagonal close packing: 2 * avgRadius + gap
     const centerRadius = radiusList[sortedIndices[0]] ?? avgRadius;
     const ringSpacing = Math.max(
       centerRadius + radius + MIN_GAP,

package/src/components/Chart/_utils/cartesian.ts

@@ -21,16 +21,16 @@ export interface NormalizedScrollConfig {
   wheelModeWhenSliderHidden: "scroll" | "none";
 }
 
-/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+/** X-axis index range (closed interval) corresponding to the current visible dataZoom window */
 export interface DataZoomIndexWindow {
   startIndex: number;
   endIndex: number;
 }
 
 /**
- * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
- * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
- * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ * Converts dataZoom start/end percentages into an x-axis index window.
+ * Follows the same percentage convention this component family writes to dataZoom (index / total * 100);
+ * percentages produced by native echarts interactions are rounded outward, so each boundary may include at most one extra item, without affecting the axis magnitude.
  */
 export const percentWindowToIndexWindow = (
   startPercent: number,

package/src/components/Chart/chartUtils/calculateAxisConfig.ts

@@ -1,20 +1,20 @@
 /**
- * 计算合适的Y轴范围和间隔，确保0是刻度点，且总刻度数固定为6个
- * @param min 最小值
- * @param max 最大值
- * @returns { min, max, interval } Y轴配置
+ * Calculates a suitable Y-axis range and interval, ensuring 0 is a tick point and the total tick count is fixed at 6
+ * @param min minimum value
+ * @param max maximum value
+ * @returns { min, max, interval } Y-axis configuration
  */
 export function calculateAxisConfig(
   min: number,
   max: number
 ): { min: number; max: number; interval: number } {
-  // 根据数值大小选择合适的取整基数
+  // Choose a suitable rounding base according to the value's magnitude
   const getNiceNumber = (value: number) => {
     if (value === 0) return 1;
     const magnitude = Math.pow(10, Math.floor(Math.log10(Math.abs(value))));
     const normalized = value / magnitude;
 
-    // 选择 1, 2, 5, 10 这样的"整齐"数字
+    // Pick a "nice" number like 1, 2, 5, or 10
     let niceNormalized: number;
     if (normalized <= 1) niceNormalized = 1;
     else if (normalized <= 2) niceNormalized = 2;
@@ -24,32 +24,32 @@ export function calculateAxisConfig(
     return niceNormalized * magnitude;
   };
 
-  // 处理无效数据
+  // Handle invalid data
   if (min === Number.POSITIVE_INFINITY || max === Number.NEGATIVE_INFINITY) {
     return { min: 0, max: 5, interval: 1 };
   }
 
-  // 如果数据全部为0，返回默认值（6个刻度：0,1,2,3,4,5）
+  // If all data is 0, return default values (6 ticks: 0,1,2,3,4,5)
   if (min === 0 && max === 0) {
     return { min: 0, max: 5, interval: 1 };
   }
 
-  // 如果数据跨越0（有正有负）
+  // If the data spans 0 (has both positive and negative values)
   if (min < 0 && max > 0) {
     const absMax = Math.abs(max * 1.1);
     const absMin = Math.abs(min * 1.1);
 
-    // 计算总范围，分成5个间隔（6个刻度）
+    // Compute the total range, split into 5 intervals (6 ticks)
     const totalRange = absMax + absMin;
     const roughInterval = totalRange / 5;
     const interval = getNiceNumber(roughInterval);
 
-    // 计算需要多少个刻度能覆盖正负数据
+    // Compute how many ticks are needed to cover the positive and negative data
     const negativeSteps = Math.ceil(absMin / interval);
     const positiveSteps = Math.ceil(absMax / interval);
-    const totalSteps = negativeSteps + positiveSteps; // 不包括0
+    const totalSteps = negativeSteps + positiveSteps; // excluding 0
 
-    // 如果总刻度数正好是6个（5个间隔+0）
+    // If the total tick count is exactly 6 (5 intervals + 0)
     if (totalSteps === 5) {
       return {
         min: -negativeSteps * interval,
@@ -58,7 +58,7 @@ export function calculateAxisConfig(
       };
     }
 
-    // 否则，调整为固定5个间隔，按比例分配正负两边
+    // Otherwise, adjust to a fixed 5 intervals, distributed proportionally between the positive and negative sides
     const ratio = absMax / (absMax + absMin);
     const positiveIntervals = Math.round(ratio * 5);
     const negativeIntervals = 5 - positiveIntervals;
@@ -70,7 +70,7 @@ export function calculateAxisConfig(
     };
   }
 
-  // 如果全是非负数（固定6个刻度：0到max，分5段）
+  // If all values are non-negative (fixed 6 ticks: 0 to max, split into 5 segments)
   if (min >= 0) {
     const roughMax = max * 1.1;
     const roughInterval = roughMax / 5;
@@ -83,7 +83,7 @@ export function calculateAxisConfig(
     };
   }
 
-  // 如果全是负数（固定6个刻度：min到0，分5段）
+  // If all values are negative (fixed 6 ticks: min to 0, split into 5 segments)
   const roughMin = Math.abs(min * 1.1);
   const roughInterval = roughMin / 5;
   const interval = getNiceNumber(roughInterval);

package/src/components/Chart/chartUtils/chartTooltipFormatter.ts

@@ -22,7 +22,7 @@ export interface ChartTooltipFormatterProps {
   hideMarker?: boolean;
   textStyle?: Record<string, unknown>;
   unit?: string;
-  /** 多系列时按数值从大到小排序展示（大的在上） */
+  /** For multiple series, display sorted by value in descending order (largest on top) */
   sortDescending?: boolean;
 }
 
@@ -80,7 +80,7 @@ const chartTooltipFormatter = (props: ChartTooltipFormatterProps) => {
     `;
   }
 
-  // value 可能是数值、拼了单位的字符串("123次")或带千分位("1,234"），排序前统一还原成数值
+  // value may be a number, a string with a unit appended ("123次"), or one with thousands separators ("1,234"); normalize back to a number before sorting
   const toSortValue = (v: unknown): number => {
     if (typeof v === "number") return v;
     if (Array.isArray(v)) return toSortValue(v[v.length - 1]);

package/src/components/Chart/chartUtils/useDataZoomWindow.ts

@@ -2,23 +2,23 @@ import { useCallback, useState } from "react";
 import { DataZoomIndexWindow } from "../_utils/cartesian";
 
 export interface DataZoomWindowOptions {
-  /** 开关：是否按 dataZoom 当前可见窗口重算坐标轴，默认开启 */
+  /** Toggle: whether to recalculate the axis based on the current visible dataZoom window; enabled by default */
   enabled?: boolean;
 }
 
 export interface DataZoomWindowResult {
-  /** 当前可见窗口；开关关闭或尚未收到回调时为 null（表示全量） */
+  /** Current visible window; null when disabled or before any callback has been received (meaning the full range) */
   zoomWindow: DataZoomIndexWindow | null;
-  /** 传给 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged；开关关闭时为 undefined（不绑定事件） */
+  /** onDataZoomWindowChanged to pass to Chart.Bar / Chart.Line; undefined when disabled (event not bound) */
   onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
-  /** 按当前可见窗口裁剪系列数据，配合 calculateAxisConfig 只对展示部分重算坐标轴 */
+  /** Slices series data by the current visible window; used with calculateAxisConfig to recalculate the axis for the displayed portion only */
   sliceByZoomWindow: <T>(values?: T[] | null) => T[];
 }
 
 /**
- * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
- * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ * dataZoom visible-window management: works with Chart.Bar / Chart.Line's onDataZoomWindowChanged
+ * so the caller can slice data by the "current visible window" and recalculate the Y-axis min/max/interval (calculateAxisConfig),
+ * making the axis dynamically follow the displayed portion during slider dragging / wheel scrolling / auto-scroll; can be combined with useLegendSelection.
  */
 export function useDataZoomWindow(
   options?: DataZoomWindowOptions,
@@ -29,7 +29,7 @@ export function useDataZoomWindow(
   );
 
   const onDataZoomWindowChanged = useCallback((next: DataZoomIndexWindow) => {
-    // 窗口未变化时保持原引用，避免重渲染 → 同步回调 → 再重渲染的循环
+    // Keep the original reference when the window is unchanged, avoiding a re-render → sync callback → re-render loop
     setZoomWindow((prev) =>
       prev &&
       prev.startIndex === next.startIndex &&

package/src/components/Chart/chartUtils/useLegendSelection.ts

@@ -1,18 +1,18 @@
 import { useCallback, useState } from "react";
 
 export interface LegendSelectionResult {
-  /** 传给图表 legend.selected，保证重渲染(setOption notMerge)后隐藏状态不丢 */
+  /** Pass to the chart's legend.selected to keep hidden state from being lost after re-render (setOption notMerge) */
   legendSelected: Record<string, boolean>;
-  /** 传给图表 onLegendSelectChanged */
+  /** Pass to the chart's onLegendSelectChanged */
   onLegendSelectChanged: (selected: Record<string, boolean>) => void;
-  /** 判断某系列当前是否可见（未点过的系列默认可见） */
+  /** Checks whether a series is currently visible (series never toggled are visible by default) */
   isSeriesVisible: (name?: string | null) => boolean;
 }
 
 /**
- * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
- * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现图例隐藏某一项后坐标轴自动重算。
+ * Legend selection state management: works with Chart.Bar / Chart.Line's onLegendSelectChanged
+ * so the caller can recalculate the Y-axis min/max/interval (calculateAxisConfig) based on the "currently visible series",
+ * making the axis automatically recalculate after an item is hidden via the legend.
  */
 export function useLegendSelection(): LegendSelectionResult {
   const [legendSelected, setLegendSelected] = useState<Record<string, boolean>>(

package/src/components/Chart/chartUtils/yAxisDisplayUnit.ts

@@ -1,6 +1,6 @@
 /**
- * 大屏 Y 轴：按「万 / 亿」或 MB/GB/TB 换算时，要求刻度步长换算后 ≥ 1，
- * 避免出现 0.2 万、0.5GB 等小于 1 的刻度文案。
+ * Dashboard (large-screen) Y-axis: when converting to "万 (10^4) / 亿 (10^8)" or MB/GB/TB units,
+ * the converted tick step must be >= 1, avoiding tick labels smaller than 1 such as "0.2万" or "0.5GB".
  */
 
 export const MB_PER_GB = 1024;
@@ -12,7 +12,7 @@ export function trimAxisNumber(n: number): string {
   return s === "" || s === "-" ? "0" : s;
 }
 
-/** 中文量级：仅当最大值与刻度间隔都达到该量级时才用「万」「亿」缩放 */
+/** Chinese magnitude: scale by "万" (10^4) / "亿" (10^8) only when both the max value and the tick interval reach that magnitude */
 export function chineseMagnitudeDivisor(
   max: number,
   interval: number,
@@ -36,7 +36,7 @@ export function formatChineseMagnitudeTick(
   return trimAxisNumber(v / div);
 }
 
-/** MB 进位：仅当最大值与刻度间隔在该单位下均 ≥ 1 时才升到 GB/TB */
+/** MB tiering: promote to GB/TB only when both the max value and the tick interval are >= 1 in that unit */
 export function mbDisplayTier(
   maxMb: number,
   intervalMb: number,

package/src/components/Chart/index.tsx

@@ -20,7 +20,7 @@ export type CommonObj<T = unknown> = Record<string, T>;
  * ChartTypes
  * ChartOptionsType
  *
- * 关联 Group
+ * Associated with Group
  */
 export type ChartTypes = "Line" | "Bar" | "Pie";
 export type ChartOptionsType = ChartLineProps | ChartBarProps | ChartPieProps;
@@ -51,7 +51,7 @@ export interface ChartCommonProps extends ChartsOption {
   style?: ChartCSSProperties;
   insideDataZoom?: echarts.DataZoomComponentOption;
   sliderDataZoom?: echarts.DataZoomComponentOption;
-  /** 图表实例就绪回调，可用于图例自动滚动等 */
+  /** Callback fired when the chart instance is ready; can be used for legend auto-scroll, etc. */
   onChart?: (chart: echarts.ECharts) => void;
 }
 

package/src/components/Chat/ChatHistory/_components/HistoryGroup/index.module.scss

@@ -8,7 +8,7 @@
 
     font-size: 14px;
     font-weight: bold;
-    color: #b3b3b3;
+    color: var(--cf-text-3);
 
     cursor: default;
   }

package/src/components/Chat/ChatHistory/_components/HistoryItem/index.module.scss

@@ -26,7 +26,7 @@
   cursor: pointer;
 
   &:hover {
-    background: #0000000a;
+    background: var(--cf-row-hover);
 
     .operation {
       display: flex;
@@ -34,9 +34,9 @@
   }
 
   &.active {
-    background: #0000000a;
+    background: var(--cf-row-hover);
 
-    color: #126dff;
+    color: var(--primary-color);
   }
 
   .operation {
@@ -55,10 +55,10 @@
 
     background-color: transparent;
 
-    color: #0a0a0a;
+    color: var(--cf-text);
 
     &:hover {
-      color: #126dff;
+      color: var(--primary-color);
     }
   }
 }
@@ -69,6 +69,6 @@
   column-gap: 8px;
 
   &.delete {
-    color: #ff4d4f;
+    color: var(--cf-error);
   }
 }

package/src/components/Chat/ChatHistory/_components/HistoryItem/index.tsx

@@ -24,30 +24,30 @@ const HistoryItem: React.FC<HistoryItemProps> = ({
   deleteHistory,
   onClick,
 }) => {
-  // 重命名相关状态
+  // Rename-related state
   const [isRenaming, setIsRenaming] = useState(false);
   const [renameTitle, setRenameTitle] = useState("");
   const [currentTitle, setCurrentTitle] = useState(formatChatName(item.name));
-  // 用于跟踪是否刚刚完成重命名，避免立即被外部更新覆盖
+  // Tracks whether a rename has just completed, to avoid being immediately overwritten by external updates
   const justRenamedRef = useRef(false);
 
-  // 删除确认弹窗状态
+  // Delete confirmation modal state
   const [deleteModal, setDeleteModal] = useState(false);
 
-  // 初始化重命名标题
+  // Initialize the rename title
   useEffect(() => {
     if (isRenaming) {
       setRenameTitle(currentTitle);
     }
   }, [isRenaming, currentTitle]);
 
-  // 同步 item.name 的变化到 currentTitle（仅在非重命名状态下）
+  // Sync changes of item.name to currentTitle (only when not renaming)
   useEffect(() => {
     if (!isRenaming && !justRenamedRef.current) {
       const formattedName = formatChatName(item.name);
       setCurrentTitle(formattedName);
     }
-    // 重置重命名标记
+    // Reset the rename flag
     if (justRenamedRef.current) {
       justRenamedRef.current = false;
     }
@@ -61,9 +61,9 @@ const HistoryItem: React.FC<HistoryItemProps> = ({
     const newTitle = renameTitle.trim();
     if (newTitle && updateTitle) {
       updateTitle(item.conversationId, newTitle);
-      // 先更新显示的标题，确保立即显示用户输入的名称
+      // Update the displayed title first to immediately show the user-entered name
       setCurrentTitle(newTitle);
-      // 标记刚刚完成重命名，避免立即被外部更新覆盖
+      // Mark that a rename has just completed, to avoid being immediately overwritten by external updates
       justRenamedRef.current = true;
     }
     setIsRenaming(false);

package/src/components/Chat/ChatHistory/_components/NewChatButton/index.module.scss

@@ -5,7 +5,7 @@
 
   padding: 0px 10px;
 
-  background-color: #f9f9f9;
+  background-color: var(--cf-subtle);
 
   .newChat {
     display: flex;
@@ -18,17 +18,17 @@
 
     font-size: 14px;
 
-    background-color: #fff;
+    background-color: var(--cf-surface);
 
     border-radius: 6px;
-    border: 1px solid #0d0d0d0d;
+    border: 1px solid var(--cf-border-weak);
 
     cursor: pointer;
 
     transition: box-shadow 0.3s;
 
     &:hover {
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: var(--cf-shadow-2);
     }
   }
 }

package/src/components/Chat/ChatHistory/_utils/index.ts

@@ -1,5 +1,5 @@
 /**
- * 格式化聊天名称（截取省略号前的部分）
+ * Format the chat name (take the part before the ellipsis)
  */
 export const formatChatName = (name: string): string => {
   return name.split("…")[0];

package/src/components/Chat/ChatHistory/index.module.scss

@@ -9,9 +9,9 @@
   height: 100%;
   padding: 10px 0px;
 
-  background-color: #f9f9f9;
+  background-color: var(--cf-subtle);
 
-  border-right: 1px solid #0d0d0d0d;
+  border-right: 1px solid var(--cf-border-weak);
 
   .tools {
     display: flex;
@@ -39,7 +39,7 @@
     &::-webkit-scrollbar-thumb {
       width: 10px;
 
-      background-color: #0000001a;
+      background-color: var(--cf-border);
 
       border-radius: 10px;
     }

package/src/components/Chat/ChatHistory/index.tsx

@@ -36,14 +36,14 @@ const ChatHistory: React.FC<ChatHistoryProps> = (props) => {
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-  // 滚动到底部处理
+  // Handle scrolling to the bottom
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer || !onScrollEnd) return;
 
     const handleScroll = () => {
       const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-      // 当滚动到底部时（允许 5px 的误差）
+      // When scrolled to the bottom (with a 5px tolerance)
       if (scrollHeight - scrollTop - clientHeight < 5) {
         onScrollEnd();
       }

package/src/components/Chat/ChatInput/_components/AgentToggleButton/index.module.scss

@@ -4,26 +4,26 @@
   column-gap: 2px;
   padding: 0 11px;
   border-radius: 4px;
-  border: 1px solid #0e59ef;
+  border: 1px solid var(--primary-color);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s;
   height: 100%;
-  background-color: #fff;
+  background-color: var(--cf-surface);
 
   .icon {
     font-size: 22px;
   }
 
   &.active {
-    color: #0e59ef;
-    border-color: #0e59ef;
-    background-color: #0e59ef22;
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+    background-color: color-mix(in srgb, var(--primary-color) 13%, transparent);
   }
 
   &:hover {
-    color: #4c4c4c;
-    border-color: rgba(0, 0, 0, 0.12);
-    background-color: #e0e4ed;
+    color: var(--cf-text);
+    border-color: var(--cf-border);
+    background-color: var(--cf-row-hover);
   }
 }

package/src/components/Chat/ChatInput/_components/FileList/index.module.scss

@@ -11,8 +11,8 @@
     column-gap: 5px;
     padding: 4px 10px;
     font-size: 14px;
-    color: #424242;
-    background: #f2f4f7;
+    color: var(--cf-text);
+    background: var(--cf-subtle);
     border-radius: 3px;
     transition: box-shadow 0.3s, color 0.3s;
     cursor: pointer;
@@ -22,7 +22,7 @@
     }
     
     &:hover {
-      color: #0e59ef;
+      color: var(--primary-color);
     }
   }
 }

package/src/components/Chat/ChatInput/_components/UploadButton/index.tsx

@@ -16,7 +16,7 @@ interface UploadButtonProps {
     data?: Record<string, string>;
   };
   onUploadingChange?: (isUploading: boolean) => void;
-  // 拦截点击事件
+  // Intercept the click event
   onInterceptClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
 }
 
@@ -73,7 +73,7 @@ const UploadButton: React.FC<UploadButtonProps> = (props) => {
                     : "heroicons-outline:paper-clip"
                 }
                 fontSize={22}
-                color="#ababab"
+                color="var(--cf-text-3)"
               />
             }
             onClick={