@touchvue/chat 1.0.0-beta.3 → 1.0.0-beta.31

package/es/packages/components/touchchat/src/AiChat/ChatInput.vue2.mjs

@@ -1,4 +1,12 @@
-import { defineComponent, inject, openBlock, createElementBlock, createElementVNode, createCommentVNode, unref, withKeys, normalizeClass, Fragment } from 'vue';
+import { defineComponent, inject, ref, watch, provide, computed, onMounted, openBlock, createElementBlock, createCommentVNode, createBlock, createElementVNode, unref, withKeys, normalizeClass, withCtx, toDisplayString, Fragment, createVNode, nextTick } from 'vue';
+import MarkLayer from '../../component/MarkLayer.vue.mjs';
+import FileContent from '../../component/FileContent.vue.mjs';
+import UploadView from '../../component/UploadView.vue.mjs';
+import Screenshot from '../../component/Screenshot.vue.mjs';
+import Voice from '../../component/VoiceView.vue.mjs';
+import RealtimeVoice from '../../component/RealtimeVoice.vue.mjs';
+import ModuleSelect from '../../component/ModuleSelect.vue.mjs';
+import { showToast } from '../../utils/tools.mjs';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ChatInput",
@@ -7,12 +15,229 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     isChating: { type: Boolean },
     enableDeepThinking: { type: Boolean }
   },
