@hsu-react/ui 1.0.0 → 2.0.1

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

@@ -3,27 +3,27 @@
   align-items: center;
   column-gap: 2px;
   padding: 0 11px;
-  border-radius: 4px;
-  border: 1px solid var(--primary-color);
+  border-radius: var(--vita-radius-xs);
+  border: 1px solid var(--vita-primary);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s;
   height: 100%;
-  background-color: var(--cf-surface);
+  background-color: var(--vita-surface);
 
   .icon {
     font-size: 22px;
   }
 
   &.active {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-    background-color: color-mix(in srgb, var(--primary-color) 13%, transparent);
+    color: var(--vita-primary);
+    border-color: var(--vita-primary);
+    background-color: color-mix(in srgb, var(--vita-primary) 13%, transparent);
   }
 
   &:hover {
-    color: var(--cf-text);
-    border-color: var(--cf-border);
-    background-color: var(--cf-row-hover);
+    color: var(--vita-foreground);
+    border-color: var(--vita-border);
+    background-color: var(--vita-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: var(--cf-text);
-    background: var(--cf-subtle);
+    color: var(--vita-foreground);
+    background: var(--vita-muted);
     border-radius: 3px;
     transition: box-shadow 0.3s, color 0.3s;
     cursor: pointer;
@@ -22,7 +22,7 @@
     }
     
     &:hover {
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
   }
 }

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

@@ -5,10 +5,10 @@
   }
 
   display: flex;
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

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

@@ -3,8 +3,8 @@
   align-items: center;
   justify-content: center;
 
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
   cursor: pointer;
 }

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

