chat处理

package.json

@@ -19,6 +19,7 @@
     "@ckeditor/ckeditor5-vue": "^5.1.0",
     "@element-plus/icons-vue": "2.0.10",
     "@layui/layer-vue": "^2.3.1",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@vueup/vue-quill": "1.1.0",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",

src/layout/components/AIPage/AIPage.vue

@@ -30,7 +30,7 @@
               <span v-else>{{ userInfo.name }}</span>
             </div>
             <div class="chat" :class="{ botChat: item.role == 'assistant' }">
-              <span>{{ item.content }}</span>
+              <span v-html="item.content"></span>
             </div>
           </template>
         </div>
@@ -58,6 +58,7 @@ import { chat } from "@/api/chatglm/chatglm.js";
 import useUserStore from "@/store/modules/user";
 import send from "@/assets/images/send.png";
 import { getToken } from "@/utils/auth";
+import { fetchEventSource } from "@microsoft/fetch-event-source";
 const wangzhi = import.meta.env.VITE_APP_BASE_API;
 const iptText = ref("");
 const chatBoxHeight = ref();
@@ -65,6 +66,7 @@ const userInfo = ref({});
 const resultData = ref("");
 const disabled = ref(false);
 const chatBox = ref(null);
+const lastChat = ref(null);
 const msg = ref([
   {
     role: "system",
@@ -89,47 +91,56 @@ const enterChat = () => {
   // 设置传输的上下文
   let query;
   if (msg.value.length <= 12) {
-    query = msg.value;
+    query = JSON.parse(JSON.stringify(msg.value));
   } else {
     const longArr = msg.value.slice(msg.value.length - 11, msg.value.length);
-    query = [msg.value[0], ...longArr];
+    query = JSON.parse(JSON.stringify([msg.value[0], ...longArr]));
   }
-  fetch(`${wangzhi}/chat-glm3`, {
+  const newAssistant = {
+    role: "assistant",
+    content: "",
+  }; // 添加智聚AI回复
+  msg.value.push(newAssistant); // 添加智聚AI回复
+  console.log("llllllllllllllllllllllll");
+  fetchEventSource(`${wangzhi}/chat-glm3`, {
     method: "post",
     body: JSON.stringify(query),
     headers: {
       "Content-Type": "application/json",
       Authorization: "Bearer " + getToken(),
     },
-  })
-    .then((response) => {
-      const newAssistant = {
-        role: "assistant",
-        content: "",
-      }; // 添加智聚AI回复
-      msg.value.push(newAssistant); // 添加智聚AI回复
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      function processText({ done, value }) {
-        if (done) {
-          disabled.value = false;
-          //   console.log("Stream finished");
-          return;
-        }
-        const message = decoder.decode(value);
-        // console.log("原：", message);
-        let newMsg = message
-          .replace(/data:/gi, "")
-          .replace("\n", "")
-        // console.log("改：", newMsg);
-        let v = resultData.value.replace("\n", "") + newMsg.replace("\n", "");
-        resultData.value = v;
-        msg.value[msg.value.length - 1].content = resultData.value;
-        return reader.read().then(processText);
+    openWhenHidden: true,
+    onmessage(response) {
+      console.log("response", response);
+      // const reader = response.body.getReader();
+      // const decoder = new TextDecoder();
+      // function processText({ done, value }) {
+      //   if (done) {
+      //     disabled.value = false;
+      //     //   console.log("Stream finished");
+      //     return;
+      //   }
+      const message = response.data;
+      //   console.log("原：", message);
+      // let newMsg = message
+      //   .replace(/data:/gi, "")
+      //   .replace(/&/gi, "&amp;")
+      //   .replace(/\n/gi, "")
+      //   .replace(/</gi, "&lt;")
+      //   .replace(/>/gi, "&gt;");
+      if (message === "") {
+        message = "<br>";
       }
-      return reader.read().then(processText);
-    })
-    .catch(console.error);
+      //   // console.log("改：", newMsg);
+      let v = resultData.value + message;
+      resultData.value = v;
+      msg.value[msg.value.length - 1].content = resultData.value;
+      //   // console.log("msg.value", resultData.value);
+      //   // return reader.read().then(processText);
+      // }
+      // return reader.read().then(processText);
+    },
+  });
 };
 // 获取用户信息
 const getUserInfo = async () => {