@hsu-react/ui 0.0.16 → 0.0.17

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

@@ -33,19 +33,3 @@
     }
   }
 }
-
-.Copyed {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--text-color);
-
-  cursor: default;
-
-  .icon {
-    font-size: 18px;
-  }
-}

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

@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
 export interface CopyProps {
     id: string;
-    isMessage?: true;
+    /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
+    isMessage?: boolean;
     md?: boolean;
     text?: string;
     copyIcon?: ReactNode;

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

@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--text-color);
+  color: var(--cf-text);
 
   cursor: default;
 

package/es/components/Markdown/Views/index.js

@@ -1,14 +1,14 @@
-var _excluded = ["className", "children"],
-  _excluded2 = ["children"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["className", "children", "node"],
+  _excluded2 = ["children", "node"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React from "react";
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { createContext, useContext, useId } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
@@ -18,7 +18,6 @@ import classNames from "classnames";
 import styles from "./index.module.scss";
 import "highlight.js/styles/atom-one-dark.min.css";
 import "katex/dist/katex.min.css";
-import { generateRandomStr } from "hsu-utils";
 import Copy from "../../Copy";
 import MermaidBlock from "./MermaidBlock";
 import ArtifactBlock from "./ArtifactBlock";
@@ -41,77 +40,109 @@ var extractText = function extractText(node) {
   }
   return "";
 };
-var MarkdownViews = function MarkdownViews(props) {
+
+/**
+ * Copy button config, handed to the code renderer through context rather than a closure so the
+ * renderer can stay a module-level component (see CodeBlock).
+ */
+var CopyPropsContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * Fenced code block: mermaid diagram, Artifacts preview, or highlighted code with a copy button.
+ *
+ * Declared at module scope on purpose. Defining it inline inside MarkdownViews would hand
+ * react-markdown a brand-new element type on every render, so React would unmount and remount
+ * every code block whenever the markdown re-renders — making the copy button flicker (and losing
+ * its "已复制！" state) on each token of streamed content.
+ */
+var CodeBlock = function CodeBlock(props) {
+  var _exec;
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
   var className = props.className,
-    copyProps = props.copyProps,
-    extraComponents = props.components;
-  return /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({}, props), {}, {
-    rehypePlugins: [rehypeHighlight, rehypeKatex],
-    remarkPlugins: [remarkGfm, remarkMath],
-    className: classNames(styles.MarkdownViews, className, "markdown-body"),
-    components: _objectSpread({
-      code: function code(_ref) {
-        var className = _ref.className,
-          children = _ref.children,
-          props = _objectWithoutProperties(_ref, _excluded);
-        var match = /language-(\w+)/.exec(className || "");
-        if (match !== null && match !== void 0 && match.length) {
-          var lang = match[1].toLowerCase();
-          var codeText = extractText(children);
+    children = props.children,
+    _node = props.node,
+    codeProps = _objectWithoutProperties(props, _excluded);
+  var copyProps = useContext(CopyPropsContext);
+  // Stable for the lifetime of the block: regenerating the id on every render would leave the
+  // copy button's getElementById lookup pointing at a stale node. Strip ':' so the id stays
+  // usable with CSS selectors as well as getElementById.
+  var id = "md-code-".concat(useId().replace(/:/g, ""));
+  var lang = (_exec = /language-(\w+)/.exec(className || "")) === null || _exec === void 0 || (_exec = _exec[1]) === null || _exec === void 0 ? void 0 : _exec.toLowerCase();
+  if (!lang) {
+    return /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({}, codeProps), {}, {
+      children: children
+    }));
+  }
+  var codeText = extractText(children);
+
+  // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
+  if (lang === "mermaid") {
+    return /*#__PURE__*/_jsx(MermaidBlock, {
+      code: codeText
+    });
+  }
+  var codeView = /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.code),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classNames(styles.nav),
+      children: /*#__PURE__*/_jsx(Copy, _objectSpread({
+        id: id,
+        md: false
+      }, copyProps))
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.content),
+      children: /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({
+        id: id
+      }, codeProps), {}, {
+        className: classNames(styles.code_content, className),
+        children: children
+      }))
+    })]
+  });
 
