@easyv/biz-components 1.0.30 → 2.1.0

package/dist/lib/components/ai-components/mobile-voice-input/mobile-voice-input.es.js

@@ -0,0 +1,301 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { forwardRef, useState, useRef, useImperativeHandle } from "react";
+import { ArcoMessage, ArcoInput, ArcoButton } from "@easyv/arco";
+import { MouseOutlined, TerminationSquareOutlined, AudioOutlined, KeyboardOutlined, CloseCircleOutlined } from "../../../node_modules/.pnpm/@easyv_react-icons@6.13.1/node_modules/@easyv/react-icons/dist/index.esm.es.js";
+import useMemoizedFn from "../../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMemoizedFn/index.es.js";
+import classNames from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
+import { IconButton } from "./icon-button.es.js";
+import { useTencentSentenceRecognition } from "../../../hooks/use-tencent-sentence-recognition/use-tencent-sentence-recognition.es.js";
+import { VoiceAnimation } from "../../voice-animation/voice-animation.es.js";
+import { getIsPrivateDeployEnv } from "../../../utils/common/common.es.js";
+const MobileVoiceInputCpn = (props, ref) => {
+  const {
+    className = "",
+    isAiAnswering,
+    onClickStartRecord,
+    onClickStopRecord,
+    onSend,
+    onStop,
+    value,
+    onChange,
+    getSentenceRecognizeRes,
+    renderSomethingOnVoiceInput
+  } = props;
+  const [voiceRecognizeRes, setVoiceRecognizeRes] = useState("");
+  const [isVoiceInput, setIsVoiceInput] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [recordStatus, setRecordStatus] = useState("init");
+  const isRecording = recordStatus === "recording";
+  const startRecordTimeRef = useRef(0);
+  const inputRef = useRef(null);
+  const showPreviewVoiceRecognizeRes = isVoiceInput && !isAiAnswering && recordStatus === "afterRecord";
+  const showVoiceRecognizeHintInfo = isVoiceInput && !isAiAnswering && isRecording;
+  const { startVoiceRecord, stopVoiceRecord, recognizeStatus } = useTencentSentenceRecognition({
+    getSentenceRecognizeRes,
+    onAsrResult: (result) => {
+      if (!getIsPrivateDeployEnv()) {
+        setVoiceRecognizeRes(result);
+      }
+    }
+  });
+  useImperativeHandle(ref, () => ({
+    setVoiceRecognizeRes
+  }));
+  const toggleVoiceRecord = useMemoizedFn(() => {
+    if (isAiAnswering || showPreviewVoiceRecognizeRes) {
+      return;
+    }
+    if (!isRecording) {
+      setRecordStatus("recording");
+      onClickStartRecord == null ? void 0 : onClickStartRecord();
+      startVoiceRecord();
+      startRecordTimeRef.current = Date.now();
+    } else {
+      setRecordStatus("afterRecord");
+      onClickStopRecord == null ? void 0 : onClickStopRecord();
+      let needRequestAsr = true;
+      const recordTime = Date.now() - startRecordTimeRef.current;
+      if (recordTime < 500) {
+        setVoiceRecognizeRes("");
+        needRequestAsr = false;
+        ArcoMessage.error("录音时间过短");
+      }
+      if (recordTime > 59 * 1e3) {
+        setVoiceRecognizeRes("");
+        needRequestAsr = false;
+        ArcoMessage.error("录音时间最多支持一分钟");
+      }
+      stopVoiceRecord(needRequestAsr);
+    }
+  });
+  const handleSend = useMemoizedFn((_value) => {
+    setVoiceRecognizeRes("");
+    onChange == null ? void 0 : onChange("");
+    onSend == null ? void 0 : onSend(_value || value);
+  });
+  const placeholder = isAiAnswering ? "正在回答中..." : "问点什么";
+  const sendButton = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    IconButton,
+    {
+      className: classNames("!biz-bg-primary-6"),
+      onClick: () => {
+        handleSend();
+      },
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MouseOutlined,
+        {
+          className: classNames(
+            "biz-h-10 biz-w-10 biz-text-[2.5rem] biz-text-white biz--scale-x-100 biz-scale-y-100"
+          )
+        }
+      )
+    }
+  );
+  const stopButton = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    IconButton,
+    {
+      className: classNames("biz-bg-primary-1"),
+      onClick: () => {
+        onStop == null ? void 0 : onStop();
+      },
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TerminationSquareOutlined, { className: "biz-h-10 biz-w-10 biz-text-[2.5rem] !biz-text-[#3A89FE]" })
+    }
+  );
+  const voiceButton = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    IconButton,
+    {
+      className: classNames("!biz-bg-bg-white"),
+      onClick: (e) => {
+        setIsVoiceInput(true);
+        e.stopPropagation();
+      },
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AudioOutlined, { className: "biz-text-text-2 biz-h-10 biz-w-10 biz-text-[2.5rem]" })
+    }
+  );
+  const keyboardButton = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    IconButton,
+    {
+      className: classNames("!biz-bg-bg-white"),
+      onClick: (e) => {
+        setIsVoiceInput(false);
+        e.stopPropagation();
+      },
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardOutlined, { className: "biz-text-text-2 biz-h-10 biz-w-10 biz-text-[2.5rem]" })
+    }
+  );
+  const inputDom = /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: classNames(
+        "biz-flex-center biz-h-[6rem] biz-rounded-3xl biz-pl-8 biz-pr-[0.875rem]",
+        "biz-border-one biz-bg-bg-white !biz-border-[0.125rem]",
+        focused && "!biz-border-primary-6"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ArcoInput,
+          {
+            ref: inputRef,
+            value,
+            placeholder,
+            className: classNames(
+              "biz-text-text-1 biz-flex biz-w-0 biz-flex-1 biz-resize-none biz-items-center biz-border-none biz-bg-transparent biz-text-[2rem]",
+              "!biz-p-0 biz-font-normal biz-leading-[3rem] !biz-bg-transparent !biz-shadow-none"
+            ),
+            onChange: (_value) => {
+              onChange == null ? void 0 : onChange(_value);
+            },
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-flex-center biz-h-[4.25rem] biz-w-[4.25rem] biz-rounded-2xl", children: isAiAnswering ? stopButton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: value ? sendButton : voiceButton }) })
+      ]
+    }
+  );
+  const disableVoiceInput = isAiAnswering;
+  const renderVoiceRecordDom = () => {
+    if (isRecording || recognizeStatus === "translating") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-w-full biz-px-8 biz-py-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-flex-center biz-h-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        VoiceAnimation,
+        {
+          className: "biz-h-[2.5rem] !biz-w-[26.25rem]",
+          barClassName: "!biz-bg-[#fff]"
+        }
+      ) }) });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "!biz-select-none", children: `点击开始说话` });
+  };
+  const renderVoiceInputDom = () => {
+    if (showPreviewVoiceRecognizeRes) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "voice-input-place-holder-dom biz-relative biz-h-[9.5rem] biz-w-full" });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: classNames(
+          "biz-flex-center biz-relative biz-h-[6rem] biz-rounded-3xl biz-py-5",
+          "biz-border-one biz-bg-primary-1 !biz-select-none !biz-border-[0.125rem]"
+        ),
+        onClick: toggleVoiceRecord,
+        onContextMenu: (e) => {
+          e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "biz-flex-center biz-text-primary-6 biz-w-full !biz-select-none biz-text-[2rem]",
+              style: {
+                opacity: disableVoiceInput ? 0.5 : 1
+              },
+              children: renderVoiceRecordDom()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 z-10 h-full w-full bg-transparent" }),
+          !isRecording && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-flex-center biz-absolute biz-right-[0.875rem] biz-top-[0.875rem] biz-z-20 biz-h-[4.25rem] biz-w-[4.25rem] biz-rounded-2xl", children: isAiAnswering ? stopButton : keyboardButton })
+        ]
+      }
+    );
+  };
+  const voiceRecognizeResDom = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-absolute biz-z-10 biz-w-full biz-bg-transparent biz-left-0 biz-bottom-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "biz-flex biz-flex-col biz-gap-8", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: classNames(
+          "biz-text-[2rem] biz-leading-[4rem] biz-text-text-2",
+          "biz-w-full biz-flex biz-flex-center biz-gap-9"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ArcoButton,
+            {
+              className: "biz-rounded-2xl biz-gap-4 biz-h-[5rem] biz-px-8 biz-flex biz-flex-center biz-text-[2rem] !biz-bg-bg-1 !biz-text-white",
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CloseCircleOutlined,
+                {
+                  className: classNames("biz-h-10 biz-w-10 biz-text-[2.5rem] biz-text-white")
+                }
+              ),
+              onClick: () => {
+                setVoiceRecognizeRes("");
+                setRecordStatus("init");
+              },
+              children: "取消"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ArcoButton,
+            {
+              className: "biz-rounded-2xl biz-gap-4 biz-h-[5rem] biz-px-8 biz-flex biz-flex-center biz-text-[2rem]",
+              type: "primary",
+              disabled: !voiceRecognizeRes,
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                MouseOutlined,
+                {
+                  className: classNames(
+                    "biz-h-10 biz-w-10 biz-text-[2.5rem] biz--scale-x-100 biz-scale-y-100 biz-text-inherit"
+                  )
+                }
+              ),
+              onClick: () => {
+                if (!voiceRecognizeRes) {
+                  return;
+                }
+                setRecordStatus("init");
+                handleSend(voiceRecognizeRes);
+              },
+              children: "发送"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "voice-recognize-res-dom biz-w-full biz-pb-6 biz-px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "textarea",
+      {
+        placeholder: "未识别到内容",
+        value: voiceRecognizeRes,
+        className: classNames(
+          "biz-w-full biz-px-8 biz-py-7 biz-rounded-3xl biz-text-text-1 biz-text-[2rem]",
+          "biz-border-solid biz-border-[2px] biz-border-[rgba(58,137,254,0.1)]",
+          "biz-bg-[rgba(58,137,254,0.1)] biz-h-[8rem]"
+        ),
+        onClick: (e) => e.stopPropagation(),
+        onChange: (e) => {
+          e.stopPropagation();
+          setVoiceRecognizeRes(e.target.value);
+        }
+      }
+    ) })
+  ] }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: classNames(
+        "biz-w-full biz-px-8 biz-py-6 biz-relative biz-flex biz-flex-col biz-gap-6",
+        className
+      ),
+      children: [
+        showPreviewVoiceRecognizeRes && voiceRecognizeResDom,
+        showVoiceRecognizeHintInfo && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: classNames(
+              "biz-text-[2rem] biz-leading-[4rem] biz-text-text-2",
+              "biz-w-full biz-flex biz-flex-center"
+            ),
+            children: "正在聆听，点击结束"
+          }
+        ),
+        !showPreviewVoiceRecognizeRes && (renderSomethingOnVoiceInput == null ? void 0 : renderSomethingOnVoiceInput()),
+        isVoiceInput ? renderVoiceInputDom() : inputDom
+      ]
+    }
+  );
+};
+const MobileVoiceInput = forwardRef(MobileVoiceInputCpn);
+export {
+  MobileVoiceInput
+};
+//# sourceMappingURL=mobile-voice-input.es.js.map

