chat接口使用sse

package-lock.json

@@ -15,6 +15,7 @@
 				"@codemirror/theme-one-dark": "^6.1.3",
 				"@codemirror/view": "^6.38.1",
 				"@element-plus/icons-vue": "*",
+				"@microsoft/fetch-event-source": "^2.0.1",
 				"@wangeditor/editor": "^5.1.23",
 				"@wangeditor/editor-for-vue": "^5.1.12",
 				"axios": "^1.6.3",
@@ -802,6 +803,11 @@
 				"langium": "3.3.1"
 			}
 		},
+		"node_modules/@microsoft/fetch-event-source": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz",
+			"integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA=="
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

package.json

@@ -15,6 +15,7 @@
 		"@codemirror/theme-one-dark": "^6.1.3",
 		"@codemirror/view": "^6.38.1",
 		"@element-plus/icons-vue": "*",
+		"@microsoft/fetch-event-source": "^2.0.1",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
 		"axios": "^1.6.3",

src/utils/request2.ts

@@ -53,6 +53,7 @@ request.interceptors.response.use(
           requests.forEach(cb => cb(token));
           requests = [];
           isRefreshing = false;
+          localStorage.setItem("refresh_time", Date.now().toString());
           
           // 重试当前请求
           const config = result.config;

src/views/system/gen-chat.vue

@@ -21,11 +21,7 @@
         </template>
         <el-scrollbar style="height: 400px; scrollbar-width: none">
           <ul>
-            <li
+            <li v-for="(session, index) in historySessions" :key="index" @click="loadSession(session.ID)">
-              v-for="(session, index) in historySessions"
-              :key="index"
-              @click="loadSession(session.ID)"
-            >
               <el-tooltip :content="session.Name" placement="top">
                 <span>{{ getShortenedName(session.Name) }}</span>
               </el-tooltip>
@@ -48,17 +44,8 @@
     <!-- 原有的聊天区域 -->
     <div class="chat-container">
       <!-- 消息列表 -->
-      <el-card
+      <el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
-        class="chat-messages"
+        <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]">
-        shadow="never"
-        ref="messagesContainer"
-        v-if="messages.length > 0"
-      >
-        <div
-          v-for="(message, index) in messages"
-          :key="index"
-          :class="['message', message.role]"
-        >
           <div class="message-avatar">
             <span v-if="message.role === 'assistant'">💬</span>
             <span v-else>🧑‍🎓</span>
@@ -68,11 +55,7 @@
             <!-- 添加复制 -->
             <div>
               <el-tooltip content="复制" placement="top">
-              <el-button
+                <el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
-                type="text"
-                :icon="DocumentCopy"
-                @click="copyMessage(message.content)"
-              ></el-button>
               </el-tooltip>
               <!-- <el-button
                 type="text"
@@ -80,11 +63,7 @@
                 @click="MessageTextToDoc(message.content)"
                 ></el-button> -->
               <el-tooltip content="预览、文本创建文件" placement="top">
-                    <el-button
+                <el-button type="text" :icon="Document" @click="MessageTextToDoc(message.content)">
-                      type="text"
-                      :icon="Document"
-                      @click="MessageTextToDoc(message.content)"
-                    >
                 </el-button>
               </el-tooltip>
             </div>
@@ -97,43 +76,30 @@
       <el-card class="chat-input" shadow="never">
         <el-row :gutter="10">
           <el-col :span="20">
-            <el-input
+            <el-input v-model="inputMessage" type="textarea" style="border: 0" :rows="5" placeholder="输入消息..."
-              v-model="inputMessage"
+              @keyup.enter="sendMessage" />
-              type="textarea"
-              style="border: 0"
-              :rows="5"
-              placeholder="输入消息..."
-              @keyup.enter="sendMessage"
-            />
             <!-- <el-text
               v-model="inputMessage"
               aria-placeholder="输入信息...."
             ></el-text> -->
           </el-col>
           <el-col :span="4" style="text-align: center">
