@hsu-react/ui 0.0.13 → 0.0.15

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

@@ -25,13 +25,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;
@@ -56,7 +56,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;
@@ -94,10 +94,10 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
   const [isUpload, setIsUpload] = useState<boolean>(false);
   const { fileList, setFileList } = useFileList(_fileList);
 
-  // 管理 agents 的内部状态（非受控模式）
+  // Manage the internal state of agents (uncontrolled mode)
   const [internalAgentsState, setInternalAgentsState] = useState<AgentConfig[]>(
     () => {
-      // 初始化状态：优先从当前模型的 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
       );
@@ -111,14 +111,14 @@ const ChatInput: React.FC<ChatInputProps> = (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)
   useEffect(() => {
-    if (isControlled) return; // 受控模式下由外部管理状态
+    if (isControlled) return; // In controlled mode, state is managed externally
 
     const currentModel = modelConfig?.modelList.find(
       (m) => m.value === modelConfig?.modelType
@@ -134,7 +134,7 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
     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
   );
@@ -144,39 +144,39 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
       )
     : agents;
 
-  // 处理 agent 状态切换
+  // Handle agent state toggling
   const handleAgentToggle = (key: string) => {
     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: string): boolean => {
     return agentsState.find((agent) => agent.key === key)?.open ?? false;
   };
 
-  // 处理文件列表移除
+  // Handle file removal from the file list
   const handleFileRemove = (uid: string) => {
     const newFileList = fileList.filter((v) => v.uid !== uid);
     setFileList(newFileList);
     onFileListChange?.(newFileList);
   };
 
-  // 处理文件列表变更
+  // Handle file list changes
   const handleFileListChange = (newFileList: UploadFile[]) => {
     setFileList(newFileList);
     onFileListChange?.(newFileList);
   };
 
-  // 处理发送
+  // Handle sending
   const handleSend = () => {
     if (value.trim() !== "") {
       setValue("");
@@ -184,7 +184,7 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
     }
   };
 
-  // 处理回车键
+  // Handle the Enter key
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (
       e.key === "Enter" &&
@@ -197,7 +197,7 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
     }
   };
 
-  // 合并上传配置
+  // Merge the upload config
   const mergedUploadConfig: UploadConfig = {
     action: uploadConfig?.action,
     accept: uploadConfig?.accept,
@@ -248,9 +248,10 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
             ))}
           </ul>
           {buttonGroup?.map((button: ButtonProps, idx: number) => (
-            <Tooltip title={button.title}>
+            // 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
+            <Tooltip key={idx} title={button.title}>
               <Button
-                key={idx}
                 {...button}
                 title=""
                 className={classNames(styles.button, button.className)}

package/src/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/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.tsx

@@ -35,7 +35,6 @@ const Copy: React.FC<CopyProps> = (props) => {
     const textContent = parser.parseFromString(html, "text/html")?.body
       ?.textContent;
     if (textContent) {
-      // const mdText = textContent ? textContent.replace(/\n{2,}/g, '\n') : '';
       const result = clipboard(textContent);
       if (result) {
         message.success("复制成功");
@@ -53,7 +52,6 @@ const Copy: React.FC<CopyProps> = (props) => {
     <>
       <div className={classNames(styles.Copy)} onClick={onCopy}>
         <Icon icon="ci:copy" className={classNames(styles.icon)} />
-        {/* <span>{text ?? "复制"}</span> */}
       </div>
     </>
   );

package/src/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/src/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/src/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/src/components/Chat/ChatList/_components/Assistant/AssistantItem/index.tsx

@@ -32,19 +32,19 @@ const AssistantItem: React.FC<AssistantItemProps> = (props) => {
   const [expanded, setExpanded] = useState(false);
   const prevThinkingRef = 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
   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;
@@ -87,7 +87,7 @@ const AssistantItem: React.FC<AssistantItemProps> = (props) => {
           />
         )}
         {item.error && <div className={styles.error}>{item.error}</div>}
-        {/* 无法回答的提示 */}
+        {/* Tip shown when no answer can be given */}
         {!hasThink &&
           !cleanedAnswer &&
           !assistanting &&

package/src/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/src/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/src/components/Chat/ChatList/_hooks/useAssistantNavigation.ts

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

package/src/components/Chat/ChatList/_hooks/useCalculateRowIndex.ts

@@ -116,7 +116,7 @@ export default function useCalculateRowIndex(
 
     calculateRowIndex();
 
-    // 添加窗口大小调整监听器
+    // Add a window resize listener
     window.addEventListener("resize", calculateRowIndex);
 
     return () => {

package/src/components/Chat/ChatList/_utils/cleanRedactedReasoning.ts

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

package/src/components/Checkbox/CheckboxGroup/index.module.scss

@@ -9,7 +9,7 @@
 
     height: 100%;
 
-    // 当 hasAll 为 true 时，Group 作为子元素
+    // When hasAll is true, the Group is rendered as a child element
     > :global(.ant-checkbox-group) {
       display: flex;
       flex-direction: column;
@@ -31,7 +31,7 @@
     :global(.ant-checkbox-wrapper) {
       :global(.ant-checkbox) {
         :global(.ant-checkbox-inner) {
-          border-color: rgba(204, 204, 204, 1) !important;
+          border-color: var(--cf-border) !important;
 
           background: transparent !important;
 
@@ -54,7 +54,7 @@
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: rgba(204, 204, 204, 1) !important;
+              border-color: var(--cf-border) !important;
             }
           }
 

package/src/components/Checkbox/CheckboxGroup/index.tsx

@@ -29,7 +29,7 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
     ...rest
   } = props;
 
-  // 获取所有非"全部"选项的值
+  // Get the values of all non-"All" options
   const normalValues = useMemo(() => {
     return options?.map((option) => {
       if (typeof option === "string" || typeof option === "number") {
@@ -39,7 +39,7 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
     });
   }, [options]);
 
-  // 计算"全部"选项的状态
+  // Compute the state of the "All" option
   const allChecked = useMemo(() => {
     if (!hasAll || !value || normalValues.length === 0) return false;
     const selectedValues = Array.isArray(value) ? value : [];
@@ -58,23 +58,23 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
     return selectedCount > 0 && selectedCount < normalValues.length;
   }, [hasAll, value, normalValues]);
 
-  // 处理"全部"选项的点击
+  // Handle clicks on the "All" option
   const handleAllChange = useCallback(
     (e: { target: { checked: boolean } }) => {
       if (!onChange) return;
 
       if (e.target.checked) {
-        // 选中所有选项
+        // Select all options
         onChange(normalValues);
       } else {
-        // 取消所有选项
+        // Deselect all options
         onChange([]);
       }
     },
     [onChange, normalValues]
   );
 
-  // 处理普通选项的点击
+  // Handle clicks on normal options
   const handleChange = useCallback(
     (checkedValues: (string | number)[]) => {
       if (!onChange) return;

package/src/components/Checkbox/index.module.scss

@@ -4,7 +4,7 @@
   &.outline {
     :global(.ant-checkbox) {
       :global(.ant-checkbox-inner) {
-        border-color: rgba(204, 204, 204, 1) !important;
+        border-color: var(--cf-border) !important;
 
         background: transparent !important;
 
@@ -27,7 +27,7 @@
           background: rgba(0, 0, 0, 0.04) !important;
 
           &::after {
-            border-color: rgba(204, 204, 204, 1) !important;
+            border-color: var(--cf-border) !important;
           }
         }
 

package/src/components/CodeMirror/index.module.scss

@@ -22,15 +22,15 @@
   }
 
   &.hasError {
-    border-color: #ff4d4f;
+    border-color: var(--cf-error);
 
     &:hover {
-      border-color: #ff4d4f;
+      border-color: var(--cf-error);
     }
 
     :global(.cm-focused) {
-      border-color: #ff4d4f;
-      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+      border-color: var(--cf-error);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-error) 20%, transparent);
     }
   }
 }

package/src/components/CodeMirror/index.tsx

@@ -11,30 +11,30 @@ import { linter, LintSource, Diagnostic } from "@codemirror/lint";
 import { sqlLinter, loadSqlParser } from "./linters/sqlLinter";
 import { jsonLinter, loadJsonParser } from "./linters/jsonLinter";
 
-// 支持的语言类型
+// Supported language types
 export type CodeMirrorLanguageType = "sql" | "json" | "plain";
 
 export interface CodeMirrorProps extends Omit<
   ReactCodeMirrorProps,
   "extensions" | "onError"
 > {
-  /** 语言类型，支持按需引入 */
+  /** Language type, supports on-demand loading */
   language?: CodeMirrorLanguageType;
-  /** 是否启用语法检查 */
+  /** Whether to enable syntax linting */
   enableLint?: boolean;
-  /** 错误信息回调 */
+  /** Error message callback */
   onLintError?: (error: string | null) => void;
-  /** 是否有错误，用于显示错误边框 */
+  /** Whether there is an error, used to show the error border */
   hasError?: boolean;
-  /** 是否翻译错误信息为中文，默认 false */
+  /** Whether to translate error messages into Chinese, default false */
   translateError?: boolean;
   /**
-   * JSON 校验是否允许根节点为数组 `[...]`，默认 false（仅允许对象 `{...}`）
+   * Whether JSON validation allows the root node to be an array `[...]`, default false (only objects `{...}` are allowed)
    */
   allowJsonArrayRoot?: boolean;
 }
 
-// 按需引入语言支持
+// Load language support on demand
 const getLanguageExtension = async (language: CodeMirrorLanguageType) => {
   switch (language) {
     case "sql": {
@@ -80,12 +80,12 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
         let lintSource: LintSource | null = null;
 
         if (language === "sql") {
-          // 预加载 SQL 解析器
+          // Preload the SQL parser
           await loadSqlParser();
           lintSource = sqlLinter(translateError);
           newExtensions.push(linter(lintSource));
         } else if (language === "json") {
-          // 预加载 JSON 解析器
+          // Preload the JSON parser
           await loadJsonParser();
           lintSource = jsonLinter({
             translate: translateError,
@@ -94,16 +94,16 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
           newExtensions.push(linter(lintSource));
         }
 
-        // 添加错误监听扩展
+        // Add an error listener extension
         if (lintSource) {
           newExtensions.push(
             EditorView.updateListener.of((update) => {
               if (update.docChanged || update.viewportChanged) {
-                // 延迟执行以等待 linter 完成
+                // Delay execution to wait for the linter to finish
                 setTimeout(async () => {
                   try {
                     const diagnosticsResult = lintSource?.(update.view);
-                    // 处理可能是 Promise 的情况
+                    // Handle the case where the result may be a Promise
                     const diagnostics: readonly Diagnostic[] =
                       diagnosticsResult instanceof Promise
                         ? await diagnosticsResult
@@ -118,7 +118,7 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
                       onLintErrorRef.current?.(null);
                     }
                   } catch (e) {
-                    // 忽略错误
+                    // Ignore errors
                     onLintErrorRef.current?.(null);
                   }
                 }, 150);
@@ -127,7 +127,7 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
           );
         }
       } else {
-        // 如果禁用了 lint，清除错误
+        // If lint is disabled, clear the error
         onLintErrorRef.current?.(null);
       }