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

fix: update canvas chat panel header to match official design
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-01-24 22:29:31 +08:00
parent 77b2b765ea
commit 7704a799f8
2 changed files with 36 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/canvas/[id]/page.tsx
View File

@ -463,34 +463,9 @@ export default function CanvasEditorPage({ params }: PageProps) {
isPanelOpen ? "translate-x-0 opacity-100" : "translate-x-[120%] opacity-0"
)}>
<div className="h-full w-full rounded-2xl border bg-background/95 backdrop-blur-md shadow-2xl overflow-hidden flex flex-col">
{/* 移除 Tabs 组件，直接显示 AI 对话面板 */}
<div className="flex flex-col h-full">
<div className="px-4 pt-4 pb-2 bg-muted/30 border-b flex items-center justify-between">
<div className="flex items-center gap-2 text-sm font-medium">
<MessageSquare className="h-4 w-4" />
AI 对话
</div>
{/* Integrated Close Button */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={() => setIsPanelOpen(false)}
className="h-8 w-8 rounded-lg hover:bg-background/50"
>
<PanelRightClose className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>隐藏面板</TooltipContent>
</Tooltip>
</div>
{/* AI 对话内容 */}
<div className="flex-1 overflow-hidden">
<CanvasChatPanel chatId={`canvas-${id}`} />
</div>
{/* AI 对话内容 */}
<div className="flex-1 overflow-hidden">
<CanvasChatPanel chatId={`canvas-${id}`} onClose={() => setIsPanelOpen(false)} />
</div>
</div>
</div>

52
components/canvas/CanvasChatPanel.tsx
View File

@ -26,6 +26,7 @@ import { ImageParamsBar, type ImageGenerationParams } from "@/components/image-p
interface CanvasChatPanelProps {
chatId: string;
initialMessages?: ChatMessage[];
onClose?: () => void;
}
// 建议卡片数据 - 已移除
@ -54,7 +55,7 @@ function extractImageUrls(text: string): string[] {
return urls;
}
export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPanelProps) {
export function CanvasChatPanel({ chatId, initialMessages = [], onClose }: CanvasChatPanelProps) {
const [input, setInput] = useState("");
const [attachments, setAttachments] = useState<Attachment[]>([]);
const [selectedModelId, setSelectedModelId] = useState<string>("");
@ -312,28 +313,41 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
const isLoading = status === 'streaming' || status === 'submitted';
return (
<div className="flex flex-col h-full bg-background/50 backdrop-blur-sm">
<div className="flex flex-col h-full bg-background/50 backdrop-blur-sm relative">
{/* Header - Minimal with Icons */}
<div className="flex items-center justify-end gap-1 p-3 border-b bg-background/80 backdrop-blur-md sticky top-0 z-10">
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
<Plus className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
<History className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
<Share2 className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
<LayoutGrid className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
<Maximize2 className="h-4 w-4" />
</Button>
<div className="absolute top-0 right-0 z-20 p-4 flex flex-col items-end gap-2">
<div className="flex items-center gap-1">
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
<Plus className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
<History className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
<Share2 className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
<LayoutGrid className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
<Maximize2 className="h-4 w-4" />
</Button>
</div>
{onClose && (
<Button
variant="secondary"
size="sm"
onClick={onClose}
className="h-7 px-3 text-xs rounded-full bg-muted/80 backdrop-blur-sm hover:bg-muted shadow-sm"
>
收起
</Button>
)}
</div>
{/* 消息列表 */}
<ScrollArea className="flex-1 p-4">
<ScrollArea className="flex-1 p-4 pt-16">
<div className="space-y-6">
{messages.length === 0 && (
<div className="flex flex-col h-full pt-4">