调整首尾帧入口位置并支持模式按钮切换

components/canvas/CanvasChatPanel.tsx

@@ -323,6 +323,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
   });
   const [videoParams, setVideoParams] = useState<VideoGenerationParams | null>(null);
   const [videoSlotUploading, setVideoSlotUploading] = useState<number | null>(null);
+  const [lastImageModelId, setLastImageModelId] = useState<string>("auto");
+  const [lastVideoModelId, setLastVideoModelId] = useState<string | null>(null);
 
   // 🆕 保存图片参数到 localStorage
   const handleImageParamsChange = (params: ImageGenerationParams) => {
@@ -872,6 +874,11 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     if (videoParams.mode === "first-frame") return ["首帧"] as string[];
     return [] as string[];
   }, [isVideoModel, videoParams]);
+
+  const firstVideoModelId = useMemo(
+    () => allModels.find((model) => VIDEO_PROVIDER_TYPES.has(model.providerType))?.id || null,
+    [allModels]
+  );
   
   // 默认选择模型（根据系统设置）
   useEffect(() => {
@@ -920,6 +927,43 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     });
   }, [isVideoModel, videoFrameSlots.length]);
 
+  useEffect(() => {
+    if (!currentModel) return;
+    if (isVideoModel) {
+      setLastVideoModelId(currentModel.id);
+      return;
+    }
+    setLastImageModelId(currentModel.id);
+  }, [currentModel, isVideoModel]);
+
+  const handleToggleGenerateMode = useCallback(() => {
+    if (isVideoModel) {
+      const preferredImageModelId =
+        allModels.find(
+          (model) => model.id === lastImageModelId && !VIDEO_PROVIDER_TYPES.has(model.providerType)
+        )?.id || "auto";
+      setSelectedModelId(preferredImageModelId);
+      return;
+    }
+
+    const preferredVideoModelId =
+      allModels.find(
+        (model) => model.id === lastVideoModelId && VIDEO_PROVIDER_TYPES.has(model.providerType)
+      )?.id || firstVideoModelId;
+
+    if (!preferredVideoModelId) {
+      toast.error("当前没有可用的视频模型");
+      return;
+    }
+    setSelectedModelId(preferredVideoModelId);
+  }, [
+    allModels,
+    firstVideoModelId,
+    isVideoModel,
+    lastImageModelId,
+    lastVideoModelId,
+  ]);
+
   useEffect(() => {
     if (videoFrameSlots.length === 0) return;
     const editableDiv = textareaRef.current as HTMLDivElement | null;
@@ -2361,10 +2405,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
         >
           {/* 混合输入区域：使用 contenteditable 实现真正的混合编辑 */}
           <div
-            className={cn(
-              "relative px-4 pt-3 min-h-[60px]",
-              isVideoModel && videoFrameSlots.length > 0 ? "pb-40" : "pb-12"
-            )}
+            className="relative px-4 pt-3 pb-12 min-h-[60px]"
           >
             <div
               ref={textareaRef as any}
@@ -2421,7 +2462,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
           </div>
 
           {isVideoModel && videoFrameSlots.length > 0 && (
-            <div className="px-4 pb-2">
+            <div className="mb-11 px-4 pb-1">
               <div className="flex flex-row gap-2">
                 {videoFrameSlots.map((label, index) => {
                   const slotAttachment = attachments[index];
@@ -2502,11 +2543,12 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
               <Button
                 type="button"
                 variant="ghost"
+                onClick={handleToggleGenerateMode}
                 className={cn(
-                  "h-8 rounded-full px-3 text-sm font-medium",
+                  "h-8 cursor-pointer rounded-full px-3 text-sm font-medium",
                   isVideoModel
                     ? "border border-blue-500 bg-blue-50 text-blue-600 hover:bg-blue-100"
-                    : "border border-emerald-500 bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
+                    : "border border-purple-500 bg-purple-50 text-purple-700 hover:bg-purple-100"
                 )}
               >
                 {isVideoModel ? (