feat: UI changes for document auto sync [AI-153] (#14258)

# Pull Request Template ## Description FE code for document sync Adds: - UI to show counts (stats) of available web pages, stale and synced documents and last synced at - Bulk action and manual ways to sync web documents - index to stats related columns ## Type of change Please delete options that are not relevant. - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. https://linear.app/chatwoot/issue/AI-153/fe-document-auto-sync Documents dashboard: <img width="2160" height="986" alt="CleanShot 2026-05-11 at 17 57 09@2x" src="https://github.com/user-attachments/assets/6d934764-964c-4656-b005-1b4f0329e553" /> Filters: <img width="1138" height="564" alt="CleanShot 2026-05-11 at 17 58 13@2x" src="https://github.com/user-attachments/assets/cee780e6-eb8f-4aed-8cc5-b674244a821b" /> Needs update: <img width="2222" height="966" alt="CleanShot 2026-05-11 at 17 57 53@2x" src="https://github.com/user-attachments/assets/70c85ddd-7eb1-4328-ba14-7929e67e7b36" /> pdfs: <img width="2180" height="558" alt="CleanShot 2026-05-11 at 17 58 30@2x" src="https://github.com/user-attachments/assets/975b5c9f-bd1c-4979-9870-8f926d7f6e11" /> bulk actions: <img width="2244" height="992" alt="CleanShot 2026-05-11 at 17 58 57@2x" src="https://github.com/user-attachments/assets/bdb3c63f-d2de-41dc-a6d5-8821d3303be0" /> single url sync: <img width="2264" height="722" alt="CleanShot 2026-05-11 at 17 59 19@2x" src="https://github.com/user-attachments/assets/7d7323a5-0fcb-4be9-8635-55e56964999b" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Sony Mathew <sony@chatwoot.com> Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
2026-05-11 20:13:29 +05:30
parent 3489298726
commit f6be0d80ef
25 changed files with 1155 additions and 101 deletions
@@ -1,15 +1,17 @@
 <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 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 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 +20,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 +28,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 +42,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 +71,152 @@ const handleCreateDialogClose = () => {
  showCreateDialog.value = false;
 };

+const documentFilter = ref(null);
+const syncIntervalHours = ref(null);
+
+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;
+  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 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 +227,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 +245,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 +279,30 @@ const fetchDocumentsAfterBulkAction = () => {
  bulkSelectedIds.value = new Set();
 };

-const onBulkDeleteSuccess = () => {
-  fetchDocumentsAfterBulkAction();
+const onCreateSuccess = () => {
+  refreshDocumentsPage(1);
 };

-onMounted(() => {
-  fetchDocuments();
+const hasActiveDocumentFilters = computed(
+  () => documentFilter.value?.hasActiveFilters ?? false
+);
+
+watch(
+  selectedAssistantId,
+  async () => {
+    documentFilter.value?.reset();
+    bulkSelectedIds.value = new Set();
+    syncIntervalHours.value = null;
+    stopSyncPolling();
+    await fetchDocuments(1);
+    if (hasSyncingDocuments.value) scheduleSyncPoll();
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  stopSyncPolling();
+  documentsRequestId += 1;
 });
 </script>

@@ -170,27 +315,27 @@ 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()"
+        <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 +359,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 +408,7 @@ onMounted(() => {
      v-if="showCreateDialog"
      ref="createDocumentDialog"
      :assistant-id="selectedAssistantId"
+      @create-success="onCreateSuccess"
      @close="handleCreateDialogClose"
    />
    <DeleteDialog
@@ -253,12 +418,5 @@ onMounted(() => {
      type="Documents"
      @delete-success="onDeleteSuccess"
    />
-    <BulkDeleteDialog
-      v-if="bulkSelectedIds"
-      ref="bulkDeleteDialog"
-      :bulk-ids="bulkSelectedIds"
-      type="AssistantDocument"
-      @delete-success="onBulkDeleteSuccess"
-    />
  </PageLayout>
 </template>