package/dist/lib/components/ai-components/mobile-voice-input/mobile-voice-input.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-voice-input.es.js","sources":["../../../../../src/components/ai-components/mobile-voice-input/mobile-voice-input.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useImperativeHandle, useRef, useState } from \"react\";\nimport { ArcoButton, ArcoInput, ArcoInputRef, ArcoMessage } from \"@easyv/arco\";\nimport {\n  AudioOutlined,\n  CloseCircleOutlined,\n  KeyboardOutlined,\n  MouseOutlined,\n  TerminationSquareOutlined,\n} from \"@easyv/react-icons\";\nimport { useMemoizedFn } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { VoiceAnimation } from \"@/components/voice-animation\";\nimport { useTencentSentenceRecognition } from \"@/hooks\";\nimport { getIsPrivateDeployEnv } from \"@/utils\";\nimport { IconButton } from \"./icon-button\";\n\nexport interface MobileVoiceInputProps {\n  className?: string;\n  isAiAnswering?: boolean;\n  onClickStartRecord?: () => void;\n  onClickStopRecord?: () => void;\n  onSend?: (value?: string) => void;\n  onStop?: () => void;\n  value?: string;\n  onChange?: (value?: string) => void;\n  getSentenceRecognizeRes: (data: Blob) => Promise<string>;\n  /** 这个是本地语音识别管理器，用于在移动端识别语音。\n   * - workspace 和 screen 里的 class 不一样， 而且没有迁移到 biz-components 中 所以先写个 any。\n   * - workspace 里的 class 是 LocalMobileVoiceRecognitionManager ，screen 里的 class 是 LocalVoiceRecognitionManager\n   */\n  // localManager?: any;\n  renderSomethingOnVoiceInput?: () => React.ReactNode;\n}\n\nexport interface MobileVoiceInputRef {\n  setVoiceRecognizeRes: (value: string) => void;\n}\n\nconst MobileVoiceInputCpn = (props: MobileVoiceInputProps, ref: Ref<MobileVoiceInputRef>) => {\n  const {\n    className = \"\",\n    isAiAnswering,\n    onClickStartRecord,\n    onClickStopRecord,\n    onSend,\n    onStop,\n    value,\n    onChange,\n    getSentenceRecognizeRes,\n    renderSomethingOnVoiceInput,\n  } = props;\n  const [voiceRecognizeRes, setVoiceRecognizeRes] = useState(\"\");\n  const [isVoiceInput, setIsVoiceInput] = useState(false); // 是否使用语音输入\n  const [focused, setFocused] = useState(false); // 是否聚焦\n  const [recordStatus, setRecordStatus] = useState<\"init\" | \"recording\" | \"afterRecord\">(\"init\");\n  const isRecording = recordStatus === \"recording\";\n\n  const startRecordTimeRef = useRef<number>(0); // 时间小于 500 ms 和 大于 59 秒都不发给后端\n  const inputRef = useRef<ArcoInputRef>(null);\n\n  /** 是否展示语音识别结果的预览 */\n  const showPreviewVoiceRecognizeRes =\n    isVoiceInput && !isAiAnswering && recordStatus === \"afterRecord\";\n  /** 是否展示语音识别的提示信息 */\n  const showVoiceRecognizeHintInfo = isVoiceInput && !isAiAnswering && isRecording;\n\n  const { startVoiceRecord, stopVoiceRecord, recognizeStatus } = useTencentSentenceRecognition({\n    getSentenceRecognizeRes,\n    onAsrResult: (result) => {\n      // 本地录音不使用这个结果，依赖外部去设置 voiceRecognizeRes\n      if (!getIsPrivateDeployEnv()) {\n        setVoiceRecognizeRes(result);\n      }\n    },\n  });\n\n  useImperativeHandle(ref, () => ({\n    setVoiceRecognizeRes,\n  }));\n\n  const toggleVoiceRecord = useMemoizedFn(() => {\n    if (isAiAnswering || showPreviewVoiceRecognizeRes) {\n      return;\n    }\n    if (!isRecording) {\n      setRecordStatus(\"recording\");\n      onClickStartRecord?.();\n      startVoiceRecord();\n      startRecordTimeRef.current = Date.now();\n    } else {\n      setRecordStatus(\"afterRecord\");\n      onClickStopRecord?.();\n      let needRequestAsr = true;\n      const recordTime = Date.now() - startRecordTimeRef.current;\n      if (recordTime < 500) {\n        setVoiceRecognizeRes(\"\");\n        needRequestAsr = false;\n        ArcoMessage.error(\"录音时间过短\");\n      }\n      if (recordTime > 59 * 1000) {\n        setVoiceRecognizeRes(\"\");\n        needRequestAsr = false;\n        ArcoMessage.error(\"录音时间最多支持一分钟\");\n      }\n      stopVoiceRecord(needRequestAsr);\n    }\n  });\n\n  const handleSend = useMemoizedFn((_value?: string) => {\n    setVoiceRecognizeRes(\"\");\n    onChange?.(\"\");\n    onSend?.(_value || value);\n  });\n\n  const placeholder = isAiAnswering ? \"正在回答中...\" : \"问点什么\";\n\n  const sendButton = (\n    <IconButton\n      className={classNames(\"!biz-bg-primary-6\")}\n      onClick={() => {\n        handleSend();\n      }}\n      icon={\n        <MouseOutlined\n          className={classNames(\n            \"biz-h-10 biz-w-10 biz-text-[2.5rem] biz-text-white biz--scale-x-100 biz-scale-y-100\",\n          )}\n        />\n      }\n    />\n  );\n  const stopButton = (\n    <IconButton\n      className={classNames(\"biz-bg-primary-1\")}\n      onClick={() => {\n        onStop?.();\n      }}\n      icon={\n        <TerminationSquareOutlined className=\"biz-h-10 biz-w-10 biz-text-[2.5rem] !biz-text-[#3A89FE]\" />\n      }\n    />\n  );\n  const voiceButton = (\n    <IconButton\n      className={classNames(\"!biz-bg-bg-white\")}\n      onClick={(e) => {\n        setIsVoiceInput(true);\n        e.stopPropagation();\n      }}\n      icon={<AudioOutlined className=\"biz-text-text-2 biz-h-10 biz-w-10 biz-text-[2.5rem]\" />}\n    />\n  );\n  const keyboardButton = (\n    <IconButton\n      className={classNames(\"!biz-bg-bg-white\")}\n      onClick={(e) => {\n        setIsVoiceInput(false);\n        e.stopPropagation();\n      }}\n      icon={<KeyboardOutlined className=\"biz-text-text-2 biz-h-10 biz-w-10 biz-text-[2.5rem]\" />}\n    />\n  );\n\n  const inputDom = (\n    <div\n      className={classNames(\n        \"biz-flex-center biz-h-[6rem] biz-rounded-3xl biz-pl-8 biz-pr-[0.875rem]\",\n        \"biz-border-one biz-bg-bg-white !biz-border-[0.125rem]\",\n        focused && \"!biz-border-primary-6\",\n      )}\n    >\n      <ArcoInput\n        ref={inputRef}\n        value={value}\n        placeholder={placeholder}\n        className={classNames(\n          \"biz-text-text-1 biz-flex biz-w-0 biz-flex-1 biz-resize-none biz-items-center biz-border-none biz-bg-transparent biz-text-[2rem]\",\n          \"!biz-p-0 biz-font-normal biz-leading-[3rem] !biz-bg-transparent !biz-shadow-none\",\n        )}\n        onChange={(_value) => {\n          onChange?.(_value);\n        }}\n        onFocus={() => setFocused(true)}\n        onBlur={() => setFocused(false)}\n      />\n      {/* 控制按钮 */}\n      <div className=\"biz-flex-center biz-h-[4.25rem] biz-w-[4.25rem] biz-rounded-2xl\">\n        {isAiAnswering ? stopButton : <>{value ? sendButton : voiceButton}</>}\n      </div>\n    </div>\n  );\n\n  const disableVoiceInput = isAiAnswering; // 允许录制时点击结束\n  const renderVoiceRecordDom = () => {\n    if (isRecording || recognizeStatus === \"translating\") {\n      return (\n        <div className=\"biz-w-full biz-px-8 biz-py-6\">\n          <div className=\"biz-flex-center biz-h-10\">\n            <VoiceAnimation\n              className=\"biz-h-[2.5rem] !biz-w-[26.25rem]\"\n              barClassName=\"!biz-bg-[#fff]\"\n            />\n          </div>\n        </div>\n      );\n    }\n    return <span className=\"!biz-select-none\">{`点击开始说话`}</span>;\n  };\n  const renderVoiceInputDom = () => {\n    if (showPreviewVoiceRecognizeRes) {\n      return (\n        <div className=\"voice-input-place-holder-dom biz-relative biz-h-[9.5rem] biz-w-full\"></div>\n      );\n    }\n    return (\n      <div\n        className={classNames(\n          \"biz-flex-center biz-relative biz-h-[6rem] biz-rounded-3xl biz-py-5\",\n          \"biz-border-one biz-bg-primary-1 !biz-select-none !biz-border-[0.125rem]\",\n        )}\n        onClick={toggleVoiceRecord}\n        onContextMenu={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <div\n          className=\"biz-flex-center biz-text-primary-6 biz-w-full !biz-select-none biz-text-[2rem]\"\n          style={{\n            opacity: disableVoiceInput ? 0.5 : 1,\n          }}\n        >\n          {renderVoiceRecordDom()}\n        </div>\n        <div className=\"absolute left-0 top-0 z-10 h-full w-full bg-transparent\"></div>\n        {/* 控制按钮 */}\n        {!isRecording && (\n          <div className=\"biz-flex-center biz-absolute biz-right-[0.875rem] biz-top-[0.875rem] biz-z-20 biz-h-[4.25rem] biz-w-[4.25rem] biz-rounded-2xl\">\n            {isAiAnswering ? stopButton : keyboardButton}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const voiceRecognizeResDom = (\n    <div className=\"biz-absolute biz-z-10 biz-w-full biz-bg-transparent biz-left-0 biz-bottom-0\">\n      <div className=\"biz-flex biz-flex-col biz-gap-8\">\n        <div\n          className={classNames(\n            \"biz-text-[2rem] biz-leading-[4rem] biz-text-text-2\",\n            \"biz-w-full biz-flex biz-flex-center biz-gap-9\",\n          )}\n        >\n          <ArcoButton\n            className=\"biz-rounded-2xl biz-gap-4 biz-h-[5rem] biz-px-8 biz-flex biz-flex-center biz-text-[2rem] !biz-bg-bg-1 !biz-text-white\"\n            icon={\n              <CloseCircleOutlined\n                className={classNames(\"biz-h-10 biz-w-10 biz-text-[2.5rem] biz-text-white\")}\n              />\n            }\n            onClick={() => {\n              setVoiceRecognizeRes(\"\");\n              setRecordStatus(\"init\");\n            }}\n          >\n            取消\n          </ArcoButton>\n          <ArcoButton\n            className=\"biz-rounded-2xl biz-gap-4 biz-h-[5rem] biz-px-8 biz-flex biz-flex-center biz-text-[2rem]\"\n            type=\"primary\"\n            disabled={!voiceRecognizeRes}\n            icon={\n              <MouseOutlined\n                className={classNames(\n                  \"biz-h-10 biz-w-10 biz-text-[2.5rem] biz--scale-x-100 biz-scale-y-100 biz-text-inherit\",\n                )}\n              />\n            }\n            onClick={() => {\n              if (!voiceRecognizeRes) {\n                return;\n              }\n              setRecordStatus(\"init\");\n              handleSend(voiceRecognizeRes);\n            }}\n          >\n            发送\n          </ArcoButton>\n        </div>\n        <div className=\"voice-recognize-res-dom biz-w-full biz-pb-6 biz-px-8\">\n          <textarea\n            placeholder=\"未识别到内容\"\n            value={voiceRecognizeRes}\n            className={classNames(\n              \"biz-w-full biz-px-8 biz-py-7 biz-rounded-3xl biz-text-text-1 biz-text-[2rem]\",\n              \"biz-border-solid biz-border-[2px] biz-border-[rgba(58,137,254,0.1)]\",\n              \"biz-bg-[rgba(58,137,254,0.1)] biz-h-[8rem]\",\n            )}\n            onClick={(e) => e.stopPropagation()}\n            onChange={(e) => {\n              e.stopPropagation();\n              setVoiceRecognizeRes(e.target.value);\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={classNames(\n        \"biz-w-full biz-px-8 biz-py-6 biz-relative biz-flex biz-flex-col biz-gap-6\",\n        className,\n      )}\n    >\n      {showPreviewVoiceRecognizeRes && voiceRecognizeResDom}\n\n      {showVoiceRecognizeHintInfo && (\n        <div\n          className={classNames(\n            \"biz-text-[2rem] biz-leading-[4rem] biz-text-text-2\",\n            \"biz-w-full biz-flex biz-flex-center\",\n          )}\n        >\n          正在聆听，点击结束\n        </div>\n      )}\n      {!showPreviewVoiceRecognizeRes && renderSomethingOnVoiceInput?.()}\n      {isVoiceInput ? renderVoiceInputDom() : inputDom}\n    </div>\n  );\n};\n\nexport const MobileVoiceInput = forwardRef(MobileVoiceInputCpn);\n"],"names":["jsx","jsxs","Fragment"],"mappings":"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"}

