lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化占位图显示时序
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source 
1. AI 文字回复显示后延迟 3 秒再显示动态占位图
2. 延迟期间隐藏占位图，让用户有时间阅读文字
3. 只有 isGeneratingImageFlag=true 时才显示图片生成占位图

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Your Name 2026-02-01 10:42:28 +08:00
parent b60afb16cb
commit 2fc702b543
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/chat.tsx
View File

@ -301,8 +301,13 @@ export function Chat({
(part: any) => part.type === "text" && part.text?.includes("<!-- GENERATING_IMAGE -->")
);
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 秒，让用户有时间阅读文字
}
// 🆕 检测是否包含图片（生成完成）

28
components/messages.tsx
View File

@ -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 或其他状态：不显示占位图