feat: Allow customizing the responses, flows in Captain (#11385)

- Ability to provide custom instructions to captain

<img width="1107" alt="Screenshot 2025-04-28 at 6 11 43 PM"
src="https://github.com/user-attachments/assets/f94cbccc-b4d8-48fd-b6b9-55524129bc50"
/>

app/javascript/dashboard/routes/dashboard/captain/assistants/Edit.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
+import EditAssistantForm from '../../../../components-next/captain/pageComponents/assistant/EditAssistantForm.vue';
+import AssistantPlayground from 'dashboard/components-next/captain/assistant/AssistantPlayground.vue';
+
+const route = useRoute();
+const store = useStore();
+const { t } = useI18n();
+const assistantId = route.params.assistantId;
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
+const isFetching = computed(() => uiFlags.value.fetchingItem);
+const assistant = computed(() =>
+  store.getters['captainAssistants/getRecord'](Number(assistantId))
+);
+
+const isAssistantAvailable = computed(() => !!assistant.value?.id);
+
+const handleSubmit = async updatedAssistant => {
+  try {
+    await store.dispatch('captainAssistants/update', {
+      id: assistantId,
+      ...updatedAssistant,
+    });
+    useAlert(t('CAPTAIN.ASSISTANTS.EDIT.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.message || t('CAPTAIN.ASSISTANTS.EDIT.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+onMounted(() => {
+  if (!isAssistantAvailable.value) {
+    store.dispatch('captainAssistants/show', assistantId);
+  }
+});
+</script>
+
+<template>
+  <PageLayout
+    :header-title="assistant?.name"
+    :show-pagination-footer="false"
+    :is-fetching="isFetching"
+    :show-know-more="false"
+    :back-url="{ name: 'captain_assistants_index' }"
+  >
+    <template #body>
+      <div v-if="!isAssistantAvailable">
+        {{ t('CAPTAIN.ASSISTANTS.EDIT.NOT_FOUND') }}
+      </div>
+      <div v-else class="flex gap-4 h-full">
+        <div class="flex-1 lg:overflow-auto pr-4 h-full md:h-auto">
+          <EditAssistantForm
+            :assistant="assistant"
+            mode="edit"
+            @submit="handleSubmit"
+          />
+        </div>
+        <div class="w-[400px] hidden lg:block h-full">
+          <AssistantPlayground :assistant-id="Number(assistantId)" />
+        </div>
+      </div>
+    </template>
+  </PageLayout>
+</template>

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

@@ -36,8 +36,10 @@ const handleCreate = () => {
 };
 
 const handleEdit = () => {
-  dialogType.value = 'edit';
-  nextTick(() => createAssistantDialog.value.dialogRef.open());
+  router.push({
+    name: 'captain_assistants_edit',
+    params: { assistantId: selectedAssistant.value.id },
+  });
 };
 
 const handleViewConnectedInboxes = () => {

app/javascript/dashboard/routes/dashboard/captain/captain.routes.js

@@ -2,6 +2,7 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { frontendURL } from '../../../helper/URLHelper';
 import AssistantIndex from './assistants/Index.vue';
+import AssistantEdit from './assistants/Edit.vue';
 import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
 import DocumentsIndex from './documents/Index.vue';
 import ResponsesIndex from './responses/Index.vue';
@@ -20,6 +21,19 @@ export const routes = [
       ],
     },
   },
+  {
+    path: frontendURL('accounts/:accountId/captain/assistants/:assistantId'),
+    component: AssistantEdit,
+    name: 'captain_assistants_edit',
+    meta: {
+      permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
   {
     path: frontendURL(
       'accounts/:accountId/captain/assistants/:assistantId/inboxes'