From d0bcf02784dd8e174cfdc809ece849de6fc51038 Mon Sep 17 00:00:00 2001
From: Shine1i <wasimysdev@gmail.com>
Date: Mon, 16 Feb 2026 02:05:53 +0100
Subject: [PATCH] feat: lock model selector during guided tour and refine open
 state logic

---
 .../frontend/src/features/chat/chat-page.tsx  | 29 +++++++++++++++++--
 .../src/features/studio/studio-page.tsx       |  3 +-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index 0f57841249..c79f4b387c 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -205,6 +205,7 @@ export function ChatPage(): ReactElement {
   });
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
+  const [modelSelectorLocked, setModelSelectorLocked] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const viewBeforeCompareRef = useRef<ChatView | null>(null);
   const inferenceParams = useChatRuntimeStore((state) => state.params);
@@ -239,8 +240,23 @@ export function ChatPage(): ReactElement {
     [],
   );
 
-  const openModelSelector = useCallback(() => setModelSelectorOpen(true), []);
-  const closeModelSelector = useCallback(() => setModelSelectorOpen(false), []);
+  const openModelSelector = useCallback(() => {
+    setModelSelectorLocked(true);
+    setModelSelectorOpen(true);
+  }, []);
+
+  const closeModelSelector = useCallback(() => {
+    setModelSelectorLocked(false);
+    setModelSelectorOpen(false);
+  }, []);
+
+  const handleModelSelectorOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open && modelSelectorLocked) return;
+      setModelSelectorOpen(open);
+    },
+    [modelSelectorLocked],
+  );
   const openSettings = useCallback(() => setSettingsOpen(true), []);
   const closeSettings = useCallback(() => setSettingsOpen(false), []);
   const openSidebar = useCallback(() => setSidebarOpen(true), []);
@@ -313,6 +329,13 @@ export function ChatPage(): ReactElement {
     steps: tourSteps,
   });
 
+  useEffect(() => {
+    if (tour.open) return;
+    if (!modelSelectorLocked) return;
+    setModelSelectorLocked(false);
+    setModelSelectorOpen(false);
+  }, [modelSelectorLocked, tour.open]);
+
   return (
     <div className="h-[calc(100vh-4rem)] bg-background overflow-hidden">
     <GuidedTour {...tour.tourProps} />
@@ -355,7 +378,7 @@ export function ChatPage(): ReactElement {
               onEject={handleEject}
               variant="ghost"
               open={modelSelectorOpen}
-              onOpenChange={setModelSelectorOpen}
+              onOpenChange={handleModelSelectorOpenChange}
               triggerDataTour="chat-model-selector"
               contentDataTour="chat-model-selector-popover"
             />
diff --git a/studio/frontend/src/features/studio/studio-page.tsx b/studio/frontend/src/features/studio/studio-page.tsx
index dd2c075a67..8b92636fde 100644
--- a/studio/frontend/src/features/studio/studio-page.tsx
+++ b/studio/frontend/src/features/studio/studio-page.tsx
@@ -55,7 +55,7 @@ export function StudioPage(): ReactElement {
   return (
     <div className="min-h-screen bg-background">
       <main className="mx-auto max-w-7xl px-6 py-4">
-        <GuidedTour {...tour.tourProps} celebrate={true} />
+        <GuidedTour {...tour.tourProps} celebrate={isConfigTour} />
 
         <DatasetPreviewDialog
           open={dialogOpen}
@@ -114,4 +114,3 @@ export function StudioPage(): ReactElement {
     </div>
   );
 }
-