-          // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
-          if (lang === "mermaid") {
-            return /*#__PURE__*/_jsx(MermaidBlock, {
-              code: codeText
-            });
-          }
-          var id = generateRandomStr(10);
-          var codeView = /*#__PURE__*/_jsxs("div", {
-            className: classNames(styles.code),
-            children: [/*#__PURE__*/_jsx("div", {
-              className: classNames(styles.nav),
-              children: /*#__PURE__*/_jsx(Copy, _objectSpread({
-                id: id,
-                md: false
-              }, copyProps))
-            }), /*#__PURE__*/_jsx("div", {
-              className: classNames(styles.content),
-              children: /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({
-                id: id
-              }, props), {}, {
-                className: classNames(styles.code_content, className),
-                children: children
-              }))
-            })]
-          });
+  // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
+  if (ARTIFACT_LANGS.has(lang)) {
+    return /*#__PURE__*/_jsx(ArtifactBlock, {
+      code: codeText,
+      lang: lang,
+      codeView: codeView
+    });
+  }
+  return codeView;
+};
 
-          // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
-          if (ARTIFACT_LANGS.has(lang)) {
-            return /*#__PURE__*/_jsx(ArtifactBlock, {
-              code: codeText,
-              lang: lang,
-              codeView: codeView
-            });
-          }
-          return codeView;
-        }
-        return /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({}, props), {}, {
-          children: children
-        }));
-      },
-      td: function td(_ref2) {
-        var children = _ref2.children,
-          props = _objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({}, props), {}, {
-          children: Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.map(function (item) {
-            if (item === "<br>") {
-              return /*#__PURE__*/_jsx("br", {});
-            }
-            return item;
-          }) : children
-        }));
-      }
-    }, extraComponents || {})
+/** Table cell that turns literal "<br>" text nodes into real line breaks. */
+var TableCell = function TableCell(props) {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  var children = props.children,
+    _node = props.node,
+    tdProps = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({}, tdProps), {}, {
+    children: Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.map(function (item, index) {
+      return item === "<br>" ? /*#__PURE__*/_jsx("br", {}, index) : item;
+    }) : children
   }));
 };
+var MarkdownViews = function MarkdownViews(props) {
+  var className = props.className,
+    copyProps = props.copyProps,
+    extraComponents = props.components;
+  return (
+    /*#__PURE__*/
+    // The components map below may be a fresh object each render; that is harmless because the
+    // renderers it points at are stable module-level types, which is what React reconciles on.
+    _jsx(CopyPropsContext.Provider, {
+      value: copyProps,
+      children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({}, props), {}, {
+        rehypePlugins: [rehypeHighlight, rehypeKatex],
+        remarkPlugins: [remarkGfm, remarkMath],
+        className: classNames(styles.MarkdownViews, className, "markdown-body"),
+        components: _objectSpread({
+          code: CodeBlock,
+          td: TableCell
+        }, extraComponents || {})
+      }))
+    })
+  );
+};
 export default MarkdownViews;

package/es/components/Markdown/Views/index.module.scss

@@ -68,6 +68,21 @@
       color: #efefef;
 
       background: #212121;
+
+      // Copy's root div (class is module-hashed, so it can only be reached as a child).
+      // It colors itself from theme tokens — in light mode --cf-text-2 is near-black,
+      // which disappears against this strip. The strip stays dark on purpose to match the
+      // atom-one-dark code body, so the button is pinned to light-on-dark rather than
+      // following the page theme.
+      > div {
+        color: rgba(255, 255, 255, 0.65);
+
+        &:hover {
+          color: #ffffff;
+
+          background-color: rgba(255, 255, 255, 0.12);
+        }
+      }
     }
   }
 }

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

@@ -33,19 +33,3 @@
     }
   }
 }
-
-.Copyed {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--text-color);
-
-  cursor: default;
-
-  .icon {
-    font-size: 18px;
-  }
-}

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

@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
 export interface CopyProps {
     id: string;
-    isMessage?: true;
+    /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
+    isMessage?: boolean;
     md?: boolean;
     text?: string;
     copyIcon?: ReactNode;

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

@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--text-color);
+  color: var(--cf-text);
 
   cursor: default;
 

package/lib/components/Markdown/Views/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
 var _rehypeHighlight = _interopRequireDefault(require("rehype-highlight"));
 var _rehypeKatex = _interopRequireDefault(require("rehype-katex"));
@@ -14,12 +14,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 require("highlight.js/styles/atom-one-dark.min.css");
 require("katex/dist/katex.min.css");
