lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 对话消息出现后延迟6秒再显示生图占位图

Browse Source 
流程：
1. 用户发送请求 → 显示思考动画
2. 对话消息出现 → 思考动画消失，显示对话文字
3. 等待6秒 → 显示生图占位图
4. 图片生成完成 → 占位图消失

修改：
- 添加 showImagePlaceholderDelayed 状态
- 收到 GENERATING_IMAGE 标记后延迟6秒设置状态
- 生图占位图根据延迟状态显示

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Your Name 2026-02-01 02:28:38 +08:00
parent 58d0b8b5dd
commit 98807b135a
1 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/messages.tsx
View File

@ -126,6 +126,8 @@ function PureMessages({
// 控制等待动画延迟消失（Gemini 图片模型延迟 4 秒，其他模型 6 秒）
const [showThinkingWithDelay, setShowThinkingWithDelay] = useState(false);
// 🆕 智能自动模式：收到对话消息后延迟显示生图占位图
const [showImagePlaceholderDelayed, setShowImagePlaceholderDelayed] = useState(false);
useEffect(() => {
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : null;
@ -222,21 +224,29 @@ function PureMessages({
if (isAutoModeWithImage) {
if (hasImageContent) {
// 图片已生成，延迟后隐藏占位图
setShowImagePlaceholderDelayed(false);
const timer = setTimeout(() => {
setShowThinkingWithDelay(false);
}, delayTime);
return () => clearTimeout(timer);
} else if (isGeneratingImage) {
// 收到 GENERATING_IMAGE 标记，显示生图占位图
setShowThinkingWithDelay(true);
// 收到 GENERATING_IMAGE 标记，延迟6秒后显示生图占位图
// 立即隐藏思考动画（因为对话文字已经显示了）
setShowThinkingWithDelay(false);
// 延迟6秒后显示生图占位图
const timer = setTimeout(() => {
setShowImagePlaceholderDelayed(true);
}, 6000);
return () => clearTimeout(timer);
} else if (status === "submitted" || (status === "streaming" && !hasTextContent)) {
// 正在分析意图，显示普通思考动画
setShowThinkingWithDelay(true);
} else if (status === "streaming" && hasTextContent && !isGeneratingImage) {
// 对话消息出现了但还没有 GENERATING_IMAGE 标记，继续显示思考动画
setShowThinkingWithDelay(true);
setShowImagePlaceholderDelayed(false);
} else {
// 其他情况：隐藏所有占位图
setShowThinkingWithDelay(false);
setShowImagePlaceholderDelayed(false);
}
} else {
// 非智能自动模式的原有逻辑
@ -363,6 +373,17 @@ function PureMessages({
messagesCount: messages.length,
});
// 🆕 检查智能自动模式
const isAutoMode = selectedModelId === "auto";
const lastUserMsg = [...messages].reverse().find(m => m.role === "user");
const userMessageHasImage = lastUserMsg?.parts?.some((p: any) => p.type === "file" || p.type === "image");
// 🆕 智能自动模式：使用延迟状态显示生图占位图
if (isAutoMode && userMessageHasImage && showImagePlaceholderDelayed) {
console.log("[Messages] ✅ 显示智能处理生图占位图 (延迟后)");
return <ImageGenerationLoading imageCount={imageCount} maxImages={6} providerType="alibaba-image" modelName="智能处理" />;
}
// 显示条件：正常等待动画 或 恢复的待处理状态
const shouldShow = showThinkingWithDelay || hasRestoredPending;
@ -380,30 +401,12 @@ function PureMessages({
const showAlibabaImage = modelType === "alibaba-image" || (!modelType && isAlibabaImageModel);
const showVideo = modelType === "volcano-video" || modelType === "qianwen-video" || (!modelType && (isQianwenVideoModel || isVideoModel));
// 🆕 检查智能自动模式
const isAutoMode = selectedModelId === "auto";
const lastUserMsg = [...messages].reverse().find(m => m.role === "user");
const userMessageHasImage = lastUserMsg?.parts?.some((p: any) => p.type === "file" || p.type === "image");
// 🆕 检查是否收到了 GENERATING_IMAGE 标记（表示对话已发送，开始生图）
const hasGeneratingMarker = messages.some(msg =>
msg.role === "assistant" && msg.parts?.some(
(part: any) => part.type === "text" && part.text?.includes("<!-- GENERATING_IMAGE -->")
)
);
// 🆕 智能自动模式：根据阶段显示不同占位图
const showAutoModeImagePlaceholder = isAutoMode && userMessageHasImage && hasGeneratingMarker;
const showAutoModeThinking = isAutoMode && userMessageHasImage && !hasGeneratingMarker;
if (showVideo) return <QianwenVideoLoading />;
if (showGemini) return <GeminiImageLoading imageCount={imageCount} />;
if (showVolcano) return <VolcanoVisionLoading imageCount={imageCount} />;
if (showAlibabaImage) return <ImageGenerationLoading imageCount={imageCount} maxImages={6} providerType="alibaba-image" modelName={currentModelDisplayName} />;
// 🆕 智能自动模式：收到 GENERATING_IMAGE 后显示生图占位图
if (showAutoModeImagePlaceholder) return <ImageGenerationLoading imageCount={imageCount} maxImages={6} providerType="alibaba-image" modelName="智能处理" />;
// 🆕 智能自动模式：分析阶段显示思考动画
if (showAutoModeThinking) return <ThinkingMessage />;
if (isAutoMode && userMessageHasImage) return <ThinkingMessage />;
// 其他情况显示通用思考动画
return <ThinkingMessage />;
})()}