@easyv/biz-components 0.0.20 → 0.0.22

package/dist/components/AiMessageRender/AiMessageRender.es.js

@@ -1,69 +1,85 @@
-import { j as e } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { CopyCircleOutlined as F } from "../../node_modules/.pnpm/@easyv_react-icons@6.3.0/node_modules/@easyv/react-icons/dist/index.esm.es.js";
-import C from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
-import g from "./index.less.es.js";
-import { ShadowDom as y } from "../ShadowDom/ShadowDom.es.js";
-import { Markdown as k } from "../../node_modules/.pnpm/react-markdown@10.1.0_@types_react@18.2.0_react@18.2.0/node_modules/react-markdown/lib/index.es.js";
-import b from "../../node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
-const B = (c) => {
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { CopyCircleOutlined } from "../../node_modules/.pnpm/@easyv_react-icons@6.3.0/node_modules/@easyv/react-icons/dist/index.esm.es.js";
+import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
+import messageRenderCss from "./index.less.es.js";
+import { ShadowDom } from "../ShadowDom/ShadowDom.es.js";
+import { Markdown } from "../../node_modules/.pnpm/react-markdown@10.1.0_@types_react@18.2.0_react@18.2.0/node_modules/react-markdown/lib/index.es.js";
+import remarkGfm from "../../node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
+const AiMessageRender = (props) => {
   const {
-    className: m = "",
-    onCopy: s,
-    renderDashboardContent: n,
-    showFooterButtons: f = !1,
-    contents: h,
-    markdownClassName: p = "",
-    rootFontSize: x,
-    hideDefaultStyle: u,
-    markdownStyle: o
-  } = c;
-  let i = u ? "" : g;
-  o && (i += `
-${o}`);
-  const j = (r) => /* @__PURE__ */ e.jsx(
-    y,
-    {
-      style: i,
-      shadowRootDivClassName: p + " markdown-container",
-      rootFontSize: x,
-      children: /* @__PURE__ */ e.jsx(k, { remarkPlugins: [b], children: r })
+    className = "",
+    onCopy,
+    renderDashboardContent: propsRenderDashboardContent,
+    showFooterButtons = false,
+    contents,
+    markdownClassName = "",
+    rootFontSize,
+    hideDefaultStyle,
+    markdownStyle
+  } = props;
+  let finalMarkdownStyle = hideDefaultStyle ? "" : messageRenderCss;
+  if (markdownStyle) {
+    finalMarkdownStyle += `
+${markdownStyle}`;
+  }
+  const renderStringContent = (msg) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ShadowDom,
+      {
+        style: finalMarkdownStyle,
+        shadowRootDivClassName: markdownClassName + " markdown-container",
+        rootFontSize,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { remarkPlugins: [remarkGfm], children: msg })
+      }
+    );
+  };
+  const renderDashboardContent = (msg) => {
+    const { data, filterCode, plotModuleName, plotVersion } = msg;
+    if (propsRenderDashboardContent) {
+      return propsRenderDashboardContent(msg);
+    }
+    let finalData = data;
+    if (filterCode) {
+      const filterFunc = new Function("data", filterCode);
+      finalData = filterFunc(data);
     }
-  ), w = (r) => {
-    const { data: t, filterCode: a, plotModuleName: N, plotVersion: v } = r;
-    if (n)
-      return n(r);
-    let l = t;
-    return a && (l = new Function("data", a)(t)), /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsxs("div", { children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         "组件名称：",
-        N
+        plotModuleName
       ] }),
-      /* @__PURE__ */ e.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         "组件版本：",
-        v
+        plotVersion
       ] }),
-      /* @__PURE__ */ e.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         "组件数据：",
-        l.slice(0, 5).map((d) => JSON.stringify(d))
+        finalData.slice(0, 5).map((i) => JSON.stringify(i))
       ] })
     ] });
   };
-  return /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: C(
+      className: classNames(
         "px-4 py-3 flex flex-col gap-3 rounded-lg",
         "bg-[#FFFFFF14] select-text",
-        m
+        className
       ),
       children: [
-        h.map((r, t) => typeof r == "string" ? /* @__PURE__ */ e.jsx("div", { className: "contents", children: j(r) }, t) : /* @__PURE__ */ e.jsx("div", { className: "contents", children: w(r) }, t)),
-        f && /* @__PURE__ */ e.jsx("div", { className: "flex gap-1", children: /* @__PURE__ */ e.jsx("div", { className: "copy-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer", children: /* @__PURE__ */ e.jsx(F, { className: "w-3.5 h-3.5 text-text-2", onClick: () => s == null ? void 0 : s() }) }) })
+        contents.map((msg, index) => {
+          if (typeof msg === "string") {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "contents", children: renderStringContent(msg) }, index);
+          } else {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "contents", children: renderDashboardContent(msg) }, index);
+          }
+        }),
+        showFooterButtons && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "copy-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyCircleOutlined, { className: "w-3.5 h-3.5 text-text-2", onClick: () => onCopy == null ? void 0 : onCopy() }) }) })
       ]
     }
   );
 };
 export {
-  B as AiMessageRender
+  AiMessageRender
 };
 //# sourceMappingURL=AiMessageRender.es.js.map

