新增知识库对话界面

llm-back/ruoyi-llm/src/main/java/com/ruoyi/web/llm/controller/RagController.java

@@ -1,3 +1,9 @@
+/*
+ * @Author: ysh
+ * @Date: 2025-07-08 15:10:42
+ * @LastEditors: 
+ * @LastEditTime: 2025-07-09 11:37:02
+ */
 package com.ruoyi.web.llm.controller;
 
 import com.ruoyi.web.llm.service.ILangChainMilvusService;
@@ -43,7 +49,7 @@ public class RagController extends BaseController
     public AjaxResult answer(String question, String collectionName) throws IOException {
 
         List<String> contexts = langChainMilvusService.retrieveFromMilvus(milvusClient, embeddingModel, collectionName, question, 1);
-        String result = langChainMilvusService.generateAnswerWithRag(question, contexts, "http://192.168.28.188:8080/generate");
+        String result = langChainMilvusService.generateAnswerWithRag(question, contexts, "http://192.168.28.188:8000/generate");
         return success(result);
     }
 

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

@@ -29,5 +29,5 @@ public interface ILangChainMilvusService {
     /**
      * 调用LLM生成回答
      */
-    public String generateAnswer(String llmServiceUrl, String question) throws IOException;
+    public String generateAnswer(String question, String llmServiceUrl) throws IOException;
 }

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

@@ -1,3 +1,9 @@
+/*
+ * @Author: ysh
+ * @Date: 2025-07-08 15:10:42
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-07-09 11:39:18
+ */
 package com.ruoyi.web.llm.service.impl;
 
 import com.alibaba.fastjson2.JSONObject;
@@ -157,14 +163,14 @@ public class LangChainMilvusServiceImpl implements ILangChainMilvusService
         }
         sb.append("问题: ").append(question).append("\n回答: ");
         // 构建带动态参数的URL
-        return generateAnswer(llmServiceUrl, sb.toString());
+        return generateAnswer(sb.toString(),llmServiceUrl);
     }
 
     /**
      * 调用LLM生成回答
      */
     @Override
-    public String generateAnswer(String llmServiceUrl, String prompt) throws IOException {
+    public String generateAnswer(String prompt, String llmServiceUrl) throws IOException {
         HttpUrl url = HttpUrl.parse(llmServiceUrl)
                 .newBuilder()
                 .addQueryParameter("prompt", prompt)

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

@@ -66,7 +66,6 @@ export function listKnowledgeDocument(collectionName, fileType) {
   })
 }
 
-
 // 删除知识库文件
 export function deleteKnowledgeFile(fileName,collectionName) {
   return request({
@@ -74,4 +73,4 @@ export function deleteKnowledgeFile(fileName,collectionName) {
     method: 'delete',
     params: { fileName, collectionName }
   })
-}
+}

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

@@ -0,0 +1,16 @@
+/*
+ * @Author: ysh
+ * @Date: 2025-07-08 16:43:22
+ * @LastEditors: 
+ * @LastEditTime: 2025-07-08 16:45:06
+ */
+import request from '@/utils/request'
+
+// 查询cmc聊天记录列表
+export function getAnswer(question, collectionName) {
+  return request({
+    url: '/llm/rag/answer',
+    method: 'get',
+    params: { question, collectionName }
+  })
+}

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

@@ -80,19 +80,27 @@
         </div>
       </div>
 
-      <!-- 右侧文件列表 -->
+      <!-- 右侧面板 -->
       <div class="right-panel">
         <div class="panel-header">
-          <h3>文件列表</h3>
+          <h3>{{ isChatMode ? '知识库对话' : '文件列表' }}</h3>
           <div class="header-actions">
-            <el-button type="primary" :icon="Upload" @click="handleUpload(selectedKnowledge)"
+            <el-button v-if="!isChatMode" type="primary" :icon="ChatRound" @click="handleChat(selectedKnowledge)"
+              :disabled="!selectedKnowledge" v-hasPermi="['llm:knowledge:chat']">
+              开始对话
+            </el-button>
+            <el-button v-if="!isChatMode" type="primary" :icon="Upload" @click="handleUpload(selectedKnowledge)"
               :disabled="!selectedKnowledge" v-hasPermi="['llm:knowledge:upload']">
               上传文件
             </el-button>
+            <el-button v-if="isChatMode" type="default" :icon="Document" @click="switchToFileMode">
+              返回文件列表
+            </el-button>
           </div>
         </div>
 
-        <div class="file-content" v-loading="fileLoading">
+        <!-- 文件列表模式 -->
+        <div v-if="!isChatMode" class="file-content" v-loading="fileLoading">
           <div v-if="selectedKnowledge" class="selected-knowledge">
             <el-icon class="folder-icon">
               <Folder />
@@ -136,6 +144,88 @@
             </div>
           </div>
         </div>
