@touchvue/chat 1.0.0-beta.41 → 1.0.0-beta.43

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

@@ -1,13 +1,11 @@
-import { defineComponent, inject, ref, watch, nextTick, onMounted, onBeforeUnmount, provide, openBlock, createElementBlock, withModifiers, createElementVNode, renderSlot, createVNode, createCommentVNode, Fragment, renderList, createBlock, unref, withCtx } from 'vue';
+import { defineComponent, inject, ref, computed, provide, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, withModifiers, unref, createElementVNode, renderSlot, createVNode, createCommentVNode, Fragment, renderList, createBlock, withCtx, isRef } from 'vue';
 import UserMessage from './UserMessage.vue.mjs';
 import AiMessage from './AiMessage.vue.mjs';
 import ChatInput from './ChatInput.vue.mjs';
 import HelloChat from '../../component/HelloChat.vue.mjs';
-import { throttle } from '../../../../../node_modules/.pnpm/throttle-debounce@5.0.2/node_modules/throttle-debounce/esm/index.mjs';
-import { FetchStream } from '../../utils/fetchStream.mjs';
-import markdown from '../../utils/markdown.mjs';
-import { showToast } from '../../utils/tools.mjs';
-import { MessageAction, ThinkStatus } from './Chat/TouchChat.mjs';
+import { MessageAction } from './Chat/types.mjs';
+import { useChat } from './Chat/useChat.mjs';
+import { useCopy } from './Chat/useCopy.mjs';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TouchChat",
@@ -20,11 +18,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["sendMessage", "toggleSidebar", "beforeSendMessage"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
-    const scripts = inject("scripts", []);
-    const activeScript = ref(null);
-    const resultItem = ref(null);
+    const scripts = inject("scripts", ref([]));
     const unmatchText = inject("unmatchText", "\u60A8\u7684\u6D88\u606F\u672A\u5339\u914D\u5230\u4EFB\u4F55\u5185\u5BB9");
-    const modules = inject("modules", []);
+    const modules = inject("modules", ref([]));
     const afterSend = inject("afterSend", () => {
       console.warn("\u672A\u63D0\u4F9BafterSend\u51FD\u6570");
     });
@@ -41,746 +37,58 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const stop = inject("stop", () => {
       console.warn("\u672A\u63D0\u4F9Bstop\u51FD\u6570");
     });
+    const scriptsLength = computed(() => {
+      var _a;
+      return ((_a = scripts.value) == null ? void 0 : _a.length) || 0;
+    });
     const props = __props;
     const chatContainer = ref(null);
-    const htmlContentRef = ref([]);
-    const thinkingContentRef = ref([]);
-    const reasoningContentRef = ref([]);
-    const isMounted = ref(false);
-    const isChating = ref(false);
-    const inputValue = ref("");
-    const enableDeepThinking = ref(false);
-    const chatList = ref([]);
-    const renderQueue = ref([]);
-    const isRendering = ref(false);
-    const currIndex = ref(0);
-    const fetchStream = ref(null);
-    const TouchChatRobot = ref();
-    const isUnmounting = ref(false);
-    const currentComponentName = ref("");
-    const fileData = ref([]);
-    const activeAgentsName = ref("");
-    const moduleInfo = ref(modules[0]);
     const ChatInputRef = ref(null);
-    const isDragging = ref(false);
-    const typeFlag = ref("");
-    const currentMessageProcessor = ref(null);
-    watch(
-      () => activeAgentsName,
-      (val) => {
-        if (!val) {
-          activeAgentsName.value = localStorage.getItem("activeAgentsName");
-        }
-      },
-      { immediate: true }
-    );
-    const messageUtils = {
-      updateMessage: (index, updates) => {
-        if (index < 0 || index >= chatList.value.length)
-          return;
-        chatList.value.splice(index, 1, { ...chatList.value[index], ...updates });
-        nextTick(() => {
-          const message = chatList.value[index];
-          if (message) {
-            renderContent(message.content, "main", index);
-            if (message.thinkContent) {
-              renderContent(message.thinkContent, "thinking", index);
-            }
-            if (message.reasoningContent) {
-              renderContent(message.reasoningContent, "reasoning", index);
-            }
-          }
-        });
-      },
-      deleteMessageChain: (index) => {
-        if (index < 0 || index >= chatList.value.length)
-          return;
-        if (chatList.value[index].user === "u") {
-          let deleteCount = 1;
-          for (let i = index + 1; i < chatList.value.length; i++) {
-            if (chatList.value[i].user === "ai") {
-              deleteCount++;
-            } else {
-              break;
-            }
-          }
-          chatList.value.splice(index, deleteCount);
-        } else {
-          chatList.value.splice(index, 1);
-        }
-      },
-      createStandardMessage: (data) => {
-        var _a, _b, _c, _d, _e;
-        return {
-          // chatId: data.chatId || 'ai_' + crypto.randomUUID().replace(/-/gi, ''),
-          chatId: data.chatId || "ai_" + Math.random().toString(36).slice(2).padEnd(10, "0").slice(0, 10),
-          user: data.user || "ai",
-          type: data.type || "text",
-          content: data.content || "",
-          isChating: (_a = data.isChating) != null ? _a : false,
-          thinkContent: data.thinkContent || "",
-          reasoningContent: data.reasoningContent || "",
-          isLiked: (_b = data.isLiked) != null ? _b : false,
-          isDisliked: (_c = data.isDisliked) != null ? _c : false,
-          isEditing: (_d = data.isEditing) != null ? _d : false,
-          editContent: (_e = data.editContent) != null ? _e : ""
-        };
-      }
-    };
-    const update = (index, message) => {
-      chatList.value[index] = { ...chatList.value[index], ...message };
-      console.log("update", chatList.value[index]);
-    };
-    const markdownToHtml = (markdownContent) => {
-      var _a;
-      return ((_a = markdown) == null ? void 0 : _a.render(markdownContent, { isReasoning: false })) || "";
-    };
-    const updateModule = (info) => {
-      moduleInfo.value = info;
-    };
-    const handleAgentSelect = (item) => {
-      localStorage.setItem("activeAgentsName", item.name);
-      const aiMessage = item.intro;
-      messageUtils.updateMessage(0, {
-        content: "",
-        isChating: false
-      });
-      simulateStreamOutput(0, aiMessage);
-    };
-    const completeRendered = (chatId) => {
-      console.log("completeRendered", "\u6E32\u67D3\u5B8C\u6210", chatId);
-      if (currentMessageProcessor.value) {
-        currentMessageProcessor.value.handleMessageComplete(chatId);
-      }
-    };
-    const toggleSidebarClick = (item, index) => {
-      emit("toggleSidebar", item, index);
-    };
-    const init = () => {
-      try {
-        if (Array.isArray(props.value) && props.value.length && !scripts.length) {
-          chatList.value = props.value.map((item) => ({
-            ...item,
-            content: item.thinkContent ? item.content || "" : item.content || "",
-            thinkContent: item.thinkContent || ""
-          }));
-          nextTick(() => {
-            requestAnimationFrame(() => {
-              if (activeAgentsName.value && chatList.value.length > 0 && chatList.value[0].user === "ai") {
-                const aiMessage = chatList.value[0];
-                messageUtils.updateMessage(0, {
-                  content: "",
-                  isChating: true
-                });
-                simulateStreamOutput(0, aiMessage.content);
-              } else {
-                chatList.value.forEach((item) => {
-                  if (item.thinkContent) {
-                    renderContent(item.thinkContent, "thinking");
-                  }
-                  if (item.reasoningContent) {
-                    renderContent(item.reasoningContent, "reasoning");
-                  }
-                  if (item.content) {
-                    renderContent(item.content, "main");
-                  }
-                });
-                nextTick(() => {
-                  scrollToBottom();
-                });
-              }
-            });
-          });
-        }
-      } catch (error) {
-        console.error("\u521D\u59CB\u5316\u5931\u8D25:", error);
-      }
-    };
-    const onScrollToBottom = () => {
-      bottom();
-    };
-    const throttledScrollToBottom = throttle(300, onScrollToBottom);
-    const handleScroll = () => {
-      if (!chatContainer.value)
-        return;
-      const { scrollTop, scrollHeight, clientHeight } = chatContainer.value;
-      if (scrollTop + clientHeight >= scrollHeight) {
-        throttledScrollToBottom();
-      }
-    };
-    const simulateStreamOutput = (aiIndex, msg, callback) => {
-      const message = typeof msg === "string" ? msg : msg.content;
-      const componentName = typeof msg === "string" ? "" : msg.needSequenceProcessing ? msg.needSequenceType : "";
-      const isNeedSequenceProcessing = typeof msg === "string" ? false : msg.needSequenceProcessing;
-      const fn = () => {
-        clearInterval(interval);
-        emit("sendMessage", [...chatList.value]);
-        if (componentName) {
-          chatList.value[aiIndex].componentName = componentName;
-        }
-        messageUtils.updateMessage(aiIndex, {
-          isChating: false
-        });
-        nextTick(() => {
-          renderContent(message, "main", aiIndex);
-          nextTick(() => {
-            scrollToBottom();
-            if (!isNeedSequenceProcessing && callback) {
-              callback();
-            }
-          });
-        });
-      };
-      let index = 0;
-      const interval = setInterval(() => {
-        if (index < message.length) {
-          const newContent = message;
-          messageUtils.updateMessage(aiIndex, {
-            content: newContent
-          });
-          nextTick(() => {
-            renderContent(newContent, "main", aiIndex);
-            nextTick(() => {
-              scrollToBottom();
-            });
-          });
-          index++;
-        } else {
-          fn();
-        }
-      }, 50);
-    };
-    const findMatchingScriptContent = (userInput) => {
-      if (!scripts || scripts.length === 0)
-        return null;
-      const agentName = activeAgentsName.value ? activeAgentsName.value : localStorage.getItem("activeAgentsName") || "";
-      if (agentName) {
-        const agentMatchedScripts = scripts.filter((script) => {
-          return script.content.some((item) => item.agents === agentName);
-        });
-        if (agentMatchedScripts.length > 0) {
-          const fileTypeItems = agentMatchedScripts.flatMap((script) => script.content.filter((item) => item.file));
-          const fileTypes = fileTypeItems.map((item) => item.file);
-          const isFileTypeMatched = fileData.value.some((file) => {
-            const nameArr = file.name.split(".");
-            const name = nameArr[nameArr.length - 1];
-            const isMatched = fileTypes.includes(name);
-            return isMatched;
-          });
-          let matchedScriptContentIndex = -1;
-          if (!activeScript.value && isFileTypeMatched) {
-            activeScript.value = agentMatchedScripts[0];
-          }
-          if (isFileTypeMatched) {
-            for (const script of agentMatchedScripts) {
-              for (let i = 0; i < script.content.length; i++) {
-                const item = script.content[i];
-                if (item.file) {
-                  const nameArr = fileData.value.map((file) => {
-                    const fileExtArr = file.name.split(".");
-                    return fileExtArr[fileExtArr.length - 1];
-                  });
-                  if (nameArr.includes(item.file)) {
-                    matchedScriptContentIndex = i;
-                    break;
-                  }
-                }
-              }
-              if (matchedScriptContentIndex !== -1) {
-                break;
-              }
-            }
-            const responses = [];
-            const matchContent = agentMatchedScripts[0].content;
-            for (let j = matchedScriptContentIndex + 1; j < matchContent.length; j++) {
-              const nextItem = matchContent[j];
-              if (nextItem.user === "i") {
-                break;
-              }
-              if (nextItem.user === "ai") {
-                if (nextItem.data && nextItem.type) {
-                  responses.push({
-                    ...nextItem,
-                    // 标记需要先流式输出文字，再调用组件
-                    needSequenceProcessing: true
-                  });
-                } else {
-                  responses.push(nextItem);
-                }
-              }
-            }
-            const nextIndex = matchContent.findIndex((contentItem, index) => index > matchedScriptContentIndex && contentItem.user === "i");
-            return {
-              responses,
-              nextIndex: nextIndex === -1 ? matchContent.length : nextIndex
-            };
-          }
-        } else {
-          return {
-            responses: [
-              {
-                user: "ai",
-                data: unmatchText
-              }
-            ],
-            nextIndex: -1
-          };
-        }
-      }
-      if (activeScript.value) {
-        const result = searchInScript(activeScript.value, userInput);
-        if (result) {
-          return result;
-        }
-      }
-      for (const script of scripts) {
-        const result = searchInScript(script, userInput);
-        if (result) {
-          activeScript.value = script;
-          return result;
-        }
-      }
-      return null;
-    };
-    const searchInScript = (script, userInput) => {
-      for (let i = 0; i < script.content.length; i++) {
-        const item = script.content[i];
-        if (item.user === "i") {
-          const isDataMatch = item.data && userInput.includes(item.data);
-          let isSubDataMatch = false;
-          if (item.alias) {
-            if (Array.isArray(item.alias)) {
-              isSubDataMatch = item.alias.some((subItem) => subItem === userInput);
-            }
-          }
-          if (isDataMatch || isSubDataMatch) {
-            const responses = [];
-            for (let j = i + 1; j < script.content.length; j++) {
-              const nextItem = script.content[j];
-              if (nextItem.user === "i") {
-                break;
-              }
-              if (nextItem.user === "ai") {
-                if (nextItem.data && nextItem.type) {
-                  responses.push({
-                    ...nextItem,
-                    // 标记需要先流式输出文字，再调用组件
-                    needSequenceProcessing: true
-                  });
-                } else {
-                  responses.push(nextItem);
-                }
-              }
-            }
-            const nextIndex = script.content.findIndex((contentItem, index) => index > i && contentItem.user === "i");
-            return { responses, nextIndex: nextIndex === -1 ? script.content.length : nextIndex };
-          }
-        } else if (item.user === "ai") {
-          scripts.forEach((script2) => {
-            if (script2.content.length) {
-              const contents = script2.content;
-              contents.forEach((item2) => {
-                if (item2.agents) {
-                  if (item2.agents === activeAgentsName.value) {
-                    activeScript.value = script2;
-                  }
-                }
-              });
-            }
-          });
-        }
-      }
-      return null;
-    };
-    watch(
-      () => props.value,
-      (newVal, oldVal) => {
-        if (!Array.isArray(newVal))
-          return;
-        if (newVal.length && JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-          chatList.value = newVal.map((item) => ({
-            ...item,
-            content: item.thinkContent ? item.content || "" : item.content || "",
-            thinkContent: item.thinkContent || ""
-          }));
-          nextTick(() => {
-            requestAnimationFrame(() => {
-              chatList.value.forEach((item) => {
-                if (item.thinkContent) {
-                  renderContent(item.thinkContent, "thinking");
-                }
-                if (item.reasoningContent) {
-                  renderContent(item.reasoningContent, "reasoning");
-                }
-                if (item.content) {
-                  renderContent(item.content, "main");
-                }
-              });
-              nextTick(() => {
-                scrollToBottom();
-              });
-            });
-          });
-        }
-      },
-      { deep: true, immediate: true }
-    );
-    const openSSE = (userContent, insertIndex, type) => {
-      var _a, _b, _c, _d, _e, _f, _g;
-      try {
-        if (isUnmounting.value)
-          return;
-        isChating.value = true;
-        const currentAiMessage = chatList.value.find((item) => item.isChating);
-        if (currentAiMessage) {
-          currentAiMessage.isShowLike = true;
-          currentAiMessage.isShowCopy = true;
-          currentAiMessage.componentName = currentComponentName.value;
-        }
-        const chatId = (currentAiMessage == null ? void 0 : currentAiMessage.chatId) || "ai_" + Math.random().toString(36).slice(2).padEnd(10, "0").slice(0, 10);
-        let aiContent = (currentAiMessage == null ? void 0 : currentAiMessage.content) || "";
-        let reasoningContent = (currentAiMessage == null ? void 0 : currentAiMessage.reasoningContent) || "";
-        let allAiContent = "";
-        if (!currentAiMessage) {
-          const chatItem = {
-            chatId,
-            user: "ai",
-            type: "text",
-            isChating: true,
-            content: "",
-            thinkContent: "",
-            reasoningContent: "",
-            thinkStatus: ThinkStatus.THINKING,
-            thinkStartTime: Date.now(),
-            isShowLike: true,
-            isShowCopy: true,
-            componentName: currentComponentName.value,
-            typeFlag: typeFlag.value
-          };
-          if (insertIndex !== void 0 && insertIndex <= chatList.value.length) {
-            chatList.value.splice(insertIndex, 0, chatItem);
-          } else {
-            chatList.value.push(chatItem);
-          }
-        }
-        currIndex.value = insertIndex != null ? insertIndex : chatList.value.length - 1;
-        const BodyConfig = (_b = (_a = moduleInfo.value) == null ? void 0 : _a.config) == null ? void 0 : _b.body();
-        if (!inputValue.value && ((_c = BodyConfig == null ? void 0 : BodyConfig.messages) == null ? void 0 : _c.length)) {
-          BodyConfig.messages[0].content = userContent;
-          BodyConfig.model = enableDeepThinking.value ? "deepseek-reasoner" : "deepseek-v3";
-        }
-        fetchStream.value = new FetchStream({
-          url: ((_e = (_d = moduleInfo.value) == null ? void 0 : _d.config) == null ? void 0 : _e.action) ? moduleInfo.value.config.action : "https://api.apiyi.com/v1/chat/completions",
-          requestInit: {
-            headers: ((_g = (_f = moduleInfo.value) == null ? void 0 : _f.config) == null ? void 0 : _g.headers) ? new Headers(moduleInfo.value.config.headers()) : new Headers({
-              "Content-Type": "application/json",
-              Authorization: "Bearer sk-fe9MtODvds8wpzz05f3417Fe3e9641C1926e6fC588425dEd"
-            }),
-            // body: moduleInfo.value?.config?.body
-            // 	? JSON.stringify(BodyConfig as Record<string, any>)
-            // 	: JSON.stringify({
-            // 			model: enableDeepThinking.value ? 'deepseek-reasoner' : 'deepseek-v3',
-            // 			messages: [
-            // 				{
-            // 					role: 'user',
-            // 					content: userContent
-            // 				}
-            // 			],
-            // 			stream: true
-            // 		})
-            body: JSON.stringify(BodyConfig)
-          },
-          onmessage: (line) => {
-            var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j;
-            if (isUnmounting.value)
-              return;
-            let dataString = "";
-            if (line.length) {
-              if (line.includes("data:")) {
-                const match = line.match(/\{[\s\S]*\}/);
-                dataString = match ? match[0] : "";
-              } else if (line.startsWith("{") && line.endsWith("}")) {
-                dataString = line;
-              }
-            }
-            dataString = dataString.trim();
-            const respoKey = (_b2 = (_a2 = moduleInfo.value) == null ? void 0 : _a2.config) == null ? void 0 : _b2.respoKey();
-            if (dataString && (dataString.startsWith("{") && dataString.endsWith("}") || !(respoKey == null ? void 0 : respoKey.content))) {
-              try {
-                const result = !(respoKey == null ? void 0 : respoKey.content) && moduleInfo.value ? dataString : JSON.parse(dataString);
-                const newAiMessage = chatList.value[currIndex.value];
-                const deepseekFlag = ((_c2 = moduleInfo.value) == null ? void 0 : _c2.name) === "deepseek-v3";
-                if (deepseekFlag || !moduleInfo.value) {
-                  if ((_f2 = (_e2 = (_d2 = result == null ? void 0 : result.choices) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.delta) == null ? void 0 : _f2.content) {
-                    aiContent += result.choices[0].delta.content;
-                    if ((newAiMessage == null ? void 0 : newAiMessage.thinkStatus) === ThinkStatus.THINKING) {
-                      newAiMessage.thinkStatus = ThinkStatus.COMPLETED;
-                      newAiMessage.thinkTime = Date.now() - (newAiMessage.thinkStartTime || Date.now());
-                    }
-                  }
-                  if ((_i = (_h = (_g2 = result == null ? void 0 : result.choices) == null ? void 0 : _g2[0]) == null ? void 0 : _h.delta) == null ? void 0 : _i.reasoning_content) {
-                    reasoningContent += result.choices[0].delta.reasoning_content;
-                    if (!(newAiMessage == null ? void 0 : newAiMessage.thinkStatus)) {
-                      newAiMessage.thinkStatus = ThinkStatus.THINKING;
-                      newAiMessage.thinkStartTime = Date.now();
-                    }
-                  }
-                  allAiContent = reasoningContent + aiContent;
-                } else {
-                  if (respoKey && result && result[respoKey.content] && (result[respoKey.category] === respoKey.contentCategory || !result[respoKey.category])) {
-                    aiContent += result[respoKey.content];
-                  }
-                  if (result && result[respoKey.category] === "done") {
-                    resultItem.value = result;
-                  }
-                  if (result && result[respoKey.category] === "error") {
-                    const errorMessage = (_j = result[respoKey.all]) != null ? _j : "\u5F53\u524D\u7F51\u7EDC\u5F02\u5E38";
-                    const currentAiMessage2 = chatList.value[currIndex.value];
-                    if (currentAiMessage2.chatId) {
-                      currentAiMessage2.content = `<div style="color: red; display: flex; align-items: center;"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
-										<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 15.5C11.6421 15.5 15 12.1421 15 8C15 3.85786 11.6421 0.5 7.5 0.5C3.35786 0.5 0 3.85786 0 8C0 12.1421 3.35786 15.5 7.5 15.5ZM9.7539 4.9506L10.5494 5.7461L8.2951 8.0001L10.5494 10.2539L9.7539 11.0494L7.5001 8.7951L5.2461 11.0494L4.4506 10.2539L6.7051 8.0001L4.4506 5.7461L5.2461 4.9506L7.5001 7.2051L9.7539 4.9506Z" fill="#F93920"/>
-										</svg>${errorMessage}</div>`;
-                      currentAiMessage2.isChating = false;
-                      currentAiMessage2.componentName = "";
-                      currentAiMessage2.isShowLike = false;
-                      currentAiMessage2.isShowCopy = false;
-                      currentAiMessage2.isError = true;
-                      nextTick(() => {
-                        emit("sendMessage", [...chatList.value]);
-                      });
-                      afterSend(result);
-                    }
-                  }
-                  if (aiContent || reasoningContent) {
-                    allAiContent = aiContent + reasoningContent;
-                  }
-                  if (respoKey && result && result[respoKey.all] && result[respoKey.category] === respoKey.allCategory) {
-                    allAiContent = result[respoKey.all];
-                  }
-                  if (respoKey && result && typeof result === "string" && result !== "[DONE]") {
-                    aiContent += result;
-                  }
-                  if (respoKey && result && typeof result === "string" && result === "[DONE]") {
-                    const index = chatList.value.findIndex((ele) => ele.chatId === chatId);
-                    if (index !== -1 && chatList.value[index]) {
-                      isChating.value = false;
-                      chatList.value[index].isChating = false;
-                      emit("sendMessage", JSON.parse(JSON.stringify(chatList.value)));
-                    }
-                  }
-                }
-                if (chatList.value.some((ele) => ele.chatId === chatId)) {
-                  enqueueRender({
-                    mainContent: aiContent,
-                    thinkContent: "",
-                    reasoningContent
-                  });
-                }
-                if (type === 1) {
-                  nextTick(() => {
-                    renderContent(aiContent, "main");
-                    renderContent(reasoningContent, "reasoning");
-                    nextTick(() => {
-                      scrollToBottom();
-                    });
-                  });
-                }
-              } catch (error) {
-                console.error("\u89E3\u6790SSE\u6D88\u606F\u5931\u8D25:", error);
-              }
-            }
-          },
-          ondone: () => {
-            nextTick(() => {
-              isChating.value = false;
-              if (isUnmounting.value || !isMounted.value)
-                return;
-              const index = chatList.value.findIndex((ele) => ele.chatId === chatId);
-              if (index !== -1 && chatList.value[index]) {
-                chatList.value[index].isChating = false;
-                chatList.value[index].componentName = currentComponentName.value;
-                chatList.value[index].html = markdownToHtml(allAiContent);
-                if (allAiContent) {
-                  if (resultItem.value) {
-                    resultItem.value.allAiContent = allAiContent;
-                    afterSend(resultItem.value);
-                  } else {
-                    afterSend({ allAiContent });
-                  }
-                }
-                const waitForRenderComplete = () => {
-                  if (renderQueue.value.length === 0 && !isRendering.value) {
-                    if (chatList.value.length > 0) {
-                      emit("sendMessage", JSON.parse(JSON.stringify(chatList.value)));
-                    }
-                  } else {
-                    requestAnimationFrame(waitForRenderComplete);
-                  }
-                };
-                waitForRenderComplete();
-              }
-            });
-          },
-          onabort: () => {
-            handleAbort();
-          },
-          onerror: (response) => {
-            handleError(response);
-          }
-        });
-      } catch (error) {
-        console.error("OpenSSE\u9519\u8BEF:", error);
-        isChating.value = false;
-        chatList.value[currIndex.value].content = `<div style="color: red; display: flex; align-items: center;"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 15.5C11.6421 15.5 15 12.1421 15 8C15 3.85786 11.6421 0.5 7.5 0.5C3.35786 0.5 0 3.85786 0 8C0 12.1421 3.35786 15.5 7.5 15.5ZM9.7539 4.9506L10.5494 5.7461L8.2951 8.0001L10.5494 10.2539L9.7539 11.0494L7.5001 8.7951L5.2461 11.0494L4.4506 10.2539L6.7051 8.0001L4.4506 5.7461L5.2461 4.9506L7.5001 7.2051L9.7539 4.9506Z" fill="#F93920"/>
-		</svg>${"\u8BF7\u6C42\u5931\u8D25"}</div>`;
-        chatList.value[currIndex.value].isChating = false;
-        chatList.value[currIndex.value].isShowCopy = false;
-        chatList.value[currIndex.value].isShowLike = false;
-        showToast("\u8BF7\u6C42\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5", "error", 3e3);
-      }
-    };
-    const handleAbort = () => {
-      isChating.value = false;
-      if (isUnmounting.value)
-        return;
-      const currentAiMessage = chatList.value[currIndex.value];
-      stop(chatList.value[currIndex.value], currIndex.value);
-      const hasContent = currentAiMessage && (currentAiMessage.content || currentAiMessage.thinkContent || currentAiMessage.reasoningContent);
-      if (currentAiMessage) {
-        if (currentAiMessage.thinkStatus === ThinkStatus.THINKING) {
-          currentAiMessage.thinkStatus = ThinkStatus.STOPPED;
-          currentAiMessage.thinkTime = Date.now() - (currentAiMessage.thinkStartTime || Date.now());
-        }
-        if (!hasContent) {
-          const userMessageIndex = currIndex.value - 1;
-          if (userMessageIndex >= 0 && chatList.value[userMessageIndex].user === "u") {
-            chatList.value.splice(currIndex.value, 1);
-            chatList.value.splice(userMessageIndex, 1);
-          } else {
-            chatList.value.splice(currIndex.value, 1);
-          }
-        } else {
-          const updatedAiMessage = {
-            ...currentAiMessage,
-            isChating: false,
-            content: currentAiMessage.content ? currentAiMessage.content + "..." : "",
-            thinkContent: currentAiMessage.thinkContent ? currentAiMessage.thinkContent + "..." : void 0,
-            reasoningContent: currentAiMessage.reasoningContent ? currentAiMessage.reasoningContent + "..." : void 0,
-            thinkStatus: currentAiMessage.thinkStatus,
-            stop: true
-          };
-          chatList.value.splice(currIndex.value, 1, updatedAiMessage);
-          nextTick(() => {
-            renderContent(updatedAiMessage.thinkContent || "", "thinking");
-            renderContent(updatedAiMessage.reasoningContent || "", "reasoning");
-            renderContent(updatedAiMessage.content || "", "main");
-            emit("sendMessage", [...chatList.value]);
-          });
-          return;
-        }
-      }
-      if (chatList.value.length > 0) {
-        emit("sendMessage", [...chatList.value]);
-      }
-    };
-    const handleError = (response) => {
-      if (isUnmounting.value)
-        return;
-      isChating.value = false;
-      let errorMessage = "\u672A\u77E5\u9519\u8BEF";
-      if (response instanceof Error) {
-        console.error("API\u8BF7\u6C42\u9519\u8BEF:", response);
-        errorMessage = response.message;
-      } else if (response instanceof Response) {
-        console.error("API\u8BF7\u6C42\u9519\u8BEF, \u54CD\u5E94\u72B6\u6001:", response.status, response.statusText);
-        errorMessage = `\u8BF7\u6C42\u5931\u8D25: ${response.status} ${response.statusText}`;
-      }
-      const currentAiMessage = chatList.value[currIndex.value];
-      if (currentAiMessage) {
-        currentAiMessage.content = `<div style="color: red; display: flex; align-items: center;"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 15.5C11.6421 15.5 15 12.1421 15 8C15 3.85786 11.6421 0.5 7.5 0.5C3.35786 0.5 0 3.85786 0 8C0 12.1421 3.35786 15.5 7.5 15.5ZM9.7539 4.9506L10.5494 5.7461L8.2951 8.0001L10.5494 10.2539L9.7539 11.0494L7.5001 8.7951L5.2461 11.0494L4.4506 10.2539L6.7051 8.0001L4.4506 5.7461L5.2461 4.9506L7.5001 7.2051L9.7539 4.9506Z" fill="#F93920"/>
-</svg>${errorMessage}</div>`;
-        currentAiMessage.isChating = false;
-        currentAiMessage.componentName = "";
-        currentAiMessage.isShowLike = false;
-        currentAiMessage.isShowCopy = false;
-        currentAiMessage.isError = true;
-        nextTick(() => {
-          renderContent(currentAiMessage.content || "", "main");
-          emit("sendMessage", [...chatList.value]);
-        });
-      } else {
-        showToast(errorMessage, "error", 3e3);
-        emit("sendMessage", [...chatList.value]);
-      }
-    };
-    const enqueueRender = (data) => {
-      if (isUnmounting.value || !isMounted.value)
-        return;
-      if (currIndex.value < 0 || currIndex.value >= chatList.value.length)
-        return;
-      renderQueue.value.push(data);
-      if (!isRendering.value) {
-        isRendering.value = true;
-        processRenderQueue();
-      }
-    };
-    const processRenderQueue = () => {
-      if (isUnmounting.value || !isMounted.value) {
-        renderQueue.value = [];
-        isRendering.value = false;
-        return;
-      }
-      if (renderQueue.value.length === 0) {
-        isRendering.value = false;
-        return;
-      }
-      requestAnimationFrame(() => {
-        const data = renderQueue.value.shift();
-        if (data) {
-          formatMarkdown(data);
-        }
-        processRenderQueue();
-      });
-    };
-    const formatMarkdown = (data) => {
-      if (!isMounted.value)
-        return;
-      if (currIndex.value < 0 || currIndex.value >= chatList.value.length)
-        return;
-      const currentItem = chatList.value[currIndex.value];
-      if (!currentItem.isError) {
-        currentItem.thinkContent = data.thinkContent;
-        currentItem.content = data.mainContent;
-        currentItem.reasoningContent = data.reasoningContent;
-      }
-      nextTick(() => {
-        const thinkingContainer = thinkingContentRef.value[currIndex.value];
-        if (thinkingContainer) {
-          if (data.thinkContent && !currentItem.isError) {
-            renderContent(data.thinkContent, "thinking");
-            thinkingContainer.style.display = "block";
-            thinkingContainer.style.visibility = "visible";
-          } else {
-            thinkingContainer.style.display = "none";
-            thinkingContainer.style.visibility = "hidden";
-          }
-        }
-        const reasoningContainer = reasoningContentRef.value[currIndex.value];
-        if (reasoningContainer) {
-          if (data.reasoningContent && !currentItem.isError) {
-            renderContent(data.reasoningContent, "reasoning");
-            reasoningContainer.style.display = "block";
-            reasoningContainer.style.visibility = "visible";
-          } else {
-            reasoningContainer.style.display = "none";
-            reasoningContainer.style.visibility = "hidden";
-          }
-        }
-        renderContent(currentItem.isError ? currentItem.content : data.mainContent, "main");
-      });
-    };
+    const {
+      chatList,
+      isChating,
+      inputValue,
+      enableDeepThinking,
+      activeAgentsName,
+      init,
+      sendMessage,
+      handleBeforeSend,
+      handleSend,
+      handleStop,
+      handleMessageAction,
+      saveEdit,
+      cancelEdit,
+      completeRendered,
+      handleAgentSelect,
+      update,
+      updateModule,
+      handleDragEnter,
+      handleDragLeave,
+      handleDrop,
+      handleScroll,
+      onMounted: chatOnMounted,
+      onBeforeUnmount: chatOnBeforeUnmount
+    } = useChat({
+      props,
+      emit,
+      scripts: scripts.value,
+      unmatchText,
+      modules: modules.value,
+      afterSend,
+      sendMessageInject,
+      beforeSend,
+      bottom,
+      stop,
+      chatContainer,
+      chatInputRef: ChatInputRef
+    });
+    const { copyWithFeedback } = useCopy();
+    const modelChangeExternal = inject("modelChange", () => {
+    });
+    provide("modelChange", (item, index) => {
+      modelChangeExternal(item, index);
+      updateModule(item);
+    });
     const attachCopyButtons = (container) => {
       const codeBlocks = container.querySelectorAll("pre code");
       codeBlocks.forEach((codeBlock) => {
@@ -790,403 +98,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           copyBtn.className = "touchchat-code-copy";
           copyBtn.addEventListener("click", () => {
             const code = codeBlock.textContent || "";
-            navigator.clipboard.writeText(code).then(() => {
-              showToast("\u590D\u5236\u6210\u529F", "info", 2e3);
-              copyBtn.textContent = "\u5DF2\u590D\u5236";
-              setTimeout(() => {
-                copyBtn.textContent = "";
-              }, 2e3);
-            }).catch((err) => {
-              console.error("\u590D\u5236\u5931\u8D25:", err);
-              showToast("\u590D\u5236\u5931\u8D25", "error", 2e3);
-            });
+            copyWithFeedback(code, copyBtn, "", "\u5DF2\u590D\u5236", 2e3);
           });
           pre.style.position = "relative";
           pre.appendChild(copyBtn);
         }
       });
     };
-    const renderContent = (content, type, index) => {
-      const renderIndex = index != null ? index : currIndex.value;
-      if (renderIndex < 0 || renderIndex >= chatList.value.length)
-        return;
-      const refArrays = {
-        main: htmlContentRef,
-        thinking: thinkingContentRef,
-        reasoning: reasoningContentRef
-      };
-      const processors = {
-        main: (content2) => {
-          var _a;
-          return ((_a = markdown) == null ? void 0 : _a.render(content2, { isReasoning: false })) || "";
-        },
-        thinking: (content2) => {
-          var _a;
-          return ((_a = markdown) == null ? void 0 : _a.render(content2, { isReasoning: false })) || "";
-        },
-        reasoning: (content2) => {
-          var _a;
-          return ((_a = markdown) == null ? void 0 : _a.render(content2, { isReasoning: false })) || "";
-        }
-      };
-      const container = refArrays[type].value[renderIndex];
-      if (!container)
-        return;
-      container.innerHTML = processors[type](content || "");
-      attachCopyButtons(container);
-    };
-    const sendMessage = (content, fileList, auto, type) => {
-      inputValue.value = content || "";
-      handleBeforeSend(content, fileList, auto, type);
-    };
-    const handleBeforeSend = (content, fileList, auto, type) => {
-      fileData.value = fileList || [];
-      if (beforeSend) {
-        const fn = beforeSend();
-        if (fn && typeof fn.then === "function") {
-          Promise.resolve(fn).then((res) => {
-            if (res.result) {
-              currentComponentName.value = res.componentName || "";
-              handleSend(content, fileList, auto, type);
-            }
-          }).catch((error) => {
-            console.log(error);
-          });
-        } else {
-          if (fn.result) {
-            currentComponentName.value = fn.componentName || "";
-            handleSend(content, fileList, auto, type);
-          }
-        }
-      }
-    };
-    const handleSend = (content, fileList, auto, type) => {
-      emit("beforeSendMessage");
-      sendMessageInject(inputValue.value, fileData.value);
-      typeFlag.value = type || "";
-      if (scripts && Array.isArray(scripts) && scripts.length > 0) {
-        const userInput = content ? content.replace(/\n/g, "") : inputValue.value.replace(/\n/g, "").trim();
-        if (!userInput && !(fileList == null ? void 0 : fileList.length) && auto)
-          return;
-        const userChatId = `user_${Date.now()}`;
-        const userMessage = {
-          chatId: userChatId,
-          user: "u",
-          type: "text",
-          content: userInput,
-          isShowLike: false,
-          isShowCopy: true,
-          files: fileList || [],
-          typeFlag: type,
-          auto: auto || false
-        };
-        chatList.value.push(userMessage);
-        emit("sendMessage", [...chatList.value]);
-        nextTick(() => {
-          renderContent(userMessage.content, "main", chatList.value.length - 1);
-          nextTick(() => {
-            scrollToBottom();
-          });
-        });
-        const result = findMatchingScriptContent(userInput);
-        if (result && result.responses.length > 0) {
-          const newAiMessages = [];
-          result.responses.forEach((response, idx) => {
-            const pauseMarker = Array.isArray(response.data) ? "\u200B".repeat(20) : "";
-            const content2 = Array.isArray(response.data) ? response.data.join(pauseMarker) : response.data;
-            const aiChatId = `ai_${Date.now()}_${idx}`;
-            const aiMessage = {
-              chatId: aiChatId,
-              user: "ai",
-              type: "text",
-              content: content2 || "",
-              // componentName: response.needSequenceProcessing ? '' : response.type || '',
-              componentName: response.type || "",
-              isShowLike: true,
-              isShowCopy: true,
-              needSequenceType: response.type || "",
-              needSequenceProcessing: response.needSequenceProcessing || false,
-              typeFlag: type
-            };
-            newAiMessages.push(aiMessage);
-          });
-          let messageQueue = [...newAiMessages];
-          let isProcessing = false;
-          let currentMessage = null;
-          const processNextMessage = () => {
-            if (messageQueue.length > 0 && !isProcessing) {
-              isProcessing = true;
-              const nextMessage = messageQueue.shift();
-              if (nextMessage) {
-                currentMessage = nextMessage;
-                console.log("\u5F00\u59CB\u5904\u7406\u6D88\u606F:", currentMessage.chatId);
-                chatList.value.push(currentMessage);
-                emit("sendMessage", [...chatList.value]);
-                const msgIndex = chatList.value.length - 1;
-                nextTick(() => {
-                  renderContent((currentMessage == null ? void 0 : currentMessage.content) || "", "main", msgIndex);
-                  nextTick(() => {
-                    scrollToBottom();
-                    if (currentMessage) {
-                      const messageToProcess = {
-                        ...currentMessage,
-                        needSequenceProcessing: true
-                      };
-                      simulateStreamOutput(msgIndex, messageToProcess);
-                    }
-                  });
-                });
-              }
-            }
-          };
-          const handleMessageComplete = (chatId) => {
-            if (currentMessage && currentMessage.chatId === chatId) {
-              console.log("\u5E8F\u5217\u6D88\u606F\u5904\u7406\u5B8C\u6210\uFF0C\u5904\u7406\u4E0B\u4E00\u6761:", chatId);
-              currentMessage = null;
-              isProcessing = false;
-              processNextMessage();
-            }
-          };
-          const processorObj = {
-            messageQueue,
-            isProcessing,
-            currentMessage,
-            processNextMessage,
-            handleMessageComplete
-          };
-          currentMessageProcessor.value = processorObj;
-          processNextMessage();
-        } else {
-          const defaultAiChatId = `ai_${Date.now()}`;
-          const defaultAiMessage = {
-            chatId: defaultAiChatId,
-            user: "ai",
-            type: "text",
-            content: unmatchText,
-            isShowLike: true,
-            isShowCopy: true
-          };
-          chatList.value.push(defaultAiMessage);
-          emit("sendMessage", [...chatList.value]);
-          nextTick(() => {
-            const msgIndex = chatList.value.findIndex((item) => item.chatId === defaultAiChatId);
-            if (msgIndex !== -1) {
-              renderContent(defaultAiMessage.content, "main", msgIndex);
-              nextTick(() => {
-                scrollToBottom();
-              });
-            }
-          });
-        }
-        inputValue.value = "";
-      } else {
-        if (content) {
-          inputValue.value = content;
-        }
-        if ((isChating.value || !inputValue.value.trim() && !(fileList == null ? void 0 : fileList.length)) && !auto)
-          return;
-        const userChatId = "user_" + Math.random().toString(36).slice(2).padEnd(10, "0").slice(0, 10);
-        const userMessage = {
-          chatId: userChatId,
-          user: "u",
-          type: "text",
-          content: inputValue.value,
-          files: fileList || []
-        };
-        chatList.value.push(userMessage);
-        const index = chatList.value.length - 1;
-        nextTick(() => {
-          renderContent(userMessage.content, "main", index);
-          scrollToBottom();
-        });
-        openSSE(inputValue.value, index + 1, 1);
-        inputValue.value = "";
-      }
-    };
-    const handleStop = () => {
-      var _a, _b;
-      (_a = fetchStream.value) == null ? void 0 : _a.abort();
-      const aiIndex = chatList.value.findIndex((item) => item.isChating);
-      if (aiIndex !== -1) {
-        const currentAiMessage = chatList.value[aiIndex];
-        if ((_b = currentAiMessage.content) == null ? void 0 : _b.trim()) {
-          nextTick(() => {
-            chatList.value[aiIndex] = {
-              ...currentAiMessage,
-              content: currentAiMessage.content + "...",
-              isChating: false
-            };
-            renderContent(chatList.value[aiIndex].content, "main", aiIndex);
-            emit("sendMessage", chatList.value);
-          });
-        } else {
-          if (aiIndex > 0) {
-            const userMessageIndex = aiIndex - 1;
-            if (chatList.value[userMessageIndex].user === "u") {
-              chatList.value.splice(userMessageIndex, 2);
-            } else {
-              chatList.value.splice(aiIndex, 1);
-            }
-          } else {
-            chatList.value.splice(aiIndex, 1);
-          }
-        }
-      } else {
-        const lastIndex = chatList.value.length - 1;
-        if (lastIndex >= 0 && chatList.value[lastIndex].user === "u") {
-          chatList.value.pop();
-        }
-      }
-      isChating.value = false;
-    };
-    const scrollObserver = ref(null);
-    const scrollToBottom = () => {
-      if (!isMounted.value || isUnmounting.value || !chatContainer.value)
-        return;
-      nextTick(() => {
-        requestAnimationFrame(() => {
-          const chatContainerEl = chatContainer.value;
-          const lastMessage = chatContainerEl.querySelector(".touchchat-dialog-content > *:last-child");
-          if (lastMessage) {
-            const { height: messageHeight } = lastMessage.getBoundingClientRect();
-            const containerHeight = chatContainerEl.clientHeight;
-            const messageBottom = lastMessage.offsetTop + lastMessage.offsetHeight;
-            if (messageHeight > containerHeight) {
-              chatContainerEl.scrollTop = lastMessage.offsetTop;
-            } else {
-              chatContainerEl.scrollTop = messageBottom - containerHeight;
-            }
-            if (scrollObserver.value) {
-              scrollObserver.value.disconnect();
-            }
-            scrollObserver.value = new MutationObserver(() => {
-              const updatedMessageBottom = lastMessage.offsetTop + lastMessage.offsetHeight;
-              chatContainerEl.scrollTop = Math.max(updatedMessageBottom - containerHeight, chatContainerEl.scrollTop);
-            });
-            scrollObserver.value.observe(lastMessage, {
-              childList: true,
-              subtree: true,
-              characterData: true,
-              attributes: true,
-              // 新增监听属性变化（如高度）
-              attributeFilter: ["style", "class"]
-              // 只监听样式相关属性
-            });
-          } else {
-            chatContainerEl.scrollTo({
-              top: chatContainerEl.scrollHeight,
-              behavior: "smooth"
-            });
-          }
-        });
-      });
-    };
-    const handleMessageAction = (action, index) => {
-      const message = chatList.value[index];
-      if (!message)
-        return;
-      switch (action) {
-        case MessageAction.COPY: {
-          const textContent = message.content;
-          navigator.clipboard.writeText(textContent).then(() => {
-            showToast("\u590D\u5236\u6210\u529F", "info");
-          }).catch((err) => {
-            console.error("\u590D\u5236\u5931\u8D25:", err);
-            showToast("\u590D\u5236\u5931\u8D25", "error");
-          });
-          break;
-        }
-        case MessageAction.EDIT:
-          message.isEditing = true;
-          message.editContent = message.content;
-          break;
-        case MessageAction.DELETE:
-          messageUtils.deleteMessageChain(index);
-          emit("sendMessage", chatList.value);
-          break;
-        case MessageAction.RETRY: {
-          const aiMessage = chatList.value[index];
-          const userMessageIndex = index - 1;
-          const userMessage = chatList.value[userMessageIndex];
-          if (userMessage && userMessage.user === "u") {
-            const updatedAiMessage = {
-              ...aiMessage,
-              content: "",
-              thinkContent: "",
-              reasoningContent: "",
-              isLiked: false,
-              isDisliked: false,
-              isChating: true,
-              chatId: aiMessage.chatId,
-              user: aiMessage.user,
-              type: aiMessage.type,
-              thinkStatus: ThinkStatus.COMPLETED,
-              thinkStartTime: 0,
-              thinkEndTime: 0
-            };
-            chatList.value.splice(index, 1, updatedAiMessage);
-            nextTick(() => {
-              if (htmlContentRef.value[index])
-                htmlContentRef.value[index].innerHTML = "";
-              if (thinkingContentRef.value[index])
-                thinkingContentRef.value[index].innerHTML = "";
-              if (reasoningContentRef.value[index])
-                reasoningContentRef.value[index].innerHTML = "";
-              setTimeout(() => {
-                openSSE(userMessage.content || "", index, 2);
-              }, 50);
-            });
-          }
-          break;
-        }
-        case MessageAction.LIKE:
-          messageUtils.updateMessage(index, {
-            isLiked: true,
-            isDisliked: false
-          });
-          break;
-        case MessageAction.DISLIKE:
-          messageUtils.updateMessage(index, {
-            isLiked: false,
-            isDisliked: true
-          });
-          break;
-      }
+    const toggleSidebarClick = (item, index) => {
+      emit("toggleSidebar", item, index);
     };
-    const saveEdit = (index, newContent) => {
-      const message = chatList.value[index];
-      if (!message || !message.editContent)
-        return;
-      chatList.value[index] = {
-        ...message,
-        content: newContent,
-        isEditing: false,
-        editContent: void 0
-      };
-      nextTick(() => {
-        renderContent(message.content, "main", index);
-      });
-      if (index + 1 < chatList.value.length && chatList.value[index + 1].user === "ai") {
-        chatList.value.splice(index + 1, 1);
+    const itemUploadFile = (_item, index) => {
+      if (ChatInputRef.value) {
+        ChatInputRef.value.itemUploadFile(index, "drop");
       }
-      openSSE(newContent, index + 1);
-      emit("sendMessage", chatList.value);
-    };
-    const cancelEdit = (index) => {
-      const message = chatList.value[index];
-      if (!message)
-        return;
-      message.isEditing = false;
-      message.editContent = "";
-      nextTick(() => {
-        renderContent(message.content, "main", index);
-      });
     };
-    onMounted(async () => {
-      if (isMounted.value) {
-        init();
-      }
-      isMounted.value = true;
+    onMounted(() => {
+      chatOnMounted();
       watch(
         () => scripts,
         () => {
@@ -1196,84 +124,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       );
     });
     onBeforeUnmount(() => {
-      if (!isUnmounting.value) {
-        isUnmounting.value = true;
-        if (fetchStream.value) {
-          fetchStream.value.abort();
-          fetchStream.value = null;
-        }
-        if (TouchChatRobot.value) {
-          TouchChatRobot.value.close();
-          TouchChatRobot.value = void 0;
-        }
-        isMounted.value = false;
-        renderQueue.value = [];
-        htmlContentRef.value = [];
-        thinkingContentRef.value = [];
-        reasoningContentRef.value = [];
-      }
-      if (scrollObserver.value) {
-        scrollObserver.value.disconnect();
-        scrollObserver.value = null;
-      }
+      chatOnBeforeUnmount();
     });
-    const handleDragEnter = () => {
-      if (ChatInputRef.value) {
-        ChatInputRef.value.openMarkLayer();
-      }
-      isDragging.value = true;
-    };
-    const handleDragLeave = (e) => {
-      const rect = e.target.getBoundingClientRect();
-      if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {
-        isDragging.value = false;
-      }
-    };
-    const handleDrop = async (e) => {
-      var _a;
-      isDragging.value = false;
-      const files = (_a = e.dataTransfer) == null ? void 0 : _a.files;
-      if (files && files.length > 0) {
-        const fileList = await Promise.all(
-          Array.from(files).map(async (file) => {
-            let base64 = "";
-            if (file.type.startsWith("image/")) {
-              base64 = await new Promise((resolve) => {
-                const reader = new FileReader();
-                reader.onload = (e2) => {
-                  var _a2;
-                  resolve((_a2 = e2.target) == null ? void 0 : _a2.result);
-                };
-                reader.readAsDataURL(file);
-              });
-            }
-            return {
-              // id: crypto.randomUUID().replace(/-/gi, ''),
-              id: Math.random().toString(36).slice(2).padEnd(10, "0").slice(0, 10),
-              file,
-              name: file.name,
-              fileType: file.type,
-              fileSize: file.size,
-              lastModified: file.lastModified,
-              preview: URL.createObjectURL(file),
-              base64
-            };
-          })
-        );
-        if (ChatInputRef.value) {
-          ChatInputRef.value.handlePaste(fileList, "drop");
-        }
-      }
-      if (ChatInputRef.value) {
-        ChatInputRef.value.colseMarkLayer();
-      }
-    };
-    const itemUploadFile = (item, index) => {
-      console.log("itemUploadFile", item, index);
-      if (ChatInputRef.value) {
-        ChatInputRef.value.itemUploadFile(index, "drop");
-      }
-    };
     provide("touchchat", {
       send: sendMessage,
       retry: handleMessageAction
@@ -1293,118 +145,112 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         class: "touchchat-main",
         onDragover: withModifiers(() => {
         }, ["prevent"]),
-        onDragenter: withModifiers(handleDragEnter, ["prevent"]),
-        onDragleave: handleDragLeave,
-        onDrop: withModifiers(handleDrop, ["prevent"])
+        onDragenter: withModifiers(unref(handleDragEnter), ["prevent"]),
+        onDragleave: unref(handleDragLeave),
+        onDrop: withModifiers(unref(handleDrop), ["prevent"])
       }, [
-        createElementVNode(
-          "div",
-          {
-            ref_key: "chatContainer",
-            ref: chatContainer,
-            class: "touchchat-dialog",
-            onScroll: handleScroll
-          },
-          [
-            renderSlot(_ctx.$slots, "top"),
-            chatList.value.length === 0 ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "touchchat-welcome"
-            }, [
-              renderSlot(_ctx.$slots, "welcome", {}, () => [
-                createVNode(HelloChat, { onSendMessage: sendMessage })
-              ])
-            ])) : createCommentVNode("v-if", true),
-            createElementVNode("div", { class: "touchchat-dialog-content" }, [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(chatList.value, (item, index) => {
-                  return openBlock(), createElementBlock(
-                    Fragment,
-                    {
-                      key: item.chatId
-                    },
-                    [
-                      item.user === "u" ? (openBlock(), createBlock(UserMessage, {
-                        key: 0,
-                        item,
-                        index,
-                        onUserMessageFileList: itemUploadFile,
-                        onCopy: ($event) => handleMessageAction(unref(MessageAction).COPY, index),
-                        onEdit: ($event) => handleMessageAction(unref(MessageAction).EDIT, index),
-                        onDelete: ($event) => handleMessageAction(unref(MessageAction).DELETE, index),
-                        onSaveEdit: saveEdit,
-                        onCancelEdit: ($event) => cancelEdit(index)
-                      }, {
-                        userAvatar: withCtx(() => [
-                          renderSlot(_ctx.$slots, "userAvatar")
-                        ]),
-                        fn: withCtx(() => [
-                          renderSlot(_ctx.$slots, "fn", {
-                            item,
-                            index
-                          })
-                        ]),
-                        _: 2
-                        /* DYNAMIC */
-                      }, 1032, ["item", "index", "onCopy", "onEdit", "onDelete", "onCancelEdit"])) : (openBlock(), createBlock(AiMessage, {
-                        key: 1,
-                        item,
-                        index,
-                        "enable-deep-thinking": enableDeepThinking.value,
-                        "has-retry": activeAgentsName.value || unref(scripts).length > 0 ? false : true,
-                        onCopy: ($event) => handleMessageAction(unref(MessageAction).COPY, index),
-                        onRetry: ($event) => handleMessageAction(unref(MessageAction).RETRY, index),
-                        onLike: ($event) => handleMessageAction(unref(MessageAction).LIKE, index),
-                        onDislike: ($event) => handleMessageAction(unref(MessageAction).DISLIKE, index),
-                        onContentRendered: attachCopyButtons,
-                        onCompleteRendered: (chatId) => completeRendered(chatId),
-                        onToggleSidebar: toggleSidebarClick
-                      }, {
-                        aimsg: withCtx(() => [
-                          renderSlot(_ctx.$slots, "aimsg", {
-                            item,
-                            index
-                          })
-                        ]),
-                        msg: withCtx(() => [
-                          renderSlot(_ctx.$slots, "msg", {
-                            item,
-                            index
-                          })
-                        ]),
-                        aiAvatar: withCtx(() => [
-                          renderSlot(_ctx.$slots, "aiAvatar")
-                        ]),
-                        fn: withCtx(() => [
-                          renderSlot(_ctx.$slots, "fn", {
-                            item,
-                            index
-                          })
-                        ]),
-                        extendsFn: withCtx(() => [
-                          renderSlot(_ctx.$slots, "extendsFn", {
-                            item,
-                            index
-                          })
-                        ]),
-                        _: 2
-                        /* DYNAMIC */
-                      }, 1032, ["item", "index", "enable-deep-thinking", "has-retry", "onCopy", "onRetry", "onLike", "onDislike", "onCompleteRendered"]))
-                    ],
-                    64
-                    /* STABLE_FRAGMENT */
-                  );
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
+        createElementVNode("div", {
+          ref_key: "chatContainer",
+          ref: chatContainer,
+          class: "touchchat-dialog",
+          onScroll: unref(handleScroll)
+        }, [
+          renderSlot(_ctx.$slots, "top"),
+          unref(chatList).length === 0 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "touchchat-welcome"
+          }, [
+            renderSlot(_ctx.$slots, "welcome", {}, () => [
+              createVNode(HelloChat, { onSendMessage: unref(sendMessage) }, null, 8, ["onSendMessage"])
             ])
-          ],
-          544
-          /* NEED_HYDRATION, NEED_PATCH */
-        ),
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode("div", { class: "touchchat-dialog-content" }, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(unref(chatList), (item, index) => {
+                return openBlock(), createElementBlock(
+                  Fragment,
+                  {
+                    key: item.chatId
+                  },
+                  [
+                    item.user === "u" ? (openBlock(), createBlock(UserMessage, {
+                      key: 0,
+                      item,
+                      index,
+                      onUserMessageFileList: itemUploadFile,
+                      onCopy: ($event) => unref(handleMessageAction)(unref(MessageAction).COPY, index),
+                      onEdit: ($event) => unref(handleMessageAction)(unref(MessageAction).EDIT, index),
+                      onDelete: ($event) => unref(handleMessageAction)(unref(MessageAction).DELETE, index),
+                      onSaveEdit: unref(saveEdit),
+                      onCancelEdit: ($event) => unref(cancelEdit)(index)
+                    }, {
+                      userAvatar: withCtx(() => [
+                        renderSlot(_ctx.$slots, "userAvatar")
+                      ]),
+                      fn: withCtx(() => [
+                        renderSlot(_ctx.$slots, "fn", {
+                          item,
+                          index
+                        })
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["item", "index", "onCopy", "onEdit", "onDelete", "onSaveEdit", "onCancelEdit"])) : (openBlock(), createBlock(AiMessage, {
+                      key: 1,
+                      item,
+                      index,
+                      "enable-deep-thinking": unref(enableDeepThinking),
+                      "has-retry": unref(activeAgentsName) || scriptsLength.value > 0 ? false : true,
+                      onCopy: ($event) => unref(handleMessageAction)(unref(MessageAction).COPY, index),
+                      onRetry: ($event) => unref(handleMessageAction)(unref(MessageAction).RETRY, index),
+                      onLike: ($event) => unref(handleMessageAction)(unref(MessageAction).LIKE, index),
+                      onDislike: ($event) => unref(handleMessageAction)(unref(MessageAction).DISLIKE, index),
+                      onContentRendered: attachCopyButtons,
+                      onCompleteRendered: unref(completeRendered),
+                      onToggleSidebar: toggleSidebarClick
+                    }, {
+                      aimsg: withCtx(() => [
+                        renderSlot(_ctx.$slots, "aimsg", {
+                          item,
+                          index
+                        })
+                      ]),
+                      msg: withCtx(() => [
+                        renderSlot(_ctx.$slots, "msg", {
+                          item,
+                          index
+                        })
+                      ]),
+                      aiAvatar: withCtx(() => [
+                        renderSlot(_ctx.$slots, "aiAvatar")
+                      ]),
+                      fn: withCtx(() => [
+                        renderSlot(_ctx.$slots, "fn", {
+                          item,
+                          index
+                        })
+                      ]),
+                      extendsFn: withCtx(() => [
+                        renderSlot(_ctx.$slots, "extendsFn", {
+                          item,
+                          index
+                        })
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["item", "index", "enable-deep-thinking", "has-retry", "onCopy", "onRetry", "onLike", "onDislike", "onCompleteRendered"]))
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ], 40, ["onScroll"]),
         _ctx.$slots.shortcut ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "touchchat-edit-shortcut"
@@ -1415,15 +261,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(ChatInput, {
             ref_key: "ChatInputRef",
             ref: ChatInputRef,
-            "input-value": inputValue.value,
-            "onUpdate:inputValue": ($event) => inputValue.value = $event,
-            "enable-deep-thinking": enableDeepThinking.value,
-            "onUpdate:enableDeepThinking": ($event) => enableDeepThinking.value = $event,
-            "is-chating": isChating.value,
-            onSend: handleBeforeSend,
-            onStop: handleStop,
+            "input-value": unref(inputValue),
+            "onUpdate:inputValue": ($event) => isRef(inputValue) ? inputValue.value = $event : null,
+            "enable-deep-thinking": unref(enableDeepThinking),
+            "onUpdate:enableDeepThinking": ($event) => isRef(enableDeepThinking) ? enableDeepThinking.value = $event : null,
+            "is-chating": unref(isChating),
+            onSend: unref(handleBeforeSend),
+            onStop: unref(handleStop),
             onToggleDeepThinking: (val) => enableDeepThinking.value = val,
-            onModuleInfo: updateModule
+            onModuleInfo: (_info) => {
+            }
           }, {
             editTop: withCtx(() => [
               renderSlot(_ctx.$slots, "editTop")
@@ -1433,9 +280,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
             /* FORWARDED */
-          }, 8, ["input-value", "onUpdate:inputValue", "enable-deep-thinking", "onUpdate:enableDeepThinking", "is-chating", "onToggleDeepThinking"])
+          }, 8, ["input-value", "onUpdate:inputValue", "enable-deep-thinking", "onUpdate:enableDeepThinking", "is-chating", "onSend", "onStop", "onToggleDeepThinking"])
         ])
-      ], 40, ["onDragover"]);
+      ], 40, ["onDragover", "onDragenter", "onDragleave", "onDrop"]);
     };
   }
 });