From 8749f417738b0452f290d3a7b337c2862ea83f61 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Fri, 20 Feb 2026 12:35:10 +0800
Subject: [PATCH] feat: auto-collapse detail input panel after submit

---
 components/canvas/CanvasChatPanel.tsx | 77 ++++++++++++++++++++-------
 1 file changed, 58 insertions(+), 19 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 8e2747266..87187dca8 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -5,7 +5,7 @@ import { DefaultChatTransport } from "ai";
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
 import useSWR from "swr";
-import { Send, Loader2, ImagePlus, Paperclip, X, User, Bot, Plus, History, LayoutGrid, Maximize2, RefreshCw, Globe, Box, ArrowUp, Video, Sparkles, Check, ChevronDown, AlertCircle, CheckCircle2 } from "lucide-react";
+import { Send, Loader2, ImagePlus, Paperclip, X, User, Bot, Plus, History, LayoutGrid, Maximize2, RefreshCw, Globe, Box, ArrowUp, Video, Sparkles, Check, ChevronDown, ChevronUp, AlertCircle, CheckCircle2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -735,6 +735,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     assets: true,
     archives: true,
   });
+  const [isDetailWorkbenchCollapsed, setIsDetailWorkbenchCollapsed] = useState(false);
   const [detailProgress, setDetailProgress] = useState<{
     status: "idle" | "running" | "done" | "error";
     stage: string;
@@ -2481,6 +2482,12 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     selectedImageNodes.length,
   ]);
 
+  useEffect(() => {
+    if (!isDetailGenerationMode) {
+      setIsDetailWorkbenchCollapsed(false);
+    }
+  }, [isDetailGenerationMode]);
+
   const handleDetailSlotFileChange = useCallback(
     async (slotIndex: number, event: React.ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0];
@@ -2803,6 +2810,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     let completedDetailImageCount = 0;
     const generatedImages: Array<{ originalUrl: string; thumbnailUrl: string }> = [];
 
+    setIsDetailWorkbenchCollapsed(true);
     setIsDetailGenerating(true);
     setDetailProgress({
       status: "running",
@@ -4605,28 +4613,57 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                     固定规格 {DETAIL_TARGET_WIDTH} x {DETAIL_TARGET_HEIGHT}，先分析后生成，保持整套详情图风格统一。
                   </p>
                 </div>
-                <span
-                  className={cn(
-                    "shrink-0 whitespace-nowrap rounded-full px-2 py-0.5 text-[10px] font-medium leading-none",
-                    detailProgress.status === "running"
-                      ? "bg-blue-50 text-blue-700"
+                <div className="flex shrink-0 items-center gap-2">
+                  <button
+                    type="button"
+                    className="inline-flex items-center gap-1 rounded-md border border-black/15 px-2 py-1 text-[11px] text-black/70 hover:bg-black/[0.03]"
+                    onClick={() => setIsDetailWorkbenchCollapsed((prev) => !prev)}
+                  >
+                    {isDetailWorkbenchCollapsed ? (
+                      <>
+                        <ChevronDown className="h-3.5 w-3.5" />
+                        展开
+                      </>
+                    ) : (
+                      <>
+                        <ChevronUp className="h-3.5 w-3.5" />
+                        收起
+                      </>
+                    )}
+                  </button>
+                  <span
+                    className={cn(
+                      "whitespace-nowrap rounded-full px-2 py-0.5 text-[10px] font-medium leading-none",
+                      detailProgress.status === "running"
+                        ? "bg-blue-50 text-blue-700"
+                        : detailProgress.status === "done"
+                          ? "bg-emerald-100 text-emerald-700"
+                          : detailProgress.status === "error"
+                            ? "bg-red-100 text-red-700"
+                            : "bg-black/5 text-black/65"
+                    )}
+                  >
+                    {detailProgress.status === "running"
+                      ? "执行中"
                       : detailProgress.status === "done"
-                        ? "bg-emerald-100 text-emerald-700"
+                        ? "已完成"
                         : detailProgress.status === "error"
-                          ? "bg-red-100 text-red-700"
-                          : "bg-black/5 text-black/65"
-                  )}
-                >
-                  {detailProgress.status === "running"
-                    ? "执行中"
-                    : detailProgress.status === "done"
-                      ? "已完成"
-                      : detailProgress.status === "error"
-                        ? "异常"
-                        : "待启动"}
-                </span>
+                          ? "异常"
+                          : "待启动"}
+                  </span>
+                </div>
               </div>
 
+              {isDetailWorkbenchCollapsed ? (
+                <button
+                  type="button"
+                  className="mt-3 w-full rounded-xl border border-black/10 bg-black/[0.02] px-3 py-2 text-left text-[11px] text-black/60 hover:bg-black/[0.04]"
+                  onClick={() => setIsDetailWorkbenchCollapsed(false)}
+                >
+                  已收起详情输入区，点击展开继续编辑信息和素材。
+                </button>
+              ) : (
+                <>
               <div className="mt-3 rounded-xl border border-black/10 bg-black/[0.02] p-2">
                 <div className="mb-1 flex items-center justify-between text-[11px] text-black/55">
                   <span>{detailProgress.stage || "待开始：请先补齐输入信息与素材。"}</span>
@@ -5053,6 +5090,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                   </button>
                 </div>
               ) : null}
+                </>
+              )}
             </div>
           )}
           {/* 混合输入区域：使用 contenteditable 实现真正的混合编辑 */}