-var _hsuUtils = require("hsu-utils");
 var _Copy = _interopRequireDefault(require("../../Copy"));
 var _MermaidBlock = _interopRequireDefault(require("./MermaidBlock"));
 var _ArtifactBlock = _interopRequireDefault(require("./ArtifactBlock"));
 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; }
 /** Code block languages that support Artifacts preview (modeled after Claude Artifacts) */const ARTIFACT_LANGS = new Set(["html", "svg"]);
 
 /**
@@ -35,86 +36,117 @@ const extractText = node => {
   }
   return "";
 };
+
+/**
+ * Copy button config, handed to the code renderer through context rather than a closure so the
+ * renderer can stay a module-level component (see CodeBlock).
+ */
+const CopyPropsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+/**
+ * Fenced code block: mermaid diagram, Artifacts preview, or highlighted code with a copy button.
+ *
+ * Declared at module scope on purpose. Defining it inline inside MarkdownViews would hand
+ * react-markdown a brand-new element type on every render, so React would unmount and remount
+ * every code block whenever the markdown re-renders — making the copy button flicker (and losing
+ * its "已复制！" state) on each token of streamed content.
+ */
+const CodeBlock = props => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const {
+    className,
+    children,
+    node: _node,
+    ...codeProps
+  } = props;
+  const copyProps = (0, _react.useContext)(CopyPropsContext);
+  // Stable for the lifetime of the block: regenerating the id on every render would leave the
+  // copy button's getElementById lookup pointing at a stale node. Strip ':' so the id stays
+  // usable with CSS selectors as well as getElementById.
+  const id = `md-code-${(0, _react.useId)().replace(/:/g, "")}`;
+  const lang = /language-(\w+)/.exec(className || "")?.[1]?.toLowerCase();
+  if (!lang) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+      ...codeProps,
+      children: children
+    });
+  }
+  const codeText = extractText(children);
+
+  // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
+  if (lang === "mermaid") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MermaidBlock.default, {
+      code: codeText
+    });
+  }
+  const codeView = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.code),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(_indexModule.default.nav),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copy.default, {
+        id: id,
+        md: false,
+        ...copyProps
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(_indexModule.default.content),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        id: id,
+        ...codeProps,
+        className: (0, _classnames.default)(_indexModule.default.code_content, className),
+        children: children
+      })
+    })]
+  });
+
+  // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
+  if (ARTIFACT_LANGS.has(lang)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArtifactBlock.default, {
+      code: codeText,
+      lang: lang,
+      codeView: codeView
+    });
+  }
+  return codeView;
+};
+
+/** Table cell that turns literal "<br>" text nodes into real line breaks. */
+const TableCell = props => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const {
+    children,
+    node: _node,
+    ...tdProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+    ...tdProps,
+    children: Array.isArray(children) ? children?.map((item, index) => item === "<br>" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}, index) : item) : children
+  });
+};
 const MarkdownViews = props => {
   const {
     className,
     copyProps,
     components: extraComponents
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
-    ...props,
-    rehypePlugins: [_rehypeHighlight.default, _rehypeKatex.default],
-    remarkPlugins: [_remarkGfm.default, _remarkMath.default],
-    className: (0, _classnames.default)(_indexModule.default.MarkdownViews, className, "markdown-body"),
-    components: {
-      code: ({
-        className,
-        children,
-        ...props
-      }) => {
-        const match = /language-(\w+)/.exec(className || "");
-        if (match?.length) {
-          const lang = match[1].toLowerCase();
-          const codeText = extractText(children);
-
-          // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
-          if (lang === "mermaid") {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MermaidBlock.default, {
-              code: codeText
-            });
-          }
-          const id = (0, _hsuUtils.generateRandomStr)(10);
-          const codeView = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _classnames.default)(_indexModule.default.code),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames.default)(_indexModule.default.nav),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copy.default, {
-                id: id,
-                md: false,
-                ...copyProps
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames.default)(_indexModule.default.content),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-                id: id,
-                ...props,
-                className: (0, _classnames.default)(_indexModule.default.code_content, className),
-                children: children
-              })
-            })]
-          });
-
-          // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
-          if (ARTIFACT_LANGS.has(lang)) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArtifactBlock.default, {
-              code: codeText,
-              lang: lang,
-              codeView: codeView
-            });
-          }
-          return codeView;
+  return (
+    /*#__PURE__*/
+    // The components map below may be a fresh object each render; that is harmless because the
+    // renderers it points at are stable module-level types, which is what React reconciles on.
+    (0, _jsxRuntime.jsx)(CopyPropsContext.Provider, {
+      value: copyProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
+        ...props,
+        rehypePlugins: [_rehypeHighlight.default, _rehypeKatex.default],
+        remarkPlugins: [_remarkGfm.default, _remarkMath.default],
+        className: (0, _classnames.default)(_indexModule.default.MarkdownViews, className, "markdown-body"),
+        components: {
+          code: CodeBlock,
+          td: TableCell,
+          ...(extraComponents || {})
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-          ...props,
-          children: children
-        });
-      },
-      td: ({
-        children,
-        ...props
-      }) => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-          ...props,
-          children: Array.isArray(children) ? children?.map(item => {
-            if (item === "<br>") {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {});
-            }
-            return item;
-          }) : children
-        });
-      },
-      ...(extraComponents || {})
-    }
-  });
+      })
+    })
+  );
 };
 var _default = exports.default = MarkdownViews;