package/dist/lib/components/ai-model-select/ai-model-select-panel.es.js

@@ -1,6 +1,6 @@
 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 { PlusOutlined, EditOutlined } from "../../node_modules/.pnpm/@easyv_react-icons@6.3.0/node_modules/@easyv/react-icons/dist/index.esm.es.js";
+import { PlusOutlined, EditOutlined } from "../../node_modules/.pnpm/@easyv_react-icons@6.13.1/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 { produce } from "../../node_modules/.pnpm/immer@10.1.1/node_modules/immer/dist/immer.es.js";
 import { IconBtn } from "./iconBtn.es.js";
@@ -155,8 +155,8 @@ const AiModelSelectPanel = (props) => {
     {
       style,
       className: classNames(
-        "biz-bg-[#181B22] biz-border-one biz-rounded-[4px] biz-py-1  biz-h-[200px]",
-        "biz-flex biz-flex-col gap-1 biz-w-[160px] biz-max-h-[450px] biz-overflow-auto",
+        "biz-bg-[#181B22] biz-border-one biz-rounded-[4px] biz-py-1 biz-h-[200px]",
+        "biz-flex biz-flex-col biz-w-[160px] biz-max-h-[450px] biz-overflow-auto gap-1",
         className
       ),
       children: [
@@ -166,7 +166,7 @@ const AiModelSelectPanel = (props) => {
             className: "biz-flex biz-flex-col biz-gap-1 biz-w-full biz-box-border",
             children: [
               renderTitle(provider),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-flex biz-flex-col gap-1 biz-w-full", children: provider.modelList.map((model) => renderItem(provider, model)) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-flex biz-flex-col biz-w-full gap-1", children: provider.modelList.map((model) => renderItem(provider, model)) })
             ]
           },
           provider.id
@@ -177,7 +177,7 @@ const AiModelSelectPanel = (props) => {
             className: "biz-flex biz-flex-col biz-gap-1 biz-w-full biz-box-border",
             children: [
               renderTitle(provider),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-flex biz-flex-col gap-1 biz-w-full", children: renderItem(provider, provider.modelList[0]) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-flex biz-flex-col biz-w-full gap-1", children: renderItem(provider, provider.modelList[0]) })
             ]
           },
           provider.id

