Merge remote-tracking branch 'origin/develop' into feat/whatsapp-call-ui

# Conflicts:
#	spec/enterprise/services/voice/inbound_call_builder_spec.rb

app/javascript/dashboard/api/captain/document.js

@@ -6,15 +6,22 @@ class CaptainDocument extends ApiClient {
     super('captain/documents', { accountScoped: true });
   }
 
-  get({ page = 1, searchKey, assistantId } = {}) {
+  get({ page = 1, searchKey, assistantId, filter, source, sort } = {}) {
     return axios.get(this.url, {
       params: {
         page,
-        searchKey,
+        search_key: searchKey,
         assistant_id: assistantId,
+        filter,
+        source,
+        sort,
       },
     });
   }
+
+  sync(id) {
+    return axios.post(`${this.url}/${id}/sync`);
+  }
 }
 
 export default new CaptainDocument();

app/javascript/dashboard/api/companies.js

@@ -28,6 +28,14 @@ class CompanyAPI extends ApiClient {
     return axios.get(`${this.url}/${id}/contacts?${buildParams({ page })}`);
   }
 
+  listNotes(id) {
+    return axios.get(`${this.url}/${id}/notes`);
+  }
+
+  listConversations(id) {
+    return axios.get(`${this.url}/${id}/conversations`);
+  }
+
   searchContacts(id, query = '', page = 1) {
     const requestURL = `${this.url}/${id}/contacts/search?${buildParams({ q: query, page })}`;
     return axios.get(requestURL);

app/javascript/dashboard/components-next/Companies/CompaniesDetailsLayout.vue

@@ -56,9 +56,14 @@ const closeMobileSidebar = () => {
 
     <div
       v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="hidden lg:flex flex-col min-w-52 w-full max-w-md border-l border-n-weak bg-n-solid-2"
     >
-      <slot name="sidebar" />
+      <div class="shrink-0">
+        <slot name="sidebarHeader" />
+      </div>
+      <div class="flex-1 overflow-y-auto pb-6 pt-3">
+        <slot name="sidebar" />
+      </div>
     </div>
 
     <div
@@ -105,9 +110,14 @@ const closeMobileSidebar = () => {
         <div
           v-if="isSidebarOpen"
           id="details-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+          class="order-2 w-[85%] sm:w-[50%] flex flex-col bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak shadow-lg"
         >
-          <slot name="sidebar" />
+          <div class="shrink-0">
+            <slot name="sidebarHeader" />
+          </div>
+          <div class="flex-1 overflow-y-auto pb-6 pt-3">
+            <slot name="sidebar" />
+          </div>
         </div>
       </Transition>
     </div>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue

@@ -2,6 +2,7 @@
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CompanySortMenu from './components/CompanySortMenu.vue';
+import CompanyMoreActions from './components/CompanyMoreActions.vue';
 
 defineProps({
   showSearch: { type: Boolean, default: true },
@@ -11,7 +12,7 @@ defineProps({
   activeOrdering: { type: String, default: '' },
 });
 
-const emit = defineEmits(['search', 'update:sort']);
+const emit = defineEmits(['search', 'update:sort', 'create']);
 </script>
 
 <template>
@@ -48,6 +49,7 @@ const emit = defineEmits(['search', 'update:sort']);
             :active-ordering="activeOrdering"
             @update:sort="emit('update:sort', $event)"
           />
+          <CompanyMoreActions @create="emit('create')" />
         </div>
       </div>
     </div>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanyMoreActions.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const showActionsDropdown = ref(false);
+
+const menuItems = [
+  {
+    label: t('COMPANIES.ACTIONS.CREATE'),
+    action: 'create',
+    value: 'create',
+    icon: 'i-lucide-plus',
+  },
+];
+
+const handleAction = ({ action }) => {
+  if (action === 'create') emit('create');
+  showActionsDropdown.value = false;
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="menuItems"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
+      @action="handleAction($event)"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue

@@ -12,7 +12,12 @@ defineProps({
   showPaginationFooter: { type: Boolean, default: true },
 });
 
-const emit = defineEmits(['update:currentPage', 'update:sort', 'search']);
+const emit = defineEmits([
+  'update:currentPage',
+  'update:sort',
+  'search',
+  'create',
+]);
 
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
@@ -31,6 +36,7 @@ const updateCurrentPage = page => {
         :active-ordering="activeOrdering"
         @search="emit('search', $event)"
         @update:sort="emit('update:sort', $event)"
+        @create="emit('create')"
       />
       <main class="flex-1 px-6 overflow-y-auto">
         <div class="w-full mx-auto max-w-5xl py-4">

app/javascript/dashboard/components-next/Companies/CompanyCreateDialog.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const dialogRef = ref(null);
+
+const form = reactive({ name: '', domain: '', description: '' });
+
+const isFormInvalid = computed(() => !form.name.trim());
+
+const resetForm = () => {
+  form.name = '';
+  form.domain = '';
+  form.description = '';
+};
+
+const handleConfirm = () => {
+  if (isFormInvalid.value) return;
+
+  emit('create', {
+    name: form.name.trim(),
+    domain: form.domain.trim() || null,
+    description: form.description.trim() || null,
+  });
+};
+
+const closeDialog = () => {
+  dialogRef.value?.close();
+};
+
+const onSuccess = () => {
+  resetForm();
+  closeDialog();
+};
+
+defineExpose({ dialogRef, onSuccess });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="3xl"
+    overflow-y-auto
+    @confirm="handleConfirm"
+    @close="resetForm"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-start gap-2">
+        <span class="py-1 text-sm font-medium text-n-slate-12">
+          {{ t('COMPANIES.CREATE.TITLE') }}
+        </span>
+        <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
+          <Input
+            v-model="form.name"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+            autofocus
+          />
+          <Input
+            v-model="form.domain"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+          />
+        </div>
+      </div>
+      <TextArea
+        v-model="form.description"
+        :placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
+        :disabled="isLoading"
+        :max-length="280"
+        class="w-full"
+        show-character-count
+        auto-height
+      />
+    </div>
+
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          :label="t('DIALOG.BUTTONS.CANCEL')"
+          variant="link"
+          type="reset"
+          class="h-10 hover:!no-underline hover:text-n-brand"
+          @click="closeDialog"
+        />
+        <Button
+          :label="t('COMPANIES.CREATE.ACTIONS.SAVE')"
+          color="blue"
+          type="submit"
+          :disabled="isFormInvalid || isLoading"
+          :is-loading="isLoading"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue

@@ -169,7 +169,7 @@ const handleContactSelect = contactId => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 px-6 pb-6 pt-1">
+  <div class="flex flex-col gap-6 px-6 pb-8">
     <div v-if="!selectedContact" class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <label class="text-base text-n-slate-12">
@@ -288,7 +288,7 @@ const handleContactSelect = contactId => {
 
       <div
         v-else-if="!hasContacts"
-        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+        class="py-8 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
       >
         {{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
       </div>
@@ -346,7 +346,7 @@ const handleContactSelect = contactId => {
         :current-page="currentPage"
         :total-items="totalContacts"
         :items-per-page="15"
-        class="px-0 before:hidden"
+        class="!px-0 before:hidden bg-transparent"
         @update:current-page="emit('update:currentPage', $event)"
       />
     </div>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyHistorySidebar.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  conversations: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+const conversationContact = conversation => {
+  const sender = conversation.meta?.sender || {};
+  const contact = contactsById.value(sender.id);
+  return contact.id ? contact : sender;
+};
+const conversationInbox = conversation =>
+  stateInbox.value(conversation.inboxId) || {
+    name: '',
+    channelType: conversation.meta?.channel,
+  };
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <div
+    v-else-if="conversations.length > 0"
+    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
+      v-for="conversation in conversations"
+      :key="conversation.id"
+      :conversation="conversation"
+      :contact="conversationContact(conversation)"
+      :state-inbox="conversationInbox(conversation)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
+  </div>
+
+  <p
+    v-else
+    class="py-8 px-4 mx-6 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.HISTORY.EMPTY') }}
+  </p>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyNotesSidebar.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  notes: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+const currentUser = useMapGetter('getCurrentUser');
+
+const hasNotes = computed(() => props.notes.length > 0);
+
+const contactName = contact =>
+  contact?.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note?.user?.name || 'Bot';
+};
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+</script>
+
+<template>
+  <div v-if="hasNotes" class="flex flex-col px-6">
+    <div class="flex flex-col divide-y divide-n-strong">
+      <div
+        v-for="note in notes"
+        :key="note.id"
+        class="flex flex-col gap-2 py-4 group/note"
+      >
+        <div class="flex items-center gap-1.5 min-w-0">
+          <Avatar
+            :name="contactName(note.contact)"
+            :src="note.contact?.thumbnail"
+            :size="16"
+            rounded-full
+            hide-offline-status
+          />
+          <div
+            class="flex items-center justify-between min-w-0 gap-1 w-full text-sm text-n-slate-11"
+          >
+            <button
+              type="button"
+              class="min-w-0 font-medium truncate text-start text-n-slate-12 hover:text-n-blue-11 p-0"
+              @click="openContact(note.contact.id)"
+            >
+              {{ contactName(note.contact) }}
+            </button>
+            <div class="min-w-0 truncate">
+              <span
+                class="inline-flex items-center gap-1 text-sm text-n-slate-10"
+              >
+                <span class="font-medium text-n-slate-11">
+                  {{ getWrittenBy(note) }}
+                </span>
+                {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+                <span class="font-medium text-n-slate-11">
+                  {{ dynamicTime(note.createdAt) }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <p
+          v-dompurify-html="formatMessage(note.content || '')"
+          class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-else-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <p
+    v-else
+    class="py-8 mx-6 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.NOTES.EMPTY') }}
+  </p>
+</template>

app/javascript/dashboard/components-next/captain/assistant/DocumentBulkActions.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  selectedIds: { type: Set, default: () => new Set() },
+  documents: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits([
+  'update:selectedIds',
+  'bulkSyncQueued',
+  'bulkDeleteSucceeded',
+]);
+
+const { t } = useI18n();
+const store = useStore();
+
+const bulkDeleteDialog = ref(null);
+
+const isSyncableDocument = doc =>
+  !doc.pdf_document && doc.status === 'available' && !doc.sync_in_progress;
+
+const syncableSelectedIds = computed(() => {
+  if (!props.selectedIds.size) return [];
+  return props.documents
+    .filter(doc => props.selectedIds.has(doc.id) && isSyncableDocument(doc))
+    .map(doc => doc.id);
+});
+
+const hasSyncableSelection = computed(
+  () => syncableSelectedIds.value.length > 0
+);
+
+const selectAllLabel = computed(() => {
+  const count = props.documents.length;
+  const isAllSelected = props.selectedIds.size === count && count > 0;
+  return isAllSelected
+    ? t('CAPTAIN.DOCUMENTS.UNSELECT_ALL', { count })
+    : t('CAPTAIN.DOCUMENTS.SELECT_ALL', { count });
+});
+
+const selectedCountLabel = computed(() =>
+  t('CAPTAIN.DOCUMENTS.SELECTED', { count: props.selectedIds.size })
+);
+
+const handleBulkSync = async () => {
+  const ids = syncableSelectedIds.value;
+  if (!ids.length) return;
+
+  try {
+    const response = await store.dispatch('captainBulkActions/handleBulkSync', {
+      ids,
+    });
+    const queuedCount = response?.count ?? response?.ids?.length ?? 0;
+    let message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.ZERO_MESSAGE');
+
+    if (queuedCount === 1) {
+      message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.SUCCESS_MESSAGE_ONE');
+    } else if (queuedCount > 1) {
+      message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.SUCCESS_MESSAGE', {
+        count: queuedCount,
+      });
+    }
+
+    useAlert(message);
+    emit('update:selectedIds', new Set());
+    if (queuedCount > 0) emit('bulkSyncQueued');
+  } catch (error) {
+    useAlert(t('CAPTAIN.DOCUMENTS.BULK_SYNC.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <div>
+    <BulkSelectBar
+      :model-value="selectedIds"
+      :all-items="documents"
+      :select-all-label="selectAllLabel"
+      :selected-count-label="selectedCountLabel"
+      :delete-label="$t('CAPTAIN.DOCUMENTS.BULK_DELETE_BUTTON')"
+      class="w-fit"
+      :class="{ 'mb-2': selectedIds.size > 0 }"
+      @update:model-value="emit('update:selectedIds', $event)"
+      @bulk-delete="bulkDeleteDialog.dialogRef.open()"
+    >
+      <template v-if="hasSyncableSelection" #secondaryActions>
+        <Button
+          :label="$t('CAPTAIN.DOCUMENTS.BULK_SYNC_BUTTON')"
+          sm
+          slate
+          ghost
+          icon="i-lucide-refresh-cw"
+          class="!px-1.5"
+          @click="handleBulkSync"
+        />
+      </template>
+    </BulkSelectBar>
+    <BulkDeleteDialog
+      ref="bulkDeleteDialog"
+      :bulk-ids="selectedIds"
+      type="AssistantDocument"
+      @delete-success="emit('bulkDeleteSucceeded')"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue

@@ -5,14 +5,17 @@ import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import {
-  isPdfDocument,
+  isSafeHttpLink,
   formatDocumentLink,
+  getDocumentDisplayPath,
 } from 'shared/helpers/documentHelper';
 
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 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 Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import DocumentSyncStatus from 'dashboard/components-next/captain/assistant/DocumentSyncStatus.vue';
 
 const props = defineProps({
   id: {
@@ -31,10 +34,38 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  pdfDocument: {
+    type: Boolean,
+    default: false,
+  },
   createdAt: {
     type: Number,
     required: true,
   },
+  status: {
+    type: String,
+    default: null,
+  },
+  syncStatus: {
+    type: String,
+    default: null,
+  },
+  lastSyncedAt: {
+    type: Number,
+    default: null,
+  },
+  lastSyncErrorCode: {
+    type: String,
+    default: null,
+  },
+  syncInProgress: {
+    type: Boolean,
+    default: false,
+  },
+  syncStaleAfterHours: {
+    type: Number,
+    default: null,
+  },
   isSelected: {
     type: Boolean,
     default: false,
@@ -64,6 +95,20 @@ const modelValue = computed({
   set: () => emit('select', props.id),
 });
 
+const isPdf = computed(() => props.pdfDocument);
+const hasSafeLink = computed(() => isSafeHttpLink(props.externalLink));
+const canManage = computed(() => checkPermissions(['administrator']));
+const isAvailable = computed(() => props.status === 'available');
+const canSync = computed(
+  () => canManage.value && !isPdf.value && isAvailable.value
+);
+const isSyncing = computed(() => props.syncStatus === 'syncing');
+const isFailed = computed(() => props.syncStatus === 'failed');
+const isRetryableSync = computed(
+  () => isFailed.value || (isSyncing.value && !props.syncInProgress)
+);
+const showSyncStatus = computed(() => !isPdf.value);
+
 const menuItems = computed(() => {
   const allOptions = [
     {
@@ -74,7 +119,19 @@ const menuItems = computed(() => {
     },
   ];
 
-  if (checkPermissions(['administrator'])) {
+  if (canSync.value) {
+    allOptions.push({
+      label: isRetryableSync.value
+        ? t('CAPTAIN.DOCUMENTS.OPTIONS.RETRY_SYNC')
+        : t('CAPTAIN.DOCUMENTS.OPTIONS.SYNC_NOW'),
+      value: 'sync',
+      action: 'sync',
+      icon: 'i-lucide-refresh-cw',
+      disabled: props.syncInProgress,
+    });
+  }
+
+  if (canManage.value) {
     allOptions.push({
       label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
       value: 'delete',
@@ -86,17 +143,25 @@ const menuItems = computed(() => {
   return allOptions;
 });
 
-const createdAt = computed(() => dynamicTime(props.createdAt));
+const createdAtLabel = computed(() => dynamicTime(props.createdAt));
 
-const displayLink = computed(() => formatDocumentLink(props.externalLink));
+const displayLink = computed(() =>
+  isPdf.value
+    ? formatDocumentLink(props.externalLink)
+    : getDocumentDisplayPath(props.externalLink)
+);
 const linkIcon = computed(() =>
-  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
+  isPdf.value ? 'i-ph-file-pdf' : 'i-ph-link-simple'
 );
 
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
 };
+
+const handleRetry = () => {
+  emit('action', { action: 'sync', id: props.id });
+};
 </script>
 
 <template>
@@ -141,17 +206,41 @@ const handleAction = ({ action, value }) => {
       <span
         class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
       >
-        <i class="i-woot-captain" />
+        <Icon icon="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
+      <a
+        v-if="!isPdf && hasSafeLink"
+        :href="externalLink"
+        :title="externalLink"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11 hover:text-n-slate-12 hover:underline"
+        @click.stop
+      >
+        <Icon :icon="linkIcon" class="shrink-0" />
+        <span class="truncate">{{ displayLink }}</span>
+        <Icon icon="i-lucide-external-link size-3 shrink-0 opacity-70" />
+      </a>
       <span
+        v-else
         class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
       >
-        <i :class="linkIcon" class="shrink-0" />
+        <Icon :icon="linkIcon" class="shrink-0" />
         <span class="truncate">{{ displayLink }}</span>
       </span>
-      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
-        {{ createdAt }}
+      <DocumentSyncStatus
+        v-if="showSyncStatus"
+        :status="syncStatus"
+        :last-synced-at="lastSyncedAt"
+        :error-code="lastSyncErrorCode"
+        :sync-in-progress="syncInProgress"
+        :stale-after-hours="syncStaleAfterHours"
+        :show-retry="canSync && isRetryableSync"
+        @retry="handleRetry"
+      />
+      <div v-else class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
+        {{ createdAtLabel }}
       </div>
     </div>
   </CardLayout>

app/javascript/dashboard/components-next/captain/assistant/DocumentFilter.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import DocumentFiltersBar from 'dashboard/components-next/captain/assistant/DocumentFiltersBar.vue';
+
+const emit = defineEmits(['change']);
+
+const source = ref('all');
+const status = ref(null);
+const sort = ref('recently_updated');
+
+const hasActiveFilters = computed(
+  () => source.value !== 'all' || Boolean(status.value)
+);
+
+const buildParams = (page = 1) => {
+  const params = { page };
+  if (source.value !== 'all') params.source = source.value;
+  if (status.value) params.filter = status.value;
+  if (sort.value) params.sort = sort.value;
+  return params;
+};
+
+const emitChange = () => emit('change');
+
+const handleSourceSelect = sourceKey => {
+  source.value = sourceKey;
+  if (sourceKey !== 'web') status.value = null;
+  emitChange();
+};
+
+const handleStatusSelect = statusKey => {
+  status.value = statusKey;
+  if (statusKey) source.value = 'web';
+  emitChange();
+};
+
+const handleSortSelect = sortKey => {
+  sort.value = sortKey;
+  emitChange();
+};
+
+const reset = () => {
+  source.value = 'all';
+  status.value = null;
+  sort.value = 'recently_updated';
+};
+
+defineExpose({ buildParams, reset, hasActiveFilters });
+</script>
+
+<template>
+  <DocumentFiltersBar
+    :active-source-filter="source"
+    :active-status-filter="status"
+    :active-sort="sort"
+    @select-source="handleSourceSelect"
+    @select-status="handleStatusSelect"
+    @select-sort="handleSortSelect"
+  />
+</template>

app/javascript/dashboard/components-next/captain/assistant/DocumentFiltersBar.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  activeSourceFilter: { type: String, default: 'all' },
+  activeStatusFilter: { type: String, default: null },
+  activeSort: { type: String, default: 'recently_updated' },
+});
+
+const emit = defineEmits(['selectSource', 'selectStatus', 'selectSort']);
+
+const { t } = useI18n();
+
+const openMenu = ref(null);
+
+const MENU_CONFIG = [
+  {
+    key: 'source',
+    activeKey: 'activeSourceFilter',
+    dropdownClass: 'min-w-48',
+    options: [
+      { labelKey: 'SOURCE.ALL', value: 'all', icon: 'i-lucide-files' },
+      { labelKey: 'SOURCE.WEB', value: 'web', icon: 'i-lucide-link' },
+      { labelKey: 'SOURCE.PDF', value: 'pdf', icon: 'i-lucide-file-text' },
+    ],
+  },
+  {
+    key: 'status',
+    activeKey: 'activeStatusFilter',
+    dropdownClass: 'min-w-52',
+    options: [
+      { labelKey: 'STATUS.ANY', value: null, icon: 'i-lucide-circle-dashed' },
+      {
+        labelKey: 'STATUS.UPDATED',
+        value: 'synced',
+        icon: 'i-lucide-check-circle',
+      },
+      {
+        labelKey: 'STATUS.NEEDS_UPDATE',
+        value: 'stale',
+        icon: 'i-lucide-clock',
+      },
+      {
+        labelKey: 'STATUS.UPDATING',
+        value: 'syncing',
+        icon: 'i-lucide-refresh-cw',
+      },
+      {
+        labelKey: 'STATUS.FAILED',
+        value: 'failed',
+        icon: 'i-lucide-circle-x',
+      },
+    ],
+  },
+  {
+    key: 'sort',
+    activeKey: 'activeSort',
+    dropdownClass: 'min-w-56',
+    options: [
+      {
+        labelKey: 'SORT.RECENTLY_UPDATED',
+        value: 'recently_updated',
+        icon: 'i-lucide-arrow-down-up',
+      },
+      {
+        labelKey: 'SORT.RECENTLY_CREATED',
+        value: 'recently_created',
+        icon: 'i-lucide-clock',
+      },
+    ],
+  },
+];
+
+const filterMenus = computed(() =>
+  MENU_CONFIG.filter(
+    menu => !(menu.key === 'status' && props.activeSourceFilter === 'pdf')
+  ).map(menu => {
+    const active = props[menu.activeKey];
+    const items = menu.options.map(opt => ({
+      label: t(`CAPTAIN.DOCUMENTS.FILTERS.${opt.labelKey}`),
+      value: opt.value,
+      icon: opt.icon,
+      action: menu.key,
+      isSelected: opt.value === active,
+    }));
+    return {
+      ...menu,
+      items,
+      selected: items.find(item => item.isSelected) || items[0],
+    };
+  })
+);
+
+const closeMenu = () => {
+  openMenu.value = null;
+};
+
+const toggleMenu = menu => {
+  openMenu.value = openMenu.value === menu ? null : menu;
+};
+
+const handleMenuAction = ({ action, value }) => {
+  closeMenu();
+  if (action === 'source') emit('selectSource', value);
+  else if (action === 'status') emit('selectStatus', value);
+  else if (action === 'sort') emit('selectSort', value);
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="closeMenu"
+    class="inline-flex flex-wrap items-center gap-2 pt-2 w-fit"
+  >
+    <div v-for="menu in filterMenus" :key="menu.key" class="relative">
+      <Button
+        :icon="menu.selected.icon"
+        slate
+        size="sm"
+        :class="{ 'bg-n-slate-9/10': openMenu === menu.key }"
+        @click="toggleMenu(menu.key)"
+      >
+        <span class="min-w-0 truncate">{{ menu.selected.label }}</span>
+        <Icon icon="i-lucide-chevron-down" class="shrink-0 size-4" />
+      </Button>
+      <DropdownMenu
+        v-if="openMenu === menu.key"
+        :menu-items="menu.items"
+        :class="menu.dropdownClass"
+        class="top-full mt-2 ltr:left-0 rtl:right-0"
+        @action="handleMenuAction"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/assistant/DocumentSyncStatus.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: null,
+  },
+  lastSyncedAt: {
+    type: Number,
+    default: null,
+  },
+  errorCode: {
+    type: String,
+    default: null,
+  },
+  syncInProgress: {
+    type: Boolean,
+    default: false,
+  },
+  staleAfterHours: {
+    type: Number,
+    default: null,
+  },
+  showRetry: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['retry']);
+const { t } = useI18n();
+
+const SECONDS_PER_HOUR = 3600;
+
+const SYNCING = 'syncing';
+const FAILED = 'failed';
+
+const ERROR_CODE_LABELS = {
+  not_found: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.NOT_FOUND',
+  access_denied: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.ACCESS_DENIED',
+  timeout: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.TIMEOUT',
+  content_empty: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.CONTENT_EMPTY',
+  fetch_failed: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.FETCH_FAILED',
+  sync_error: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.SYNC_ERROR',
+};
+const DEFAULT_ERROR_LABEL = 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.DEFAULT';
+
+const hasSyncingStatus = computed(() => props.status === SYNCING);
+const isSyncing = computed(
+  () => hasSyncingStatus.value && props.syncInProgress
+);
+const isStaleSync = computed(
+  () => hasSyncingStatus.value && !props.syncInProgress
+);
+const isFailed = computed(() => props.status === FAILED);
+const canRetry = computed(() => isFailed.value || isStaleSync.value);
+const hasBeenSynced = computed(() => Boolean(props.lastSyncedAt));
+
+const ageInHours = computed(() => {
+  if (!props.lastSyncedAt) return null;
+  const nowSeconds = Date.now() / 1000;
+  return (nowSeconds - props.lastSyncedAt) / SECONDS_PER_HOUR;
+});
+
+const staleAfterHours = computed(() => Number(props.staleAfterHours));
+const hasStaleThreshold = computed(
+  () => Number.isFinite(staleAfterHours.value) && staleAfterHours.value > 0
+);
+const isStale = computed(
+  () =>
+    hasStaleThreshold.value &&
+    ageInHours.value !== null &&
+    ageInHours.value >= staleAfterHours.value
+);
+
+const errorLabel = computed(() =>
+  t(ERROR_CODE_LABELS[props.errorCode] || DEFAULT_ERROR_LABEL)
+);
+
+const label = computed(() => {
+  if (isSyncing.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCING');
+  if (isStaleSync.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.STALE_SYNC');
+  if (isFailed.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.FAILED');
+  if (hasBeenSynced.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCED', {
+      time: dynamicTime(props.lastSyncedAt),
+    });
+  return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.NEVER_SYNCED');
+});
+
+const fullLabel = computed(() => {
+  if (isSyncing.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCING');
+  if (isStaleSync.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.STALE_SYNC');
+  if (isFailed.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.FAILED', {
+      error: errorLabel.value,
+    });
+  if (hasBeenSynced.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCED', {
+      time: dynamicTime(props.lastSyncedAt),
+    });
+  return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.NEVER_SYNCED');
+});
+
+const tone = computed(() => {
+  if (isSyncing.value) return 'amber';
+  if (isStaleSync.value) return 'amber';
+  if (isFailed.value) return 'ruby';
+  if (isStale.value) return 'amber';
+  return 'slate';
+});
+
+const textClass = computed(() => {
+  if (tone.value === 'amber') return 'text-n-amber-11';
+  if (tone.value === 'ruby') return 'text-n-ruby-11';
+  return 'text-n-slate-11';
+});
+
+const statusIcon = computed(() => {
+  if (isFailed.value || isStale.value || isStaleSync.value) {
+    return 'i-lucide-circle-alert';
+  }
+  return 'i-lucide-refresh-cw';
+});
+</script>
+
+<template>
+  <span
+    class="flex gap-1.5 items-center text-sm truncate shrink-0 tabular-nums"
+    :class="textClass"
+    :title="fullLabel"
+  >
+    <Spinner v-if="isSyncing" class="text-n-amber-11 size-3" />
+    <Icon v-else :icon="statusIcon" class="shrink-0 size-3.5" />
+    <span class="truncate">{{ label }}</span>
+    <Button
+      v-if="showRetry && canRetry"
+      :label="t('CAPTAIN.DOCUMENTS.OPTIONS.RETRY_SYNC')"
+      xs
+      link
+      ruby
+      icon="i-lucide-refresh-cw"
+      class="hover:!no-underline !gap-1 ms-1"
+      @click.stop="emit('retry')"
+    />
+  </span>
+</template>

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

@@ -15,7 +15,7 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'createSuccess']);
 const { t } = useI18n();
 const store = useStore();
 
@@ -26,6 +26,7 @@ const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
 const handleSubmit = async newDocument => {
   try {
     await store.dispatch('captainDocuments/create', newDocument);
+    emit('createSuccess');
     useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
     dialogRef.value.close();
   } catch (error) {

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { useTemplateRef, computed, ref, onMounted } from 'vue';
+import { useTemplateRef, computed, ref } from 'vue';
 import { useI18n, I18nT } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
-import { useStore } from 'vuex';
 import { useMapGetter } from 'dashboard/composables/store';
 
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -19,7 +18,6 @@ const props = defineProps({
 const emit = defineEmits(['select']);
 
 const { t } = useI18n();
-const store = useStore();
 const containerRef = useTemplateRef('containerRef');
 const [showDropdown, toggleDropdown] = useToggle(false);
 const selectedTeam = ref(null);
@@ -77,10 +75,6 @@ const handleDismiss = () => {
   selectedTeam.value = null;
   toggleDropdown(false);
 };
-
-onMounted(() => {
-  store.dispatch('teams/get');
-});
 </script>
 
 <template>

app/javascript/dashboard/featureFlags.js

@@ -41,6 +41,7 @@ export const FEATURE_FLAGS = {
   CAPTAIN_CUSTOM_TOOLS: 'custom_tools',
   CAPTAIN_V2: 'captain_integration_v2',
   CAPTAIN_TASKS: 'captain_tasks',
+  CAPTAIN_DOCUMENT_AUTO_SYNC: 'captain_document_auto_sync',
   SAML: 'saml',
   QUOTED_EMAIL_REPLY: 'quoted_email_reply',
   COMPANIES: 'companies',

app/javascript/dashboard/i18n/locale/en/companies.json

@@ -22,6 +22,19 @@
     "LOADING": "Loading companies...",
     "UNNAMED": "Unnamed Company",
     "CONTACTS_COUNT": "{n} contact | {n} contacts",
+    "ACTIONS": {
+      "CREATE": "Add company"
+    },
+    "CREATE": {
+      "TITLE": "Add company details",
+      "ACTIONS": {
+        "SAVE": "Add company"
+      },
+      "MESSAGES": {
+        "SUCCESS": "Company created.",
+        "ERROR": "Could not create the company."
+      }
+    },
     "DETAIL": {
       "LOADING": "Loading company details...",
       "EMPTY_STATE": {
@@ -31,9 +44,17 @@
       "SIDEBAR": {
         "TABS": {
           "ATTRIBUTES": "Attributes",
-          "CONTACTS": "Contacts"
+          "CONTACTS": "Contacts",
+          "HISTORY": "History",
+          "NOTES": "Notes"
         }
       },
+      "HISTORY": {
+        "EMPTY": "No conversations found for this company's contacts yet."
+      },
+      "NOTES": {
+        "EMPTY": "No notes found for this company's contacts yet."
+      },
       "ATTRIBUTES": {
         "SEARCH_PLACEHOLDER": "Search attributes...",
         "EMPTY_STATE": "There are no company custom attributes configured yet.",

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -1035,7 +1035,8 @@
         "LABEL": "Password",
         "PLACE_HOLDER": "Password"
       },
-      "ENABLE_SSL": "Enable SSL"
+      "ENABLE_SSL": "Enable SSL",
+      "AUTH_MECHANISM": "Authentication"
     },
     "MICROSOFT": {
       "TITLE": "Microsoft",

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -742,6 +742,7 @@
       "SELECT_ALL": "Select all ({count})",
       "UNSELECT_ALL": "Unselect all ({count})",
       "BULK_DELETE_BUTTON": "Delete",
+      "BULK_SYNC_BUTTON": "Refresh",
       "BULK_DELETE": {
         "TITLE": "Delete documents?",
         "DESCRIPTION": "Are you sure you want to delete the selected documents? This action cannot be undone.",
@@ -749,6 +750,51 @@
         "SUCCESS_MESSAGE": "Documents deleted successfully",
         "ERROR_MESSAGE": "There was an error deleting the documents, please try again."
       },
+      "BULK_SYNC": {
+        "SUCCESS_MESSAGE_ONE": "Refresh queued for 1 document",
+        "SUCCESS_MESSAGE": "Refresh queued for {count} documents",
+        "ZERO_MESSAGE": "No documents marked for refresh.",
+        "ERROR_MESSAGE": "There was an error queuing the refresh, please try again."
+      },
+      "SYNC": {
+        "QUEUED_MESSAGE": "Refresh queued. We'll update the document shortly.",
+        "ERROR_MESSAGE": "Could not queue refresh, please try again."
+      },
+      "FILTERS": {
+        "SOURCE": {
+          "ALL": "All sources",
+          "WEB": "Web pages",
+          "PDF": "PDFs"
+        },
+        "STATUS": {
+          "ANY": "Any status",
+          "UPDATED": "Updated",
+          "NEEDS_UPDATE": "Needs update",
+          "UPDATING": "Updating",
+          "FAILED": "Failed"
+        },
+        "SORT": {
+          "RECENTLY_UPDATED": "Recently updated",
+          "RECENTLY_CREATED": "Recently created"
+        },
+        "SEARCH_PLACEHOLDER": "Search..."
+      },
+      "SYNC_STATUS": {
+        "SYNCED": "last updated {time}",
+        "SYNCING": "updating...",
+        "STALE_SYNC": "update stalled",
+        "FAILED": "Failed to sync",
+        "NEVER_SYNCED": "not updated yet"
+      },
+      "SYNC_ERRORS": {
+        "NOT_FOUND": "Page not found",
+        "ACCESS_DENIED": "Access denied",
+        "TIMEOUT": "Page took too long to respond",
+        "CONTENT_EMPTY": "Page returned empty content",
+        "FETCH_FAILED": "Could not fetch page",
+        "SYNC_ERROR": "Unexpected error",
+        "DEFAULT": "Sync error"
+      },
       "RELATED_RESPONSES": {
         "TITLE": "Related FAQs",
         "DESCRIPTION": "These FAQs are generated directly from the document."
@@ -793,11 +839,15 @@
 
       "OPTIONS": {
         "VIEW_RELATED_RESPONSES": "View Related Responses",
+        "SYNC_NOW": "Refresh now",
+        "RETRY_SYNC": "Retry refresh",
         "DELETE_DOCUMENT": "Delete Document"
       },
       "EMPTY_STATE": {
         "TITLE": "No documents available",
         "SUBTITLE": "Documents are used by your assistant to generate FAQs. You can import documents to provide context for your assistant.",
+        "FILTERED_TITLE": "No matching documents",
+        "FILTERED_SUBTITLE": "Try changing the source, status, or search term.",
         "FEATURE_SPOTLIGHT": {
           "TITLE": "Captain Document",
           "NOTE": "A document in Captain serves as a knowledge resource for the assistant. By connecting your help center or guides, Captain can analyze the content and provide accurate responses for customer inquiries."

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

@@ -1,15 +1,19 @@
 <script setup>
-import { computed, onMounted, ref, nextTick } from 'vue';
+import { computed, onUnmounted, ref, nextTick, watch } from 'vue';
+import { useTimeoutPoll } from '@vueuse/core';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useAlert } from 'dashboard/composables';
 import { usePolicy } from 'dashboard/composables/usePolicy';
+import { debounce } from '@chatwoot/utils';
 
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
-import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
-import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
+import DocumentFilter from 'dashboard/components-next/captain/assistant/DocumentFilter.vue';
+import DocumentBulkActions from 'dashboard/components-next/captain/assistant/DocumentBulkActions.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import Policy from 'dashboard/components/policy.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
@@ -18,6 +22,7 @@ import CreateDocumentDialog from 'dashboard/components-next/captain/pageComponen
 import DocumentPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue';
 import FeatureSpotlightPopover from 'dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue';
 import LimitBanner from 'dashboard/components-next/captain/pageComponents/document/LimitBanner.vue';
+import CaptainDocumentAPI from 'dashboard/api/captain/document';
 import { useI18n } from 'vue-i18n';
 
 const route = useRoute();
@@ -25,6 +30,9 @@ const store = useStore();
 const { t } = useI18n();
 const { checkPermissions } = usePolicy();
 
+const SYNC_POLL_INTERVAL_MS = 5000;
+const SYNC_POLL_MAX_DURATION_MS = 15 * 60 * 1000;
+
 const { isOnChatwootCloud } = useAccount();
 const uiFlags = useMapGetter('captainDocuments/getUIFlags');
 const documents = useMapGetter('captainDocuments/getRecords');
@@ -36,7 +44,6 @@ const canManageDocuments = computed(() => checkPermissions(['administrator']));
 
 const selectedDocument = ref(null);
 const deleteDocumentDialog = ref(null);
-const bulkDeleteDialog = ref(null);
 const bulkSelectedIds = ref(new Set());
 const hoveredCard = ref(null);
 
@@ -66,6 +73,160 @@ const handleCreateDialogClose = () => {
   showCreateDialog.value = false;
 };
 
+const documentFilter = ref(null);
+const syncIntervalHours = ref(null);
+const searchQuery = ref('');
+
+const currentAssistantId = () =>
+  Number.isFinite(selectedAssistantId.value) ? selectedAssistantId.value : null;
+
+const buildDocumentFilterParams = (page = 1) => {
+  const filterParams = documentFilter.value?.buildParams(page) ?? {
+    page,
+    sort: 'recently_updated',
+  };
+  const assistantId = currentAssistantId();
+  if (assistantId) filterParams.assistantId = assistantId;
+  const trimmedQuery = searchQuery.value.trim();
+  if (trimmedQuery) filterParams.searchKey = trimmedQuery;
+  return filterParams;
+};
+
+let documentsRequestId = 0;
+let fetchingListRequestId = null;
+
+const isCurrentDocumentRequest = (requestId, filterParams) =>
+  requestId === documentsRequestId &&
+  (filterParams.assistantId || null) === currentAssistantId();
+
+const pruneSelectionToDocuments = nextDocuments => {
+  if (!bulkSelectedIds.value.size) return;
+
+  const visibleDocumentIds = new Set(nextDocuments.map(doc => doc.id));
+  const selectedIds = new Set(
+    [...bulkSelectedIds.value].filter(id => visibleDocumentIds.has(id))
+  );
+
+  if (selectedIds.size !== bulkSelectedIds.value.size) {
+    bulkSelectedIds.value = selectedIds;
+  }
+};
+
+const fetchDocuments = async (page = 1, { showLoader = true } = {}) => {
+  documentsRequestId += 1;
+  const requestId = documentsRequestId;
+  const filterParams = buildDocumentFilterParams(page);
+
+  if (showLoader) {
+    fetchingListRequestId = requestId;
+    store.dispatch('captainDocuments/setFetchingList', true);
+  }
+
+  try {
+    const response = await CaptainDocumentAPI.get(filterParams);
+
+    if (!isCurrentDocumentRequest(requestId, filterParams)) {
+      return [];
+    }
+
+    const { payload, meta } = response.data;
+    store.dispatch('captainDocuments/setRecords', { records: payload, meta });
+    pruneSelectionToDocuments(payload);
+    syncIntervalHours.value = Number(meta?.sync_interval_hours) || null;
+    return payload;
+  } catch (error) {
+    if (isCurrentDocumentRequest(requestId, filterParams)) {
+      throw error;
+    }
+    return [];
+  } finally {
+    if (showLoader && fetchingListRequestId === requestId) {
+      fetchingListRequestId = null;
+      store.dispatch('captainDocuments/setFetchingList', false);
+    }
+  }
+};
+
+const refreshDocumentsPage = (
+  page = documentsMeta.value?.page || 1,
+  { showLoader = false } = {}
+) => {
+  return fetchDocuments(page, { showLoader }).catch(() => {});
+};
+
+const onFiltersChanged = () => {
+  bulkSelectedIds.value = new Set();
+  fetchDocuments(1);
+};
+
+const debouncedSearch = debounce(() => {
+  bulkSelectedIds.value = new Set();
+  fetchDocuments(1);
+}, 300);
+
+const syncPollStartedAt = ref(null);
+
+const hasDocumentsSyncing = computed(() =>
+  (documents.value || []).some(doc => doc.sync_in_progress)
+);
+
+const hasSyncingDocuments = computed(() => hasDocumentsSyncing.value);
+
+const isWithinSyncPollWindow = () =>
+  syncPollStartedAt.value &&
+  Date.now() - syncPollStartedAt.value < SYNC_POLL_MAX_DURATION_MS;
+
+const shouldContinueSyncPolling = () =>
+  hasSyncingDocuments.value && isWithinSyncPollWindow();
+
+let syncPollingControls;
+
+function stopSyncPolling() {
+  syncPollingControls.pause();
+  syncPollStartedAt.value = null;
+}
+
+async function pollSyncDocuments() {
+  try {
+    await refreshDocumentsPage();
+  } catch (error) {
+    // Keep the existing polling decision based on the last known sync state.
+  }
+
+  if (!shouldContinueSyncPolling()) {
+    stopSyncPolling();
+  }
+}
+
+function scheduleSyncPoll({ extendWindow = false } = {}) {
+  if (extendWindow || !syncPollStartedAt.value) {
+    syncPollStartedAt.value = Date.now();
+  }
+
+  if (syncPollingControls.isActive.value) return;
+  syncPollingControls.resume();
+}
+
+syncPollingControls = useTimeoutPoll(pollSyncDocuments, SYNC_POLL_INTERVAL_MS, {
+  immediate: false,
+});
+
+watch(hasSyncingDocuments, isSyncing => {
+  if (isSyncing) {
+    scheduleSyncPoll();
+  }
+});
+
+const handleSync = async id => {
+  try {
+    await store.dispatch('captainDocuments/sync', id);
+    useAlert(t('CAPTAIN.DOCUMENTS.SYNC.QUEUED_MESSAGE'));
+    scheduleSyncPoll({ extendWindow: true });
+  } catch (error) {
+    useAlert(t('CAPTAIN.DOCUMENTS.SYNC.ERROR_MESSAGE'));
+  }
+};
+
 const handleAction = ({ action, id }) => {
   selectedDocument.value = documents.value.find(
     captainDocument => id === captainDocument.id
@@ -76,19 +237,12 @@ const handleAction = ({ action, id }) => {
       handleDelete();
     } else if (action === 'viewRelatedQuestions') {
       handleShowRelatedDocument();
+    } else if (action === 'sync') {
+      handleSync(id);
     }
   });
 };
 
-const fetchDocuments = (page = 1) => {
-  const filterParams = { page };
-
-  if (selectedAssistantId.value) {
-    filterParams.assistantId = selectedAssistantId.value;
-  }
-  store.dispatch('captainDocuments/get', filterParams);
-};
-
 const onPageChange = page => {
   const hadSelection = bulkSelectedIds.value.size > 0;
   fetchDocuments(page);
@@ -101,31 +255,14 @@ const onPageChange = page => {
 const onDeleteSuccess = () => {
   if (documents.value?.length === 0 && documentsMeta.value?.page > 1) {
     onPageChange(documentsMeta.value.page - 1);
+  } else {
+    refreshDocumentsPage();
   }
 };
 
-const buildSelectedCountLabel = computed(() => {
-  const count = documents.value?.length || 0;
-  const isAllSelected = bulkSelectedIds.value.size === count && count > 0;
-  return isAllSelected
-    ? t('CAPTAIN.DOCUMENTS.UNSELECT_ALL', { count })
-    : t('CAPTAIN.DOCUMENTS.SELECT_ALL', { count });
-});
-
-const selectedCountLabel = computed(() => {
-  return t('CAPTAIN.DOCUMENTS.SELECTED', {
-    count: bulkSelectedIds.value.size,
-  });
-});
-
-const hasBulkSelection = computed(() => bulkSelectedIds.value.size > 0);
-
-const shouldShowSelectionControl = docId => {
-  return (
-    canManageDocuments.value &&
-    (hoveredCard.value === docId || hasBulkSelection.value)
-  );
-};
+const shouldShowSelectionControl = docId =>
+  canManageDocuments.value &&
+  (hoveredCard.value === docId || bulkSelectedIds.value.size > 0);
 
 const handleCardHover = (isHovered, id) => {
   hoveredCard.value = isHovered ? id : null;
@@ -152,12 +289,33 @@ const fetchDocumentsAfterBulkAction = () => {
   bulkSelectedIds.value = new Set();
 };
 
-const onBulkDeleteSuccess = () => {
-  fetchDocumentsAfterBulkAction();
+const onCreateSuccess = () => {
+  refreshDocumentsPage(1);
 };
 
-onMounted(() => {
-  fetchDocuments();
+const hasActiveDocumentFilters = computed(
+  () =>
+    (documentFilter.value?.hasActiveFilters ?? false) ||
+    Boolean(searchQuery.value.trim())
+);
+
+watch(
+  selectedAssistantId,
+  async () => {
+    documentFilter.value?.reset();
+    searchQuery.value = '';
+    bulkSelectedIds.value = new Set();
+    syncIntervalHours.value = null;
+    stopSyncPolling();
+    await fetchDocuments(1);
+    if (hasSyncingDocuments.value) scheduleSyncPoll();
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  stopSyncPolling();
+  documentsRequestId += 1;
 });
 </script>
 
@@ -170,27 +328,43 @@ onMounted(() => {
     :current-page="documentsMeta.page"
     :show-pagination-footer="!isFetching && !!documents.length"
     :is-fetching="isFetching"
-    :is-empty="!documents.length"
-    :show-know-more="false"
+    :is-empty="!documents.length && !hasActiveDocumentFilters"
     :feature-flag="FEATURE_FLAGS.CAPTAIN"
     @update:current-page="onPageChange"
     @click="handleCreateDocument"
   >
-    <template #subHeader>
-      <Policy :permissions="['administrator']">
-        <BulkSelectBar
-          v-model="bulkSelectedIds"
-          :all-items="documents"
-          :select-all-label="buildSelectedCountLabel"
-          :selected-count-label="selectedCountLabel"
-          :delete-label="$t('CAPTAIN.DOCUMENTS.BULK_DELETE_BUTTON')"
-          class="w-fit"
-          :class="{ 'mb-2': bulkSelectedIds.size > 0 }"
-          @bulk-delete="bulkDeleteDialog.dialogRef.open()"
+    <template #search>
+      <div
+        v-if="bulkSelectedIds.size === 0"
+        class="flex gap-3 justify-between w-full items-center"
+      >
+        <Input
+          v-model="searchQuery"
+          :placeholder="$t('CAPTAIN.DOCUMENTS.FILTERS.SEARCH_PLACEHOLDER')"
+          class="max-w-64 min-w-0 w-full"
+          size="sm"
+          type="search"
+          @input="debouncedSearch"
         />
-      </Policy>
+      </div>
     </template>
 
+    <template #subHeader>
+      <Policy :permissions="['administrator']">
+        <DocumentBulkActions
+          v-model:selected-ids="bulkSelectedIds"
+          :documents="documents"
+          @bulk-sync-queued="scheduleSyncPoll({ extendWindow: true })"
+          @bulk-delete-succeeded="fetchDocumentsAfterBulkAction"
+        />
+      </Policy>
+      <DocumentFilter
+        v-show="!bulkSelectedIds.size"
+        ref="documentFilter"
+        class="mb-2"
+        @change="onFiltersChanged"
+      />
+    </template>
     <template #knowMore>
       <FeatureSpotlightPopover
         :button-label="$t('CAPTAIN.HEADER_KNOW_MORE')"
@@ -214,15 +388,34 @@ onMounted(() => {
     <template #body>
       <LimitBanner class="mb-5" />
 
-      <div class="flex flex-col gap-4">
+      <div
+        v-if="!documents.length && hasActiveDocumentFilters"
+        class="flex flex-col items-center justify-center min-h-80 gap-2 text-center"
+      >
+        <span class="text-base font-medium text-n-slate-12">
+          {{ $t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FILTERED_TITLE') }}
+        </span>
+        <span class="max-w-md text-sm text-n-slate-11">
+          {{ $t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FILTERED_SUBTITLE') }}
+        </span>
+      </div>
+
+      <div v-else class="flex flex-col gap-4">
         <DocumentCard
           v-for="doc in documents"
           :id="doc.id"
           :key="doc.id"
           :name="doc.name || doc.external_link"
           :external-link="doc.external_link"
+          :pdf-document="doc.pdf_document"
           :assistant="doc.assistant"
           :created-at="doc.created_at"
+          :status="doc.status"
+          :sync-status="doc.sync_status"
+          :last-synced-at="doc.last_synced_at"
+          :last-sync-error-code="doc.last_sync_error_code"
+          :sync-in-progress="doc.sync_in_progress"
+          :sync-stale-after-hours="syncIntervalHours"
           :is-selected="canManageDocuments && bulkSelectedIds.has(doc.id)"
           :selectable="canManageDocuments"
           :show-selection-control="shouldShowSelectionControl(doc.id)"
@@ -244,6 +437,7 @@ onMounted(() => {
       v-if="showCreateDialog"
       ref="createDocumentDialog"
       :assistant-id="selectedAssistantId"
+      @create-success="onCreateSuccess"
       @close="handleCreateDialogClose"
     />
     <DeleteDialog
@@ -253,12 +447,5 @@ onMounted(() => {
       type="Documents"
       @delete-success="onDeleteSuccess"
     />
-    <BulkDeleteDialog
-      v-if="bulkSelectedIds"
-      ref="bulkDeleteDialog"
-      :bulk-ids="bulkSelectedIds"
-      type="AssistantDocument"
-      @delete-success="onBulkDeleteSuccess"
-    />
   </PageLayout>
 </template>

app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue

@@ -3,11 +3,13 @@ import { ref, computed, onMounted, reactive } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAlert } from 'dashboard/composables';
 import { debounce } from '@chatwoot/utils';
 import { useCompaniesStore } from 'dashboard/stores/companies';
 
 import CompaniesListLayout from 'dashboard/components-next/Companies/CompaniesListLayout.vue';
 import CompaniesCard from 'dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue';
+import CompanyCreateDialog from 'dashboard/components-next/Companies/CompanyCreateDialog.vue';
 
 const DEFAULT_SORT_FIELD = 'name';
 const DEBOUNCE_DELAY = 300;
@@ -26,6 +28,7 @@ const uiFlags = computed(() => companiesStore.getUIFlags);
 
 const searchQuery = computed(() => route.query?.search || '');
 const searchValue = ref(searchQuery.value);
+const createCompanyDialogRef = ref(null);
 const pageNumber = computed(() => Number(route.query?.page) || 1);
 
 const parseSortSettings = (sortString = '') => {
@@ -51,6 +54,7 @@ const activeSort = computed(() => sortState.activeSort);
 const activeOrdering = computed(() => sortState.activeOrdering);
 
 const isFetchingList = computed(() => uiFlags.value.fetchingList);
+const isCreatingCompany = computed(() => uiFlags.value.creatingItem);
 
 const buildSortAttr = () =>
   `${sortState.activeOrdering}${sortState.activeSort}`;
@@ -121,6 +125,21 @@ const showCompany = companyId => {
   });
 };
 
+const openCreateCompanyDialog = () => {
+  createCompanyDialogRef.value?.dialogRef.open();
+};
+
+const createCompany = async company => {
+  try {
+    const newCompany = await companiesStore.create(company);
+    createCompanyDialogRef.value?.onSuccess();
+    useAlert(t('COMPANIES.CREATE.MESSAGES.SUCCESS'));
+    showCompany(newCompany.id);
+  } catch {
+    useAlert(t('COMPANIES.CREATE.MESSAGES.ERROR'));
+  }
+};
+
 const handleSort = async ({ sort, order }) => {
   Object.assign(sortState, { activeSort: sort, activeOrdering: order });
 
@@ -155,6 +174,7 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @update:sort="handleSort"
     @search="onSearch"
+    @create="openCreateCompanyDialog"
   >
     <div v-if="isFetchingList" class="flex items-center justify-center p-8">
       <span class="text-n-slate-11 text-base">{{
@@ -182,5 +202,10 @@ onMounted(() => {
         @show-company="showCompany"
       />
     </div>
+    <CompanyCreateDialog
+      ref="createCompanyDialogRef"
+      :is-loading="isCreatingCompany"
+      @create="createCompany"
+    />
   </CompaniesListLayout>
 </template>

app/javascript/dashboard/routes/dashboard/companies/pages/CompanyDetailView.vue

@@ -8,7 +8,10 @@ import Policy from 'dashboard/components/policy.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import CompaniesDetailsLayout from 'dashboard/components-next/Companies/CompaniesDetailsLayout.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import CompanyContactsSidebar from 'dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue';
+import CompanyHistorySidebar from 'dashboard/components-next/Companies/CompanyDetail/CompanyHistorySidebar.vue';
+import CompanyNotesSidebar from 'dashboard/components-next/Companies/CompanyDetail/CompanyNotesSidebar.vue';
 import CompanyProfileCard from 'dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue';
 import ConfirmCompanyDeleteDialog from 'dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue';
 import { useCompaniesStore } from 'dashboard/stores/companies';
@@ -20,11 +23,16 @@ const { t } = useI18n();
 
 const confirmDeleteDialogRef = ref(null);
 const selectedCandidate = ref(null);
+const activeSidebarTab = ref('history');
 
 const companyId = computed(() => Number(route.params.companyId));
 const company = computed(() => companiesStore.getRecord(companyId.value));
 const companyContacts = computed(() => companiesStore.companyContacts);
 const companyContactsMeta = computed(() => companiesStore.companyContactsMeta);
+const companyConversations = computed(
+  () => companiesStore.companyConversations || []
+);
+const companyNotes = computed(() => companiesStore.companyNotes || []);
 const contactSearchResults = computed(
   () => companiesStore.contactSearchResults
 );
@@ -32,6 +40,10 @@ const uiFlags = computed(() => companiesStore.getUIFlags);
 
 const isFetchingCompany = computed(() => uiFlags.value.fetchingItem);
 const isFetchingContacts = computed(() => uiFlags.value.fetchingContacts);
+const isFetchingConversations = computed(
+  () => uiFlags.value.fetchingConversations
+);
+const isFetchingNotes = computed(() => uiFlags.value.fetchingNotes);
 const isSearchingContacts = computed(() => uiFlags.value.searchingContacts);
 const isManagingContacts = computed(
   () => uiFlags.value.creatingContact || uiFlags.value.removingContact
@@ -50,6 +62,27 @@ const breadcrumbItems = computed(() => [
     : []),
 ]);
 
+const SIDEBAR_TABS_OPTIONS = [
+  { key: 'HISTORY', value: 'history' },
+  { key: 'NOTES', value: 'notes' },
+  { key: 'CONTACTS', value: 'contacts' },
+];
+
+const sidebarTabs = computed(() =>
+  SIDEBAR_TABS_OPTIONS.map(tab => ({
+    label: {
+      notes: t('COMPANIES.DETAIL.SIDEBAR.TABS.NOTES'),
+      history: t('COMPANIES.DETAIL.SIDEBAR.TABS.HISTORY'),
+      contacts: `${t('COMPANIES.DETAIL.SIDEBAR.TABS.CONTACTS')} (${Number(companyContactsMeta.value.totalCount || 0)})`,
+    }[tab.value],
+    value: tab.value,
+  }))
+);
+
+const activeSidebarTabIndex = computed(() =>
+  SIDEBAR_TABS_OPTIONS.findIndex(tab => tab.value === activeSidebarTab.value)
+);
+
 const goToCompaniesIndex = () => {
   router.push({
     name: 'companies_dashboard_index',
@@ -79,6 +112,19 @@ const clearSelectedCandidate = () => {
   selectedCandidate.value = null;
 };
 
+const loadSidebarTab = tab => {
+  if (!companyId.value) return;
+  if (tab === 'notes') companiesStore.getCompanyNotes(companyId.value);
+  if (tab === 'history') {
+    companiesStore.getCompanyConversations(companyId.value);
+  }
+};
+
+const handleSidebarTabChange = tab => {
+  activeSidebarTab.value = tab.value;
+  loadSidebarTab(tab.value);
+};
+
 const handleContactSearch = async query => {
   await companiesStore.searchCompanyContactCandidates({
     companyId: companyId.value,
@@ -143,10 +189,12 @@ watch(
   async id => {
     companiesStore.resetCompanyDetailState();
     clearSelectedCandidate();
+    activeSidebarTab.value = 'history';
     if (!id) return;
     await Promise.allSettled([
       companiesStore.show(id),
       companiesStore.getCompanyContacts(id),
+      companiesStore.getCompanyConversations(id),
     ]);
   },
   { immediate: true }
@@ -207,8 +255,29 @@ onBeforeUnmount(() => {
       </Policy>
     </div>
 
+    <template #sidebarHeader>
+      <div class="px-6 pt-6 pb-3">
+        <TabBar
+          :tabs="sidebarTabs"
+          :initial-active-tab="activeSidebarTabIndex"
+          class="w-full [&>button]:w-full bg-n-alpha-black2"
+          @tab-changed="handleSidebarTabChange"
+        />
+      </div>
+    </template>
     <template v-if="hasCompany" #sidebar>
+      <CompanyNotesSidebar
+        v-if="activeSidebarTab === 'notes'"
+        :notes="companyNotes"
+        :is-loading="isFetchingNotes"
+      />
+      <CompanyHistorySidebar
+        v-if="activeSidebarTab === 'history'"
+        :conversations="companyConversations"
+        :is-loading="isFetchingConversations"
+      />
       <CompanyContactsSidebar
+        v-if="activeSidebarTab === 'contacts'"
         :company="company"
         :contacts="companyContacts"
         :meta="companyContactsMeta"

app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue

@@ -5,11 +5,13 @@ import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFie
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import SingleSelectDropdown from './components/SingleSelectDropdown.vue';
 
 export default {
   components: {
     SettingsFieldSection,
     NextButton,
+    SingleSelectDropdown,
   },
   props: {
     inbox: {
@@ -28,6 +30,12 @@ export default {
       login: '',
       password: '',
       isSSLEnabled: true,
+      authMechanism: 'plain',
+      authMechanisms: [
+        { key: 1, value: 'plain' },
+        { key: 2, value: 'login' },
+        { key: 3, value: 'cram-md5' },
+      ],
     };
   },
   validations: {
@@ -56,6 +64,7 @@ export default {
         imap_login,
         imap_password,
         imap_enable_ssl,
+        imap_authentication,
       } = this.inbox;
       this.isIMAPEnabled = imap_enabled;
       this.address = imap_address;
@@ -63,6 +72,7 @@ export default {
       this.login = imap_login;
       this.password = imap_password;
       this.isSSLEnabled = imap_enable_ssl;
+      this.authMechanism = imap_authentication || 'plain';
     },
     async updateInbox() {
       try {
@@ -77,6 +87,7 @@ export default {
             imap_login: this.login,
             imap_password: this.password,
             imap_enable_ssl: this.isSSLEnabled,
+            imap_authentication: this.authMechanism,
           },
         };
 
@@ -90,6 +101,9 @@ export default {
         useAlert(error.message);
       }
     },
+    handleAuthMechanismChange(mode) {
+      this.authMechanism = mode;
+    },
   },
 };
 </script>
@@ -155,6 +169,13 @@ export default {
           />
           {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
         </label>
+        <SingleSelectDropdown
+          class="w-full"
+          :label="$t('INBOX_MGMT.IMAP.AUTH_MECHANISM')"
+          :selected="authMechanism"
+          :options="authMechanisms"
+          :action="handleAuthMechanismChange"
+        />
       </div>
       <NextButton
         type="submit"

app/javascript/dashboard/store/captain/bulkActions.js

@@ -61,5 +61,18 @@ export default createStore({
       });
       return response;
     },
+
+    handleBulkSync: async function handleBulkSync({ dispatch }, { ids }) {
+      const response = await dispatch('processBulkAction', {
+        type: 'AssistantDocument',
+        actionType: 'sync',
+        ids,
+      });
+
+      await dispatch('captainDocuments/markSyncing', response.ids || [], {
+        root: true,
+      });
+      return response;
+    },
   }),
 });

app/javascript/dashboard/store/captain/document.js

@@ -1,15 +1,55 @@
 import CaptainDocumentAPI from 'dashboard/api/captain/document';
+import { throwErrorMessage } from 'dashboard/store/utils/api';
 import { createStore } from '../storeFactory';
 
+const SYNCING_STATE = 'syncing';
+
+const markRecordsSyncing = (records, ids) => {
+  const idSet = new Set(ids);
+  return records.map(record =>
+    idSet.has(record.id)
+      ? {
+          ...record,
+          sync_status: SYNCING_STATE,
+          sync_in_progress: true,
+          last_sync_attempted_at: Math.floor(Date.now() / 1000),
+          last_sync_error_code: null,
+        }
+      : record
+  );
+};
+
 export default createStore({
   name: 'CaptainDocument',
   API: CaptainDocumentAPI,
+  getters: {
+    getRecords: state => state.records,
+  },
   actions: mutations => ({
+    setFetchingList({ commit }, isFetching) {
+      commit(mutations.SET_UI_FLAG, { fetchingList: isFetching });
+    },
+    setRecords({ commit }, { records, meta }) {
+      commit(mutations.SET, records);
+      commit(mutations.SET_META, meta);
+    },
     removeBulkRecords({ commit, getters }, ids) {
       const records = getters.getRecords.filter(
         record => !ids.includes(record.id)
       );
       commit(mutations.SET, records);
     },
+    markSyncing({ commit, getters }, ids) {
+      commit(mutations.SET, markRecordsSyncing(getters.getRecords, ids));
+    },
+    async sync({ dispatch }, id) {
+      try {
+        await CaptainDocumentAPI.sync(id);
+        dispatch('markSyncing', [id]);
+        return id;
+      } catch (error) {
+        return throwErrorMessage(error);
+      }
+    },
   }),
 });

app/javascript/dashboard/store/storeFactory.js

@@ -134,10 +134,13 @@ export const createVuexStore = options => {
  * @returns {Function} Pinia store composable
  */
 export const createPiniaStore = options => {
-  const { name, API, actions, getters } = options;
+  const { name, API, actions, getters, state } = options;
 
   return defineStore(name.toLowerCase(), {
-    state: createInitialState,
+    state: () => ({
+      ...createInitialState(),
+      ...(state ? state() : {}),
+    }),
 
     getters: {
       ...createGetters(),

app/javascript/dashboard/stores/companies.js

@@ -8,10 +8,13 @@ const createInitialUIFlags = () => ({
   fetchingList: false,
   fetchingItem: false,
   updatingItem: false,
+  creatingItem: false,
   deletingItem: false,
   deletingAvatar: false,
   deletingCustomAttributes: false,
   fetchingContacts: false,
+  fetchingConversations: false,
+  fetchingNotes: false,
   searchingContacts: false,
   creatingContact: false,
   removingContact: false,
@@ -66,6 +69,16 @@ export const useCompaniesStore = createStore({
   name: 'companies',
   type: 'pinia',
   API: CompanyAPI,
+  state: () => ({
+    activeCompanyId: null,
+    companyContacts: [],
+    companyContactsMeta: {},
+    companyConversations: [],
+    companyNotes: [],
+    contactSearchResults: [],
+    contactSearchMeta: {},
+    activeContactSearchQuery: '',
+  }),
 
   getters: {
     getCompaniesList: state => state.records,
@@ -172,6 +185,22 @@ export const useCompaniesStore = createStore({
       }
     },
 
+    async create(companyAttrs) {
+      this.setUIFlag({ creatingItem: true });
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.create(buildCompanyRequestPayload(companyAttrs));
+        const company = camelizeCompany(payload);
+        this.upsertCompanyRecord(company);
+        return company;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ creatingItem: false });
+      }
+    },
+
     async delete(id) {
       this.setUIFlag({ deletingItem: true });
       try {
@@ -253,6 +282,74 @@ export const useCompaniesStore = createStore({
       }
     },
 
+    async getCompanyNotes(companyId) {
+      this.setUIFlag({ fetchingNotes: true });
+      this.ensureActiveCompanyContext(companyId);
+      const activeCompanyId = Number(companyId);
+      const requestToken = (this.companyNotesRequestToken || 0) + 1;
+      this.companyNotesRequestToken = requestToken;
+
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.listNotes(companyId);
+        const notes = camelcaseKeys(payload || [], { deep: true });
+
+        if (
+          this.companyNotesRequestToken !== requestToken ||
+          this.activeCompanyId !== activeCompanyId
+        ) {
+          return notes;
+        }
+
+        this.companyNotes = notes;
+        return notes;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        if (
+          this.companyNotesRequestToken === requestToken &&
+          this.activeCompanyId === activeCompanyId
+        ) {
+          this.setUIFlag({ fetchingNotes: false });
+        }
+      }
+    },
+
+    async getCompanyConversations(companyId) {
+      this.setUIFlag({ fetchingConversations: true });
+      this.ensureActiveCompanyContext(companyId);
+      const activeCompanyId = Number(companyId);
+      const requestToken = (this.companyConversationsRequestToken || 0) + 1;
+      this.companyConversationsRequestToken = requestToken;
+
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.listConversations(companyId);
+        const conversations = camelcaseKeys(payload || [], { deep: true });
+
+        if (
+          this.companyConversationsRequestToken !== requestToken ||
+          this.activeCompanyId !== activeCompanyId
+        ) {
+          return conversations;
+        }
+
+        this.companyConversations = conversations;
+        return conversations;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        if (
+          this.companyConversationsRequestToken === requestToken &&
+          this.activeCompanyId === activeCompanyId
+        ) {
+          this.setUIFlag({ fetchingConversations: false });
+        }
+      }
+    },
+
     async searchCompanyContactCandidates({ companyId, search, page = 1 }) {
       const query = search?.trim() || '';
       if (!query) {
@@ -362,10 +459,15 @@ export const useCompaniesStore = createStore({
         (this.companyDetailRequestToken || 0) + 1;
       this.companyContactsRequestToken =
         (this.companyContactsRequestToken || 0) + 1;
+      this.companyConversationsRequestToken =
+        (this.companyConversationsRequestToken || 0) + 1;
+      this.companyNotesRequestToken = (this.companyNotesRequestToken || 0) + 1;
       this.contactSearchRequestToken =
         (this.contactSearchRequestToken || 0) + 1;
       this.companyContacts = [];
       this.companyContactsMeta = {};
+      this.companyConversations = [];
+      this.companyNotes = [];
       this.contactSearchResults = [];
       this.contactSearchMeta = {};
       this.activeContactSearchQuery = '';

app/javascript/shared/helpers/documentHelper.js

@@ -5,6 +5,7 @@
 // Constants for document processing
 const PDF_PREFIX = 'PDF:';
 const TIMESTAMP_PATTERN = /_\d{14}(?=\.pdf$)/; // Format: _YYYYMMDDHHMMSS before .pdf extension
+const URL_DISPLAY_PREFIX_PATTERN = /^https?:\/\/(www\.)?/i;
 
 /**
  * Checks if a document is a PDF based on its external link
@@ -16,10 +17,26 @@ export const isPdfDocument = externalLink => {
   return externalLink.startsWith(PDF_PREFIX);
 };
 
+/**
+ * Checks if a link is safe to bind to an href attribute (http/https only).
+ * Guards against schemes like `javascript:` that would execute on click.
+ * @param {string} externalLink - The external link string
+ * @returns {boolean} True if the link uses http or https
+ */
+export const isSafeHttpLink = externalLink => {
+  if (!externalLink) return false;
+  try {
+    const { protocol } = new URL(externalLink);
+    return protocol === 'http:' || protocol === 'https:';
+  } catch (e) {
+    return false;
+  }
+};
+
 /**
  * Formats the display link for documents
  * For PDF documents: removes 'PDF:' prefix and timestamp suffix
- * For regular URLs: returns as-is
+ * For regular URLs: strips http(s):// and www. for a denser list view
  *
  * @param {string} externalLink - The external link string
  * @returns {string} Formatted display link
@@ -34,5 +51,28 @@ export const formatDocumentLink = externalLink => {
     return fullName.replace(TIMESTAMP_PATTERN, '');
   }
 
-  return externalLink;
+  return externalLink.replace(URL_DISPLAY_PREFIX_PATTERN, '');
+};
+
+/**
+ * Returns the path of a URL for compact display in document lists. This avoids
+ * repeating the domain while preserving enough context to distinguish pages.
+ * Falls back to the bare hostname for root URLs and formatDocumentLink for
+ * malformed URLs and PDFs.
+ */
+export const getDocumentDisplayPath = externalLink => {
+  if (!externalLink) return '';
+  if (isPdfDocument(externalLink)) return formatDocumentLink(externalLink);
+  try {
+    const { pathname, hostname } = new URL(externalLink);
+    const path = pathname.replace(/^\/+/, '');
+    if (!path) return hostname.replace(/^www\./i, '');
+    try {
+      return decodeURIComponent(path);
+    } catch (e) {
+      return path;
+    }
+  } catch (e) {
+    return formatDocumentLink(externalLink);
+  }
 };

app/javascript/shared/helpers/specs/documentHelper.spec.js

@@ -1,5 +1,6 @@
 import {
   isPdfDocument,
+  isSafeHttpLink,
   formatDocumentLink,
 } from 'shared/helpers/documentHelper';
 
@@ -31,6 +32,35 @@ describe('documentHelper', () => {
     });
   });
 
+  describe('#isSafeHttpLink', () => {
+    it('returns true for http and https URLs', () => {
+      expect(isSafeHttpLink('http://example.com')).toBe(true);
+      expect(isSafeHttpLink('https://example.com/path?q=1#x')).toBe(true);
+      expect(isSafeHttpLink('HTTPS://EXAMPLE.COM')).toBe(true);
+    });
+
+    /* eslint-disable no-script-url */
+    it('returns false for javascript: and other dangerous schemes', () => {
+      expect(isSafeHttpLink('javascript:alert(1)')).toBe(false);
+      expect(isSafeHttpLink('JavaScript:alert(1)')).toBe(false);
+      expect(isSafeHttpLink('data:text/html,<script>alert(1)</script>')).toBe(
+        false
+      );
+      expect(isSafeHttpLink('vbscript:msgbox(1)')).toBe(false);
+      expect(isSafeHttpLink('file:///etc/passwd')).toBe(false);
+      expect(isSafeHttpLink('ftp://files.example.com/doc.pdf')).toBe(false);
+    });
+    /* eslint-enable no-script-url */
+
+    it('returns false for invalid or empty values', () => {
+      expect(isSafeHttpLink('')).toBe(false);
+      expect(isSafeHttpLink(null)).toBe(false);
+      expect(isSafeHttpLink(undefined)).toBe(false);
+      expect(isSafeHttpLink('not a url')).toBe(false);
+      expect(isSafeHttpLink('//example.com')).toBe(false);
+    });
+  });
+
   describe('#formatDocumentLink', () => {
     describe('PDF documents', () => {
       it('removes PDF: prefix from PDF documents', () => {
@@ -78,32 +108,30 @@ describe('documentHelper', () => {
     });
 
     describe('Regular URLs', () => {
-      it('returns regular URLs unchanged', () => {
-        expect(formatDocumentLink('https://example.com')).toBe(
-          'https://example.com'
-        );
+      it('removes http(s) and www prefixes for compact display', () => {
+        expect(formatDocumentLink('https://example.com')).toBe('example.com');
         expect(formatDocumentLink('http://docs.example.com/api')).toBe(
-          'http://docs.example.com/api'
+          'docs.example.com/api'
         );
-        expect(formatDocumentLink('https://github.com/user/repo')).toBe(
-          'https://github.com/user/repo'
+        expect(formatDocumentLink('https://www.github.com/user/repo')).toBe(
+          'github.com/user/repo'
         );
       });
 
       it('handles URLs with query parameters', () => {
         expect(formatDocumentLink('https://example.com?param=value')).toBe(
-          'https://example.com?param=value'
+          'example.com?param=value'
         );
         expect(
           formatDocumentLink(
             'https://api.example.com/docs?version=v1&format=json'
           )
-        ).toBe('https://api.example.com/docs?version=v1&format=json');
+        ).toBe('api.example.com/docs?version=v1&format=json');
       });
 
       it('handles URLs with fragments', () => {
         expect(formatDocumentLink('https://example.com/docs#section1')).toBe(
-          'https://example.com/docs#section1'
+          'example.com/docs#section1'
         );
       });
     });