新增知识库RAG问答逐字回答

llm-back/ruoyi-admin/src/main/resources/application.yml

@@ -16,7 +16,7 @@ cmc:
 # 开发环境配置
 server:
   # 服务器的HTTP端口，默认为8080
-  port: 8080
+  port: 8081
   servlet:
     # 应用的访问路径
     context-path: /

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

@@ -1,10 +1,11 @@
 /*
  * @Author: ysh
  * @Date: 2025-07-08 16:43:22
- * @LastEditors: 
- * @LastEditTime: 2025-07-08 16:45:06
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-07-11 14:15:01
  */
 import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
 
 // 查询cmc聊天记录列表
 export function getAnswer(question, collectionName) {
@@ -13,4 +14,167 @@ export function getAnswer(question, collectionName) {
     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
+  const url = `${baseURL}/llm/rag/answer?question=${encodeURIComponent(question)}&collectionName=${encodeURIComponent(collectionName)}`
+
+  const controller = new AbortController()
+
+  fetch(url, {
+    method: 'GET',
+    headers: {
+      'Authorization': 'Bearer ' + getToken(),
+      'Accept': 'application/json, text/event-stream',
+      'Cache-Control': 'no-cache'
+    },
+    signal: controller.signal
+  }).then(response => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+
+    function readStream() {
+      return reader.read().then(({ done, value }) => {
+        if (done) {
+          console.log('=== 流式读取完成 ===')
+          // 处理缓冲区中剩余的数据
+          if (buffer.trim()) {
+            console.log('=== 处理剩余缓冲区数据 ===', buffer)
+            const lines = buffer.split(/\r?\n/)
+            lines.forEach(line => {
+              line = line.trim()
+              if (!line || line.startsWith(':')) return
+
+              console.log('处理剩余数据行:', line)
+
+              // 尝试提取JSON数据
+              let jsonData = null
+
+              if (line.startsWith('data: ')) {
+                try {
+                  jsonData = JSON.parse(line.slice(6))
+                  console.log('解析的剩余SSE数据:', jsonData)
+                } catch (error) {
+                  console.error('解析剩余SSE数据失败:', error, line)
+                }
+              } else if (line.startsWith('data:')) {
+                try {
+                  jsonData = JSON.parse(line.slice(5))
+                  console.log('解析的剩余SSE数据(无空格):', jsonData)
+                } catch (error) {
+                  console.error('解析剩余SSE数据失败(无空格):', error, line)
+                }
+              } else {
+                try {
+                  jsonData = JSON.parse(line)
+                  console.log('解析的剩余JSON数据:', jsonData)
+                } catch (error) {
+                  console.error('解析剩余JSON数据失败:', error, line)
+                }
+              }
+
+              // 处理解析成功的数据
+              if (jsonData) {
+                console.log('=== 解析成功的剩余数据 ===', jsonData)
+
+                if (jsonData.resultContent) {
+                  console.log('=== 准备发送剩余resultContent ===', jsonData.resultContent)
+                  onMessage(jsonData.resultContent)
+                } else if (typeof jsonData === 'string') {
+                  console.log('=== 准备发送剩余字符串 ===', jsonData)
+                  onMessage(jsonData)
+                } else {
+                  console.log('=== 剩余数据格式不匹配，跳过content字段 ===', jsonData)
+                }
+              }
+            })
+          }
+
+          onComplete()
+          return
+        }
+
+        const chunk = decoder.decode(value, { stream: true })
+        console.log('接收到原始数据块:', chunk)
+        buffer += chunk
+
+        // 处理可能包含\r\n的情况
+        const lines = buffer.split(/\r?\n/)
+
+        // 保留最后一行，因为它可能不完整
+        buffer = lines.pop() || ''
+
+        console.log('处理的行数:', lines.length)
+        lines.forEach(line => {
+          line = line.trim()
+          if (!line || line.startsWith(':')) return
+
+          console.log('处理数据行:', line)
+
+          // 尝试提取JSON数据
+          let jsonData = null
+
+          if (line.startsWith('data: ')) {
+            try {
+              jsonData = JSON.parse(line.slice(6))
+              console.log('解析的SSE数据:', jsonData)
+            } catch (error) {
+              console.error('解析SSE数据失败:', error, line)
+            }
+          } else if (line.startsWith('data:')) {
+            try {
+              jsonData = JSON.parse(line.slice(5))
+              console.log('解析的SSE数据(无空格):', jsonData)
+            } catch (error) {
+              console.error('解析SSE数据失败(无空格):', error, line)
+            }
+          } else {
+            try {
+              jsonData = JSON.parse(line)
+              console.log('解析的JSON数据:', jsonData)
+            } catch (error) {
+              console.error('解析JSON数据失败:', error, line)
+            }
+          }
+
+          // 处理解析成功的数据
+          if (jsonData) {
+            console.log('=== 解析成功的数据 ===', jsonData)
+
+            if (jsonData.resultContent) {
+              console.log('=== 准备发送resultContent ===', jsonData.resultContent)
+              onMessage(jsonData.resultContent)
+            } else if (typeof jsonData === 'string') {
+              console.log('=== 准备发送字符串 ===', jsonData)
+              onMessage(jsonData)
+            } else {
+              console.log('=== 数据格式不匹配，跳过content字段 ===', jsonData)
+            }
+          }
+        })
+
+        return readStream()
+      })
+    }
+
+    return readStream()
+  })
+    .catch(error => {
+      if (error.name === 'AbortError') {
+        console.log('请求被取消')
+        return
+      }
+      console.error('流式请求错误:', error)
+      onError(new Error('网络连接失败，请检查网络连接后重试'))
+    })
+
+  // 返回controller以便外部可以取消请求
+  return controller
 }

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