-            <el-button
+            <el-button @click="sendMessage" type="success" :icon="Check" round :disabled="loading">发送</el-button>
-              @click="sendMessage"
-              type="success"
-              :icon="Check"
-              round
-              :disabled="loading"
-              >发送</el-button
-            >
             <el-dropdown trigger="click" class="model-dropdown">
               <span class="el-dropdown-link">
                 <span>模型参数</span>
-                <el-icon><ArrowDown /></el-icon>
+                <el-icon>
+                  <ArrowDown />
+                </el-icon>
               </span>
               <template #dropdown>
                 <div class="dropdown-content">
                   <div class="model-params">
                     <h4>模型参数
-                    <el-tooltip 
+                      <el-tooltip effect="dark" placement="right" content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改">
-                        effect="dark" 
+                        <el-icon class="tip-icon">
-                        placement="right"
+                          <QuestionFilled />
-                        content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改"
+                        </el-icon>
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
                       </el-tooltip>
                     </h4>
 
@@ -141,21 +107,13 @@
                     <div class="param-item">
                       <div class="param-label">
                         <span>温度 (Temperature)</span>
-                      <el-tooltip 
+                        <el-tooltip effect="dark" placement="right" content="采样温度，控制生成随机性（0: 保守，2: 随机）">
-                        effect="dark" 
+                          <el-icon class="tip-icon">
-                        placement="right"
+                            <QuestionFilled />
-                        content="采样温度，控制生成随机性（0: 保守，2: 随机）"
+                          </el-icon>
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
                         </el-tooltip>
                       </div>
-                    <el-slider 
+                      <el-slider v-model="temperature" :min="0" :max="2" :step="0.1" :show-tooltip="false" />
-                      v-model="temperature" 
-                      :min="0" 
-                      :max="2" 
-                      :step="0.1"
-                      :show-tooltip="false"
-                    />
                       <div class="param-value">{{ temperature }}</div>
                     </div>
 
@@ -163,21 +121,13 @@
                     <div class="param-item">
                       <div class="param-label">
                         <span>Top P</span>
-                      <el-tooltip 
+                        <el-tooltip effect="dark" placement="right" content="限制候选词范围（0: 严格，1: 宽松）">
-                        effect="dark" 
+                          <el-icon class="tip-icon">
-                        placement="right"
+                            <QuestionFilled />
-                        content="限制候选词范围（0: 严格，1: 宽松）"
+                          </el-icon>
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
                         </el-tooltip>
                       </div>
-                    <el-slider 
+                      <el-slider v-model="topP" :min="0" :max="1" :step="0.1" :show-tooltip="false" />
-                      v-model="topP" 
-                      :min="0" 
-                      :max="1" 
-                      :step="0.1"
-                      :show-tooltip="false"
-                    />
                       <div class="param-value">{{ topP }}</div>
                     </div>
                   </div>
@@ -191,19 +141,15 @@
           </el-col>
           <el-col :span="3" style="text-align: center">
             <el-select v-model="selectModel" placeholder="选择模型" style="width: 320px;">
-              <el-option
+              <el-option v-for="item in ModelList" :key="item.ID" :label="item.Type + ':' + item.Description"
-                v-for="item in ModelList"
+                :value="item.ID"></el-option>
-                :key="item.ID"
-                :label="item.Type + ':' + item.Description"
-                :value="item.ID"
-              ></el-option>
             </el-select>
           </el-col>
           <el-col :span="10" style="text-align: center">
             <el-tooltip content="文件选择" placement="top">
-            <el-button @click="handleSelectFileVisible"
+              <el-button @click="handleSelectFileVisible"><el-icon>
-              ><el-icon><Files /></el-icon
+                  <Files />
-            ></el-button>
+                </el-icon></el-button>
             </el-tooltip>
           </el-col>
           <!-- <el-col :span="1" style="text-align: center">
@@ -214,13 +160,8 @@
           </el-col> -->
           <!-- 已选文件一行显示 -->
           <el-col :span="12" style="text-align: center">