+
+        <!-- 聊天模式 -->
+        <div v-else class="chat-content">
+          <div v-if="selectedKnowledge" class="selected-knowledge">
+            <el-icon class="folder-icon">
+              <Folder />
+            </el-icon>
+            <span class="knowledge-name">{{ selectedKnowledge.collectionName }}</span>
+            <span class="chat-mode-badge">对话模式</span>
+          </div>
+
+          <!-- 聊天消息区域 -->
+          <div class="chat-messages" ref="chatMessagesRef">
+            <div v-if="chatMessages.length === 0" class="welcome-message">
+              <div class="welcome-content">
+                <div class="welcome-icon">🤖</div>
+                <h3>知识库助手</h3>
+                <p>我是基于「{{ selectedKnowledge?.collectionName }}」知识库的AI助手</p>
+                <p>您可以询问关于该知识库内容的问题，我会为您提供准确的答案</p>
+              </div>
+            </div>
+
+            <div v-else class="message-list">
+              <div v-for="(message, index) in chatMessages" :key="index" class="message-item" :class="message.type">
+                <div class="message-avatar">
+                  <div v-if="message.type === 'user'" class="user-avatar">
+                    <el-icon>
+                      <User />
+                    </el-icon>
+                  </div>
+                  <div v-else class="ai-avatar">
+                    🤖
+                  </div>
+                </div>
+                <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>
+                  </div>
+                </div>
+              </div>
+
+              <!-- AI回答loading状态 -->
+              <div v-if="isSending" class="message-item ai">
+                <div class="message-avatar">
+                  <div class="ai-avatar">
+                    <el-icon>
+                      <ChatDotRound />
+                    </el-icon>
+                  </div>
+                </div>
+                <div class="message-content">
+                  <div class="message-bubble ai">
+                    <div class="loading-dots">
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 输入区域 -->
+          <div class="chat-input-area">
+            <div class="input-container">
+              <el-input v-model="chatInput" type="textarea" :rows="3" placeholder="请输入您的问题..."
+                @keydown.enter="handleEnter" @keydown.ctrl.enter="handleCtrlEnter" :disabled="isSending"
+                resize="none" />
+              <div class="input-actions">
+                <el-button type="primary" :icon="Promotion" @click="sendMessage" :loading="isSending"
+                  :disabled="!chatInput.trim() || isSending">
+                  发送
+                </el-button>
+              </div>
+            </div>
+            <div class="input-tips">
+              <span>按 Enter 发送，Ctrl + Enter 换行</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -196,8 +286,9 @@
 
 <script setup>
 import { ref, reactive, getCurrentInstance, onMounted, nextTick, watch, computed } from 'vue'
-import { Search, Refresh, Plus, Edit, Delete, Upload, UploadFilled, Folder, MoreFilled, FolderOpened, Document } from '@element-plus/icons-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 } from '@/api/llm/rag';
 import { getToken } from "@/utils/auth";
 
 const { proxy } = getCurrentInstance();
@@ -217,6 +308,13 @@ const isModify = ref(false);
 const selectedKnowledge = ref(null);
 const fileList = ref([]);
 
