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/DeleteDialog.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  entity: {
+    type: Object,
+    required: true,
+  },
+  deletePayload: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const deleteDialogRef = ref(null);
+const i18nKey = computed(() => props.type.toUpperCase());
+
+const deleteEntity = async payload => {
+  if (!payload) return;
+
+  try {
+    await store.dispatch(`captain${props.type}/delete`, payload);
+    useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.SUCCESS_MESSAGE`));
+  } catch (error) {
+    useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.ERROR_MESSAGE`));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  await deleteEntity(props.deletePayload || props.entity.id);
+  deleteDialogRef.value?.close();
+};
+
+defineExpose({ dialogRef: deleteDialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="deleteDialogRef"
+    type="alert"
+    :title="t(`CAPTAIN.${i18nKey}.DELETE.TITLE`)"
+    :description="t(`CAPTAIN.${i18nKey}.DELETE.DESCRIPTION`)"
+    :confirm-button-label="t(`CAPTAIN.${i18nKey}.DELETE.CONFIRM`)"
+    @confirm="handleDialogConfirm"
+  />
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue

@@ -0,0 +1,174 @@
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainAssistants/getUIFlags'),
+};
+
+const initialState = {
+  name: '',
+  description: '',
+  productName: '',
+  featureFaq: false,
+  featureMemory: false,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  name: { required, minLength: minLength(1) },
+  description: { required, minLength: minLength(1) },
+  productName: { required, minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.ASSISTANTS.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  name: getErrorMessage('name', 'NAME'),
+  description: getErrorMessage('description', 'DESCRIPTION'),
+  productName: getErrorMessage('productName', 'PRODUCT_NAME'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareAssistantDetails = () => ({
+  name: state.name,
+  description: state.description,
+  config: {
+    product_name: state.productName,
+    feature_faq: state.featureFaq,
+    feature_memory: state.featureMemory,
+  },
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareAssistantDetails());
+};
+
+const updateStateFromAssistant = assistant => {
+  if (!assistant) return;
+
+  const { name, description, config } = assistant;
+
+  Object.assign(state, {
+    name,
+    description,
+    productName: config.product_name,
+    featureFaq: config.feature_faq || false,
+    featureMemory: config.feature_memory || false,
+  });
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (props.mode === 'edit' && newAssistant) {
+      updateStateFromAssistant(newAssistant);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.name"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
+      :message="formErrors.name"
+      :message-type="formErrors.name ? 'error' : 'info'"
+    />
+
+    <Editor
+      v-model="state.description"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
+      :message="formErrors.description"
+      :message-type="formErrors.description ? 'error' : 'info'"
+    />
+
+    <Input
+      v-model="state.productName"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
+      :message="formErrors.productName"
+      :message-type="formErrors.productName ? 'error' : 'info'"
+    />
+
+    <fieldset class="flex flex-col gap-2.5">
+      <legend class="mb-3 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
+      </legend>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.featureFaq" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
+        </span>
+      </label>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.featureMemory" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
+        </span>
+      </label>
+    </fieldset>
+
+    <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.${mode.toUpperCase()}`)"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import AssistantForm from './AssistantForm.vue';
+
+const props = defineProps({
+  selectedAssistant: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: 'create',
+    validator: value => ['create', 'edit'].includes(value),
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const assistantForm = ref(null);
+
+const updateAssistant = assistantDetails =>
+  store.dispatch('captainAssistants/update', {
+    id: props.selectedAssistant.id,
+    ...assistantDetails,
+  });
+
+const i18nKey = computed(
+  () => `CAPTAIN.ASSISTANTS.${props.type.toUpperCase()}`
+);
+
+const createAssistant = assistantDetails =>
+  store.dispatch('captainAssistants/create', assistantDetails);
+
+const handleSubmit = async updatedAssistant => {
+  try {
+    if (props.type === 'edit') {
+      await updateAssistant(updatedAssistant);
+    } else {
+      await createAssistant(updatedAssistant);
+    }
+    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage = error?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t(`${i18nKey}.TITLE`)"
+    :description="t('CAPTAIN.ASSISTANTS.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    overflow-y-auto
+    @close="handleClose"
+  >
+    <AssistantForm
+      ref="assistantForm"
+      :mode="type"
+      :assistant="selectedAssistant"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import DocumentForm from './DocumentForm.vue';
+
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const documentForm = ref(null);
+
+const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
+
+const handleSubmit = async newDocument => {
+  try {
+    await store.dispatch('captainDocuments/create', newDocument);
+    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.DOCUMENTS.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <DocumentForm
+      ref="documentForm"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, url } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainDocuments/getUIFlags'),
+  assistants: useMapGetter('captainAssistants/getRecords'),
+};
+
+const initialState = {
+  name: '',
+  assistantId: null,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  url: { required, url, minLength: minLength(1) },
+  assistantId: { required },
+};
+
+const assistantList = computed(() =>
+  formState.assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+  }))
+);
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  url: getErrorMessage('url', 'URL'),
+  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareDocumentDetails = () => ({
+  external_link: state.url,
+  assistant_id: state.assistantId,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareDocumentDetails());
+};
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.url"
+      :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
+      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
+      :message="formErrors.url"
+      :message-type="formErrors.url ? 'error' : 'info'"
+    />
+    <div class="flex flex-col gap-1">
+      <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
+      </label>
+      <ComboBox
+        id="assistant"
+        v-model="state.assistantId"
+        :options="assistantList"
+        :has-error="!!formErrors.assistantId"
+        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.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.assistantId"
+      />
+    </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>

app/javascript/dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ResponseCard from '../../assistant/ResponseCard.vue';
+const props = defineProps({
+  captainDocument: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+const dialogRef = ref(null);
+
+const uiFlags = useMapGetter('captainResponses/getUIFlags');
+const responses = useMapGetter('captainResponses/getRecords');
+const isFetching = computed(() => uiFlags.value.fetchingList);
+
+const handleClose = () => {
+  emit('close');
+};
+
+onMounted(() => {
+  store.dispatch('captainResponses/get', {
+    assistantId: props.captainDocument.assistant.id,
+    documentId: props.captainDocument.id,
+  });
+});
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')"
+    :description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    overflow-y-auto
+    width="3xl"
+    @close="handleClose"
+  >
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else class="flex flex-col gap-3 min-h-48">
+      <ResponseCard
+        v-for="response in responses"
+        :id="response.id"
+        :key="response.id"
+        :question="response.question"
+        :answer="response.answer"
+        :assistant="response.assistant"
+        :created-at="response.created_at"
+        :updated-at="response.updated_at"
+        compact
+      />
+    </div>
+  </Dialog>
+</template>

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

@@ -0,0 +1,65 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ConnectInboxForm from './ConnectInboxForm.vue';
+
+defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const connectForm = ref(null);
+
+const i18nKey = 'CAPTAIN.INBOXES.CREATE';
+
+const handleSubmit = async payload => {
+  try {
+    await store.dispatch('captainInboxes/create', payload);
+    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage = error?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="create"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.INBOXES.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <ConnectInboxForm
+      ref="connectForm"
+      :assistant-id="assistantId"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

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>

app/javascript/dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ResponseForm from './ResponseForm.vue';
+
+const props = defineProps({
+  selectedResponse: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: 'create',
+    validator: value => ['create', 'edit'].includes(value),
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const responseForm = ref(null);
+
+const updateResponse = responseDetails =>
+  store.dispatch('captainResponses/update', {
+    id: props.selectedResponse.id,
+    ...responseDetails,
+  });
+
+const i18nKey = computed(() => `CAPTAIN.RESPONSES.${props.type.toUpperCase()}`);
+
+const createResponse = responseDetails =>
+  store.dispatch('captainResponses/create', responseDetails);
+
+const handleSubmit = async updatedResponse => {
+  try {
+    if (props.type === 'edit') {
+      await updateResponse(updatedResponse);
+    } else {
+      await createResponse(updatedResponse);
+    }
+    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.RESPONSES.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <ResponseForm
+      ref="responseForm"
+      :mode="type"
+      :response="selectedResponse"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue

@@ -0,0 +1,161 @@
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  response: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['submit', 'cancel']);
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainResponses/getUIFlags'),
+  assistants: useMapGetter('captainAssistants/getRecords'),
+};
+
+const initialState = {
+  question: '',
+  answer: '',
+  assistantId: null,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  question: { required, minLength: minLength(1) },
+  answer: { required, minLength: minLength(1) },
+  assistantId: { required },
+};
+
+const assistantList = computed(() =>
+  formState.assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+  }))
+);
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.RESPONSES.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  question: getErrorMessage('question', 'QUESTION'),
+  answer: getErrorMessage('answer', 'ANSWER'),
+  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareDocumentDetails = () => ({
+  question: state.question,
+  answer: state.answer,
+  assistant_id: state.assistantId,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareDocumentDetails());
+};
+
+const updateStateFromResponse = response => {
+  if (!response) return;
+
+  const { question, answer, assistant } = response;
+
+  Object.assign(state, {
+    question,
+    answer,
+    assistantId: assistant.id,
+  });
+};
+
+watch(
+  () => props.response,
+  newResponse => {
+    if (props.mode === 'edit' && newResponse) {
+      updateStateFromResponse(newResponse);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.question"
+      :label="t('CAPTAIN.RESPONSES.FORM.QUESTION.LABEL')"
+      :placeholder="t('CAPTAIN.RESPONSES.FORM.QUESTION.PLACEHOLDER')"
+      :message="formErrors.question"
+      :message-type="formErrors.question ? 'error' : 'info'"
+    />
+
+    <Editor
+      v-model="state.answer"
+      :label="t('CAPTAIN.RESPONSES.FORM.ANSWER.LABEL')"
+      :placeholder="t('CAPTAIN.RESPONSES.FORM.ANSWER.PLACEHOLDER')"
+      :message="formErrors.answer"
+      :max-length="10000"
+      :message-type="formErrors.answer ? 'error' : 'info'"
+    />
+
+    <div class="flex flex-col gap-1">
+      <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.RESPONSES.FORM.ASSISTANT.LABEL') }}
+      </label>
+      <ComboBox
+        id="assistant"
+        v-model="state.assistantId"
+        :options="assistantList"
+        :has-error="!!formErrors.assistantId"
+        :placeholder="t('CAPTAIN.RESPONSES.FORM.ASSISTANT.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.assistantId"
+      />
+    </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.${mode.toUpperCase()}`)"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>