From 41fa6252717f8d107be744935c4ada597a02b375 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 21 May 2025 20:12:59 +0000
Subject: [PATCH] feat: Modify canvas opening and collapse behavior

Implements two main changes to the canvas functionality:

1.  Conditional Canvas Opening:
    - The canvas panel now only opens if you have started a chat AND the currently active artifact is of type 'code' or 'text' (markdown).
    - This prevents the canvas from appearing for other artifact types or when no relevant file is being worked on.

2.  Explicit Canvas Collapse/Expand:
    - A new state `isCanvasPanelCollapsed` is added to the `CanvasComponent`.
    - A collapse/expand button is added to the `ArtifactHeader`. This button toggles the `isCanvasPanelCollapsed` state.
    - If the canvas panel is collapsed, it and its resizable handle are hidden.
    - The chat panel dynamically adjusts its size:
        - If the canvas is collapsed, the chat panel expands to take the full width.
        - If the chat is collapsed, the canvas panel expands to take the full width.

These changes provide you with more control over the canvas visibility and ensure it's only present when relevant.
---
 .../components/artifacts/ArtifactRenderer.tsx |  4 ++++
 .../src/components/artifacts/header/index.tsx | 23 +++++++++++++++++--
 apps/web/src/components/canvas/canvas.tsx     | 21 +++++++++++++----
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/artifacts/ArtifactRenderer.tsx b/apps/web/src/components/artifacts/ArtifactRenderer.tsx
index 7a2caf4a..95e11cd2 100644
--- a/apps/web/src/components/artifacts/ArtifactRenderer.tsx
+++ b/apps/web/src/components/artifacts/ArtifactRenderer.tsx
@@ -26,6 +26,8 @@ export interface ArtifactRendererProps {
   setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
   chatCollapsed: boolean;
   setChatCollapsed: (c: boolean) => void;
+  isCanvasPanelCollapsed: boolean;
+  setIsCanvasPanelCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 interface SelectionBox {
@@ -318,6 +320,8 @@ function ArtifactRendererComponent(props: ArtifactRendererProps) {
         artifactUpdateFailed={artifactUpdateFailed}
         chatCollapsed={props.chatCollapsed}
         setChatCollapsed={props.setChatCollapsed}
+        isCanvasPanelCollapsed={props.isCanvasPanelCollapsed}
+        setIsCanvasPanelCollapsed={props.setIsCanvasPanelCollapsed}
       />
       <div
         ref={contentRef}
diff --git a/apps/web/src/components/artifacts/header/index.tsx b/apps/web/src/components/artifacts/header/index.tsx
index 2fae7e1e..d98fbe5c 100644
--- a/apps/web/src/components/artifacts/header/index.tsx
+++ b/apps/web/src/components/artifacts/header/index.tsx
@@ -3,7 +3,7 @@ import { ArtifactTitle } from "./artifact-title";
 import { NavigateArtifactHistory } from "./navigate-artifact-history";
 import { ArtifactCodeV3, ArtifactMarkdownV3 } from "@opencanvas/shared/types";
 import { Assistant } from "@langchain/langgraph-sdk";
-import { PanelRightClose } from "lucide-react";
+import { PanelLeftClose, PanelRightOpen, PanelRightClose } from "lucide-react";
 import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
 
 interface ArtifactHeaderProps {
@@ -17,6 +17,8 @@ interface ArtifactHeaderProps {
   artifactUpdateFailed: boolean;
   chatCollapsed: boolean;
   setChatCollapsed: (c: boolean) => void;
+  isCanvasPanelCollapsed: boolean;
+  setIsCanvasPanelCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export function ArtifactHeader(props: ArtifactHeaderProps) {
@@ -40,7 +42,24 @@ export function ArtifactHeader(props: ArtifactHeaderProps) {
           artifactUpdateFailed={props.artifactUpdateFailed}
         />
       </div>
-      <div className="flex gap-2 items-end mt-[10px] mr-[6px]">
+      <div className="flex gap-2 items-center mt-[10px] mr-[6px]">
+        <TooltipIconButton
+          tooltip={
+            props.isCanvasPanelCollapsed ? "Expand Canvas" : "Collapse Canvas"
+          }
+          variant="ghost"
+          className="ml-2 mb-1 w-8 h-8"
+          delayDuration={400}
+          onClick={() =>
+            props.setIsCanvasPanelCollapsed(!props.isCanvasPanelCollapsed)
+          }
+        >
+          {props.isCanvasPanelCollapsed ? (
+            <PanelRightOpen className="text-gray-600" />
+          ) : (
+            <PanelLeftClose className="text-gray-600" />
+          )}
+        </TooltipIconButton>
         <NavigateArtifactHistory
           isBackwardsDisabled={props.isBackwardsDisabled}
           isForwardDisabled={props.isForwardDisabled}
diff --git a/apps/web/src/components/canvas/canvas.tsx b/apps/web/src/components/canvas/canvas.tsx
index 237c0fac..7934e3d8 100644
--- a/apps/web/src/components/canvas/canvas.tsx
+++ b/apps/web/src/components/canvas/canvas.tsx
@@ -32,11 +32,20 @@ import { useRouter, useSearchParams } from "next/navigation";
 export function CanvasComponent() {
   const { graphData } = useGraphContext();
   const { setModelName, setModelConfig } = useThreadContext();
-  const { setArtifact, chatStarted, setChatStarted } = graphData;
+  const { artifact, setArtifact, chatStarted, setChatStarted } = graphData;
   const { toast } = useToast();
   const [isEditing, setIsEditing] = useState(false);
   const [webSearchResultsOpen, setWebSearchResultsOpen] = useState(false);
   const [chatCollapsed, setChatCollapsed] = useState(false);
+  const [isCanvasPanelCollapsed, setIsCanvasPanelCollapsed] = useState(false);
+
+  const currentArtifactContent = artifact?.contents[artifact.currentIndex - 1];
+  const currentArtifactType = currentArtifactContent?.type;
+
+  const shouldRenderCanvas =
+    chatStarted &&
+    !isCanvasPanelCollapsed &&
+    (currentArtifactType === "code" || currentArtifactType === "text");
 
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -143,9 +152,9 @@ export function CanvasComponent() {
       )}
       {!chatCollapsed && chatStarted && (
         <ResizablePanel
-          defaultSize={25}
-          minSize={15}
-          maxSize={50}
+          defaultSize={isCanvasPanelCollapsed ? 100 : 25}
+          minSize={isCanvasPanelCollapsed ? 100 : 15}
+          maxSize={isCanvasPanelCollapsed ? 100 : 50}
           className="transition-all duration-700 h-screen mr-auto bg-gray-50/70 shadow-inner-right"
           id="chat-panel-main"
           order={1}
@@ -195,7 +204,7 @@ export function CanvasComponent() {
         </ResizablePanel>
       )}
 
-      {chatStarted && (
+      {shouldRenderCanvas && (
         <>
           <ResizableHandle />
           <ResizablePanel
@@ -224,6 +233,8 @@ export function CanvasComponent() {
                 }}
                 setIsEditing={setIsEditing}
                 isEditing={isEditing}
+                isCanvasPanelCollapsed={isCanvasPanelCollapsed}
+                setIsCanvasPanelCollapsed={setIsCanvasPanelCollapsed}
               />
             </div>
             <WebSearchResults