feat: Bulk delete for contacts (#12778)

Introduces a new bulk action `delete` for contacts

ref: https://github.com/chatwoot/chatwoot/pull/12763

## Screens

<img width="1492" height="973" alt="Screenshot 2025-10-31 at 6 27 21 PM"
src="https://github.com/user-attachments/assets/30dab1bb-2c2c-4168-9800-44e0eb5f8e3a"
/>
<img width="1492" height="985" alt="Screenshot 2025-10-31 at 6 27 32 PM"
src="https://github.com/user-attachments/assets/5be610c4-b19e-4614-a164-103b22337382"
/>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue

@@ -6,6 +6,7 @@ import { vOnClickOutside } from '@vueuse/components';
 import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import LabelActions from 'dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue';
+import Policy from 'dashboard/components/policy.vue';
 
 const props = defineProps({
   visibleContactIds: {
@@ -22,7 +23,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['clearSelection', 'assignLabels', 'toggleAll']);
+const emit = defineEmits([
+  'clearSelection',
+  'assignLabels',
+  'toggleAll',
+  'deleteSelected',
+]);
 
 const { t } = useI18n();
 
@@ -139,6 +145,21 @@ const handleAssignLabels = labels => {
               />
             </transition>
           </div>
+          <Policy :permissions="['administrator']">
+            <Button
+              v-tooltip.bottom="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
+              sm
+              faded
+              ruby
+              icon="i-lucide-trash"
+              :label="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
+              :aria-label="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
+              :disabled="!selectedCount || isLoading"
+              :is-loading="isLoading"
+              class="!px-1.5 [&>span:nth-child(2)]:hidden"
+              @click="emit('deleteSelected')"
+            />
+          </Policy>
         </div>
       </template>
     </BulkSelectBar>

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue

@@ -13,6 +13,7 @@ import ContactEmptyState from 'dashboard/components-next/Contacts/EmptyState/Con
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ContactsList from 'dashboard/components-next/Contacts/Pages/ContactsList.vue';
 import ContactsBulkActionBar from '../components/ContactsBulkActionBar.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import BulkActionsAPI from 'dashboard/api/bulkActions';
 
 const DEFAULT_SORT_FIELD = 'last_activity_at';
@@ -64,7 +65,26 @@ const totalItems = computed(() => meta.value?.count);
 
 const selectedContactIds = ref([]);
 const isBulkActionLoading = ref(false);
-const hasSelection = computed(() => selectedContactIds.value.length > 0);
+const bulkDeleteDialogRef = ref(null);
+const selectedCount = computed(() => selectedContactIds.value.length);
+const bulkDeleteDialogTitle = computed(() =>
+  selectedCount.value > 1
+    ? t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.TITLE')
+    : t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.SINGULAR_TITLE')
+);
+const bulkDeleteDialogDescription = computed(() =>
+  selectedCount.value > 1
+    ? t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.DESCRIPTION', {
+        count: selectedCount.value,
+      })
+    : t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.SINGULAR_DESCRIPTION')
+);
+const bulkDeleteDialogConfirmLabel = computed(() =>
+  selectedCount.value > 1
+    ? t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.CONFIRM_MULTIPLE')
+    : t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.CONFIRM_SINGLE')
+);
+const hasSelection = computed(() => selectedCount.value > 0);
 const activeSegment = computed(() => {
   if (!activeSegmentId.value) return undefined;
   return segments.value.find(view => view.id === Number(activeSegmentId.value));
@@ -120,6 +140,11 @@ const clearSelection = () => {
   selectedContactIds.value = [];
 };
 
+const openBulkDeleteDialog = () => {
+  if (!selectedContactIds.value.length || isBulkActionLoading.value) return;
+  bulkDeleteDialogRef.value?.open?.();
+};
+
 const toggleSelectAll = shouldSelect => {
   selectedContactIds.value = shouldSelect ? [...visibleContactIds.value] : [];
 };
@@ -256,6 +281,29 @@ const assignLabels = async labels => {
   }
 };
 
+const deleteContacts = async () => {
+  if (!selectedContactIds.value.length) {
+    return;
+  }
+
+  isBulkActionLoading.value = true;
+  try {
+    await BulkActionsAPI.create({
+      type: 'Contact',
+      ids: selectedContactIds.value,
+      action_name: 'delete',
+    });
+    useAlert(t('CONTACTS_BULK_ACTIONS.DELETE_SUCCESS'));
+    clearSelection();
+    await fetchContactsBasedOnContext(pageNumber.value);
+    bulkDeleteDialogRef.value?.close?.();
+  } catch (error) {
+    useAlert(t('CONTACTS_BULK_ACTIONS.DELETE_FAILED'));
+  } finally {
+    isBulkActionLoading.value = false;
+  }
+};
+
 const handleSort = async ({ sort, order }) => {
   Object.assign(sortState, { activeSort: sort, activeOrdering: order });
 
@@ -297,6 +345,12 @@ watch(
   { deep: true }
 );
 
+watch(hasSelection, value => {
+  if (!value) {
+    bulkDeleteDialogRef.value?.close?.();
+  }
+});
+
 watch(
   () => uiSettings.value?.contacts_sort_by,
   newSortBy => {
@@ -391,6 +445,7 @@ onMounted(async () => {
           @toggle-all="toggleSelectAll"
           @clear-selection="clearSelection"
           @assign-labels="assignLabels"
+          @delete-selected="openBulkDeleteDialog"
         />
         <ContactEmptyState
           v-if="showEmptyStateLayout"
@@ -408,12 +463,22 @@ onMounted(async () => {
             {{ emptyStateMessage }}
           </span>
         </div>
-        <div v-else class="flex flex-col gap-4 px-6 pt-2 pb-6">
+        <div v-else class="flex flex-col gap-4 px-6 pt-4 pb-6">
           <ContactsList
             :contacts="contacts"
             :selected-contact-ids="selectedContactIds"
             @toggle-contact="toggleContactSelection"
           />
+          <Dialog
+            v-if="selectedCount"
+            ref="bulkDeleteDialogRef"
+            type="alert"
+            :title="bulkDeleteDialogTitle"
+            :description="bulkDeleteDialogDescription"
+            :confirm-button-label="bulkDeleteDialogConfirmLabel"
+            :is-loading="isBulkActionLoading"
+            @confirm="deleteContacts"
+          />
         </div>
       </template>
     </ContactsListLayout>