大模型问答及知识库回答流式输出

oa-back/ruoyi-agent/pom.xml

             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
-                <version>2.7.18</version>
+                <version>2.5.15</version>
                 <configuration>
                     <mainClass>com.ruoyi.agent.RuoYiAgentApplication</mainClass>
                 </configuration>

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

 import com.alibaba.fastjson2.JSONObject;
 import com.ruoyi.web.llm.service.ILangChainMilvusService;
 import com.ruoyi.common.core.controller.BaseController;
-import org.noear.solon.ai.chat.message.AssistantMessage;
+import org.noear.solon.core.util.MimeType;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
     /**
      * 调用LLM+RAG（知识库）生成回答
      */
-    @GetMapping("/answer")
-    public Flux<AssistantMessage> answerWithCollection(String collectionName, String topicId, String question) throws IOException {
+    @GetMapping(value = "/answer", produces = MimeType.TEXT_EVENT_STREAM_UTF8_VALUE)
+    public Flux<String> answerWithCollection(String collectionName, String topicId, String question) throws IOException {
         List<JSONObject> contexts = langChainMilvusService.retrieveFromMilvus(collectionName, question, 10);
         return langChainMilvusService.generateAnswerWithCollection(topicId, question, contexts);
     }

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

 
 import com.ruoyi.common.core.controller.BaseController;
 import com.ruoyi.web.llm.service.ISessionService;
-import org.noear.solon.ai.chat.message.AssistantMessage;
 import org.noear.solon.core.util.MimeType;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
      * 调用LLM+RAG（外部文件）生成回答
      */
     @GetMapping(value = "/answerWithDocument", produces = MimeType.TEXT_EVENT_STREAM_UTF8_VALUE)
-    public Flux<AssistantMessage> answerWithDocument(String topicId, String chatId, String question) throws Exception
+    public Flux<String> answerWithDocument(String topicId, String chatId, String question) throws Exception
     {
         return sessionService.answerWithDocument(topicId, chatId, question);
     }
-
 }
 

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

 package com.ruoyi.web.llm.service;
 
 import com.alibaba.fastjson2.JSONObject;
-import org.noear.solon.ai.chat.message.AssistantMessage;
 import org.springframework.web.multipart.MultipartFile;
 import reactor.core.publisher.Flux;
 
      * 调用LLM生成回答
      * @return
      */
-    public Flux<AssistantMessage> generateAnswer(String topicId, String question);
+    public Flux<String> generateAnswer(String topicId, String question);
 
     /**
      * 调用LLM+RAG（知识库）生成回答
      * @return
      */
-    public Flux<AssistantMessage> generateAnswerWithCollection(String topicId, String question, List<JSONObject> contexts);
+    public Flux<String> generateAnswerWithCollection(String topicId, String question, List<JSONObject> contexts);
 
     /**
      * 调用LLM+RAG（外部文件）生成回答
      * @return
      */
-    public Flux<AssistantMessage> generateAnswerWithDocument(String topicId, String chatId, String question) throws Exception;
+    public Flux<String> generateAnswerWithDocument(String topicId, String chatId, String question) throws Exception;
 
     /**
      * 调用LLM+RAG（外部文件+知识库）生成回答
      * @return
      */
-    public Flux<AssistantMessage> generateAnswerWithDocumentAndCollection(String topicId, String question,  List<JSONObject> requests) throws Exception;
+    public Flux<String> generateAnswerWithDocumentAndCollection(String topicId, String question,  List<JSONObject> requests) throws Exception;
 
     /**
      * 获取二级标题下三级标题列表

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

 package com.ruoyi.web.llm.service;
 
-import org.noear.solon.ai.chat.message.AssistantMessage;
 import reactor.core.publisher.Flux;
 
 public interface ISessionService {
     /**
      * 调用LLM+RAG（外部文件）生成回答
      */
-    Flux<AssistantMessage> answerWithDocument(String topicId, String chatId, String question) throws Exception;
+    Flux<String> answerWithDocument(String topicId, String chatId, String question) throws Exception;
 
 }

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

 import org.noear.solon.ai.chat.ChatModel;
 import org.noear.solon.ai.chat.ChatResponse;
 import org.noear.solon.ai.chat.ChatSession;
