Browse Source

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
handoff-20260429-1057
shrimbly 6 months ago
parent
commit
a5e77041d0
  1. 25
      src/components/WorkflowCanvas.tsx

25
src/components/WorkflowCanvas.tsx

@ -38,6 +38,7 @@ import { NodeType, NanoBananaNodeData } from "@/types";
import { detectAndSplitGrid } from "@/utils/gridSplitter"; import { detectAndSplitGrid } from "@/utils/gridSplitter";
import { logger } from "@/utils/logger"; import { logger } from "@/utils/logger";
import { WelcomeModal } from "./quickstart"; import { WelcomeModal } from "./quickstart";
import { ChatPanel } from "./ChatPanel";
const nodeTypes: NodeTypes = { const nodeTypes: NodeTypes = {
imageInput: ImageInputNode, imageInput: ImageInputNode,
@ -184,6 +185,7 @@ export function WorkflowCanvas() {
const [dropType, setDropType] = useState<"image" | "workflow" | "node" | null>(null); const [dropType, setDropType] = useState<"image" | "workflow" | "node" | null>(null);
const [connectionDrop, setConnectionDrop] = useState<ConnectionDropState | null>(null); const [connectionDrop, setConnectionDrop] = useState<ConnectionDropState | null>(null);
const [isSplitting, setIsSplitting] = useState(false); const [isSplitting, setIsSplitting] = useState(false);
const [isChatOpen, setIsChatOpen] = useState(false);
const reactFlowWrapper = useRef<HTMLDivElement>(null); const reactFlowWrapper = useRef<HTMLDivElement>(null);
// Detect if canvas is empty for showing quickstart // Detect if canvas is empty for showing quickstart
@ -1326,6 +1328,29 @@ export function WorkflowCanvas() {
{/* Global image history */} {/* Global image history */}
<GlobalImageHistory /> <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> </div>
); );
} }

Loading…
Cancel
Save