@hsu-react/ui 0.0.13 → 0.0.14

package/lib/components/Chat/ChatHistory/index.js

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

package/lib/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/lib/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/lib/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/lib/components/Chat/ChatInput/_components/UploadButton/index.js

@@ -62,7 +62,7 @@ const UploadButton = props => {
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             icon: isUpload ? "eos-icons:loading" : "heroicons-outline:paper-clip",
             fontSize: 22,
-            color: "#ababab"
+            color: "var(--cf-text-3)"
           }),
           onClick: onInterceptClick ? e => {
             e.stopPropagation();

package/lib/components/Chat/ChatInput/_utils/index.d.ts

@@ -1,13 +1,13 @@
 import { UploadFile } from "antd";
 /**
- * 处理文件上传响应
+ * Handle the file upload response
  */
 export declare const handleUploadResponse: (fileList: UploadFile[], file: UploadFile, index: number) => boolean;
 /**
- * 验证文件大小
+ * Validate the file size
  */
 export declare const validateFileSize: (file: File, maxSize: number) => boolean;
 /**
- * 处理文件列表变更
+ * Handle file list changes
  */
 export declare const processFileList: (fileList: UploadFile[]) => UploadFile[];

package/lib/components/Chat/ChatInput/_utils/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.validateFileSize = exports.processFileList = exports.handleUploadResponse = void 0;
 var _antd = require("antd");
 /**
- * 处理文件上传响应
+ * Handle the file upload response
  */
 const handleUploadResponse = (fileList, file, index) => {
   if (file.status === "error") {
@@ -39,7 +39,7 @@ const handleUploadResponse = (fileList, file, index) => {
 };
 
 /**
- * 验证文件大小
+ * Validate the file size
  */
 exports.handleUploadResponse = handleUploadResponse;
 const validateFileSize = (file, maxSize) => {
@@ -53,7 +53,7 @@ const validateFileSize = (file, maxSize) => {
 };
 
 /**
- * 处理文件列表变更
+ * Handle file list changes
  */
 exports.validateFileSize = validateFileSize;
 const processFileList = fileList => {

package/lib/components/Chat/ChatInput/index.d.ts

@@ -11,13 +11,13 @@ export interface ModelConfig {
     label: string;
     value: string;
     /**
-     * 该模型支持的功能键列表，用于从 agents 中筛选显示的功能
-     * 如果未设置，则显示所有 agents
+     * List of feature keys supported by this model, used to filter which features from agents are displayed
+     * If not set, all agents are displayed
      */
     agents: AgentConfig[];
     /**
-     * 该模型的回答是否包含思考部分
-     * 如果为 false，则不处理和显示思考内容
+     * Whether this model's answers include a thinking section
+     * If false, thinking content is not processed or displayed
      */
     hasThinking?: boolean;
     [key: string]: unknown;
@@ -40,7 +40,7 @@ export interface ChatInputProps {
         setModelType: (value: string) => void;
     };
     agents?: AgentToggleConfig[];
-    /** agents 状态，用于受控模式 */
+    /** agents state, used for controlled mode */
     agentsState?: AgentConfig[];
     onAgentsChange?: (agents: AgentConfig[]) => void;
     placeholder?: string;

package/lib/components/Chat/ChatInput/index.js

@@ -43,9 +43,9 @@ const ChatInput = props => {
     setFileList
   } = (0, _hooks.useFileList)(_fileList);
 
-  // 管理 agents 的内部状态（非受控模式）
+  // Manage the internal state of agents (uncontrolled mode)
   const [internalAgentsState, setInternalAgentsState] = (0, _react.useState)(() => {
-    // 初始化状态：优先从当前模型的 agents 获取，否则从传入的 agents 配置中提取，默认 open 为 true
+    // Initialize state: prefer the current model's agents; otherwise derive from the passed-in agents config, with open defaulting to true
     const currentModel = modelConfig?.modelList.find(m => m.value === modelConfig?.modelType);
     if (currentModel?.agents && currentModel.agents.length > 0) {
       return currentModel.agents;
@@ -56,14 +56,14 @@ const ChatInput = props => {
     }));
   });
 
-  // 判断是否为受控模式
+  // Determine whether in controlled mode
   const isControlled = externalAgentsState !== undefined;
-  // 使用外部状态或内部状态
+  // Use external state or internal state
   const agentsState = isControlled ? externalAgentsState : internalAgentsState;
 
-  // 当模型切换时，同步更新 agents 状态（仅在非受控模式下）
+  // When the model switches, sync the agents state (only in uncontrolled mode)
   (0, _react.useEffect)(() => {
-    if (isControlled) return; // 受控模式下由外部管理状态
+    if (isControlled) return; // In controlled mode, state is managed externally
 
     const currentModel = modelConfig?.modelList.find(m => m.value === modelConfig?.modelType);
     if (currentModel?.agents && currentModel.agents.length > 0) {
@@ -72,44 +72,44 @@ const ChatInput = props => {
     }
   }, [modelConfig?.modelType, modelConfig?.modelList, onAgentsChange, isControlled]);
 
-  // 根据当前选中的模型，筛选出该模型支持的功能配置
+  // Based on the currently selected model, filter the feature configs supported by that model
   const currentModel = modelConfig?.modelList.find(m => m.value === modelConfig?.modelType);
   const availableFeatureConfigs = currentModel?.agents ? agents.filter(config => currentModel.agents.some(agent => agent.key === config.key)) : agents;
 
-  // 处理 agent 状态切换
+  // Handle agent state toggling
   const handleAgentToggle = key => {
     const newAgentsState = agentsState?.map(agent => agent.key === key ? {
       ...agent,
       open: !agent.open
     } : agent);
 
-    // 受控模式：只通知外部，由外部更新状态
-    // 非受控模式：更新内部状态
+    // Controlled mode: only notify externally; the external side updates the state
+    // Uncontrolled mode: update internal state
     if (!isControlled) {
       setInternalAgentsState(newAgentsState);
     }
     onAgentsChange?.(newAgentsState);
   };
 
-  // 获取 agent 的激活状态
+  // Get the active state of an agent
   const getAgentActive = key => {
     return agentsState.find(agent => agent.key === key)?.open ?? false;
   };
 
-  // 处理文件列表移除
+  // Handle file removal from the file list
   const handleFileRemove = uid => {
     const newFileList = fileList.filter(v => v.uid !== uid);
     setFileList(newFileList);
     onFileListChange?.(newFileList);
   };
 
-  // 处理文件列表变更
+  // Handle file list changes
   const handleFileListChange = newFileList => {
     setFileList(newFileList);
     onFileListChange?.(newFileList);
   };
 
-  // 处理发送
+  // Handle sending
   const handleSend = () => {
     if (value.trim() !== "") {
       setValue("");
@@ -117,7 +117,7 @@ const ChatInput = props => {
     }
   };
 
-  // 处理回车键
+  // Handle the Enter key
   const handleKeyDown = e => {
     if (e.key === "Enter" && !e.shiftKey && !assistanting && value.trim() !== "") {
       e.preventDefault();
@@ -125,7 +125,7 @@ const ChatInput = props => {
     }
   };
 
-  // 合并上传配置
+  // Merge the upload config
   const mergedUploadConfig = {
     action: uploadConfig?.action,
     accept: uploadConfig?.accept,
@@ -173,14 +173,18 @@ const ChatInput = props => {
             active: getAgentActive(config.key),
             onClick: () => handleAgentToggle(config.key)
           }, config.key))]
-        }), buttonGroup?.map((button, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        }), buttonGroup?.map((button, idx) =>
+        /*#__PURE__*/
+        // key must be set on the outermost element returned by map (Tooltip);
+        // setting it on the inner Button is not seen by React and triggers a "missing key" warning
+        (0, _jsxRuntime.jsx)(_antd.Tooltip, {
           title: button.title,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
             ...button,
             title: "",
             className: (0, _classnames.default)(_indexModule.default.button, button.className)
-          }, idx)
-        })), uploadEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.UploadButton, {
+          })
+        }, idx)), uploadEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.UploadButton, {
           onFileListChange: handleFileListChange,
           fileList: fileList,
           uploadConfig: mergedUploadConfig,

package/lib/components/Chat/ChatInput/index.module.scss

@@ -17,8 +17,8 @@
   padding: 10px;
 
   border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: #ffffff;
+  border: 1px solid var(--cf-border);
+  background: var(--cf-surface);
 
   .textArea {
     border: none !important;
@@ -51,7 +51,7 @@
 
         .select {
           font-size: 14px;
-          border: 1px solid #d9d9d9;
+          border: 1px solid var(--cf-border);
           border-radius: 4px;
           box-shadow: none;
           opacity: 0.8;
@@ -66,7 +66,7 @@
           }
 
           &[class*="disabled"] {
-            color: #000;
+            color: var(--cf-text);
             background: transparent;
             border: none;
             box-shadow: none;

package/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.js

@@ -35,7 +35,6 @@ const Copy = props => {
     const parser = new DOMParser();
     const textContent = parser.parseFromString(html, "text/html")?.body?.textContent;
     if (textContent) {
-      // const mdText = textContent ? textContent.replace(/\n{2,}/g, '\n') : '';
       const result = (0, _copyToClipboard.default)(textContent);
       if (result) {
         _antd.message.success("复制成功");

package/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.module.scss

@@ -8,7 +8,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: #5e6772;
+  color: var(--cf-text-2);
 
   cursor: pointer;
 
@@ -18,18 +18,18 @@
 
   .icon {
     font-size: 18px;
-    color: #5e6772;
+    color: var(--cf-text-2);
 
     transition: color 0.3s;
   }
 
   &:hover {
-    color: #060607;
+    color: var(--cf-text);
 
-    background-color: #f3f5fc;
+    background-color: var(--cf-row-hover);
 
     .icon {
-      color: #060607;
+      color: var(--cf-text);
     }
   }
 }

package/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.module.scss

@@ -13,7 +13,7 @@
 
     font-size: 14px;
     line-height: 18px;
-    color: #5e6772;
+    color: var(--cf-text-2);
 
     cursor: pointer;
 
@@ -21,20 +21,20 @@
 
     .likeIcon {
       font-size: 20px;
-      color: #5e6772;
+      color: var(--cf-text-2);
 
       transition: color 0.3s;
     }
 
     &:hover {
-      color: #060607;
+      color: var(--cf-text);
 
-      background-color: #f3f5fc;
+      background-color: var(--cf-row-hover);
 
       border-radius: 4px;
 
       .likeIcon {
-        color: #060607;
+        color: var(--cf-text);
       }
     }
   }

package/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/QuoteList/index.module.scss

@@ -13,7 +13,7 @@
 
     font-size: 14px;
     line-height: 14px;
-    color: #667085;
+    color: var(--cf-text-2);
     white-space: nowrap;
 
     cursor: default;
@@ -26,7 +26,7 @@
       min-width: 0px;
       height: 1px;
 
-      background-color: #e8ebf0;
+      background-color: var(--cf-border);
     }
 
     .quoteIcon {
@@ -48,7 +48,7 @@
       transition: color 0.3s;
 
       &:hover {
-        color: #3976dd;
+        color: var(--primary-color);
       }
     }
   }
@@ -78,8 +78,8 @@
         height: 50%;
 
         background: linear-gradient(
-          rgba(255, 255, 255, 0),
-          rgba(255, 255, 255, 0.91)
+          transparent,
+          color-mix(in srgb, var(--cf-surface) 91%, transparent)
         );
       }
     }
