feat: 画布聊天支持智能自动模式

1. 添加「智能自动」模型选项(默认选中)
2. 使用 qwen3-vl 先对话理解需求、优化提示词
3. 然后自动调用最佳生图模型生成图片
4. 支持历史图片上下文自动关联

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Your Name 2026-02-01 15:17:18 +08:00
parent 8f90aaba08
commit 049795e264

View File

@ -167,12 +167,24 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
// 过滤支持图片生成的模型
const imageModels = modelsData?.models?.filter(m => m.supportsImageGen) || [];
// 默认选择第一个图片模型
// 智能自动模型选项
const SMART_AUTO_MODEL = {
id: "auto",
modelId: "auto",
displayName: "智能自动",
providerType: "auto",
supportsImageGen: true,
};
// 所有可选模型(智能自动 + 生图模型)
const allModels = [SMART_AUTO_MODEL, ...imageModels];
// 默认选择智能自动模型
useEffect(() => {
if (imageModels.length > 0 && !selectedModelId) {
setSelectedModelId(imageModels[0].id);
if (!selectedModelId) {
setSelectedModelId("auto"); // 默认使用智能自动模式
}
}, [imageModels, selectedModelId]);
}, [selectedModelId]);
const currentModelIdRef = useRef(selectedModelId);
const imageParamsRef = useRef(imageParams);
@ -759,15 +771,37 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
<Paperclip className="h-4 w-4" />
</Button>
{/* Agent Selector (Model) */}
{/* Agent Selector (Model) - 包含智能自动选项 */}
<Select value={selectedModelId} onValueChange={setSelectedModelId}>
<SelectTrigger className="h-8 text-xs bg-blue-50 text-blue-600 border-blue-100 hover:bg-blue-100 hover:border-blue-200 transition-colors rounded-full px-3 gap-1 w-auto">
<Sparkles className="h-3 w-3" />
<SelectTrigger className={cn(
"h-8 text-xs transition-colors rounded-full px-3 gap-1 w-auto",
selectedModelId === "auto"
? "bg-gradient-to-r from-purple-50 to-blue-50 text-purple-600 border-purple-100 hover:from-purple-100 hover:to-blue-100"
: "bg-blue-50 text-blue-600 border-blue-100 hover:bg-blue-100 hover:border-blue-200"
)}>
{selectedModelId === "auto" ? (
<Zap className="h-3 w-3" />
) : (
<Sparkles className="h-3 w-3" />
)}
<span className="truncate max-w-[80px]">
{imageModels.find(m => m.id === selectedModelId)?.displayName || "Agent"}
{allModels.find(m => m.id === selectedModelId)?.displayName || "智能自动"}
</span>
</SelectTrigger>
<SelectContent>
{/* 智能自动选项 */}
<SelectItem value="auto" className="text-xs">
<div className="flex items-center gap-2">
<Zap className="h-3 w-3 text-purple-500" />
<span>智能自动</span>
<span className="text-[10px] text-muted-foreground">先对话再生图</span>
</div>
</SelectItem>
{/* 分隔线 */}
{imageModels.length > 0 && (
<div className="my-1 border-t border-border" />
)}
{/* 生图模型列表 */}
{imageModels.map(model => (
<SelectItem key={model.id} value={model.id} className="text-xs">
<div className="flex items-center gap-2">
@ -781,13 +815,13 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
</div>
<div className="flex items-center gap-2">
{/* Image Params Bar */}
{/* Image Params Bar - 智能自动模式时也显示,用于设置最终生图参数 */}
<ImageParamsBar
modelName={imageModels.find(m => m.id === selectedModelId)?.displayName}
modelName={allModels.find(m => m.id === selectedModelId)?.displayName}
initialParams={imageParams}
onParamsChange={handleImageParamsChange}
inline={true}
providerType={imageModels.find(m => m.id === selectedModelId)?.providerType}
providerType={allModels.find(m => m.id === selectedModelId)?.providerType}
/>
<Button