@touchvue/chat 1.0.0-beta.5 → 1.0.0-beta.50

package/es/packages/components/touchchat/src/AiChat/Chat/useChat.mjs

@@ -0,0 +1,693 @@
+import { ref, watch, nextTick } from 'vue';
+import { MessageAction, ThinkStatus } from './types.mjs';
+import { createScriptMatcher } from './scriptMatcher.mjs';
+import { useSSE } from './useSSE.mjs';
+import { useScroll } from './useScroll.mjs';
+import { useMessageRender } from './useMessageRender.mjs';
+import { useCopy } from './useCopy.mjs';
+
+function useChat({ props, emit, scripts, unmatchText, modules, afterSend, sendMessageInject, beforeSend, bottom, stop, chatContainer, chatInputRef }) {
+  const isMounted = ref(false);
+  const isChating = ref(false);
+  const inputValue = ref("");
+  const enableDeepThinking = ref(false);
+  const chatList = ref([]);
+  const currIndex = ref(0);
+  const isUnmounting = ref(false);
+  const currentComponentName = ref("");
+  const fileData = ref([]);
+  const activeAgentsName = ref("");
+  const moduleInfo = ref(modules[0] || { name: "deepseek-v3" });
+  const isDragging = ref(false);
+  const typeFlag = ref("");
+  const currentMessageProcessor = ref(null);
+  const { htmlContentRef, thinkingContentRef, reasoningContentRef, markdownToHtml, renderContent, enqueueRender } = useMessageRender({
+    chatList,
+    currIndex,
+    isMounted,
+    isUnmounting
+  });
+  const { scrollToBottom, handleScroll } = useScroll({
+    chatContainer,
+    isMounted,
+    isUnmounting,
+    bottom
+  });
+  const { copyToClipboard } = useCopy();
+  const scriptsRef = ref(scripts);
+  const { activeScript, findMatchingScriptContent } = createScriptMatcher({
+    scripts: scriptsRef,
+    activeAgentsName,
+    fileData,
+    unmatchText
+  });
+  const { fetchStream, resultItem, openSSE, cleanupSSE } = useSSE({
+    chatList,
+    currIndex,
+    isChating,
+    isMounted,
+    isUnmounting,
+    inputValue,
+    enableDeepThinking,
+    currentComponentName,
+    typeFlag,
+    moduleInfo,
+    emit,
+    fileData,
+    afterSend,
+    enqueueRender,
+    renderContent,
+    markdownToHtml,
+    scrollToBottom,
+    stop
+  });
+  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_" + 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 : "",
+        msgList: []
+      };
+    }
+  };
+  const update = (index, message) => {
+    chatList.value[index] = { ...chatList.value[index], ...message };
+  };
+  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) => {
+    if (currentMessageProcessor.value) {
+      currentMessageProcessor.value.handleMessageComplete(chatId);
+    }
+  };
+  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) {
+    }
+  };
+  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);
+  };
+  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 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,
+        isWithDraw: false,
+        isRead: false,
+        files: fileList || [],
+        typeFlag: type,
+        auto: auto || false,
+        msgList: [],
+        selecting: 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.type || "",
+            isShowLike: true,
+            isShowCopy: true,
+            needSequenceType: response.type || "",
+            needSequenceProcessing: response.needSequenceProcessing || false,
+            typeFlag: type,
+            msgList: [],
+            likeList: response.likeList
+          };
+          newAiMessages.push(aiMessage);
+        });
+        const 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;
+              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) {
+            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,
+          msgList: []
+        };
+        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 {
+      console.log("content === useChat === 488", content);
+      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 || [],
+        msgList: [],
+        isRead: false
+      };
+      chatList.value.push(userMessage);
+      const index = chatList.value.length - 1;
+      nextTick(() => {
+        renderContent(userMessage.content, "main", index);
+        scrollToBottom();
+      });
+      console.log("openSSE === useChat === 511");
+      openSSE(inputValue.value, index + 1);
+      inputValue.value = "";
+    }
+  };
+  const handleStop = () => {
+    var _a;
+    cleanupSSE();
+    const aiIndex = chatList.value.findIndex((item) => item.isChating);
+    if (aiIndex !== -1) {
+      const currentAiMessage = chatList.value[aiIndex];
+      if ((_a = currentAiMessage.content) == null ? void 0 : _a.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 handleMessageAction = (action, index) => {
+    const message = chatList.value[index];
+    if (!message)
+      return;
+    switch (action) {
+      case MessageAction.COPY: {
+        copyToClipboard(message.content, "\u590D\u5236\u6210\u529F", "\u590D\u5236\u5931\u8D25");
+        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,
+            isRead: false,
+            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);
+            }, 50);
+          });
+        }
+        break;
+      }
+      case MessageAction.LIKE:
+        messageUtils.updateMessage(index, {
+          isLiked: true,
+          isDisliked: false
+        });
+        break;
+      case MessageAction.DISLIKE:
+        messageUtils.updateMessage(index, {
+          isLiked: false,
+          isDisliked: true
+        });
+        break;
+      case MessageAction.WITHDRAW:
+        console.log("withDraw");
+        messageUtils.updateMessage(index, {
+          isWithDraw: true,
+          user: "withDraw"
+        });
+        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
+    };
+    nextTick(() => {
+      renderContent(newContent, "main", index);
+    });
+    const hasDeletedAi = index + 1 < chatList.value.length && chatList.value[index + 1].user === "ai";
+    if (hasDeletedAi) {
+      chatList.value.splice(index + 1, 1);
+    }
+    const insertPosition = index + 1;
+    nextTick(() => {
+      openSSE(newContent, insertPosition);
+    });
+    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);
+    });
+  };
+  const handleDragEnter = () => {
+    isDragging.value = true;
+    if (chatInputRef == null ? void 0 : chatInputRef.value) {
+      chatInputRef.value.openMarkLayer();
+    }
+  };
+  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: 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 == null ? void 0 : chatInputRef.value) {
+        chatInputRef.value.handlePaste(fileList, "drop");
+      }
+    }
+    if (chatInputRef == null ? void 0 : chatInputRef.value) {
+      chatInputRef.value.colseMarkLayer();
+    }
+  };
+  const onMounted = () => {
+    if (!isMounted.value) {
+      init();
+    }
+    isMounted.value = true;
+  };
+  const onBeforeUnmount = () => {
+    if (!isUnmounting.value) {
+      isUnmounting.value = true;
+      cleanupSSE();
+      isMounted.value = false;
+    }
+  };
+  return {
+    // 状态
+    chatList,
+    isChating,
+    inputValue,
+    enableDeepThinking,
+    isMounted,
+    isUnmounting,
+    currentComponentName,
+    fileData,
+    activeAgentsName,
+    moduleInfo,
+    isDragging,
+    typeFlag,
+    currIndex,
+    fetchStream,
+    resultItem,
+    currentMessageProcessor,
+    activeScript,
+    htmlContentRef,
+    thinkingContentRef,
+    reasoningContentRef,
+    // 方法
+    init,
+    sendMessage,
+    handleBeforeSend,
+    handleSend,
+    handleStop,
+    handleMessageAction,
+    saveEdit,
+    cancelEdit,
+    completeRendered,
+    handleAgentSelect,
+    update,
+    updateModule,
+    messageUtils,
+    simulateStreamOutput,
+    handleDragEnter,
+    handleDragLeave,
+    handleDrop,
+    onMounted,
+    onBeforeUnmount,
+    cleanupSSE,
+    scrollToBottom,
+    handleScroll,
+    renderContent,
+    enqueueRender
+  };
+}
+
+export { useChat };
+//# sourceMappingURL=useChat.mjs.map