知识库新增引用文件；

llm-back/ruoyi-llm/src/main/java/com/ruoyi/web/llm/service/impl/LangChainMilvusServiceImpl.java

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2025-07-08 15:10:42
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-07-09 11:39:18
+ * @LastEditTime: 2025-07-21 15:42:26
  */
 package com.ruoyi.web.llm.service.impl;
 
@@ -144,7 +144,7 @@ public class LangChainMilvusServiceImpl implements ILangChainMilvusService
                     return result;
                 })
                 .collect(Collectors.toList());
-        wrapperList.removeIf(jsonObject -> jsonObject.getDouble("distance") < 0.7);
+        wrapperList.removeIf(jsonObject -> jsonObject.getDouble("distance") < 0.75);
         return wrapperList;
     }
 

llm-ui/src/api/llm/rag.js

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2025-07-08 16:43:22
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-07-11 14:15:01
+ * @LastEditTime: 2025-07-16 15:49:45
  */
 import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
@@ -16,6 +16,15 @@ export function getAnswer(question, collectionName) {
   })
 }
 
+// 查询上下文引用文件
+export function getContextFile(question, collectionName) {
+  return request({
+    url: '/llm/rag/context',
+    method: 'get',
+    params: { question, collectionName }
+  })
+}
+
 // 流式回答API - 使用fetch API处理流式响应
 export function getAnswerStream(question, collectionName, onMessage, onError, onComplete) {
   const baseURL = import.meta.env.VITE_APP_BASE_API

llm-ui/src/views/llm/knowledge/index.vue

@@ -124,7 +124,7 @@
           </div>
 
           <div v-else class="file-list">
-            <div v-for="(file, index) in fileList" :key="index" class="file-item">
+            <div v-for="(file, index) in pagedFileList" :key="index" class="file-item">
               <div class="file-info">
                 <el-icon class="file-icon">
                   <Document />
@@ -143,6 +143,10 @@
               </div>
             </div>
           </div>
+
+          <!-- 文件列表分页 -->
+          <pagination v-show="fileTotal > 0" :total="fileTotal" v-model:page="filePageNum" v-model:limit="filePageSize" :autoScroll="false"
+            @pagination="handleFilePagination" />
         </div>
 
         <!-- 聊天模式 -->
@@ -167,7 +171,7 @@
             </div>
 
             <div v-else class="message-list">
-              <div v-for="(message, index) in chatMessages" :key="index" class="message-item" 
+              <div v-for="(message, index) in chatMessages" :key="index" class="message-item"
                 :class="[message.type, { 'typing': message.type === 'ai' && isSending && index === chatMessages.length - 1 }]">
                 <div class="message-avatar">
                   <div v-if="message.type === 'user'" class="user-avatar">
@@ -182,13 +186,47 @@
                 <div class="message-content">
                   <div class="message-bubble" :class="message.type">
                     <div class="message-text" v-html="formatMessage(message.content)"></div>
-                    <div class="message-time">{{ formatMessageTime(message.time) }}</div>
+                    
+                    <!-- AI回答的引用文件信息 -->
+                    <div v-if="message.type === 'ai' && message.references && message.references.length > 0" class="message-references">
+                      <div class="references-header">
+                        <el-icon class="reference-icon"><Document /></el-icon>
+                        <span>参考文件 ({{ message.references.length }})</span>
+                        <el-button 
+                          v-if="message.references.length > 3"
+                          type="text" 
+                          size="small" 
+                          class="toggle-references"
+                          @click="toggleReferences(index)"
+                        >
+                          {{ message.showAllReferences ? '收起' : '展开全部' }}
+                        </el-button>
+                      </div>
+                      <div class="references-list">
+                        <div 
+                          v-for="(ref, refIndex) in getDisplayedReferences(message)" 
+                          :key="refIndex" 
+                          class="reference-item"
+                        >
+                          <div class="reference-info">
+                            <span class="reference-filename" :title="ref.fileName">{{ ref.fileName }}</span>
+                            <span class="reference-similarity" :class="getSimilarityClass(ref.similarity)">
+                              相似度: {{ formatSimilarity(ref.similarity) }}%
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <div class="message-time">{{ message.time }}</div>
                   </div>
                 </div>
               </div>
 
               <!-- AI回答loading状态 -->
-              <div v-if="isSending && chatMessages.length > 0 && chatMessages[chatMessages.length - 1].type === 'ai' && chatMessages[chatMessages.length - 1].content === ''" class="message-item ai">
+              <div
+                v-if="isSending && chatMessages.length > 0 && chatMessages[chatMessages.length - 1].type === 'ai' && chatMessages[chatMessages.length - 1].content === ''"
+                class="message-item ai">
                 <div class="message-avatar">
                   <div class="ai-avatar">
                     <el-icon>
@@ -212,10 +250,9 @@
           <!-- 输入区域 -->
           <div class="chat-input-area">
             <div class="input-container">
-              <el-input v-model="chatInput" type="textarea" :rows="3" 
-                :placeholder="isSending ? 'AI正在思考中...' : '请输入您的问题...'"
-                @keydown.enter="handleEnter" @keydown.ctrl.enter="handleCtrlEnter" :disabled="isSending"
-                resize="none" />
+              <el-input v-model="chatInput" type="textarea" :rows="3"
+                :placeholder="isSending ? 'AI正在思考中...' : '请输入您的问题...'" @keydown.enter="handleEnter"
+                @keydown.ctrl.enter="handleCtrlEnter" :disabled="isSending" resize="none" />
               <div class="input-actions">
                 <el-button v-if="!isSending" type="primary" :icon="Promotion" @click="sendMessage"
                   :disabled="!chatInput.trim() || chatInput.length > 2000">
@@ -297,7 +334,7 @@
 import { ref, reactive, getCurrentInstance, onMounted, onUnmounted, nextTick, watch, computed } from 'vue'
 import { Search, Refresh, Plus, Edit, Delete, Upload, UploadFilled, Folder, MoreFilled, FolderOpened, Document, ChatRound, User, ChatDotRound, Promotion } from '@element-plus/icons-vue'
 import { listKnowledge, addKnowledge, updateKnowledge, delKnowledge, insertKnowledgeFile, listKnowledgeDocument, deleteKnowledgeFile } from "@/api/llm/knowLedge";
-import { getAnswer, getAnswerStream } from '@/api/llm/rag';
+import { getAnswer, getAnswerStream,getContextFile } from '@/api/llm/rag';
 import { getToken } from "@/utils/auth";
 
 const { proxy } = getCurrentInstance();
@@ -317,6 +354,16 @@ const isModify = ref(false);
 const selectedKnowledge = ref(null);
 const fileList = ref([]);
 
+// 文件分页相关状态
+const fileTotal = ref(0);
+const filePageNum = ref(1);
+const filePageSize = ref(10);
+const pagedFileList = computed(() => {
+  const start = (filePageNum.value - 1) * filePageSize.value;
+  const end = start + filePageSize.value;
+  return fileList.value.slice(start, end);
+});
+
 // 聊天相关状态
 const isChatMode = ref(false);
 const chatMessages = ref([]);
@@ -375,6 +422,11 @@ function getList() {
     // 确保返回的数据是数组格式
     if (Array.isArray(response.data)) {
       knowledgeList.value = response.data;
+      knowledgeList.value.map(item => {
+        listKnowledgeDocument(item.collectionName).then(response => {
+          item.fileCount = response.data.length;
+        })
+      })
     } else {
       knowledgeList.value = [];
     }
@@ -391,16 +443,21 @@ function selectKnowledge(knowledge) {
   if (isSending.value) {
     stopGenerating();
   }
-  
+
   selectedKnowledge.value = knowledge;
   // 重置聊天模式
   isChatMode.value = false;
   chatMessages.value = [];
   chatInput.value = '';
 
+  // 重置文件分页状态
+  filePageNum.value = 1;
+  filePageSize.value = 10;
+
   fileLoading.value = true;
   listKnowledgeDocument(knowledge.collectionName).then(response => {
     fileList.value = response.data;
+    fileTotal.value = response.data.length;
     fileLoading.value = false;
   }).catch(error => {
     fileLoading.value = false;
@@ -418,7 +475,7 @@ function handleChat(knowledge) {
   if (isSending.value) {
     stopGenerating();
   }
-  
+
   isChatMode.value = true;
   chatMessages.value = [];
   chatInput.value = '';
@@ -434,14 +491,14 @@ function switchToFileMode() {
   if (isSending.value) {
     stopGenerating();
   }
-  
+
   isChatMode.value = false;
 }
 
 /** 发送消息 */
 function sendMessage() {
   if (!chatInput.value.trim()) return;
-  
+
   // 如果正在发送，先停止当前请求
   if (isSending.value) {
     stopGenerating();
@@ -450,7 +507,7 @@ function sendMessage() {
   const userMessage = {
     type: 'user',
     content: chatInput.value.trim(),
-    time: new Date()
+    time: proxy.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
   };
 
   chatMessages.value.push(userMessage);
@@ -467,33 +524,53 @@ function sendMessage() {
   const aiMessage = reactive({
     type: 'ai',
     content: '',
-    time: new Date()
+    time: proxy.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
+    references: [], // 引用的文件信息
+    showAllReferences: false // 是否显示所有引用文件
   });
   chatMessages.value.push(aiMessage);
 
   // 使用流式API获取回答
   const eventSource = getAnswerStream(
-    currentInput, 
+    currentInput,
     selectedKnowledge.value.collectionName,
-        // onMessage: 接收到每个字符时的回调
+    // onMessage: 接收到每个字符时的回调
     (content) => {
       // 处理接收到的内容
       console.log('=== 前端接收到内容 ===', content)
-      
+
       // 清理内容中的</think>标签
       let cleanContent = content.replace(/<\/?think>/g, '');
-      
+
       // 如果内容为空或只包含空白字符，跳过
       if (!cleanContent.trim()) {
         return;
       }
-      
+
       // 直接替换内容，避免重复叠加
       aiMessage.content = cleanContent;
-      
+      aiMessage.time = proxy.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
       console.log('=== 清理后的内容 ===', cleanContent)
       console.log('=== 当前AI消息完整内容 ===', aiMessage.content)
+
+      // 每次接收到消息都重置超时定时器
+      if (window.responseTimeout) {
+        clearTimeout(window.responseTimeout);
+      }
       
+      // 重新设置超时定时器（30秒无新消息才超时）
+      window.responseTimeout = setTimeout(() => {
+        if (isSending.value) {
+          console.log('=== 响应超时强制结束 ===')
+          isSending.value = false;
+          if (window.currentController) {
+            window.currentController.abort();
+            window.currentController = null;
+          }
+          window.responseTimeout = null;
+        }
+      }, 30000); // 30秒无响应超时
+
       // 滚动到底部
       nextTick(() => {
         scrollToBottom();
@@ -502,6 +579,13 @@ function sendMessage() {
     // onError: 发生错误时的回调
     (error) => {
       console.error('=== 流式回答错误 ===', error);
+      
+      // 清除超时定时器
+      if (window.responseTimeout) {
+        clearTimeout(window.responseTimeout);
+        window.responseTimeout = null;
+      }
+      
       if (aiMessage.content === '') {
         aiMessage.content = '抱歉，我暂时无法回答您的问题，请稍后再试。';
       } else {
@@ -509,6 +593,12 @@ function sendMessage() {
       }
       isSending.value = false;
       console.log('=== 错误时isSending设置为false ===')
+      
+      // 清理控制器
+      if (window.currentController) {
+        window.currentController = null;
+      }
+      
       // 滚动到底部
       nextTick(() => {
         scrollToBottom();
@@ -516,10 +606,22 @@ function sendMessage() {
     },
     // onComplete: 回答完成时的回调
     () => {
-      console.log('=== 回答完成 ===')
-      isSending.value = false;
-      console.log('=== isSending设置为false ===')
+      console.log('=== 回答完成，正确进入onComplete ===')
+      
+      // 清除超时定时器
+      if (window.responseTimeout) {
+        clearTimeout(window.responseTimeout);
+        window.responseTimeout = null;
+      }
       
+      isSending.value = false;
+      console.log('=== onComplete中isSending设置为false ===')
+
+      // 清理控制器
+      if (window.currentController) {
+        window.currentController = null;
+      }
+
       // 确保状态更新
       nextTick(() => {
         console.log('=== 最终isSending状态 ===', isSending.value)
@@ -527,28 +629,51 @@ function sendMessage() {
       });
     }
   );
-
+  // 获取上下文引用文件
+  getContextFile(currentInput, selectedKnowledge.value.collectionName).then(response => {
+    console.log('=== 上下文文件 ===', response)
+    if (response && Array.isArray(response)) {
+      aiMessage.references = response.map(item => ({
+        fileName: item.file_name,
+        similarity: item.distance,
+        content: item.content
+      }));
+    }
+  }).catch(error => {
+    console.error('获取上下文文件失败:', error);
+  });
   // 如果用户快速发送多条消息，取消之前的请求
   if (window.currentController) {
     window.currentController.abort();
   }
-  window.currentController = eventSource;
+  if (window.responseTimeout) {
+    clearTimeout(window.responseTimeout);
+  }
   
-  // 添加超时机制，确保状态能够正确切换
-  setTimeout(() => {
+  window.currentController = eventSource;
+
+  // 设置初始超时定时器（30秒无任何响应才超时）
+  window.responseTimeout = setTimeout(() => {
     if (isSending.value) {
-      console.log('=== 超时强制结束 ===')
+      console.log('=== 初始连接超时强制结束 ===')
       isSending.value = false;
       if (window.currentController) {
         window.currentController.abort();
         window.currentController = null;
       }
+      window.responseTimeout = null;
     }
-  }, 10000); // 10秒超时
+  }, 30000); // 30秒超时
 }
 
 /** 停止生成回答 */
 function stopGenerating() {
+  // 清除超时定时器
+  if (window.responseTimeout) {
+    clearTimeout(window.responseTimeout);
+    window.responseTimeout = null;
+  }
+  
   if (window.currentController) {
     window.currentController.abort();
     window.currentController = null;
@@ -583,14 +708,43 @@ function formatMessage(content) {
   return content.replace(/\n/g, '<br>');
 }
 
-/** 格式化消息时间 */
-function formatMessageTime(time) {
-  if (!time) return '';
-  const date = new Date(time);
-  return date.toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit'
-  });
+/** 格式化相似度 */
+function formatSimilarity(similarity) {
+  // 如果相似度已经是百分比形式(>1)，直接返回
+  if (similarity > 1) {
+    return similarity.toFixed(1);
+  }
+  // 如果是0-1之间的值，转换为百分比
+  return (similarity * 100).toFixed(1);
+}
+
+/** 获取相似度的CSS类 */
+function getSimilarityClass(similarity) {
+  const percentage = similarity > 1 ? similarity : similarity * 100;
+  if (percentage >= 80) return 'high-similarity';
+  if (percentage >= 60) return 'medium-similarity';
+  return 'low-similarity';
+}
+
+/** 切换引用文件的展开/收起状态 */
+function toggleReferences(messageIndex) {
+  const message = chatMessages.value[messageIndex];
+  message.showAllReferences = !message.showAllReferences;
+}
+
+/** 获取要显示的引用文件列表 */
+function getDisplayedReferences(message) {
+  if (!message.references || message.references.length === 0) {
+    return [];
+  }
+  
+  // 如果引用文件数量 <= 3 或者设置为显示全部，则显示所有
+  if (message.references.length <= 3 || message.showAllReferences) {
+    return message.references;
+  }
+  
+  // 否则只显示前3个
+  return message.references.slice(0, 3);
 }
 
 /** 处理卡片操作 */
@@ -619,6 +773,14 @@ function handleDeleteFile(file) {
         fileLoading.value = true;
         listKnowledgeDocument(selectedKnowledge.value.collectionName).then(response => {
           fileList.value = response.data;
+          fileTotal.value = response.data.length;
+
+          // 如果当前页没有数据了，回到上一页
+          const maxPage = Math.ceil(fileTotal.value / filePageSize.value);
+          if (filePageNum.value > maxPage && maxPage > 0) {
+            filePageNum.value = maxPage;
+          }
+
           fileLoading.value = false;
         }).catch(error => {
           fileLoading.value = false;
@@ -645,6 +807,12 @@ function getFileType(fileName) {
   }
 }
 
+/** 文件分页处理 */
+function handleFilePagination(pagination) {
+  filePageNum.value = pagination.page;
+  filePageSize.value = pagination.limit;
+}
+
 // 取消按钮
 function cancel() {
   open.value = false;
@@ -786,6 +954,7 @@ function handleFileSuccess(response, file, fileList) {
     fileLoading.value = true;
     listKnowledgeDocument(selectedKnowledge.value.collectionName).then(response => {
       fileList.value = response.data;
+      fileTotal.value = response.data.length;
       fileLoading.value = false;
     }).catch(error => {
       fileLoading.value = false;
@@ -816,12 +985,16 @@ onMounted(() => {
   getList();
 });
 
-// 组件卸载时清理请求控制器
+// 组件卸载时清理请求控制器和超时定时器
 onUnmounted(() => {
   if (window.currentController) {
     window.currentController.abort();
     window.currentController = null;
   }
+  if (window.responseTimeout) {
+    clearTimeout(window.responseTimeout);
+    window.responseTimeout = null;
+  }
 });
 </script>
 
@@ -1025,7 +1198,7 @@ onUnmounted(() => {
   padding: 12px 16px;
   background: #f0f9ff;
   border-radius: 6px;
-  margin: 20px 20px 0 20px;
+  margin-bottom: 20px;
 
   .folder-icon {
     color: #409eff;
@@ -1156,6 +1329,94 @@ onUnmounted(() => {
     white-space: pre-wrap;
   }
 
+  .message-references {
+    margin: 12px 0;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 6px;
+    border-left: 3px solid #409eff;
+
+    .references-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 6px;
+      margin-bottom: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      color: #409eff;
+
+      .reference-icon {
+        font-size: 14px;
+      }
+
+      .toggle-references {
+        font-size: 11px;
+        color: #909399;
+        padding: 0;
+        height: auto;
+        
+        &:hover {
+          color: #409eff;
+        }
+      }
+    }
+
+    .references-list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .reference-item {
+      padding: 6px 8px;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 4px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+
+      .reference-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+
+        .reference-filename {
+          font-size: 12px;
+          color: #303133;
+          font-weight: 500;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+                 .reference-similarity {
+           font-size: 11px;
+           padding: 2px 6px;
+           border-radius: 10px;
+           white-space: nowrap;
+           font-weight: 500;
+           transition: all 0.3s ease;
+
+           &.high-similarity {
+             color: #67c23a;
+             background: #e1f3d8;
+           }
+
+           &.medium-similarity {
+             color: #e6a23c;
+             background: #fdf5e6;
+           }
+
+           &.low-similarity {
+             color: #f56c6c;
+             background: #fef0f0;
+           }
+         }
+      }
+    }
+  }
+
   .message-time {
     font-size: 12px;
     opacity: 0.7;
@@ -1170,8 +1431,16 @@ onUnmounted(() => {
 }
 
 @keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
+
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  51%,
+  100% {
+    opacity: 0;
+  }
 }
 
 .chat-input-area {
@@ -1202,15 +1471,15 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  
+
   .char-count {
     color: #409eff;
     font-weight: 500;
-    
+
     &.warning {
       color: #e6a23c;
     }
-    
+
     .error-text {
       color: #f56c6c;
       font-size: 11px;
@@ -1283,6 +1552,16 @@ onUnmounted(() => {
   }
 }
 
+// 文件列表分页样式
+.file-content {
+  :deep(.pagination-container) {
+    margin-top: 20px;
+    padding: 20px 0;
+    text-align: center;
+    background: transparent;
+  }
+}
+
 .empty-state {
   display: flex;
   flex-direction: column;
@@ -1315,7 +1594,7 @@ onUnmounted(() => {
 }
 
 :deep(.el-upload-dragger) {
-  width: 100%;
+  width: 350px;
 }
 
 :deep(.el-upload__text) {
@@ -1330,6 +1609,47 @@ onUnmounted(() => {
   margin-top: 7px;
 }
 
+// 修复上传文件列表中文件名过长的问题
+:deep(.el-upload-list) {
+  max-width: 100%;
+
+  .el-upload-list__item {
+    max-width: 100%;
+    overflow: hidden;
+
+    .el-upload-list__item-name {
+      width: 350px; // 为删除按钮等留出空间
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+
+// 修复拖拽区域内文件名显示问题
+:deep(.el-upload-dragger) {
+  .el-upload-list {
+    .el-upload-list__item {
+      margin: 0 10px 10px 10px;
+      padding: 8px 12px;
+      background: #f5f7fa;
+      border-radius: 4px;
+
+      .el-upload-list__item-name {
+        color: #606266;
+        font-size: 13px;
+        max-width: calc(100% - 60px);
+        word-wrap: break-word;
+        word-break: break-all;
+        white-space: normal;
+        line-height: 1.4;
+      }
+    }
+  }
+}
+
 // 响应式设计
 @media (max-width: 1200px) {
   .main-content {
@@ -1375,6 +1695,35 @@ onUnmounted(() => {
   .message-content {
     max-width: 85%;
   }
+
+  .message-references {
+    .references-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+
+      .toggle-references {
+        font-size: 10px;
+      }
+    }
+
+    .reference-item {
+      .reference-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+
+        .reference-filename {
+          font-size: 11px;
+        }
+
+        .reference-similarity {
+          font-size: 10px;
+          align-self: flex-end;
+        }
+      }
+    }
+  }
 }
 
 // Loading动画样式