-  emits: ["send", "stop", "update:enableDeepThinking", "update:inputValue"],
-  setup(__props, { emit: __emit }) {
-    const placeholder = inject("placeholder", "\u8BF7\u8F93\u5165...");
-    const isThinking = inject("isThinking", false);
+  emits: ["send", "stop", "update:enableDeepThinking", "update:inputValue", "moduleInfo"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const placeholder = inject("placeholder", "\u8BF7\u8F93\u5165...");
+    const layout = inject("layout", "side, think, upload, chain, screen,realtime");
+    const modules = inject("modules", []);
+    const iModules = ref(modules);
+    watch(
+      () => modules,
+      (newVal) => {
+        iModules.value = newVal;
+        console.log("modules === ChatInput.vue === 128", newVal);
+      }
+      // { immediate: true }
+    );
+    const allowedTypes = inject("allowedTypes", []);
+    provide("uploadFile", (index, type) => {
+      if (uploadViewRef.value) {
+        uploadViewRef.value.uploadFile(index, type);
+      }
+    });
+    const thinkAble = layout.includes("think");
+    const clearAble = layout.includes("clear");
+    const uploadAble = layout.includes("upload");
+    const screenAble = layout.includes("screen");
+    const voiceAble = layout.includes("voice");
+    const realtimeVoiceAble = layout.includes("realtime");
+    const showMarkLaryer = ref(false);
+    const fileList = ref([]);
+    const optionalModules = ref([
+      {
+        name: "deepseek-v3",
+        config: {
+          action: "https://api.apiyi.com/v1/chat/completions",
+          headers: () => ({
+            "Content-Type": "application/json",
+            Authorization: "Bearer sk-fe9MtODvds8wpzz05f3417Fe3e9641C1926e6fC588425dEd"
+          }),
+          body: () => ({
+            model: "deepseek-v3",
+            messages: [
+              {
+                role: "user",
+                // content: props.inputValue // 使用传入的用户内容参数
+                content: ""
+              }
+            ],
+            stream: true
+          }),
+          respoKey: () => ({
+            category: "category",
+            contentCategory: "task_stream_content",
+            content: "content",
+            all: "message",
+            allCategory: "answer"
+          })
+        }
+      }
+    ]);
+    const uploadViewRef = ref();
+    const selectVal = ref("");
+    const selectInfo = ref();
+    const voiceRef = ref();
+    const modelChange = inject("modelChange", () => {
+      console.warn("\u672A\u63D0\u4F9BmodelChange\u51FD\u6570");
+    });
     const emits = __emit;
+    watch(
+      () => selectVal.value,
+      () => {
+        console.log("selectVal.value === ChatInput.vue === 198", selectVal.value);
+        if (finallyModules.value.length > 0) {
+          selectInfo.value = finallyModules.value.find((item) => item.name === selectVal.value);
+          if (selectInfo.value) {
+            emits("moduleInfo", selectInfo.value);
+            modelChange(selectInfo.value, finallyModules.value.indexOf(selectInfo.value));
+          }
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.enableDeepThinking,
+      () => {
+        updateSelectInfo();
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.inputValue,
+      () => {
+        updateSelectInfo();
+      },
+      { deep: true }
+    );
+    const finallyModules = computed(() => {
+      if (!iModules.value.length) {
+        return optionalModules.value;
+      }
+      return iModules.value.flatMap((module) => {
+        if (typeof module === "string") {
+          const matchedModule = optionalModules.value.find((optModule) => optModule.name === module);
+          if (matchedModule) {
+            const updatedModule = { ...matchedModule };
+            const body = updatedModule.config.body();
+            if (thinkAble) {
+              body.model = props.enableDeepThinking ? "deepseek-reasoner" : "deepseek-v3";
+            }
+            updatedModule.config.body = () => body;
+            return [updatedModule];
+          }
+          return [];
+        } else {
+          const body = module.config.body();
+          if (thinkAble) {
+            body.model = props.enableDeepThinking ? "deepseek-reasoner" : "deepseek-v3";
+          }
+          module.config.body = () => body;
+          return [module];
+        }
+      });
+    });
+    const updateSelectInfo = () => {
+      if (finallyModules.value.length > 0 && selectInfo.value) {
+        const body = selectInfo.value.config.body();
+        if (thinkAble && body.model) {
+          body.model = props.enableDeepThinking ? "deepseek-reasoner" : "deepseek-v3";
+        }
+        selectInfo.value.config.body = () => body;
+      }
+    };
+    const upFileList = (list) => {
+      fileList.value.push(...list);
+      nextTick(() => {
+        if (uploadViewRef.value) {
+          uploadViewRef.value.uploadFile(fileList.value.length - 1);
+        }
+      });
+    };
+    const handlePaste = (event, type) => {
+      if (event.clipboardData) {
+        const clipboardData = event.clipboardData || window.Clipboard;
+        const items = clipboardData.items;
+        let isImage = false;
+        for (let i = 0; i < items.length; i++) {
+          if (items[i].type.indexOf("image/") !== -1) {
+            isImage = true;
+            const blob = items[i].getAsFile();
+            if (blob) {
+              const reader = new FileReader();
+              reader.onload = (e) => {
+                var _a;
+                const base64 = (_a = e.target) == null ? void 0 : _a.result;
+                const imageInfo = {
+                  file: blob,
+                  isUploading: false,
+                  uploadProgress: 0,
+                  uploadSuccess: false,
+                  uploadError: false,
+                  fileSize: `${(blob.size / 1024).toFixed(2)} KB`,
+                  fileType: blob.type,
+                  name: `pasted_image_${Date.now()}`,
+                  id: Date.now().toString(),
+                  base64
+                };
+                fileList.value.push(imageInfo);
+                nextTick(() => {
+                  if (uploadViewRef.value) {
+                    uploadViewRef.value.uploadFile(fileList.value.length - 1);
+                  }
+                });
+              };
+              reader.readAsDataURL(blob);
+            }
+            break;
+          }
+        }
+        if (isImage) {
+          console.log("\u68C0\u6D4B\u5230\u7C98\u8D34\u7684\u662F\u56FE\u7247");
+        } else {
+          console.log("\u7C98\u8D34\u7684\u4E0D\u662F\u56FE\u7247");
+        }
+      } else {
+        if (type === "copy") {
+          fileList.value = event;
+          nextTick(() => {
+            if (uploadViewRef.value) {
+              uploadViewRef.value.uploadFile(fileList.value.length - 1);
+            }
+          });
+          return;
+        }
+        fileList.value.push(...event);
+        nextTick(() => {
+          if (uploadViewRef.value) {
+            uploadViewRef.value.uploadFile(fileList.value.length - 1);
+          }
+        });
+      }
+    };
+    const openMarkLayer = () => {
+      showMarkLaryer.value = true;
+    };
+    const colseMarkLayer = () => {
+      showMarkLaryer.value = false;
+    };
+    const handleColse = (id) => {
+      const index = fileList.value.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        fileList.value.splice(index, 1);
+      }
+    };
+    const startRealtimeVoice = () => {
+      if (voiceRef.value) {
+        voiceRef.value.toggleRecording(true);
+      }
+    };
+    const transcription = (text) => {
+      emits("update:inputValue", text);
+    };
+    const handleClearClick = () => {
+      emits("update:inputValue", "");
+    };
     const handleInputChange = (e) => {
       const value = e.target.value;
       emits("update:inputValue", value);
@@ -20,169 +245,224 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const handleDeepThinkingClick = () => {
       emits("update:enableDeepThinking", !props.enableDeepThinking);
     };
-    const handleSend = () => emits("send");
+    const uploadFile = (file) => {
+      if (file.length > 0) {
+        fileList.value = file;
+      }
+    };
+    const handleSend = (e) => {
+      if (e instanceof KeyboardEvent && e.shiftKey) {
+        return;
+      }
+      if (e instanceof KeyboardEvent) {
+        e.preventDefault();
+      }
+      if (!props.inputValue.trim() && !fileList.value.length) {
+        showToast("\u8BF7\u8F93\u5165\u5185\u5BB9");
+        return;
+      }
+      let uploadError = false;
+      if (fileList.value.length > 0) {
+        fileList.value.forEach((item) => {
+          if (item.uploadError) {
+            uploadError = true;
+          }
+        });
+      }
+      if (uploadError) {
+        showToast("\u4E0A\u4F20\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
+        return;
+      }
+      if (fileList.value.length > 10) {
+        showToast("\u6587\u4EF6\u6570\u91CF\u4E0D\u80FD\u8D85\u8FC710\u4E2A");
+        return;
+      }
+      emits("send", props.inputValue, fileList.value);
+      nextTick(() => {
+        fileList.value = [];
+        if (uploadViewRef.value) {
+          uploadViewRef.value.resetFile();
+        }
+        if (voiceRef.value) {
+          voiceRef.value.resetFile();
+        }
+      });
+    };
+    const itemUploadFile = (index, type) => {
+      if (uploadViewRef.value) {
+        uploadViewRef.value.uploadFile(index, type);
+      }
+    };
     const handleStop = () => emits("stop");
+    onMounted(() => {
+      if (finallyModules.value.length > 0) {
+        selectVal.value = finallyModules.value[0].name;
+        selectInfo.value = finallyModules.value[0];
+        if (selectInfo.value) {
+          emits("moduleInfo", selectInfo.value);
+        }
+      }
+    });
+    __expose({
+      handlePaste,
+      openMarkLayer,
+      colseMarkLayer,
+      itemUploadFile
+    });
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", { class: "input-area-fixed" }, [
-        createElementVNode("div", { class: "input-area" }, [
-          createElementVNode("div", { class: "input-container" }, [
-            createCommentVNode(" \u6DFB\u52A0\u5916\u5C42\u5782\u76F4\u5E03\u5C40\u5BB9\u5668 "),
-            createElementVNode("div", { class: "vertical-input-group" }, [
-              createCommentVNode(" \u5C06v-model\u62C6\u5206\u4E3A:value\u548C@input "),
-              createElementVNode("textarea", {
-                value: _ctx.inputValue,
-                placeholder: (_a = unref(placeholder)) != null ? _a : "\u8BF7\u8F93\u5165...",
-                class: "rounded-input",
-                onInput: handleInputChange,
-                onKeyup: withKeys(handleSend, ["enter"])
-              }, null, 40, ["value", "placeholder"]),
-              createCommentVNode(" \u6309\u94AE\u4E0E\u5F00\u5173\u5BB9\u5668 "),
-              createElementVNode(
-                "div",
+      return openBlock(), createElementBlock("div", { class: "touchchat-edit" }, [
+        createCommentVNode(' :file-progress="fileProgress"  '),
+        fileList.value.length > 0 ? (openBlock(), createBlock(FileContent, {
+          key: 0,
+          "file-list": fileList.value,
+          "has-colse": true,
+          type: "ChatInput",
+          onColse: handleColse
+        }, null, 8, ["file-list"])) : createCommentVNode("v-if", true),
+        createElementVNode("div", { class: "touchchat-edit-input" }, [
+          createCommentVNode(" @keydown.enter.prevent  "),
+          createElementVNode("textarea", {
+            value: __props.inputValue,
+            placeholder: (_a = unref(placeholder)) != null ? _a : "\u8BF7\u8F93\u5165...",
+            onPaste: handlePaste,
+            onInput: handleInputChange,
+            onKeydown: withKeys(handleSend, ["enter"])
+          }, " ", 40, ["value", "placeholder"])
+        ]),
+        createCommentVNode(" \u6309\u94AE\u4E0E\u5F00\u5173\u5BB9\u5668 "),
+        createElementVNode(
+          "div",
+          {
+            class: normalizeClass(unref(thinkAble) ? "touchchat-edit-submit is-thinkable" : "touchchat-edit-submit")
+          },
+          [
+            createElementVNode("div", { class: "touchchat-edit-submit-left" }, [
+              createCommentVNode(' \u9644\u4EF6  @click="showMarkLaryer = true"  @progress-fn="progressFn" '),
+              unref(uploadAble) ? (openBlock(), createBlock(UploadView, {
+                key: 0,
+                ref_key: "uploadViewRef",
+                ref: uploadViewRef,
+                "file-list": fileList.value,
+                onUploadFile: uploadFile
+              }, {
+                default: withCtx(() => [
+                  unref(uploadAble) ? (openBlock(), createElementBlock(
+                    "button",
+                    {
+                      key: 0,
+                      class: normalizeClass(["touchchat-edit-attach", { "is-dis": __props.isChating }])
+                    },
+                    [
+                      createElementVNode("div", { class: "touchchat-edit-attach-icon" }),
+                      createElementVNode("div", { class: "touchchat-edit-attach-tip" }, [
+                        createElementVNode("p", null, "\u6587\u4EF6\u6570\u91CF\uFF1A\u6700\u591A10\u4E2A"),
+                        createElementVNode(
+                          "p",
+                          null,
+                          "\u6587\u4EF6\u7C7B\u578B\uFF1A" + toDisplayString(unref(allowedTypes).join("\u3001") || "pdf\uFF0Ctxt\uFF0Ccsv\uFF0Cdocx\uFF0Cxlsx\uFF0Cxls\uFF0Cpptx\uFF0Cppt\uFF0Cmd\uFF0Cmobi\uFF0Cepub\uFF0Cpng\uFF0Cjpeg\uFF0Cjpg"),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ],
+                    2
+                    /* CLASS */
+                  )) : createCommentVNode("v-if", true)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["file-list"])) : createCommentVNode("v-if", true),
+              unref(clearAble) ? (openBlock(), createElementBlock("button", {
+                key: 1,
+                class: "touchchat-edit-attach",
+                onClick: handleClearClick
+              }, [
+                createElementVNode("div", { class: "touchchat-edit-delete-icon" }),
+                createElementVNode("div", { class: "touchchat-edit-attach-tip touchchat-edit-voice-tip" }, [
+                  createElementVNode("p", null, "\u6E05\u7A7A\u6587\u672C")
+                ])
+              ])) : createCommentVNode("v-if", true),
+              createCommentVNode(" {{ finallyModules.length }} "),
+              finallyModules.value.length > 1 ? (openBlock(), createBlock(ModuleSelect, {
+                key: 2,
+                modelValue: selectVal.value,
+                "onUpdate:modelValue": ($event) => selectVal.value = $event,
+                modules: finallyModules.value
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "modules"])) : createCommentVNode("v-if", true),
+              createCommentVNode(" \u6DF1\u5EA6\u601D\u8003\u5F00\u5173 - \u4FEE\u6539\u4E3A\u6309\u94AE\u6837\u5F0F "),
+              unref(thinkAble) ? (openBlock(), createElementBlock(
+                "button",
                 {
-                  class: normalizeClass(unref(isThinking) ? "controls-container" : "controls-container not-is-thinking")
+                  key: 3,
+                  class: normalizeClass(["touchchat-edit-think", { "is-on": __props.enableDeepThinking, "is-dis": __props.isChating }]),
+                  onClick: handleDeepThinkingClick
                 },
                 [
-                  createCommentVNode(" \u6DF1\u5EA6\u601D\u8003\u5F00\u5173 - \u4FEE\u6539\u4E3A\u6309\u94AE\u6837\u5F0F "),
-                  unref(isThinking) ? (openBlock(), createElementBlock("button", {
-                    key: 0,
-                    class: normalizeClass(["deep-thinking-btn", {
-                      active: _ctx.enableDeepThinking,
-                      disabled: _ctx.isChating
-                    }]),
-                    disabled: _ctx.isChating,
-                    onClick: handleDeepThinkingClick
-                  }, [
-                    !_ctx.isChating ? (openBlock(), createElementBlock("svg", {
-                      key: 0,
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 16 16",
-                      fill: "none"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M6.57131 9.39895L3.28628 6.11392C2.50523 5.33287 2.50524 4.06654 3.28628 3.28549C4.06733 2.50445 5.33366 2.50444 6.11471 3.28549L6.58746 3.75824",
-                        stroke: _ctx.enableDeepThinking ? "#0062D6" : "#1D2129",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      }, null, 8, ["stroke"]),
-                      createElementVNode("path", {
-                        d: "M9.41534 6.58612L12.7143 9.88513C13.4954 10.6662 13.4954 11.9325 12.7143 12.7136C11.9333 13.4946 10.667 13.4946 9.88592 12.7136L9.40744 12.2351",
-                        stroke: _ctx.enableDeepThinking ? "#0062D6" : "#1D2129",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      }, null, 8, ["stroke"]),
-                      createElementVNode("path", {
-                        d: "M9.41454 9.41419L6.11098 12.7178C5.33199 13.4967 4.06733 13.4951 3.28628 12.714C2.50524 11.933 2.50356 10.6683 3.28255 9.88933L3.755 9.41687",
-                        stroke: _ctx.enableDeepThinking ? "#0062D6" : "#1D2129",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      }, null, 8, ["stroke"]),
-                      createElementVNode("path", {
-                        d: "M6.58594 6.58545L9.88313 3.28826C10.6656 2.50575 11.9331 2.50457 12.7142 3.28562C13.4952 4.06666 13.4941 5.33418 12.7116 6.11668L12.2584 6.56982",
-                        stroke: _ctx.enableDeepThinking ? "#0062D6" : "#1D2129",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      }, null, 8, ["stroke"])
-                    ])) : (openBlock(), createElementBlock("svg", {
-                      key: 1,
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 16 16",
-                      fill: "none"
-                    }, [
-                      createElementVNode("path", {
-                        d: "M6.57131 9.39895L3.28628 6.11392C2.50523 5.33287 2.50524 4.06654 3.28628 3.28549C4.06733 2.50445 5.33366 2.50444 6.11471 3.28549L6.58746 3.75824",
-                        stroke: "#C9CDD4",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      }),
-                      createElementVNode("path", {
-                        d: "M9.41534 6.58612L12.7143 9.88513C13.4954 10.6662 13.4954 11.9325 12.7143 12.7136C11.9333 13.4946 10.667 13.4946 9.88592 12.7136L9.40744 12.2351",
-                        stroke: "#C9CDD4",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      }),
-                      createElementVNode("path", {
-                        d: "M9.41454 9.41419L6.11098 12.7178C5.33199 13.4967 4.06733 13.4951 3.28628 12.714C2.50524 11.933 2.50356 10.6683 3.28255 9.88933L3.755 9.41687",
-                        stroke: "#C9CDD4",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      }),
-                      createElementVNode("path", {
-                        d: "M6.58594 6.58545L9.88313 3.28826C10.6656 2.50575 11.9331 2.50457 12.7142 3.28562C13.4952 4.06666 13.4941 5.33418 12.7116 6.11668L12.2584 6.56982",
-                        stroke: "#C9CDD4",
-                        "stroke-width": "1.2",
-                        "stroke-linecap": "round"
-                      })
-                    ])),
-                    createElementVNode("span", null, "\u6DF1\u5EA6\u601D\u8003")
-                  ], 10, ["disabled"])) : createCommentVNode("v-if", true),
-                  createCommentVNode(" \u6309\u94AE\u5BB9\u5668 "),
-                  createElementVNode("div", { class: "input-buttons" }, [
-                    createCommentVNode(" \u53D1\u9001\u6309\u94AE "),
-                    !_ctx.isChating ? (openBlock(), createElementBlock("button", {
-                      key: 0,
-                      class: "send-button square-icon-btn",
-                      disabled: !_ctx.inputValue.trim(),
-                      onClick: handleSend
-                    }, [
-                      (openBlock(), createElementBlock("svg", {
-                        width: "24",
-                        height: "24",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        "stroke-width": "2"
-                      }, [
-                        createElementVNode("path", { d: "M12 5v14M5 12l7-7 7 7" })
-                      ]))
-                    ], 8, ["disabled"])) : (openBlock(), createElementBlock(
-                      Fragment,
-                      { key: 1 },
-                      [
-                        createCommentVNode(" \u505C\u6B62\u6309\u94AE "),
-                        createElementVNode("button", {
-                          class: "stop-button square-icon-btn",
-                          onClick: handleStop
-                        }, [
-                          createCommentVNode(" \u4FEE\u6B63viewBox\u5C5E\u6027\uFF0C\u79FB\u9664$\u7B26\u53F7 "),
-                          (openBlock(), createElementBlock("svg", {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "33",
-                            height: "33",
-                            viewBox: "0 0 33 33",
-                            fill: "none"
-                          }, [
-                            createElementVNode("rect", {
-                              x: "0.5",
-                              y: "0.842773",
-                              width: "32",
-                              height: "32",
-                              rx: "8",
-                              fill: "#0077FA"
-                            }),
-                            createElementVNode("path", {
-                              d: "M11.5 13.2713C11.5 12.4824 12.1396 11.8428 12.9286 11.8428H20.0714C20.8604 11.8428 21.5 12.4824 21.5 13.2713V20.4142C21.5 21.2032 20.8604 21.8428 20.0714 21.8428H12.9286C12.1396 21.8428 11.5 21.2032 11.5 20.4142V13.2713Z",
-                              fill: "white"
-                            })
-                          ]))
-                        ])
-                      ],
-                      2112
-                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                    ))
-                  ])
+                  createElementVNode("div", { class: "touchchat-edit-think-icon" }),
+                  createElementVNode("div", { class: "touchchat-edit-think-text" }, "\u6DF1\u5EA6\u601D\u8003")
                 ],
                 2
                 /* CLASS */
-              )
+              )) : createCommentVNode("v-if", true)
+            ]),
+            createElementVNode("div", { class: "touchchat-edit-submit-right" }, [
+              createCommentVNode(" \u622A\u56FE "),
+              unref(screenAble) ? (openBlock(), createBlock(Screenshot, {
+                key: 0,
+                onUpFileList: upFileList
+              })) : createCommentVNode("v-if", true),
+              createCommentVNode(" \u5B9E\u65F6\u8BED\u97F3 "),
+              unref(realtimeVoiceAble) ? (openBlock(), createBlock(RealtimeVoice, {
+                key: 1,
+                onStartRealtimeVoice: startRealtimeVoice,
+                onTranscription: transcription
+              })) : createCommentVNode("v-if", true),
+              createCommentVNode(" \u8BED\u97F3 "),
+              unref(voiceAble) ? (openBlock(), createBlock(
+                Voice,
+                {
+                  key: 2,
+                  ref_key: "voiceRef",
+                  ref: voiceRef,
+                  onUpFileList: upFileList
+                },
+                null,
+                512
+                /* NEED_PATCH */
+              )) : createCommentVNode("v-if", true),
+              createCommentVNode(" \u53D1\u9001\u6309\u94AE "),
+              !__props.isChating ? (openBlock(), createElementBlock("button", {
+                key: 3,
+                class: "touchchat-edit-send",
+                disabled: !__props.inputValue.trim() && !fileList.value.length,
+                onClick: handleSend
+              }, [
+                createElementVNode("div", { class: "touchchat-edit-send-icon" })
+              ], 8, ["disabled"])) : (openBlock(), createElementBlock(
+                Fragment,
+                { key: 4 },
+                [
+                  createCommentVNode(" \u505C\u6B62\u6309\u94AE "),
+                  createElementVNode("button", {
+                    class: "touchchat-edit-stop",
+                    onClick: handleStop
+                  }, [
+                    createElementVNode("div", { class: "touchchat-edit-stop-icon" })
+                  ])
+                ],
+                2112
+                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+              ))
             ])
-          ])
-        ])
+          ],
+          2
+          /* CLASS */
+        ),
+        createVNode(MarkLayer, {
+          "show-mark-laryer": showMarkLaryer.value,
+          onColseMarkLayer: ($event) => showMarkLaryer.value = false
+        }, null, 8, ["show-mark-laryer", "onColseMarkLayer"])
       ]);
     };
   }