package/lib/components/Markdown/Views/index.module.scss

@@ -68,6 +68,21 @@
       color: #efefef;
 
       background: #212121;
+
+      // Copy's root div (class is module-hashed, so it can only be reached as a child).
+      // It colors itself from theme tokens — in light mode --cf-text-2 is near-black,
+      // which disappears against this strip. The strip stays dark on purpose to match the
+      // atom-one-dark code body, so the button is pinned to light-on-dark rather than
+      // following the page theme.
+      > div {
+        color: rgba(255, 255, 255, 0.65);
+
+        &:hover {
+          color: #ffffff;
+
+          background-color: rgba(255, 255, 255, 0.12);
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

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

@@ -33,19 +33,3 @@
     }
   }
 }
-
-.Copyed {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--text-color);
-
-  cursor: default;
-
-  .icon {
-    font-size: 18px;
-  }
-}

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

@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--text-color);
+  color: var(--cf-text);
 
   cursor: default;
 

package/src/components/Copy/index.tsx

@@ -8,7 +8,8 @@ import styles from "./index.module.scss";
 
 export interface CopyProps {
   id: string;
-  isMessage?: true;
+  /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
+  isMessage?: boolean;
   md?: boolean;
   text?: string;
   copyIcon?: ReactNode;

package/src/components/Markdown/Views/index.module.scss

@@ -68,6 +68,21 @@
       color: #efefef;
 
       background: #212121;
+
+      // Copy's root div (class is module-hashed, so it can only be reached as a child).
+      // It colors itself from theme tokens — in light mode --cf-text-2 is near-black,
+      // which disappears against this strip. The strip stays dark on purpose to match the
+      // atom-one-dark code body, so the button is pinned to light-on-dark rather than
+      // following the page theme.
+      > div {
+        color: rgba(255, 255, 255, 0.65);
+
+        &:hover {
+          color: #ffffff;
+
+          background-color: rgba(255, 255, 255, 0.12);
+        }
+      }
     }
   }
 }

package/src/components/Markdown/Views/index.tsx

@@ -1,5 +1,8 @@
-import React from "react";
-import ReactMarkdown, { Options as ReactMarkdownProps } from "react-markdown";
+import React, { createContext, useContext, useId } from "react";
+import ReactMarkdown, {
+  Options as ReactMarkdownProps,
+  ExtraProps,
+} from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
@@ -8,7 +11,6 @@ import classNames from "classnames";
 import styles from "./index.module.scss";
 import "highlight.js/styles/atom-one-dark.min.css";
 import "katex/dist/katex.min.css";
-import { generateRandomStr } from "hsu-utils";
 import Copy, { CopyProps } from "../../Copy";
 import MermaidBlock from "./MermaidBlock";
 import ArtifactBlock from "./ArtifactBlock";
@@ -30,6 +32,85 @@ const extractText = (node: React.ReactNode): string => {
   return "";
 };
 
