From 18236bff0fb78ed2a087a12a020b71050eced6d9 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Mon, 22 Jun 2026 22:53:49 -0700
Subject: [PATCH] Studio: refresh chat guided tour for the redesigned model
 picker (#6597)

* Studio: refresh chat tour for the redesigned model picker

- Pick a model step describes the Recommended and On Device tabs instead of the old Hub and Fine-tuned split
- Find a model step (was Two tabs) covers Unsloth search vs Search Hub, the format and sort filters, and the OOM tag
- Settings step now anchors to the run settings panel on the right. The old anchor sat on the open settings button, which unmounts when settings opens, so the tooltip lost its target and drifted left

* Add guided tour step for the composer + menu
---
 .../src/components/assistant-ui/thread.tsx    |  1 +
 .../frontend/src/features/chat/chat-page.tsx  |  1 -
 .../src/features/chat/chat-settings-sheet.tsx |  5 +++-
 .../frontend/src/features/chat/tour/steps.tsx | 26 ++++++++++++++-----
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 57e6d02f55..bad9a6b7f3 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -3043,6 +3043,7 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({
           type="button"
           aria-label="Tools and attachments"
           className="unsloth-composer-plus"
+          data-tour="chat-plus-menu"
         >
           <PlusIcon className="size-[22px] stroke-[1.75px]" />
         </button>
diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index ac0c4de75c..7d4292669d 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -2506,7 +2506,6 @@ export function ChatPage({
                     onClick={() => setSettingsOpen(true)}
                     className="flex h-[34px] w-[34px] translate-x-[2px] cursor-pointer items-center justify-center rounded-full text-nav-fg transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     aria-label="Open run settings"
-                    data-tour="chat-settings"
                   >
                     <HugeiconsIcon
                       icon={LayoutAlignRightIcon}
diff --git a/studio/frontend/src/features/chat/chat-settings-sheet.tsx b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
index bd315e19d4..d9b338e069 100644
--- a/studio/frontend/src/features/chat/chat-settings-sheet.tsx
+++ b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
@@ -1775,7 +1775,9 @@ export function ChatSettingsPanel({
             <SheetTitle>Run settings</SheetTitle>
             <SheetDescription>Chat inference settings</SheetDescription>
           </SheetHeader>
-          <div className="flex h-full flex-col">{settingsContent}</div>
+          <div data-tour="chat-settings" className="flex h-full flex-col">
+            {settingsContent}
+          </div>
         </SheetContent>
       </Sheet>
     );
@@ -1783,6 +1785,7 @@ export function ChatSettingsPanel({
 
   return (
     <aside
+      data-tour="chat-settings"
       className={`relative z-50 shrink-0 h-full overflow-hidden bg-panel-surface text-panel-surface-fg font-heading ${open ? "w-[17rem] border-l border-sidebar-border" : "w-0"}`}
     >
       <div className="h-full w-full">{settingsContent}</div>
diff --git a/studio/frontend/src/features/chat/tour/steps.tsx b/studio/frontend/src/features/chat/tour/steps.tsx
index 7e304ed590..84e3fe5950 100644
--- a/studio/frontend/src/features/chat/tour/steps.tsx
+++ b/studio/frontend/src/features/chat/tour/steps.tsx
@@ -27,21 +27,21 @@ export function buildChatTourSteps({
       title: "Pick a model",
       body: (
         <>
-          This selects what’s loaded for inference. Hub = base models. Fine-tuned
-          = trained Unsloth outputs, including LoRA adapters and full finetunes.
+          Selects what’s loaded for inference. Recommended is Unsloth’s curated
+          base models; On Device is your downloads and fine-tuned outputs (LoRA
+          adapters and full finetunes).
         </>
       ),
     },
     {
       id: "model-tabs",
       target: "chat-model-selector-popover",
-      title: "Two tabs",
+      title: "Find a model",
       body: (
         <>
-          Hub: search Unsloth’s models here, or hit Search Hub to browse all of
-          Hugging Face. Fine-tuned: local Unsloth outputs you’ve trained or
-          exported. If results look off, compare base vs fine-tuned outputs to
-          see what changed.
+          Search Unsloth’s models, or hit Search Hub for all of Hugging Face.
+          Switch Recommended and On Device, filter by format, and sort by
+          trending or recent. An OOM tag means it won’t fit in your VRAM.
         </>
       ),
       onEnter: openModelSelector,
@@ -60,6 +60,18 @@ export function buildChatTourSteps({
       onEnter: openSettings,
       onExit: closeSettings,
     },
+    {
+      id: "plus-menu",
+      target: "chat-plus-menu",
+      title: "The + menu",
+      body: (
+        <>
+          Everything else lives here: attach photos and files, reuse saved
+          prompts, toggle tools and MCP, start a side-by-side compare, and
+          export the chat.
+        </>
+      ),
+    },
   ];
 
   if (canCompare) {