Add chat panel visibility toggle functionality (#2345)

e2e-tests/chat_panel_toggle.spec.ts

+import { testSkipIfWindows } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+
+testSkipIfWindows("toggle chat panel visibility", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  // We are in the chat view after setUp
+  await po.sendPrompt("basic");
+
+  // Chat panel should be visible initially.
+  const chatPanel = po.page.locator("#chat-panel");
+  await expect(chatPanel).toBeVisible();
+
+  // Toggle button
+  const toggleButton = po.page.getByTestId("preview-toggle-chat-panel-button");
+  // Collapse
+  await toggleButton.click();
+
+  await expect(chatPanel).toBeHidden();
+
+  // Expand
+  await toggleButton.click();
+
+  // Expect chat panel to be visible
+  await expect(chatPanel).toBeVisible();
+});

src/atoms/viewAtoms.ts

@@ -2,6 +2,7 @@ import { atom } from "jotai";
 import { SECTION_IDS } from "@/lib/settingsSearchIndex";
 
 export const isPreviewOpenAtom = atom(true);
+export const isChatPanelHiddenAtom = atom(false);
 export const selectedFileAtom = atom<{
   path: string;
   line?: number | null;

src/components/preview_panel/PreviewIframe.tsx

@@ -25,6 +25,8 @@ import {
   Tablet,
   Smartphone,
   Pen,
+  Maximize2,
+  Minimize2,
 } from "lucide-react";
 import { selectedChatIdAtom } from "@/atoms/chatAtoms";
 import { CopyErrorMessage } from "@/components/CopyErrorMessage";
@@ -47,6 +49,7 @@ import {
   screenshotDataUrlAtom,
   pendingVisualChangesAtom,
 } from "@/atoms/previewAtoms";
+import { isChatPanelHiddenAtom } from "@/atoms/viewAtoms";
 import { ComponentSelection } from "@/ipc/types";
 import {
   Popover,
@@ -220,6 +223,9 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
   const [screenshotDataUrl, setScreenshotDataUrl] = useAtom(
     screenshotDataUrlAtom,
   );
+  const [isChatPanelHidden, setIsChatPanelHidden] = useAtom(
+    isChatPanelHiddenAtom,
+  );
 
   const { addAttachments } = useAttachments();
   const setPendingChanges = useSetAtom(pendingVisualChangesAtom);
@@ -983,6 +989,18 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
         <div className="flex items-center p-2 border-b space-x-2">
           {/* Navigation Buttons */}
           <div className="flex space-x-1">
+            <button
+              onClick={() => setIsChatPanelHidden(!isChatPanelHidden)}
+              className="p-1 rounded transition-colors duration-200 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+              data-testid="preview-toggle-chat-panel-button"
+              title={isChatPanelHidden ? "Show chat" : "Hide chat"}
+            >
+              {isChatPanelHidden ? (
+                <Maximize2 size={16} />
+              ) : (
+                <Minimize2 size={16} />
+              )}
+            </button>
             <button
               onClick={handleActivateComponentSelector}
               className={`p-1 rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${

src/pages/chat.tsx

@@ -10,18 +10,25 @@ import { PreviewPanel } from "../components/preview_panel/PreviewPanel";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { cn } from "@/lib/utils";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
+import { isPreviewOpenAtom, isChatPanelHiddenAtom } from "@/atoms/viewAtoms";
 import { useChats } from "@/hooks/useChats";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
 
+const DEFAULT_CHAT_PANEL_SIZE = 50;
+
 export default function ChatPage() {
-  let { id: chatId } = useSearch({ from: "/chat" });
+  const { id: chatId } = useSearch({ from: "/chat" });
   const navigate = useNavigate();
   const [isPreviewOpen, setIsPreviewOpen] = useAtom(isPreviewOpenAtom);
+  const [isChatPanelHidden, setIsChatPanelHidden] = useAtom(
+    isChatPanelHiddenAtom,
+  );
   const [isResizing, setIsResizing] = useState(false);
   const selectedAppId = useAtomValue(selectedAppIdAtom);
   const setSelectedAppId = useSetAtom(selectedAppIdAtom);
   const { chats, loading } = useChats(selectedAppId);
+  const previousSizeRef = useRef<number>(DEFAULT_CHAT_PANEL_SIZE);
+  const isInitialMountRef = useRef(true);
 
   useEffect(() => {
     if (!chatId && chats.length && !loading) {
@@ -40,43 +47,90 @@ export default function ChatPage() {
     }
   }, [isPreviewOpen]);
   const ref = useRef<ImperativePanelHandle>(null);
+  const chatPanelRef = useRef<ImperativePanelHandle>(null);
+
+  // Keep chat panel size in sync with hidden state (from toolbar button / other views)
+  useEffect(() => {
+    if (!chatPanelRef.current) return;
+    // Skip the initial mount to preserve persisted panel size from autoSaveId
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
+    if (isChatPanelHidden) {
+      // Save current size before collapsing
+      const currentSize = chatPanelRef.current.getSize();
+      if (currentSize > 5) {
+        previousSizeRef.current = currentSize;
+      }
+      // Visually collapsed but keep a sliver so the handle is usable
+      chatPanelRef.current.resize(1);
+    } else {
+      // Restore to previous size when re-opened via button
+      chatPanelRef.current.resize(previousSizeRef.current);
+    }
+  }, [isChatPanelHidden]);
 
   return (
     <PanelGroup autoSaveId="persistence" direction="horizontal">
-      <Panel id="chat-panel" minSize={30}>
+      <Panel
+        id="chat-panel"
+        ref={chatPanelRef}
+        collapsible
+        minSize={1}
+        className={cn(!isResizing && "transition-all duration-100 ease-in-out")}
+      >
         <div className="h-full w-full">
-          <ChatPanel
-            chatId={chatId}
-            isPreviewOpen={isPreviewOpen}
-            onTogglePreview={() => {
-              setIsPreviewOpen(!isPreviewOpen);
-              if (isPreviewOpen) {
-                ref.current?.collapse();
-              } else {
-                ref.current?.expand();
-              }
-            }}
-          />
+          {!isChatPanelHidden && (
+            <ChatPanel
+              chatId={chatId}
+              isPreviewOpen={isPreviewOpen}
+              onTogglePreview={() => {
+                setIsPreviewOpen(!isPreviewOpen);
+                if (isPreviewOpen) {
+                  ref.current?.collapse();
+                } else {
+                  ref.current?.expand();
+                }
+              }}
+            />
+          )}
         </div>
       </Panel>
+      <PanelResizeHandle
+        onDragging={(isDragging) => {
+          setIsResizing(isDragging);
+          // When dragging ends, sync the hidden state based on final width
+          if (!isDragging) {
+            // Small delay to let the panel settle
+            requestAnimationFrame(() => {
+              const panel = document.getElementById("chat-panel");
+              if (panel) {
+                const panelWidth = panel.getBoundingClientRect().width;
+                const containerWidth =
+                  panel.parentElement?.getBoundingClientRect().width || 1;
+                const percentage = (panelWidth / containerWidth) * 100;
+                // Consider hidden if panel is less than 5% width
+                setIsChatPanelHidden(percentage < 5);
+              }
+            });
+          }
+        }}
+        className={cn(
+          "relative bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors cursor-col-resize",
+          isChatPanelHidden ? "w-2" : "w-1",
+        )}
+      />
 
-      <>
-        <PanelResizeHandle
-          onDragging={(e) => setIsResizing(e)}
-          className="w-1 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors cursor-col-resize"
-        />
-        <Panel
-          collapsible
-          ref={ref}
-          id="preview-panel"
-          minSize={20}
-          className={cn(
-            !isResizing && "transition-all duration-100 ease-in-out",
-          )}
-        >
-          <PreviewPanel />
-        </Panel>
-      </>
+      <Panel
+        collapsible
+        ref={ref}
+        id="preview-panel"
+        minSize={20}
+        className={cn(!isResizing && "transition-all duration-100 ease-in-out")}
+      >
+        <PreviewPanel />
+      </Panel>
     </PanelGroup>
   );
 }