From 66c345e78832602147c0cda7dc08869dcfc594db Mon Sep 17 00:00:00 2001
From: lijun <lijun.ls@qq.com>
Date: Tue, 23 Sep 2025 20:35:33 +0800
Subject: [PATCH] =?UTF-8?q?chat=E6=8E=A5=E5=8F=A3=E4=BD=BF=E7=94=A8sse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json              |    6 +
 package.json                   |    1 +
 src/utils/request2.ts          |    1 +
 src/views/system/gen-chat.vue  |  608 +++++++++-------
 src/views/system/gen-chat2.vue | 1234 ++++++++++++++++++++++++++++++++
 yarn.lock                      |    5 +
 6 files changed, 1586 insertions(+), 269 deletions(-)
 create mode 100644 src/views/system/gen-chat2.vue

diff --git a/package-lock.json b/package-lock.json
index c81e641..859a880 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 0b4eca9..a55f1a9 100644
--- a/package.json
+++ b/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",
diff --git a/src/utils/request2.ts b/src/utils/request2.ts
index 47ddbbd..be0ba05 100644
--- a/src/utils/request2.ts
+++ b/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;
diff --git a/src/views/system/gen-chat.vue b/src/views/system/gen-chat.vue
index 5d8fc3e..99f4275 100644
--- a/src/views/system/gen-chat.vue
+++ b/src/views/system/gen-chat.vue
@@ -7,8 +7,8 @@
       </div>
       <el-card class="session-card">
         <template #header>
-            <h3>当前会话</h3>
-          </template>
+          <h3>当前会话</h3>
+        </template>
         <el-tooltip :content=sessionName placement="top">
           <ul>
             <li>{{ getShortenedName(sessionName) }}</li>
@@ -21,11 +21,7 @@
         </template>
         <el-scrollbar style="height: 400px; scrollbar-width: none">
           <ul>
-            <li
-              v-for="(session, index) in historySessions"
-              :key="index"
-              @click="loadSession(session.ID)"
-            >
+            <li 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,140 +44,94 @@
     <!-- 原有的聊天区域 -->
     <div class="chat-container">
       <!-- 消息列表 -->
-      <el-card
-        class="chat-messages"
-        shadow="never"
-        ref="messagesContainer"
-        v-if="messages.length > 0"
-      >
-        <div
-          v-for="(message, index) in messages"
-          :key="index"
-          :class="['message', message.role]"
-        >
+      <el-card class="chat-messages" 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>
           </div>
           <div class="message-content">
-            <div v-html="renderMarkdown(message,index)"></div>
+            <div v-html="renderMarkdown(message, index)"></div>
             <!-- 添加复制 -->
             <div>
-            <el-tooltip content="复制" placement="top">
-              <el-button
-                type="text"
-                :icon="DocumentCopy"
-                @click="copyMessage(message.content)"
-              ></el-button>
-              </el-tooltip> 
+              <el-tooltip content="复制" placement="top">
+                <el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
+              </el-tooltip>
               <!-- <el-button
                 type="text"
                 :icon="Document"
                 @click="MessageTextToDoc(message.content)"
                 ></el-button> -->
-                <el-tooltip content="预览、文本创建文件" placement="top">
-                    <el-button
-                      type="text"
-                      :icon="Document"
-                      @click="MessageTextToDoc(message.content)"
-                    >
-                    </el-button>
-                </el-tooltip>
+              <el-tooltip content="预览、文本创建文件" placement="top">
+                <el-button type="text" :icon="Document" @click="MessageTextToDoc(message.content)">
+                </el-button>
+              </el-tooltip>
             </div>
           </div>
         </div>
-        <div v-if="loading" class="loading-indicator">Loading...,已回答字符:{{currentAIMessage.length}}</div>
+        <div v-if="loading" class="loading-indicator">Loading...,已回答字符:{{ currentAIMessage.length }}</div>
       </el-card>
 
       <!-- 输入区域 -->
       <el-card class="chat-input" shadow="never">
         <el-row :gutter="10">
           <el-col :span="20">
-            <el-input
-              v-model="inputMessage"
-              type="textarea"
-              style="border: 0"
-              :rows="5"
-              placeholder="输入消息..."
-              @keyup.enter="sendMessage"
-            />
+            <el-input v-model="inputMessage" 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
-              @click="sendMessage"
-              type="success"
-              :icon="Check"
-              round
-              :disabled="loading"
-              >发送</el-button
-            >
+            <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 
-                        effect="dark" 
-                        placement="right"
-                        content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改"
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
+                    <h4>模型参数
+                      <el-tooltip effect="dark" placement="right" content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改">
+                        <el-icon class="tip-icon">
+                          <QuestionFilled />
+                        </el-icon>
                       </el-tooltip>
-                  </h4>
+                    </h4>
 
-                  <!-- 温度参数 -->
-                  <div class="param-item">
-                    <div class="param-label">
-                      <span>温度 (Temperature)</span>
-                      <el-tooltip 
-                        effect="dark" 
-                        placement="right"
-                        content="采样温度，控制生成随机性（0: 保守，2: 随机）"
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
-                      </el-tooltip>
+                    <!-- 温度参数 -->
+                    <div class="param-item">
+                      <div class="param-label">
+                        <span>温度 (Temperature)</span>
+                        <el-tooltip effect="dark" placement="right" content="采样温度，控制生成随机性（0: 保守，2: 随机）">
+                          <el-icon class="tip-icon">
+                            <QuestionFilled />
+                          </el-icon>
+                        </el-tooltip>
+                      </div>
+                      <el-slider v-model="temperature" :min="0" :max="2" :step="0.1" :show-tooltip="false" />
+                      <div class="param-value">{{ temperature }}</div>
                     </div>
-                    <el-slider 
-                      v-model="temperature" 
-                      :min="0" 
-                      :max="2" 
-                      :step="0.1"
-                      :show-tooltip="false"
-                    />
-                    <div class="param-value">{{ temperature }}</div>
-                  </div>
 
-                  <!-- Top P 参数 -->
-                  <div class="param-item">
-                    <div class="param-label">
-                      <span>Top P</span>
-                      <el-tooltip 
-                        effect="dark" 
-                        placement="right"
-                        content="限制候选词范围（0: 严格，1: 宽松）"
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
-                      </el-tooltip>
+                    <!-- Top P 参数 -->
+                    <div class="param-item">
+                      <div class="param-label">
+                        <span>Top P</span>
+                        <el-tooltip effect="dark" placement="right" content="限制候选词范围（0: 严格，1: 宽松）">
+                          <el-icon class="tip-icon">
+                            <QuestionFilled />
+                          </el-icon>
+                        </el-tooltip>
+                      </div>
+                      <el-slider v-model="topP" :min="0" :max="1" :step="0.1" :show-tooltip="false" />
+                      <div class="param-value">{{ topP }}</div>
                     </div>
