From 2fc702b543f88b6a89f96d0639742aed30646dad Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 1 Feb 2026 10:42:28 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=8D=A0=E4=BD=8D?= =?UTF-8?q?=E5=9B=BE=E6=98=BE=E7=A4=BA=E6=97=B6=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. AI 文字回复显示后延迟 3 秒再显示动态占位图 2. 延迟期间隐藏占位图，让用户有时间阅读文字 3. 只有 isGeneratingImageFlag=true 时才显示图片生成占位图 Co-authored-by: Cursor --- components/chat.tsx | 9 +++++++-- components/messages.tsx | 28 +++++++++++++++------------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/components/chat.tsx b/components/chat.tsx index 31564bd8f..be26fb4c3 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -301,8 +301,13 @@ export function Chat({ (part: any) => part.type === "text" && part.text?.includes("") ); if (hasGeneratingMarker) { - console.log("[Chat] 🖼️ Detected GENERATING_IMAGE marker, showing placeholder"); - setIsGeneratingImageFlag(true); + console.log("[Chat] 🖼️ Detected GENERATING_IMAGE marker, will show placeholder after delay"); + // 🆕 延迟显示占位图，让用户先看到 AI 的文字回复 + // 消息会立即添加到 appendedMessages 并显示，3 秒后再显示动态占位图 + setTimeout(() => { + console.log("[Chat] 🖼️ Now showing placeholder after 3s delay"); + setIsGeneratingImageFlag(true); + }, 3000); // 延迟 3 秒，让用户有时间阅读文字 } // 🆕 检测是否包含图片（生成完成） diff --git a/components/messages.tsx b/components/messages.tsx index 220971d01..33f02cad5 100644 --- a/components/messages.tsx +++ b/components/messages.tsx @@ -230,12 +230,13 @@ function PureMessages({ }); // 🆕 正确的占位图逻辑 - // 优先级：isGeneratingImageFlag > (hasImageContent && status=ready) > isGeneratingImage > status - // 关键：isGeneratingImageFlag 有最高优先级，只有它变 false 且有图片时才隐藏 + // 优先级：isGeneratingImageFlag > (hasImageContent && status=ready) > status + // 关键：只有 isGeneratingImageFlag=true 时才显示图片生成占位图 + // isGeneratingImage（消息中的标记检测）不再直接控制占位图，由 chat.tsx 的延迟逻辑控制 if (isGeneratingImageFlag) { - // 后端正在生成图片，始终显示占位图 - console.log("[Messages useEffect] isGeneratingImageFlag=true，强制显示占位图"); + // 后端正在生成图片（延迟后设置），显示占位图 + console.log("[Messages useEffect] isGeneratingImageFlag=true，显示生成占位图"); setShowThinkingWithDelay(true); } else if (hasImageContent && status === "ready") { // 生成完成（flag=false）且有图片内容，延迟后隐藏占位图 @@ -244,17 +245,18 @@ function PureMessages({ setShowThinkingWithDelay(false); }, delayTime); return () => clearTimeout(timer); - } else if (hasImageContent && !isGeneratingImage) { - // 有图片内容且没有生成标记（可能是历史消息），直接隐藏 - console.log("[Messages useEffect] 有图片内容无生成标记，隐藏占位图"); + } else if (hasImageContent) { + // 有图片内容，隐藏占位图 + console.log("[Messages useEffect] 有图片内容，隐藏占位图"); + setShowThinkingWithDelay(false); + } else if (isGeneratingImage && !isGeneratingImageFlag) { + // 消息中有生成标记但 flag 还没设置（延迟期间） + // 这时候应该显示 AI 文字回复，不显示占位图 + console.log("[Messages useEffect] 生成标记存在但flag未设置（延迟期间），隐藏占位图让用户看文字"); setShowThinkingWithDelay(false); - } else if (isGeneratingImage) { - // 消息中检测到 GENERATING_IMAGE 标记 - console.log("[Messages useEffect] 检测到消息中的生成标记，显示占位图"); - setShowThinkingWithDelay(true); } else if (status === "streaming" || status === "submitted") { - // 正在处理中（分析意图或流式传输） - console.log("[Messages useEffect] streaming/submitted，显示占位图"); + // 正在处理中（分析意图或流式传输），显示普通思考占位图 + console.log("[Messages useEffect] streaming/submitted，显示思考占位图"); setShowThinkingWithDelay(true); } else { // ready 或其他状态：不显示占位图