package/dist/components/AiMessageRender/AiMessageRender.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiMessageRender.es.js","sources":["../../../src/components/AiMessageRender/AiMessageRender.tsx"],"sourcesContent":["import { CopyCircleOutlined } from '@easyv/react-icons';\nimport classNames from 'classnames';\nimport Markdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { ShadowDom } from '../ShadowDom';\nimport messageRenderCss from './index.less?raw';\nimport { DashboardContext } from './types';\n\nexport interface AiMessageRenderProps {\n  className?: string;\n  contents: (string | DashboardContext)[];\n  renderDashboardContent?: (msg: DashboardContext) => React.ReactNode;\n  showFooterButtons?: boolean;\n  onCopy?: () => void;\n  onRedo?: () => void;\n  markdownClassName?: string;\n  rootFontSize?: number;\n  /**隐藏默认样式 */\n  hideDefaultStyle?: boolean;\n  markdownStyle?: string;\n}\n\nexport const AiMessageRender = (props: AiMessageRenderProps) => {\n  const {\n    className = '',\n    onCopy,\n    renderDashboardContent: propsRenderDashboardContent,\n    showFooterButtons = false,\n    contents,\n    markdownClassName = '',\n    rootFontSize,\n    hideDefaultStyle,\n    markdownStyle,\n  } = props;\n\n  let finalMarkdownStyle = hideDefaultStyle ? '' : messageRenderCss;\n  if (markdownStyle) {\n    finalMarkdownStyle += `\\n${markdownStyle}`;\n  }\n  const renderStringContent = (msg: string) => {\n    return (\n      <ShadowDom\n        style={finalMarkdownStyle}\n        shadowRootDivClassName={markdownClassName + ' markdown-container'}\n        rootFontSize={rootFontSize}\n      >\n        <Markdown remarkPlugins={[remarkGfm]}>{msg}</Markdown>\n      </ShadowDom>\n    );\n  };\n  const renderDashboardContent = (msg: DashboardContext) => {\n    const { data, filterCode, plotModuleName, plotVersion } = msg;\n    if (propsRenderDashboardContent) {\n      return propsRenderDashboardContent(msg);\n    }\n    let finalData = data;\n    if (filterCode) {\n      const filterFunc = new Function('data', filterCode);\n      finalData = filterFunc(data) as unknown[];\n    }\n    return (\n      <div>\n        <div>组件名称：{plotModuleName}</div>\n        <div>组件版本：{plotVersion}</div>\n        <div>组件数据：{finalData.slice(0, 5).map((i: unknown) => JSON.stringify(i))}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={classNames(\n        'px-4 py-3 flex flex-col gap-3 rounded-lg',\n        'bg-[#FFFFFF14] select-text',\n        className,\n      )}\n    >\n      {contents.map((msg, index) => {\n        if (typeof msg === 'string') {\n          return (\n            <div key={index} className='contents'>\n              {renderStringContent(msg)}\n            </div>\n          );\n        } else {\n          return (\n            <div key={index} className='contents'>\n              {renderDashboardContent(msg)}\n            </div>\n          );\n        }\n      })}\n      {showFooterButtons && (\n        <div className='flex gap-1'>\n          <div className='copy-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer'>\n            <CopyCircleOutlined className='w-3.5 h-3.5 text-text-2' onClick={() => onCopy?.()} />\n          </div>\n          {/* <div className='redo-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer'>\n            <RedoOutlined className='w-3.5 h-3.5 text-text-2' />\n          </div> */}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["AiMessageRender","props","className","onCopy","propsRenderDashboardContent","showFooterButtons","contents","markdownClassName","rootFontSize","hideDefaultStyle","markdownStyle","finalMarkdownStyle","messageRenderCss","renderStringContent","msg","jsx","ShadowDom","Markdown","remarkGfm","renderDashboardContent","data","filterCode","plotModuleName","plotVersion","finalData","jsxs","i","classNames","index","CopyCircleOutlined"],"mappings":";;;;;;;AAsBa,MAAAA,IAAkB,CAACC,MAAgC;AACxD,QAAA;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,wBAAwBC;AAAA,IACxB,mBAAAC,IAAoB;AAAA,IACpB,UAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,cAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACET;AAEA,MAAAU,IAAqBF,IAAmB,KAAKG;AACjD,EAAIF,MACoBC,KAAA;AAAA,EAAKD,CAAa;AAEpC,QAAAG,IAAsB,CAACC,MAEzBC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOL;AAAA,MACP,wBAAwBJ,IAAoB;AAAA,MAC5C,cAAAC;AAAA,MAEA,gCAACS,GAAS,EAAA,eAAe,CAACC,CAAS,GAAI,UAAIJ,EAAA,CAAA;AAAA,IAAA;AAAA,EAC7C,GAGEK,IAAyB,CAACL,MAA0B;AACxD,UAAM,EAAE,MAAAM,GAAM,YAAAC,GAAY,gBAAAC,GAAgB,aAAAC,EAAgB,IAAAT;AAC1D,QAAIV;AACF,aAAOA,EAA4BU,CAAG;AAExC,QAAIU,IAAYJ;AAChB,WAAIC,MAEFG,IADmB,IAAI,SAAS,QAAQH,CAAU,EAC3BD,CAAI,2BAG1B,OACC,EAAA,UAAA;AAAA,MAAAK,gBAAAA,OAAC,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAMH;AAAA,MAAA,GAAe;AAAA,6BACzB,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAMC;AAAA,MAAA,GAAY;AAAA,6BACtB,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAMC,EAAU,MAAM,GAAG,CAAC,EAAE,IAAI,CAACE,MAAe,KAAK,UAAUA,CAAC,CAAC;AAAA,MAAA,EAAE,CAAA;AAAA,IAAA,GAC1E;AAAA,EAEJ;AAGE,SAAAD,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAzB;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAASI,EAAA,IAAI,CAACQ,GAAKc,MACd,OAAOd,KAAQ,iCAEd,OAAgB,EAAA,WAAU,YACxB,UAAoBD,EAAAC,CAAG,KADhBc,CAEV,0BAIC,OAAgB,EAAA,WAAU,YACxB,UAAuBT,EAAAL,CAAG,KADnBc,CAEV,CAGL;AAAA,QACAvB,KACEU,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,cACb,UAAAA,gBAAAA,EAAA,IAAC,SAAI,WAAU,iGACb,UAACA,gBAAAA,EAAA,IAAAc,GAAA,EAAmB,WAAU,2BAA0B,SAAS,MAAM1B,KAAA,gBAAAA,KAAY,GACrF,EAIF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"AiMessageRender.es.js","sources":["../../../src/components/AiMessageRender/AiMessageRender.tsx"],"sourcesContent":["import { CopyCircleOutlined } from '@easyv/react-icons';\nimport classNames from 'classnames';\nimport Markdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { ShadowDom } from '../ShadowDom';\nimport messageRenderCss from './index.less?raw';\nimport { DashboardContext } from './types';\n\nexport interface AiMessageRenderProps {\n  className?: string;\n  contents: (string | DashboardContext)[];\n  renderDashboardContent?: (msg: DashboardContext) => React.ReactNode;\n  showFooterButtons?: boolean;\n  onCopy?: () => void;\n  onRedo?: () => void;\n  markdownClassName?: string;\n  rootFontSize?: number;\n  /**隐藏默认样式 */\n  hideDefaultStyle?: boolean;\n  markdownStyle?: string;\n}\n\nexport const AiMessageRender = (props: AiMessageRenderProps) => {\n  const {\n    className = '',\n    onCopy,\n    renderDashboardContent: propsRenderDashboardContent,\n    showFooterButtons = false,\n    contents,\n    markdownClassName = '',\n    rootFontSize,\n    hideDefaultStyle,\n    markdownStyle,\n  } = props;\n\n  let finalMarkdownStyle = hideDefaultStyle ? '' : messageRenderCss;\n  if (markdownStyle) {\n    finalMarkdownStyle += `\\n${markdownStyle}`;\n  }\n  const renderStringContent = (msg: string) => {\n    return (\n      <ShadowDom\n        style={finalMarkdownStyle}\n        shadowRootDivClassName={markdownClassName + ' markdown-container'}\n        rootFontSize={rootFontSize}\n      >\n        <Markdown remarkPlugins={[remarkGfm]}>{msg}</Markdown>\n      </ShadowDom>\n    );\n  };\n  const renderDashboardContent = (msg: DashboardContext) => {\n    const { data, filterCode, plotModuleName, plotVersion } = msg;\n    if (propsRenderDashboardContent) {\n      return propsRenderDashboardContent(msg);\n    }\n    let finalData = data;\n    if (filterCode) {\n      const filterFunc = new Function('data', filterCode);\n      finalData = filterFunc(data) as unknown[];\n    }\n    return (\n      <div>\n        <div>组件名称：{plotModuleName}</div>\n        <div>组件版本：{plotVersion}</div>\n        <div>组件数据：{finalData.slice(0, 5).map((i: unknown) => JSON.stringify(i))}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={classNames(\n        'px-4 py-3 flex flex-col gap-3 rounded-lg',\n        'bg-[#FFFFFF14] select-text',\n        className,\n      )}\n    >\n      {contents.map((msg, index) => {\n        if (typeof msg === 'string') {\n          return (\n            <div key={index} className='contents'>\n              {renderStringContent(msg)}\n            </div>\n          );\n        } else {\n          return (\n            <div key={index} className='contents'>\n              {renderDashboardContent(msg)}\n            </div>\n          );\n        }\n      })}\n      {showFooterButtons && (\n        <div className='flex gap-1'>\n          <div className='copy-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer'>\n            <CopyCircleOutlined className='w-3.5 h-3.5 text-text-2' onClick={() => onCopy?.()} />\n          </div>\n          {/* <div className='redo-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer'>\n            <RedoOutlined className='w-3.5 h-3.5 text-text-2' />\n          </div> */}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":";;;;;;;AAsBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,wBAAwB;AAAA,IACxB,oBAAoB;AAAA,IACpB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEA,MAAA,qBAAqB,mBAAmB,KAAK;AACjD,MAAI,eAAe;AACK,0BAAA;AAAA,EAAK,aAAa;AAAA,EAAA;AAEpC,QAAA,sBAAsB,CAAC,QAAgB;AAEzC,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,wBAAwB,oBAAoB;AAAA,QAC5C;AAAA,QAEA,gDAAC,UAAS,EAAA,eAAe,CAAC,SAAS,GAAI,UAAI,IAAA,CAAA;AAAA,MAAA;AAAA,IAC7C;AAAA,EAEJ;AACM,QAAA,yBAAyB,CAAC,QAA0B;AACxD,UAAM,EAAE,MAAM,YAAY,gBAAgB,YAAgB,IAAA;AAC1D,QAAI,6BAA6B;AAC/B,aAAO,4BAA4B,GAAG;AAAA,IAAA;AAExC,QAAI,YAAY;AAChB,QAAI,YAAY;AACd,YAAM,aAAa,IAAI,SAAS,QAAQ,UAAU;AAClD,kBAAY,WAAW,IAAI;AAAA,IAAA;AAE7B,kDACG,OACC,EAAA,UAAA;AAAA,MAAAC,uCAAC,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAM;AAAA,MAAA,GAAe;AAAA,6CACzB,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAM;AAAA,MAAA,GAAY;AAAA,6CACtB,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAM,UAAU,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,MAAe,KAAK,UAAU,CAAC,CAAC;AAAA,MAAA,EAAE,CAAA;AAAA,IAAA,GAC1E;AAAA,EAEJ;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAAS,SAAA,IAAI,CAAC,KAAK,UAAU;AACxB,cAAA,OAAO,QAAQ,UAAU;AAC3B,yDACG,OAAgB,EAAA,WAAU,YACxB,UAAoB,oBAAA,GAAG,KADhB,KAEV;AAAA,UAAA,OAEG;AACL,yDACG,OAAgB,EAAA,WAAU,YACxB,UAAuB,uBAAA,GAAG,KADnB,KAEV;AAAA,UAAA;AAAA,QAEJ,CACD;AAAA,QACA,qBACED,kCAAAA,IAAA,OAAA,EAAI,WAAU,cACb,UAAAA,kCAAA,IAAC,SAAI,WAAU,iGACb,UAACA,kCAAA,IAAA,oBAAA,EAAmB,WAAU,2BAA0B,SAAS,MAAM,oCAAY,GACrF,EAIF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/components/AiMessageRender/index.less.es.js

@@ -1,194 +1,5 @@
-const n = `.markdown-container {
-  /* // 基础文本样式 */
-  color: #fff;
-  font-family: 'PingFang SC', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  line-height: 1.6;
-  font-size: var(--base-font);
-  font-style: normal;
-  font-weight: 400;
-  user-select: text;
-  word-break: break-all;
-}
-
-/* // 重置一些元素的默认样式 */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-img {
-  max-width: 50%;
-  border-radius: calc(0.5 * var(--base-font));
-}
-
-/* // 标题样式 */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: calc(1.5 * var(--base-font));
-  margin-bottom: calc(1.5 * var(--base-font));
-  font-weight: 600;
-  line-height: 1.25;
-  color: #fff;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-h1 {
-  font-size: calc(2 * var(--base-font));
-  border-bottom: 1px solid #eaecef;
-  padding-bottom: calc(0.3 * var(--base-font));
-}
-
-h2 {
-  font-size: calc(1.5 * var(--base-font));
-  border-bottom: 1px solid #eaecef;
-  padding-bottom: calc(0.3 * var(--base-font));
-}
-
-h3 {
-  font-size: calc(1.25 * var(--base-font));
-}
-h4 {
-  font-size: var(--base-font);
-}
-h5 {
-  font-size: calc(0.875 * var(--base-font));
-}
-h6 {
-  font-size: calc(0.85 * var(--base-font));
-  color: #6a737d;
-}
-
-strong {
-  font-weight: 600;
-}
-
-em {
-  font-style: italic;
-}
-
-/* // 链接 */
-a {
-  color: #0366d6;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-/* // 列表 */
-ul,
-ol {
-  margin-bottom: var(--base-font);
-  padding-left: calc(2 * var(--base-font));
-}
-
-li {
-  margin-bottom: calc(0.25 * var(--base-font));
-
-  > p {
-    margin: 0;
-  }
-}
-
-/* // 代码块和内联代码 */
-pre {
-  background-color: #fafafa;
-  border-radius: calc(0.3 * var(--base-font));
-  padding: var(--base-font);
-  overflow: auto;
-  margin-bottom: var(--base-font);
-  line-height: 1.45;
-  overflow-x: auto;
-
-  code {
-    color: #494949;
-    background-color: transparent;
-    padding: 0;
-    border-radius: 0;
-    border: none;
-  }
-}
-
-code {
-  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  background-color: #ececec;
-  color: #404040;
-  border-radius: calc(0.25 * var(--base-font));
-  padding: calc(0.15 * var(--base-font)) calc(0.3 * var(--base-font));
-  margin: 0 calc(0.15 * var(--base-font));
-  font-size: calc(0.875 * var(--base-font));
-}
-
-/* // 表格样式 */
-table {
-  border-collapse: collapse;
-  width: 100%;
-  margin-bottom: var(--base-font);
-  display: block;
-  overflow-x: auto;
-  color: #4a4e55;
-}
-table th,
-table td {
-  padding: calc(0.75 * var(--base-font)) var(--base-font);
-  border: 1px solid #dfe2e5;
-}
-
-table th {
-  background-color: #f6f8fa;
-  font-weight: 600;
-  text-align: left;
-}
-
-table tr {
-  background-color: #fff;
-  border-top: 1px solid #c6cbd1;
-
-  &:nth-child(2n) {
-    background-color: #f6f8fa;
-  }
-}
-
-/* // 引用块 */
-blockquote {
-  border-left: calc(0.25 * var(--base-font)) solid #dfe2e5;
-  color: #fff;
-  padding: 0 var(--base-font);
-  margin: 0 0 var(--base-font) 0;
-
-  p {
-    margin: 0;
-  }
-}
-
-/* // 水平线 */
-hr {
-  height: 1px;
-  background-color: #e1e4e8;
-  border: 0;
-  margin: calc(1.5 * var(--base-font)) 0;
-}
-
-/* // 任务列表 */
-.task-list-item {
-  list-style-type: none;
-
-  input[type='checkbox'] {
-    margin: 0 0calc (2 * var(--base-font)) calc(0.25 * var(--base-font)) -1.6em;
-    vertical-align: middle;
-  }
-}
-`;
+const messageRenderCss = ".markdown-container {\n  /* // 基础文本样式 */\n  color: #fff;\n  font-family: 'PingFang SC', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  line-height: 1.6;\n  font-size: var(--base-font);\n  font-style: normal;\n  font-weight: 400;\n  user-select: text;\n  word-break: break-all;\n}\n\n/* // 重置一些元素的默认样式 */\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nimg {\n  max-width: 50%;\n  border-radius: calc(0.5 * var(--base-font));\n}\n\n/* // 标题样式 */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: calc(1.5 * var(--base-font));\n  margin-bottom: calc(1.5 * var(--base-font));\n  font-weight: 600;\n  line-height: 1.25;\n  color: #fff;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\nh1 {\n  font-size: calc(2 * var(--base-font));\n  border-bottom: 1px solid #eaecef;\n  padding-bottom: calc(0.3 * var(--base-font));\n}\n\nh2 {\n  font-size: calc(1.5 * var(--base-font));\n  border-bottom: 1px solid #eaecef;\n  padding-bottom: calc(0.3 * var(--base-font));\n}\n\nh3 {\n  font-size: calc(1.25 * var(--base-font));\n}\nh4 {\n  font-size: var(--base-font);\n}\nh5 {\n  font-size: calc(0.875 * var(--base-font));\n}\nh6 {\n  font-size: calc(0.85 * var(--base-font));\n  color: #6a737d;\n}\n\nstrong {\n  font-weight: 600;\n}\n\nem {\n  font-style: italic;\n}\n\n/* // 链接 */\na {\n  color: #0366d6;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n/* // 列表 */\nul,\nol {\n  margin-bottom: var(--base-font);\n  padding-left: calc(2 * var(--base-font));\n}\n\nli {\n  margin-bottom: calc(0.25 * var(--base-font));\n\n  > p {\n    margin: 0;\n  }\n}\n\n/* // 代码块和内联代码 */\npre {\n  background-color: #fafafa;\n  border-radius: calc(0.3 * var(--base-font));\n  padding: var(--base-font);\n  overflow: auto;\n  margin-bottom: var(--base-font);\n  line-height: 1.45;\n  overflow-x: auto;\n\n  code {\n    color: #494949;\n    background-color: transparent;\n    padding: 0;\n    border-radius: 0;\n    border: none;\n  }\n}\n\ncode {\n  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n  background-color: #ececec;\n  color: #404040;\n  border-radius: calc(0.25 * var(--base-font));\n  padding: calc(0.15 * var(--base-font)) calc(0.3 * var(--base-font));\n  margin: 0 calc(0.15 * var(--base-font));\n  font-size: calc(0.875 * var(--base-font));\n}\n\n/* // 表格样式 */\ntable {\n  border-collapse: collapse;\n  width: 100%;\n  margin-bottom: var(--base-font);\n  display: block;\n  overflow-x: auto;\n  color: #4a4e55;\n}\ntable th,\ntable td {\n  padding: calc(0.75 * var(--base-font)) var(--base-font);\n  border: 1px solid #dfe2e5;\n}\n\ntable th {\n  background-color: #f6f8fa;\n  font-weight: 600;\n  text-align: left;\n}\n\ntable tr {\n  background-color: #fff;\n  border-top: 1px solid #c6cbd1;\n\n  &:nth-child(2n) {\n    background-color: #f6f8fa;\n  }\n}\n\n/* // 引用块 */\nblockquote {\n  border-left: calc(0.25 * var(--base-font)) solid #dfe2e5;\n  color: #fff;\n  padding: 0 var(--base-font);\n  margin: 0 0 var(--base-font) 0;\n\n  p {\n    margin: 0;\n  }\n}\n\n/* // 水平线 */\nhr {\n  height: 1px;\n  background-color: #e1e4e8;\n  border: 0;\n  margin: calc(1.5 * var(--base-font)) 0;\n}\n\n/* // 任务列表 */\n.task-list-item {\n  list-style-type: none;\n\n  input[type='checkbox'] {\n    margin: 0 0calc (2 * var(--base-font)) calc(0.25 * var(--base-font)) -1.6em;\n    vertical-align: middle;\n  }\n}\n";
 export {
-  n as default
+  messageRenderCss as default
 };
 //# sourceMappingURL=index.less.es.js.map

package/dist/components/AiMessageRender/index.less.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.less.es.js","sources":["../../../src/components/AiMessageRender/index.less?raw"],"sourcesContent":["export default \".markdown-container {\\n  /* // 基础文本样式 */\\n  color: #fff;\\n  font-family: 'PingFang SC', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\\n  line-height: 1.6;\\n  font-size: var(--base-font);\\n  font-style: normal;\\n  font-weight: 400;\\n  user-select: text;\\n  word-break: break-all;\\n}\\n\\n/* // 重置一些元素的默认样式 */\\n* {\\n  box-sizing: border-box;\\n  margin: 0;\\n  padding: 0;\\n}\\n\\nimg {\\n  max-width: 50%;\\n  border-radius: calc(0.5 * var(--base-font));\\n}\\n\\n/* // 标题样式 */\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6 {\\n  margin-top: calc(1.5 * var(--base-font));\\n  margin-bottom: calc(1.5 * var(--base-font));\\n  font-weight: 600;\\n  line-height: 1.25;\\n  color: #fff;\\n\\n  &:first-child {\\n    margin-top: 0;\\n  }\\n}\\n\\nh1 {\\n  font-size: calc(2 * var(--base-font));\\n  border-bottom: 1px solid #eaecef;\\n  padding-bottom: calc(0.3 * var(--base-font));\\n}\\n\\nh2 {\\n  font-size: calc(1.5 * var(--base-font));\\n  border-bottom: 1px solid #eaecef;\\n  padding-bottom: calc(0.3 * var(--base-font));\\n}\\n\\nh3 {\\n  font-size: calc(1.25 * var(--base-font));\\n}\\nh4 {\\n  font-size: var(--base-font);\\n}\\nh5 {\\n  font-size: calc(0.875 * var(--base-font));\\n}\\nh6 {\\n  font-size: calc(0.85 * var(--base-font));\\n  color: #6a737d;\\n}\\n\\nstrong {\\n  font-weight: 600;\\n}\\n\\nem {\\n  font-style: italic;\\n}\\n\\n/* // 链接 */\\na {\\n  color: #0366d6;\\n  text-decoration: none;\\n\\n  &:hover {\\n    text-decoration: underline;\\n  }\\n}\\n\\n/* // 列表 */\\nul,\\nol {\\n  margin-bottom: var(--base-font);\\n  padding-left: calc(2 * var(--base-font));\\n}\\n\\nli {\\n  margin-bottom: calc(0.25 * var(--base-font));\\n\\n  > p {\\n    margin: 0;\\n  }\\n}\\n\\n/* // 代码块和内联代码 */\\npre {\\n  background-color: #fafafa;\\n  border-radius: calc(0.3 * var(--base-font));\\n  padding: var(--base-font);\\n  overflow: auto;\\n  margin-bottom: var(--base-font);\\n  line-height: 1.45;\\n  overflow-x: auto;\\n\\n  code {\\n    color: #494949;\\n    background-color: transparent;\\n    padding: 0;\\n    border-radius: 0;\\n    border: none;\\n  }\\n}\\n\\ncode {\\n  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\\n  background-color: #ececec;\\n  color: #404040;\\n  border-radius: calc(0.25 * var(--base-font));\\n  padding: calc(0.15 * var(--base-font)) calc(0.3 * var(--base-font));\\n  margin: 0 calc(0.15 * var(--base-font));\\n  font-size: calc(0.875 * var(--base-font));\\n}\\n\\n/* // 表格样式 */\\ntable {\\n  border-collapse: collapse;\\n  width: 100%;\\n  margin-bottom: var(--base-font);\\n  display: block;\\n  overflow-x: auto;\\n  color: #4a4e55;\\n}\\ntable th,\\ntable td {\\n  padding: calc(0.75 * var(--base-font)) var(--base-font);\\n  border: 1px solid #dfe2e5;\\n}\\n\\ntable th {\\n  background-color: #f6f8fa;\\n  font-weight: 600;\\n  text-align: left;\\n}\\n\\ntable tr {\\n  background-color: #fff;\\n  border-top: 1px solid #c6cbd1;\\n\\n  &:nth-child(2n) {\\n    background-color: #f6f8fa;\\n  }\\n}\\n\\n/* // 引用块 */\\nblockquote {\\n  border-left: calc(0.25 * var(--base-font)) solid #dfe2e5;\\n  color: #fff;\\n  padding: 0 var(--base-font);\\n  margin: 0 0 var(--base-font) 0;\\n\\n  p {\\n    margin: 0;\\n  }\\n}\\n\\n/* // 水平线 */\\nhr {\\n  height: 1px;\\n  background-color: #e1e4e8;\\n  border: 0;\\n  margin: calc(1.5 * var(--base-font)) 0;\\n}\\n\\n/* // 任务列表 */\\n.task-list-item {\\n  list-style-type: none;\\n\\n  input[type='checkbox'] {\\n    margin: 0 0calc (2 * var(--base-font)) calc(0.25 * var(--base-font)) -1.6em;\\n    vertical-align: middle;\\n  }\\n}\\n\""],"names":["messageRenderCss"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"index.less.es.js","sources":["../../../src/components/AiMessageRender/index.less?raw"],"sourcesContent":["export default \".markdown-container {\\n  /* // 基础文本样式 */\\n  color: #fff;\\n  font-family: 'PingFang SC', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\\n  line-height: 1.6;\\n  font-size: var(--base-font);\\n  font-style: normal;\\n  font-weight: 400;\\n  user-select: text;\\n  word-break: break-all;\\n}\\n\\n/* // 重置一些元素的默认样式 */\\n* {\\n  box-sizing: border-box;\\n  margin: 0;\\n  padding: 0;\\n}\\n\\nimg {\\n  max-width: 50%;\\n  border-radius: calc(0.5 * var(--base-font));\\n}\\n\\n/* // 标题样式 */\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6 {\\n  margin-top: calc(1.5 * var(--base-font));\\n  margin-bottom: calc(1.5 * var(--base-font));\\n  font-weight: 600;\\n  line-height: 1.25;\\n  color: #fff;\\n\\n  &:first-child {\\n    margin-top: 0;\\n  }\\n}\\n\\nh1 {\\n  font-size: calc(2 * var(--base-font));\\n  border-bottom: 1px solid #eaecef;\\n  padding-bottom: calc(0.3 * var(--base-font));\\n}\\n\\nh2 {\\n  font-size: calc(1.5 * var(--base-font));\\n  border-bottom: 1px solid #eaecef;\\n  padding-bottom: calc(0.3 * var(--base-font));\\n}\\n\\nh3 {\\n  font-size: calc(1.25 * var(--base-font));\\n}\\nh4 {\\n  font-size: var(--base-font);\\n}\\nh5 {\\n  font-size: calc(0.875 * var(--base-font));\\n}\\nh6 {\\n  font-size: calc(0.85 * var(--base-font));\\n  color: #6a737d;\\n}\\n\\nstrong {\\n  font-weight: 600;\\n}\\n\\nem {\\n  font-style: italic;\\n}\\n\\n/* // 链接 */\\na {\\n  color: #0366d6;\\n  text-decoration: none;\\n\\n  &:hover {\\n    text-decoration: underline;\\n  }\\n}\\n\\n/* // 列表 */\\nul,\\nol {\\n  margin-bottom: var(--base-font);\\n  padding-left: calc(2 * var(--base-font));\\n}\\n\\nli {\\n  margin-bottom: calc(0.25 * var(--base-font));\\n\\n  > p {\\n    margin: 0;\\n  }\\n}\\n\\n/* // 代码块和内联代码 */\\npre {\\n  background-color: #fafafa;\\n  border-radius: calc(0.3 * var(--base-font));\\n  padding: var(--base-font);\\n  overflow: auto;\\n  margin-bottom: var(--base-font);\\n  line-height: 1.45;\\n  overflow-x: auto;\\n\\n  code {\\n    color: #494949;\\n    background-color: transparent;\\n    padding: 0;\\n    border-radius: 0;\\n    border: none;\\n  }\\n}\\n\\ncode {\\n  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\\n  background-color: #ececec;\\n  color: #404040;\\n  border-radius: calc(0.25 * var(--base-font));\\n  padding: calc(0.15 * var(--base-font)) calc(0.3 * var(--base-font));\\n  margin: 0 calc(0.15 * var(--base-font));\\n  font-size: calc(0.875 * var(--base-font));\\n}\\n\\n/* // 表格样式 */\\ntable {\\n  border-collapse: collapse;\\n  width: 100%;\\n  margin-bottom: var(--base-font);\\n  display: block;\\n  overflow-x: auto;\\n  color: #4a4e55;\\n}\\ntable th,\\ntable td {\\n  padding: calc(0.75 * var(--base-font)) var(--base-font);\\n  border: 1px solid #dfe2e5;\\n}\\n\\ntable th {\\n  background-color: #f6f8fa;\\n  font-weight: 600;\\n  text-align: left;\\n}\\n\\ntable tr {\\n  background-color: #fff;\\n  border-top: 1px solid #c6cbd1;\\n\\n  &:nth-child(2n) {\\n    background-color: #f6f8fa;\\n  }\\n}\\n\\n/* // 引用块 */\\nblockquote {\\n  border-left: calc(0.25 * var(--base-font)) solid #dfe2e5;\\n  color: #fff;\\n  padding: 0 var(--base-font);\\n  margin: 0 0 var(--base-font) 0;\\n\\n  p {\\n    margin: 0;\\n  }\\n}\\n\\n/* // 水平线 */\\nhr {\\n  height: 1px;\\n  background-color: #e1e4e8;\\n  border: 0;\\n  margin: calc(1.5 * var(--base-font)) 0;\\n}\\n\\n/* // 任务列表 */\\n.task-list-item {\\n  list-style-type: none;\\n\\n  input[type='checkbox'] {\\n    margin: 0 0calc (2 * var(--base-font)) calc(0.25 * var(--base-font)) -1.6em;\\n    vertical-align: middle;\\n  }\\n}\\n\""],"names":[],"mappings":"AAAA,MAAe,mBAAA;"}

package/dist/components/ScrollController/ScrollController.es.js

@@ -1,42 +1,65 @@
-import { j as v } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { useState as E, useRef as l, useCallback as s, useEffect as S } from "react";
-function R(d) {
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+function ScrollController(props) {
   const {
-    children: i,
-    containerHeight: p = "100%",
-    scrollBuffer: u = 50,
-    scrollBehavior: o = "smooth",
-    className: g
-  } = d, [a, f] = E(!0), r = l(null), t = l(!1), n = l(), h = s(() => {
-    if (!r.current) return !1;
-    const { scrollHeight: e, scrollTop: T, clientHeight: j } = r.current;
-    return e - T - j < u;
-  }, [u]), m = s(() => {
-    a && r.current && r.current.scrollTo({
-      top: r.current.scrollHeight,
-      behavior: o
-    });
-  }, [a, o]), c = s(() => {
-    r.current && (n.current && clearTimeout(n.current), t.current || (t.current = !0), n.current = setTimeout(() => {
-      t.current = !1;
-    }, 100), h() ? f(!0) : f(!1));
-  }, [h]);
-  S(() => {
-    const e = r.current;
-    if (e)
-      return e.addEventListener("scroll", c), () => e.removeEventListener("scroll", c);
-  }, [c]), S(() => {
-    t.current || m();
-  }, [i, m]);
-  const x = {
-    height: p,
+    children,
+    containerHeight = "100%",
+    scrollBuffer = 50,
+    scrollBehavior = "smooth",
+    className
+  } = props;
+  const [isAutoScroll, setIsAutoScroll] = useState(true);
+  const containerRef = useRef(null);
+  const isUserScrolling = useRef(false);
+  const scrollTimeout = useRef();
+  const isNearBottom = useCallback(() => {
+    if (!containerRef.current) return false;
+    const { scrollHeight, scrollTop, clientHeight } = containerRef.current;
+    return scrollHeight - scrollTop - clientHeight < scrollBuffer;
+  }, [scrollBuffer]);
+  const autoScroll = useCallback(() => {
+    if (isAutoScroll && containerRef.current) {
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior: scrollBehavior
+      });
+    }
+  }, [isAutoScroll, scrollBehavior]);
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
+    if (!isUserScrolling.current) {
+      isUserScrolling.current = true;
+    }
+    scrollTimeout.current = setTimeout(() => {
+      isUserScrolling.current = false;
+    }, 100);
+    if (isNearBottom()) {
+      setIsAutoScroll(true);
+    } else {
+      setIsAutoScroll(false);
+    }
+  }, [isNearBottom]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+  useEffect(() => {
+    if (!isUserScrolling.current) {
+      autoScroll();
+    }
+  }, [children, autoScroll]);
+  const containerStyle = {
+    height: containerHeight,
     overflowY: "auto",
-    scrollBehavior: o,
+    scrollBehavior,
     position: "relative"
   };
-  return /* @__PURE__ */ v.jsx("div", { ref: r, style: x, className: g, children: /* @__PURE__ */ v.jsx("div", { children: i }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: containerRef, style: containerStyle, className, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children }) });
 }
 export {
-  R as ScrollController
+  ScrollController
 };
 //# sourceMappingURL=ScrollController.es.js.map

package/dist/components/ScrollController/ScrollController.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollController.es.js","sources":["../../../src/components/ScrollController/ScrollController.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\ninterface ScrollControllerProps {\n  children: ReactNode;\n  containerHeight?: string;\n  scrollBuffer?: number;\n  scrollBehavior?: 'auto' | 'smooth';\n  className?: string;\n}\n\nexport function ScrollController(props: ScrollControllerProps) {\n  const {\n    children,\n    containerHeight = '100%',\n    scrollBuffer = 50,\n    scrollBehavior = 'smooth',\n    className,\n  } = props;\n  const [isAutoScroll, setIsAutoScroll] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const isUserScrolling = useRef(false);\n  const scrollTimeout = useRef<NodeJS.Timeout>();\n\n  // 检测是否接近底部\n  const isNearBottom = useCallback(() => {\n    if (!containerRef.current) return false;\n    const { scrollHeight, scrollTop, clientHeight } = containerRef.current;\n    return scrollHeight - scrollTop - clientHeight < scrollBuffer;\n  }, [scrollBuffer]);\n\n  // 自动滚动逻辑\n  const autoScroll = useCallback(() => {\n    if (isAutoScroll && containerRef.current) {\n      containerRef.current.scrollTo({\n        top: containerRef.current.scrollHeight,\n        behavior: scrollBehavior,\n      });\n    }\n  }, [isAutoScroll, scrollBehavior]);\n\n  // 处理滚动事件\n  const handleScroll = useCallback(() => {\n    if (!containerRef.current) return;\n\n    // 清除之前的定时器\n    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n    // 标记用户滚动行为\n    if (!isUserScrolling.current) {\n      isUserScrolling.current = true;\n    }\n\n    // 设置滚动状态重置\n    scrollTimeout.current = setTimeout(() => {\n      isUserScrolling.current = false;\n    }, 100);\n\n    // 判断是否接近底部\n    if (isNearBottom()) {\n      setIsAutoScroll(true);\n    } else {\n      setIsAutoScroll(false);\n    }\n  }, [isNearBottom]);\n\n  // 初始化事件监听\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.addEventListener('scroll', handleScroll);\n    return () => container.removeEventListener('scroll', handleScroll);\n  }, [handleScroll]);\n\n  // 内容变化时自动滚动\n  useEffect(() => {\n    if (!isUserScrolling.current) {\n      autoScroll();\n    }\n  }, [children, autoScroll]);\n\n  // 容器样式\n  const containerStyle: CSSProperties = {\n    height: containerHeight,\n    overflowY: 'auto',\n    scrollBehavior: scrollBehavior,\n    position: 'relative',\n  };\n\n  return (\n    <div ref={containerRef} style={containerStyle} className={className}>\n      <div>{children}</div>\n    </div>\n  );\n}\n"],"names":["ScrollController","props","children","containerHeight","scrollBuffer","scrollBehavior","className","isAutoScroll","setIsAutoScroll","useState","containerRef","useRef","isUserScrolling","scrollTimeout","isNearBottom","useCallback","scrollHeight","scrollTop","clientHeight","autoScroll","handleScroll","useEffect","container","containerStyle","jsx"],"mappings":";;AAUO,SAASA,EAAiBC,GAA8B;AACvD,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,cAAAC,IAAe;AAAA,IACf,gBAAAC,IAAiB;AAAA,IACjB,WAAAC;AAAA,EAAA,IACEL,GACE,CAACM,GAAcC,CAAe,IAAIC,EAAS,EAAI,GAC/CC,IAAeC,EAAuB,IAAI,GAC1CC,IAAkBD,EAAO,EAAK,GAC9BE,IAAgBF,EAAuB,GAGvCG,IAAeC,EAAY,MAAM;AACjC,QAAA,CAACL,EAAa,QAAgB,QAAA;AAClC,UAAM,EAAE,cAAAM,GAAc,WAAAC,GAAW,cAAAC,MAAiBR,EAAa;AACxD,WAAAM,IAAeC,IAAYC,IAAed;AAAA,EAAA,GAChD,CAACA,CAAY,CAAC,GAGXe,IAAaJ,EAAY,MAAM;AAC/B,IAAAR,KAAgBG,EAAa,WAC/BA,EAAa,QAAQ,SAAS;AAAA,MAC5B,KAAKA,EAAa,QAAQ;AAAA,MAC1B,UAAUL;AAAA,IAAA,CACX;AAAA,EACH,GACC,CAACE,GAAcF,CAAc,CAAC,GAG3Be,IAAeL,EAAY,MAAM;AACjC,IAACL,EAAa,YAGdG,EAAc,WAAsB,aAAAA,EAAc,OAAO,GAGxDD,EAAgB,YACnBA,EAAgB,UAAU,KAIdC,EAAA,UAAU,WAAW,MAAM;AACvC,MAAAD,EAAgB,UAAU;AAAA,OACzB,GAAG,GAGFE,MACFN,EAAgB,EAAI,IAEpBA,EAAgB,EAAK;AAAA,EACvB,GACC,CAACM,CAAY,CAAC;AAGjB,EAAAO,EAAU,MAAM;AACd,UAAMC,IAAYZ,EAAa;AAC/B,QAAKY;AAEK,aAAAA,EAAA,iBAAiB,UAAUF,CAAY,GAC1C,MAAME,EAAU,oBAAoB,UAAUF,CAAY;AAAA,EAAA,GAChE,CAACA,CAAY,CAAC,GAGjBC,EAAU,MAAM;AACV,IAACT,EAAgB,WACRO,EAAA;AAAA,EACb,GACC,CAACjB,GAAUiB,CAAU,CAAC;AAGzB,QAAMI,IAAgC;AAAA,IACpC,QAAQpB;AAAA,IACR,WAAW;AAAA,IACX,gBAAAE;AAAA,IACA,UAAU;AAAA,EACZ;AAGE,SAAAmB,gBAAAA,EAAA,IAAC,OAAI,EAAA,KAAKd,GAAc,OAAOa,GAAgB,WAAAjB,GAC7C,UAAAkB,gBAAAA,EAAAA,IAAC,OAAK,EAAA,UAAAtB,EAAA,CAAS,EACjB,CAAA;AAEJ;"}
+{"version":3,"file":"ScrollController.es.js","sources":["../../../src/components/ScrollController/ScrollController.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\ninterface ScrollControllerProps {\n  children: ReactNode;\n  containerHeight?: string;\n  scrollBuffer?: number;\n  scrollBehavior?: 'auto' | 'smooth';\n  className?: string;\n}\n\nexport function ScrollController(props: ScrollControllerProps) {\n  const {\n    children,\n    containerHeight = '100%',\n    scrollBuffer = 50,\n    scrollBehavior = 'smooth',\n    className,\n  } = props;\n  const [isAutoScroll, setIsAutoScroll] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const isUserScrolling = useRef(false);\n  const scrollTimeout = useRef<NodeJS.Timeout>();\n\n  // 检测是否接近底部\n  const isNearBottom = useCallback(() => {\n    if (!containerRef.current) return false;\n    const { scrollHeight, scrollTop, clientHeight } = containerRef.current;\n    return scrollHeight - scrollTop - clientHeight < scrollBuffer;\n  }, [scrollBuffer]);\n\n  // 自动滚动逻辑\n  const autoScroll = useCallback(() => {\n    if (isAutoScroll && containerRef.current) {\n      containerRef.current.scrollTo({\n        top: containerRef.current.scrollHeight,\n        behavior: scrollBehavior,\n      });\n    }\n  }, [isAutoScroll, scrollBehavior]);\n\n  // 处理滚动事件\n  const handleScroll = useCallback(() => {\n    if (!containerRef.current) return;\n\n    // 清除之前的定时器\n    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n    // 标记用户滚动行为\n    if (!isUserScrolling.current) {\n      isUserScrolling.current = true;\n    }\n\n    // 设置滚动状态重置\n    scrollTimeout.current = setTimeout(() => {\n      isUserScrolling.current = false;\n    }, 100);\n\n    // 判断是否接近底部\n    if (isNearBottom()) {\n      setIsAutoScroll(true);\n    } else {\n      setIsAutoScroll(false);\n    }\n  }, [isNearBottom]);\n\n  // 初始化事件监听\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.addEventListener('scroll', handleScroll);\n    return () => container.removeEventListener('scroll', handleScroll);\n  }, [handleScroll]);\n\n  // 内容变化时自动滚动\n  useEffect(() => {\n    if (!isUserScrolling.current) {\n      autoScroll();\n    }\n  }, [children, autoScroll]);\n\n  // 容器样式\n  const containerStyle: CSSProperties = {\n    height: containerHeight,\n    overflowY: 'auto',\n    scrollBehavior: scrollBehavior,\n    position: 'relative',\n  };\n\n  return (\n    <div ref={containerRef} style={containerStyle} className={className}>\n      <div>{children}</div>\n    </div>\n  );\n}\n"],"names":["jsx"],"mappings":";;AAUO,SAAS,iBAAiB,OAA8B;AACvD,QAAA;AAAA,IACJ;AAAA,IACA,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB;AAAA,EAAA,IACE;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AAC/C,QAAA,eAAe,OAAuB,IAAI;AAC1C,QAAA,kBAAkB,OAAO,KAAK;AACpC,QAAM,gBAAgB,OAAuB;AAGvC,QAAA,eAAe,YAAY,MAAM;AACjC,QAAA,CAAC,aAAa,QAAgB,QAAA;AAClC,UAAM,EAAE,cAAc,WAAW,iBAAiB,aAAa;AACxD,WAAA,eAAe,YAAY,eAAe;AAAA,EAAA,GAChD,CAAC,YAAY,CAAC;AAGX,QAAA,aAAa,YAAY,MAAM;AAC/B,QAAA,gBAAgB,aAAa,SAAS;AACxC,mBAAa,QAAQ,SAAS;AAAA,QAC5B,KAAK,aAAa,QAAQ;AAAA,QAC1B,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EACH,GACC,CAAC,cAAc,cAAc,CAAC;AAG3B,QAAA,eAAe,YAAY,MAAM;AACjC,QAAA,CAAC,aAAa,QAAS;AAG3B,QAAI,cAAc,QAAsB,cAAA,cAAc,OAAO;AAGzD,QAAA,CAAC,gBAAgB,SAAS;AAC5B,sBAAgB,UAAU;AAAA,IAAA;AAId,kBAAA,UAAU,WAAW,MAAM;AACvC,sBAAgB,UAAU;AAAA,OACzB,GAAG;AAGN,QAAI,gBAAgB;AAClB,sBAAgB,IAAI;AAAA,IAAA,OACf;AACL,sBAAgB,KAAK;AAAA,IAAA;AAAA,EACvB,GACC,CAAC,YAAY,CAAC;AAGjB,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEN,cAAA,iBAAiB,UAAU,YAAY;AACjD,WAAO,MAAM,UAAU,oBAAoB,UAAU,YAAY;AAAA,EAAA,GAChE,CAAC,YAAY,CAAC;AAGjB,YAAU,MAAM;AACV,QAAA,CAAC,gBAAgB,SAAS;AACjB,iBAAA;AAAA,IAAA;AAAA,EACb,GACC,CAAC,UAAU,UAAU,CAAC;AAGzB,QAAM,iBAAgC;AAAA,IACpC,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,EACZ;AAGE,SAAAA,kCAAA,IAAC,OAAI,EAAA,KAAK,cAAc,OAAO,gBAAgB,WAC7C,UAAAA,kCAAAA,IAAC,OAAK,EAAA,SAAA,CAAS,EACjB,CAAA;AAEJ;"}

package/dist/components/ShadowDom/ShadowDom.es.js

@@ -1,27 +1,35 @@
-import { j as s } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { useRef as f, useState as m, useEffect as d } from "react";
-import { createPortal as u } from "react-dom";
-const y = (c) => {
-  const { children: r, style: n, shadowRootDivClassName: a = "", rootFontSize: e = 16 } = c, t = f(null), [o, h] = m();
-  return d(() => {
-    if (t.current && !t.current.shadowRoot) {
-      const i = t.current.shadowRoot || t.current.attachShadow({ mode: "open" });
-      i.innerHTML = `
-        <style>${n}</style>
-        <div data-shadow-container class="${a}"></div>
-      `, setTimeout(() => {
-        const l = i.querySelector("[data-shadow-container]");
-        h(l);
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useRef, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+const ShadowDom = (props) => {
+  const { children, style, shadowRootDivClassName = "", rootFontSize = 16 } = props;
+  const shadowRef = useRef(null);
+  const [shadowContainer, setShadowContainer] = useState();
+  useEffect(() => {
+    if (shadowRef.current && !shadowRef.current.shadowRoot) {
+      const shadowRoot = shadowRef.current.shadowRoot || shadowRef.current.attachShadow({ mode: "open" });
+      shadowRoot.innerHTML = `
+        <style>${style}</style>
+        <div data-shadow-container class="${shadowRootDivClassName}"></div>
+      `;
+      setTimeout(() => {
+        const shadowContainerInner = shadowRoot.querySelector("[data-shadow-container]");
+        setShadowContainer(shadowContainerInner);
       }, 0);
     }
-  }, [r, n, a]), d(() => {
-    o && (o.style.fontSize = `${e}px`, o.style.setProperty("--base-font", `${e}px`));
-  }, [e, o]), /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-    o && u(r, o),
-    /* @__PURE__ */ s.jsx("div", { ref: t })
+  }, [children, style, shadowRootDivClassName]);
+  useEffect(() => {
+    if (shadowContainer) {
+      shadowContainer.style.fontSize = `${rootFontSize}px`;
+      shadowContainer.style.setProperty("--base-font", `${rootFontSize}px`);
+    }
+  }, [rootFontSize, shadowContainer]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    shadowContainer && createPortal(children, shadowContainer),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: shadowRef })
   ] });
 };
 export {
-  y as ShadowDom
+  ShadowDom
 };
 //# sourceMappingURL=ShadowDom.es.js.map

package/dist/components/ShadowDom/ShadowDom.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShadowDom.es.js","sources":["../../../src/components/ShadowDom/ShadowDom.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface ShadowDomProps {\n  style: string;\n  shadowRootDivClassName?: string;\n  rootFontSize?: number;\n}\nexport const ShadowDom = (props: PropsWithChildren<ShadowDomProps>) => {\n  const { children, style, shadowRootDivClassName = '', rootFontSize = 16 } = props;\n  const shadowRef = useRef<HTMLDivElement>(null);\n  const [shadowContainer, setShadowContainer] = useState<HTMLDivElement>(); // shadowRef.current?.shadowRoot?.querySelector('[data-shadow-container]');\n\n  useEffect(() => {\n    if (shadowRef.current && !shadowRef.current.shadowRoot) {\n      const shadowRoot = shadowRef.current.shadowRoot || shadowRef.current.attachShadow({ mode: 'open' });\n      shadowRoot.innerHTML = `\n        <style>${style}</style>\n        <div data-shadow-container class=\"${shadowRootDivClassName}\"></div>\n      `;\n      setTimeout(() => {\n        const shadowContainerInner = shadowRoot.querySelector('[data-shadow-container]') as HTMLDivElement;\n        setShadowContainer(shadowContainerInner as HTMLDivElement);\n      }, 0);\n    }\n  }, [children, style, shadowRootDivClassName]);\n\n  useEffect(() => {\n    if (shadowContainer) {\n      shadowContainer.style.fontSize = `${rootFontSize}px`;\n      shadowContainer.style.setProperty('--base-font', `${rootFontSize}px`);\n    }\n  }, [rootFontSize, shadowContainer]);\n\n  return (\n    <>\n      {shadowContainer && createPortal(children, shadowContainer)}\n      <div ref={shadowRef} />\n    </>\n  );\n};\n"],"names":["ShadowDom","props","children","style","shadowRootDivClassName","rootFontSize","shadowRef","useRef","shadowContainer","setShadowContainer","useState","useEffect","shadowRoot","shadowContainerInner","jsxs","Fragment","createPortal","jsx"],"mappings":";;;AAQa,MAAAA,IAAY,CAACC,MAA6C;AACrE,QAAM,EAAE,UAAAC,GAAU,OAAAC,GAAO,wBAAAC,IAAyB,IAAI,cAAAC,IAAe,OAAOJ,GACtEK,IAAYC,EAAuB,IAAI,GACvC,CAACC,GAAiBC,CAAkB,IAAIC,EAAyB;AAEvE,SAAAC,EAAU,MAAM;AACd,QAAIL,EAAU,WAAW,CAACA,EAAU,QAAQ,YAAY;AAChD,YAAAM,IAAaN,EAAU,QAAQ,cAAcA,EAAU,QAAQ,aAAa,EAAE,MAAM,QAAQ;AAClG,MAAAM,EAAW,YAAY;AAAA,iBACZT,CAAK;AAAA,4CACsBC,CAAsB;AAAA,SAE5D,WAAW,MAAM;AACT,cAAAS,IAAuBD,EAAW,cAAc,yBAAyB;AAC/E,QAAAH,EAAmBI,CAAsC;AAAA,SACxD,CAAC;AAAA,IAAA;AAAA,EAEL,GAAA,CAACX,GAAUC,GAAOC,CAAsB,CAAC,GAE5CO,EAAU,MAAM;AACd,IAAIH,MACcA,EAAA,MAAM,WAAW,GAAGH,CAAY,MAChDG,EAAgB,MAAM,YAAY,eAAe,GAAGH,CAAY,IAAI;AAAA,EACtE,GACC,CAACA,GAAcG,CAAe,CAAC,GAI7BM,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAmBP,KAAAQ,EAAad,GAAUM,CAAe;AAAA,IAC1DS,gBAAAA,EAAAA,IAAC,OAAI,EAAA,KAAKX,EAAW,CAAA;AAAA,EAAA,GACvB;AAEJ;"}
+{"version":3,"file":"ShadowDom.es.js","sources":["../../../src/components/ShadowDom/ShadowDom.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface ShadowDomProps {\n  style: string;\n  shadowRootDivClassName?: string;\n  rootFontSize?: number;\n}\nexport const ShadowDom = (props: PropsWithChildren<ShadowDomProps>) => {\n  const { children, style, shadowRootDivClassName = '', rootFontSize = 16 } = props;\n  const shadowRef = useRef<HTMLDivElement>(null);\n  const [shadowContainer, setShadowContainer] = useState<HTMLDivElement>(); // shadowRef.current?.shadowRoot?.querySelector('[data-shadow-container]');\n\n  useEffect(() => {\n    if (shadowRef.current && !shadowRef.current.shadowRoot) {\n      const shadowRoot = shadowRef.current.shadowRoot || shadowRef.current.attachShadow({ mode: 'open' });\n      shadowRoot.innerHTML = `\n        <style>${style}</style>\n        <div data-shadow-container class=\"${shadowRootDivClassName}\"></div>\n      `;\n      setTimeout(() => {\n        const shadowContainerInner = shadowRoot.querySelector('[data-shadow-container]') as HTMLDivElement;\n        setShadowContainer(shadowContainerInner as HTMLDivElement);\n      }, 0);\n    }\n  }, [children, style, shadowRootDivClassName]);\n\n  useEffect(() => {\n    if (shadowContainer) {\n      shadowContainer.style.fontSize = `${rootFontSize}px`;\n      shadowContainer.style.setProperty('--base-font', `${rootFontSize}px`);\n    }\n  }, [rootFontSize, shadowContainer]);\n\n  return (\n    <>\n      {shadowContainer && createPortal(children, shadowContainer)}\n      <div ref={shadowRef} />\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;AAQa,MAAA,YAAY,CAAC,UAA6C;AACrE,QAAM,EAAE,UAAU,OAAO,yBAAyB,IAAI,eAAe,OAAO;AACtE,QAAA,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAyB;AAEvE,YAAU,MAAM;AACd,QAAI,UAAU,WAAW,CAAC,UAAU,QAAQ,YAAY;AAChD,YAAA,aAAa,UAAU,QAAQ,cAAc,UAAU,QAAQ,aAAa,EAAE,MAAM,QAAQ;AAClG,iBAAW,YAAY;AAAA,iBACZ,KAAK;AAAA,4CACsB,sBAAsB;AAAA;AAE5D,iBAAW,MAAM;AACT,cAAA,uBAAuB,WAAW,cAAc,yBAAyB;AAC/E,2BAAmB,oBAAsC;AAAA,SACxD,CAAC;AAAA,IAAA;AAAA,EAEL,GAAA,CAAC,UAAU,OAAO,sBAAsB,CAAC;AAE5C,YAAU,MAAM;AACd,QAAI,iBAAiB;AACH,sBAAA,MAAM,WAAW,GAAG,YAAY;AAChD,sBAAgB,MAAM,YAAY,eAAe,GAAG,YAAY,IAAI;AAAA,IAAA;AAAA,EACtE,GACC,CAAC,cAAc,eAAe,CAAC;AAElC,SAEKA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAmB,mBAAA,aAAa,UAAU,eAAe;AAAA,IAC1DC,kCAAAA,IAAC,OAAI,EAAA,KAAK,UAAW,CAAA;AAAA,EAAA,GACvB;AAEJ;"}