much better wave ai panel slideout transitions

sawka · sawka · commit 3e0c425ecef0 · 2025-09-30T21:49:23.000-07:00
diff --git a/frontend/app/aipanel/aipanel.tsx b/frontend/app/aipanel/aipanel.tsx
@@ -4,6 +4,7 @@
 import { WaveUIMessagePart } from "@/app/aipanel/aitypes";
 import { ErrorBoundary } from "@/app/element/errorboundary";
 import { atoms, getSettingsKeyAtom } from "@/app/store/global";
+import { workspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
 import { globalStore } from "@/app/store/jotaiStore";
 import { getWebServerEndpoint } from "@/util/endpoints";
 import { checkKeyPressed, keydownWrapper } from "@/util/keyutil";
@@ -37,6 +38,7 @@ const AIPanelComponentInner = memo(({ className, onClose }: AIPanelProps) => {
     const showOverlayBlockNums = jotai.useAtomValue(getSettingsKeyAtom("app:showoverlayblocknums")) ?? true;
     const isFocused = jotai.useAtomValue(atoms.waveAIFocusedAtom);
     const telemetryEnabled = jotai.useAtomValue(getSettingsKeyAtom("telemetry:enabled")) ?? false;
+    const isPanelVisible = jotai.useAtomValue(workspaceLayoutModel.panelVisibleAtom);
 
     const { messages, sendMessage, status, setMessages, error } = useChat({
         transport: new DefaultChatTransport({
@@ -277,6 +279,7 @@ const AIPanelComponentInner = memo(({ className, onClose }: AIPanelProps) => {
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
             onClick={handleClick}
+            inert={!isPanelVisible ? true : undefined}
         >
             {isDragOver && (
                 <div
diff --git a/frontend/app/store/keymodel.ts b/frontend/app/store/keymodel.ts
@@ -538,12 +538,7 @@ function registerGlobalKeys() {
     });
     globalKeyMap.set("Cmd:Shift:a", () => {
         const currentVisible = workspaceLayoutModel.getAIPanelVisible();
-        if (!currentVisible) {
-            WaveAIModel.getInstance().focusInput();
-        } else {
-            workspaceLayoutModel.setAIPanelVisible(false);
-            globalRefocus();
-        }
+        workspaceLayoutModel.setAIPanelVisible(!currentVisible);
         return true;
     });
     const allKeys = Array.from(globalKeyMap.keys());
diff --git a/frontend/app/workspace/workspace-layout-model.ts b/frontend/app/workspace/workspace-layout-model.ts
@@ -1,38 +1,52 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { getTabMetaKeyAtom } from "@/app/store/global";
+import { WaveAIModel } from "@/app/aipanel/waveai-model";
+import { getTabMetaKeyAtom, refocusNode } from "@/app/store/global";
 import { globalStore } from "@/app/store/jotaiStore";
 import * as WOS from "@/app/store/wos";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
+import { getLayoutModelForStaticTab } from "@/layout/lib/layoutModelHooks";
 import { atoms, isDev } from "@/store/global";
+import debug from "debug";
 import * as jotai from "jotai";
 import { debounce } from "lodash-es";
 import { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizable-panels";
 
+const dlog = debug("wave:workspace");
+
 const AIPANEL_DEFAULTWIDTH = 300;
 const AIPANEL_MINWIDTH = 250;
 const AIPANEL_MAXWIDTHRATIO = 0.5;
 
 class WorkspaceLayoutModel {
     aiPanelRef: ImperativePanelHandle | null;
     panelGroupRef: ImperativePanelGroupHandle | null;
-    inResize: boolean;
+    panelContainerRef: HTMLDivElement | null;
+    aiPanelWrapperRef: HTMLDivElement | null;
+    inResize: boolean; // prevents recursive setLayout calls (setLayout triggers onLayout which calls setLayout)
     private aiPanelVisible: boolean;
     private aiPanelWidth: number | null;
     private debouncedPersistWidth: (width: number) => void;
     private initialized: boolean = false;
+    private transitionTimeoutRef: NodeJS.Timeout | null = null;
+    private focusTimeoutRef: NodeJS.Timeout | null = null;
     panelVisibleAtom: jotai.PrimitiveAtom<boolean>;
 
     constructor() {
         this.aiPanelRef = null;
         this.panelGroupRef = null;
+        this.panelContainerRef = null;
+        this.aiPanelWrapperRef = null;
         this.inResize = false;
         this.aiPanelVisible = isDev();
         this.aiPanelWidth = null;
         this.panelVisibleAtom = jotai.atom(this.aiPanelVisible);
 
+        this.handleWindowResize = this.handleWindowResize.bind(this);
+        this.handlePanelLayout = this.handlePanelLayout.bind(this);
+
         this.debouncedPersistWidth = debounce((width: number) => {
             try {
                 RpcApi.SetMetaCommand(TabRpcClient, {
@@ -77,10 +91,84 @@ class WorkspaceLayoutModel {
         return getTabMetaKeyAtom(this.getTabId(), "waveai:panelwidth");
     }
 
-    registerRefs(aiPanelRef: ImperativePanelHandle, panelGroupRef: ImperativePanelGroupHandle): void {
+    registerRefs(
+        aiPanelRef: ImperativePanelHandle,
+        panelGroupRef: ImperativePanelGroupHandle,
+        panelContainerRef: HTMLDivElement,
+        aiPanelWrapperRef: HTMLDivElement
+    ): void {
         this.aiPanelRef = aiPanelRef;
         this.panelGroupRef = panelGroupRef;
+        this.panelContainerRef = panelContainerRef;
+        this.aiPanelWrapperRef = aiPanelWrapperRef;
         this.syncAIPanelRef();
+        this.updateWrapperWidth();
+    }
+
+    updateWrapperWidth(): void {
+        if (!this.aiPanelWrapperRef) {
+            return;
+        }
+        const width = this.getAIPanelWidth();
+        this.aiPanelWrapperRef.style.width = `${width}px`;
+    }
+
+    enableTransitions(duration: number): void {
+        if (!this.panelContainerRef) {
+            return;
+        }
+        const panels = this.panelContainerRef.querySelectorAll("[data-panel]");
+        dlog("set transition ease-in-out", panels);
+        panels.forEach((panel: HTMLElement) => {
+            panel.style.transition = "flex 0.2s ease-in-out";
+        });
+
+        if (this.transitionTimeoutRef) {
+            clearTimeout(this.transitionTimeoutRef);
+        }
+        this.transitionTimeoutRef = setTimeout(() => {
+            if (!this.panelContainerRef) {
+                return;
+            }
+            const panels = this.panelContainerRef.querySelectorAll("[data-panel]");
+            dlog("set transition none", panels);
+            panels.forEach((panel: HTMLElement) => {
+                panel.style.transition = "none";
+            });
+        }, duration);
+    }
+
+    handleWindowResize(): void {
+        if (!this.panelGroupRef) {
+            return;
+        }
+        const newWindowWidth = window.innerWidth;
+        const aiPanelPercentage = this.getAIPanelPercentage(newWindowWidth);
+        const mainContentPercentage = this.getMainContentPercentage(newWindowWidth);
+        this.inResize = true;
+        const layout = [aiPanelPercentage, mainContentPercentage];
+        this.panelGroupRef.setLayout(layout);
+        this.inResize = false;
+    }
+
+    handlePanelLayout(sizes: number[]): void {
+        dlog("handlePanelLayout", "inResize:", this.inResize, "sizes:", sizes);
+        if (this.inResize) {
+            return;
+        }
+        if (!this.panelGroupRef) {
+            return;
+        }
+
+        const currentWindowWidth = window.innerWidth;
+        const aiPanelPixelWidth = (sizes[0] / 100) * currentWindowWidth;
+        this.handleAIPanelResize(aiPanelPixelWidth, currentWindowWidth);
+        const newPercentage = this.getAIPanelPercentage(currentWindowWidth);
+        const mainContentPercentage = 100 - newPercentage;
+        this.inResize = true;
+        const layout = [newPercentage, mainContentPercentage];
+        this.panelGroupRef.setLayout(layout);
+        this.inResize = false;
     }
 
     syncAIPanelRef(): void {
@@ -125,13 +213,36 @@ class WorkspaceLayoutModel {
         if (!isDev() && visible) {
             return;
         }
+        if (this.focusTimeoutRef != null) {
+            clearTimeout(this.focusTimeoutRef);
+            this.focusTimeoutRef = null;
+        }
         this.aiPanelVisible = visible;
         globalStore.set(this.panelVisibleAtom, visible);
         RpcApi.SetMetaCommand(TabRpcClient, {
             oref: WOS.makeORef("tab", this.getTabId()),
             meta: { "waveai:panelopen": visible },
         });
+        this.enableTransitions(250);
         this.syncAIPanelRef();
+
+        if (visible) {
+            this.focusTimeoutRef = setTimeout(() => {
+                WaveAIModel.getInstance().focusInput();
+                this.focusTimeoutRef = null;
+            }, 350);
+        } else {
+            const layoutModel = getLayoutModelForStaticTab();
+            const focusedNode = globalStore.get(layoutModel.focusedNode);
+            if (focusedNode == null) {
+                layoutModel.focusFirstNode();
+                return;
+            }
+            const blockId = focusedNode?.data?.blockId;
+            if (blockId != null) {
+                refocusNode(blockId);
+            }
+        }
     }
 
     getAIPanelWidth(): number {
@@ -144,6 +255,7 @@ class WorkspaceLayoutModel {
 
     setAIPanelWidth(width: number): void {
         this.aiPanelWidth = width;
+        this.updateWrapperWidth();
         this.debouncedPersistWidth(width);
     }
 
@@ -172,10 +284,6 @@ class WorkspaceLayoutModel {
         }
         const clampedWidth = this.getClampedAIPanelWidth(width, windowWidth);
         this.setAIPanelWidth(clampedWidth);
-
-        if (!this.getAIPanelVisible()) {
-            this.setAIPanelVisible(true);
-        }
     }
 }
 
diff --git a/frontend/app/workspace/workspace.tsx b/frontend/app/workspace/workspace.tsx
@@ -26,58 +26,34 @@ const WorkspaceElem = memo(() => {
     const initialAiPanelPercentage = workspaceLayoutModel.getAIPanelPercentage(window.innerWidth);
     const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
     const aiPanelRef = useRef<ImperativePanelHandle>(null);
+    const panelContainerRef = useRef<HTMLDivElement>(null);
+    const aiPanelWrapperRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        if (aiPanelRef.current && panelGroupRef.current) {
-            workspaceLayoutModel.registerRefs(aiPanelRef.current, panelGroupRef.current);
+        if (aiPanelRef.current && panelGroupRef.current && panelContainerRef.current && aiPanelWrapperRef.current) {
+            workspaceLayoutModel.registerRefs(aiPanelRef.current, panelGroupRef.current, panelContainerRef.current, aiPanelWrapperRef.current);
         }
     }, []);
 
     useEffect(() => {
-        const handleResize = () => {
-            if (!panelGroupRef.current) {
-                return;
-            }
-            const newWindowWidth = window.innerWidth;
-            const aiPanelPercentage = workspaceLayoutModel.getAIPanelPercentage(newWindowWidth);
-            const mainContentPercentage = workspaceLayoutModel.getMainContentPercentage(newWindowWidth);
-            workspaceLayoutModel.inResize = true;
-            const layout = [aiPanelPercentage, mainContentPercentage];
-            panelGroupRef.current.setLayout(layout);
-            workspaceLayoutModel.inResize = false;
-        };
-
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
+        window.addEventListener("resize", workspaceLayoutModel.handleWindowResize);
+        return () => window.removeEventListener("resize", workspaceLayoutModel.handleWindowResize);
     }, []);
 
-    const handlePanelLayout = (sizes: number[]) => {
-        if (workspaceLayoutModel.inResize) {
-            return;
-        }
-        const currentWindowWidth = window.innerWidth;
-        const aiPanelPixelWidth = (sizes[0] / 100) * currentWindowWidth;
-        workspaceLayoutModel.handleAIPanelResize(aiPanelPixelWidth, currentWindowWidth);
-        const newPercentage = workspaceLayoutModel.getAIPanelPercentage(currentWindowWidth);
-        const mainContentPercentage = 100 - newPercentage;
-        workspaceLayoutModel.inResize = true;
-        const layout = [newPercentage, mainContentPercentage];
-        panelGroupRef.current.setLayout(layout);
-        workspaceLayoutModel.inResize = false;
-    };
-
-    const handleCloseAIPanel = () => {
-        workspaceLayoutModel.setAIPanelVisible(false);
-    };
-
     return (
         <div className="flex flex-col w-full flex-grow overflow-hidden">
             <TabBar key={ws.oid} workspace={ws} />
-            <div className="flex flex-row flex-grow overflow-hidden">
+            <div ref={panelContainerRef} className="flex flex-row flex-grow overflow-hidden">
                 <ErrorBoundary key={tabId}>
-                    <PanelGroup direction="horizontal" onLayout={handlePanelLayout} ref={panelGroupRef}>
-                        <Panel ref={aiPanelRef} collapsible defaultSize={initialAiPanelPercentage} order={1}>
-                            <AIPanel onClose={handleCloseAIPanel} />
+                    <PanelGroup
+                        direction="horizontal"
+                        onLayout={workspaceLayoutModel.handlePanelLayout}
+                        ref={panelGroupRef}
+                    >
+                        <Panel ref={aiPanelRef} collapsible defaultSize={initialAiPanelPercentage} order={1} className="overflow-hidden">
+                            <div ref={aiPanelWrapperRef} className="w-full h-full">
+                                <AIPanel onClose={() => workspaceLayoutModel.setAIPanelVisible(false)} />
+                            </div>
                         </Panel>
                         <PanelResizeHandle className="w-0.5 bg-transparent hover:bg-gray-500/20 transition-colors" />
                         <Panel order={2} defaultSize={100 - initialAiPanelPercentage}>
