@touchvue/chat 1.0.0-beta.1

package/es/packages/components/touchchat/src/AiRobot/ChatPanel.vue2.mjs

@@ -0,0 +1,632 @@
+import { defineComponent, inject, ref, provide, onMounted, watch, getCurrentInstance, withDirectives, openBlock, createElementBlock, normalizeClass, unref, createCommentVNode, createElementVNode, createBlock, renderSlot, createVNode, withCtx, vShow } from 'vue';
+import { showToast } from '../../utils/tools.mjs';
+import Header from './Header.vue.mjs';
+import Content from './Content.vue.mjs';
+import Scene from './Scene.vue.mjs';
+import Input from './Input.vue.mjs';
+import start from './component/start.vue.mjs';
+import face from './component/face.vue.mjs';
+import meterialPrepare from './component/meterialPrepare.vue.mjs';
+import HelloChat from './component/HelloChat.vue.mjs';
+
+const STORAGE_KEY = "aiRobotChatHistory";
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChatPanel",
+  props: {
+    isChatPanelOpen: {
+      type: Boolean,
+      required: true
+    },
+    scripts: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["toggleChatPanel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const robotUnmatched = inject("robotUnmatched", "");
+    const helloChatList = inject("helloChatList", []);
+    const helloChatInfo = inject("helloChatInfo", {
+      info1: [],
+      info2: [],
+      info3: []
+    });
+    const isNotHeader = inject("isNotHeader", false);
+    const componentMap = {
+      start,
+      face,
+      meterialPrepare
+    };
+    const inputMessage = ref("");
+    const messages = ref([]);
+    const btnDisable = ref(false);
+    const selectedScriptName = ref("");
+    const currentScriptIndex = ref(0);
+    const chatHistory = ref([]);
+    const activeChat = ref("");
+    const isSwitchingHistory = ref(false);
+    const sendMessageType = ref("");
+    provide("isSwitchingHistory", isSwitchingHistory);
+    const handleSelectChat = (chatId) => {
+      activeChat.value = chatId;
+      isSwitchingHistory.value = false;
+      const selectedChat = chatHistory.value.find((chat) => chat.id === chatId);
+      if (selectedChat) {
+        isSwitchingHistory.value = true;
+        messages.value = [...selectedChat.messages];
+        setTimeout(() => {
+          isSwitchingHistory.value = false;
+        }, 1e3);
+      } else {
+        console.error(`\u672A\u627E\u5230ID\u4E3A${chatId}\u7684\u804A\u5929\u8BB0\u5F55`);
+      }
+    };
+    const loadFromLocalStorage = () => {
+      const savedHistory = localStorage.getItem(STORAGE_KEY);
+      if (savedHistory) {
+        try {
+          const parsedHistory = JSON.parse(savedHistory, (key, value) => {
+            if (key === "time" && typeof value === "string") {
+              return new Date(value);
+            }
+            return value;
+          });
+          chatHistory.value = parsedHistory;
+          if (chatHistory.value.length > 0) {
+            activeChat.value = chatHistory.value[0].id;
+            messages.value = chatHistory.value[0].messages;
+          }
+        } catch (error) {
+          console.error("Failed to load chat history:", error);
+          createNewChat();
+        }
+      } else {
+        createNewChat();
+      }
+    };
+    const saveToLocalStorage = () => {
+      try {
+        const historyToSave = JSON.stringify(chatHistory.value, (key, value) => {
+          if (key === "time") {
+            if (value instanceof Date && !isNaN(value.getTime())) {
+              return value.toISOString();
+            }
+            return (/* @__PURE__ */ new Date()).toISOString();
+          }
+          return value;
+        });
+        localStorage.setItem(STORAGE_KEY, historyToSave);
+      } catch (error) {
+        console.error("Failed to save chat history:", error);
+      }
+    };
+    const createNewChat = (title = "\u65B0\u5BF9\u8BDD") => {
+      selectedScriptName.value = "";
+      const newChat = {
+        id: Date.now().toString(),
+        title,
+        time: /* @__PURE__ */ new Date(),
+        messages: []
+      };
+      chatHistory.value.unshift(newChat);
+      activeChat.value = newChat.id;
+      messages.value = newChat.messages;
+      saveToLocalStorage();
+    };
+    const updateCurrentChat = () => {
+      const currentChat = chatHistory.value.find((item) => item.id === activeChat.value);
+      if (currentChat) {
+        currentChat.messages = [...messages.value];
+        if (currentChat.messages.length > 1 && currentChat.title === "\u65B0\u5BF9\u8BDD") {
+          const userMessage = currentChat.messages.find((msg) => msg.type === "user");
+          if (userMessage && userMessage.content) {
+            currentChat.title = userMessage.content.substring(0, 20) + (userMessage.content.length > 20 ? "..." : "");
+          }
+        }
+        saveToLocalStorage();
+      }
+    };
+    const complete = () => {
+      btnDisable.value = false;
+      updateCurrentChat();
+    };
+    const handleDeleteChat = (id) => {
+      const index = chatHistory.value.findIndex((chat) => chat.id === id);
+      if (index !== -1) {
+        chatHistory.value.splice(index, 1);
+        if (id === activeChat.value) {
+          if (chatHistory.value.length > 0) {
+            activeChat.value = chatHistory.value[0].id;
+            messages.value = [...chatHistory.value[0].messages];
+          } else {
+            createNewChat();
+          }
+        }
+        saveToLocalStorage();
+      }
+    };
+    const handleRenameChat = (data) => {
+      const { id, newTitle } = data;
+      const chat = chatHistory.value.find((item) => item.id === id);
+      if (chat) {
+        chat.title = newTitle;
+        chat.time = /* @__PURE__ */ new Date();
+        saveToLocalStorage();
+      }
+    };
+    const handleSaveEdit = (index, content) => {
+      const message = messages.value[index];
+      if (message && message.type === "user") {
+        message.content = content;
+        message.isEditing = false;
+        delete message.editContent;
+        messages.value.splice(index, 1, { ...message });
+        updateCurrentChat();
+        showToast("\u7F16\u8F91\u6210\u529F");
+        let aiMessagesCount = 0;
+        for (let i = index + 1; i < messages.value.length; i++) {
+          if (messages.value[i].type === "ai") {
+            aiMessagesCount++;
+          } else {
+            break;
+          }
+        }
+        if (aiMessagesCount > 0) {
+          messages.value.splice(index + 1, aiMessagesCount);
+        }
+        setTimeout(() => {
+          const result = findMatchingScriptContent(content, sendMessageType.value);
+          if (result && result.responses.length > 0) {
+            currentScriptIndex.value = result.nextIndex;
+            const newAiMessages = [];
+            result.responses.forEach((response, idx) => {
+              const pauseMarker = Array.isArray(response.data) ? "\u200B".repeat(20) : "";
+              const responseContent = Array.isArray(response.data) ? response.data.join(pauseMarker) : response.data;
+              const newAiMsgId = `ai-${Date.now()}-${idx}`;
+              newAiMessages.push({
+                id: newAiMsgId,
+                type: "ai",
+                user: "ai",
+                // 添加 user 属性
+                component: response.type || void 0,
+                content: responseContent || ""
+              });
+            });
+            messages.value.splice(index + 1, 0, ...newAiMessages);
+          } else {
+            const newAiMsgId = `ai-${Date.now()}`;
+            messages.value.splice(index + 1, 0, {
+              id: newAiMsgId,
+              type: "ai",
+              user: "ai",
+              // 添加 user 属性
+              content: robotUnmatched
+            });
+          }
+          updateCurrentChat();
+        }, 500);
+      }
+    };
+    const handleCancelEdit = (index) => {
+      const message = messages.value[index];
+      if (message && message.type === "user") {
+        message.content = message.editContent || "";
+        message.isEditing = false;
+        delete message.editContent;
+        messages.value.splice(index, 1, { ...message });
+        showToast("\u7F16\u8F91\u5DF2\u53D6\u6D88");
+      }
+    };
+    onMounted(() => {
+      if (!isNotHeader) {
+        loadFromLocalStorage();
+      }
+      if (isNotHeader && props.scripts && props.scripts.length > 0) {
+        const firstScript = props.scripts[0];
+        if (firstScript && firstScript.content && firstScript.content.length > 0) {
+          const firstMessage = firstScript.content[0];
+          if (firstMessage.user === "ai") {
+            selectedScriptName.value = firstScript.name;
+            const aiMsgId = `ai-${Date.now()}`;
+            messages.value.push({
+              id: aiMsgId,
+              type: "ai",
+              user: "ai",
+              // 添加 user 属性
+              component: firstMessage.type || void 0,
+              content: firstMessage.data || ""
+            });
+            updateCurrentChat();
+          } else {
+            sceneClick(firstScript);
+          }
+        }
+      }
+    });
+    const handleItemClick = (script, type) => {
+      if (type) {
+        sendMessageType.value = type;
+      }
+      sceneClick(script);
+    };
+    const sceneClick = (script) => {
+      selectedScriptName.value = script.name;
+      const findAndSendFirstUserMessage = (dataSource) => {
+        var _a;
+        const targetScript = dataSource.find((item) => item.name === script.name);
+        if (targetScript && targetScript.content.length) {
+          const firstUserMessage = (_a = targetScript.content.find((citem) => citem.user === "i")) == null ? void 0 : _a.data;
+          if (firstUserMessage) {
+            sendMessage(firstUserMessage);
+          }
+        }
+      };
+      if (!sendMessageType.value && props.scripts.length) {
+        findAndSendFirstUserMessage(props.scripts);
+      } else if (sendMessageType.value === "0" && helloChatList.length) {
+        findAndSendFirstUserMessage(helloChatList);
+      } else if (sendMessageType.value === "1" && helloChatInfo.info1.length) {
+        findAndSendFirstUserMessage(helloChatInfo.info1);
+      } else if (sendMessageType.value === "2" && helloChatInfo.info2.length) {
+        findAndSendFirstUserMessage(helloChatInfo.info2);
+      } else if (sendMessageType.value === "3" && helloChatInfo.info3.length) {
+        findAndSendFirstUserMessage(helloChatInfo.info3);
+      }
+    };
+    const toggleChatPanel = () => {
+      emit("toggleChatPanel");
+    };
+    const findMatchingScriptContent = (userInput, type) => {
+      let array = props.scripts;
+      switch (type) {
+        case "0":
+          array = helloChatList;
+          break;
+        case "1":
+          array = helloChatInfo.info1;
+          break;
+        case "2":
+          array = helloChatInfo.info2;
+          break;
+        case "3":
+          array = helloChatInfo.info3;
+          break;
+      }
+      const currentScript = array.find((s) => s.name === selectedScriptName.value);
+      if (!currentScript)
+        return null;
+      if (currentScriptIndex.value === 0 && currentScript.content.length > 0 && currentScript.content[0].user === "ai") {
+        let firstUserInputIndex = -1;
+        for (let i = 0; i < currentScript.content.length; i++) {
+          if (currentScript.content[i].user === "i") {
+            firstUserInputIndex = i;
+            break;
+          }
+        }
+        if (firstUserInputIndex !== -1) {
+          currentScriptIndex.value = firstUserInputIndex;
+        } else {
+          return null;
+        }
+      }
+      const firstItem = currentScript.content[0];
+      if (firstItem.user === "i") {
+        const isDataMatch2 = firstItem.data && userInput.includes(firstItem.data);
+        let isSubDataMatch2 = false;
+        if (firstItem.subData) {
+          if (Array.isArray(firstItem.subData)) {
+            isSubDataMatch2 = firstItem.subData.some((item) => userInput.includes(item));
+          }
+        }
+        if (isDataMatch2 || isSubDataMatch2) {
+          currentScriptIndex.value = 0;
+          const responses = [];
+          let nextIndex = currentScript.content.length;
+          for (let i = 1; i < currentScript.content.length; i++) {
+            const item = currentScript.content[i];
+            if (item.user === "i") {
+              nextIndex = i;
+              break;
+            }
+            if (item.user === "ai") {
+              responses.push(item);
+            }
+          }
+          return { responses, nextIndex };
+        }
+      }
+      const currentItem = currentScript.content[currentScriptIndex.value];
+      if (!currentItem || currentItem.user !== "i") {
+        return null;
+      }
+      const isDataMatch = currentItem.data && userInput.includes(currentItem.data);
+      let isSubDataMatch = false;
+      if (currentItem.subData) {
+        if (Array.isArray(currentItem.subData)) {
+          isSubDataMatch = currentItem.subData.some((item) => userInput.includes(item));
+        }
+      }
+      if (isDataMatch || isSubDataMatch) {
+        const responses = [];
+        let nextIndex = currentScript.content.length;
+        for (let i = currentScriptIndex.value + 1; i < currentScript.content.length; i++) {
+          const item = currentScript.content[i];
+          if (item.user === "ai") {
+            responses.push(item);
+          } else if (item.user === "i") {
+            nextIndex = i;
+            break;
+          }
+        }
+        currentScriptIndex.value = nextIndex;
+        return { responses, nextIndex };
+      }
+      return null;
+    };
+    const sendMessage = (message) => {
+      if (btnDisable.value)
+        return;
+      if (message !== void 0 && typeof message !== "string") {
+        console.error("message must be a string");
+        return;
+      }
+      btnDisable.value = true;
+      const contentToSend = message !== void 0 ? message : inputMessage.value;
+      if (!contentToSend.trim())
+        return;
+      const userMsgId = `user-${Date.now()}`;
+      messages.value.push({
+        id: userMsgId,
+        type: "user",
+        user: "user",
+        // 添加 user 属性
+        content: contentToSend.trim()
+      });
+      if (message === void 0) {
+        inputMessage.value = "";
+      }
+      setTimeout(() => {
+        const result = findMatchingScriptContent(contentToSend, sendMessageType.value);
+        if (result && result.responses.length > 0) {
+          currentScriptIndex.value = result.nextIndex;
+          result.responses.forEach((response, index) => {
+            const pauseMarker = Array.isArray(response.data) ? "\u200B".repeat(20) : "";
+            const content = Array.isArray(response.data) ? response.data.join(pauseMarker) : response.data;
+            setTimeout(() => {
+              const aiMsgId = `ai-${Date.now()}-${index}`;
+              messages.value.push({
+                id: aiMsgId,
+                type: "ai",
+                user: "ai",
+                // 添加 user 属性
+                component: response.type || void 0,
+                content: content || ""
+              });
+            }, index * 800);
+          });
+        } else {
+          const aiMsgId = `ai-${Date.now()}`;
+          messages.value.push({
+            id: aiMsgId,
+            type: "ai",
+            user: "ai",
+            // 添加 user 属性
+            content: robotUnmatched
+          });
+        }
+        updateCurrentChat();
+      }, 500);
+    };
+    const handleNewChat = () => {
+      const emptyChat = chatHistory.value.find((chat) => chat.messages.length === 0);
+      if (emptyChat) {
+        handleSelectChat(emptyChat.id);
+        return;
+      }
+      createNewChat();
+      currentScriptIndex.value = 0;
+    };
+    watch(
+      () => chatHistory.value,
+      () => saveToLocalStorage(),
+      { deep: true }
+    );
+    const instance = getCurrentInstance();
+    const handleMessageAction = (action, index) => {
+      console.log(action, index, messages.value, "=== 560 ===");
+      const message = messages.value[index];
+      if (!message)
+        return;
+      switch (action) {
+        case "copy":
+          navigator.clipboard.writeText(message.content || "").then(() => {
+            showToast("\u590D\u5236\u6210\u529F");
+          });
+          break;
+        case "edit":
+          if (message) {
+            message.isEditing = true;
+            message.editContent = message.content;
+            messages.value.splice(index, 1, { ...message });
+          }
+          break;
+        case "delete":
+          messageUtils.deleteMessageChain(index);
+          updateCurrentChat();
+          break;
+        case "retry": {
+          const userMessageIndex = index - 1;
+          const userMessage = messages.value[userMessageIndex];
+          if (userMessage && userMessage.type === "user") {
+            messages.value.splice(index, 1);
+            updateCurrentChat();
+            setTimeout(() => {
+              const result = findMatchingScriptContent(
+                (userMessage == null ? void 0 : userMessage.content) || "",
+                sendMessageType.value
+              );
+              if (result && result.responses.length > 0) {
+                currentScriptIndex.value = result.nextIndex;
+                const newAiMessages = [];
+                result.responses.forEach((response, idx) => {
+                  const pauseMarker = Array.isArray(response.data) ? "\u200B".repeat(20) : "";
+                  const content = Array.isArray(response.data) ? response.data.join(pauseMarker) : response.data;
+                  const newAiMsgId = `ai-${Date.now()}-${idx}`;
+                  newAiMessages.push({
+                    id: newAiMsgId,
+                    type: "ai",
+                    user: "ai",
+                    component: response.type || void 0,
+                    content: content || ""
+                  });
+                });
+                messages.value.splice(userMessageIndex + 1, 0, ...newAiMessages);
+              } else {
+                const newAiMsgId = `ai-${Date.now()}`;
+                messages.value.splice(userMessageIndex + 1, 0, {
+                  id: newAiMsgId,
+                  type: "ai",
+                  user: "ai",
+                  content: robotUnmatched
+                });
+              }
+              updateCurrentChat();
+            }, 500);
+          }
+          break;
+        }
+        case "like":
+          messageUtils.updateMessage(index, {
+            isLiked: true,
+            isDisliked: false
+          });
+          updateCurrentChat();
+          break;
+        case "dislike":
+          messageUtils.updateMessage(index, {
+            isLiked: false,
+            isDisliked: true
+          });
+          updateCurrentChat();
+          break;
+      }
+    };
+    const messageUtils = {
+      // 更新消息内容
+      updateMessage: (index, updates) => {
+        if (index < 0 || index >= messages.value.length)
+          return;
+        messages.value.splice(index, 1, { ...messages.value[index], ...updates });
+      },
+      // 删除消息及其后续所有连续的AI回复，直到遇到下一个用户消息
+      deleteMessageChain: (index) => {
+        if (index < 0 || index >= messages.value.length)
+          return;
+        let startIndex = index;
+        let deleteCount = 1;
+        for (let i = index + 1; i < messages.value.length; i++) {
+          if (messages.value[i].type === "ai") {
+            deleteCount++;
+          } else {
+            break;
+          }
+        }
+        messages.value.splice(startIndex, deleteCount);
+      }
+    };
+    provide("parentContext", {
+      instance,
+      methods: {
+        sendMessage,
+        handleMessageAction
+      },
+      components: componentMap,
+      state: {
+        messages,
+        inputMessage
+      }
+    });
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(!unref(isNotHeader) ? "ai-robot-container" : "ai-robot-container-not-header")
+        },
+        [
+          createCommentVNode(" \u804A\u5929\u6D88\u606F\u533A\u57DF "),
+          createElementVNode("div", { class: "chat-container" }, [
+            createCommentVNode(' @history="handleHistory" '),
+            !unref(isNotHeader) ? (openBlock(), createBlock(Header, {
+              key: 0,
+              "chat-history": chatHistory.value,
+              "active-chat": activeChat.value,
+              onSelectChat: handleSelectChat,
+              onClose: toggleChatPanel,
+              onNewChat: handleNewChat,
+              onDeleteChat: handleDeleteChat,
+              onRenameChat: handleRenameChat
+            }, null, 8, ["chat-history", "active-chat"])) : createCommentVNode("v-if", true),
+            !messages.value.length ? (openBlock(), createElementBlock("div", { key: 1 }, [
+              renderSlot(_ctx.$slots, "welcome", {}, () => [
+                createVNode(HelloChat, { onHandleItemClick: handleItemClick })
+              ], true)
+            ])) : createCommentVNode("v-if", true),
+            createVNode(Content, {
+              messages: messages.value,
+              onComplete: complete,
+              onCopy: handleMessageAction,
+              onRetry: handleMessageAction,
+              onLike: handleMessageAction,
+              onDislike: handleMessageAction,
+              onEdit: handleMessageAction,
+              onDelete: handleMessageAction,
+              onSaveEdit: handleSaveEdit,
+              onCancelEdit: handleCancelEdit
+            }, {
+              aiAvatar: withCtx(() => [
+                renderSlot(_ctx.$slots, "aiAvatar", {}, void 0, true)
+              ]),
+              userAvatar: withCtx(() => [
+                renderSlot(_ctx.$slots, "userAvatar", {}, void 0, true)
+              ]),
+              _: 3
+              /* FORWARDED */
+            }, 8, ["messages"]),
+            createElementVNode("div", { class: "bottom-area" }, [
+              createCommentVNode(" \u573A\u666F\u6309\u94AE "),
+              !unref(isNotHeader) ? (openBlock(), createBlock(Scene, {
+                key: 0,
+                scripts: __props.scripts,
+                "btn-disable": btnDisable.value,
+                "selected-script-name": selectedScriptName.value,
+                onSceneClick: sceneClick
+              }, null, 8, ["scripts", "btn-disable", "selected-script-name"])) : createCommentVNode("v-if", true),
+              createCommentVNode(" \u8F93\u5165\u533A\u57DF "),
+              createVNode(Input, {
+                "input-message": inputMessage.value,
+                "onUpdate:inputMessage": ($event) => inputMessage.value = $event,
+                "btn-disable": btnDisable.value,
+                onSendMessage: sendMessage
+              }, {
+                input: withCtx(({ disabled }) => [
+                  renderSlot(_ctx.$slots, "input", { disabled }, void 0, true)
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["input-message", "onUpdate:inputMessage", "btn-disable"])
+            ])
+          ])
+        ],
+        2
+        /* CLASS */
+      )), [
+        [vShow, !__props.isChatPanelOpen]
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=ChatPanel.vue2.mjs.map