-            <el-tag
+            <el-tag v-for="(file, index) in selectedFiles" :key="index" closable @close="removeFile(index)">{{
-              v-for="(file, index) in selectedFiles"
+              file.UserFileName }}</el-tag>
-              :key="index"
-              closable
-              @close="removeFile(index)"
-              >{{ file.UserFileName }}</el-tag
-            >
           </el-col>
         </el-row>
       </el-card>
@@ -228,35 +169,17 @@
 
     <div>
       <!-- 文件对话框 -->
-      <el-dialog
+      <el-dialog v-model="selectFileVisible" title="从上传文件中选择" width="50%">
-        v-model="selectFileVisible"
+        <el-input placeholder="搜索文件" v-model="searchFileQuery" prefix-icon="el-icon-search" />
-        title="从上传文件中选择"
-        width="50%"
-      >
-        <el-input
-          placeholder="搜索文件"
-          v-model="searchFileQuery"
-          prefix-icon="el-icon-search"
-        />
         <el-button @click="uploadMessageFile">上传文件</el-button>
         <!-- 文件列表 -->
         <div class="file-list">
           <el-checkbox-group v-model="selectedFiles">
-            <el-checkbox
+            <el-checkbox v-for="(item, index) in filteredFiles" :key="index" :label="item">
-              v-for="(item, index) in filteredFiles"
-              :key="index"
-              :label="item"
-            >
               <span class="file-icon">
                 <!-- 根据文件类型展示不同图标 -->
-                <i
+                <i v-if="item.UploadType === 'image'" class="el-icon-picture"></i>
-                  v-if="item.UploadType === 'image'"
+                <i v-else-if="item.UploadType === 'file'" class="el-icon-document"></i>
-                  class="el-icon-picture"
-                ></i>
-                <i
-                  v-else-if="item.UploadType === 'file'"
-                  class="el-icon-document"
-                ></i>
                 <!-- 可继续补充其他文件类型图标 -->
               </span>
               {{ item.UserFileName }}
@@ -266,34 +189,21 @@
         </div>
         <!-- 底部状态栏和按钮 -->
         <div class="footer-bar">
-          <span class="selected-count"
+          <span class="selected-count">已选 {{ selectedFiles.length }} 个文件</span>
-            >已选 {{ selectedFiles.length }} 个文件</span
-          >
           <el-button @click="selectFileVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSelectFileConfirm"
+          <el-button type="primary" @click="handleSelectFileConfirm">确认添加({{ selectedFiles.length }})</el-button>
-            >确认添加({{ selectedFiles.length }})</el-button
-          >
         </div>
       </el-dialog>
     </div>
     <!-- 上传文件对话框 -->
     <div>
-      <el-dialog
+      <el-dialog title="上传文件" v-model="uploadFileVisible" width="50%" :before-close="handleUploadFileClose">
-        title="上传文件"
-        v-model="uploadFileVisible"
-        width="50%"
-        :before-close="handleUploadFileClose"
-      >
         <UploadFile></UploadFile>
       </el-dialog>
     </div>
     <div>
       <!-- 文本创建文件对话 -->
-      <el-dialog
+      <el-dialog title="文本创建文件" v-model="textToDocFileVisible" width="70%" heigth="80vh"
-        title="文本创建文件"
-        v-model="textToDocFileVisible"
-        width="70%"
-        heigth="80vh"
         :before-close="handleMessageTextToDOCClose">
         <!-- <textarea v-model="textToDocFileContent"></textarea> -->
         <div ref="vditorRef"></div>
@@ -339,6 +249,7 @@ import { FindModelListByFunctionName } from "@/api/function";
 import markdownItHighlightjs from "markdown-it-highlightjs";
 import markdownItKatex from "markdown-it-katex";
 import mermaidPlugin from "@agoose77/markdown-it-mermaid";
+import { fetchEventSource } from '@microsoft/fetch-event-source';
 import "katex/dist/katex.min.css";
 import Vditor from 'vditor';
 import 'vditor/dist/index.css';
