前端代码修复

src/pages/ShopPage.tsx

 import { useState, useEffect, useCallback, useRef } from "react";
+import { flushSync } from "react-dom";
 import { supabase } from "@/integrations/supabase/client";
 import { ProductCard } from "@/components/chat/ProductCard";
 import { Button } from "@/components/ui/button";
@@ -305,6 +306,22 @@ export default function ShopPage() {
   // AI response handler
   const simulateAIResponse = useCallback(async (userMessage: string) => {
     setIsAiTyping(true);
+    const streamMsgId = `ai_${Date.now()}`;
+
+    // 先插入一个占位消息，后续流式更新
+    const placeholderMessage: ChatMessageType = {
+      id: streamMsgId,
+      content: '',
+      sender: "ai",
+      timestamp: new Date().toLocaleTimeString('zh-CN', {
+        hour: '2-digit',
+        minute: '2-digit'
+      }),
+      type: "text",
+      agent: currentAgent,
+    };
+    setMessages(prev => [...prev, placeholderMessage]);
+
     try {
       let currentProducts = products;
       if (currentProducts.length === 0) {
@@ -324,6 +341,8 @@ export default function ShopPage() {
         description: p.description
       }));
 
+      // ─── 流式接收 AI 回复文字 ───
+      let fullContent = '';
       const { data: intentCard } = await callCozeEdge({
         message: userMessage,
         userId: user?.id || 'anonymous',
@@ -333,16 +352,33 @@ export default function ShopPage() {
           description: currentProducts[0].description || '',
           price: Number(currentProducts[0].price)
         },
-        catalog
+        catalog,
+        onText: (text: string) => {
+          fullContent += text;
+          flushSync(() => {
+            setMessages(prev => prev.map(msg =>
+              msg.id === streamMsgId
+                ? { ...msg, content: fullContent }
+                : msg
+            ));
+          });
+        }
       });
 
       if (!intentCard) throw new Error('系统繁忙，请稍后再试');
 
-      let aiContent = intentCard.title || '收到您的消息';
+      // 清洗 JSON 代码块，避免裸露协议数据出现在正文
+      let aiContent = fullContent
+        .replace(/```(?:json)?\s*\{[\s\S]*?"(?:picks|intent)"[\s\S]*?\}\s*```/gi, '')
+        .replace(/\{\s*"(?:picks|intent)"\s*:[\s\S]*?\}\s*$/g, '')
+        .trim();
 
+      if (!aiContent) {
+        aiContent = intentCard.title || '收到您的消息';
         if (intentCard.highlights && intentCard.highlights.length > 0) {
           aiContent += '\n\n' + intentCard.highlights.map(h => `• ${h}`).join('\n');
         }
+      }
 
       if (intentCard.picks && intentCard.picks.length > 0) {
         aiContent += '\n\n为您推荐了 ' + intentCard.picks.length + ' 个商品';
@@ -371,49 +407,38 @@ export default function ShopPage() {
         };
       }
 
-      const aiMessage: ChatMessageType = {
-        id: `ai_${Date.now()}`,
-        content: aiContent,
-        sender: "ai",
-        timestamp: new Date().toLocaleTimeString('zh-CN', {
-          hour: '2-digit',
-          minute: '2-digit'
-        }),
-        type: messageType,
-        agent: currentAgent,
-        metadata: responseMetadata
-      };
-      
-      setMessages(prev => [...prev, aiMessage]);
+      // 更新占位消息为最终内容 + 类型 + 元数据
+      setMessages(prev => prev.map(msg =>
+        msg.id === streamMsgId
+          ? { ...msg, content: aiContent, type: messageType, metadata: responseMetadata }
+          : msg
+      ));
 
       if (activeConversationId) {
         await saveMessage({
-          content: aiMessage.content,
-          sender_type: aiMessage.sender,
-          message_type: aiMessage.type as DBMessage['message_type'],
-          metadata: aiMessage.metadata
+          content: aiContent,
+          sender_type: "ai",
+          message_type: messageType as DBMessage['message_type'],
+          metadata: responseMetadata
         }, activeConversationId);
       }
     } catch (error) {
       console.error('AI回复失败:', error);
-      const errorMessage: ChatMessageType = {
-        id: `ai_error_${Date.now()}`,
-        content: `抱歉，遇到了技术问题，请稍后再试。`,
-        sender: "ai",
-        timestamp: new Date().toLocaleTimeString('zh-CN', {
-          hour: '2-digit',
-          minute: '2-digit'
-        }),
-        type: "text",
-        agent: currentAgent
-      };
-      setMessages(prev => [...prev, errorMessage]);
+      // 把占位消息替换为错误消息
+      setMessages(prev => prev.map(msg =>
+        msg.id === streamMsgId
+          ? { ...msg, content: '抱歉，遇到了技术问题，请稍后再试。' }
+          : msg
+      ));
     } finally {
       setIsAiTyping(false);
     }
   }, [currentAgent, products, activeConversationId, saveMessage, user]);
 
   const handleSendMessage = useCallback(async (content: string) => {
+    // 防止并发流式调用（如快速连点建议按钮）
+    if (isAiTyping) return;
+
     const userMessage: ChatMessageType = {
       id: `user_${Date.now()}`,
       content,
@@ -437,7 +462,7 @@ export default function ShopPage() {
     }
 
     await simulateAIResponse(content);
-  }, [simulateAIResponse, activeConversationId, saveMessage]);
+  }, [simulateAIResponse, activeConversationId, saveMessage, isAiTyping]);
 
   return (
     <div className="min-h-screen bg-background">

src/utils/cozeClient.ts

 /**
  * Consumer Chat Edge Function Client
- * C端消费者聊天 - 统一调用入口
- *
- * 注意：callCozeEdge 是历史兼容名称；当前优先走 dify-chat-stream。
+ * C端消费者聊天 —— 直接大模型调用（AI Hub）
  */
 
 import { supabase } from '@/integrations/supabase/client';
@@ -59,7 +57,11 @@ type StreamDonePayload = Partial<CozeResponse> & {
   type?: 'done';
 };
 
-function processDifyStreamLine(line: string, state: { fullContent: string; doneData: StreamDonePayload | null }) {
+function processStreamLine(
+  line: string,
+  state: { fullContent: string; doneData: StreamDonePayload | null },
+  onText?: (text: string) => void
+) {
   const trimmedLine = line.trim();
   if (!trimmedLine || trimmedLine.startsWith(':') || trimmedLine === 'data: [DONE]') return;
   if (!trimmedLine.startsWith('data:')) return;
@@ -68,22 +70,30 @@ function processDifyStreamLine(line: string, state: { fullContent: string; doneD
   try {
     const event = JSON.parse(jsonStr);
     if (event.type === 'text') {
-      state.fullContent += event.content || '';
+      const content = event.content || '';
+      state.fullContent += content;
+      onText?.(content);
     } else if (event.type === 'done') {
       state.doneData = event;
     } else if (event.type === 'error') {
-      throw new Error(event.message || 'Dify 流式响应失败');
+      throw new Error(event.message || 'AI 流式响应失败');
     }
   } catch (error) {
-    if (error instanceof Error && !jsonStr.startsWith('{')) {
+    // JSON.parse 抛出 SyntaxError，应静默跳过该行
+    // 只有业务层主动抛出的 Error 才向上传播（如 type==='error' 事件）
+    if (error instanceof SyntaxError) {
+      if (jsonStr && !jsonStr.startsWith('{')) {
         state.fullContent += jsonStr;
+      }
       return;
     }
     throw error;
   }
 }
 
-export async function callCozeEdge(options: CozeRequestOptions): Promise<{
+export async function callCozeEdge(
+  options: CozeRequestOptions & { onText?: (text: string) => void }
+): Promise<{
   data: CozeResponse | null;
   traceId: string;
   status: number;
@@ -104,21 +114,12 @@ export async function callCozeEdge(options: CozeRequestOptions): Promise<{
   };
 
   try {
-    console.log('🚀 [CHAT CLIENT] 开始调用 dify-chat-stream');
-    console.log('📤 请求体:', JSON.stringify(requestBody, null, 2));
+    console.log('🚀 [CHAT CLIENT] 调用 ai-chat-stream');
+    console.log('📤 消息:', options.message?.substring(0, 60));
 
     const { data: { session } } = await supabase.auth.getSession();
-    console.log('🔐 用户登录状态:', session ? '已登录' : '未登录');
-    
-    let lastError: any = null;
-    let data: any = null;
-    let error: any = null;
 
-    // 重试逻辑
-    for (let attempt = 1; attempt <= 2; attempt++) {
-      console.log(`🔄 尝试 ${attempt}/2...`);
-      
-      try {
+    // 单次调用 + 超时保护（65秒）
     const invokePromise = fetch(`${SUPABASE_URL}/functions/v1/dify-chat-stream`, {
       method: 'POST',
       headers: {
@@ -135,82 +136,82 @@ export async function callCozeEdge(options: CozeRequestOptions): Promise<{
     });
 
     const response = await Promise.race([invokePromise, timeoutPromise]);
+
     if (!response.ok) {
-          throw new Error(`Dify 请求失败 (${response.status}): ${await response.text()}`);
+      const errorText = await response.text();
+      console.error('❌ [CHAT CLIENT] 请求失败:', response.status, errorText);
+      throw new Error(`请求失败 (${response.status}): ${errorText.substring(0, 200)}`);
     }
+
     if (!response.body) {
       throw new Error('响应体为空');
     }
 
+    // ─── 读取 SSE 流 ───
     const reader = response.body.getReader();
     const decoder = new TextDecoder();
+    const onText = options.onText;
     const state = { fullContent: '', doneData: null as StreamDonePayload | null };
     let buffer = '';
 
+    // rAF 批量包装 onText：每帧最多触发一次，确保浏览器在帧之间有机会绘制
+    // 根因：await setTimeout(0) 从 Promise 延续中创建不触发 4ms 嵌套惩罚，
+    // 全部回调在 <1ms 内触发完毕，浏览器只在 VSync 边界绘制一次 → 用户看不到流式效果
+    let pendingText = '';
+    let rafId: number | null = null;
+
+    const batchedOnText = onText ? (text: string) => {
+      pendingText += text;
+      if (rafId === null) {
+        rafId = requestAnimationFrame(() => {
+          if (pendingText) {
+            onText(pendingText);
+            pendingText = '';
+          }
+          rafId = null;
+        });
+      }
+    } : undefined;
+
+    try {
       while (true) {
         const { done, value } = await reader.read();
         if (done) {
-            if (buffer.trim()) processDifyStreamLine(buffer, state);
+          if (buffer.trim()) processStreamLine(buffer, state, batchedOnText);
           break;
         }
 
         buffer += decoder.decode(value, { stream: true });
         const lines = buffer.split('\n');
         buffer = lines.pop() || '';
-          for (const line of lines) processDifyStreamLine(line, state);
+        for (const line of lines) {
+          processStreamLine(line, state, batchedOnText);
         }
-
-        data = {
-          ...(state.doneData || {}),
-          title: state.doneData?.title || options.message,
-          answer: state.fullContent,
-        };
-        error = null;
-        lastError = null;
-
-        if (data) {
-          break;
       }
-        
-        lastError = error;
-        
-        if (attempt === 1) {
-          console.log('⏳ Edge Function 可能正在启动，2秒后重试...');
-          await new Promise(resolve => setTimeout(resolve, 2000));
+    } finally {
+      // 确保 rAF 回调被取消、剩余文本被刷新，即使 processStreamLine 抛出异常也不会泄漏
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
       }
-      } catch (e) {
-        lastError = e;
-        console.error(`❌ 尝试 ${attempt} 失败:`, e);
-        
-        if (attempt === 1) {
-          await new Promise(resolve => setTimeout(resolve, 2000));
+      if (pendingText && onText) {
+        onText(pendingText);
+        pendingText = '';
       }
     }
-    }
-    
-    error = error || lastError;
-    
-    if (error) {
-      console.error('❌ Dify Chat Functions 错误:', error);
 
-      const errorMessage = error.message || String(error);
-      let friendlyMessage = '抱歉，系统暂时繁忙';
-      
-      if (errorMessage.includes('Failed to fetch') || errorMessage.includes('NetworkError')) {
-        friendlyMessage = '网络连接不稳定，请重新发送消息试试';
-      } else if (errorMessage.includes('timeout') || errorMessage.includes('超时')) {
-        friendlyMessage = 'AI响应超时（65秒），请重新发送消息';
-      }
+    const rawData = { ...(state.doneData || {}), answer: state.fullContent };
 
+    if (rawData.error) {
       return {
         data: null,
-        traceId,
-        status: 0,
-        error: friendlyMessage
+        traceId: rawData.meta?.probe_id || traceId,
+        status: 200,
+        error: `系统繁忙，请稍后再试（追踪码：${rawData.meta?.probe_id || traceId}）`
       };
     }
 
-    if (!data) {
+    if (!state.doneData && !state.fullContent) {
       return {
         data: null,
         traceId,
@@ -219,18 +220,7 @@ export async function callCozeEdge(options: CozeRequestOptions): Promise<{
       };
     }
 
-    console.log('✅ 成功获取 Dify 响应');
-    
-    const rawData = data as any;
-    
-    if (rawData.error) {
-      return {
-        data: null,
-        traceId: rawData.meta?.probe_id || traceId,
-        status: 200,
-        error: `系统繁忙，请稍后再试（追踪码：${rawData.meta?.probe_id || traceId}）`
-      };
-    }
+    console.log('✅ [CHAT CLIENT] 成功获取响应, picks:', rawData.picks?.length || 0);
 
     const cozeResponse: CozeResponse = {
       title: rawData.title || options.message,
@@ -241,7 +231,7 @@ export async function callCozeEdge(options: CozeRequestOptions): Promise<{
       comparison: rawData.comparison,
       next: rawData.next || [],
       meta: {
-        platform: rawData.meta?.platform || 'dify-stream',
+        platform: rawData.meta?.platform || 'ai-hub',
         user: rawData.meta?.user || options.userId,
         catalog_count: rawData.meta?.catalog_count ?? 0,
         probe_id: rawData.meta?.probe_id || traceId
@@ -250,12 +240,6 @@ export async function callCozeEdge(options: CozeRequestOptions): Promise<{
       answer: rawData.answer
     };
 
-    console.log('📊 Dify 响应:', {
-      platform: cozeResponse.meta.platform,
-      picks: cozeResponse.picks.length,
-      conversation_id: cozeResponse.conversation_id || '(new)'
-    });
-    
     return {
       data: cozeResponse,
       traceId: cozeResponse.meta.probe_id,
@@ -263,13 +247,24 @@ export async function callCozeEdge(options: CozeRequestOptions): Promise<{
     };
 
   } catch (error) {
-    console.error('❌ 调用 Coze Edge Function 失败:', error);
+    console.error('❌ [CHAT CLIENT] 调用失败:', error);
+
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    let friendlyMessage = '抱歉，系统暂时繁忙';
+
+    if (errorMessage.includes('Failed to fetch') || errorMessage.includes('NetworkError')) {
+      friendlyMessage = '网络连接不稳定，请重新发送消息试试';
+    } else if (errorMessage.includes('timeout') || errorMessage.includes('超时')) {
+      friendlyMessage = 'AI响应超时，请重新发送消息';
+    } else if (errorMessage.includes('AI_HUB') || errorMessage.includes('LOVABLE')) {
+      friendlyMessage = 'AI服务未配置，请联系管理员';
+    }
 
     return {
       data: null,
       traceId,
       status: 0,
-      error: '网络连接不稳定，请重新发送消息试试'
+      error: friendlyMessage
     };
   }
 }

src/utils/difyStreamClient.ts

@@ -51,6 +51,9 @@ export async function streamDifyChat(
   try {
     console.log('🚀 [DIFY STREAM] 开始流式调用');
 
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 65000);
+
     const response = await fetch(`${SUPABASE_URL}/functions/v1/dify-chat-stream`, {
       method: 'POST',
       headers: {
@@ -60,8 +63,11 @@ export async function streamDifyChat(
         'X-User-Id': options.userId || 'guest',
       },
       body: JSON.stringify(requestBody),
+      signal: controller.signal,
     });
 
+    clearTimeout(timeoutId);
+
     if (!response.ok) {
       const errorText = await response.text();
       throw new Error(`Dify 请求失败 (${response.status}): ${errorText}`);
@@ -79,7 +85,7 @@ export async function streamDifyChat(
       const { done, value } = await reader.read();
       if (done) {
         if (buffer.trim()) {
-          processSSELine(buffer, callbacks);
+          await processSSELine(buffer, callbacks);
         }
         break;
       }
@@ -89,18 +95,22 @@ export async function streamDifyChat(
       buffer = lines.pop() || '';
 
       for (const line of lines) {
-        processSSELine(line, callbacks);
+        await processSSELine(line, callbacks);
       }
     }
 
     console.log('✅ [DIFY STREAM] 流式调用完成');
   } catch (error) {
     console.error('❌ [DIFY STREAM] 错误:', error);
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      callbacks.onError('AI响应超时（65秒），请重新发送消息');
+    } else {
       callbacks.onError(error instanceof Error ? error.message : '流式请求失败');
     }
+  }
 }
 
-function processSSELine(line: string, callbacks: CozeStreamCallbacks) {
+async function processSSELine(line: string, callbacks: CozeStreamCallbacks) {
   const trimmedLine = line.trim();
   if (!trimmedLine || trimmedLine.startsWith(':')) return;
   if (trimmedLine === 'data: [DONE]') return;
@@ -114,15 +124,20 @@ function processSSELine(line: string, callbacks: CozeStreamCallbacks) {
           callbacks.onText(event.content);
           break;
         case 'done':
-          callbacks.onDone(event);
+          await callbacks.onDone(event);
           break;
         case 'error':
           callbacks.onError(event.message);
           break;
       }
     } catch (e) {
+      // JSON.parse SyntaxError or callback rejection — safe fallback
       if (jsonStr && !jsonStr.startsWith('{')) {
+        try {
           callbacks.onText(jsonStr);
+        } catch {
+          // onText itself failed; nothing more we can do
+        }
       }
     }
   }