From de63528cc1de0cea4d6f359e2a4232f6b41ba672 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Feb 2026 17:24:34 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E5=B8=83=E5=B1=80=EF=BC=8C=E5=9B=BE=E7=89=87=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E5=9C=A8=E4=B8=8A=E6=96=B9?=
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 | 73 ++++++++++++---------------
 1 file changed, 32 insertions(+), 41 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 5b6ded8..2dc5fe4 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -880,44 +880,38 @@ 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">
-          {/* 混合输入区域：图片标签 + 文本输入在同一行 */}
-          <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);
-                  }}
-                >
-                  <X className="h-3 w-3" />
-                </button>
+          {/* 混合输入区域：使用 contenteditable 实现图片标签和文字混合 */}
+          <div className="relative px-4 pt-3 pb-12 min-h-[80px]">
+            {/* 图片标签显示在输入框上方 */}
+            {attachments.length > 0 && (
+              <div className="flex flex-wrap gap-2 mb-2">
+                {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-[100px] 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>
-            ))}
+            )}
             
-            {/* 文本输入 - 自适应宽度 */}
-            <input
-              ref={textareaRef as any}
-              type="text"
+            {/* 文本输入 */}
+            <Textarea
+              ref={textareaRef}
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => {
@@ -926,15 +920,12 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                   handleSend();
                 }
               }}
-              placeholder={attachments.length > 0 ? "添加描述..." : "请输入你的设计需求"}
-              className="flex-1 min-w-[120px] text-sm bg-transparent border-none outline-none placeholder:text-muted-foreground/50"
+              placeholder="请输入你的设计需求，例如：把椅子颜色改成红色"
+              className="min-h-[40px] max-h-[100px] w-full text-sm resize-none bg-transparent border-none focus-visible:ring-0 p-0 placeholder:text-muted-foreground/50"
               disabled={isLoading}
             />
           </div>
           
-          {/* 用于多行输入的隐藏区域 */}
-          <div className="h-8" />
-          
           {/* Bottom Toolbar */}
           <div className="absolute left-2 bottom-2 right-2 flex items-center justify-between">
             <div className="flex items-center gap-2">