真流，并显示思考

src/views/chat.vue

@@ -37,7 +37,7 @@ const sessionId = ref(localStorage.getItem('sessionId') || {});
 const add = async () => {
     try {
         const result = await axios.post(
-            "http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions",
+            "http://whi3s4.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions",
             {},
             {
                 headers: {
@@ -135,78 +135,83 @@ const sendMessage = async () => {
 
     try {
         // 调用API获取回复
-        const response = await fetch("http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions", {
+        const response = await fetch("http://whi3s4.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions", {
             method: 'POST',
             headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ragflow-hkNjEwYjcwZjBlMDExZWZiYjYzMDI0Mm' },
-            body: JSON.stringify({ question: content, stream: false, session_id: sessionId.value   })
+            body: JSON.stringify({ question: content, stream: true, session_id: sessionId.value   }) // 设置 stream 为 true
         });
-        const data = await response.json();
-        console.log(data, 'data211111');
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
 
         // 移除加载消息
         messages.value = messages.value.filter(msg => !msg.isLoading);
 
-        // 检查 data 对象的结构，确保正确提取所需属性
-        if (data && data.data && typeof data.data.answer === 'string') {
-            // 提取推理思考部分和结果部分
-            const regex = /<think>(.*?)<\/think>(.*)/s;
-            const match = data.data.answer.match(regex);
-            let thinking = '';
-            let result = data.data.answer;
-
-            if (match) {
-                thinking = match[1].trim();
-                result = match[2].trim();
-            }
+        // 添加初始空消息
+        const botMessageIndex = messages.value.length;
+        messages.value.push({
+            content: '',
+            sender: 'bot',
+            timestamp: new Date()
+        });
 
-            // 组合推理思考内容和结果内容，并添加 HTML 标签
-            let combinedContent = '';
-            // if (thinking) {
-            //     combinedContent += `<span class="thinking-content">推理思考：${thinking}</span><br>`;
-            // }
-            combinedContent += `<span class="result-content">${result}</span>`;
-
-            // 使用marked库将Markdown转换为HTML
-            let markdownContent = marked(combinedContent);
-
-            // 使用 KaTeX 渲染数学公式
-            const katexRegex = /\$\$(.*?)\$\$/g;
-            markdownContent = markdownContent.replace(katexRegex, (match, formula) => {
-                try {
-                    return katex.renderToString(formula, { throwOnError: false });
-                } catch (error) {
-                    console.error('KaTeX 渲染错误:', error);
-                    return match;
-                }
-            });
-
-            // 添加初始空消息
-            const botMessageIndex = messages.value.length;
-            messages.value.push({
-                content: '',
-                sender: 'bot',
-                timestamp: new Date()
-            });
-
-            // 使用定时器逐个字符更新消息内容
-            let currentIndex = 0;
-            const intervalId = setInterval(() => {
-                if (currentIndex < markdownContent.length) {
-                    messages.value[botMessageIndex].content += markdownContent[currentIndex];
-                    scrollToBottom();
-                    currentIndex++;
-                } else {
-                    clearInterval(intervalId);
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder('utf-8');
+        let partialData = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+                break;
+            }
+            partialData += decoder.decode(value, { stream: true });
+
+            // 处理流式数据
+            const lines = partialData.split('\n');
+            partialData = lines.pop(); // 保留未完成的行
+
+            for (const line of lines) {
+                if (line.startsWith('data:')) {
+                    const data = JSON.parse(line.slice(5));
+                    if (data && data.data && typeof data.data.answer === 'string') {
+                        // 提取推理思考部分和结果部分
+                        const regex = /<think>(.*?)<\/think>(.*)/s;
+                        const match = data.data.answer.match(regex);
+                        let thinking = '';
+                        let result = data.data.answer;
+
+                        if (match) {
+                            thinking = match[1].trim();
+                            result = match[2].trim();
+                        }
+
+                        // 组合推理思考内容和结果内容，并添加 HTML 标签
+                        let combinedContent = '';
+                        if (thinking) {
+                            combinedContent += `<span class="thinking-content">推理思考：${thinking}</span><br>`;
+                        }
+                        combinedContent += `<span class="result-content">${result}</span>`;
+
+                        // 使用marked库将Markdown转换为HTML
+                        let markdownContent = marked(combinedContent);
+
+                        // 使用 KaTeX 渲染数学公式
+                        const katexRegex = /\$\$(.*?)\$\$/g;
+                        markdownContent = markdownContent.replace(katexRegex, (match, formula) => {
+                            try {
+                                return katex.renderToString(formula, { throwOnError: false });
+                            } catch (error) {
+                                console.error('KaTeX 渲染错误:', error);
+                                return match;
+                            }
+                        });
+
+                        // 更新消息内容
+                        messages.value[botMessageIndex].content = markdownContent;
+                        scrollToBottom();
+                    }
                 }
-            }, 100); // 每100毫秒添加一个字符，可以根据需要调整
-        } else {
-            console.error('API 返回的数据格式不正确:', data);
-            messages.value.push({
-                content: '服务返回数据格式错误，请稍后再试',
-                sender: 'bot',
-                timestamp: new Date()
-            });
-            scrollToBottom();
+            }
         }
     } catch (error) {
         console.error('API请求失败:', error);