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

package/lib/packages/components/touchchat/src/AiChat/TouchAgent.vue2.js

@@ -0,0 +1,933 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var UserMessage = require('./UserMessage.vue.js');
+var AiMessage = require('./AiMessage.vue.js');
+var ChatInput = require('./ChatInput.vue.js');
+var HelloChat = require('../../component/HelloChat.vue.js');
+var index = require('../../../../../node_modules/.pnpm/throttle-debounce@5.0.2/node_modules/throttle-debounce/esm/index.js');
+var markdown = require('../../utils/markdown.js');
+var tools = require('../../utils/tools.js');
+var TouchChat = require('./Chat/TouchChat.js');
+var a2aService = require('../../utils/a2aService.js');
+
+const MULTI_AGENT_HOST = "/mas/host_agent";
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "TouchAgent",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["sendMessage", "toggleSidebar", "beforeSendMessage"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const DEFAULT_AGENT = {
+      id: "agent-1",
+      name: "A2A Agent",
+      version: "1.0",
+      endpoint: "http://10.19.93.128:30015/engine/api/v1/a2a/7b8f4d0eeee643859a812a166c606b13/1.0",
+      authToken: "c09f1251-e979-4a1a-ac67-6a11a8ab49f7",
+      // endpoint: '/agent-api/Njd8NnwxfDUy',
+      // authToken: 'a7ef44a7-9e85-4989-a2eb-34ae4dc76b7a',
+      description: "Default A2A agent"
+    };
+    const agentConfigListRef = vue.inject("agentConfigList", vue.ref([]));
+    const iAgentConfigList = vue.ref(agentConfigListRef.value);
+    const selectedAgents = vue.ref(["agent-1"]);
+    const availableAgents = vue.ref(iAgentConfigList.value || [DEFAULT_AGENT]);
+    vue.watch(
+      agentConfigListRef,
+      (newVal) => {
+        iAgentConfigList.value = newVal;
+        availableAgents.value = newVal || [DEFAULT_AGENT];
+        availableAgents.value.forEach((agent) => {
+          a2aService.a2aService.registerAgent(agent);
+        });
+        if (availableAgents.value.length > 0) {
+          selectedAgents.value = [availableAgents.value[0].id];
+        }
+        console.log("availableAgents === TouchAgent.vue === 119", availableAgents.value);
+      },
+      { immediate: true, deep: true }
+    );
+    const emit = __emit;
+    const afterSend = vue.inject("afterSend", () => {
+      console.warn("\u672A\u63D0\u4F9BafterSend\u51FD\u6570");
+    });
+    const sendMessageInject = vue.inject("send", () => {
+      console.warn("\u672A\u63D0\u4F9BhandleSend\u51FD\u6570");
+    });
+    const beforeSend = vue.inject("beforeSend", () => ({
+      result: true,
+      componentName: ""
+    }));
+    const bottom = vue.inject("bottom", () => {
+      console.warn("\u672A\u63D0\u4F9Bbottom\u51FD\u6570");
+    });
+    const props = __props;
+    const chatContainer = vue.ref(null);
+    const htmlContentRef = vue.ref([]);
+    const thinkingContentRef = vue.ref([]);
+    const reasoningContentRef = vue.ref([]);
+    const isMounted = vue.ref(false);
+    const isChating = vue.ref(false);
+    const inputValue = vue.ref("");
+    const chatList = vue.ref([]);
+    const currIndex = vue.ref(0);
+    const isUnmounting = vue.ref(false);
+    const currentComponentName = vue.ref("");
+    const fileData = vue.ref([]);
+    const ChatInputRef = vue.ref(null);
+    const isDragging = vue.ref(false);
+    const typeFlag = vue.ref("");
+    const renderQueue = vue.ref([]);
+    const isRendering = vue.ref(false);
+    const currentMessageProcessor = vue.ref(null);
+    const messageUtils = {
+      updateMessage: (index, updates) => {
+        if (index < 0 || index >= chatList.value.length)
+          return;
+        chatList.value.splice(index, 1, { ...chatList.value[index], ...updates });
+        vue.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 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) {
+          chatList.value = props.value.map((item) => ({
+            ...item,
+            content: item.thinkContent ? item.content || "" : item.content || "",
+            thinkContent: item.thinkContent || ""
+          }));
+          vue.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");
+                }
+              });
+              vue.nextTick(() => {
+                scrollToBottom();
+              });
+            });
+          });
+        }
+      } catch (error) {
+        console.error("\u521D\u59CB\u5316\u5931\u8D25:", error);
+      }
+    };
+    const onScrollToBottom = () => {
+      bottom();
+    };
+    const throttledScrollToBottom = index.throttle(300, onScrollToBottom);
+    const handleScroll = () => {
+      if (!chatContainer.value)
+        return;
+      const { scrollTop, scrollHeight, clientHeight } = chatContainer.value;
+      if (scrollTop + clientHeight >= scrollHeight) {
+        throttledScrollToBottom();
+      }
+    };
+    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];
+      currentItem.thinkContent = data.thinkContent;
+      currentItem.content = data.mainContent;
+      currentItem.reasoningContent = data.reasoningContent;
+      vue.nextTick(() => {
+        const thinkingContainer = thinkingContentRef.value[currIndex.value];
+        if (thinkingContainer) {
+          if (data.thinkContent) {
+            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) {
+            renderContent(data.reasoningContent, "reasoning");
+            reasoningContainer.style.display = "block";
+            reasoningContainer.style.visibility = "visible";
+          } else {
+            reasoningContainer.style.display = "none";
+            reasoningContainer.style.visibility = "hidden";
+          }
+        }
+        renderContent(data.mainContent, "main");
+      });
+    };
+    const generateMessageId = () => {
+      return `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    };
+    const createTextMessage = (text, role) => ({
+      messageId: generateMessageId(),
+      role,
+      parts: [{ type: "text", text }],
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    const randerAngentMessage = (fullResponseText, chatId) => {
+      if (chatList.value.some((ele) => ele.chatId === chatId)) {
+        enqueueRender({
+          mainContent: fullResponseText,
+          thinkContent: "",
+          reasoningContent: ""
+        });
+      }
+    };
+    const sendSingleAgentMessage = async (userContent, chatId) => {
+      var _a, _b, _c, _d, _e;
+      const agentMessage = createTextMessage(userContent, "user");
+      const agentId = selectedAgents.value[0];
+      const stream = await a2aService.a2aService.streamMessage(agentId, agentMessage);
+      let fullResponseText = "";
+      const reader = stream.getReader();
+      try {
+        let isDone = false;
+        while (!isDone) {
+          const { done, value: chunk } = await reader.read();
+          if (done) {
+            isDone = true;
+            break;
+          }
+          if (chunk.result) {
+            if ("artifact" in chunk.result) {
+              const artifact = chunk.result.artifact;
+              if (artifact && artifact.parts) {
+                const textParts = artifact.parts.filter((p) => p.kind === "text");
+                const newText = textParts.map((p) => p.text).join("");
+                fullResponseText += newText;
+                randerAngentMessage(fullResponseText, chatId);
+              }
+            }
+            if ("status" in chunk.result) {
+              const status = chunk.result.status;
+              if ((_a = status == null ? void 0 : status.message) == null ? void 0 : _a.parts) {
+                const textParts = status.message.parts.filter((p) => p.kind === "text");
+                const newText = textParts.map((p) => p.text).join("");
+                fullResponseText += newText;
+                randerAngentMessage(fullResponseText, chatId);
+              }
+            }
+          }
+          if ((_c = (_b = chunk.params) == null ? void 0 : _b.message) == null ? void 0 : _c.parts) {
+            const allParts = chunk.params.message.parts;
+            const textParts = allParts.filter((p) => p.type === "text" || p.kind === "text");
+            const newText = textParts.map((p) => p.text).join("");
+            fullResponseText += newText;
+            randerAngentMessage(fullResponseText, chatId);
+          }
+          if ((_d = chunk.params) == null ? void 0 : _d.status) {
+            console.log("Task status:", chunk.params.status);
+          }
+          if ((_e = chunk.params) == null ? void 0 : _e.artifact) {
+            console.log("Artifact received:", chunk.params.artifact);
+          }
+        }
+      } finally {
+        reader.releaseLock();
+      }
+      vue.nextTick(() => {
+        emit("sendMessage", [...chatList.value]);
+      });
+      isChating.value = false;
+      chatList.value[currIndex.value].isChating = false;
+      if (fullResponseText) {
+        afterSend({ allAiContent: fullResponseText });
+      }
+    };
+    const getSubAgents = () => {
+      return availableAgents.value.map((agent) => ({
+        agent_name: agent.agent_name,
+        agent_url: agent.agent_url,
+        headers: agent.headers
+      }));
+    };
+    const sendMultiAgentMessage = async (text, chatId) => {
+      var _a;
+      let fullResponseText = "";
+      try {
+        const userMessage = createTextMessage(text, "user");
+        const subAgents = getSubAgents();
+        const stream = a2aService.a2aService.streamMultiAgentMessage(MULTI_AGENT_HOST, subAgents, userMessage);
+        for await (const chunk of stream) {
+          if (chunk.result) {
+            if ("artifact" in chunk.result) {
+              const artifact = chunk.result.artifact;
+              if (artifact && artifact.parts) {
+                const textParts = artifact.parts.filter((p) => p.kind === "text");
+                const newText = textParts.map((p) => p.text).join("");
+                fullResponseText += newText;
+                randerAngentMessage(fullResponseText, chatId);
+                console.log("Multi-agent newText artifact", newText);
+              }
+            }
+            if ("status" in chunk.result) {
+              const status = chunk.result.status;
+              if ((_a = status == null ? void 0 : status.message) == null ? void 0 : _a.parts) {
+                const textParts = status.message.parts.filter((p) => p.kind === "text");
+                const newText = textParts.map((p) => p.text).join("");
+                console.log("Multi-agent newText status", newText);
+                fullResponseText += newText;
+                randerAngentMessage(fullResponseText, chatId);
+              }
+            }
+          }
+        }
+        const lastMessage = chatList.value[chatList.value.length - 1];
+        if (lastMessage && lastMessage.role === "agent") {
+          lastMessage.timestamp = (/* @__PURE__ */ new Date()).toISOString();
+        }
+      } catch (err) {
+        console.error("Error in multi-agent mode:", err);
+        const lastMessage = chatList.value[chatList.value.length - 1];
+        if (lastMessage && lastMessage.role === "agent") {
+          chatList.value.pop();
+        }
+      } finally {
+      }
+      vue.nextTick(() => {
+        emit("sendMessage", [...chatList.value]);
+      });
+      isChating.value = false;
+      chatList.value[currIndex.value].isChating = false;
+      if (fullResponseText) {
+        afterSend({ allAiContent: fullResponseText });
+      }
+    };
+    const openSSE = async (userContent, insertIndex) => {
+      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);
+        if (!currentAiMessage) {
+          const chatItem = {
+            chatId,
+            user: "ai",
+            type: "text",
+            isChating: true,
+            content: "",
+            thinkContent: "",
+            reasoningContent: "",
+            thinkStatus: TouchChat.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;
+        if (availableAgents.value.length === 1) {
+          sendSingleAgentMessage(userContent, chatId);
+        } else {
+          sendMultiAgentMessage(userContent, chatId);
+        }
+      } 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;
+        tools.showToast("\u8BF7\u6C42\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5", "error", 3e3);
+      }
+    };
+    const attachCopyButtons = (container) => {
+      const codeBlocks = container.querySelectorAll("pre code");
+      codeBlocks.forEach((codeBlock) => {
+        const pre = codeBlock.parentElement;
+        if (pre) {
+          const copyBtn = document.createElement("button");
+          copyBtn.className = "touchchat-code-copy";
+          copyBtn.addEventListener("click", () => {
+            const code = codeBlock.textContent || "";
+            navigator.clipboard.writeText(code).then(() => {
+              tools.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);
+              tools.showToast("\u590D\u5236\u5931\u8D25", "error", 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.default) == null ? void 0 : _a.render(content2, { isReasoning: false })) || "";
+        },
+        thinking: (content2) => {
+          var _a;
+          return ((_a = markdown.default) == null ? void 0 : _a.render(content2, { isReasoning: false })) || "";
+        },
+        reasoning: (content2) => {
+          var _a;
+          return ((_a = markdown.default) == 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 (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;
+      vue.nextTick(() => {
+        renderContent(userMessage.content, "main", index);
+        scrollToBottom();
+      });
+      openSSE(inputValue.value, index + 1);
+      inputValue.value = "";
+    };
+    const scrollObserver = vue.ref(null);
+    const scrollToBottom = () => {
+      if (!isMounted.value || isUnmounting.value || !chatContainer.value)
+        return;
+      vue.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 TouchChat.MessageAction.COPY: {
+          const textContent = message.content;
+          navigator.clipboard.writeText(textContent).then(() => {
+            tools.showToast("\u590D\u5236\u6210\u529F", "info");
+          }).catch((err) => {
+            console.error("\u590D\u5236\u5931\u8D25:", err);
+            tools.showToast("\u590D\u5236\u5931\u8D25", "error");
+          });
+          break;
+        }
+        case TouchChat.MessageAction.EDIT:
+          message.isEditing = true;
+          message.editContent = message.content;
+          break;
+        case TouchChat.MessageAction.DELETE:
+          messageUtils.deleteMessageChain(index);
+          emit("sendMessage", chatList.value);
+          break;
+        case TouchChat.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: TouchChat.ThinkStatus.COMPLETED,
+              thinkStartTime: 0,
+              thinkEndTime: 0
+            };
+            chatList.value.splice(index, 1, updatedAiMessage);
+            vue.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);
+              }, 50);
+            });
+          }
+          break;
+        }
+        case TouchChat.MessageAction.LIKE:
+          messageUtils.updateMessage(index, {
+            isLiked: true,
+            isDisliked: false
+          });
+          break;
+        case TouchChat.MessageAction.DISLIKE:
+          messageUtils.updateMessage(index, {
+            isLiked: false,
+            isDisliked: true
+          });
+          break;
+      }
+    };
+    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
+      };
+      vue.nextTick(() => {
+        renderContent(message.content, "main", index);
+      });
+      if (index + 1 < chatList.value.length && chatList.value[index + 1].user === "ai") {
+        chatList.value.splice(index + 1, 1);
+      }
+      openSSE(newContent, index + 1);
+      emit("sendMessage", chatList.value);
+    };
+    const cancelEdit = (index) => {
+      const message = chatList.value[index];
+      if (!message)
+        return;
+      message.isEditing = false;
+      message.editContent = "";
+      vue.nextTick(() => {
+        renderContent(message.content, "main", index);
+      });
+    };
+    vue.onMounted(async () => {
+      if (isMounted.value) {
+        init();
+      }
+      isMounted.value = true;
+      availableAgents.value.forEach((agent) => {
+        a2aService.a2aService.registerAgent(agent);
+      });
+      if (availableAgents.value.length > 0) {
+        selectedAgents.value = [availableAgents.value[0].id];
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      if (!isUnmounting.value) {
+        isUnmounting.value = true;
+        isMounted.value = false;
+        htmlContentRef.value = [];
+        thinkingContentRef.value = [];
+        reasoningContentRef.value = [];
+      }
+      if (scrollObserver.value) {
+        scrollObserver.value.disconnect();
+        scrollObserver.value = null;
+      }
+    });
+    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");
+      }
+    };
+    vue.provide("touchchat", {
+      send: sendMessage,
+      retry: handleMessageAction
+    });
+    __expose({
+      send: (value, fileList, auto, type) => {
+        handleSend(value, fileList, auto, type);
+      },
+      retry: (index) => {
+        handleMessageAction(TouchChat.MessageAction.RETRY, index);
+      },
+      update
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "touchchat-main",
+        onDragover: vue.withModifiers(() => {
+        }, ["prevent"]),
+        onDragenter: vue.withModifiers(handleDragEnter, ["prevent"]),
+        onDragleave: handleDragLeave,
+        onDrop: vue.withModifiers(handleDrop, ["prevent"])
+      }, [
+        vue.createElementVNode(
+          "div",
+          {
+            ref_key: "chatContainer",
+            ref: chatContainer,
+            class: "touchchat-dialog",
+            onScroll: handleScroll
+          },
+          [
+            vue.renderSlot(_ctx.$slots, "top"),
+            chatList.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "touchchat-welcome"
+            }, [
+              vue.renderSlot(_ctx.$slots, "welcome", {}, () => [
+                vue.createVNode(HelloChat.default, { onSendMessage: sendMessage })
+              ])
+            ])) : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", { class: "touchchat-dialog-content" }, [
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(chatList.value, (item, index) => {
+                  return vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    {
+                      key: item.chatId
+                    },
+                    [
+                      item.user === "u" ? (vue.openBlock(), vue.createBlock(UserMessage.default, {
+                        key: 0,
+                        item,
+                        index,
+                        onUserMessageFileList: itemUploadFile,
+                        onCopy: ($event) => handleMessageAction(vue.unref(TouchChat.MessageAction).COPY, index),
+                        onEdit: ($event) => handleMessageAction(vue.unref(TouchChat.MessageAction).EDIT, index),
+                        onDelete: ($event) => handleMessageAction(vue.unref(TouchChat.MessageAction).DELETE, index),
+                        onSaveEdit: saveEdit,
+                        onCancelEdit: ($event) => cancelEdit(index)
+                      }, {
+                        userAvatar: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "userAvatar")
+                        ]),
+                        fn: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "fn", {
+                            item,
+                            index
+                          })
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["item", "index", "onCopy", "onEdit", "onDelete", "onCancelEdit"])) : (vue.openBlock(), vue.createBlock(AiMessage.default, {
+                        key: 1,
+                        item,
+                        index,
+                        "has-retry": true,
+                        onCopy: ($event) => handleMessageAction(vue.unref(TouchChat.MessageAction).COPY, index),
+                        onRetry: ($event) => handleMessageAction(vue.unref(TouchChat.MessageAction).RETRY, index),
+                        onLike: ($event) => handleMessageAction(vue.unref(TouchChat.MessageAction).LIKE, index),
+                        onDislike: ($event) => handleMessageAction(vue.unref(TouchChat.MessageAction).DISLIKE, index),
+                        onContentRendered: attachCopyButtons,
+                        onCompleteRendered: (chatId) => completeRendered(chatId),
+                        onToggleSidebar: toggleSidebarClick
+                      }, {
+                        aimsg: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "aimsg", {
+                            item,
+                            index
+                          })
+                        ]),
+                        msg: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "msg", {
+                            item,
+                            index
+                          })
+                        ]),
+                        aiAvatar: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "aiAvatar")
+                        ]),
+                        fn: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "fn", {
+                            item,
+                            index
+                          })
+                        ]),
+                        extendsFn: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "extendsFn", {
+                            item,
+                            index
+                          })
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["item", "index", "onCopy", "onRetry", "onLike", "onDislike", "onCompleteRendered"]))
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])
+          ],
+          544
+          /* NEED_HYDRATION, NEED_PATCH */
+        ),
+        _ctx.$slots.shortcut ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "touchchat-edit-shortcut"
+        }, [
+          vue.renderSlot(_ctx.$slots, "shortcut")
+        ])) : vue.createCommentVNode("v-if", true),
+        vue.renderSlot(_ctx.$slots, "edit", {}, () => [
+          vue.createVNode(ChatInput.default, {
+            ref_key: "ChatInputRef",
+            ref: ChatInputRef,
+            "input-value": inputValue.value,
+            "onUpdate:inputValue": ($event) => inputValue.value = $event,
+            "is-chating": isChating.value,
+            onSend: handleBeforeSend
+          }, null, 8, ["input-value", "onUpdate:inputValue", "is-chating"])
+        ])
+      ], 40, ["onDragover"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=TouchAgent.vue2.js.map