@@ -103,14 +103,14 @@
 
       border-radius: 4px;
 
-      background-color: #f3f5fc;
+      background-color: var(--cf-subtle);
 
       transition: background-color 0.3s, color 0.3s;
 
       &:hover {
         color: #fff;
 
-        background-color: #3976dd;
+        background-color: var(--primary-color);
       }
 
       &.lastRowIndex {

package/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/index.js

@@ -31,19 +31,19 @@ const AssistantItem = props => {
   const [expanded, setExpanded] = (0, _react.useState)(false);
   const prevThinkingRef = (0, _react.useRef)(false);
 
-  // 判断是否正在思考中
+  // Determine whether thinking is in progress
   const isThinking = !item?.think?.endsWith("</think>") && !!assistanting;
 
-  // 判断是否有思考内容（排除空标签和标签本身）
+  // Determine whether there is thinking content (excluding empty tags and the tags themselves)
   const hasThink = cleanedThink && cleanedThink.trim().length > 0;
 
-  // 当开始思考时，自动展开；思考结束时，自动收起
+  // Auto-expand when thinking starts; auto-collapse when thinking ends
   (0, _react.useEffect)(() => {
     if (isThinking && !prevThinkingRef.current) {
-      // 从非思考状态变为思考状态：展开
+      // Transition from not thinking to thinking: expand
       setExpanded(true);
     } else if (!isThinking && prevThinkingRef.current) {
-      // 从思考状态变为非思考状态：收起
+      // Transition from thinking to not thinking: collapse
       setExpanded(false);
     }
     prevThinkingRef.current = isThinking;

package/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/index.module.scss

@@ -45,20 +45,20 @@
 
   .error {
     font-size: 14px;
-    color: #f5222d;
+    color: var(--cf-error);
 
     border-radius: 4px;
-    border: 1px solid #f5222d;
+    border: 1px solid var(--cf-error);
     padding: 4px 15px;
   }
 
   .noAnswerTip {
     font-size: 14px;
-    color: #8c8c8c;
+    color: var(--cf-text-2);
 
     border-radius: 4px;
-    border: 1px solid #d9d9d9;
+    border: 1px solid var(--cf-border);
     padding: 4px 15px;
-    background-color: #fafafa;
+    background-color: var(--cf-subtle);
   }
 }

package/lib/components/Chat/ChatList/_components/Assistant/index.module.scss

@@ -15,7 +15,7 @@
 
         .time {
           font-size: 12px;
-          color: #666;
+          color: var(--cf-text-2);
           font-weight: normal;
         }
       }
@@ -45,7 +45,7 @@
       margin-top: 10px;
 
       font-size: 12px;
-      color: #666;
+      color: var(--cf-text-2);
 
       > div {
         display: flex;
@@ -63,7 +63,7 @@
         cursor: pointer;
 
         &.disabled {
-          color: #ccc;
+          color: var(--cf-text-3);
 
           cursor: not-allowed;
         }

package/lib/components/Chat/ChatList/_components/User/index.module.scss

@@ -16,7 +16,7 @@
 
         .time {
           font-size: 12px;
-          color: #666;
+          color: var(--cf-text-2);
           font-weight: normal;
         }
       }
@@ -101,9 +101,9 @@
 
       border-radius: 4px;
 
-      border: 1px solid #e5e5e5;
+      border: 1px solid var(--cf-border);
 
-      background: #ffffff;
+      background: var(--cf-surface);
 
       opacity: 0;
 
@@ -119,16 +119,16 @@
 
         font-size: 18px;
         line-height: 18px;
-        color: #5e6772;
+        color: var(--cf-text-2);
 
         cursor: pointer;
 
         transition: color 0.3s, background-color 0.3s;
 
         &:hover {
-          color: #060607;
+          color: var(--cf-text);
 
-          background-color: #f3f5fc;
+          background-color: var(--cf-row-hover);
 
           border-radius: 4px;
         }

package/lib/components/Chat/ChatList/_hooks/useAssistantNavigation.d.ts

@@ -3,7 +3,7 @@ interface UseAssistantNavigationProps {
     itemLength: number;
 }
 /**
- * 管理 Assistant 组件中的导航状态（切换不同的答案）
+ * Manage navigation state in the Assistant component (switching between different answers)
  */
 export declare function useAssistantNavigation({ itemLength, }: UseAssistantNavigationProps): {
     currentIndex: number;

package/lib/components/Chat/ChatList/_hooks/useAssistantNavigation.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAssistantNavigation = useAssistantNavigation;
 var _react = require("react");
 /**
- * 管理 Assistant 组件中的导航状态（切换不同的答案）
+ * Manage navigation state in the Assistant component (switching between different answers)
  */
 function useAssistantNavigation({
   itemLength

package/lib/components/Chat/ChatList/_hooks/useCalculateRowIndex.js

@@ -69,7 +69,7 @@ function useCalculateRowIndex(containerRef, quoteList, font = {
     };
     calculateRowIndex();
 
-    // 添加窗口大小调整监听器
+    // Add a window resize listener
     window.addEventListener("resize", calculateRowIndex);
     return () => {
       window.removeEventListener("resize", calculateRowIndex);

package/lib/components/Chat/ChatList/_utils/cleanRedactedReasoning.d.ts

@@ -1,6 +1,6 @@
 /**
- * 清理 redacted_reasoning 标签
- * @param text 需要清理的文本
- * @returns 清理后的文本
+ * Clean up redacted_reasoning tags
+ * @param text The text to clean
+ * @returns The cleaned text
  */
 export declare function cleanRedactedReasoning(text: string): string;

package/lib/components/Chat/ChatList/_utils/cleanRedactedReasoning.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.cleanRedactedReasoning = cleanRedactedReasoning;
 /**
- * 清理 redacted_reasoning 标签
- * @param text 需要清理的文本
- * @returns 清理后的文本
+ * Clean up redacted_reasoning tags
+ * @param text The text to clean
+ * @returns The cleaned text
  */
 function cleanRedactedReasoning(text) {
   if (!text) return "";