From e53f77a2a6715dbb396a484dc4427aba68288302 Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Sat, 15 Nov 2025 12:09:32 +0900
Subject: [PATCH] feat: add show/hide chat panel with Ctrl+B shortcut

- Add toggle button in chat panel header
- Implement collapsed state with thin vertical strip
- Add Ctrl+B keyboard shortcut to toggle visibility
- Canvas expands to full width when chat is hidden
- Smooth 300ms transition animation
---
 app/page.tsx              | 26 +++++++++++++++--
 components/chat-panel.tsx | 60 ++++++++++++++++++++++++++++++++-------
 2 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6bf5518..4cc67fb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,6 +7,7 @@ import { useDiagram } from "@/contexts/diagram-context";
 export default function Home() {
     const { drawioRef, handleDiagramExport } = useDiagram();
     const [isMobile, setIsMobile] = useState(false);
+    const [isChatVisible, setIsChatVisible] = useState(true);
 
     useEffect(() => {
         const checkMobile = () => {
@@ -23,6 +24,22 @@ export default function Home() {
         return () => window.removeEventListener("resize", checkMobile);
     }, []);
 
+    // Add keyboard shortcut for toggling chat panel (Ctrl+B)
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if ((event.ctrlKey || event.metaKey) && event.key === 'b') {
+                event.preventDefault();
+                setIsChatVisible((prev) => !prev);
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+
     if (isMobile) {
         return (
             <div className="flex items-center justify-center h-screen bg-gray-100">
@@ -37,7 +54,7 @@ export default function Home() {
 
     return (
         <div className="flex h-screen bg-gray-100">
-            <div className="w-2/3 p-1 h-full relative">
+            <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
                 <DrawIoEmbed
                     ref={drawioRef}
                     onExport={handleDiagramExport}
@@ -49,8 +66,11 @@ export default function Home() {
                     }}
                 />
             </div>
-            <div className="w-1/3 h-full p-1">
-                <ChatPanel />
+            <div className={`${isChatVisible ? 'w-1/3' : 'w-12'} h-full p-1 transition-all duration-300 ease-in-out`}>
+                <ChatPanel
+                    isVisible={isChatVisible}
+                    onToggleVisibility={() => setIsChatVisible(!isChatVisible)}
+                />
             </div>
         </div>
     );
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 78f60da..8804f0a 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -3,6 +3,7 @@
 import type React from "react";
 import { useRef, useEffect, useState } from "react";
 import { FaGithub } from "react-icons/fa";
+import { PanelRightClose, PanelRightOpen } from "lucide-react";
 
 import {
     Card,
@@ -17,8 +18,14 @@ import { ChatInput } from "@/components/chat-input";
 import { ChatMessageDisplay } from "./chat-message-display";
 import { useDiagram } from "@/contexts/diagram-context";
 import { replaceNodes, formatXML } from "@/lib/utils";
+import { ButtonWithTooltip } from "@/components/button-with-tooltip";
 
-export default function ChatPanel() {
+interface ChatPanelProps {
+    isVisible: boolean;
+    onToggleVisibility: () => void;
+}
+
+export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelProps) {
     const {
         loadDiagram: onDisplayChart,
         handleExport: onExport,
@@ -187,18 +194,51 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         setFiles(newFiles);
     };
 
+    // Collapsed view when chat is hidden
+    if (!isVisible) {
+        return (
+            <Card className="h-full flex flex-col rounded-none py-0 gap-0 items-center justify-start pt-4">
+                <ButtonWithTooltip
+                    tooltipContent="Show chat panel (Ctrl+B)"
+                    variant="ghost"
+                    size="icon"
+                    onClick={onToggleVisibility}
+                >
+                    <PanelRightOpen className="h-5 w-5" />
+                </ButtonWithTooltip>
+                <div
+                    className="text-sm text-gray-500 mt-8"
+                    style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
+                >
+                    Chat
+                </div>
+            </Card>
+        );
+    }
+
+    // Full view when chat is visible
     return (
         <Card className="h-full flex flex-col rounded-none py-0 gap-0">
-            <CardHeader className="p-4 flex justify-between items-center">
+            <CardHeader className="p-4 flex flex-row justify-between items-center">
                 <CardTitle>Next-AI-Drawio</CardTitle>
-                <a
-                    href="https://github.com/DayuanJiang/next-ai-draw-io"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-gray-600 hover:text-gray-900 transition-colors"
-                >
-                    <FaGithub className="w-6 h-6" />
-                </a>
+                <div className="flex items-center gap-2">
+                    <ButtonWithTooltip
+                        tooltipContent="Hide chat panel (Ctrl+B)"
+                        variant="ghost"
+                        size="icon"
+                        onClick={onToggleVisibility}
+                    >
+                        <PanelRightClose className="h-5 w-5" />
+                    </ButtonWithTooltip>
+                    <a
+                        href="https://github.com/DayuanJiang/next-ai-draw-io"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                        <FaGithub className="w-6 h-6" />
+                    </a>
+                </div>
             </CardHeader>
             <CardContent className="flex-grow overflow-hidden px-2">
                 <ChatMessageDisplay