ui and be for toggles

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -493,6 +493,13 @@ const menuItems = computed(() => {
           icon: 'i-lucide-briefcase',
           to: accountScopedRoute('general_settings_index'),
         },
+        // TODO: Hide before merging to develop until we have a way to manage captain settings
+        {
+          name: 'Settings Captain',
+          label: t('SIDEBAR.CAPTAIN_AI'),
+          icon: 'i-lucide-sparkles',
+          to: accountScopedRoute('captain_settings_index'),
+        },
         {
           name: 'Settings Agents',
           label: t('SIDEBAR.AGENTS'),
@@ -589,13 +596,6 @@ const menuItems = computed(() => {
           icon: 'i-lucide-credit-card',
           to: accountScopedRoute('billing_settings_index'),
         },
-        // Hidden until we have a way to manage captain settings
-        // {
-        //   name: 'Settings Captain',
-        //   label: t('SIDEBAR.CAPTAIN_AI'),
-        //   icon: 'i-lucide-sparkles',
-        //   to: accountScopedRoute('captain_settings_index'),
-        // },
       ],
     },
   ];

app/javascript/dashboard/routes/dashboard/settings/captain/Index.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useCaptain } from 'dashboard/composables/useCaptain';
+import { useConfig } from 'dashboard/composables/useConfig';
 
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
@@ -13,6 +15,7 @@ import FeatureToggle from './components/FeatureToggle.vue';
 const { t } = useI18n();
 const store = useStore();
 const { captainEnabled } = useCaptain();
+const { isEnterprise } = useConfig();
 
 const uiFlags = useMapGetter('captainConfig/getUIFlags');
 const features = useMapGetter('captainConfig/getFeatures');
@@ -42,23 +45,54 @@ const featureToggles = computed(() => [
     key: 'audio_transcription',
     title: t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.TITLE'),
     description: t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.DESCRIPTION'),
+    enterprise: true,
   },
   {
     key: 'help_center_search',
     title: t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.TITLE'),
     description: t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.DESCRIPTION'),
+    enterprise: true,
   },
   {
     key: 'label_suggestion',
     title: t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.TITLE'),
     description: t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.DESCRIPTION'),
+    enterprise: false,
   },
 ]);
 
-const hasFeatureToggle = key => {
-  return features.value[key] !== undefined;
+const hasFeatureToggle = feature => {
+  const featureExists = features.value[feature.key] !== undefined;
+  const isEnterpriseAllowed = !feature.enterprise || isEnterprise;
+  return featureExists && isEnterpriseAllowed;
 };
 
+async function handleFeatureToggle({ feature, enabled }) {
+  try {
+    await store.dispatch('accounts/update', {
+      captain_features: { [feature]: enabled },
+    });
+    useAlert(t('CAPTAIN_SETTINGS.API.SUCCESS'));
+  } catch (error) {
+    useAlert(t('CAPTAIN_SETTINGS.API.ERROR'));
+    // Refetch to revert the toggle state
+    store.dispatch('captainConfig/fetch');
+  }
+}
+
+async function handleModelChange({ feature, model }) {
+  try {
+    await store.dispatch('accounts/update', {
+      captain_models: { [feature]: model },
+    });
+    useAlert(t('CAPTAIN_SETTINGS.API.SUCCESS'));
+  } catch (error) {
+    useAlert(t('CAPTAIN_SETTINGS.API.ERROR'));
+    // Refetch to revert the model selection
+    store.dispatch('captainConfig/fetch');
+  }
+}
+
 onMounted(() => {
   store.dispatch('captainConfig/fetch');
 });
@@ -91,6 +125,7 @@ onMounted(() => {
               :feature-key="feature.key"
               :title="feature.title"
               :description="feature.description"
+              @change="handleModelChange"
             />
           </div>
         </SectionLayout>
@@ -104,11 +139,12 @@ onMounted(() => {
           <div class="grid gap-4">
             <FeatureToggle
               v-for="feature in featureToggles"
-              v-show="hasFeatureToggle(feature.key)"
+              v-show="hasFeatureToggle(feature)"
               :key="feature.key"
               :feature-key="feature.key"
               :title="feature.title"
               :description="feature.description"
+              @change="handleFeatureToggle"
             />
           </div>
         </SectionLayout>

app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue

@@ -25,23 +25,23 @@ const { t } = useI18n();
 const isOpen = ref(false);
 
 const getModelsForFeature = useMapGetter('captainConfig/getModelsForFeature');
-const getDefaultModelForFeature = useMapGetter(
-  'captainConfig/getDefaultModelForFeature'
+const getSelectedModelForFeature = useMapGetter(
+  'captainConfig/getSelectedModelForFeature'
 );
 
 const availableModels = computed(() =>
   getModelsForFeature.value(props.featureKey)
 );
-const defaultModel = computed(() =>
-  getDefaultModelForFeature.value(props.featureKey)
+const selectedModel = computed(() =>
+  getSelectedModelForFeature.value(props.featureKey)
 );
 const selectedModelId = ref(null);
 
 watch(
-  defaultModel,
-  newDefault => {
-    if (newDefault && !selectedModelId.value) {
-      selectedModelId.value = newDefault;
+  selectedModel,
+  newSelected => {
+    if (newSelected) {
+      selectedModelId.value = newSelected;
     }
   },
   { immediate: true }

app/javascript/dashboard/store/captain/config.js

@@ -22,6 +22,10 @@ const getters = {
     const feature = $state.features[featureKey];
     return feature?.default || null;
   },
+  getSelectedModelForFeature: $state => featureKey => {
+    const feature = $state.features[featureKey];
+    return feature?.selected || feature?.default || null;
+  },
 };
 
 const mutations = {