@hsu-react/ui 1.0.0 → 2.0.0

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

@@ -55,33 +55,39 @@ const ChatList = props => {
       headerClassName: assistantHeaderClassName,
       noAnswerTip: noAnswerTip
     }), list?.map((item, idx) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_User.default, {
-          item: item.query,
-          hideTool: hideTool,
-          className: userClassName,
-          userName: userName,
-          userAvatar: userAvatar,
-          renderContent: userRenderContent,
-          renderQuery: userRenderQuery,
-          headerClassName: userHeaderClassName
-        }), !!item?.answers?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Assistant.default, {
-          className: assistantClassName,
-          itemClassName: assistantItemClassName,
-          item: item.answers,
-          assistanting: idx === list.length - 1 && assistanting,
-          onAgain: () => {
-            !!item.query?.query && onAgain?.(item.query?.query);
-          },
-          hideTool: hideTool,
-          onLikeChange: onLikeChange,
-          isLast: idx === list.length - 1,
-          assistantName: assistantName,
-          assistantAvatar: assistantAvatar,
-          headerClassName: assistantHeaderClassName,
-          noAnswerTip: noAnswerTip
-        })]
-      });
+      return (
+        /*#__PURE__*/
+        // 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.
+        (0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_User.default, {
+            item: item.query,
+            hideTool: hideTool,
+            className: userClassName,
+            userName: userName,
+            userAvatar: userAvatar,
+            renderContent: userRenderContent,
+            renderQuery: userRenderQuery,
+            headerClassName: userHeaderClassName
+          }), !!item?.answers?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Assistant.default, {
+            className: assistantClassName,
+            itemClassName: assistantItemClassName,
+            item: item.answers,
+            assistanting: idx === list.length - 1 && assistanting,
+            onAgain: () => {
+              !!item.query?.query && onAgain?.(item.query?.query);
+            },
+            hideTool: hideTool,
+            onLikeChange: onLikeChange,
+            isLast: idx === list.length - 1,
+            assistantName: assistantName,
+            assistantAvatar: assistantAvatar,
+            headerClassName: assistantHeaderClassName,
+            noAnswerTip: noAnswerTip
+          })]
+        }, item.query?.messageId ?? idx)
+      );
     })]
   });
 };

package/lib/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/lib/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/lib/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);
     }
   }
 }

package/lib/components/Copy/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-export interface CopyProps {
+export interface CopyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "children"> {
     id: string;
     /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
     isMessage?: boolean;
@@ -9,5 +9,11 @@ export interface CopyProps {
     copyedIcon?: ReactNode;
     hideIcon?: boolean;
 }
-declare const Copy: React.FC<CopyProps>;
+/**
+ * Wrapped in `forwardRef` because antd v6's Trigger (Tooltip / Popover / Dropdown) hands its child
+ * a ref instead of falling back to `findDOMNode` the way v5 did — a plain function component makes
+ * it warn and lose the trigger. The remaining props are spread onto the rendered node for the same
+ * reason: Trigger injects its event handlers by cloning the child.
+ */
+declare const Copy: React.ForwardRefExoticComponent<CopyProps & React.RefAttributes<HTMLDivElement>>;
 export default Copy;

package/lib/components/Copy/index.js

@@ -8,13 +8,19 @@ var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _turndown = _interopRequireDefault(require("turndown"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _antd = require("antd");
+var _feedback = require("../../feedback");
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Copy = props => {
+/**
+ * Wrapped in `forwardRef` because antd v6's Trigger (Tooltip / Popover / Dropdown) hands its child
+ * a ref instead of falling back to `findDOMNode` the way v5 did — a plain function component makes
+ * it warn and lose the trigger. The remaining props are spread onto the rendered node for the same
+ * reason: Trigger injects its event handlers by cloning the child.
+ */
+const Copy = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     id,
     isMessage = true,
@@ -22,7 +28,10 @@ const Copy = props => {
     text,
     copyIcon,
     copyedIcon,
-    hideIcon = false
+    hideIcon = false,
+    className,
+    onClick,
+    ...rest
   } = props;
   const [copyed, setCopyed] = (0, _react.useState)(false);
   const onCopy = () => {
@@ -38,7 +47,7 @@ const Copy = props => {
         }
         navigator.clipboard.writeText(content.innerText).then(() => {
           if (isMessage) {
-            _antd.message.success("复制成功");
+            _feedback.message.success("复制成功");
           } else {
             setCopyed(true);
             setTimeout(() => {
@@ -47,7 +56,7 @@ const Copy = props => {
           }
         }).catch(() => {
           if (isMessage) {
-            _antd.message.error("复制失败");
+            _feedback.message.error("复制失败");
           } else {
             setCopyed(false);
           }
@@ -76,7 +85,7 @@ const Copy = props => {
             document.body.removeChild(content);
           }
           if (isMessage) {
-            _antd.message.success("复制成功");
+            _feedback.message.success("复制成功");
           } else {
             setCopyed(true);
             setTimeout(() => {
@@ -85,7 +94,7 @@ const Copy = props => {
           }
         } catch {
           if (isMessage) {
-            _antd.message.error("复制失败");
+            _feedback.message.error("复制失败");
           } else {
             setCopyed(false);
           }
@@ -93,21 +102,27 @@ const Copy = props => {
       }
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: copyed ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(_indexModule.default.Copyed),
-      children: [!hideIcon && (copyedIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon: "ci:check",
-        className: (0, _classnames.default)(_indexModule.default.icon)
-      })), "\u5DF2\u590D\u5236\uFF01"]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(_indexModule.default.Copy),
-      onClick: onCopy,
-      children: [!hideIcon && (copyIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon: "ci:copy",
-        className: (0, _classnames.default)(_indexModule.default.icon)
-      })), text ?? "复制"]
-    })
+  return copyed ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    ...rest,
+    className: (0, _classnames.default)(_indexModule.default.Copyed, className),
+    children: [!hideIcon && (copyedIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: "ci:check",
+      className: (0, _classnames.default)(_indexModule.default.icon)
+    })), "\u5DF2\u590D\u5236\uFF01"]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    ...rest,
+    className: (0, _classnames.default)(_indexModule.default.Copy, className),
+    onClick: e => {
+      onCopy();
+      onClick?.(e);
+    },
+    children: [!hideIcon && (copyIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: "ci:copy",
+      className: (0, _classnames.default)(_indexModule.default.icon)
+    })), text ?? "复制"]
   });
-};
+});
+Copy.displayName = "Copy";
 var _default = exports.default = Copy;

package/lib/components/Copy/index.module.scss

@@ -8,18 +8,18 @@
 
   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;
 
   &: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);
   }
 
   .icon {
@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--cf-text);
+  color: var(--vita-foreground);
 
   cursor: default;
 

package/lib/components/DatePicker/RangePicker/index.js

@@ -126,7 +126,11 @@ const RangePicker = props => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker.RangePicker, {
       ...rangePickerConfig,
       ref: ref,
-      popupClassName: (0, _classnames.default)(_indexModule.default.rangePickerPopup, popupClassName),
+      classNames: {
+        popup: {
+          root: (0, _classnames.default)(_indexModule.default.rangePickerPopup, popupClassName)
+        }
+      },
       getPopupContainer: getPopupContainer ?? _defaultModalPickerGetPopupContainer.defaultModalPickerGetPopupContainer,
       className: _indexModule.default.RangePicker,
       picker: picker,