-import org.noear.solon.ai.chat.message.AssistantMessage;
 import org.noear.solon.ai.chat.message.ChatMessage;
+import org.noear.solon.ai.chat.prompt.Prompt;
 import org.noear.solon.ai.chat.session.InMemoryChatSession;
 import org.reactivestreams.Publisher;
 import org.springframework.beans.factory.annotation.Autowired;
         if (milvusServiceUrl == null || milvusServiceUrl.isEmpty()) {
             throw new IllegalArgumentException("milvusServiceUrl 配置不能为空");
         }
-//        milvusClient = new MilvusClientV2(
-//                ConnectConfig.builder()
-//                        .uri(milvusServiceUrl)
-//                        .build());
+       milvusClient = new MilvusClientV2(
+               ConnectConfig.builder()
+                       .uri(milvusServiceUrl)
+                       .build());
     }
     
     @PostConstruct
      * @return
      */
     @Override
-    public Flux<AssistantMessage> generateAnswer(String topicId, String prompt) {
+    public Flux<String> generateAnswer(String topicId, String prompt) {
         List<ChatMessage> messages = new ArrayList<>();
         if (topicId != null) {
             CmcChat cmcChat = new CmcChat();
         }
         messages.add(ChatMessage.ofUser(prompt));
         ChatSession chatSession =  InMemoryChatSession.builder().messages(messages).build();
-        Publisher<ChatResponse> publisher = chatModel.prompt(chatSession).stream();
+        Prompt prompt1 = Prompt.of(prompt).attrPut("session", chatSession);
+        Publisher<ChatResponse> publisher = chatModel.prompt(prompt1).stream();
         return Flux.from(publisher)
-                .map(response -> response.lastChoice().getMessage());
+                .map(response -> response.lastChoice().getMessage().getContent())
+                .map(this::toSseDataFrame)
+                .concatWith(Flux.just("data: [DONE]\n\n"));
+    }
+
+    private String toSseDataFrame(String data) {
+        if (data == null) {
+            return "data: \n\n";
+        }
+        // SSE 要求每一行都以 data: 开头
+        String normalized = data.replace("\r\n", "\n");
+        StringBuilder sb = new StringBuilder(normalized.length() + 16);
+        sb.append("data: ");
+        int start = 0;
+        while (true) {
+            int idx = normalized.indexOf('\n', start);
+            if (idx < 0) {
+                sb.append(normalized.substring(start));
+                break;
+            }
+            sb.append(normalized, start, idx);
+            sb.append("\n");
+            sb.append("data: ");
+            start = idx + 1;
+        }
+        sb.append("\n\n");
+        return sb.toString();
     }
 
     /**
      * @return
      */
     @Override
-    public Flux<AssistantMessage> generateAnswerWithCollection(String topicId, String question, List<JSONObject> contexts) {
+    public Flux<String> generateAnswerWithCollection(String topicId, String question, List<JSONObject> contexts) {
         StringBuilder sb = new StringBuilder();
         sb.append("问题: ").append(question).append("\n\n");
         sb.append("根据以下上下文回答问题：\n\n");
      * 调用LLM生成回答
      */
     @Override
-    public Flux<AssistantMessage> generateAnswerWithDocument(String topicId, String chatId, String question) throws Exception {
+    public Flux<String> generateAnswerWithDocument(String topicId, String chatId, String question) throws Exception {
         CmcDocument cmcDocument = new CmcDocument();
         cmcDocument.setChatId(chatId);
         List<CmcDocument> documentList = cmcDocumentService.selectCmcDocumentList(cmcDocument);
      * 调用LLM生成回答
      */
     @Override
-    public Flux<AssistantMessage> generateAnswerWithDocumentAndCollection(String topicId, String question, List<JSONObject> contexts) throws Exception {
+    public Flux<String> generateAnswerWithDocumentAndCollection(String topicId, String question, List<JSONObject> contexts) throws Exception {
         StringBuilder sb = new StringBuilder("招标文件内容：\n\n");
         CmcChat cmcChat = new CmcChat();
         cmcChat.setTopicId(topicId);

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

         if (milvusServiceUrl == null || milvusServiceUrl.isEmpty()) {
             throw new IllegalArgumentException("milvusServiceUrl 配置不能为空");
         }
-//        milvusClient = new MilvusClientV2(
-//                ConnectConfig.builder()
-//                        .uri(milvusServiceUrl)
-//                        .build());
+       milvusClient = new MilvusClientV2(
+               ConnectConfig.builder()
+                       .uri(milvusServiceUrl)
+                       .build());
     }
     
     @PreDestroy

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

 import org.noear.solon.ai.chat.ChatModel;
 import org.noear.solon.ai.chat.ChatResponse;
 import org.noear.solon.ai.chat.ChatSession;
-import org.noear.solon.ai.chat.message.AssistantMessage;
 import org.noear.solon.ai.chat.message.ChatMessage;
 import org.noear.solon.ai.chat.prompt.Prompt;
 import org.noear.solon.ai.chat.session.InMemoryChatSession;
     @Value("${cmc.llmService.url}")
     private String llmServiceUrl;
 
+    @Value("${cmc.mcpService.url}")
+    private String mcpServiceUrl;
+
     @Override
     public Flux<String> answer(String topicId, String question) {
         McpClientProvider clientProvider = McpClientProvider.builder()
                 .channel(McpChannel.STREAMABLE_STATELESS)
-                .url("http://localhost:8087/mcp/sse")
+                .url(mcpServiceUrl)
                 .build();
         ChatModel chatModel = ChatModel.of(llmServiceUrl)
                 .model("Qwen")
     }
 
     @Override
-    public Flux<AssistantMessage> answerWithDocument(String topicId, String chatId, String question) throws Exception {
+    public Flux<String> answerWithDocument(String topicId, String chatId, String question) throws Exception {
         return langChainMilvusService.generateAnswerWithDocument(topicId, chatId, question);
     }
 

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

   })
 }
 
-// 流式回答API - 使用fetch API处理流式响应
-export function getAnswerStream(question, collectionName, onMessage, onError, onComplete) {
-  const baseURL = process.env.VUE_APP_BASE_API
-  const url = `${baseURL}/llm/rag/answer?question=${encodeURIComponent(question)}&collectionName=${encodeURIComponent(collectionName)}`
+function parseSseEvents(buffer) {
+  // SSE 事件以空行分隔：\n\n（兼容 \r\n）
+  const events = []
+  const normalized = buffer.replace(/\r\n/g, '\n')
+  const parts = normalized.split('\n\n')
+  // 最后一段可能是不完整事件，留给下次拼接
+  const rest = parts.pop() ?? ''
+
+  for (const part of parts) {
+    if (!part.trim()) continue
+    const lines = part.split('\n')
+    const dataLines = []
+    for (const line of lines) {
+      if (line.startsWith('data:')) {
+        dataLines.push(line.slice(5).trimStart())
+      }
+    }
+    const data = dataLines.join('\n')
+    if (data !== '') events.push(data)
+  }
 
-  const controller = new AbortController()
+  return { events, rest }
+}
+
+function normalizeSseData(data) {
+  if (!data) return ''
+  const trimmed = data.trim()
+  // 移除可能的JSON包装（如果有的话）
+  if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+    try {
+      const parsed = JSON.parse(trimmed)
+      if (parsed.content) return parsed.content
+      if (parsed.resultContent) return parsed.resultContent
+    } catch (e) {
+      // 不是JSON，直接返回
+    }
+  }
+  return trimmed
+}
 
+function stripToolCallStream(text, state) {
+  if (!text) return ''
+  const s = String(text)
+  if (!state.inToolCall) {
+    const toolStart = s.indexOf('<tool_call>')
+    if (toolStart === -1) {
+      return s
+    } else {
+      state.inToolCall = true
+      return s.slice(0, toolStart)
+    }
+  } else {
+    const toolEnd = s.indexOf('</tool_call>')
+    if (toolEnd === -1) {
+      return ''
+    } else {
+      state.inToolCall = false
+      return s.slice(toolEnd + 11)
+    }
+  }
+}
+
+function streamFetchSse(url, onMessage, onError, onComplete) {
+  const controller = new AbortController()
+  const toolCallState = { inToolCall: false }
   fetch(url, {
     method: 'GET',
     headers: {
       'Authorization': 'Bearer ' + getToken(),
-      'Accept': 'application/json, text/event-stream',
+      'Accept': '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 (jsonData.choices && jsonData.choices[0] && jsonData.choices[0].delta && jsonData.choices[0].delta.content) {
-                  console.log('=== 准备发送剩余OpenAI格式内容 ===', jsonData.choices[0].delta.content)
-                  onMessage(jsonData.choices[0].delta.content)
-                } else if (typeof jsonData === 'string') {
-                  console.log('=== 准备发送剩余字符串 ===', jsonData)
-                  onMessage(jsonData)
-                } else {
-                  console.log('=== 剩余数据格式不匹配，跳过content字段 ===', jsonData)
-                }
-              }
-            })
+  })
+    .then(async (response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+      if (!response.body) throw new Error('ReadableStream not supported')
+
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder('utf-8')
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+        const parsed = parseSseEvents(buffer)
+        buffer = parsed.rest
+
+        for (const data of parsed.events) {
+          const normalized = normalizeSseData(data)
+          if (normalized === '[DONE]') {
+            onComplete()
+            controller.abort()
+            return
           }
-
-          onComplete()
-          return
+          const visible = stripToolCallStream(normalized, toolCallState)
+          if (visible !== '') onMessage(visible)
         }
+      }
 
-        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)
-            }
+      // 兜底：流结束但没收到 [DONE]
+      if (buffer.trim()) {
+        const parsed = parseSseEvents(buffer + '\n\n')
+        for (const data of parsed.events) {
+          const normalized = normalizeSseData(data)
+          if (normalized !== '' && normalized !== '[DONE]') {
+            const visible = stripToolCallStream(normalized, toolCallState)
+            if (visible !== '') onMessage(visible)
           }
-
-          // 处理解析成功的数据
-              if (jsonData) {
-                console.log('=== 解析成功的数据 ===', jsonData)
-
-                if (jsonData.resultContent) {
-                  console.log('=== 准备发送resultContent ===', jsonData.resultContent)
-                  onMessage(jsonData.resultContent)
-                } else if (jsonData.choices && jsonData.choices[0] && jsonData.choices[0].delta && jsonData.choices[0].delta.content) {
-                  console.log('=== 准备发送OpenAI格式内容 ===', jsonData.choices[0].delta.content)
-                  onMessage(jsonData.choices[0].delta.content)
-                } 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
+        }
       }
+      onComplete()
+    })
+    .catch((error) => {
+      if (error.name === 'AbortError') return
       console.error('流式请求错误:', error)
-      onError(new Error('网络连接失败，请检查网络连接后重试'))
+      onError(error)
     })
 
