From 2c4e65d68e8c36e7461948d2ee108e42c0c9f2b4 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 17 Nov 2025 09:58:59 +0530
Subject: [PATCH] chore: Hide assistant switcher on paywall screen (#12875)

---
 .../components-next/captain/PageLayout.vue    | 20 ++++++++++++++-----
 .../switcher/AssistantSwitcher.vue            |  5 +++++
 .../i18n/locale/en/integrations.json          |  3 ++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index 19303ba01..d9fce9e0f 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -69,6 +70,8 @@ const props = defineProps({
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
 
+const { t } = useI18n();
+
 const route = useRoute();
 const { shouldShowPaywall } = usePolicy();
 
@@ -76,14 +79,16 @@ const showAssistantSwitcherDropdown = ref(false);
 const createAssistantDialogRef = ref(null);
 
 const assistants = useMapGetter('captainAssistants/getRecords');
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 
 const currentAssistantId = computed(() => route.params.assistantId);
+const isFetchingAssistants = computed(() => uiFlags.value?.fetchingList);
 
 const activeAssistantName = computed(() => {
   return (
     assistants.value?.find(
       assistant => assistant.id === Number(currentAssistantId.value)
-    )?.name || ''
+    )?.name || t('CAPTAIN.ASSISTANT_SWITCHER.NEW_ASSISTANT')
   );
 });
 
@@ -118,15 +123,18 @@ const handleCreateAssistant = () => {
         >
           <div class="flex gap-3 items-center">
             <BackButton v-if="backUrl" :back-url="backUrl" />
-            <div v-if="showAssistantSwitcher" class="flex items-center gap-2">
+            <div
+              v-if="showAssistantSwitcher && !showPaywall"
+              class="flex items-center gap-2"
+            >
               <div class="flex items-center gap-2">
                 <span
-                  v-if="activeAssistantName"
+                  v-if="!isFetchingAssistants"
                   class="text-xl font-medium truncate text-n-slate-12"
                 >
                   {{ activeAssistantName }}
                 </span>
-                <div v-if="activeAssistantName" class="relative group">
+                <div class="relative group">
                   <OnClickOutside
                     @trigger="showAssistantSwitcherDropdown = false"
                   >
@@ -135,6 +143,8 @@ const handleCreateAssistant = () => {
                       variant="ghost"
                       color="slate"
                       size="xs"
+                      :disabled="isFetchingAssistants"
+                      :is-loading="isFetchingAssistants"
                       class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
                       @click="toggleAssistantSwitcher"
                     />
@@ -151,7 +161,7 @@ const handleCreateAssistant = () => {
             </div>
             <div class="flex items-center gap-4">
               <div
-                v-if="showAssistantSwitcher && headerTitle"
+                v-if="showAssistantSwitcher && !showPaywall && headerTitle"
                 class="w-0.5 h-4 rounded-2xl bg-n-weak"
               />
               <span
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue b/app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue
index 1bd9080be..a67d685f5 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue
@@ -139,5 +139,10 @@ const openCreateAssistantDialog = () => {
         />
       </Button>
     </div>
+    <div v-else class="flex flex-col items-center gap-2 px-4 py-3">
+      <p class="text-sm text-n-slate-11">
+        {{ t('CAPTAIN.ASSISTANT_SWITCHER.EMPTY_LIST') }}
+      </p>
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index f74e674d7..c08cde4d3 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -348,7 +348,8 @@
     "ASSISTANT_SWITCHER": {
       "ASSISTANTS": "Assistants",
       "SWITCH_ASSISTANT": "Switch between assistants",
-      "NEW_ASSISTANT": "Create Assistant"
+      "NEW_ASSISTANT": "Create Assistant",
+      "EMPTY_LIST": "No assistants found, please create one to get started"
     },
     "COPILOT": {
       "TITLE": "Copilot",