@@ -167,7 +167,8 @@
             </div>
 
             <div v-else class="message-list">
-              <div v-for="(message, index) in chatMessages" :key="index" class="message-item" :class="message.type">
+              <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">
                     <el-icon>
@@ -187,7 +188,7 @@
               </div>
 
               <!-- AI回答loading状态 -->
-              <div v-if="isSending" 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>
@@ -211,18 +212,26 @@
           <!-- 输入区域 -->
           <div class="chat-input-area">
             <div class="input-container">
-              <el-input v-model="chatInput" type="textarea" :rows="3" placeholder="请输入您的问题..."
+              <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 type="primary" :icon="Promotion" @click="sendMessage" :loading="isSending"
-                  :disabled="!chatInput.trim() || isSending">
+                <el-button v-if="!isSending" type="primary" :icon="Promotion" @click="sendMessage"
+                  :disabled="!chatInput.trim() || chatInput.length > 2000">
                   发送
                 </el-button>
+                <el-button v-else type="danger" :icon="Delete" @click="stopGenerating">
+                  停止生成
+                </el-button>
               </div>
             </div>
             <div class="input-tips">
               <span>按 Enter 发送，Ctrl + Enter 换行</span>
+              <span v-if="chatInput" class="char-count" :class="{ 'warning': chatInput.length > 1500 }">
+                {{ chatInput.length }} 字符
+                <span v-if="chatInput.length > 2000" class="error-text">(超出限制)</span>
+              </span>
             </div>
           </div>
         </div>
@@ -285,10 +294,10 @@
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, onMounted, nextTick, watch, computed } from 'vue'
+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 } from '@/api/llm/rag';
+import { getAnswer, getAnswerStream } from '@/api/llm/rag';
 import { getToken } from "@/utils/auth";
 
 const { proxy } = getCurrentInstance();
