fix: 图片标签和文本输入在同一行

Co-authored-by: Cursor <cursoragent@cursor.com>

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 
-            <div className="flex flex-wrap gap-2 px-4 pt-3">
+            className="flex flex-wrap items-center gap-2 px-4 pt-3 min-h-[60px] cursor-text"
-              {attachments.map((att, index) => (
+            onClick={() => textareaRef.current?.focus()}
-                <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"
+            {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" />
-                  <img
+                </button>
-                    src={att.url}
+              </div>
-                    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>
-          )}
             
-          <Textarea
+            {/* 文本输入 - 自适应宽度 */}
-            ref={textareaRef}
+            <input
-            value={input}
+              ref={textareaRef as any}
-            onChange={(e) => setInput(e.target.value)}
+              type="text"
-            onKeyDown={(e) => {
+              value={input}
-              if (e.key === 'Enter' && !e.shiftKey) {
+              onChange={(e) => setInput(e.target.value)}
-                e.preventDefault();
+              onKeyDown={(e) => {
-                handleSend();
+                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",
+              placeholder={attachments.length > 0 ? "添加描述..." : "请输入你的设计需求"}
-              attachments.length > 0 ? "pt-2" : "pt-4"
+              className="flex-1 min-w-[120px] text-sm bg-transparent border-none outline-none placeholder:text-muted-foreground/50"
-            )}
+              disabled={isLoading}
-            disabled={isLoading}
+            />
-          />
+          </div>
+          
+          {/* 用于多行输入的隐藏区域 */}
+          <div className="h-8" />
           
           {/* Bottom Toolbar */}
           <div className="absolute left-2 bottom-2 right-2 flex items-center justify-between">