feat(Hook): useStreamChat 支持图片生成状态管理
- 新增 GeneratedImageData 类型定义 - 添加 isGeneratingImage 和 generatedImages 状态 - 处理流式返回的图片生成事件 - 支持图片生成完成后的状态更新
This commit is contained in:
parent
c72b4ce3e2
commit
81e437d0b4
@ -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 || '';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user