diff --git a/components/messages.tsx b/components/messages.tsx index 707cafb..14140eb 100644 --- a/components/messages.tsx +++ b/components/messages.tsx @@ -229,30 +229,30 @@ function PureMessages({ status, }); - // 🆕 正确的占位图逻辑 - // 优先级:isGeneratingImageFlag > (hasImageContent && status=ready) > status - // 关键:只有 isGeneratingImageFlag=true 时才显示图片生成占位图 - // isGeneratingImage(消息中的标记检测)不再直接控制占位图,由 chat.tsx 的延迟逻辑控制 + // 🆕 简化的占位图逻辑 - 完全由 isGeneratingImageFlag 控制 + // isGeneratingImageFlag 的生命周期: + // - 初始: false + // - 收到 AI 文字回复后 3 秒: true(开始显示生图占位图) + // - 收到图片消息: false(隐藏占位图) - if (isGeneratingImageFlag) { - // 后端正在生成图片(延迟后设置),显示占位图 - console.log("[Messages useEffect] isGeneratingImageFlag=true,显示生成占位图"); - setShowThinkingWithDelay(true); - } else if (hasImageContent && status === "ready") { - // 生成完成(flag=false)且有图片内容,延迟后隐藏占位图 - console.log("[Messages useEffect] 图片已生成且status=ready,延迟后隐藏"); - const timer = setTimeout(() => { - setShowThinkingWithDelay(false); - }, delayTime); - return () => clearTimeout(timer); - } else if (hasImageContent) { + // 检查最后一条消息是否是 AI 的文字回复(包含 GENERATING_IMAGE 标记) + const hasAssistantTextReply = messages.some(msg => + msg.role === "assistant" && msg.parts?.some( + (part: any) => part.type === "text" && part.text?.includes("") + ) + ); + + if (hasImageContent) { // 有图片内容,隐藏占位图 console.log("[Messages useEffect] 有图片内容,隐藏占位图"); setShowThinkingWithDelay(false); - } else if (isGeneratingImage && !isGeneratingImageFlag) { - // 消息中有生成标记但 flag 还没设置(延迟期间) - // 这时候应该显示 AI 文字回复,不显示占位图 - console.log("[Messages useEffect] 生成标记存在但flag未设置(延迟期间),隐藏占位图让用户看文字"); + } else if (isGeneratingImageFlag) { + // 正在生成图片,显示生图占位图 + console.log("[Messages useEffect] isGeneratingImageFlag=true,显示生成占位图"); + setShowThinkingWithDelay(true); + } else if (hasAssistantTextReply) { + // 收到了 AI 文字回复但还没开始生图(延迟期间),隐藏占位图让用户看文字 + console.log("[Messages useEffect] 已收到AI文字回复,延迟期间隐藏占位图"); setShowThinkingWithDelay(false); } else if (status === "streaming" || status === "submitted") { // 正在处理中(分析意图或流式传输),显示普通思考占位图 @@ -390,7 +390,13 @@ function PureMessages({ const isWaitingForResponse = lastMessage?.role === "user"; // 恢复的待处理状态:有 pendingGeneration 且最后一条是用户消息 - const hasRestoredPending = pendingGeneration && isWaitingForResponse; + // 🆕 但如果收到了 AI 回复(包含 GENERATING_IMAGE 标记),不应该再显示恢复的占位图 + const hasAssistantReply = messages.some(msg => + msg.role === "assistant" && msg.parts?.some( + (part: any) => part.type === "text" && part.text?.includes("") + ) + ); + const hasRestoredPending = pendingGeneration && isWaitingForResponse && !hasAssistantReply; // 🔍 调试日志 console.log("[Messages] 占位图状态检查:", { @@ -398,9 +404,10 @@ function PureMessages({ lastMessageRole: lastMessage?.role, isWaitingForResponse, hasRestoredPending, + hasAssistantReply, showThinkingWithDelay, messagesCount: messages.length, - isGeneratingImageFlag, // 🆕 添加这个调试 + isGeneratingImageFlag, }); // 显示条件:正常等待动画 或 恢复的待处理状态