-  // 返回controller以便外部可以取消请求
   return controller
+}
+
+// 流式回答API（SSE）
+export function getAnswerStream(question, collectionName, onMessage, onError, onComplete) {
+  const baseURL = process.env.VUE_APP_BASE_API
+  const url = `${baseURL}/llm/rag/answer?question=${encodeURIComponent(question)}&collectionName=${encodeURIComponent(collectionName)}`
+  return streamFetchSse(url, onMessage, onError, onComplete)
 }

oa-ui/src/views/llm/chat/index.vue

               <div v-if="!currentTopicId && chatMessages.length === 0" class="welcome-message">
                 <div class="welcome-content">
                   <div class="welcome-icon">🤖</div>
-                  <h2>欢迎使用 AI 助手</h2>
-                  <p>我是您的智能助手，可以帮您解答问题、编写代码、分析数据等。</p>
+                  <h2>欢迎使用 OA 助手</h2>
+                  <p>我是您的智能助手，可以帮您解答问题、分析数据等。</p>
                   <p>请开始您的对话吧！</p>
                 </div>
               </div>
   },
 
   mounted() {
+    this.fileInput = this.$refs.fileInput;
     this.getList();
   },
 

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

                 </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">
+              <!-- 加载状态：仅在尚未收到首段流内容时显示，避免出现两个AI气泡 -->
+              <div v-if="isSending && !streamingStarted" class="message-item ai">
                 <div class="message-avatar">
                   <div class="ai-avatar">
