From c8e565d0168df2e528a9793938e2c002e045e920 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Feb 2026 22:24:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8F=91=E9=80=81?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=A2=AB=E6=8C=A4=E5=87=BA=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E7=9A=84=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/canvas/CanvasChatPanel.tsx | 52 ++++++++++++++-------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 4a6524b1d..0c76bee89 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -1037,8 +1037,9 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
           </div>
           
           {/* Bottom Toolbar */}
-          <div className="absolute left-2 bottom-2 right-2 flex items-center justify-between">
-            <div className="flex items-center gap-2">
+          <div className="absolute left-2 bottom-2 right-2 flex items-center gap-2">
+            {/* 左侧：附件和模型选择 */}
+            <div className="flex items-center gap-2 min-w-0 flex-shrink">
               <input
                 ref={fileInputRef}
                 type="file"
@@ -1050,7 +1051,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                className="h-8 w-8 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors flex-shrink-0"
                 onClick={() => fileInputRef.current?.click()}
                 disabled={isLoading}
               >
@@ -1060,7 +1061,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
               {/* Agent Selector (Model) - 包含智能自动选项 */}
               <Select value={selectedModelId} onValueChange={setSelectedModelId}>
                 <SelectTrigger className={cn(
-                  "h-8 text-xs transition-colors rounded-full px-3 gap-1 w-auto",
+                  "h-8 text-xs transition-colors rounded-full px-3 gap-1 w-auto flex-shrink-0",
                   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"
@@ -1070,7 +1071,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                   ) : (
                     <Sparkles className="h-3 w-3" />
                   )}
-                  <span className="truncate max-w-[80px]">
+                  <span className="truncate max-w-[60px]">
                     {allModels.find(m => m.id === selectedModelId)?.displayName || "智能自动"}
                   </span>
                 </SelectTrigger>
@@ -1100,8 +1101,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
               </Select>
             </div>
 
-            <div className="flex items-center gap-2">
-              {/* Image Params Bar - 智能自动模式时也显示，用于设置最终生图参数 */}
+            {/* 中间：图片参数（可收缩） */}
+            <div className="flex-1 min-w-0 overflow-hidden">
               <ImageParamsBar
                 modelName={allModels.find(m => m.id === selectedModelId)?.displayName}
                 initialParams={imageParams}
@@ -1109,25 +1110,26 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                 inline={true}
                 providerType={allModels.find(m => m.id === selectedModelId)?.providerType}
               />
-
-              <Button
-                size="icon"
-                className={cn(
-                  "h-8 w-8 rounded-full transition-all duration-200",
-                  input.trim() || attachments.length > 0 
-                    ? "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90" 
-                    : "bg-muted text-muted-foreground hover:bg-muted/80"
-                )}
-                onClick={handleSend}
-                disabled={isLoading || (!input.trim() && attachments.length === 0)}
-              >
-                {isLoading ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <ArrowUp className="h-4 w-4" />
-                )}
-              </Button>
             </div>
+
+            {/* 右侧：发送按钮（固定不收缩） */}
+            <Button
+              size="icon"
+              className={cn(
+                "h-8 w-8 rounded-full transition-all duration-200 flex-shrink-0",
+                input.trim() || attachments.length > 0 
+                  ? "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90" 
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              )}
+              onClick={handleSend}
+              disabled={isLoading || (!input.trim() && attachments.length === 0)}
+            >
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <ArrowUp className="h-4 w-4" />
+              )}
+            </Button>
           </div>
         </div>
       </div>