-                    <el-slider 
-                      v-model="topP" 
-                      :min="0" 
-                      :max="1" 
-                      :step="0.1"
-                      :show-tooltip="false"
-                    />
-                    <div class="param-value">{{ topP }}</div>
                   </div>
                 </div>
-                </div>
               </template>
             </el-dropdown>
 
@@ -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
-                v-for="item in ModelList"
-                :key="item.ID"
-                :label="item.Type + ':' + item.Description"
-                :value="item.ID"
-              ></el-option>
+              <el-option v-for="item in ModelList" :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-icon><Files /></el-icon
-            ></el-button>
+              <el-button @click="handleSelectFileVisible"><el-icon>
+                  <Files />
+                </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
-              v-for="(file, index) in selectedFiles"
-              :key="index"
-              closable
-              @close="removeFile(index)"
-              >{{ file.UserFileName }}</el-tag
-            >
+            <el-tag v-for="(file, index) in selectedFiles" :key="index" closable @close="removeFile(index)">{{
+              file.UserFileName }}</el-tag>
           </el-col>
         </el-row>
       </el-card>
@@ -228,35 +169,17 @@
 
     <div>
       <!-- 文件对话框 -->
-      <el-dialog
-        v-model="selectFileVisible"
-        title="从上传文件中选择"
-        width="50%"
-      >
-        <el-input
-          placeholder="搜索文件"
-          v-model="searchFileQuery"
-          prefix-icon="el-icon-search"
-        />
+      <el-dialog v-model="selectFileVisible" 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
-              v-for="(item, index) in filteredFiles"
-              :key="index"
-              :label="item"
-            >
+            <el-checkbox v-for="(item, index) in filteredFiles" :key="index" :label="item">
               <span class="file-icon">
                 <!-- 根据文件类型展示不同图标 -->
-                <i
-                  v-if="item.UploadType === 'image'"
-                  class="el-icon-picture"
-                ></i>
-                <i
-                  v-else-if="item.UploadType === 'file'"
-                  class="el-icon-document"
-                ></i>
+                <i v-if="item.UploadType === 'image'" 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"
-            >已选 {{ selectedFiles.length }} 个文件</span
-          >
+          <span class="selected-count">已选 {{ selectedFiles.length }} 个文件</span>
           <el-button @click="selectFileVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSelectFileConfirm"
-            >确认添加({{ selectedFiles.length }})</el-button
-          >
+          <el-button type="primary" @click="handleSelectFileConfirm">确认添加({{ selectedFiles.length }})</el-button>
         </div>
       </el-dialog>
     </div>
     <!-- 上传文件对话框 -->
     <div>
-      <el-dialog
-        title="上传文件"
-        v-model="uploadFileVisible"
-        width="50%"
-        :before-close="handleUploadFileClose"
-      >
+      <el-dialog title="上传文件" v-model="uploadFileVisible" width="50%" :before-close="handleUploadFileClose">
         <UploadFile></UploadFile>
       </el-dialog>
     </div>
     <div>
       <!-- 文本创建文件对话 -->
-      <el-dialog
-        title="文本创建文件"
-        v-model="textToDocFileVisible"
-        width="70%"
-        heigth="80vh"
+      <el-dialog title="文本创建文件" v-model="textToDocFileVisible" width="70%" heigth="80vh"
         :before-close="handleMessageTextToDOCClose">
         <!-- <textarea v-model="textToDocFileContent"></textarea> -->
         <div ref="vditorRef"></div>
@@ -304,13 +214,13 @@
         <!-- <el-input v-model="textToDocFileName" placeholder="输入文件名..." width="30%">输入文件名</el-input> -->
         <el-col>
           <el-select v-model="selectFileDocType" placeholder="选择文本类型" style="width: 30%;">
-          <el-option label="docx" value="docx"></el-option>
-          <el-option label="txt" value="txt"></el-option>
-          <el-option label="md" value="md"></el-option>
-        </el-select>
+            <el-option label="docx" value="docx"></el-option>
+            <el-option label="txt" value="txt"></el-option>
+            <el-option label="md" value="md"></el-option>
+          </el-select>
         </el-col>
-      
-       <el-button type="primary" @click="HandleTextToDocFile">确认</el-button>
+
+        <el-button type="primary" @click="HandleTextToDocFile">确认</el-button>
         <el-button @click="textToDocFileVisible = false">取消</el-button>
       </el-dialog>
     </div>
@@ -318,19 +228,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, nextTick,watch } from "vue";
+import { ref, onMounted, onUnmounted, reactive, nextTick, watch } from "vue";
 import { ElCard, ElInput, ElButton, ElDialog } from "element-plus";
 import { WSMessage, GenMessage } from "@/types/im";
 import { GetMessageService } from "@/api/im";
 import { FindUserFileService } from "@/api/file";
 import { Model } from "@/types/model";
-import {UserUISettings} from '@/types/user';
+import { UserUISettings } from '@/types/user';
 import { File, fileUrl } from "@/types/file";
 import { Session } from "@/types/session";
 import { FindSessionService } from "@/api/session";
 import { SetMessageTextToDocService } from "@/api/tool";
 import { ElMessage } from "element-plus";
-import { Check, DocumentCopy,Document, PriceTag } from "@element-plus/icons-vue";
+import { Check, DocumentCopy, Document, PriceTag } from "@element-plus/icons-vue";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
 import UploadFile from "@/components/upload-file.vue";