-                    <i class="el-icon-chat-dot-round"></i>
+                    🤖
                   </div>
                 </div>
                 <div class="message-content">
                   <div class="message-bubble ai">
                     <div class="loading-dots">
-                      <span></span>
-                      <span></span>
-                      <span></span>
+                      <span></span><span></span><span></span>
                     </div>
                   </div>
                 </div>
 import { getToken } from "@/utils/auth";
 import { listKnowledge, listKnowLedgeByCollectionName, addKnowledge, updateKnowledge, delKnowledge, insertKnowledgeFile, listKnowledgeDocument, deleteKnowledgeFile, getProcessValue } from "@/api/llm/knowLedge";
 import { getAnswer, getAnswerStream, getContextFile } from '@/api/llm/rag';
+import { marked } from 'marked';
+
+function createTypewriter(appender, options = {}) {
+  const intervalMs = typeof options.intervalMs === 'number' ? options.intervalMs : 25 // 约 40 字/秒
+  const maxCharsPerTick = typeof options.maxCharsPerTick === 'number' ? options.maxCharsPerTick : 1
+
+  let queue = ''
+  let timer = null
+  let ended = false
+  let onDrained = null
+
+  const tick = () => {
+    if (!queue) {
+      if (ended) {
+        if (timer) clearInterval(timer)
+        timer = null
+        if (onDrained) onDrained()
+      }
+      return
+    }
+
+    const n = Math.min(maxCharsPerTick, queue.length)
+    const chunk = queue.slice(0, n)
+    queue = queue.slice(n)
+    appender(chunk)
+  }
+
+  return {
+    push(text) {
+      if (!text) return
+      queue += text
+      if (!timer) timer = setInterval(tick, intervalMs)
+    },
+    end(cb) {
+      ended = true
+      onDrained = cb
+      if (!timer) timer = setInterval(tick, intervalMs)
+    },
+    stop() {
+      ended = true
+      queue = ''
+      if (timer) clearInterval(timer)
+      timer = null
+    }
+  }
+}
+
+function trimToLastSentenceEnd(text) {
+  const s = String(text || '')
+  // 句末标点：中文/英文句号、问号、叹号，或换行
+  const last = Math.max(
+    s.lastIndexOf('。'),
+    s.lastIndexOf('！'),
+    s.lastIndexOf('？'),
+    s.lastIndexOf('.'),
+    s.lastIndexOf('!'),
+    s.lastIndexOf('?'),
+    s.lastIndexOf('\n')
+  )
+  if (last === -1) return s.trim()
+  return s.slice(0, last + 1).trim()
+}
 
 export default {
   name: 'KnowledgeManager',
       chatMessages: [],
       chatInput: '',
       isSending: false,
+      streamingStarted: false,
       chatMessagesRef: null,
 
       // 表单数据
       this.isChatMode = false;
       this.chatMessages = [];
       this.chatInput = '';
+      this.streamingStarted = false;
 
       // 重置文件分页状态
       this.filePageNum = 1;
       this.isChatMode = true;
       this.chatMessages = [];
       this.chatInput = '';
+      this.streamingStarted = false;
       // 滚动到底部
       this.$nextTick(() => {
         this.scrollToBottom();
       const currentInput = this.chatInput;
       this.chatInput = '';
       this.isSending = true;
+      this.streamingStarted = false;
 
       // 滚动到底部
       this.$nextTick(() => {
       };
       this.chatMessages.push(aiMessage);
 
+      const typewriter = createTypewriter((chunk) => {
+        aiMessage.content += chunk
+        aiMessage.time = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
+        this.$nextTick(() => this.scrollToBottom())
+      }, {
+        intervalMs: 25,
+        maxCharsPerTick: 1
+      })
+
       // 使用流式API获取回答
       const eventSource = getAnswerStream(
         currentInput,
         // onMessage: 接收到每个字符时的回调
         (content) => {
           const that = this;
-          // 处理接收到的内容
-          console.log('=== 前端接收到内容 ===', content)
-
-          // 清理内容中的</think>标签
-          let cleanContent = content.replace(/<\/?think>/g, '');
+          if (!that.streamingStarted) that.streamingStarted = true;
 
-          // 如果内容为空或只包含空白字符，跳过
-          if (!cleanContent.trim()) {
+          if (!content || !String(content).trim()) {
             return;
           }
 
-          // 直接替换内容，避免重复叠加
-          aiMessage.content += cleanContent;
-          aiMessage.time = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
-          console.log('=== 清理后的内容 ===', cleanContent)
-          console.log('=== 当前AI消息完整内容 ===', aiMessage.content)
+          typewriter.push(String(content))
 
-          // 每次接收到消息都重置超时定时器
           if (window.responseTimeout) {
             clearTimeout(window.responseTimeout);
           }
-
-          // 重新设置超时定时器（5分钟无新消息才超时）
           window.responseTimeout = setTimeout(() => {
             if (that.isSending) {
-              console.log('=== 响应超时强制结束 ===')
+              console.log('=== 响应超时强制结束 ===');
               that.isSending = false;
-              if (window.currentController) {
-                window.currentController.abort();
-                window.currentController = null;
+              typewriter.stop()
+              if (window.responseTimeout) {
+                clearTimeout(window.responseTimeout);
+                window.responseTimeout = null;
               }
-              window.responseTimeout = null;
             }
-          }, 300000); // 30秒无响应超时
+          }, 300000);
 
-          // 滚动到底部
-          that.$nextTick(() => {
-            that.scrollToBottom();
-          });
         },
         // onError: 发生错误时的回调
         (error) => {
           const that = this;
           console.error('=== 流式回答错误 ===', error);
 
-          // 清除超时定时器
           if (window.responseTimeout) {
             clearTimeout(window.responseTimeout);
             window.responseTimeout = null;
             aiMessage.content += '\n\n[回答生成中断]';
           }
           that.isSending = false;
-          console.log('=== 错误时isSending设置为false ===')
+          typewriter.stop()
 
-          // 清理控制器
-          if (window.currentController) {
-            window.currentController = null;
-          }
-
-          // 滚动到底部
           that.$nextTick(() => {
             that.scrollToBottom();
           });
         // onComplete: 回答完成时的回调
         () => {
           const that = this;
-          console.log('=== 回答完成，正确进入onComplete ===')
+          console.log('=== 回答完成 ===');
 
-          // 清除超时定时器
           if (window.responseTimeout) {
             clearTimeout(window.responseTimeout);
             window.responseTimeout = null;
           }
 
-          that.isSending = false;
-          console.log('=== onComplete中isSending设置为false ===')
-
-          // 清理控制器
-          if (window.currentController) {
-            window.currentController = null;
-          }
+          typewriter.end(async () => {
+            aiMessage.content = trimToLastSentenceEnd(aiMessage.content)
+            try {
+              // 获取上下文引用文件
+              const response = await getContextFile(currentInput, that.selectedKnowledge.collectionName);
+              console.log('=== 上下文文件 ===', response)
+              if (response && Array.isArray(response)) {
+                aiMessage.references = response.map(item => ({
+                  fileName: item.file_name,
+                  similarity: item.score,
+                  content: item.content
+                }));
+                that.$forceUpdate(); // 强制更新以显示引用文件
+              }
+            } catch (error) {
+              console.error('获取上下文文件失败:', error);
+            }
 
-          // 确保状态更新
-          that.$nextTick(() => {
-            console.log('=== 最终isSending状态 ===', that.isSending)
-            that.scrollToBottom();
-          });
+            that.isSending = false;
+            that.$nextTick(() => {
+              that.scrollToBottom();
+            });
+          })
         }
       );
-      // 获取上下文引用文件
-      getContextFile(currentInput, this.selectedKnowledge.collectionName).then(response => {
-        console.log('=== 上下文文件 ===', response)
-        if (response && Array.isArray(response)) {
-          aiMessage.references = response.map(item => ({
-            fileName: item.file_name,
-            similarity: item.score,
-            content: item.content
-          }));
-          this.$forceUpdate(); // 强制更新以显示引用文件
-        }
-      }).catch(error => {
-        console.error('获取上下文文件失败:', error);
-      });
       // 如果用户快速发送多条消息，取消之前的请求
       if (window.currentController) {
         window.currentController.abort();
 
     /** 格式化消息内容 */
     formatMessage(content) {
-      // 简单的换行处理
-      return content.replace(/\n/g, '<br>');
+      // 直接使用marked解析markdown内容
+      return marked(content);
     },
 
     /** 格式化相似度 */