package/dist/lib/components/ai-model-select/ai-model-select-panel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-model-select-panel.es.js","sources":["../../../../src/components/ai-model-select/ai-model-select-panel.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { EditOutlined, PlusOutlined } from '@easyv/react-icons';\nimport { InputRef } from 'antd';\nimport classNames from 'classnames';\nimport { produce } from 'immer';\nimport { IconBtn } from './iconBtn';\nimport { AiModel, AiModelServiceProvider } from './types';\n\nexport interface AiModelSelectPanelProps {\n  className?: string;\n  modelServiceProviderList: AiModelServiceProvider[];\n  value?: {\n    modelProviderId: string;\n    modelId: string;\n  };\n  onSelect?: (AiModelServiceProvider: AiModelServiceProvider, model: AiModel) => void;\n  style?: React.CSSProperties;\n  titleClassName?: string;\n  itemClassName?: string;\n  renderInput: (props: {\n    value: string;\n    onChange: (value: string) => void;\n    onPressEnter: () => void;\n    onBlur: () => void;\n    ref: React.Ref<InputRef>;\n  }) => React.ReactNode;\n}\n\nexport const AiModelSelectPanel = (props: AiModelSelectPanelProps) => {\n  const {\n    className = '',\n    modelServiceProviderList,\n    value,\n    onSelect,\n    style,\n    titleClassName,\n    itemClassName,\n    renderInput,\n  } = props;\n\n  const inputRef = useRef<InputRef>(null);\n\n  const [customModelServiceProviderList, setCustomModelServiceProviderList] = useState(\n    modelServiceProviderList.filter((item) => item.isCustom),\n  );\n  const [showInputProviderId, setShowInputProviderId] = useState<string>('');\n  const [inputValue, setInputValue] = useState<string>('');\n\n  const otherModelServiceProviderList = modelServiceProviderList.filter((item) => !item.isCustom);\n\n  useEffect(() => {\n    if (!showInputProviderId) return;\n\n    // 聚焦到输入框\n    const focusTimer = setTimeout(() => {\n      inputRef.current?.focus();\n    }, 0);\n\n    // 滚动到输入框位置\n    const scrollTimer = setTimeout(() => {\n      // 使用唯一选择器查找包含输入框的元素\n      const targetElement = document.querySelector(`[data-provider-id=\"${showInputProviderId}\"]`);\n      if (targetElement) {\n        targetElement.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(focusTimer);\n      clearTimeout(scrollTimer);\n    };\n  }, [showInputProviderId]);\n\n  useEffect(() => {\n    return () => {\n      setShowInputProviderId('');\n      setInputValue('');\n    };\n  }, []);\n\n  const handleSelect = (modelProvider: AiModelServiceProvider, model: AiModel) => {\n    onSelect?.(modelProvider, model);\n    setShowInputProviderId('');\n    setInputValue('');\n  };\n\n  const renderTitle = (modelProvider: AiModelServiceProvider) => {\n    return (\n      <div\n        className={classNames(\n          'biz-h-6 biz-text-text-3 biz-px-3 biz-pt-1 biz-w-full',\n          'biz-flex biz-items-center biz-box-border biz-gap-2.5 biz-text-[14px]',\n          titleClassName,\n        )}\n        title={modelProvider.name}\n      >\n        <div className='biz-w-0 biz-flex-1 biz-truncate'>{modelProvider.name}</div>\n        {modelProvider.isCustom && modelProvider.modelList.length === 0 && (\n          <IconBtn\n            onClick={() => {\n              setShowInputProviderId(modelProvider.id);\n            }}\n            icon={\n              <PlusOutlined className='biz-w-3 biz-h-3 biz-text-text-2 hover:biz-text-text-1 biz-flex-center' />\n            }\n          />\n        )}\n      </div>\n    );\n  };\n\n  const renderItem = (modelProvider: AiModelServiceProvider, model?: AiModel) => {\n    if (modelProvider.isCustom) {\n      if (modelProvider.id !== showInputProviderId && !modelProvider.modelList?.length) {\n        return null;\n      }\n    }\n    const normalContent = (\n      <>\n        <img src={modelProvider.iconSrc} className='biz-w-4 biz-h-4' />\n        <div className='biz-truncate biz-w-0 biz-flex-1 biz-text-[14px]' title={model?.name}>\n          {model?.name}\n        </div>\n        {modelProvider.isCustom && (\n          <IconBtn\n            onClick={(e) => {\n              setShowInputProviderId(modelProvider.id);\n              setInputValue(model?.name || '');\n              e.stopPropagation();\n            }}\n            className='biz-hidden group-hover:!biz-flex'\n            style={{ display: 'none' }}\n            icon={\n              <EditOutlined className='biz-w-3 biz-h-3 biz-text-text-2 hover:biz-text-text-1 biz-flex-center' />\n            }\n          />\n        )}\n      </>\n    );\n\n    const handlePressEnter = () => {\n      if (inputValue) {\n        setCustomModelServiceProviderList(\n          produce(customModelServiceProviderList, (draft) => {\n            const index = draft.findIndex((i) => i.id === modelProvider.id);\n            if (index !== -1) {\n              draft[index].modelList = [{ id: inputValue, name: inputValue }];\n            }\n          }),\n        );\n        setShowInputProviderId('');\n        setInputValue('');\n      }\n    };\n\n    const handleBlur = () => {\n      if (!inputValue) {\n        setShowInputProviderId('');\n      }\n    };\n\n    const isSelected = value?.modelProviderId === modelProvider.id && value?.modelId === model?.id;\n\n    return (\n      <div\n        key={model?.id || `input-${modelProvider.id}`}\n        data-provider-id={modelProvider.id}\n        className={classNames(\n          'biz-px-3 biz-py-[3px] biz-flex biz-items-center biz-gap-2',\n          'biz-text-text-2 biz-h-8 biz-w-full biz-box-border',\n          'hover:biz-bg-bg-white biz-cursor-pointer biz-group',\n          isSelected && 'biz-bg-bg-white',\n          itemClassName,\n        )}\n        onClick={() => {\n          if (model && !showInputProviderId) {\n            handleSelect(modelProvider, model);\n          }\n        }}\n      >\n        {showInputProviderId === modelProvider.id\n          ? renderInput({\n              value: inputValue,\n              onChange: (value) => setInputValue(value),\n              onPressEnter: handlePressEnter,\n              onBlur: handleBlur,\n              ref: inputRef,\n            })\n          : normalContent}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      style={style}\n      className={classNames(\n        'biz-bg-[#181B22] biz-border-one biz-rounded-[4px] biz-py-1  biz-h-[200px]',\n        'biz-flex biz-flex-col gap-1 biz-w-[160px] biz-max-h-[450px] biz-overflow-auto',\n        className,\n      )}\n    >\n      {otherModelServiceProviderList.map((provider) => (\n        <div\n          key={provider.id}\n          className='biz-flex biz-flex-col biz-gap-1 biz-w-full biz-box-border'\n        >\n          {renderTitle(provider)}\n          <div className='biz-flex biz-flex-col gap-1 biz-w-full'>\n            {provider.modelList.map((model) => renderItem(provider, model))}\n          </div>\n        </div>\n      ))}\n      {customModelServiceProviderList.map((provider) => (\n        <div\n          key={provider.id}\n          className='biz-flex biz-flex-col biz-gap-1 biz-w-full biz-box-border'\n        >\n          {renderTitle(provider)}\n          <div className='biz-flex biz-flex-col gap-1 biz-w-full'>\n            {renderItem(provider, provider.modelList[0])}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","Fragment","value"],"mappings":"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"}
+{"version":3,"file":"ai-model-select-panel.es.js","sources":["../../../../src/components/ai-model-select/ai-model-select-panel.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { InputRef } from \"@easyv/antd\";\nimport { EditOutlined, PlusOutlined } from \"@easyv/react-icons\";\nimport classNames from \"classnames\";\nimport { produce } from \"immer\";\nimport { IconBtn } from \"./iconBtn\";\nimport { AiModel, AiModelServiceProvider } from \"./types\";\n\nexport interface AiModelSelectPanelProps {\n  className?: string;\n  modelServiceProviderList: AiModelServiceProvider[];\n  value?: {\n    modelProviderId: string;\n    modelId: string;\n  };\n  onSelect?: (AiModelServiceProvider: AiModelServiceProvider, model: AiModel) => void;\n  style?: React.CSSProperties;\n  titleClassName?: string;\n  itemClassName?: string;\n  renderInput: (props: {\n    value: string;\n    onChange: (value: string) => void;\n    onPressEnter: () => void;\n    onBlur: () => void;\n    ref: React.Ref<InputRef>;\n  }) => React.ReactNode;\n}\n\nexport const AiModelSelectPanel = (props: AiModelSelectPanelProps) => {\n  const {\n    className = \"\",\n    modelServiceProviderList,\n    value,\n    onSelect,\n    style,\n    titleClassName,\n    itemClassName,\n    renderInput,\n  } = props;\n\n  const inputRef = useRef<InputRef>(null);\n\n  const [customModelServiceProviderList, setCustomModelServiceProviderList] = useState(\n    modelServiceProviderList.filter((item) => item.isCustom),\n  );\n  const [showInputProviderId, setShowInputProviderId] = useState<string>(\"\");\n  const [inputValue, setInputValue] = useState<string>(\"\");\n\n  const otherModelServiceProviderList = modelServiceProviderList.filter((item) => !item.isCustom);\n\n  useEffect(() => {\n    if (!showInputProviderId) return;\n\n    // 聚焦到输入框\n    const focusTimer = setTimeout(() => {\n      inputRef.current?.focus();\n    }, 0);\n\n    // 滚动到输入框位置\n    const scrollTimer = setTimeout(() => {\n      // 使用唯一选择器查找包含输入框的元素\n      const targetElement = document.querySelector(`[data-provider-id=\"${showInputProviderId}\"]`);\n      if (targetElement) {\n        targetElement.scrollIntoView({\n          behavior: \"smooth\",\n          block: \"nearest\",\n          inline: \"nearest\",\n        });\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(focusTimer);\n      clearTimeout(scrollTimer);\n    };\n  }, [showInputProviderId]);\n\n  useEffect(() => {\n    return () => {\n      setShowInputProviderId(\"\");\n      setInputValue(\"\");\n    };\n  }, []);\n\n  const handleSelect = (modelProvider: AiModelServiceProvider, model: AiModel) => {\n    onSelect?.(modelProvider, model);\n    setShowInputProviderId(\"\");\n    setInputValue(\"\");\n  };\n\n  const renderTitle = (modelProvider: AiModelServiceProvider) => {\n    return (\n      <div\n        className={classNames(\n          \"biz-h-6 biz-text-text-3 biz-px-3 biz-pt-1 biz-w-full\",\n          \"biz-flex biz-items-center biz-box-border biz-gap-2.5 biz-text-[14px]\",\n          titleClassName,\n        )}\n        title={modelProvider.name}\n      >\n        <div className=\"biz-w-0 biz-flex-1 biz-truncate\">{modelProvider.name}</div>\n        {modelProvider.isCustom && modelProvider.modelList.length === 0 && (\n          <IconBtn\n            onClick={() => {\n              setShowInputProviderId(modelProvider.id);\n            }}\n            icon={\n              <PlusOutlined className=\"biz-w-3 biz-h-3 biz-text-text-2 hover:biz-text-text-1 biz-flex-center\" />\n            }\n          />\n        )}\n      </div>\n    );\n  };\n\n  const renderItem = (modelProvider: AiModelServiceProvider, model?: AiModel) => {\n    if (modelProvider.isCustom) {\n      if (modelProvider.id !== showInputProviderId && !modelProvider.modelList?.length) {\n        return null;\n      }\n    }\n    const normalContent = (\n      <>\n        <img src={modelProvider.iconSrc} className=\"biz-w-4 biz-h-4\" />\n        <div className=\"biz-truncate biz-w-0 biz-flex-1 biz-text-[14px]\" title={model?.name}>\n          {model?.name}\n        </div>\n        {modelProvider.isCustom && (\n          <IconBtn\n            onClick={(e) => {\n              setShowInputProviderId(modelProvider.id);\n              setInputValue(model?.name || \"\");\n              e.stopPropagation();\n            }}\n            className=\"biz-hidden group-hover:!biz-flex\"\n            style={{ display: \"none\" }}\n            icon={\n              <EditOutlined className=\"biz-w-3 biz-h-3 biz-text-text-2 hover:biz-text-text-1 biz-flex-center\" />\n            }\n          />\n        )}\n      </>\n    );\n\n    const handlePressEnter = () => {\n      if (inputValue) {\n        setCustomModelServiceProviderList(\n          produce(customModelServiceProviderList, (draft) => {\n            const index = draft.findIndex((i) => i.id === modelProvider.id);\n            if (index !== -1) {\n              draft[index].modelList = [{ id: inputValue, name: inputValue }];\n            }\n          }),\n        );\n        setShowInputProviderId(\"\");\n        setInputValue(\"\");\n      }\n    };\n\n    const handleBlur = () => {\n      if (!inputValue) {\n        setShowInputProviderId(\"\");\n      }\n    };\n\n    const isSelected = value?.modelProviderId === modelProvider.id && value?.modelId === model?.id;\n\n    return (\n      <div\n        key={model?.id || `input-${modelProvider.id}`}\n        data-provider-id={modelProvider.id}\n        className={classNames(\n          \"biz-px-3 biz-py-[3px] biz-flex biz-items-center biz-gap-2\",\n          \"biz-text-text-2 biz-h-8 biz-w-full biz-box-border\",\n          \"hover:biz-bg-bg-white biz-cursor-pointer biz-group\",\n          isSelected && \"biz-bg-bg-white\",\n          itemClassName,\n        )}\n        onClick={() => {\n          if (model && !showInputProviderId) {\n            handleSelect(modelProvider, model);\n          }\n        }}\n      >\n        {showInputProviderId === modelProvider.id\n          ? renderInput({\n              value: inputValue,\n              onChange: (value) => setInputValue(value),\n              onPressEnter: handlePressEnter,\n              onBlur: handleBlur,\n              ref: inputRef,\n            })\n          : normalContent}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      style={style}\n      className={classNames(\n        \"biz-bg-[#181B22] biz-border-one biz-rounded-[4px] biz-py-1 biz-h-[200px]\",\n        \"biz-flex biz-flex-col biz-w-[160px] biz-max-h-[450px] biz-overflow-auto gap-1\",\n        className,\n      )}\n    >\n      {otherModelServiceProviderList.map((provider) => (\n        <div\n          key={provider.id}\n          className=\"biz-flex biz-flex-col biz-gap-1 biz-w-full biz-box-border\"\n        >\n          {renderTitle(provider)}\n          <div className=\"biz-flex biz-flex-col biz-w-full gap-1\">\n            {provider.modelList.map((model) => renderItem(provider, model))}\n          </div>\n        </div>\n      ))}\n      {customModelServiceProviderList.map((provider) => (\n        <div\n          key={provider.id}\n          className=\"biz-flex biz-flex-col biz-gap-1 biz-w-full biz-box-border\"\n        >\n          {renderTitle(provider)}\n          <div className=\"biz-flex biz-flex-col biz-w-full gap-1\">\n            {renderItem(provider, provider.modelList[0])}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","Fragment","value"],"mappings":";;;;;;AA4Ba,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEE,QAAA,WAAW,OAAiB,IAAI;AAEhC,QAAA,CAAC,gCAAgC,iCAAiC,IAAI;AAAA,IAC1E,yBAAyB,OAAO,CAAC,SAAS,KAAK,QAAQ;AAAA,EACzD;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAiB,EAAE;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AAEvD,QAAM,gCAAgC,yBAAyB,OAAO,CAAC,SAAS,CAAC,KAAK,QAAQ;AAE9F,YAAU,MAAM;AACd,QAAI,CAAC,oBAAqB;AAGpB,UAAA,aAAa,WAAW,MAAM;;AAClC,qBAAS,YAAT,mBAAkB;AAAA,OACjB,CAAC;AAGE,UAAA,cAAc,WAAW,MAAM;AAEnC,YAAM,gBAAgB,SAAS,cAAc,sBAAsB,mBAAmB,IAAI;AAC1F,UAAI,eAAe;AACjB,sBAAc,eAAe;AAAA,UAC3B,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,OAEF,CAAC;AAEJ,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,mBAAa,WAAW;AAAA,IAC1B;AAAA,EAAA,GACC,CAAC,mBAAmB,CAAC;AAExB,YAAU,MAAM;AACd,WAAO,MAAM;AACX,6BAAuB,EAAE;AACzB,oBAAc,EAAE;AAAA,IAClB;AAAA,EACF,GAAG,EAAE;AAEC,QAAA,eAAe,CAAC,eAAuC,UAAmB;AAC9E,yCAAW,eAAe;AAC1B,2BAAuB,EAAE;AACzB,kBAAc,EAAE;AAAA,EAClB;AAEM,QAAA,cAAc,CAAC,kBAA0C;AAE3D,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO,cAAc;AAAA,QAErB,UAAA;AAAA,UAAAC,kCAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,UAAA,cAAc,MAAK;AAAA,UACpE,cAAc,YAAY,cAAc,UAAU,WAAW,KAC5DA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,MAAM;AACb,uCAAuB,cAAc,EAAE;AAAA,cACzC;AAAA,cACA,MACEA,kCAAAA,IAAC,cAAa,EAAA,WAAU,wEAAwE,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAEpG;AAAA,MAAA;AAAA,IAEJ;AAAA,EAEJ;AAEM,QAAA,aAAa,CAAC,eAAuC,UAAoB;;AAC7E,QAAI,cAAc,UAAU;AAC1B,UAAI,cAAc,OAAO,uBAAuB,GAAC,mBAAc,cAAd,mBAAyB,SAAQ;AACzE,eAAA;AAAA,MAAA;AAAA,IACT;AAEF,UAAM,gBAEFD,kCAAAA,KAAAE,kBAAA,UAAA,EAAA,UAAA;AAAA,MAAAD,kCAAA,IAAC,OAAI,EAAA,KAAK,cAAc,SAAS,WAAU,mBAAkB;AAAA,MAC7DA,kCAAAA,IAAC,SAAI,WAAU,mDAAkD,OAAO,+BAAO,MAC5E,yCAAO,KACV,CAAA;AAAA,MACC,cAAc,YACbA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,CAAC,MAAM;AACd,mCAAuB,cAAc,EAAE;AACzB,2BAAA,+BAAO,SAAQ,EAAE;AAC/B,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACA,WAAU;AAAA,UACV,OAAO,EAAE,SAAS,OAAO;AAAA,UACzB,MACEA,kCAAAA,IAAC,cAAa,EAAA,WAAU,wEAAwE,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEpG,GAEJ;AAGF,UAAM,mBAAmB,MAAM;AAC7B,UAAI,YAAY;AACd;AAAA,UACE,QAAQ,gCAAgC,CAAC,UAAU;AAC3C,kBAAA,QAAQ,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,cAAc,EAAE;AAC9D,gBAAI,UAAU,IAAI;AACV,oBAAA,KAAK,EAAE,YAAY,CAAC,EAAE,IAAI,YAAY,MAAM,YAAY;AAAA,YAAA;AAAA,UAEjE,CAAA;AAAA,QACH;AACA,+BAAuB,EAAE;AACzB,sBAAc,EAAE;AAAA,MAAA;AAAA,IAEpB;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,CAAC,YAAY;AACf,+BAAuB,EAAE;AAAA,MAAA;AAAA,IAE7B;AAEA,UAAM,cAAa,+BAAO,qBAAoB,cAAc,OAAM,+BAAO,cAAY,+BAAO;AAG1F,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,oBAAkB,cAAc;AAAA,QAChC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACT,cAAA,SAAS,CAAC,qBAAqB;AACjC,yBAAa,eAAe,KAAK;AAAA,UAAA;AAAA,QAErC;AAAA,QAEC,UAAA,wBAAwB,cAAc,KACnC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,UAAU,CAACE,WAAU,cAAcA,MAAK;AAAA,UACxC,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,KAAK;AAAA,QAAA,CACN,IACD;AAAA,MAAA;AAAA,OAvBC,+BAAO,OAAM,SAAS,cAAc,EAAE;AAAA,IAwB7C;AAAA,EAEJ;AAGE,SAAAH,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAA8B,8BAAA,IAAI,CAAC,aAClCA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,YAAY,QAAQ;AAAA,cACpBC,kCAAAA,IAAA,OAAA,EAAI,WAAU,0CACZ,UAAS,SAAA,UAAU,IAAI,CAAC,UAAU,WAAW,UAAU,KAAK,CAAC,EAChE,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANK,SAAS;AAAA,QAAA,CAQjB;AAAA,QACA,+BAA+B,IAAI,CAAC,aACnCD,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,YAAY,QAAQ;AAAA,cACrBC,kCAAAA,IAAC,OAAI,EAAA,WAAU,0CACZ,UAAA,WAAW,UAAU,SAAS,UAAU,CAAC,CAAC,EAC7C,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANK,SAAS;AAAA,QAQjB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/lib/components/ai-model-select/iconBtn.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconBtn.es.js","sources":["../../../../src/components/ai-model-select/iconBtn.tsx"],"sourcesContent":["import React, { HTMLProps } from 'react';\nimport classNames from 'classnames';\n\nexport interface IconBtnProps extends Omit<HTMLProps<HTMLDivElement>, 'dangerouslySetInnerHTML'> {\n  icon: React.ReactNode;\n}\n\nexport const IconBtn = (props: IconBtnProps) => {\n  const { className = '', icon, ...restProps } = props;\n  return (\n    <div\n      className={classNames(\n        'biz-bg-bg-white biz-w-5 biz-h-5 biz-rounded-[4px] biz-flex-center',\n        'biz-cursor-pointer',\n        className,\n      )}\n      {...restProps}\n    >\n      {icon}\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;AAOa,MAAA,UAAU,CAAC,UAAwB;AAC9C,QAAM,EAAE,YAAY,IAAI,MAAM,GAAG,UAAc,IAAA;AAE7C,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"iconBtn.es.js","sources":["../../../../src/components/ai-model-select/iconBtn.tsx"],"sourcesContent":["import React, { HTMLProps } from \"react\";\nimport classNames from \"classnames\";\n\nexport interface IconBtnProps extends Omit<HTMLProps<HTMLDivElement>, \"dangerouslySetInnerHTML\"> {\n  icon: React.ReactNode;\n}\n\nexport const IconBtn = (props: IconBtnProps) => {\n  const { className = \"\", icon, ...restProps } = props;\n  return (\n    <div\n      className={classNames(\n        \"biz-bg-bg-white biz-w-5 biz-h-5 biz-rounded-[4px] biz-flex-center\",\n        \"biz-cursor-pointer\",\n        className,\n      )}\n      {...restProps}\n    >\n      {icon}\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;AAOa,MAAA,UAAU,CAAC,UAAwB;AAC9C,QAAM,EAAE,YAAY,IAAI,MAAM,GAAG,UAAc,IAAA;AAE7C,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/lib/components/circle-loading/circle-loading.es.js

@@ -0,0 +1,10 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
+import SvgCircleLoading from "../../asserts/icons/circle-loading.svg.es.js";
+const CircleLoading = ({ className, ...restProps }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgCircleLoading, { ...restProps, className: classNames("biz-animate-spin", className) });
+};
+export {
+  CircleLoading
+};
+//# sourceMappingURL=circle-loading.es.js.map

package/dist/lib/components/circle-loading/circle-loading.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle-loading.es.js","sources":["../../../../src/components/circle-loading/circle-loading.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\nimport classNames from \"classnames\";\nimport CircleLoadingIcon from \"@/asserts/icons/circle-loading.svg?react\";\n\ninterface CircleLoadingProps extends SVGProps<SVGSVGElement> {}\n\nexport const CircleLoading = ({ className, ...restProps }: CircleLoadingProps) => {\n  return <CircleLoadingIcon {...restProps} className={classNames(\"biz-animate-spin\", className)} />;\n};\n"],"names":["jsx","CircleLoadingIcon"],"mappings":";;;AAMO,MAAM,gBAAgB,CAAC,EAAE,WAAW,GAAG,gBAAoC;AACzE,SAAAA,kCAAA,IAACC,oBAAmB,GAAG,WAAW,WAAW,WAAW,oBAAoB,SAAS,GAAG;AACjG;"}

package/dist/lib/components/code-mirror-editor/code-mirror-editor.es.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { javascript, javascriptLanguage } from "../../node_modules/.pnpm/@codemirror_lang-javascript@6.2.1/node_modules/@codemirror/lang-javascript/dist/index.es.js";
 import { json } from "../../node_modules/.pnpm/@codemirror_lang-json@6.0.1/node_modules/@codemirror/lang-json/dist/index.es.js";
 import { sql } from "../../node_modules/.pnpm/@codemirror_lang-sql@6.6.4_@codemirror_view@6.38.0/node_modules/@codemirror/lang-sql/dist/index.es.js";
@@ -10,8 +10,8 @@ import { abcdefInit } from "../../node_modules/.pnpm/@uiw_codemirror-theme-abcde
 import ReactCodeMirror from "../../node_modules/.pnpm/@uiw_react-codemirror@4.21.20_@babel_runtime@7.28.4_@codemirror_autocomplete@6.11.0_@co_ff1355904658c12b685301b441bcb50e/node_modules/@uiw/react-codemirror/esm/index.es.js";
 import useMemoizedFn from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMemoizedFn/index.es.js";
 import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
-import { GLOBAL_OBJECT_COMPLETIONS } from "./constants.es.js";
-import { lintJavaScriptCode } from "./utils.es.js";
+import { createCustomCompletionsSource, lintJavaScriptCode } from "./utils.es.js";
+/* empty css                  */
 const CodeMirrorEditor = (props) => {
   const {
     languageMode,
@@ -22,36 +22,16 @@ const CodeMirrorEditor = (props) => {
     environment = "browser",
     placeholder: placeholderText,
     showLintGutter = false,
+    customCompletions,
     ...restCodeMirrorProps
   } = props;
   const handleOnChange = (value) => {
     onChange == null ? void 0 : onChange(value);
   };
-  const createCustomCompletions = () => {
-    return (context) => {
-      const word = context.matchBefore(/\w*/);
-      if (!word) return null;
-      const line = context.state.doc.lineAt(context.pos);
-      const lineText = line.text;
-      const beforeCursor = lineText.slice(0, context.pos - line.from);
-      const memberMatch = beforeCursor.match(/(\w+)\.$/);
-      if (memberMatch) {
-        const objectName = memberMatch[1];
-        if (GLOBAL_OBJECT_COMPLETIONS[objectName]) {
-          return {
-            from: context.pos,
-            options: GLOBAL_OBJECT_COMPLETIONS[objectName].map((method) => ({
-              label: method,
-              type: "method",
-              info: `${objectName}.${method}()`,
-              apply: method
-            }))
-          };
-        }
-      }
-      return null;
-    };
-  };
+  const createCustomCompletions = useCallback(
+    () => createCustomCompletionsSource(customCompletions),
+    [customCompletions]
+  );
   const createJSLinter = useMemoizedFn(() => {
     return (view) => {
       const code2 = view.state.doc.toString();
@@ -96,16 +76,16 @@ const CodeMirrorEditor = (props) => {
       return json();
     }
     return sql();
-  }, [languageMode]);
-  const codeLinter = useMemo(() => {
+  }, [languageMode, createCustomCompletions]);
+  const codeLinter = () => {
     if (languageMode === "javascript") {
       return createJSLinter();
     }
     if (languageMode === "json") {
       return createJSONLinter();
     }
-    return () => [];
-  }, [createJSLinter, languageMode]);
+    return null;
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -115,6 +95,7 @@ const CodeMirrorEditor = (props) => {
         'rp-[[class~="cm-gutters-before"]]:biz-border-solid rp-[[class~="cm-gutters-before"]]:biz-border-0',
         // 防止聚焦时边框变成虚线
         'rp-[[class~="cm-focused"]]:!biz-outline-0',
+        "rp-[.cm-completionDetail]:!biz-text-[#ffffff66] rp-[.cm-completionDetail]:!biz-not-italic",
         wrapperClassName
       ),
       style: wrapperStyle,
@@ -126,7 +107,7 @@ const CodeMirrorEditor = (props) => {
           extensions: [
             ...Array.isArray(langExtension) ? langExtension : [langExtension],
             ...showLintGutter ? [lintGutter()] : [],
-            linter(codeLinter),
+            linter(codeLinter()),
             ...placeholderText && !code ? [placeholder(placeholderText)] : [],
             EditorView.lineWrapping
             // 添加自动换行扩展

package/dist/lib/components/code-mirror-editor/code-mirror-editor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-mirror-editor.es.js","sources":["../../../../src/components/code-mirror-editor/code-mirror-editor.tsx"],"sourcesContent":["import { ComponentProps, useMemo } from 'react';\nimport { CompletionContext, CompletionResult } from '@codemirror/autocomplete';\nimport { javascript, javascriptLanguage } from '@codemirror/lang-javascript';\nimport { json } from '@codemirror/lang-json';\nimport { sql } from '@codemirror/lang-sql';\nimport { Diagnostic, linter, lintGutter, LintSource } from '@codemirror/lint';\nimport { EditorView, placeholder } from '@codemirror/view';\nimport { tags as t } from '@lezer/highlight';\nimport { abcdefInit } from '@uiw/codemirror-theme-abcdef';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { useMemoizedFn } from 'ahooks';\nimport classNames from 'classnames';\nimport { GLOBAL_OBJECT_COMPLETIONS } from './constants';\nimport { lintJavaScriptCode } from './utils';\n\nexport interface CodeMirrorEditorProps extends ComponentProps<typeof CodeMirror> {\n  languageMode: 'javascript' | 'json' | 'sql';\n  code: string;\n  onChange: (v: string) => void;\n  wrapperClassName?: string;\n  wrapperStyle?: React.CSSProperties;\n  environment?: 'browser' | 'node'; // 运行环境选择\n  placeholder?: string; // placeholder 文本\n  showLintGutter?: boolean; // 是否显示左侧错误图标，默认为 true;\n}\n\nexport const CodeMirrorEditor = (props: CodeMirrorEditorProps) => {\n  const {\n    languageMode,\n    code,\n    onChange,\n    wrapperClassName,\n    wrapperStyle,\n    environment = 'browser',\n    placeholder: placeholderText,\n    showLintGutter = false,\n    ...restCodeMirrorProps\n  } = props;\n\n  const handleOnChange = (value: string) => {\n    onChange?.(value);\n  };\n\n  // 创建自定义补全源，用于全局对象方法补全\n  const createCustomCompletions = () => {\n    return (context: CompletionContext): CompletionResult | null => {\n      const word = context.matchBefore(/\\w*/);\n      if (!word) return null;\n\n      const line = context.state.doc.lineAt(context.pos);\n      const lineText = line.text;\n      const beforeCursor = lineText.slice(0, context.pos - line.from);\n\n      // 检测是否在输入对象的属性（如 console.）\n      const memberMatch = beforeCursor.match(/(\\w+)\\.$/);\n      if (memberMatch) {\n        const objectName = memberMatch[1];\n\n        // 使用常量中定义的全局对象方法补全\n        if (GLOBAL_OBJECT_COMPLETIONS[objectName]) {\n          return {\n            from: context.pos,\n            options: GLOBAL_OBJECT_COMPLETIONS[objectName].map((method) => ({\n              label: method,\n              type: 'method',\n              info: `${objectName}.${method}()`,\n              apply: method,\n            })),\n          };\n        }\n      }\n\n      return null;\n    };\n  };\n\n  // 自定义JavaScript语法检查器\n  const createJSLinter: () => LintSource = useMemoizedFn(() => {\n    return (view: EditorView) => {\n      const code = view.state.doc.toString() as string;\n      return lintJavaScriptCode(code, environment, view);\n    };\n  });\n\n  // 自定义JSON语法检查器\n  const createJSONLinter: () => LintSource = () => {\n    const fn: LintSource = (view: any) => {\n      const diagnostics: Diagnostic[] = [];\n      const code = view.state.doc.toString();\n\n      try {\n        JSON.parse(code);\n      } catch (error: any) {\n        const match = error.message.match(/position (\\d+)/);\n        if (match) {\n          const pos = parseInt(match[1]);\n          const line = view.state.doc.lineAt(pos);\n          const from = line.from;\n          const to = line.to;\n\n          diagnostics.push({\n            from,\n            to,\n            severity: 'error',\n            message: `JSON解析错误: ${error.message.replace('JSON.parse: ', '')}`,\n          });\n        }\n      }\n      return diagnostics;\n    };\n    return fn;\n  };\n\n  // 为JavaScript语言添加自定义补全源\n  const langExtension = useMemo(() => {\n    if (languageMode === 'javascript') {\n      return [\n        javascript(),\n        javascriptLanguage.data.of({\n          autocomplete: createCustomCompletions(),\n        }),\n      ];\n    }\n    if (languageMode === 'json') {\n      return json();\n    }\n    return sql();\n  }, [languageMode]);\n  const codeLinter = useMemo(() => {\n    if (languageMode === 'javascript') {\n      return createJSLinter();\n    }\n    if (languageMode === 'json') {\n      return createJSONLinter();\n    }\n    return () => [];\n  }, [createJSLinter, languageMode]);\n\n  return (\n    <div\n      className={classNames(\n        'biz-border-one biz-border-[#393b4a]',\n        'rp-[[class~=\"cm-gutters-before\"]]:biz-border-r-[1px] rp-[[class~=\"cm-gutters-before\"]]:biz-border-[#393b4a]',\n        'rp-[[class~=\"cm-gutters-before\"]]:biz-border-solid rp-[[class~=\"cm-gutters-before\"]]:biz-border-0',\n        // 防止聚焦时边框变成虚线\n        'rp-[[class~=\"cm-focused\"]]:!biz-outline-0',\n        wrapperClassName,\n      )}\n      style={wrapperStyle}\n    >\n      <CodeMirror\n        {...restCodeMirrorProps}\n        value={code}\n        extensions={[\n          ...(Array.isArray(langExtension) ? langExtension : [langExtension]),\n          ...(showLintGutter ? [lintGutter()] : []),\n          linter(codeLinter),\n          ...(placeholderText && !code ? [placeholder(placeholderText)] : []),\n          EditorView.lineWrapping, // 添加自动换行扩展\n        ]}\n        theme={abcdefInit({\n          settings: {\n            caret: '#c6c6c6',\n            fontFamily: 'monospace',\n            gutterBackground: '#111111', // 行号列背景色\n            gutterForeground: 'rgba(255, 255, 255, 0.8)', // 行号文字颜色\n            gutterBorder: '#393b4a', // 行号列边框颜色\n            lineHighlight: 'rgba(255, 255, 255, 0.031)', // 高亮行背景色\n          },\n          styles: [\n            { tag: t.comment, color: '#6272a4' },\n            { tag: t.string, color: '#61afef' }, // 字符串引号中的文字\n            { tag: t.number, color: '#e5c07b' },\n          ],\n        })}\n        onChange={handleOnChange}\n        basicSetup={{\n          lineNumbers: true,\n          highlightActiveLineGutter: true,\n          highlightActiveLine: true,\n          bracketMatching: true,\n          closeBrackets: true,\n          foldGutter: true,\n          tabSize: 2,\n          indentOnInput: true,\n          syntaxHighlighting: true,\n          autocompletion: true,\n          ...(typeof restCodeMirrorProps?.basicSetup === 'object'\n            ? restCodeMirrorProps.basicSetup\n            : undefined),\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["code","jsx","CodeMirror","t"],"mappings":"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"}
+{"version":3,"file":"code-mirror-editor.es.js","sources":["../../../../src/components/code-mirror-editor/code-mirror-editor.tsx"],"sourcesContent":["import { ComponentProps, useCallback, useMemo } from \"react\";\nimport { javascript, javascriptLanguage } from \"@codemirror/lang-javascript\";\nimport { json } from \"@codemirror/lang-json\";\nimport { sql } from \"@codemirror/lang-sql\";\nimport { Diagnostic, linter, lintGutter, LintSource } from \"@codemirror/lint\";\nimport { EditorView, placeholder } from \"@codemirror/view\";\nimport { tags as t } from \"@lezer/highlight\";\nimport { abcdefInit } from \"@uiw/codemirror-theme-abcdef\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport { useMemoizedFn } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { CustomCompletionConfig } from \"./types\";\nimport { createCustomCompletionsSource, lintJavaScriptCode } from \"./utils\";\nimport \"./completion.css\";\n\nexport interface CodeMirrorEditorProps extends ComponentProps<typeof CodeMirror> {\n  languageMode: \"javascript\" | \"json\" | \"sql\";\n  code: string;\n  onChange: (v: string) => void;\n  wrapperClassName?: string;\n  wrapperStyle?: React.CSSProperties;\n  environment?: \"browser\" | \"node\"; // 运行环境选择\n  placeholder?: string; // placeholder 文本\n  /** 是否显示左侧错误图标，默认为 false */\n  showLintGutter?: boolean;\n  /** 自定义补全配置 */\n  customCompletions?: CustomCompletionConfig;\n}\n\nexport const CodeMirrorEditor = (props: CodeMirrorEditorProps) => {\n  const {\n    languageMode,\n    code,\n    onChange,\n    wrapperClassName,\n    wrapperStyle,\n    environment = \"browser\",\n    placeholder: placeholderText,\n    showLintGutter = false,\n    customCompletions,\n    ...restCodeMirrorProps\n  } = props;\n\n  const handleOnChange = (value: string) => {\n    onChange?.(value);\n  };\n\n  // 创建自定义补全源，用于全局对象方法补全和自定义变量/函数补全\n  const createCustomCompletions = useCallback(\n    () => createCustomCompletionsSource(customCompletions),\n    [customCompletions],\n  );\n\n  // 自定义JavaScript语法检查器\n  const createJSLinter: () => LintSource = useMemoizedFn(() => {\n    return (view: EditorView) => {\n      const code = view.state.doc.toString() as string;\n      return lintJavaScriptCode(code, environment, view);\n    };\n  });\n\n  // 自定义JSON语法检查器\n  const createJSONLinter: () => LintSource = () => {\n    const fn: LintSource = (view: any) => {\n      const diagnostics: Diagnostic[] = [];\n      const code = view.state.doc.toString();\n\n      try {\n        JSON.parse(code);\n      } catch (error: any) {\n        const match = error.message.match(/position (\\d+)/);\n        if (match) {\n          const pos = parseInt(match[1]);\n          const line = view.state.doc.lineAt(pos);\n          const from = line.from;\n          const to = line.to;\n\n          diagnostics.push({\n            from,\n            to,\n            severity: \"error\",\n            message: `JSON解析错误: ${error.message.replace(\"JSON.parse: \", \"\")}`,\n          });\n        }\n      }\n      return diagnostics;\n    };\n    return fn;\n  };\n\n  // 为JavaScript语言添加自定义补全源\n  const langExtension = useMemo(() => {\n    if (languageMode === \"javascript\") {\n      return [\n        javascript(),\n        javascriptLanguage.data.of({\n          autocomplete: createCustomCompletions(),\n        }),\n      ];\n    }\n    if (languageMode === \"json\") {\n      return json();\n    }\n    return sql();\n  }, [languageMode, createCustomCompletions]);\n  const codeLinter = () => {\n    if (languageMode === \"javascript\") {\n      return createJSLinter();\n    }\n    if (languageMode === \"json\") {\n      return createJSONLinter();\n    }\n    return null;\n  };\n\n  return (\n    <div\n      className={classNames(\n        \"biz-border-one biz-border-[#393b4a]\",\n        'rp-[[class~=\"cm-gutters-before\"]]:biz-border-r-[1px] rp-[[class~=\"cm-gutters-before\"]]:biz-border-[#393b4a]',\n        'rp-[[class~=\"cm-gutters-before\"]]:biz-border-solid rp-[[class~=\"cm-gutters-before\"]]:biz-border-0',\n        // 防止聚焦时边框变成虚线\n        'rp-[[class~=\"cm-focused\"]]:!biz-outline-0',\n        \"rp-[.cm-completionDetail]:!biz-text-[#ffffff66] rp-[.cm-completionDetail]:!biz-not-italic\",\n        wrapperClassName,\n      )}\n      style={wrapperStyle}\n    >\n      <CodeMirror\n        {...restCodeMirrorProps}\n        value={code}\n        extensions={[\n          ...(Array.isArray(langExtension) ? langExtension : [langExtension]),\n          ...(showLintGutter ? [lintGutter()] : []),\n          linter(codeLinter()),\n          ...(placeholderText && !code ? [placeholder(placeholderText)] : []),\n          EditorView.lineWrapping, // 添加自动换行扩展\n        ]}\n        theme={abcdefInit({\n          settings: {\n            caret: \"#c6c6c6\",\n            fontFamily: \"monospace\",\n            gutterBackground: \"#111111\", // 行号列背景色\n            gutterForeground: \"rgba(255, 255, 255, 0.8)\", // 行号文字颜色\n            gutterBorder: \"#393b4a\", // 行号列边框颜色\n            lineHighlight: \"rgba(255, 255, 255, 0.031)\", // 高亮行背景色\n          },\n          styles: [\n            { tag: t.comment, color: \"#6272a4\" },\n            { tag: t.string, color: \"#61afef\" }, // 字符串引号中的文字\n            { tag: t.number, color: \"#e5c07b\" },\n          ],\n        })}\n        onChange={handleOnChange}\n        basicSetup={{\n          lineNumbers: true,\n          highlightActiveLineGutter: true,\n          highlightActiveLine: true,\n          bracketMatching: true,\n          closeBrackets: true,\n          foldGutter: true,\n          tabSize: 2,\n          indentOnInput: true,\n          syntaxHighlighting: true,\n          autocompletion: true,\n          ...(typeof restCodeMirrorProps?.basicSetup === \"object\"\n            ? restCodeMirrorProps.basicSetup\n            : undefined),\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["code","jsx","CodeMirror","t"],"mappings":"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"}