@@ -553,7 +464,7 @@ onMounted(() => {
   //   // 浏览器环境
   //   md.use(markdownItMermaid);
   // }
-  IMWSConnect();
+  //IMWSConnect();
 
 
 
@@ -603,6 +514,37 @@ const doReceiveMessage = (event) => {
   });
 }
 
+const doReceiveMessageSSE = (event) => {
+  // 处理接收到的消息
+  let msg: WSMessage = JSON.parse(event.data.replace("data: ", ""));
+  const existingMessage = messages.find(
+    (msg) => msg.role === "assistant" && !msg.finished
+  );
+  if (existingMessage) {
+    // 追加内容
+    existingMessage.content += msg.msg.msg.response;
+  } else {
+    // 新消息
+    messages.push({
+      role: "assistant",
+      content: msg.msg.msg.response,
+      finished: false,
+    });
+  }
+
+  sessionID.value = msg.session_id;
+  currentAIMessage.value += msg.msg.msg.response;
+  if (msg.msg.msg.done) {
+    const assistantMessage = messages[messages.length - 1];
+    assistantMessage.finished = true;
+    loading.value = false;
+    currentAIMessage.value = "";
+    doButtonD();
+  }
+  nextTick(() => {
+    scrollToBottom(); // 新增滚动调用
+  });
+}
 const updateUserUIconfigInfo = () => {
   //将配置保存到数据库
   let req: UserUISettings = JSON.parse(localStorage.getItem("userUIconfigInfo") || "{}");
@@ -623,21 +565,121 @@ const updateUserUIconfigInfo = () => {
   });
 }
 
+
+
 const sendMessage = async () => {
   //测试ws是否连接断开
-  if (socket.value == null) {
+  // if (socket.value == null) {
-    await IMWSConnect();
+  //   await IMWSConnect();
 
-  }
+  // }
   if (loading.value === true) {
     ElMessage.warning("正在等待AI回复，请稍后再试");
     return;
   }
   await nextTick();
-  sendMessageWithFile();
+  sendMessageWithFileUseSSE();
+  //sendMessageWithFile();
   return;
 };
 