+// 聊天相关状态
+const isChatMode = ref(false);
+const chatMessages = ref([]);
+const chatInput = ref('');
+const isSending = ref(false);
+const chatMessagesRef = ref(null);
+
 // 表单数据
 const form = reactive({
   collectionName: '',
@@ -281,6 +379,11 @@ function getList() {
 /** 选择知识库 */
 function selectKnowledge(knowledge) {
   selectedKnowledge.value = knowledge;
+  // 重置聊天模式
+  isChatMode.value = false;
+  chatMessages.value = [];
+  chatInput.value = '';
+
   fileLoading.value = true;
   listKnowledgeDocument(knowledge.collectionName).then(response => {
     fileList.value = response.data;
@@ -291,7 +394,115 @@ function selectKnowledge(knowledge) {
   });
 }
 
+/** 开始对话 */
+function handleChat(knowledge) {
+  if (!knowledge) {
+    proxy.$modal.msgWarning("请先选择要对话的知识库");
+    return;
+  }
+  isChatMode.value = true;
+  chatMessages.value = [];
+  chatInput.value = '';
+  // 滚动到底部
+  nextTick(() => {
+    scrollToBottom();
+  });
+}
 
+/** 切换到文件模式 */
+function switchToFileMode() {
+  isChatMode.value = false;
+}
+
+/** 发送消息 */
+function sendMessage() {
+  if (!chatInput.value.trim() || isSending.value) return;
+
+  const userMessage = {
+    type: 'user',
+    content: chatInput.value.trim(),
+    time: new Date()
+  };
+
+  chatMessages.value.push(userMessage);
+  const currentInput = chatInput.value;
+  chatInput.value = '';
+  isSending.value = true;
+
+  // 滚动到底部
+  nextTick(() => {
+    scrollToBottom();
+  });
+
+  // 延迟一点时间让loading动画显示
+  setTimeout(() => {
+    getAnswer(currentInput, selectedKnowledge.value.collectionName).then(response => {
+      console.log(response);
+      const aiMessage = {
+        type: 'ai',
+        content: response.msg,
+        time: new Date()
+      };
+      chatMessages.value.push(aiMessage);
+      isSending.value = false;
+      // 滚动到底部
+      nextTick(() => {
+        scrollToBottom();
+      });
+    }).catch(error => {
+      console.log(error);
+      // 显示错误消息
+      const errorMessage = {
+        type: 'ai',
+        content: '抱歉，我暂时无法回答您的问题，请稍后再试。',
+        time: new Date()
+      };
+      chatMessages.value.push(errorMessage);
+      isSending.value = false;
+      // 滚动到底部
+      nextTick(() => {
+        scrollToBottom();
+      });
+    });
+  }, 300);
+}
+
+/** 滚动到底部 */
+function scrollToBottom() {
+  if (chatMessagesRef.value) {
+    const container = chatMessagesRef.value;
+    container.scrollTop = container.scrollHeight;
+  }
+}
+
+/** 处理Enter键 */
+function handleEnter(event) {
+  if (!event.shiftKey) {
+    event.preventDefault();
+    sendMessage();
+  }
+}
+
+/** 处理Ctrl+Enter键 */
+function handleCtrlEnter() {
+  chatInput.value += '\n';
+}
+
+/** 格式化消息内容 */
+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 handleCardAction(command) {
@@ -375,7 +586,6 @@ function resetQuery() {
   handleQuery();
 }
 
-
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
@@ -441,6 +651,8 @@ function handleDelete(row) {
     if (selectedKnowledge.value?.collectionName === collectionNames) {
       selectedKnowledge.value = null;
       fileList.value = [];
+      isChatMode.value = false;
+      chatMessages.value = [];
     }
     proxy.$modal.msgSuccess("删除成功");
   }).catch((error) => {
@@ -698,6 +910,14 @@ onMounted(() => {
   overflow-y: auto;
 }
 
+// 聊天模式样式
+.chat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .selected-knowledge {
   display: flex;
   align-items: center;
@@ -705,7 +925,7 @@ onMounted(() => {
   padding: 12px 16px;
   background: #f0f9ff;
   border-radius: 6px;
-  margin-bottom: 20px;
+  margin: 20px 20px 0 20px;
 
   .folder-icon {
     color: #409eff;
@@ -716,6 +936,156 @@ onMounted(() => {
     font-weight: 600;
     color: #303133;
   }
+
+  .chat-mode-badge {
+    background: #409eff;
+    color: white;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    margin-left: auto;
+  }
+}
+
+.chat-messages {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  background: #fafbfc;
+}
+
+.welcome-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+
+  .welcome-content {
+    max-width: 400px;
+
+    .welcome-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+
+    h3 {
+      margin: 0 0 12px 0;
+      color: #303133;
+      font-size: 18px;
+    }
+
+    p {
+      margin: 0 0 8px 0;
+      color: #606266;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+  }
+}
+
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.message-item {
+  display: flex;
+  gap: 12px;
+
+  &.user {
+    flex-direction: row-reverse;
+
+    .message-content {
+      align-items: flex-end;
+    }
+
+    .message-bubble {
+      background: #409eff;
+      color: white;
+      border-radius: 18px 18px 4px 18px;
+    }
+  }
+
+  &.ai {
+    .message-bubble {
+      background: white;
+      color: #303133;
+      border: 1px solid #e4e7ed;
+      border-radius: 18px 18px 18px 4px;
+    }
+  }
+}
+
+.message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .user-avatar {
+    // background: #409eff;
+    color: #409eff;
+    font-size: 18px;
+  }
+
+  .ai-avatar {
+    // background: #67c23a;
+    color: white;
+    font-size: 18px;
+  }
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+
+.message-bubble {
+  padding: 12px 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .message-text {
+    margin-bottom: 8px;
+  }
+
+  .message-time {
+    font-size: 12px;
+    opacity: 0.7;
+  }
+}
+
+.chat-input-area {
+  padding: 20px;
+  border-top: 1px solid #e4e7ed;
+  background: white;
+}
+
+.input-container {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+
+  .el-textarea {
+    flex: 1;
+  }
+
+  .input-actions {
+    flex-shrink: 0;
+  }
+}
+
+.input-tips {
+  margin-top: 8px;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
 }
 
 .file-list {
@@ -863,5 +1233,53 @@ onMounted(() => {
   .file-content {
     padding: 16px;
   }
+
+  .chat-messages {
+    padding: 16px;
+  }
+
+  .chat-input-area {
+    padding: 16px;
+  }
+
+  .message-content {
+    max-width: 85%;
+  }
+}
+
+// Loading动画样式
+.loading-dots {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+
+  span {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #ccc;
+    animation: loading 1.4s infinite ease-in-out;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+}
+
+@keyframes loading {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
 }
 </style>