feat(ee): Add Captain features (#10665)

Migration Guide: https://chwt.app/v4/migration

This PR imports all the work related to Captain into the EE codebase. Captain represents the AI-based features in Chatwoot and includes the following key components:

- Assistant: An assistant has a persona, the product it would be trained on. At the moment, the data at which it is trained is from websites. Future integrations on Notion documents, PDF etc. This PR enables connecting an assistant to an inbox. The assistant would run the conversation every time before transferring it to an agent.
- Copilot for Agents: When an agent is supporting a customer, we will be able to offer additional help to lookup some data or fetch information from integrations etc via copilot.
- Conversation FAQ generator: When a conversation is resolved, the Captain integration would identify questions which were not in the knowledge base.
- CRM memory: Learns from the conversations and identifies important information about the contact.

---------

Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+
+const props = defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainInboxes/getUIFlags'),
+  inboxes: useMapGetter('inboxes/getInboxes'),
+  captainInboxes: useMapGetter('captainInboxes/getRecords'),
+};
+
+const initialState = {
+  inboxId: null,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  inboxId: { required },
+};
+
+const inboxList = computed(() => {
+  const captainInboxIds = formState.captainInboxes.value.map(inbox => inbox.id);
+
+  return formState.inboxes.value
+    .filter(inbox => !captainInboxIds.includes(inbox.id))
+    .map(inbox => ({
+      value: inbox.id,
+      label: inbox.name,
+    }));
+});
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.INBOXES.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  inboxId: getErrorMessage('inboxId', 'INBOX'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareInboxPayload = () => ({
+  inboxId: state.inboxId,
+  assistantId: props.assistantId,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareInboxPayload());
+};
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <div class="flex flex-col gap-1">
+      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.INBOXES.FORM.INBOX.LABEL') }}
+      </label>
+      <ComboBox
+        id="inbox"
+        v-model="state.inboxId"
+        :options="inboxList"
+        :has-error="!!formErrors.inboxId"
+        :placeholder="t('CAPTAIN.INBOXES.FORM.INBOX.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        :message="formErrors.inboxId"
+      />
+    </div>
+
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="t('CAPTAIN.FORM.CREATE')"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>