feat(ee): Setup @chatwoot/captain NPM library (#10389)

--- 
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/api/integrations.js

@@ -33,8 +33,8 @@ class IntegrationsAPI extends ApiClient {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
 
-  fetchCaptainURL() {
-    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
+  requestCaptain(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
   }
 }
 

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

@@ -164,9 +164,25 @@ const menuItems = computed(() => {
     },
     {
       name: 'Captain',
-      icon: 'i-lucide-bot',
+      icon: 'i-woot-captain',
       label: t('SIDEBAR.CAPTAIN'),
-      to: accountScopedRoute('captain'),
+      children: [
+        {
+          name: 'Documents',
+          label: 'Documents',
+          to: accountScopedRoute('captain', { page: 'documents' }),
+        },
+        {
+          name: 'Responses',
+          label: 'Responses',
+          to: accountScopedRoute('captain', { page: 'responses' }),
+        },
+        {
+          name: 'Playground',
+          label: 'Playground',
+          to: accountScopedRoute('captain', { page: 'playground' }),
+        },
+      ],
     },
     {
       name: 'Contacts',

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

@@ -122,7 +122,9 @@ const toggleTrigger = () => {
       <template v-for="child in children" :key="child.name">
         <SidebarSubGroup
           v-if="child.children"
-          v-bind="child"
+          :label="child.label"
+          :icon="child.icon"
+          :children="child.children"
           :is-expanded="isExpanded"
           :active-child="activeChild"
         />

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -22,7 +22,7 @@ const primaryMenuItems = accountId => [
     key: 'captain',
     label: 'CAPTAIN',
     featureFlag: FEATURE_FLAGS.CAPTAIN,
-    toState: frontendURL(`accounts/${accountId}/captain`),
+    toState: frontendURL(`accounts/${accountId}/captain/documents`),
     toStateName: 'captain',
   },
   {

app/javascript/dashboard/routes/dashboard/Captain.vue

@@ -1,75 +1,107 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { nextTick, watch, computed } from 'vue';
+import IntegrationsAPI from 'dashboard/api/integrations';
 import { useStoreGetters } from 'dashboard/composables/store';
+import { makeRouter, setupApp } from '@chatwoot/captain';
 
-import integrations from '../../api/integrations';
-import Spinner from 'shared/components/Spinner.vue';
-
-const isLoading = ref(true);
-const captainURL = ref('');
-const hasError = ref(false);
-
-const loadCaptainFrame = async integration => {
-  if (!integration || !integration.enabled) {
-    return;
-  }
-  try {
-    isLoading.value = true;
-    const { data } = await integrations.fetchCaptainURL();
-    captainURL.value = data.sso_url;
-  } catch (error) {
-    hasError.value = true;
-  } finally {
-    isLoading.value = false;
-  }
-};
+const props = defineProps({
+  page: {
+    type: String,
+    required: true,
+  },
+});
 
 const getters = useStoreGetters();
+
+const routeMap = {
+  documents: '/app/accounts/[account_id]/documents/',
+  playground: '/app/accounts/[account_id]/playground/',
+  responses: '/app/accounts/[account_id]/responses/',
+};
+
+const resolvedRoute = computed(() => routeMap[props.page]);
+
+let router = null;
+
+watch(
+  () => props.page,
+  () => {
+    if (router) {
+      router.push({ name: resolvedRoute.value });
+    }
+  },
+  { immediate: true }
+);
+
+const buildApp = () => {
+  router = makeRouter();
+  setupApp('#captain', {
+    router,
+    fetchFn: async (source, options) => {
+      const parsedSource = new URL(source);
+      let path = parsedSource.pathname;
+      if (path === `/api/sessions/profile`) {
+        path = '/sessions/profile';
+      } else {
+        path = path.replace(/^\/api\/accounts\/\d+/, '');
+      }
+
+      // include search params
+      path = `${path}${parsedSource.search}`;
+
+      const response = await IntegrationsAPI.requestCaptain({
+        method: options.method ?? 'GET',
+        route: path,
+        body: options.body ? JSON.parse(options.body) : null,
+      });
+
+      return {
+        json: () => {
+          return response.data;
+        },
+        ok: response.status >= 200 && response.status < 300,
+        status: response.status,
+        headers: response.headers,
+      };
+    },
+  });
+
+  router.push({ name: resolvedRoute.value });
+};
+
 const captainIntegration = computed(() =>
   getters['integrations/getIntegration'].value('captain', null)
 );
 
-onMounted(() => loadCaptainFrame(captainIntegration.value));
-
-watch(captainIntegration, updatedIntegration =>
-  loadCaptainFrame(updatedIntegration)
+watch(
+  () => captainIntegration.value,
+  (newValue, prevValue) => {
+    if (!prevValue && newValue) {
+      nextTick(() => buildApp());
+    }
+  },
+  { immediate: true }
 );
 </script>
 
 <template>
-  <div
-    class="flex-1 overflow-auto flex gap-8 flex-col font-inter text-slate-900 dark:text-slate-500"
-  >
-    <div class="flex-1 flex items-center justify-center">
-      <div v-if="!captainIntegration">
-        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
-      </div>
-      <div
-        v-else-if="!captainIntegration.enabled"
-        class="flex-1 flex flex-col gap-2 items-center justify-center"
-      >
-        <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
-        <router-link :to="{ name: 'settings_applications' }">
-          <woot-button class="clear link">
-            {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
-          </woot-button>
-        </router-link>
-      </div>
-      <div
-        v-else-if="isLoading"
-        class="flex-1 flex items-center justify-center"
-      >
-        <Spinner color-scheme="primary" />
-        <span>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.LOADING_CONSOLE') }}</span>
-      </div>
-      <div v-else-if="!isLoading && hasError">
-        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.FAILED_TO_LOAD_CONSOLE') }}
-      </div>
-      <iframe
-        v-else-if="!isLoading && captainURL"
-        :src="captainURL"
-        class="w-full min-h-[800px] h-full"
-      />
-    </div>
+  <div v-if="!captainIntegration">
+    {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
   </div>
+  <div
+    v-else-if="!captainIntegration.enabled"
+    class="flex-1 flex flex-col gap-2 items-center justify-center"
+  >
+    <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
+    <router-link :to="{ name: 'settings_applications' }">
+      <woot-button class="clear link">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
+      </woot-button>
+    </router-link>
+  </div>
+  <div v-else id="captain" class="w-full" />
 </template>
+
+<style>
+@import '@chatwoot/captain/dist/style.css';
+</style>

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

@@ -21,13 +21,14 @@ export default {
       component: AppContainer,
       children: [
         {
-          path: frontendURL('accounts/:accountId/captain'),
+          path: frontendURL('accounts/:accountId/captain/:page'),
           name: 'captain',
           component: Captain,
           meta: {
             permissions: ['administrator', 'agent'],
             featureFlag: FEATURE_FLAGS.CAPTAIN,
           },
+          props: true,
         },
         ...inboxRoutes,
         ...conversation.routes,