通用交互支持图片理解

src/types/im.ts

@@ -30,3 +30,27 @@ export interface OllamaRequest {
     context: number[];
 }
 
+// "ID": 488,
+// "CreatedAt": "2025-04-01T13:52:56.887+08:00",
+// "UpdatedAt": "2025-04-01T13:52:56.887+08:00",
+// "DeletedAt": null,
+// "Type": 3,
+// "SessionID": 178,
+// "FromID": 1,
+// "ToID": 11,
+// "Msg": "图片主要讲了什么",
+// "FunctionID": 2,
+// "Status": 3
+export interface GenMessage {
+    ID : number;
+    CreatedAt : string;
+    UpdatedAt : string;
+    DeletedAt : string;
+    Type : number;
+    SessionID : number;
+    FromID : number;
+    ToID : number;
+    Msg : string;
+    FunctionID : number;
+    Status : number;
+}

src/views/system/gen-chat.vue

@@ -81,14 +81,15 @@
             <el-input
               v-model="inputMessage"
               type="textarea"
+              style="border: 0;"
               :rows="5"
               placeholder="输入消息..."
               @keyup.enter="sendMessage"
             />
-            <el-text
+            <!-- <el-text
               v-model="inputMessage"
               aria-placeholder="输入信息...."
-            ></el-text>
+            ></el-text> -->
           </el-col>
           <el-col :span="4" style="text-align: center">
             <el-button
@@ -104,7 +105,6 @@
               <el-slider v-model="temperature" :min="0" :max="1" :step="0.1">temperature</el-slider>
                <el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
             </div>
-            
           </el-col>
           <el-col :span="3" style="text-align: center">
             <el-select v-model="selectModel" placeholder="选择模型">
@@ -116,18 +116,73 @@
               ></el-option>
             </el-select>
           </el-col>
+          <el-col :span="1" style="text-align: center">
+            <el-button @click="handleSelectFileVisible"><el-icon><Files /></el-icon></el-button>
+          </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>
+
+  <div>
+    <!-- 文件对话框 -->
+    <el-dialog 
+  v-model="selectFileVisible"
+  title="从上传文件中选择"
+  width="50%"
+>
+  <el-input
+    placeholder="搜索文件"
+    v-model="searchFileQuery"
+    prefix-icon="el-icon-search"
+  />
+  <!-- 文件列表 -->
+  <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>
+
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
-import { ElCard, ElInput, ElButton } from "element-plus";
+import { ElCard, ElInput, ElButton,ElDialog } from "element-plus";
 import { WSMessage} from "@/types/im";
 import { ElMessage } from "element-plus";
 import { GetMessageService } from "@/api/im";
+import { FindUserFileService } from "@/api/file";
 import { Check, Loading, DocumentCopy } from "@element-plus/icons-vue";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
@@ -139,11 +194,17 @@ import markdownItKatex from "markdown-it-katex";
 import mermaidPlugin from "@agoose77/markdown-it-mermaid";
 import "katex/dist/katex.min.css";
 import { Model } from "@/types/model";
+import {File,fileUrl} from "@/types/file";
+import {GenMessage} from "@/types/im";
 interface Message {
   role: "user" | "assistant";
   content: string;
   finished?: boolean;
 }
+interface ImageMessage{
+  img_url: string;
+  text: string;
+}
 
 const md = new MarkdownIt();
 md.use(markdownItHighlightjs, {
@@ -171,6 +232,10 @@ const ModelList = ref<Model[]>([]);
 const selectModel = ref(0);
 const temperature = ref(0.5);
 const topP = ref(0.9);
+const selectedFiles = ref<File[]>([]); // 用于存储已选文件
+const selectFileVisible = ref(false); // 控制文件选择对话框的显示与隐藏
+const searchFileQuery = ref(""); // 用于搜索文件的查询条件
+const filteredFiles = ref<File[]>([]); // 用于存储过滤后的文件列表
 
 const renderMarkdown = (content: string) => {
   return md.render(content);
@@ -178,6 +243,7 @@ const renderMarkdown = (content: string) => {
 
 const scrollToBottom = () => {
   let x = document.getElementsByClassName("chat-messages")[0];
+  if (!x) return;
   x.scrollTop = x.scrollHeight; //将滚轮置底
 };
 
@@ -186,6 +252,29 @@ const copyCode = (code: string) => {
     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 handleUploadPicture = () => {
+  // 处理上传图片的逻辑
+  //选择图片并上传
+
+};
+
+const handleSelectFileConfirm = () => {
+  // 处理选中的文件
+  console.log("选中的文件:", selectedFiles.value);
+  // 在这里可以进行文件上传或其他操作
+  selectFileVisible.value = false; // 关闭对话框
+};
 
 const doButtonD = () => {
   const codeBlocks = document.querySelectorAll("pre code");
@@ -314,6 +403,19 @@ const sendMessage = () => {
     temperature: temperature.value,
     top_p: topP.value,
   };
+  if(selectedFiles.value.length > 0){
+    // 处理选中的文件
+    console.log("选中的文件:", selectedFiles.value);
+    let img_file:File = selectedFiles.value[0];
+    let img_msg:ImageMessage = {
+      img_url: fileUrl + img_file.file_store_name,
+      text: inputMessage.value,
+    };
+    let img_msg_str = JSON.stringify(img_msg);
+    msg["msg"] = img_msg_str;
+    msg["is_image"] = true;
+  }
+  
   try {
     socket.value.send(JSON.stringify(msg));
   } catch (e) {
@@ -323,7 +425,15 @@ const sendMessage = () => {
   if (sessionID.value == 0) {
     sessionName.value = inputMessage.value;
   }
-  messages.push({ role: "user", content: inputMessage.value, finished: true });
+  let pMsgContent
+  if(msg["is_image"]){
+    let img_msg:ImageMessage = JSON.parse(msg["msg"]);
+    //解析成md格式
+    pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text;
+  }else{
+    pMsgContent = msg.msg;
+  }
+  messages.push({ role: "user", content: pMsgContent, finished: true });
   inputMessage.value = "";
   nextTick(() => {
       scrollToBottom(); // 新增滚动调用
@@ -382,9 +492,18 @@ const getMessage = async (session_id: number) => {
       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格式
+            pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text;
+          }else{
+            pMsgContent = msg.Msg;
+          }
           messages.push({
             role: "user",
-            content: data[i]["Msg"],
+            content: pMsgContent,
             finished: true,
           });
         } else if (data[i]["Type"] === 4) {
@@ -434,6 +553,19 @@ const GetModelListByFunctionName = async () => {
 };
 
 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"]);
+    }
+};
 </script>
 <style scoped>
 .chat-app {
@@ -596,4 +728,33 @@ GetModelListByFunctionName();
 .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;
+}
 </style>