@@ -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';
@@ -350,8 +261,8 @@ interface Message {
   finished?: boolean;
 }
 interface SendImageMessage {
-  img_name : string;
-  img_url : string;
+  img_name: string;
+  img_url: string;
 }
 interface ImageMessage {
   image_content: SendImageMessage[];
@@ -376,8 +287,8 @@ md.use(markdownItHighlightjs, {
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
   const token = tokens[idx];
   // 设置图片的宽度和高度属性
-  token.attrSet('width', '400'); 
-  token.attrSet('height', '300'); 
+  token.attrSet('width', '400');
+  token.attrSet('height', '300');
   return self.renderToken(tokens, idx, options, env, self);
 };
 md.use(markdownItKatex);
@@ -417,25 +328,25 @@ const userUIconfigInfo = ref<UserUISettings>({} as UserUISettings); // 用户UI
 
 //监听需要保存的配置
 watch(
-   [selectModel, temperature, topP,sessionID],
-   () => {  //保存配置
+  [selectModel, temperature, topP, sessionID],
+  () => {  //保存配置
     updateUserUIconfigInfo();
-   }
+  }
 )
 
 
-const historyMsgHtml= ref([]); // 用于存储历史消息的HTML内容
-const wssUrl = 
-    "wss://pm.ljsea.top/im/ai_chat_ws?" +
-    "token=" +
-    localStorage.getItem("token");
+const historyMsgHtml = ref([]); // 用于存储历史消息的HTML内容
+const wssUrl =
+  "wss://pm.ljsea.top/im/ai_chat_ws?" +
+  "token=" +
+  localStorage.getItem("token");
 
-const renderMarkdown = (message: Message, index:number) => {
-  if(message.finished == false){
+const renderMarkdown = (message: Message, index: number) => {
+  if (message.finished == false) {
     //console.log("not finished");
     return message.content;
   }
-  if(historyMsgHtml.value[index]){
+  if (historyMsgHtml.value[index]) {
     //console.log("historyMsgHtml:", historyMsgHtml.value[index]);
     //console.log("historyMsgHtml:", index);
     //已经渲染过的消息，直接返回
@@ -553,7 +464,7 @@ onMounted(() => {
   //   // 浏览器环境
   //   md.use(markdownItMermaid);
   // }
-  IMWSConnect();
+  //IMWSConnect();
 
 
 
@@ -573,73 +484,109 @@ onUnmounted(() => {
 
 const doReceiveMessage = (event) => {
   // 处理接收到的消息
-    let msg: WSMessage = JSON.parse(event.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(); // 新增滚动调用
+  let msg: WSMessage = JSON.parse(event.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 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") || "{}");
-    if(req.user_id == 0){
-      req.user_id = parseInt(localStorage.getItem("user_id") || "0");
-    }else{
-      req.gen_ai_function.model_id = selectModel.value;
-      req.gen_ai_function.temperature = temperature.value;
-      req.gen_ai_function.top_p = topP.value;
-      req.gen_ai_function.session_id = sessionID.value;
+  //将配置保存到数据库
+  let req: UserUISettings = JSON.parse(localStorage.getItem("userUIconfigInfo") || "{}");
+  if (req.user_id == 0) {
+    req.user_id = parseInt(localStorage.getItem("user_id") || "0");
+  } else {
+    req.gen_ai_function.model_id = selectModel.value;
+    req.gen_ai_function.temperature = temperature.value;
+    req.gen_ai_function.top_p = topP.value;
+    req.gen_ai_function.session_id = sessionID.value;
+  }
+  updateUserUIconfigInfoService(req, localStorage.getItem("token")).then((res) => {
+    if (res["code"] === 0) {
+      console.log("保存成功");
+    } else {
+      console.log("保存失败");
     }
-     updateUserUIconfigInfoService(req, localStorage.getItem("token")).then((res) => {
-      if (res["code"] === 0) {
-        console.log("保存成功");
-      } else {
-        console.log("保存失败");
-      }
-    });
+  });
 }
 
+
+
 const sendMessage = async () => {
   //测试ws是否连接断开
-  if (socket.value == null) {
-    await IMWSConnect();
-    
-  }
-  if(loading.value === true){
+  // if (socket.value == null) {
+  //   await IMWSConnect();
+
+  // }
+  if (loading.value === true) {
     ElMessage.warning("正在等待AI回复，请稍后再试");
     return;
   }
   await nextTick();
-  sendMessageWithFile();
+  sendMessageWithFileUseSSE();
+  //sendMessageWithFile();
   return;
 };
 
-
-const sendMessageWithFile =async () => {
+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;
@@ -657,13 +604,13 @@ const sendMessageWithFile =async () => {
     // 处理选中的文件
     console.log("选中的文件:", selectedFiles.value);
     let file_contents = []
-    let file_type= ""
+    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{
+      } else {
         file_type = "text_file"
       }
       let file_msg: FileMessage = {
@@ -672,7 +619,102 @@ const sendMessageWithFile =async () => {
       };
       file_contents.push(file_msg);
     }
-    let msg : GenerationMessage = {
+    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() === "") {
+    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,
     };
@@ -693,18 +735,18 @@ const sendMessageWithFile =async () => {
   if (sessionID.value == 0) {
     sessionName.value = inputMessage.value;
   }
-  let pMsgContent ="";
+  let pMsgContent = "";
   if (end_msg["is_file"]) {
     let file_msg: GenerationMessage = JSON.parse(end_msg["msg"]);
     //解析成md格式
-    let file_content= file_msg.file_content
+    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";
+      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 {
@@ -721,7 +763,7 @@ const sendMessageWithFile =async () => {
   }
 };
 
-const IMWSConnect = async () =>{
+const IMWSConnect = async () => {
   let url =
     "wss://pm.ljsea.top/im/ai_chat_ws?" +
     "token=" +
@@ -729,7 +771,7 @@ const IMWSConnect = async () =>{
   //获取模型列表
   let test_url = "ws://127.0.0.1:8084/im/ai_chat_ws?" + "token=" + localStorage.getItem("token");
   //url =test_url;
-  socket.value =new WebSocket(url);
+  socket.value = new WebSocket(url);
   socket.value.onopen = () => {
     console.log("WebSocket 连接已建立");
     ElMessage.success("连接成功");
@@ -800,23 +842,23 @@ const getMessage = async (session_id: number) => {
     };
     result = await GetMessageService(req);
     if (result["code"] === 0) {
-     // console.log(result["data"]);
+      // console.log(result["data"]);
       let data = result["data"];
       for (let i = 0; i < data.length; i++) {
         if (data[i]["Type"] === 3) {
           let msg: GenMessage = data[i];
-          let pMsgContent="";
+          let pMsgContent = "";
           if (msg.Status == 3) {
             let file_msg: GenerationMessage = JSON.parse(msg.Msg);
-            let file_content= file_msg.file_content
+            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";
-                }
+              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;
+            pMsgContent = pMsgContent + file_msg.text;
           } else {
             pMsgContent = msg.Msg;
           }
@@ -857,11 +899,11 @@ const getMessageWithFile = async (session_id: number) => {
       for (let i = 0; i < data.length; i++) {
         if (data[i]["Type"] === 3) {
           let msg: GenMessage = data[i];
-          let pMsgContent="";
+          let pMsgContent = "";
           if (msg.Status == 3) {
             let img_msg: ImageMessage = JSON.parse(msg.Msg);
             //解析成md格式
-            let img_content= img_msg.image_content
+            let img_content = img_msg.image_content
             for (let i = 0; i < img_content.length; i++) {
               pMsgContent += `![${img_content[i].img_name}](${img_content[i].img_url})` + "\n";
             }
@@ -893,7 +935,7 @@ const getMessageWithFile = async (session_id: number) => {
 
 
 const MessageTextToDoc = async (content: string) => {
-  
+
   textToDocFileContent.value = content;
   textToDocFileVisible.value = true;
   await nextTick();
@@ -904,7 +946,7 @@ const MessageTextToDoc = async (content: string) => {
     cache: { enable: false },
     value: textToDocFileContent.value,
   });
-  
+
 };
 
 
@@ -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",
@@ -928,16 +989,16 @@ const GetModelListByFunctionName = async () => {
     let result = await FindModelListByFunctionName(req);
     if (result["code"] === 0) {
       ModelList.value = result["data"];
-      if(userUIconfigInfo.value.gen_ai_function.model_id ==0 ){  
+      if (userUIconfigInfo.value.gen_ai_function.model_id == 0) {
         selectModel.value = ModelList.value[0].ID;
-      }else{
-          selectModel.value = userUIconfigInfo.value.gen_ai_function.model_id;
-          temperature.value = userUIconfigInfo.value.gen_ai_function.temperature;
-          topP.value = userUIconfigInfo.value.gen_ai_function.top_p;
-           sessionID.value = userUIconfigInfo.value.gen_ai_function.session_id;
-           if (sessionID.value != 0){
-              getMessage(sessionID.value);
-            }
+      } else {
+        selectModel.value = userUIconfigInfo.value.gen_ai_function.model_id;
+        temperature.value = userUIconfigInfo.value.gen_ai_function.temperature;
+        topP.value = userUIconfigInfo.value.gen_ai_function.top_p;
+        sessionID.value = userUIconfigInfo.value.gen_ai_function.session_id;
+        if (sessionID.value != 0) {
+          getMessage(sessionID.value);
+        }
       }
       //console.log("gen_ai_chat_model_id:", gen_ai_chat_model_id);
       //console.log("selectModel:", selectModel.value);
@@ -1031,8 +1092,9 @@ const HandleTextToDocFile = async () => {
 
 .chat-messages {
   flex: 1;
-  overflow-y: auto; /* 允许垂直滚动 */
-  padding: 10px;   
+  overflow-y: auto;
+  /* 允许垂直滚动 */
+  padding: 10px;
   margin-bottom: 20px;
   scrollbar-width: 10px;
   height: 100%;
@@ -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;
diff --git a/src/views/system/gen-chat2.vue b/src/views/system/gen-chat2.vue
new file mode 100644
index 0000000..5d8fc3e
--- /dev/null
+++ b/src/views/system/gen-chat2.vue
@@ -0,0 +1,1234 @@
+<template>
+  <div class="chat-app">
+    <!-- 历史会话侧边栏 -->
+    <div class="history-sessions" v-if="sessionIsShow">
+      <div>
+        <el-button type="primary" @click="clearCurrent">新会话</el-button>
+      </div>
+      <el-card class="session-card">
+        <template #header>
+            <h3>当前会话</h3>
+          </template>
+        <el-tooltip :content=sessionName placement="top">
+          <ul>
+            <li>{{ getShortenedName(sessionName) }}</li>
+          </ul>
+        </el-tooltip>
+      </el-card>
+      <el-card class="session-card2">
+        <template #header>
+          <h3>历史会话</h3>
+        </template>
+        <el-scrollbar style="height: 400px; scrollbar-width: none">
+          <ul>
+            <li
+              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>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </el-card>
+    </div>
+    <div>
+      <div @click="showSession" style="cursor: pointer">
+        <el-icon v-if="sessionIsShow">
+          <Expand />
+        </el-icon>
+        <el-icon v-else>
+          <Fold />
+        </el-icon>
+      </div>
+    </div>
+
+    <!-- 原有的聊天区域 -->
+    <div class="chat-container">
+      <!-- 消息列表 -->
+      <el-card
+        class="chat-messages"
+        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>
+          </div>
+          <div class="message-content">
+            <div v-html="renderMarkdown(message,index)"></div>
+            <!-- 添加复制 -->
+            <div>
+            <el-tooltip content="复制" placement="top">
+              <el-button
+                type="text"
+                :icon="DocumentCopy"
+                @click="copyMessage(message.content)"
+              ></el-button>
+              </el-tooltip> 
+              <!-- <el-button
+                type="text"
+                :icon="Document"
+                @click="MessageTextToDoc(message.content)"
+                ></el-button> -->
+                <el-tooltip content="预览、文本创建文件" placement="top">
+                    <el-button
+                      type="text"
+                      :icon="Document"
+                      @click="MessageTextToDoc(message.content)"
+                    >
+                    </el-button>
+                </el-tooltip>
+            </div>
+          </div>
+        </div>
+        <div v-if="loading" class="loading-indicator">Loading...,已回答字符:{{currentAIMessage.length}}</div>
+      </el-card>
+
+      <!-- 输入区域 -->
+      <el-card class="chat-input" shadow="never">
+        <el-row :gutter="10">
+          <el-col :span="20">
+            <el-input
+              v-model="inputMessage"
+              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
+              @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>
+              </span>
+              <template #dropdown>
+                <div class="dropdown-content">
+                  <div class="model-params">
+                  <h4>模型参数
+                    <el-tooltip 
+                        effect="dark" 
+                        placement="right"
+                        content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改"
+                      >
+                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
+                      </el-tooltip>
+                  </h4>
+
+                  <!-- 温度参数 -->
+                  <div class="param-item">
+                    <div class="param-label">
+                      <span>温度 (Temperature)</span>
+                      <el-tooltip 
+                        effect="dark" 
+                        placement="right"
+                        content="采样温度，控制生成随机性（0: 保守，2: 随机）"
+                      >
+                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
+                      </el-tooltip>
+                    </div>
+                    <el-slider 
+                      v-model="temperature" 
+                      :min="0" 
+                      :max="2" 
+                      :step="0.1"
+                      :show-tooltip="false"
+                    />
+                    <div class="param-value">{{ temperature }}</div>
+                  </div>
+
+                  <!-- Top P 参数 -->
+                  <div class="param-item">
+                    <div class="param-label">
+                      <span>Top P</span>
+                      <el-tooltip 
+                        effect="dark" 
+                        placement="right"
+                        content="限制候选词范围（0: 严格，1: 宽松）"
+                      >
+                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
+                      </el-tooltip>
+                    </div>
+                    <el-slider 
+                      v-model="topP" 
+                      :min="0" 
+                      :max="1" 
+                      :step="0.1"
+                      :show-tooltip="false"
+                    />
+                    <div class="param-value">{{ topP }}</div>
+                  </div>
+                </div>
+                </div>
+              </template>
+            </el-dropdown>
+
+
+
+
+          </el-col>
+          <el-col :span="3" style="text-align: center">
+            <el-select v-model="selectModel" placeholder="选择模型" style="width: 320px;">
+              <el-option
+                v-for="item in ModelList"
+                :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-icon><Files /></el-icon
+            ></el-button>
+            </el-tooltip>
+          </el-col>
+          <!-- <el-col :span="1" style="text-align: center">
+            <el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button>
+          </el-col>
+          <el-col :span="1" style="text-align: center">
+            <el-button><el-icon><VideoCamera /></el-icon></el-button>
+          </el-col> -->
+          <!-- 已选文件一行显示 -->
+          <el-col :span="12" style="text-align: center">
+            <el-tag
+              v-for="(file, index) in selectedFiles"
+              :key="index"
+              closable
+              @close="removeFile(index)"
+              >{{ file.UserFileName }}</el-tag
+            >
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+
+    <div>
+      <!-- 文件对话框 -->
+      <el-dialog
+        v-model="selectFileVisible"
+        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
+              v-for="(item, index) in filteredFiles"
+              :key="index"
+              :label="item"
+            >
+              <span class="file-icon">
+                <!-- 根据文件类型展示不同图标 -->
+                <i
+                  v-if="item.UploadType === 'image'"
+                  class="el-icon-picture"
+                ></i>
+                <i
+                  v-else-if="item.UploadType === 'file'"
+                  class="el-icon-document"
+                ></i>
+                <!-- 可继续补充其他文件类型图标 -->
+              </span>
+              {{ item.UserFileName }}
+              <!-- <span class="file-time">{{ item.CreatedAt }}</span> -->
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <!-- 底部状态栏和按钮 -->
+        <div class="footer-bar">
+          <span class="selected-count"
+            >已选 {{ selectedFiles.length }} 个文件</span
+          >
+          <el-button @click="selectFileVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSelectFileConfirm"
+            >确认添加({{ selectedFiles.length }})</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+    <!-- 上传文件对话框 -->
+    <div>
+      <el-dialog
+        title="上传文件"
+        v-model="uploadFileVisible"
+        width="50%"
+        :before-close="handleUploadFileClose"
+      >
+        <UploadFile></UploadFile>
+      </el-dialog>
+    </div>
+    <div>
+      <!-- 文本创建文件对话 -->
+      <el-dialog
+        title="文本创建文件"
+        v-model="textToDocFileVisible"
+        width="70%"
+        heigth="80vh"
+        :before-close="handleMessageTextToDOCClose">
+        <!-- <textarea v-model="textToDocFileContent"></textarea> -->
+        <div ref="vditorRef"></div>
+        <el-col>
+          <!-- 提示 -->
+          <el-input v-model="textToDocFileName" placeholder="输入文件名..." style="width: 30%;">输入文件名</el-input>
+        </el-col>
+        <!-- <el-input v-model="textToDocFileName" placeholder="输入文件名..." width="30%">输入文件名</el-input> -->
+        <el-col>
+          <el-select v-model="selectFileDocType" placeholder="选择文本类型" style="width: 30%;">
+          <el-option label="docx" value="docx"></el-option>
+          <el-option label="txt" value="txt"></el-option>
+          <el-option label="md" value="md"></el-option>
+        </el-select>
+        </el-col>
+      
+       <el-button type="primary" @click="HandleTextToDocFile">确认</el-button>
+        <el-button @click="textToDocFileVisible = false">取消</el-button>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, nextTick,watch } from "vue";
+import { ElCard, ElInput, ElButton, ElDialog } from "element-plus";
+import { WSMessage, GenMessage } from "@/types/im";
+import { GetMessageService } from "@/api/im";
+import { FindUserFileService } from "@/api/file";
+import { Model } from "@/types/model";
+import {UserUISettings} from '@/types/user';
+import { File, fileUrl } from "@/types/file";
+import { Session } from "@/types/session";
+import { FindSessionService } from "@/api/session";
+import { SetMessageTextToDocService } from "@/api/tool";
+import { ElMessage } from "element-plus";
+import { Check, DocumentCopy,Document, PriceTag } from "@element-plus/icons-vue";
+import MarkdownIt from "markdown-it";
+import hljs from "highlight.js";
+import UploadFile from "@/components/upload-file.vue";
+import { updateUserUIconfigInfoService } from "@/api/user";
+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 "katex/dist/katex.min.css";
+import Vditor from 'vditor';
+import 'vditor/dist/index.css';
+
+
+interface Message {
+  role: "user" | "assistant";
+  content: string;
+  finished?: boolean;
+}
+interface SendImageMessage {
+  img_name : string;
+  img_url : string;
+}
+interface ImageMessage {
+  image_content: SendImageMessage[];
+  text: string;
+}
+interface FileMessage {
+  file_content: File; //文件内容，文件内容的base64编码
+  file_type: string | null; //文件类型，文本类型，图片类型等，text_file,img_file等
+}
+
+interface GenerationMessage {
+  text: string;
+  file_content: FileMessage[];
+}
+
+const md = new MarkdownIt();
+md.use(markdownItHighlightjs, {
+  hljs,
+  auto: true,
+  code: true,
+});
+md.renderer.rules.image = function (tokens, idx, options, env, self) {
+  const token = tokens[idx];
+  // 设置图片的宽度和高度属性
+  token.attrSet('width', '400'); 
+  token.attrSet('height', '300'); 
+  return self.renderToken(tokens, idx, options, env, self);
+};
+md.use(markdownItKatex);
+md.use(mermaidPlugin);
+
+//md.use(markdownItMermaid);
+
+const historySessions = ref<Session[]>([]);
+const loading = ref(false);
+const isUserScrolling = ref<boolean>(false);
+const messages = reactive([]);
+const inputMessage = ref("");
+const socket = ref(null);
+const currentAIMessage = ref("");
+const sessionID = ref(0);
+const messagesContainer = ref<HTMLDivElement | null>(null);
+const sessionIsShow = ref(false);
+const sessionName = ref("");
+const ModelList = ref<Model[]>([]);
+const selectModel = ref(0);
+const temperature = ref(0.8);
+const topP = ref(0.9);
+const selectedFiles = ref<File[]>([]); // 用于存储已选文件
+const selectFileVisible = ref(false); // 控制文件选择对话框的显示与隐藏
+const searchFileQuery = ref(""); // 用于搜索文件的查询条件
+const filteredFiles = ref<File[]>([]); // 用于存储过滤后的文件列表
+const uploadFileVisible = ref(false); // 控制上传文件对话框的显示与隐藏
+const textToDocFileVisible = ref(false); // 控制文本创建文件对话框的显示与隐藏
+const selectFileDocType = ref("docx"); // 选择的文本类型
+const textToDocFileName = ref(""); // 文本创建文件的名称
+const textToDocFileContent = ref(""); // 文本创建文件的内容
+const vditor = ref(); // Vditor 实例
+const vditorRef = ref(null);
+const userUIconfigInfo = ref<UserUISettings>({} as UserUISettings); // 用户UI配置
+
+
+
+//监听需要保存的配置
+watch(
+   [selectModel, temperature, topP,sessionID],
+   () => {  //保存配置
+    updateUserUIconfigInfo();
+   }
+)
+
+
+const historyMsgHtml= ref([]); // 用于存储历史消息的HTML内容
+const wssUrl = 
+    "wss://pm.ljsea.top/im/ai_chat_ws?" +
+    "token=" +
+    localStorage.getItem("token");
+
+const renderMarkdown = (message: Message, index:number) => {
+  if(message.finished == false){
+    //console.log("not finished");
+    return message.content;
+  }
+  if(historyMsgHtml.value[index]){
+    //console.log("historyMsgHtml:", historyMsgHtml.value[index]);
+    //console.log("historyMsgHtml:", index);
+    //已经渲染过的消息，直接返回
+    return historyMsgHtml.value[index];
+  }
+  //console.log("new finish:");
+  const html = md.render(message.content);
+  historyMsgHtml.value.push(html);
+  return html;
+};
+
+const scrollToBottom = () => {
+  let x = document.getElementsByClassName("chat-messages")[0];
+  if (!x) return;
+  x.scrollTop = x.scrollHeight; //将滚轮置底
+};
+
+const copyCode = (code: string) => {
+  navigator.clipboard.writeText(code).then(() => {
+    ElMessage.success("代码已复制到剪贴板");
+  });
+};
+const removeFile = (index: number) => {
+  selectedFiles.value.splice(index, 1);
+};
+
+const handleSelectFileVisible = async () => {
+  await getFileListData(); // 获取文件列表
+  console.log("selectedFiles:", selectedFiles.value);
+  selectFileVisible.value = true; // 显示对话框
+  console.log("handleSelectFileVisible:", selectFileVisible.value);
+};
+
+const handleUploadFileClose = async () => {
+  uploadFileVisible.value = false; // 关闭上传文件对话框
+  await getFileListData(); // 获取文件列表
+  console.log("handleUploadFileClose:", uploadFileVisible.value);
+};
+
+const handleMessageTextToDOCClose = async () => {
+  textToDocFileVisible.value = false; // 关闭文本创建文件对话框
+};
+
+
+const handleUploadPicture = () => {
+  // 处理上传图片的逻辑
+  //选择图片并上传
+};
+
+const uploadMessageFile = () => {
+  // 处理上传文件的逻辑
+  // 这里可以调用上传文件的API
+  uploadFileVisible.value = true; // 显示上传文件对话框
+  console.log("上传文件:", selectedFiles.value);
+};
+
+const handleSelectFileConfirm = () => {
+  // 处理选中的文件
+  console.log("选中的文件:", selectedFiles.value);
+  // 在这里可以进行文件上传或其他操作
+  selectFileVisible.value = false; // 关闭对话框
+
+};
+
+
+const doButtonD = () => {
+  const codeBlocks = document.querySelectorAll("pre code");
+  codeBlocks.forEach((codeBlock) => {
+    //先查看是否已经添加了复制按钮
+    if (codeBlock.parentNode.querySelector(".code-controls")) {
+      return;
+    }
+
+    // 获取代码类型
+    const codeType = codeBlock.className.replace("hljs", "");
+    // 创建代码类型显示元素
+    const codeTypeElement = document.createElement("span");
+    codeTypeElement.textContent = codeType.split("-")[1];
+    codeTypeElement.setAttribute("background-color", "rgba(0, 0, 0, 0.1)");
+    codeTypeElement.setAttribute("padding", "3px 6px");
+    codeTypeElement.setAttribute("border-radius", "4px");
+    codeTypeElement.setAttribute("font-size", "0.9em");
+
+    // 创建复制按钮
+    const copyButton = document.createElement("button");
+    copyButton.setAttribute("background-color", "dodgerblue");
+    copyButton.setAttribute("display", "flex");
+    copyButton.setAttribute("align-items", "center");
+    copyButton.setAttribute("padding", "5px 10px");
+    copyButton.setAttribute("cursor", "pointer");
+    copyButton.setAttribute("border-radius", "4px");
+    copyButton.textContent = "复制";
+    copyButton.classList.add();
+    copyButton.addEventListener("click", () => {
+      copyCode(codeBlock.textContent);
+    });
+
+    // 设置代码块父元素的定位，以便按钮定位
+    const pre = codeBlock.parentNode;
+    // pre.style.position = 'relative';
+
+    // 创建一个容器用于放置代码类型和复制按钮
+    const controlsContainer = document.createElement("div");
+    controlsContainer.classList.add("code-controls");
+    controlsContainer.appendChild(codeTypeElement);
+    controlsContainer.appendChild(copyButton);
+
+    // 将容器添加到代码块父元素中
+    pre.insertBefore(controlsContainer, codeBlock);
+  });
+};
+
+onMounted(() => {
+  // if (typeof window !== 'undefined') {
+  //   // 浏览器环境
+  //   md.use(markdownItMermaid);
+  // }
+  IMWSConnect();
+
+
+
+  userUIconfigInfo.value = JSON.parse(
+    localStorage.getItem("userUIconfigInfo") || "{}"
+  );
+  console.log("userUIconfigInfo:", userUIconfigInfo.value);
+  messagesContainer.value = document.querySelector(".chat-messages");
+  //console.log("userUIconfigInfo:", userUIconfigInfo.value);
+});
+
+onUnmounted(() => {
+  if (socket.value) {
+    socket.value.close();
+  }
+});
+
+const doReceiveMessage = (event) => {
+  // 处理接收到的消息
+    let msg: WSMessage = JSON.parse(event.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") || "{}");
+    if(req.user_id == 0){
+      req.user_id = parseInt(localStorage.getItem("user_id") || "0");
+    }else{
+      req.gen_ai_function.model_id = selectModel.value;
+      req.gen_ai_function.temperature = temperature.value;
+      req.gen_ai_function.top_p = topP.value;
+      req.gen_ai_function.session_id = sessionID.value;
+    }
+     updateUserUIconfigInfoService(req, localStorage.getItem("token")).then((res) => {
+      if (res["code"] === 0) {
+        console.log("保存成功");
+      } else {
+        console.log("保存失败");
+      }
+    });
+}
+
+const sendMessage = async () => {
+  //测试ws是否连接断开
+  if (socket.value == null) {
+    await IMWSConnect();
+    
+  }
+  if(loading.value === true){
+    ElMessage.warning("正在等待AI回复，请稍后再试");
+    return;
+  }
+  await nextTick();
+  sendMessageWithFile();
+  return;
+};
+
+
+const sendMessageWithFile =async () => {
+  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;
+  }
+  console.log("end_msg:", end_msg);
+
+  try {
+    socket.value.send(JSON.stringify(end_msg));
+    console.log("send msg:", end_msg);
+  } catch (e) {
+    //ElMessage.error("发送失败!请刷新页面!");
+    await IMWSConnect();
+    socket.value.send(JSON.stringify(end_msg));
+  }
+  if (sessionID.value == 0) {
+    sessionName.value = inputMessage.value;
+  }
+  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 IMWSConnect = async () =>{
+  let url =
+    "wss://pm.ljsea.top/im/ai_chat_ws?" +
+    "token=" +
+    localStorage.getItem("token");
+  //获取模型列表
+  let test_url = "ws://127.0.0.1:8084/im/ai_chat_ws?" + "token=" + localStorage.getItem("token");
+  //url =test_url;
+  socket.value =new WebSocket(url);
+  socket.value.onopen = () => {
+    console.log("WebSocket 连接已建立");
+    ElMessage.success("连接成功");
+  };
+  socket.value.onmessage = (event) => {
+    doReceiveMessage(event);
+  };
+
+  socket.value.onclose = () => {
+    console.log("WebSocket 连接已关闭");
+    ElMessage.error("连接已关闭");
+    //重新连接
+    //socket.value = new WebSocket(url);
+    socket.value = null;
+  };
+
+  socket.value.onerror = (error) => {
+    socket.value = null;
+    console.log("WebSocket 连接发生错误:", error);
+  };
+}
+
+const loadSession = async (session_id: number) => {
+  sessionID.value = session_id;
+  messages.length = 0; // 清空消息
+  sessionName.value = historySessions.value.find(
+    (session) => session.ID == session_id
+  )?.Name;
+  await getMessage(session_id);
+  scrollToBottom();
+  doButtonD();
+};
+
+const clearCurrent = () => {
+  sessionID.value = 0;
+  messages.length = 0; // 清空消息
+  historyMsgHtml.value.length = 0; // 清空历史消息
+  sessionName.value = "新会话";
+  showSession();
+  ElMessage.success("新会话已创建!可以开始聊天了");
+};
+
+const showSession = async () => {
+  //获取历史会话
+  let req = {
+    token: localStorage.getItem("token"),
+    type: "UserID",
+    session_type: 1, //通用会话
+  };
+  let result = await FindSessionService(req);
+  historySessions.value = result.data;
+  sessionIsShow.value = !sessionIsShow.value;
+};
+const getShortenedName = (name: string) => {
+  if (name.length > 10) {
+    return name.slice(0, 10) + "...";
+  }
+  return name;
+};
+
+const getMessage = async (session_id: number) => {
+  historyMsgHtml.value.length = 0; // 清空历史消息
+  let result = {};
+  try {
+    let req = {
+      token: localStorage.getItem("token"),
+      session_id: session_id,
+    };
+    result = await GetMessageService(req);
+    if (result["code"] === 0) {
+     // console.log(result["data"]);
+      let data = result["data"];
+      for (let i = 0; i < data.length; i++) {
+        if (data[i]["Type"] === 3) {
+          let msg: GenMessage = data[i];
+          let pMsgContent="";
+          if (msg.Status == 3) {
+            let file_msg: GenerationMessage = JSON.parse(msg.Msg);
+            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 = msg.Msg;
+          }
+          messages.push({
+            role: "user",
+            content: pMsgContent,
+            finished: true,
+          });
+        } else if (data[i]["Type"] === 4) {
+          messages.push({
+            role: "assistant",
+            content: data[i]["Msg"],
+            finished: true,
+          });
+        } else {
+          console.log("未知消息类型");
+        }
+      }
+    }
+  } catch (e) {
+    console.log(e);
+  }
+  return {};
+};
+
+
+const getMessageWithFile = async (session_id: number) => {
+  let result = {};
+  try {
+    let req = {
+      token: localStorage.getItem("token"),
+      session_id: session_id,
+    };
+    result = await GetMessageService(req);
+    if (result["code"] === 0) {
+      console.log(result["data"]);
+      let data = result["data"];
+      for (let i = 0; i < data.length; i++) {
+        if (data[i]["Type"] === 3) {
+          let msg: GenMessage = data[i];
+          let pMsgContent="";
+          if (msg.Status == 3) {
+            let img_msg: ImageMessage = JSON.parse(msg.Msg);
+            //解析成md格式
+            let img_content= img_msg.image_content
+            for (let i = 0; i < img_content.length; i++) {
+              pMsgContent += `![${img_content[i].img_name}](${img_content[i].img_url})` + "\n";
+            }
+            pMsgContent = pMsgContent + img_msg.text;
+          } else {
+            pMsgContent = msg.Msg;
+          }
+          messages.push({
+            role: "user",
+            content: pMsgContent,
+            finished: true,
+          });
+        } else if (data[i]["Type"] === 4) {
+          messages.push({
+            role: "assistant",
+            content: data[i]["Msg"],
+            finished: true,
+          });
+        } else {
+          console.log("未知消息类型");
+        }
+      }
+    }
+  } catch (e) {
+    console.log(e);
+  }
+  return {};
+};
+
+
+const MessageTextToDoc = async (content: string) => {
+  
+  textToDocFileContent.value = content;
+  textToDocFileVisible.value = true;
+  await nextTick();
+  vditor.value = new Vditor(vditorRef.value, {
+    mode: 'sv',
+    height: '600px',
+    width: '100%',
+    cache: { enable: false },
+    value: textToDocFileContent.value,
+  });
+  
+};
+
+
+const copyMessage = (content: string) => {
+  navigator.clipboard
+    .writeText(content)
+    .then(() => {
+      ElMessage.success("复制成功");
+    })
+    .catch((error) => {
+      ElMessage.error("复制失败: " + error);
+    });
+};
+
+const GetModelListByFunctionName = async () => {
+  let req = {
+    function: "gen-ai-chat",
+    token: localStorage.getItem("token"),
+  };
+  try {
+    let result = await FindModelListByFunctionName(req);
+    if (result["code"] === 0) {
+      ModelList.value = result["data"];
+      if(userUIconfigInfo.value.gen_ai_function.model_id ==0 ){  
+        selectModel.value = ModelList.value[0].ID;
+      }else{
+          selectModel.value = userUIconfigInfo.value.gen_ai_function.model_id;
+          temperature.value = userUIconfigInfo.value.gen_ai_function.temperature;
+          topP.value = userUIconfigInfo.value.gen_ai_function.top_p;
+           sessionID.value = userUIconfigInfo.value.gen_ai_function.session_id;
+           if (sessionID.value != 0){
+              getMessage(sessionID.value);
+            }
+      }
+      //console.log("gen_ai_chat_model_id:", gen_ai_chat_model_id);
+      //console.log("selectModel:", selectModel.value);
+      // selectModel.value = ModelList.value[0].ID;
+      //console.log("model_list:", ModelList.value);
+    } else {
+      ElMessage.error(result["msg"]);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+GetModelListByFunctionName();
+
+const getFileListData = async () => {
+  let req = {
+    token: localStorage.getItem("token"),
+    type: "all",
+  };
+  let result = await FindUserFileService(req);
+  if (result["code"] === 0) {
+    filteredFiles.value = result["data"];
+  } else {
+    ElMessage.error(result["msg"]);
+  }
+};
+
+
+const HandleTextToDocFile = async () => {
+  // 处理文本创建文件的逻辑
+  //console.log("文本创建文件:", textToDocFileName.value, vditor.value.getValue(), selectFileDocType.value);
+  if (textToDocFileName.value.trim() === "") {
+    ElMessage.warning("文件名不能为空");
+    return;
+  }
+  let req = {
+    token: localStorage.getItem("token"),
+    file_name: textToDocFileName.value,
+    text: vditor.value.getValue(),
+    file_type: selectFileDocType.value,
+  };
+  let result = await SetMessageTextToDocService(req);
+  if (result["code"] === 0) {
+    ElMessage.success("文件已加入创建队列，请等待一段时间后可在你的文件中查看!");
+    textToDocFileVisible.value = false;
+  } else {
+    ElMessage.error(result["msg"]);
+  }
+};
+
+</script>
+<style scoped>
+.chat-app {
+  display: flex;
+  height: 100%;
+}
+
+.history-sessions {
+  width: 15%;
+  padding: 20px;
+  height: 100%;
+  overflow-y: auto;
+  border-right: 1px solid #e1e1e1;
+  scrollbar-width: none;
+}
+
+.history-sessions ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.history-sessions li {
+  cursor: pointer;
+  padding: 10px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.history-sessions li:hover {
+  background-color: #f0f0f0;
+}
+
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto; /* 允许垂直滚动 */
+  padding: 10px;   
+  margin-bottom: 20px;
+  scrollbar-width: 10px;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.messages-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; /* 确保内部可以滚动 */
+  height: 100%;
+}
+
+.message {
+  display: flex;
+  margin-bottom: 15px;
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message-avatar {
+  width: 40px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 20px;
+  margin-right: 10px;
+}
+
+.message.assistant .message-avatar {
+  margin-right: 0;
+  margin-left: 10px;
+}
+
+.message-content {
+  background-color: #f0f9eb;
+  border: 1px solid #e1f3d8;
+  border-radius: 4px;
+  padding: 10px 15px;
+  white-space: pre-wrap;
+  max-width: 800px;
+}
+
+.message.assistant .message-content {
+  background-color: #f3f4f6;
+  border: 1px solid #dce4eb;
+  max-width: 1000px;
+}
+
+.loading-indicator {
+  text-align: center;
+  color: #999;
+  font-size: 16px;
+}
+
+.chat-input {
+  width: 100%;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.session-card {
+  margin-bottom: 20px;
+  height: 20%;
+}
+.session-card2 {
+  margin-bottom: 20px;
+  height: 70%;
+}
+
+.session-card ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.session-card li {
+  cursor: pointer;
+  padding: 10px;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.session-card li:hover {
+  background-color: #f0f0f0;
+}
+
+.scroll-wrapper {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.code-controls {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  display: flex;
+  gap: 10px;
+}
+
+.copy-code-button {
+  background-color: dodgerblue;
+  color: white;
+  width: 30px;
+  height: 20px;
+  border: 0;
+  display: flex;
+  align-items: center;
+}
+
+.el-icon-copy {
+  margin-right: 5px;
+}
+
+/* 对话框 */
+.file-list {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #e4e7ed;
+  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;
+}
+
+.model-dropdown {
+  margin-top: 10px;
+}
+
+.dropdown-content {
+  width: 400px;
+  padding: 10px;
+}
+
+.model-params {
+  margin-top: 10px;
+}
+.param-value {
+  margin-top: 5px;
+  text-align: right;
+}
+
+.param-item {
+  margin: 25px 0;
+}
+
+.param-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  color: #606266;
+}
+
+.tip-icon {
+  margin-left: 8px;
+  color: #909399;
+  cursor: help;
+}
+
+.param-value {
+  margin-top: 8px;
+  text-align: center;
+  font-weight: bold;
+  color: #409eff;
+}
+
+/* 自定义滑块样式 */
+:deep(.el-slider__runway) {
+  height: 6px;
+}
+
+:deep(.el-slider__button) {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index edd64b6..1101e13 100644
--- a/yarn.lock
+++ b/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"