Restructure omni services and add Chatwoot research snapshot

2026-02-21 11:11:27 +07:00
parent edea7a0034
commit b73babbbf6
7732 changed files with 978203 additions and 32 deletions
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue
@@ -0,0 +1,59 @@
+<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,
+  },
+  bulkIds: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['deleteSuccess']);
+
+const { t } = useI18n();
+const store = useStore();
+const bulkDeleteDialogRef = ref(null);
+const i18nKey = computed(() => props.type.toUpperCase());
+
+const handleBulkDelete = async ids => {
+  if (!ids) return;
+
+  try {
+    await store.dispatch(
+      'captainBulkActions/handleBulkDelete',
+      Array.from(props.bulkIds)
+    );
+
+    emit('deleteSuccess');
+    useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.SUCCESS_MESSAGE`));
+  } catch (error) {
+    useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.ERROR_MESSAGE`));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  await handleBulkDelete(Array.from(props.bulkIds));
+  bulkDeleteDialogRef.value?.close();
+};
+
+defineExpose({ dialogRef: bulkDeleteDialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="bulkDeleteDialogRef"
+    type="alert"
+    :title="t(`CAPTAIN.${i18nKey}.BULK_DELETE.TITLE`)"
+    :description="t(`CAPTAIN.${i18nKey}.BULK_DELETE.DESCRIPTION`)"
+    :confirm-button-label="t(`CAPTAIN.${i18nKey}.BULK_DELETE.CONFIRM`)"
+    @confirm="handleDialogConfirm"
+  />
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/DeleteDialog.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/DeleteDialog.vue
@@ -0,0 +1,65 @@
+<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,
+  },
+  translationKey: {
+    type: String,
+    required: true,
+  },
+  entity: {
+    type: Object,
+    required: true,
+  },
+  deletePayload: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['deleteSuccess']);
+
+const { t } = useI18n();
+const store = useStore();
+const deleteDialogRef = ref(null);
+const i18nKey = computed(() => {
+  return props.translationKey || props.type.toUpperCase();
+});
+
+const deleteEntity = async payload => {
+  if (!payload) return;
+
+  try {
+    await store.dispatch(`captain${props.type}/delete`, payload);
+    emit('deleteSuccess');
+    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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+
+import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
+
+const router = useRouter();
+const currentUser = useMapGetter('getCurrentUser');
+
+const isSuperAdmin = computed(() => {
+  return currentUser.value.type === 'SuperAdmin';
+});
+const { accountId, isOnChatwootCloud } = useAccount();
+
+const i18nKey = computed(() =>
+  isOnChatwootCloud.value ? 'PAYWALL' : 'ENTERPRISE_PAYWALL'
+);
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+</script>
+
+<template>
+  <div
+    class="w-full max-w-5xl mx-auto h-full max-h-[448px] grid place-content-center"
+  >
+    <BasePaywallModal
+      class="mx-auto"
+      feature-prefix="CAPTAIN"
+      :i18n-key="i18nKey"
+      :is-super-admin="isSuperAdmin"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      @upgrade="openBilling"
+    />
+  </div>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
@@ -0,0 +1,184 @@
+<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,
+  featureCitation: 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,
+    feature_citation: state.featureCitation,
+  },
+});
+
+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,
+    featureCitation: config.feature_citation || 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>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.featureCitation" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
+        </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 text-n-blue-11 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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue
@@ -0,0 +1,97 @@
+<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', 'created']);
+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 = async assistantDetails => {
+  try {
+    const newAssistant = await store.dispatch(
+      'captainAssistants/create',
+      assistantDetails
+    );
+    emit('created', newAssistant);
+  } catch (error) {
+    const errorMessage = error?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantBasicSettingsForm.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantBasicSettingsForm.vue
@@ -0,0 +1,151 @@
+<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 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({
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+
+const initialState = {
+  name: '',
+  description: '',
+  productName: '',
+  features: {
+    conversationFaqs: false,
+    memories: false,
+    citations: 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 getErrorMessage = field => {
+  return v$.value[field].$error ? v$.value[field].$errors[0].$message : '';
+};
+
+const formErrors = computed(() => ({
+  name: getErrorMessage('name'),
+  description: getErrorMessage('description'),
+  productName: getErrorMessage('productName'),
+}));
+
+const updateStateFromAssistant = assistant => {
+  const { config = {} } = assistant;
+  state.name = assistant.name;
+  state.description = assistant.description;
+  state.productName = config.product_name;
+  state.features = {
+    conversationFaqs: config.feature_faq || false,
+    memories: config.feature_memory || false,
+    citations: config.feature_citation || false,
+  };
+};
+
+const handleBasicInfoUpdate = async () => {
+  const result = await Promise.all([
+    v$.value.name.$validate(),
+    v$.value.description.$validate(),
+    v$.value.productName.$validate(),
+  ]).then(results => results.every(Boolean));
+  if (!result) return;
+
+  const payload = {
+    name: state.name,
+    description: state.description,
+    config: {
+      ...props.assistant.config,
+      product_name: state.productName,
+      feature_faq: state.features.conversationFaqs,
+      feature_memory: state.features.memories,
+      feature_citation: state.features.citations,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (newAssistant) updateStateFromAssistant(newAssistant);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <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'"
+    />
+
+    <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'"
+    />
+
+    <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'"
+      class="z-0"
+    />
+
+    <div class="flex flex-col gap-2">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
+      </label>
+      <div class="flex flex-col gap-2">
+        <label class="flex items-center gap-2">
+          <input v-model="state.features.conversationFaqs" type="checkbox" />
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
+        </label>
+        <label class="flex items-center gap-2">
+          <input v-model="state.features.memories" type="checkbox" />
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
+        </label>
+        <label class="flex items-center gap-2">
+          <input v-model="state.features.citations" type="checkbox" />
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
+        </label>
+      </div>
+    </div>
+
+    <div>
+      <Button
+        :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+        @click="handleBasicInfoUpdate"
+      />
+    </div>
+  </div>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantControlItems.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantControlItems.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  controlItem: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const router = useRouter();
+
+const onClick = name => {
+  router.push({ name });
+};
+</script>
+
+<template>
+  <div
+    :key="controlItem.name"
+    class="pt-3 ltr:pl-4 rtl:pr-4 ltr:pr-2 rtl:pl-2 pb-5 gap-2 flex flex-col w-full shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 cursor-pointer"
+    @click="onClick(controlItem.routeName)"
+  >
+    <div class="flex items-center justify-between w-full gap-1 h-8">
+      <span class="text-sm font-medium text-n-slate-12 line-clamp-1">
+        {{ controlItem.name }}
+      </span>
+      <div class="flex items-center gap-2">
+        <Button
+          icon="i-lucide-chevron-right"
+          slate
+          ghost
+          xs
+          @click="onClick(controlItem.routeName)"
+        />
+      </div>
+    </div>
+    <span class="text-n-slate-11 text-sm leading-[21px] line-clamp-5">
+      {{ controlItem.description }}
+    </span>
+  </div>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantSystemSettingsForm.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantSystemSettingsForm.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { minLength } from '@vuelidate/validators';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useAccount } from 'dashboard/composables/useAccount';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+
+const props = defineProps({
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+const { isCloudFeatureEnabled } = useAccount();
+
+const isCaptainV2Enabled = computed(() =>
+  isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_V2)
+);
+
+const initialState = {
+  handoffMessage: '',
+  resolutionMessage: '',
+  instructions: '',
+  temperature: 1,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  handoffMessage: { minLength: minLength(1) },
+  resolutionMessage: { minLength: minLength(1) },
+  instructions: { minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const getErrorMessage = field => {
+  return v$.value[field].$error ? v$.value[field].$errors[0].$message : '';
+};
+
+const formErrors = computed(() => ({
+  handoffMessage: getErrorMessage('handoffMessage'),
+  resolutionMessage: getErrorMessage('resolutionMessage'),
+  instructions: getErrorMessage('instructions'),
+}));
+
+const updateStateFromAssistant = assistant => {
+  const { config = {} } = assistant;
+  state.handoffMessage = config.handoff_message;
+  state.resolutionMessage = config.resolution_message;
+  state.instructions = config.instructions;
+  state.temperature = config.temperature || 1;
+};
+
+const handleSystemMessagesUpdate = async () => {
+  const validations = [
+    v$.value.handoffMessage.$validate(),
+    v$.value.resolutionMessage.$validate(),
+  ];
+
+  if (!isCaptainV2Enabled.value) {
+    validations.push(v$.value.instructions.$validate());
+  }
+
+  const result = await Promise.all(validations).then(results =>
+    results.every(Boolean)
+  );
+  if (!result) return;
+
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      handoff_message: state.handoffMessage,
+      resolution_message: state.resolutionMessage,
+      temperature: state.temperature || 1,
+    },
+  };
+
+  if (!isCaptainV2Enabled.value) {
+    payload.config.instructions = state.instructions;
+  }
+
+  emit('submit', payload);
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (newAssistant) updateStateFromAssistant(newAssistant);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <Editor
+      v-model="state.handoffMessage"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.PLACEHOLDER')"
+      :message="formErrors.handoffMessage"
+      :message-type="formErrors.handoffMessage ? 'error' : 'info'"
+      class="z-0"
+    />
+
+    <Editor
+      v-model="state.resolutionMessage"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.PLACEHOLDER')"
+      :message="formErrors.resolutionMessage"
+      :message-type="formErrors.resolutionMessage ? 'error' : 'info'"
+      class="z-0"
+    />
+
+    <Editor
+      v-if="!isCaptainV2Enabled"
+      v-model="state.instructions"
+      :label="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.LABEL')"
+      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
+      :message="formErrors.instructions"
+      :max-length="20000"
+      :message-type="formErrors.instructions ? 'error' : 'info'"
+      class="z-0"
+    />
+
+    <div class="flex flex-col gap-2">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.LABEL') }}
+      </label>
+      <div class="flex items-center gap-4">
+        <input
+          v-model="state.temperature"
+          type="range"
+          min="0"
+          max="1"
+          step="0.1"
+          class="w-full"
+        />
+        <span class="text-sm text-n-slate-12">{{ state.temperature }}</span>
+      </div>
+      <p class="text-sm text-n-slate-11 italic">
+        {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
+      </p>
+    </div>
+
+    <div>
+      <Button
+        :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+        @click="handleSystemMessagesUpdate"
+      />
+    </div>
+  </div>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { defineModel, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  authType: {
+    type: String,
+    required: true,
+    validator: value => ['none', 'bearer', 'basic', 'api_key'].includes(value),
+  },
+});
+
+const { t } = useI18n();
+
+const authConfig = defineModel('authConfig', {
+  type: Object,
+  default: () => ({}),
+});
+
+watch(
+  () => props.authType,
+  () => {
+    authConfig.value = {};
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <Input
+      v-if="authType === 'bearer'"
+      v-model="authConfig.token"
+      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.BEARER_TOKEN')"
+      :placeholder="
+        t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.BEARER_TOKEN_PLACEHOLDER')
+      "
+    />
+    <template v-else-if="authType === 'basic'">
+      <Input
+        v-model="authConfig.username"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.USERNAME')"
+        :placeholder="
+          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.USERNAME_PLACEHOLDER')
+        "
+      />
+      <Input
+        v-model="authConfig.password"
+        type="password"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.PASSWORD')"
+        :placeholder="
+          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.PASSWORD_PLACEHOLDER')
+        "
+      />
+    </template>
+    <template v-else-if="authType === 'api_key'">
+      <Input
+        v-model="authConfig.name"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_KEY')"
+        :placeholder="
+          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_KEY_PLACEHOLDER')
+        "
+      />
+      <Input
+        v-model="authConfig.key"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_VALUE')"
+        :placeholder="
+          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_VALUE_PLACEHOLDER')
+        "
+      />
+    </template>
+  </div>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CreateCustomToolDialog.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CreateCustomToolDialog.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 { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import CustomToolForm from './CustomToolForm.vue';
+
+const props = defineProps({
+  selectedTool: {
+    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 updateTool = toolDetails =>
+  store.dispatch('captainCustomTools/update', {
+    id: props.selectedTool.id,
+    ...toolDetails,
+  });
+
+const i18nKey = computed(
+  () => `CAPTAIN.CUSTOM_TOOLS.${props.type.toUpperCase()}`
+);
+
+const createTool = toolDetails =>
+  store.dispatch('captainCustomTools/create', toolDetails);
+
+const handleSubmit = async updatedTool => {
+  try {
+    if (props.type === 'edit') {
+      await updateTool(updatedTool);
+    } else {
+      await createTool(updatedTool);
+    }
+    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      parseAPIErrorResponse(error) || t(`${i18nKey.value}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="2xl"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.CUSTOM_TOOLS.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <CustomToolForm
+      :mode="type"
+      :tool="selectedTool"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolCard.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolCard.vue
@@ -0,0 +1,125 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Policy from 'dashboard/components/policy.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  authType: {
+    type: String,
+    default: 'none',
+  },
+  updatedAt: {
+    type: Number,
+    required: true,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action']);
+
+const { t } = useI18n();
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const menuItems = computed(() => [
+  {
+    label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.EDIT_TOOL'),
+    value: 'edit',
+    action: 'edit',
+    icon: 'i-lucide-pencil-line',
+  },
+  {
+    label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.DELETE_TOOL'),
+    value: 'delete',
+    action: 'delete',
+    icon: 'i-lucide-trash',
+  },
+]);
+
+const timestamp = computed(() =>
+  dynamicTime(props.updatedAt || props.createdAt)
+);
+
+const handleAction = ({ action, value }) => {
+  toggleDropdown(false);
+  emit('action', { action, value, id: props.id });
+};
+
+const authTypeLabel = computed(() => {
+  return t(
+    `CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.${props.authType.toUpperCase()}`
+  );
+});
+</script>
+
+<template>
+  <CardLayout class="relative">
+    <div class="flex relative justify-between w-full gap-1">
+      <span class="text-base text-n-slate-12 line-clamp-1 font-medium">
+        {{ title }}
+      </span>
+      <div class="flex items-center gap-2">
+        <Policy
+          v-on-clickaway="() => toggleDropdown(false)"
+          :permissions="['administrator']"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="menuItems"
+            class="mt-1 ltr:right-0 rtl:right-0 top-full"
+            @action="handleAction($event)"
+          />
+        </Policy>
+      </div>
+    </div>
+    <div class="flex items-center justify-between w-full gap-4">
+      <div class="flex items-center gap-3 flex-1">
+        <span
+          v-if="description"
+          class="text-sm truncate text-n-slate-11 flex-1"
+        >
+          {{ description }}
+        </span>
+        <span
+          v-if="authType !== 'none'"
+          class="text-sm shrink-0 text-n-slate-11 inline-flex items-center gap-1"
+        >
+          <i class="i-lucide-lock text-base" />
+          {{ authTypeLabel }}
+        </span>
+      </div>
+      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
+        {{ timestamp }}
+      </span>
+    </div>
+  </CardLayout>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue
@@ -0,0 +1,271 @@
+<script setup>
+import { reactive, computed, useTemplateRef, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import ParamRow from './ParamRow.vue';
+import AuthConfig from './AuthConfig.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'create',
+    validator: value => ['create', 'edit'].includes(value),
+  },
+  tool: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainCustomTools/getUIFlags'),
+};
+
+const initialState = {
+  title: '',
+  description: '',
+  endpoint_url: '',
+  http_method: 'GET',
+  request_template: '',
+  response_template: '',
+  auth_type: 'none',
+  auth_config: {},
+  param_schema: [],
+};
+
+const state = reactive({ ...initialState });
+
+// Populate form when in edit mode
+watch(
+  () => props.tool,
+  newTool => {
+    if (props.mode === 'edit' && newTool && newTool.id) {
+      state.title = newTool.title || '';
+      state.description = newTool.description || '';
+      state.endpoint_url = newTool.endpoint_url || '';
+      state.http_method = newTool.http_method || 'GET';
+      state.request_template = newTool.request_template || '';
+      state.response_template = newTool.response_template || '';
+      state.auth_type = newTool.auth_type || 'none';
+      state.auth_config = newTool.auth_config || {};
+      state.param_schema = newTool.param_schema || [];
+    }
+  },
+  { immediate: true }
+);
+
+const DEFAULT_PARAM = {
+  name: '',
+  type: 'string',
+  description: '',
+  required: false,
+};
+
+const validationRules = {
+  title: { required },
+  endpoint_url: { required },
+  http_method: { required },
+  auth_type: { required },
+};
+
+const httpMethodOptions = computed(() => [
+  { value: 'GET', label: 'GET' },
+  { value: 'POST', label: 'POST' },
+]);
+
+const authTypeOptions = computed(() => [
+  { value: 'none', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.NONE') },
+  { value: 'bearer', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.BEARER') },
+  { value: 'basic', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.BASIC') },
+  {
+    value: 'api_key',
+    label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.API_KEY'),
+  },
+]);
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() =>
+  props.mode === 'edit'
+    ? formState.uiFlags.value.updatingItem
+    : formState.uiFlags.value.creatingItem
+);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  title: getErrorMessage('title', 'TITLE'),
+  endpoint_url: getErrorMessage('endpoint_url', 'ENDPOINT_URL'),
+}));
+
+const paramsRef = useTemplateRef('paramsRef');
+
+const isParamsValid = () => {
+  if (!paramsRef.value || paramsRef.value.length === 0) {
+    return true;
+  }
+  return paramsRef.value.every(param => param.validate());
+};
+
+const removeParam = index => {
+  state.param_schema.splice(index, 1);
+};
+
+const addParam = () => {
+  state.param_schema.push({ ...DEFAULT_PARAM });
+};
+
+const handleCancel = () => emit('cancel');
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid || !isParamsValid()) {
+    return;
+  }
+
+  emit('submit', state);
+};
+</script>
+
+<template>
+  <form
+    class="flex flex-col px-4 -mx-4 gap-4 max-h-[calc(100vh-200px)] overflow-y-scroll"
+    @submit.prevent="handleSubmit"
+  >
+    <Input
+      v-model="state.title"
+      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.TITLE.LABEL')"
+      :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.TITLE.PLACEHOLDER')"
+      :message="formErrors.title"
+      :message-type="formErrors.title ? 'error' : 'info'"
+    />
+
+    <TextArea
+      v-model="state.description"
+      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.DESCRIPTION.LABEL')"
+      :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.DESCRIPTION.PLACEHOLDER')"
+      :rows="2"
+    />
+
+    <div class="flex gap-2">
+      <div class="flex flex-col gap-1 w-28">
+        <label class="mb-0.5 text-sm font-medium text-n-slate-12">
+          {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.HTTP_METHOD.LABEL') }}
+        </label>
+        <ComboBox
+          v-model="state.http_method"
+          :options="httpMethodOptions"
+          class="[&>div>button]:bg-n-alpha-black2 [&_li]:font-mono [&_button]:font-mono [&>div>button]:outline-offset-[-1px]"
+        />
+      </div>
+      <Input
+        v-model="state.endpoint_url"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.ENDPOINT_URL.LABEL')"
+        :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.ENDPOINT_URL.PLACEHOLDER')"
+        :message="formErrors.endpoint_url"
+        :message-type="formErrors.endpoint_url ? 'error' : 'info'"
+        class="flex-1"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPE.LABEL') }}
+      </label>
+      <ComboBox
+        v-model="state.auth_type"
+        :options="authTypeOptions"
+        class="[&>div>button]:bg-n-alpha-black2"
+      />
+    </div>
+
+    <AuthConfig
+      v-model:auth-config="state.auth_config"
+      :auth-type="state.auth_type"
+    />
+
+    <div class="flex flex-col gap-2">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAMETERS.LABEL') }}
+      </label>
+      <p class="text-xs text-n-slate-11 -mt-1">
+        {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAMETERS.HELP_TEXT') }}
+      </p>
+      <ul v-if="state.param_schema.length > 0" class="grid gap-2 list-none">
+        <ParamRow
+          v-for="(param, index) in state.param_schema"
+          :key="index"
+          ref="paramsRef"
+          v-model:name="param.name"
+          v-model:type="param.type"
+          v-model:description="param.description"
+          v-model:required="param.required"
+          @remove="removeParam(index)"
+        />
+      </ul>
+      <Button
+        type="button"
+        sm
+        ghost
+        blue
+        icon="i-lucide-plus"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.ADD_PARAMETER')"
+        @click="addParam"
+      />
+    </div>
+
+    <TextArea
+      v-if="state.http_method === 'POST'"
+      v-model="state.request_template"
+      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.REQUEST_TEMPLATE.LABEL')"
+      :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.REQUEST_TEMPLATE.PLACEHOLDER')"
+      :rows="4"
+      class="[&_textarea]:font-mono"
+    />
+
+    <TextArea
+      v-model="state.response_template"
+      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.RESPONSE_TEMPLATE.LABEL')"
+      :placeholder="
+        t('CAPTAIN.CUSTOM_TOOLS.FORM.RESPONSE_TEMPLATE.PLACEHOLDER')
+      "
+      :rows="4"
+      class="[&_textarea]:font-mono"
+    />
+
+    <div class="flex gap-3 justify-between items-center w-full">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="
+          t(mode === 'edit' ? 'CAPTAIN.FORM.EDIT' : 'CAPTAIN.FORM.CREATE')
+        "
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue
@@ -0,0 +1,113 @@
+<script setup>
+import { computed, defineModel, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+
+const emit = defineEmits(['remove']);
+const { t } = useI18n();
+const showErrors = ref(false);
+
+const name = defineModel('name', {
+  type: String,
+  required: true,
+});
+
+const type = defineModel('type', {
+  type: String,
+  required: true,
+});
+
+const description = defineModel('description', {
+  type: String,
+  default: '',
+});
+
+const required = defineModel('required', {
+  type: Boolean,
+  default: false,
+});
+
+const paramTypeOptions = computed(() => [
+  { value: 'string', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.STRING') },
+  { value: 'number', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.NUMBER') },
+  {
+    value: 'boolean',
+    label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.BOOLEAN'),
+  },
+  { value: 'array', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.ARRAY') },
+  { value: 'object', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.OBJECT') },
+]);
+
+const validationError = computed(() => {
+  if (!name.value || name.value.trim() === '') {
+    return 'PARAM_NAME_REQUIRED';
+  }
+  return null;
+});
+
+watch([name, type, description, required], () => {
+  showErrors.value = false;
+});
+
+const validate = () => {
+  showErrors.value = true;
+  return !validationError.value;
+};
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <li class="list-none">
+    <div
+      class="flex items-start gap-2 p-3 rounded-lg border border-n-weak bg-n-alpha-2"
+      :class="{
+        'animate-wiggle border-n-ruby-9': showErrors && validationError,
+      }"
+    >
+      <div class="flex flex-col flex-1 gap-3">
+        <div class="grid grid-cols-3 gap-2">
+          <Input
+            v-model="name"
+            :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_NAME.PLACEHOLDER')"
+            class="col-span-2"
+          />
+          <ComboBox
+            v-model="type"
+            :options="paramTypeOptions"
+            :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPE.PLACEHOLDER')"
+            class="[&>div>button]:bg-n-alpha-black2"
+          />
+        </div>
+        <Input
+          v-model="description"
+          :placeholder="
+            t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_DESCRIPTION.PLACEHOLDER')
+          "
+        />
+        <label class="flex items-center gap-2 cursor-pointer">
+          <Checkbox v-model="required" />
+          <span class="text-sm text-n-slate-11">
+            {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_REQUIRED.LABEL') }}
+          </span>
+        </label>
+      </div>
+      <Button
+        solid
+        slate
+        icon="i-lucide-trash"
+        class="flex-shrink-0"
+        @click.stop="emit('remove')"
+      />
+    </div>
+    <span
+      v-if="showErrors && validationError"
+      class="block mt-1 text-sm text-n-ruby-11"
+    >
+      {{ t(`CAPTAIN.CUSTOM_TOOLS.FORM.ERRORS.${validationError}`) }}
+    </span>
+  </li>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.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 { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import DocumentForm from './DocumentForm.vue';
+
+defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = 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 =
+      parseAPIErrorResponse(error) || 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
+      :assistant-id="assistantId"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -0,0 +1,235 @@
+<script setup>
+import { reactive, computed, ref, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { minLength, requiredIf, url } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+
+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 props = defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainDocuments/getUIFlags'),
+};
+
+const initialState = {
+  name: '',
+  url: '',
+  documentType: 'url',
+  pdfFile: null,
+};
+
+const state = reactive({ ...initialState });
+const fileInputRef = ref(null);
+
+const validationRules = {
+  url: {
+    required: requiredIf(() => state.documentType === 'url'),
+    url: requiredIf(() => state.documentType === 'url' && url),
+    minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
+  },
+  pdfFile: {
+    required: requiredIf(() => state.documentType === 'pdf'),
+  },
+};
+
+const documentTypeOptions = [
+  { value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
+  { value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
+];
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const hasPdfFileError = computed(() => v$.value.pdfFile.$error);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  url: getErrorMessage('url', 'URL'),
+  pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const handleFileChange = event => {
+  const file = event.target.files[0];
+  if (file) {
+    if (file.type !== 'application/pdf') {
+      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.INVALID_TYPE'));
+      event.target.value = '';
+      return;
+    }
+    if (file.size > MAX_FILE_SIZE) {
+      // 10MB
+      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
+      event.target.value = '';
+      return;
+    }
+    state.pdfFile = file;
+    state.name = file.name.replace(/\.pdf$/i, '');
+  }
+};
+
+const openFileDialog = () => {
+  // Use nextTick to ensure the ref is available
+  nextTick(() => {
+    if (fileInputRef.value) {
+      fileInputRef.value.click();
+    }
+  });
+};
+
+const prepareDocumentDetails = () => {
+  const formData = new FormData();
+  formData.append('document[assistant_id]', props.assistantId);
+
+  if (state.documentType === 'url') {
+    formData.append('document[external_link]', state.url);
+    formData.append('document[name]', state.name || state.url);
+  } else {
+    formData.append('document[pdf_file]', state.pdfFile);
+    formData.append(
+      'document[name]',
+      state.name || state.pdfFile.name.replace('.pdf', '')
+    );
+    // No need to send external_link for PDF - it's auto-generated in the backend
+  }
+
+  return formData;
+};
+
+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">
+    <div class="flex flex-col gap-1">
+      <label
+        for="documentType"
+        class="mb-0.5 text-sm font-medium text-n-slate-12"
+      >
+        {{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
+      </label>
+      <ComboBox
+        id="documentType"
+        v-model="state.documentType"
+        :options="documentTypeOptions"
+        class="[&>div>button]:bg-n-alpha-black2"
+      />
+    </div>
+
+    <Input
+      v-if="state.documentType === 'url'"
+      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 v-if="state.documentType === 'pdf'" class="flex flex-col gap-2">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.LABEL') }}
+      </label>
+      <div class="relative">
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept=".pdf"
+          class="hidden"
+          @change="handleFileChange"
+        />
+        <Button
+          type="button"
+          :color="hasPdfFileError ? 'ruby' : 'slate'"
+          :variant="hasPdfFileError ? 'outline' : 'solid'"
+          class="!w-full !h-auto !justify-between !py-4"
+          @click="openFileDialog"
+        >
+          <template #default>
+            <div class="flex gap-2 items-center">
+              <div
+                class="flex justify-center items-center w-10 h-10 rounded-lg bg-n-slate-3"
+              >
+                <i class="text-xl i-ph-file-pdf text-n-slate-11" />
+              </div>
+              <div class="flex flex-col flex-1 gap-1 items-start">
+                <p class="m-0 text-sm font-medium text-n-slate-12">
+                  {{
+                    state.pdfFile
+                      ? state.pdfFile.name
+                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
+                  }}
+                </p>
+                <p class="m-0 text-xs text-n-slate-11">
+                  {{
+                    state.pdfFile
+                      ? `${(state.pdfFile.size / 1024 / 1024).toFixed(2)} MB`
+                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.HELP_TEXT')
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <i class="i-lucide-upload text-n-slate-11" />
+          </template>
+        </Button>
+      </div>
+      <p v-if="formErrors.pdfFile" class="text-xs text-n-ruby-9">
+        {{ formErrors.pdfFile }}
+      </p>
+    </div>
+
+    <Input
+      v-model="state.name"
+      :label="t('CAPTAIN.DOCUMENTS.FORM.NAME.LABEL')"
+      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
+    />
+
+    <div class="flex gap-3 justify-between items-center w-full">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 text-n-blue-11 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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { onMounted, computed } from 'vue';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useCaptain } from 'dashboard/composables/useCaptain';
+import { useRouter } from 'vue-router';
+
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+const router = useRouter();
+const { accountId } = useAccount();
+
+const { documentLimits, fetchLimits } = useCaptain();
+
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+
+const showBanner = computed(() => {
+  if (!documentLimits.value) return false;
+
+  const { currentAvailable } = documentLimits.value;
+  return currentAvailable === 0;
+});
+
+onMounted(fetchLimits);
+</script>
+
+<template>
+  <Banner
+    v-show="showBanner"
+    color="amber"
+    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
+    @action="openBilling"
+  >
+    {{ $t('CAPTAIN.BANNER.DOCUMENTS') }}
+  </Banner>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue
@@ -0,0 +1,71 @@
+<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 meta = useMapGetter('captainResponses/getMeta');
+const isFetching = computed(() => uiFlags.value.fetchingList);
+const totalCount = computed(() => meta.value.totalCount || 0);
+
+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')} (${totalCount})`"
+    :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"
+        :status="response.status"
+        :answer="response.answer"
+        :assistant="response.assistant"
+        :created-at="response.created_at"
+        :updated-at="response.updated_at"
+        compact
+      />
+    </div>
+  </Dialog>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
+import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+const { isOnChatwootCloud } = useAccount();
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+    learn-more-url="https://chwt.app/captain-assistant"
+    class="mb-8"
+    :hide-actions="!isOnChatwootCloud"
+  />
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
+    :action-perms="['administrator']"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <AssistantCard
+          v-for="(assistant, index) in assistantsList.slice(0, 5)"
+          :id="assistant.id"
+          :key="`assistant-${index}`"
+          :name="assistant.name"
+          :description="assistant.description"
+          :updated-at="assistant.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue
@@ -0,0 +1,29 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.SUBTITLE')"
+    :action-perms="['administrator']"
+  >
+    <template #empty-state-item>
+      <div class="min-h-[600px]" />
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.CUSTOM_TOOLS.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useBranding } from 'shared/composables/useBranding';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
+import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+const { isOnChatwootCloud } = useAccount();
+
+const { replaceInstallationName } = useBranding();
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/document-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/document-dark.svg"
+    learn-more-url="https://chwt.app/captain-document"
+    :hide-actions="!isOnChatwootCloud"
+    class="mb-8"
+  />
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
+    :action-perms="['administrator']"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <DocumentCard
+          v-for="(document, index) in documentsList.slice(0, 5)"
+          :id="document.id"
+          :key="`document-${index}`"
+          :name="replaceInstallationName(document.name)"
+          :assistant="document.assistant"
+          :external-link="document.external_link"
+          :created-at="document.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.DOCUMENTS.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue
@@ -0,0 +1,38 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
+import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.INBOXES.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.INBOXES.EMPTY_STATE.SUBTITLE')"
+    :action-perms="['administrator']"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <InboxCard
+          v-for="(inbox, index) in inboxes.slice(0, 5)"
+          :id="inbox.id"
+          :key="`inbox-${index}`"
+          :inbox="inbox"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.INBOXES.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useBranding } from 'shared/composables/useBranding';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
+import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'approved',
+    validator: value => ['approved', 'pending'].includes(value),
+  },
+  hasActiveFilters: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click', 'clearFilters']);
+
+const isApproved = computed(() => props.variant === 'approved');
+const isPending = computed(() => props.variant === 'pending');
+
+const { isOnChatwootCloud } = useAccount();
+const { replaceInstallationName } = useBranding();
+
+const onClick = () => {
+  emit('click');
+};
+
+const onClearFilters = () => {
+  emit('clearFilters');
+};
+</script>
+
+<template>
+  <FeatureSpotlight
+    v-if="isApproved"
+    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/faqs-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-dark.svg"
+    learn-more-url="https://chwt.app/captain-faq"
+    :hide-actions="!isOnChatwootCloud"
+    class="mb-8"
+  />
+  <EmptyStateLayout
+    :title="
+      isPending
+        ? $t('CAPTAIN.RESPONSES.EMPTY_STATE.NO_PENDING_TITLE')
+        : $t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')
+    "
+    :subtitle="isApproved ? $t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE') : ''"
+    :action-perms="['administrator']"
+    :show-backdrop="isApproved"
+  >
+    <template v-if="isApproved" #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <ResponseCard
+          v-for="(response, index) in responsesList.slice(0, 5)"
+          :id="response.id"
+          :key="`response-${index}`"
+          :question="replaceInstallationName(response.question)"
+          :answer="replaceInstallationName(response.answer)"
+          :status="response.status"
+          :assistant="response.assistant"
+          :created-at="response.created_at"
+          :updated-at="response.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <div class="flex flex-col items-center gap-3">
+        <Button
+          v-if="isApproved"
+          :label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
+          icon="i-lucide-plus"
+          @click="onClick"
+        />
+        <Button
+          v-else-if="isPending && hasActiveFilters"
+          :label="$t('CAPTAIN.RESPONSES.EMPTY_STATE.CLEAR_SEARCH')"
+          variant="link"
+          size="sm"
+          @click="onClearFilters"
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js
@@ -0,0 +1,286 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+export const assistantsList = [
+  {
+    account_id: 2,
+    config: { product_name: 'HelpDesk Pro' },
+    created_at: 1736033561,
+    description:
+      'An advanced AI assistant designed to enhance customer support solutions by automating workflows and providing instant responses.',
+    id: 4,
+    name: 'Support Genie',
+  },
+  {
+    account_id: 3,
+    config: { product_name: 'CRM Tools' },
+    created_at: 1736033562,
+    description:
+      'Helps streamline customer relationship management by organizing contacts, automating follow-ups, and providing insights.',
+    id: 5,
+    name: 'CRM Assistant',
+  },
+  {
+    account_id: 4,
+    config: { product_name: 'SalesFlow' },
+    created_at: 1736033563,
+    description:
+      'Optimizes your sales pipeline by tracking prospects, forecasting sales, and automating administrative tasks.',
+    id: 6,
+    name: 'SalesBot',
+  },
+  {
+    account_id: 5,
+    config: { product_name: 'TicketMaster AI' },
+    created_at: 1736033564,
+    description:
+      'Automates ticket assignment, categorization, and customer query responses to enhance support efficiency.',
+    id: 7,
+    name: 'TicketBot',
+  },
+  {
+    account_id: 6,
+    config: { product_name: 'FinanceAssist' },
+    created_at: 1736033565,
+    description:
+      'Provides financial analytics, reporting, and insights, helping teams make data-driven financial decisions.',
+    id: 8,
+    name: 'Finance Wizard',
+  },
+  {
+    account_id: 8,
+    config: { product_name: 'HR Assistant' },
+    created_at: 1736033567,
+    description:
+      'Streamlines HR operations including employee management, payroll, and recruitment processes.',
+    id: 10,
+    name: 'HR Helper',
+  },
+];
+
+export const documentsList = [
+  {
+    account_id: 1,
+    assistant: { id: 1, name: 'Helper Pro' },
+    content:
+      'Comprehensive guide on using conversation filters to manage chats effectively.',
+    created_at: 1736143272,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688192-how-to-use-conversation-filters',
+    id: 3059,
+    name: 'How to use Conversation Filters? | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 2,
+    assistant: { id: 2, name: 'Support Genie' },
+    content:
+      'Step-by-step guide for automating ticket assignments and improving support workflow in Chatwoot.',
+    created_at: 1736143273,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688200-automating-ticket-assignments',
+    id: 3060,
+    name: 'Automating Ticket Assignments | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 3,
+    assistant: { id: 3, name: 'CRM Assistant' },
+    content:
+      'A detailed guide on managing and organizing customer profiles for better relationship management.',
+    created_at: 1736143274,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688210-managing-customer-profiles',
+    id: 3061,
+    name: 'Managing Customer Profiles | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 4,
+    assistant: { id: 4, name: 'SalesBot' },
+    content:
+      'Learn how to optimize sales tracking and improve your sales forecasting using advanced features.',
+    created_at: 1736143275,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688220-sales-tracking-guide',
+    id: 3062,
+    name: 'Sales Tracking Guide | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 5,
+    assistant: { id: 5, name: 'TicketBot' },
+    content:
+      'How to efficiently create, manage, and resolve tickets in Chatwoot.',
+    created_at: 1736143276,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688230-managing-tickets',
+    id: 3063,
+    name: 'Managing Tickets | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 6,
+    assistant: { id: 6, name: 'Finance Wizard' },
+    content:
+      'Detailed guide on how to use financial reporting tools and generate insightful analytics.',
+    created_at: 1736143277,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688240-financial-reporting',
+    id: 3064,
+    name: 'Financial Reporting | User Guide | Chatwoot',
+    status: 'available',
+  },
+];
+
+export const responsesList = [
+  {
+    account_id: 1,
+    answer:
+      'Messenger may be deactivated because you are on a free plan or the limit for inboxes might have been reached.',
+    created_at: 1736283330,
+    id: 87,
+    question: 'Why is my Messenger in Chatwoot deactivated?',
+    status: 'pending',
+    assistant: {
+      account_id: 1,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033280,
+      description: 'Assists with general queries and system-wide issues.',
+      id: 1,
+      name: 'Assistant 2',
+    },
+  },
+  {
+    account_id: 2,
+    answer:
+      'You can integrate your WhatsApp account by navigating to the Integrations section and selecting the WhatsApp integration option.',
+    created_at: 1736283340,
+    id: 88,
+    question: 'How do I integrate WhatsApp with Chatwoot?',
+    assistant: {
+      account_id: 2,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033281,
+      description: 'Helps with integration and setup-related inquiries.',
+      id: 2,
+      name: 'Assistant 3',
+    },
+  },
+  {
+    account_id: 3,
+    answer:
+      "To reset your password, go to the login page and click on 'Forgot Password', then follow the instructions sent to your email.",
+    created_at: 1736283350,
+    id: 89,
+    question: 'How can I reset my password in Chatwoot?',
+    assistant: {
+      account_id: 3,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033282,
+      description: 'Handles account management and recovery support.',
+      id: 3,
+      name: 'Assistant 4',
+    },
+  },
+  {
+    account_id: 4,
+    answer:
+      "You can enable the dark mode in settings by navigating to 'Appearance' and selecting 'Dark Mode'.",
+    created_at: 1736283360,
+    id: 90,
+    question: 'How do I enable dark mode in Chatwoot?',
+    assistant: {
+      account_id: 4,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033283,
+      description: 'Helps with UI and theme-related inquiries.',
+      id: 4,
+      name: 'Assistant 5',
+    },
+  },
+  {
+    account_id: 5,
+    answer:
+      "To add a new team member, navigate to 'Settings', then 'Team', and click on 'Add Team Member'.",
+    created_at: 1736283370,
+    id: 91,
+    question: 'How do I add a new team member in Chatwoot?',
+    assistant: {
+      account_id: 5,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033284,
+      description: 'Supports team management and user access-related queries.',
+      id: 5,
+      name: 'Assistant 6',
+    },
+  },
+  {
+    account_id: 6,
+    answer:
+      "Campaigns in Chatwoot allow you to send targeted messages to specific user segments. You can create them in the 'Campaigns' section.",
+    created_at: 1736283380,
+    id: 92,
+    question: 'What are campaigns in Chatwoot?',
+    assistant: {
+      account_id: 6,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033285,
+      description:
+        'Specialized in marketing, campaign management, and messaging strategies.',
+      id: 6,
+      name: 'Assistant 7',
+    },
+  },
+];
+
+export const inboxes = [
+  {
+    id: 7,
+    name: 'Email Support',
+    channel_type: INBOX_TYPES.EMAIL,
+    email: 'support@company.com',
+  },
+  {
+    id: 1,
+    name: 'Website Chat',
+    channel_type: INBOX_TYPES.WEB,
+  },
+  {
+    id: 2,
+    name: 'Facebook Support',
+    channel_type: INBOX_TYPES.FB,
+  },
+  {
+    id: 5,
+    name: 'SMS Service',
+    channel_type: INBOX_TYPES.TWILIO,
+    messaging_service_sid: 'MGxxxxxx',
+  },
+  {
+    id: 6,
+    name: 'WhatsApp Support',
+    channel_type: INBOX_TYPES.WHATSAPP,
+    phone_number: '+1987654321',
+  },
+  {
+    id: 8,
+    name: 'Telegram Support',
+    channel_type: INBOX_TYPES.TELEGRAM,
+  },
+  {
+    id: 9,
+    name: 'LINE Support',
+    channel_type: INBOX_TYPES.LINE,
+  },
+  {
+    id: 10,
+    name: 'API Channel',
+    channel_type: INBOX_TYPES.API,
+  },
+  {
+    id: 11,
+    name: 'SMS Basic',
+    channel_type: INBOX_TYPES.SMS,
+    phone_number: '+1555555555',
+  },
+];
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxDialog.vue
+++ b/research/chatwoot/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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
+++ b/research/chatwoot/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 text-n-blue-11 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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+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 route = useRoute();
+
+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,
+        assistant_id: route.params.assistantId,
+      });
+    } else {
+      await createResponse({
+        ...updatedResponse,
+        assistant_id: route.params.assistantId,
+      });
+    }
+    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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { onMounted, computed } from 'vue';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useCaptain } from 'dashboard/composables/useCaptain';
+import { useRouter } from 'vue-router';
+
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+const router = useRouter();
+const { accountId } = useAccount();
+
+const { responseLimits, fetchLimits } = useCaptain();
+
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+
+const showBanner = computed(() => {
+  if (!responseLimits.value) return false;
+
+  const { consumed, totalCount } = responseLimits.value;
+  if (!consumed || !totalCount) return false;
+
+  return consumed / totalCount > 0.8;
+});
+
+onMounted(fetchLimits);
+</script>
+
+<template>
+  <Banner
+    v-show="showBanner"
+    color="amber"
+    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
+    @action="openBilling"
+  >
+    {{ $t('CAPTAIN.BANNER.RESPONSES') }}
+  </Banner>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
@@ -0,0 +1,131 @@
+<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';
+
+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'),
+};
+
+const initialState = {
+  question: '',
+  answer: '',
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  question: { required, minLength: minLength(1) },
+  answer: { 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.RESPONSES.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  question: getErrorMessage('question', 'QUESTION'),
+  answer: getErrorMessage('answer', 'ANSWER'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareDocumentDetails = () => ({
+  question: state.question,
+  answer: state.answer,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareDocumentDetails());
+};
+
+const updateStateFromResponse = response => {
+  if (!response) return;
+
+  const { question, answer } = response;
+
+  Object.assign(state, {
+    question,
+    answer,
+  });
+};
+
+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 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 text-n-blue-11 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>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.story.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.story.vue
@@ -0,0 +1,28 @@
+<script setup>
+import SettingsHeader from './SettingsHeader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/PageComponents/SettingsHeader"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div class="px-6 py-4 bg-n-background">
+        <SettingsHeader
+          heading="General Settings"
+          description="Configure general preferences for your workspace."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Long Description">
+      <div class="px-6 py-4 bg-n-background">
+        <SettingsHeader
+          heading="Integrations"
+          description="Manage and configure third-party integrations such as Slack, Zapier, and Webhooks to enhance your workflow."
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue
@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  heading: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <header class="flex flex-col items-start gap-2">
+    <h2 class="text-n-slate-12 text-base font-medium">{{ heading }}</h2>
+    <p class="text-n-slate-11 text-sm">{{ description }}</p>
+  </header>
+</template>
--- a/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue
+++ b/research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const emit = defineEmits(['close', 'createAssistant']);
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const assistants = useMapGetter('captainAssistants/getRecords');
+
+const currentAssistantId = computed(() => route.params.assistantId);
+
+const isAssistantActive = assistant => {
+  return assistant.id === Number(currentAssistantId.value);
+};
+
+const fetchDataForRoute = async (routeName, assistantId) => {
+  const dataFetchMap = {
+    captain_assistants_responses_index: async () => {
+      await store.dispatch('captainResponses/get', { assistantId });
+      await store.dispatch('captainResponses/fetchPendingCount', assistantId);
+    },
+    captain_assistants_responses_pending: async () => {
+      await store.dispatch('captainResponses/get', {
+        assistantId,
+        status: 'pending',
+      });
+    },
+    captain_assistants_documents_index: async () => {
+      await store.dispatch('captainDocuments/get', { assistantId });
+    },
+    captain_assistants_scenarios_index: async () => {
+      await store.dispatch('captainScenarios/get', { assistantId });
+    },
+    captain_assistants_playground_index: () => {
+      // Playground doesn't need pre-fetching, it loads on interaction
+    },
+    captain_assistants_inboxes_index: async () => {
+      await store.dispatch('captainInboxes/get', { assistantId });
+    },
+    captain_tools_index: async () => {
+      await store.dispatch('captainCustomTools/get', { page: 1 });
+    },
+    captain_assistants_settings_index: async () => {
+      await store.dispatch('captainAssistants/show', assistantId);
+    },
+  };
+
+  const fetchFn = dataFetchMap[routeName];
+  if (fetchFn) {
+    await fetchFn();
+  }
+};
+
+const handleAssistantChange = async assistant => {
+  if (isAssistantActive(assistant)) return;
+
+  const currentRouteName = route.name;
+  const targetRouteName =
+    currentRouteName || 'captain_assistants_responses_index';
+
+  await fetchDataForRoute(targetRouteName, assistant.id);
+
+  await router.push({
+    name: targetRouteName,
+    params: {
+      accountId: route.params.accountId,
+      assistantId: assistant.id,
+    },
+  });
+
+  emit('close');
+};
+
+const openCreateAssistantDialog = () => {
+  emit('createAssistant');
+  emit('close');
+};
+</script>
+
+<template>
+  <div
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
+  >
+    <div
+      class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
+    >
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-2">
+          <h2
+            class="text-base font-medium cursor-pointer text-n-slate-12 w-fit hover:underline"
+          >
+            {{ t('CAPTAIN.ASSISTANT_SWITCHER.ASSISTANTS') }}
+          </h2>
+        </div>
+        <p class="text-sm text-n-slate-11">
+          {{ t('CAPTAIN.ASSISTANT_SWITCHER.SWITCH_ASSISTANT') }}
+        </p>
+      </div>
+      <Button
+        :label="t('CAPTAIN.ASSISTANT_SWITCHER.NEW_ASSISTANT')"
+        color="slate"
+        icon="i-lucide-plus"
+        size="sm"
+        class="!bg-n-alpha-2 hover:!bg-n-alpha-3"
+        @click="openCreateAssistantDialog"
+      />
+    </div>
+    <div v-if="assistants.length > 0" class="flex flex-col gap-2 px-4">
+      <Button
+        v-for="assistant in assistants"
+        :key="assistant.id"
+        :label="assistant.name"
+        variant="ghost"
+        color="slate"
+        trailing-icon
+        :icon="isAssistantActive(assistant) ? 'i-lucide-check' : ''"
+        class="!justify-end !px-2 !py-2 hover:!bg-n-alpha-2 [&>.i-lucide-check]:text-n-teal-10 h-9"
+        size="sm"
+        @click="handleAssistantChange(assistant)"
+      >
+        <span class="text-sm font-medium truncate text-n-slate-12">
+          {{ assistant.name || '' }}
+        </span>
+        <Avatar
+          v-if="assistant"
+          :name="assistant.name"
+          :size="20"
+          icon-name="i-lucide-bot"
+          rounded-full
+        />
+      </Button>
+    </div>
+    <div v-else class="flex flex-col items-center gap-2 px-4 py-3">
+      <p class="text-sm text-n-slate-11">
+        {{ t('CAPTAIN.ASSISTANT_SWITCHER.EMPTY_LIST') }}
+      </p>
+    </div>
+  </div>
+</template>