feat(Hook): useStreamChat 支持图片生成状态管理

- 新增 GeneratedImageData 类型定义
- 添加 isGeneratingImage 和 generatedImages 状态
- 处理流式返回的图片生成事件
- 支持图片生成完成后的状态更新
This commit is contained in:
gaoziman 2025-12-27 15:01:57 +08:00
parent c72b4ce3e2
commit 81e437d0b4

View File

@ -14,7 +14,7 @@ import {
} from '@/utils/document-utils';
export interface StreamMessage {
type: 'thinking' | 'text' | 'tool_use_start' | 'tool_execution_result' | 'tool_search_images' | 'tool_search_videos' | 'pyodide_execution_required' | 'tool_used' | 'done' | 'error';
type: 'thinking' | 'text' | 'tool_use_start' | 'tool_execution_result' | 'tool_search_images' | 'tool_search_videos' | 'pyodide_execution_required' | 'tool_used' | 'done' | 'error' | 'image_generation_start' | 'generated_image' | 'image_generation_complete';
content?: string;
id?: string;
name?: string;
@ -36,6 +36,11 @@ export interface StreamMessage {
// 工具使用相关
toolName?: string;
usedTools?: string[];
// AI 图片生成相关
model?: string;
image?: GeneratedImageData;
index?: number;
imageCount?: number;
}
// 搜索图片数据类型
@ -62,6 +67,14 @@ export interface SearchVideoData {
coverImage: string;
}
// AI 生成的图片数据类型Gemini 等图片生成模型返回)
export interface GeneratedImageData {
mimeType: string; // 图片 MIME 类型,如 "image/png"、"image/jpeg"
data: string; // Base64 编码的图片数据
width?: number; // 图片宽度(可选)
height?: number; // 图片高度(可选)
}
export interface ChatMessage {
id: string;
role: 'user' | 'assistant';
@ -89,6 +102,10 @@ export interface ChatMessage {
message: string;
progress?: number;
};
// AI 生成的图片Gemini 等图片生成模型)
generatedImages?: GeneratedImageData[];
// 是否正在生成图片
isGeneratingImage?: boolean;
}
/**
@ -616,6 +633,55 @@ export function useStreamChat() {
return updated;
});
}
} else if (event.type === 'image_generation_start') {
// 图片生成开始
console.log('[useStreamChat] Image generation started, model:', event.model);
setMessages((prev) => {
const updated = [...prev];
const lastIndex = updated.length - 1;
if (updated[lastIndex]?.role === 'assistant') {
updated[lastIndex] = {
...updated[lastIndex],
isGeneratingImage: true,
};
}
return updated;
});
} else if (event.type === 'generated_image') {
// 收到一张生成的图片
if (event.image) {
console.log('[useStreamChat] Received generated image:', {
mimeType: event.image.mimeType,
dataLength: event.image.data?.length || 0,
index: event.index,
});
setMessages((prev) => {
const updated = [...prev];
const lastIndex = updated.length - 1;
if (updated[lastIndex]?.role === 'assistant') {
const existingGeneratedImages = updated[lastIndex].generatedImages || [];
updated[lastIndex] = {
...updated[lastIndex],
generatedImages: [...existingGeneratedImages, event.image!],
};
}
return updated;
});
}
} else if (event.type === 'image_generation_complete') {
// 图片生成完成
console.log('[useStreamChat] Image generation complete, count:', event.imageCount);
setMessages((prev) => {
const updated = [...prev];
const lastIndex = updated.length - 1;
if (updated[lastIndex]?.role === 'assistant') {
updated[lastIndex] = {
...updated[lastIndex],
isGeneratingImage: false,
};
}
return updated;
});
} else if (event.type === 'pyodide_execution_required') {
// 需要在浏览器端执行 Python 图形代码
const code = event.code || '';