+/**
+ * Copy button config, handed to the code renderer through context rather than a closure so the
+ * renderer can stay a module-level component (see CodeBlock).
+ */
+const CopyPropsContext = createContext<Omit<CopyProps, "id"> | undefined>(
+  undefined,
+);
+
+/**
+ * Fenced code block: mermaid diagram, Artifacts preview, or highlighted code with a copy button.
+ *
+ * Declared at module scope on purpose. Defining it inline inside MarkdownViews would hand
+ * react-markdown a brand-new element type on every render, so React would unmount and remount
+ * every code block whenever the markdown re-renders — making the copy button flicker (and losing
+ * its "已复制！" state) on each token of streamed content.
+ */
+const CodeBlock: React.FC<React.ComponentProps<"code"> & ExtraProps> = (
+  props,
+) => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const { className, children, node: _node, ...codeProps } = props;
+  const copyProps = useContext(CopyPropsContext);
+  // Stable for the lifetime of the block: regenerating the id on every render would leave the
+  // copy button's getElementById lookup pointing at a stale node. Strip ':' so the id stays
+  // usable with CSS selectors as well as getElementById.
+  const id = `md-code-${useId().replace(/:/g, "")}`;
+
+  const lang = /language-(\w+)/.exec(className || "")?.[1]?.toLowerCase();
+  if (!lang) {
+    return <code {...codeProps}>{children}</code>;
+  }
+
+  const codeText = extractText(children);
+
+  // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
+  if (lang === "mermaid") {
+    return <MermaidBlock code={codeText} />;
+  }
+
+  const codeView = (
+    <div className={classNames(styles.code)}>
+      <div className={classNames(styles.nav)}>
+        <Copy id={id} md={false} {...copyProps} />
+      </div>
+      <div className={classNames(styles.content)}>
+        <code
+          id={id}
+          {...codeProps}
+          className={classNames(styles.code_content, className)}
+        >
+          {children}
+        </code>
+      </div>
+    </div>
+  );
+
+  // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
+  if (ARTIFACT_LANGS.has(lang)) {
+    return <ArtifactBlock code={codeText} lang={lang} codeView={codeView} />;
+  }
+  return codeView;
+};
+
+/** Table cell that turns literal "<br>" text nodes into real line breaks. */
+const TableCell: React.FC<React.ComponentProps<"td"> & ExtraProps> = (props) => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const { children, node: _node, ...tdProps } = props;
+
+  return (
+    <td {...tdProps}>
+      {Array.isArray(children)
+        ? children?.map((item, index) =>
+            item === "<br>" ? <br key={index} /> : item,
+          )
+        : children}
+    </td>
+  );
+};
+
 export interface MarkdownViewsProps extends ReactMarkdownProps {
   copyProps?: Omit<CopyProps, "id">;
 }
@@ -38,69 +119,21 @@ const MarkdownViews: React.FC<MarkdownViewsProps> = (props) => {
   const { className, copyProps, components: extraComponents } = props;
 
   return (
-    <ReactMarkdown
-      {...props}
-      rehypePlugins={[rehypeHighlight, rehypeKatex]}
-      remarkPlugins={[remarkGfm, remarkMath]}
-      className={classNames(styles.MarkdownViews, className, "markdown-body")}
-      components={{
-        code: ({ className, children, ...props }) => {
-          const match = /language-(\w+)/.exec(className || "");
-          if (match?.length) {
-            const lang = match[1].toLowerCase();
-            const codeText = extractText(children);
-
-            // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
-            if (lang === "mermaid") {
-              return <MermaidBlock code={codeText} />;
-            }
-
-            const id = generateRandomStr(10);
-            const codeView = (
-              <div className={classNames(styles.code)}>
-                <div className={classNames(styles.nav)}>
-                  <Copy id={id} md={false} {...copyProps} />
-                </div>
-                <div className={classNames(styles.content)}>
-                  <code
-                    id={id}
-                    {...props}
-                    className={classNames(styles.code_content, className)}
-                  >
-                    {children}
-                  </code>
-                </div>
-              </div>
-            );
-
-            // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
-            if (ARTIFACT_LANGS.has(lang)) {
-              return (
-                <ArtifactBlock code={codeText} lang={lang} codeView={codeView} />
-              );
-            }
-            return codeView;
-          }
-          return <code {...props}>{children}</code>;
-        },
-        td: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              {Array.isArray(children)
-                ? children?.map((item) => {
-                    if (item === "<br>") {
-                      return <br />;
-                    }
-
-                    return item;
-                  })
-                : children}
-            </td>
-          );
-        },
-        ...(extraComponents || {}),
-      }}
-    />
+    // The components map below may be a fresh object each render; that is harmless because the
+    // renderers it points at are stable module-level types, which is what React reconciles on.
+    <CopyPropsContext.Provider value={copyProps}>
+      <ReactMarkdown
+        {...props}
+        rehypePlugins={[rehypeHighlight, rehypeKatex]}
+        remarkPlugins={[remarkGfm, remarkMath]}
+        className={classNames(styles.MarkdownViews, className, "markdown-body")}
+        components={{
+          code: CodeBlock,
+          td: TableCell,
+          ...(extraComponents || {}),
+        }}
+      />
+    </CopyPropsContext.Provider>
   );
 };