From 0279627ecc0fdda6b9ab4127022ab43ee3eb58e4 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 24 Jan 2026 22:09:07 +0800
Subject: [PATCH] fix: remove input shadow and use real image params in canvas
 chat

---
 components/canvas/CanvasChatPanel.tsx | 60 +++++++++++++++++++++------
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 9761536d1..ac451039e 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -21,6 +21,7 @@ import { useCanvasStore } from "@/store/canvas";
 import { cn } from "@/lib/utils";
 import { fetcher, fetchWithErrorHandlers, generateUUID } from "@/lib/utils";
 import type { Attachment, ChatMessage } from "@/lib/types";
+import { ImageParamsBar, type ImageGenerationParams } from "@/components/image-params-bar";
 
 interface CanvasChatPanelProps {
   chatId: string;
@@ -61,6 +62,36 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   
+  // 🆕 图片参数状态
+  const [imageParams, setImageParams] = useState<ImageGenerationParams>({
+    aspectRatio: "auto",
+    imageSize: "2K",
+    imageCount: 1,
+  });
+
+  // 🆕 保存图片参数到 localStorage
+  const handleImageParamsChange = (params: ImageGenerationParams) => {
+    setImageParams(params);
+    try {
+      localStorage.setItem("canvas-image-params", JSON.stringify(params));
+    } catch (e) {
+      console.error("Failed to save image params:", e);
+    }
+  };
+
+  // 加载图片参数
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("canvas-image-params");
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        setImageParams(prev => ({ ...prev, ...parsed }));
+      }
+    } catch (e) {
+      console.error("Failed to load image params:", e);
+    }
+  }, []);
+
   // Canvas store
   const addNode = useCanvasStore((state) => state.addNode);
   const nodes = useCanvasStore((state) => state.nodes);
@@ -88,10 +119,16 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
   }, [imageModels, selectedModelId]);
   
   const currentModelIdRef = useRef(selectedModelId);
+  const imageParamsRef = useRef(imageParams);
+
   useEffect(() => {
     currentModelIdRef.current = selectedModelId;
   }, [selectedModelId]);
 
+  useEffect(() => {
+    imageParamsRef.current = imageParams;
+  }, [imageParams]);
+
   const {
     messages,
     setMessages,
@@ -113,6 +150,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
             message: request.messages.at(-1),
             selectedChatModel: currentModelIdRef.current,
             selectedVisibilityType: "private",
+            imageParams: imageParamsRef.current, // 传递图片参数
             ...request.body,
           },
         };
@@ -456,7 +494,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
           </div>
         )}
 
-        <div className="relative bg-card rounded-3xl border shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all">
+        <div className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background">
           <Textarea
             ref={textareaRef}
             value={input}
@@ -515,18 +553,14 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
             </div>
 
             <div className="flex items-center gap-2">
-              {/* Style/Settings Icons (Visual only for now) */}
-              <div className="flex items-center gap-1 mr-2 border-r pr-2">
-                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-muted-foreground">
-                  <Zap className="h-4 w-4" />
-                </Button>
-                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-muted-foreground">
-                  <Globe className="h-4 w-4" />
-                </Button>
-                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-muted-foreground">
-                  <Box className="h-4 w-4" />
-                </Button>
-              </div>
+              {/* Image Params Bar */}
+              <ImageParamsBar
+                modelName={imageModels.find(m => m.id === selectedModelId)?.displayName}
+                initialParams={imageParams}
+                onParamsChange={handleImageParamsChange}
+                inline={true}
+                providerType={imageModels.find(m => m.id === selectedModelId)?.providerType}
+              />
 
               <Button
                 size="icon"