+const sendMessageWithFileUseSSE = async () => {
+  checkTokenIsValidAndRefresh();
+  let url = "https://pm.ljsea.top/im/chat_completion";
+  let headers = { "token": localStorage.getItem("token") };
+  if (inputMessage.value.trim() === "") {
+    ElMessage.warning("消息不能为空");
+    return;
+  }
+  let end_msg = {
+    msg: inputMessage.value,
+    type: "null",
+    function: "gen-ai-chat",
+    session_id: sessionID.value,
+    model_id: selectModel.value,
+    temperature: temperature.value,
+    top_p: topP.value,
+  };
+  if (selectedFiles.value.length > 0) {
+    // 处理选中的文件
+    console.log("选中的文件:", selectedFiles.value);
+    let file_contents = []
+    let file_type = ""
+    for (let i = 0; i < selectedFiles.value.length; i++) {
+      let file: File = selectedFiles.value[i];
+      //图片文件：jpg、png、gif、bmp
+      if (file.UserFileName.endsWith(".jpg") || file.UserFileName.endsWith(".png") || file.UserFileName.endsWith(".gif") || file.UserFileName.endsWith(".bmp")) {
+        file_type = "image_file"
+      } else {
+        file_type = "text_file"
+      }
+      let file_msg: FileMessage = {
+        file_content: file,
+        file_type: file_type,
+      };
+      file_contents.push(file_msg);
+    }
+    let msg: GenerationMessage = {
+      text: inputMessage.value,
+      file_content: file_contents,
+    };
+    let msg_str = JSON.stringify(msg);
+    end_msg["msg"] = msg_str;
+    end_msg["is_file"] = true;
+  }
+  fetchEventSource(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json', // 请求体格式
+      ...headers,                         // 合并自定义请求头（如Authorization）
+    },
+    body: JSON.stringify(end_msg),           // 序列化请求体
+    openWhenHidden: true,                 // 允许页面隐藏时保持连接
+    onopen: () => {
+      console.log('SSE connection established');
+    },
+    onmessage: (event) => {
+      try {
+        doReceiveMessageSSE(event);
+      } catch (e) {
+        console.error('Failed to parse SSE data:', e);
+      }
+    },
+    onerror: (error) => {
+      ElMessage.error("发送失败!请刷新页面!");
+    },
+    onclose: () => {
+      console.log('SSE connection closed');
+    },
+  });
+
+  let pMsgContent = "";
+  if (end_msg["is_file"]) {
+    let file_msg: GenerationMessage = JSON.parse(end_msg["msg"]);
+    //解析成md格式
+    let file_content = file_msg.file_content
+    for (let i = 0; i < file_content.length; i++) {
+      if (file_content[i].file_type == "image_file") {
+        pMsgContent += `![${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
+      } else {
+        pMsgContent += `文件：[${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
+      }
+
+    }
+    pMsgContent = pMsgContent + "输入：" + file_msg.text;
+  } else {
+    pMsgContent = end_msg.msg;
+  }
+  messages.push({ role: "user", content: pMsgContent, finished: true });
+  inputMessage.value = "";
+  nextTick(() => {
+    scrollToBottom(); // 新增滚动调用
+  });
+  loading.value = true;
+  if (sessionID.value == 0) {
+    sessionName.value = end_msg.msg;
+  }
+};
 
 const sendMessageWithFile = async () => {
   if (inputMessage.value.trim() === "") {
@@ -919,6 +961,25 @@ const copyMessage = (content: string) => {
     });
 };
 
+const checkTokenIsValidAndRefresh = () => {
+  let last_refresh = localStorage.getItem("refresh_time"); //localStorage.setItem("refresh_time", Date.now().toString());
+  let now = Date.now();
+  let isValid = false;
+  if (last_refresh) {
+    let diff = now - parseInt(last_refresh);
+    //超过1小时，token过期
+    if (diff < 60 * 60 * 1000) {
+      isValid = true;
+    }
+  } else {
+    isValid = false;
+  }
+  if (isValid == false) {
+    GetModelListByFunctionName();
+  }
+
+};
+
 const GetModelListByFunctionName = async () => {
   let req = {
     function: "gen-ai-chat",
@@ -1031,7 +1092,8 @@ const HandleTextToDocFile = async () => {
 
 .chat-messages {
   flex: 1;
-  overflow-y: auto; /* 允许垂直滚动 */
+  overflow-y: auto;
+  /* 允许垂直滚动 */
   padding: 10px;
   margin-bottom: 20px;
   scrollbar-width: 10px;
@@ -1045,7 +1107,8 @@ const HandleTextToDocFile = async () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow-y: auto; /* 确保内部可以滚动 */
+  overflow-y: auto;
+  /* 确保内部可以滚动 */
   height: 100%;
 }
 
@@ -1104,6 +1167,7 @@ const HandleTextToDocFile = async () => {
   margin-bottom: 20px;
   height: 20%;
 }
+
 .session-card2 {
   margin-bottom: 20px;
   height: 70%;
@@ -1160,23 +1224,28 @@ const HandleTextToDocFile = async () => {
   border-radius: 4px;
   margin-bottom: 10px;
 }
+
 .file-icon {
   margin-right: 5px;
   color: #606266;
 }
+
 .file-time {
   float: right;
   color: #909399;
   font-size: 12px;
 }
+
 .footer-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .selected-count {
   margin-right: 10px;
 }
+
 .el-icon-document {
   color: #409eff;
 }
@@ -1193,6 +1262,7 @@ const HandleTextToDocFile = async () => {
 .model-params {
   margin-top: 10px;
 }
+
 .param-value {
   margin-top: 5px;
   text-align: right;

yarn.lock

@@ -503,6 +503,11 @@
   dependencies:
     langium "3.3.1"
 
+"@microsoft/fetch-event-source@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz"
+  integrity sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"