From e5524fbaf51154b4ecb137de3daf2919205e55ed Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Feb 2026 17:21:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E7=89=87=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E5=92=8C=E6=96=87=E6=9C=AC=E8=BE=93=E5=85=A5=E5=9C=A8=E5=90=8C?=
 =?UTF-8?q?=E4=B8=80=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/canvas/CanvasChatPanel.tsx | 97 ++++++++++++++-------------
 1 file changed, 52 insertions(+), 45 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 81f67e8..5b6ded8 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -880,53 +880,60 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
       {/* 底部输入区域 - Redesigned */}
       <div className="p-4 bg-background/80 backdrop-blur-md border-t">
         <div className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background">
-          {/* 附件标签 - 显示在输入框内部顶部 */}
-          {attachments.length > 0 && (
-            <div className="flex flex-wrap gap-2 px-4 pt-3">
-              {attachments.map((att, index) => (
-                <div 
-                  key={index} 
-                  className="inline-flex items-center gap-1.5 bg-muted/60 hover:bg-muted rounded-full pl-1 pr-2 py-1 group transition-colors"
+          {/* 混合输入区域：图片标签 + 文本输入在同一行 */}
+          <div 
+            className="flex flex-wrap items-center gap-2 px-4 pt-3 min-h-[60px] cursor-text"
+            onClick={() => textareaRef.current?.focus()}
+          >
+            {/* 附件标签 */}
+            {attachments.map((att, index) => (
+              <div 
+                key={index} 
+                className="inline-flex items-center gap-1.5 bg-muted/60 hover:bg-muted rounded-full pl-1 pr-2 py-1 shrink-0 transition-colors"
+              >
+                {/* 小缩略图 */}
+                <img
+                  src={att.url}
+                  alt=""
+                  className="h-6 w-6 object-cover rounded-full border border-border/50"
+                />
+                {/* 图片名称 */}
+                <span className="text-xs text-foreground/80 max-w-[80px] truncate">
+                  {att.name || 'Image'}
+                </span>
+                {/* 删除按钮 */}
+                <button
+                  className="h-4 w-4 flex items-center justify-center rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeAttachment(index);
+                  }}
                 >
-                  {/* 小缩略图 */}
-                  <img
-                    src={att.url}
-                    alt=""
-                    className="h-6 w-6 object-cover rounded-full border border-border/50"
-                  />
-                  {/* 图片名称 */}
-                  <span className="text-xs text-foreground/80 max-w-[80px] truncate">
-                    {att.name || 'Image'}
-                  </span>
-                  {/* 删除按钮 */}
-                  <button
-                    className="h-4 w-4 flex items-center justify-center rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
-                    onClick={() => removeAttachment(index)}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            ))}
+            
+            {/* 文本输入 - 自适应宽度 */}
+            <input
+              ref={textareaRef as any}
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSend();
+                }
+              }}
+              placeholder={attachments.length > 0 ? "添加描述..." : "请输入你的设计需求"}
+              className="flex-1 min-w-[120px] text-sm bg-transparent border-none outline-none placeholder:text-muted-foreground/50"
+              disabled={isLoading}
+            />
+          </div>
           
-          <Textarea
-            ref={textareaRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                handleSend();
-              }
-            }}
-            placeholder="请输入你的设计需求"
-            className={cn(
-              "min-h-[60px] max-h-[120px] w-full text-sm resize-none bg-transparent border-none focus-visible:ring-0 px-4 pb-12 placeholder:text-muted-foreground/50",
-              attachments.length > 0 ? "pt-2" : "pt-4"
-            )}
-            disabled={isLoading}
-          />
+          {/* 用于多行输入的隐藏区域 */}
+          <div className="h-8" />
           
           {/* Bottom Toolbar */}
           <div className="absolute left-2 bottom-2 right-2 flex items-center justify-between">