@@ -1,8 +1,8 @@
 .clip {
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

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

@@ -73,7 +73,7 @@ const UploadButton: React.FC<UploadButtonProps> = (props) => {
                     : "heroicons-outline:paper-clip"
                 }
                 fontSize={22}
-                color="var(--cf-text-3)"
+                color="var(--vita-subtle-foreground)"
               />
             }
             onClick={

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

@@ -1,5 +1,5 @@
 import { UploadFile } from "antd";
-import { notification } from "antd";
+import { notification } from "../../../../feedback";
 
 /**
  * Handle the file upload response

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

@@ -16,9 +16,9 @@
   width: 100%;
   padding: 10px;
 
-  border-radius: 6px;
-  border: 1px solid var(--cf-border);
-  background: var(--cf-surface);
+  border-radius: var(--vita-radius);
+  border: 1px solid var(--vita-border);
+  background: var(--vita-surface);
 
   .textArea {
     border: none !important;
@@ -51,13 +51,14 @@
 
         .select {
           font-size: 14px;
-          border: 1px solid var(--cf-border);
-          border-radius: 4px;
+          border: 1px solid var(--vita-border);
+          border-radius: var(--vita-radius);
           box-shadow: none;
           opacity: 0.8;
           width: 140px;
           height: 100%;
-          :global(.ant-select-selector) {
+          // v6 moved the Select box onto the `.ant-select` root
+          :global(.ant-select) {
             border: none;
             margin: 1px 0 0;
           }
@@ -66,7 +67,7 @@
           }
 
           &[class*="disabled"] {
-            color: var(--cf-text);
+            color: var(--vita-foreground);
             background: transparent;
             border: none;
             box-shadow: none;
@@ -81,16 +82,16 @@
     }
 
     li {
-      height: 32px;
+      height: var(--vita-control-height);
     }
   }
 }
 
 .button {
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

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

@@ -8,28 +8,28 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--cf-text-2);
+  color: var(--vita-muted-foreground);
 
   cursor: pointer;
 
   transition: color 0.3s, background-color 0.3s;
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius-xs);
 
   .icon {
     font-size: 18px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
 
     transition: color 0.3s;
   }
 
   &:hover {
-    color: var(--cf-text);
+    color: var(--vita-foreground);
 
-    background-color: var(--cf-row-hover);
+    background-color: var(--vita-hover);
 
     .icon {
-      color: var(--cf-text);
+      color: var(--vita-foreground);
     }
   }
 }

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import Icon from "../../../../../../../Icon";
 import classNames from "classnames";
-import { message } from "antd";
+import { message } from "../../../../../../../../feedback";
 import styles from "./index.module.scss";
 import clipboard from "copy-to-clipboard";
 import MarkdownIt from "markdown-it";

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

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

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.tsx

@@ -85,7 +85,7 @@ const LikeDislike: React.FC<LikeDislikeProps> = ({
           form.resetFields();
         }}
         width={"40%"}
-        maskClosable={false}
+        mask={{ closable: false }}
         formItems={[
           {
             type: "TEXTAREA",

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

@@ -13,7 +13,7 @@
 
     font-size: 14px;
     line-height: 14px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
     white-space: nowrap;
 
     cursor: default;
@@ -26,7 +26,7 @@
       min-width: 0px;
       height: 1px;
 
-      background-color: var(--cf-border);
+      background-color: var(--vita-border);
     }
 
     .quoteIcon {
@@ -39,7 +39,7 @@
       justify-content: center;
 
       width: 24px;
-      height: 24px;
+      height: var(--vita-control-height-sm);
 
       font-size: 18px;
 
@@ -48,7 +48,7 @@
       transition: color 0.3s;
 
       &:hover {
-        color: var(--primary-color);
+        color: var(--vita-primary);
       }
     }
   }
@@ -79,7 +79,7 @@
 
         background: linear-gradient(
           transparent,
-          color-mix(in srgb, var(--cf-surface) 91%, transparent)
+          color-mix(in srgb, var(--vita-surface) 91%, transparent)
         );
       }
     }
@@ -101,16 +101,16 @@
 
       cursor: pointer;
 
-      border-radius: 4px;
+      border-radius: var(--vita-radius-xs);
 
-      background-color: var(--cf-subtle);
+      background-color: var(--vita-muted);
 
       transition: background-color 0.3s, color 0.3s;
 
       &:hover {
         color: #fff;
 
-        background-color: var(--primary-color);
+        background-color: var(--vita-primary);
       }
 
       &.lastRowIndex {

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

@@ -45,20 +45,20 @@
 
   .error {
     font-size: 14px;
-    color: var(--cf-error);
+    color: var(--vita-error);
 
-    border-radius: 4px;
-    border: 1px solid var(--cf-error);
+    border-radius: var(--vita-radius-xs);
+    border: 1px solid var(--vita-error);
     padding: 4px 15px;
   }
 
   .noAnswerTip {
     font-size: 14px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
 
-    border-radius: 4px;
-    border: 1px solid var(--cf-border);
+    border-radius: var(--vita-radius-xs);
+    border: 1px solid var(--vita-border);
     padding: 4px 15px;
-    background-color: var(--cf-subtle);
+    background-color: var(--vita-muted);
   }
 }

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

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

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

@@ -1,3 +1,5 @@
+@use "../../../../../styles/responsive" as r;
+
 .User {
   max-width: 100%;
 
@@ -16,7 +18,7 @@
 
         .time {
           font-size: 12px;
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
           font-weight: normal;
         }
       }
@@ -52,7 +54,7 @@
 
     background: linear-gradient(243deg, #8a66fb 0%, #126dff 100%);
 
-    border-radius: 6px 0px 6px 6px;
+    border-radius: var(--vita-radius-sm) 0px var(--vita-radius-sm) var(--vita-radius-sm);
 
     .fileList {
       display: flex;
@@ -99,11 +101,11 @@
 
       padding: 4px;
 
-      border-radius: 4px;
+      border-radius: var(--vita-radius-xs);
 
-      border: 1px solid var(--cf-border);
+      border: 1px solid var(--vita-border);
 
-      background: var(--cf-surface);
+      background: var(--vita-surface);
 
       opacity: 0;
 
@@ -119,23 +121,32 @@
 
         font-size: 18px;
         line-height: 18px;
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
 
         cursor: pointer;
 
         transition: color 0.3s, background-color 0.3s;
 
         &:hover {
-          color: var(--cf-text);
+          color: var(--vita-foreground);
+
+          background-color: var(--vita-hover);
 
-          background-color: var(--cf-row-hover);
+          border-radius: var(--vita-radius-xs);
+        }
+      }
+    }
 
-          border-radius: 4px;
+    // 仅悬停可见的操作在触屏上永远够不着，所以那里常驻显示。
+    @include r.hover {
+      &:hover {
+        .userTool {
+          opacity: 1;
         }
       }
     }
 
-    &:hover {
+    @include r.touch {
       .userTool {
         opacity: 1;
       }

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

@@ -140,7 +140,10 @@ const ChatList: React.FC<ChatListProps> = (props) => {
       )}
       {list?.map((item, idx) => {
         return (
-          <>
+          // Prefer the message id so a turn keeps its identity when the list grows; streaming
+          // answers append to `list`, and an index-only key would make React re-key every
+          // existing turn on each append.
+          <React.Fragment key={item.query?.messageId ?? idx}>
             <User
               item={item.query}
               hideTool={hideTool}
@@ -169,7 +172,7 @@ const ChatList: React.FC<ChatListProps> = (props) => {
                 noAnswerTip={noAnswerTip}
               />
             )}
-          </>
+          </React.Fragment>
         );
       })}
     </div>

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

@@ -30,8 +30,8 @@
   &.outline {
     :global(.ant-checkbox-wrapper) {
       :global(.ant-checkbox) {
-        :global(.ant-checkbox-inner) {
-          border-color: var(--cf-border) !important;
+        & {
+          border-color: var(--vita-border) !important;
 
           background: transparent !important;
 
@@ -42,7 +42,7 @@
         }
 
         &:global(.ant-checkbox-checked) {
-          :global(.ant-checkbox-inner) {
+          & {
             background: rgba(255, 255, 255, 1) !important;
           }
         }
@@ -50,16 +50,16 @@
 
       &:global(.ant-checkbox-wrapper-disabled) {
         :global(.ant-checkbox) {
-          :global(.ant-checkbox-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: var(--cf-border) !important;
+              border-color: var(--vita-border) !important;
             }
           }
 
           &:global(.ant-checkbox-checked) {
-            :global(.ant-checkbox-inner) {
+            & {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }
@@ -89,12 +89,9 @@
         height: 100%;
       }
 
-      :global(.ant-checkbox-inner) {
-        width: 100%;
-        height: 100%;
-
-        border-radius: inherit;
-
+      // v6 draws the box on `.ant-checkbox` itself (the old `.ant-checkbox-inner` span is gone),
+      // so the fill-the-parent sizing is dropped — see Checkbox/index.module.scss.
+      & {
         &::after {
           inset-inline-start: revert;
           left: 25%;
@@ -107,7 +104,7 @@
     }
 
     :global(.ant-checkbox-indeterminate) {
-      :global(.ant-checkbox-inner) {
+      & {
         &::after {
           left: 50%;
           top: 50%;

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

@@ -3,8 +3,8 @@
 
   &.outline {
     :global(.ant-checkbox) {
-      :global(.ant-checkbox-inner) {
-        border-color: var(--cf-border) !important;
+      & {
+        border-color: var(--vita-border) !important;
 
         background: transparent !important;
 
@@ -15,7 +15,7 @@
       }
 
       &:global(.ant-checkbox-checked) {
-        :global(.ant-checkbox-inner) {
+        & {
           background: rgba(255, 255, 255, 1) !important;
         }
       }
@@ -23,16 +23,16 @@
 
     &:global(.ant-checkbox-wrapper-disabled) {
       :global(.ant-checkbox) {
-        :global(.ant-checkbox-inner) {
+        & {
           background: rgba(0, 0, 0, 0.04) !important;
 
           &::after {
-            border-color: var(--cf-border) !important;
+            border-color: var(--vita-border) !important;
           }
         }
 
         &:global(.ant-checkbox-checked) {
-          :global(.ant-checkbox-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
           }
         }
@@ -53,33 +53,28 @@
       height: 100%;
     }
 
-    :global(.ant-checkbox-inner) {
-      width: 100%;
-      height: 100%;
-
-      border-radius: inherit;
-
-      &::after {
-        inset-inline-start: revert;
-        left: 25%;
-        top: 45%;
-
-        width: 33%;
-        height: 60%;
-      }
+    // antd v6 dropped the `.ant-checkbox-inner` span — the box is drawn on `.ant-checkbox`
+    // itself, i.e. this very element. The old inner rule's `width/height: 100%` and
+    // `border-radius: inherit` only existed to make the span fill its parent, and would now
+    // resolve against the label instead, so they are gone; the sizing above already applies.
+    &::after {
+      inset-inline-start: revert;
+      left: 25%;
+      top: 45%;
+
+      width: 33%;
+      height: 60%;
     }
   }
 
   :global(.ant-checkbox-indeterminate) {
-    :global(.ant-checkbox-inner) {
-      &::after {
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
+    &::after {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
 
-        width: 50%;
-        height: 50%;
-      }
+      width: 50%;
+      height: 50%;
     }
   }
 

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

@@ -2,8 +2,8 @@
   width: 100%;
   height: 100%;
 
-  border: 1px solid var(--cf-border);
-  border-radius: 6px;
+  border: 1px solid var(--vita-border);
+  border-radius: var(--vita-radius);
 
   overflow: hidden;
 
@@ -22,15 +22,15 @@
   }
 
   &.hasError {
-    border-color: var(--cf-error);
+    border-color: var(--vita-error);
 
     &:hover {
-      border-color: var(--cf-error);
+      border-color: var(--vita-error);
     }
 
     :global(.cm-focused) {
-      border-color: var(--cf-error);
-      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-error) 20%, transparent);
+      border-color: var(--vita-error);
+      box-shadow: var(--vita-focus-ring-error);
     }
   }
 }