lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auto-collapse detail input panel after submit
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-02-20 12:35:10 +08:00
parent ac51a8c6f5
commit 8749f41773
1 changed files with 58 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
components/canvas/CanvasChatPanel.tsx
View File

@ -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 实现真正的混合编辑 */}