@@ -378,6 +387,11 @@ function getList() {
 
 /** 选择知识库 */
 function selectKnowledge(knowledge) {
+  // 如果正在生成回答，先停止
+  if (isSending.value) {
+    stopGenerating();
+  }
+  
   selectedKnowledge.value = knowledge;
   // 重置聊天模式
   isChatMode.value = false;
@@ -400,6 +414,11 @@ function handleChat(knowledge) {
     proxy.$modal.msgWarning("请先选择要对话的知识库");
     return;
   }
+  // 如果正在生成回答，先停止
+  if (isSending.value) {
+    stopGenerating();
+  }
+  
   isChatMode.value = true;
   chatMessages.value = [];
   chatInput.value = '';
@@ -411,12 +430,22 @@ function handleChat(knowledge) {
 
 /** 切换到文件模式 */
 function switchToFileMode() {
+  // 如果正在生成回答，先停止
+  if (isSending.value) {
+    stopGenerating();
+  }
+  
   isChatMode.value = false;
 }
 
 /** 发送消息 */
 function sendMessage() {
-  if (!chatInput.value.trim() || isSending.value) return;
+  if (!chatInput.value.trim()) return;
+  
+  // 如果正在发送，先停止当前请求
+  if (isSending.value) {
+    stopGenerating();
+  }
 
   const userMessage = {
     type: 'user',
@@ -434,37 +463,97 @@ function sendMessage() {
     scrollToBottom();
   });
 
-  // 延迟一点时间让loading动画显示
-  setTimeout(() => {
-    getAnswer(currentInput, selectedKnowledge.value.collectionName).then(response => {
-      console.log(response);
-      const aiMessage = {
-        type: 'ai',
-        content: response.resultContent,
-        time: new Date()
-      };
-      chatMessages.value.push(aiMessage);
-      isSending.value = false;
+  // 创建AI消息占位符
+  const aiMessage = reactive({
+    type: 'ai',
+    content: '',
+    time: new Date()
+  });
+  chatMessages.value.push(aiMessage);
+
+  // 使用流式API获取回答
+  const eventSource = getAnswerStream(
+    currentInput, 
+    selectedKnowledge.value.collectionName,
+        // onMessage: 接收到每个字符时的回调
+    (content) => {
+      // 处理接收到的内容
+      console.log('=== 前端接收到内容 ===', content)
+      
+      // 清理内容中的</think>标签
+      let cleanContent = content.replace(/<\/?think>/g, '');
+      
+      // 如果内容为空或只包含空白字符，跳过
+      if (!cleanContent.trim()) {
+        return;
+      }
+      
+      // 直接替换内容，避免重复叠加
+      aiMessage.content = cleanContent;
+      
+      console.log('=== 清理后的内容 ===', cleanContent)
+      console.log('=== 当前AI消息完整内容 ===', aiMessage.content)
+      
       // 滚动到底部
       nextTick(() => {
         scrollToBottom();
       });
-    }).catch(error => {
-      console.log(error);
-      // 显示错误消息
-      const errorMessage = {
-        type: 'ai',
-        content: '抱歉，我暂时无法回答您的问题，请稍后再试。',
-        time: new Date()
-      };
-      chatMessages.value.push(errorMessage);
+    },
+    // onError: 发生错误时的回调
+    (error) => {
+      console.error('=== 流式回答错误 ===', error);
+      if (aiMessage.content === '') {
+        aiMessage.content = '抱歉，我暂时无法回答您的问题，请稍后再试。';
+      } else {
+        aiMessage.content += '\n\n[回答生成中断]';
+      }
       isSending.value = false;
+      console.log('=== 错误时isSending设置为false ===')
       // 滚动到底部
       nextTick(() => {
         scrollToBottom();
       });
-    });
-  }, 300);
+    },
+    // onComplete: 回答完成时的回调
+    () => {
+      console.log('=== 回答完成 ===')
+      isSending.value = false;
+      console.log('=== isSending设置为false ===')
+      
+      // 确保状态更新
+      nextTick(() => {
+        console.log('=== 最终isSending状态 ===', isSending.value)
+        scrollToBottom();
+      });
+    }
+  );
+
+  // 如果用户快速发送多条消息，取消之前的请求
+  if (window.currentController) {
+    window.currentController.abort();
+  }
+  window.currentController = eventSource;
+  
+  // 添加超时机制，确保状态能够正确切换
+  setTimeout(() => {
+    if (isSending.value) {
+      console.log('=== 超时强制结束 ===')
+      isSending.value = false;
+      if (window.currentController) {
+        window.currentController.abort();
+        window.currentController = null;
+      }
+    }
+  }, 10000); // 10秒超时
+}
+
+/** 停止生成回答 */
+function stopGenerating() {
+  if (window.currentController) {
+    window.currentController.abort();
+    window.currentController = null;
+  }
+  isSending.value = false;
 }
 
 /** 滚动到底部 */
@@ -649,6 +738,10 @@ function handleDelete(row) {
     getList();
     // 如果删除的是当前选中的知识库，清空选择
     if (selectedKnowledge.value?.collectionName === collectionNames) {
+      // 如果正在生成回答，先停止
+      if (isSending.value) {
+        stopGenerating();
+      }
       selectedKnowledge.value = null;
       fileList.value = [];
       isChatMode.value = false;
@@ -723,6 +816,14 @@ function cancelUpload() {
 onMounted(() => {
   getList();
 });
+
+// 组件卸载时清理请求控制器
+onUnmounted(() => {
+  if (window.currentController) {
+    window.currentController.abort();
+    window.currentController = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>
@@ -1053,6 +1154,7 @@ onMounted(() => {
 
   .message-text {
     margin-bottom: 8px;
+    white-space: pre-wrap;
   }
 
   .message-time {
@@ -1061,6 +1163,18 @@ onMounted(() => {
   }
 }
 
+// 打字机效果的光标 - 只在正在生成时显示
+.message-bubble.ai.typing .message-text:after {
+  content: '|';
+  animation: blink 1s infinite;
+  color: #409eff;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
 .chat-input-area {
   padding: 20px;
   border-top: 1px solid #e4e7ed;
@@ -1086,6 +1200,23 @@ onMounted(() => {
   text-align: center;
   font-size: 12px;
   color: #999;
+  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;
+    }
+  }
 }
 
 .file-list {

llm-ui/vite.config.js

@@ -1,8 +1,8 @@
 /*
  * @Author: wrh
  * @Date: 2025-04-07 12:47:46
- * @LastEditors: wrh
- * @LastEditTime: 2025-04-08 09:02:00
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-07-11 11:03:27
  */
 import { defineConfig, loadEnv } from 'vite'
 import path from 'path'
@@ -31,13 +31,13 @@ export default defineConfig(({ mode, command }) => {
     },
     // vite 相关配置
     server: {
-      port: 81,
+      port: 84,
       host: true,
       open: true,
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://localhost:8080',
+          target: 'http://localhost:8081',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }