From a5e77041d0ccfae46dad022ed2773e3f74f9dc5c Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 26 Jan 2026 22:56:04 +1300
Subject: [PATCH] feat(32-01): integrate ChatPanel with toggle button in
 WorkflowCanvas

- Add isChatOpen state for chat visibility
- Add chat toggle button positioned above MiniMap
- Render ChatPanel conditionally when open
- Style toggle button with active/inactive states
---
 src/components/WorkflowCanvas.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/WorkflowCanvas.tsx b/src/components/WorkflowCanvas.tsx
index 929bf343..27db712c 100644
--- a/src/components/WorkflowCanvas.tsx
+++ b/src/components/WorkflowCanvas.tsx
@@ -38,6 +38,7 @@ import { NodeType, NanoBananaNodeData } from "@/types";
 import { detectAndSplitGrid } from "@/utils/gridSplitter";
 import { logger } from "@/utils/logger";
 import { WelcomeModal } from "./quickstart";
+import { ChatPanel } from "./ChatPanel";
 
 const nodeTypes: NodeTypes = {
   imageInput: ImageInputNode,
@@ -184,6 +185,7 @@ export function WorkflowCanvas() {
   const [dropType, setDropType] = useState<"image" | "workflow" | "node" | null>(null);
   const [connectionDrop, setConnectionDrop] = useState<ConnectionDropState | null>(null);
   const [isSplitting, setIsSplitting] = useState(false);
+  const [isChatOpen, setIsChatOpen] = useState(false);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
   // Detect if canvas is empty for showing quickstart
@@ -1326,6 +1328,29 @@ export function WorkflowCanvas() {
 
       {/* Global image history */}
       <GlobalImageHistory />
+
+      {/* Chat toggle button - positioned above minimap */}
+      <button
+        onClick={() => setIsChatOpen(!isChatOpen)}
+        className={`fixed bottom-[180px] right-5 w-10 h-10 rounded-full flex items-center justify-center transition-colors z-40 ${
+          isChatOpen
+            ? "bg-blue-600 text-white"
+            : "bg-neutral-800 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-700 border border-neutral-700"
+        }`}
+        title={isChatOpen ? "Close chat" : "Open workflow assistant"}
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+          />
+        </svg>
+      </button>
+
+      {/* Chat panel */}
+      <ChatPanel isOpen={isChatOpen} onClose={() => setIsChatOpen(false)} />
     </div>
   );
 }