Merge branch 'develop' into feat/expand-idb-coverage

2026-05-27 12:10:39 +05:30
parent be541db44f b495aad1e6
commit f4c5f45327
40 changed files with 765 additions and 67 deletions
@@ -87,6 +87,13 @@ class ArticlesAPI extends PortalsAPI {
    );
  }

+  bulkUpdateCategory({ portalSlug, articleIds, categoryId }) {
+    return axios.patch(
+      `${this.url}/${portalSlug}/articles/bulk_actions/update_category`,
+      { ids: articleIds, category_id: categoryId }
+    );
+  }
+
  bulkDelete({ portalSlug, articleIds }) {
    return axios.delete(
      `${this.url}/${portalSlug}/articles/bulk_actions/delete_articles`,
@@ -153,4 +153,33 @@ describe('#PortalAPI', () => {
      );
    });
  });
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#bulkUpdateCategory', () => {
+      articlesAPI.bulkUpdateCategory({
+        portalSlug: 'room-rental',
+        articleIds: [1, 2, 3],
+        categoryId: 7,
+      });
+      expect(axiosMock.patch).toHaveBeenCalledWith(
+        '/api/v1/portals/room-rental/articles/bulk_actions/update_category',
+        { ids: [1, 2, 3], category_id: 7 }
+      );
+    });
+  });
 });
@@ -2,6 +2,7 @@
 import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
@@ -18,6 +19,7 @@ import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/A
 import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import BulkTranslateDialog from './BulkTranslateDialog.vue';

 const props = defineProps({
@@ -62,6 +64,7 @@ const isFeatureEnabledonAccount = useMapGetter(

 const selectedArticleIds = ref(new Set());
 const deleteConfirmDialogRef = ref(null);
+const isCategoryMenuOpen = ref(false);

 const { isEnterprise } = useConfig();

@@ -221,6 +224,34 @@ const bulkUpdateStatus = async status => {
  }
 };

+const categoryMenuItems = computed(() =>
+  props.categories.map(category => ({
+    label: category.name,
+    value: category.id,
+    action: 'move',
+    emoji: category.icon,
+  }))
+);
+
+const handleBulkUpdateCategory = async ({ value }) => {
+  isCategoryMenuOpen.value = false;
+  try {
+    await articlesAPI.bulkUpdateCategory({
+      portalSlug: route.params.portalSlug,
+      articleIds: [...selectedArticleIds.value],
+      categoryId: value,
+    });
+    onBulkActionSuccess(
+      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_SUCCESS')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_ERROR')
+    );
+  }
+};
+
 const confirmBulkDelete = () => {
  deleteConfirmDialogRef.value?.open();
 };
@@ -340,6 +371,30 @@ watch(
                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
                  @click="bulkUpdateStatus('archived')"
                />
+                <div v-if="categoryMenuItems.length" class="relative group">
+                  <OnClickOutside @trigger="isCategoryMenuOpen = false">
+                    <Button
+                      sm
+                      faded
+                      slate
+                      icon="i-lucide-folder-input"
+                      :label="
+                        t(
+                          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.MOVE_TO_CATEGORY'
+                        )
+                      "
+                      class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
+                      @click="isCategoryMenuOpen = !isCategoryMenuOpen"
+                    />
+                    <DropdownMenu
+                      v-if="isCategoryMenuOpen"
+                      :menu-items="categoryMenuItems"
+                      show-search
+                      class="right-0 w-48 mt-2 top-full max-h-60"
+                      @action="handleBulkUpdateCategory"
+                    />
+                  </OnClickOutside>
+                </div>
                <Button
                  v-if="isTranslationAvailable"
                  sm
@@ -202,7 +202,7 @@ defineExpose({ state, isSubmitDisabled });
                size="sm"
                type="button"
                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[2.38rem] !w-[2.375rem] absolute top-[2rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                @click="isEmojiPickerOpen = !isEmojiPickerOpen"
              />
              <EmojiInput
@@ -0,0 +1,65 @@
+<script setup>
+import ChannelIcon from './ChannelIcon.vue';
+import { useChannelBrandIcon } from './provider';
+
+const inboxes = [
+  { name: 'API', channel_type: 'Channel::Api' },
+  { name: 'Email', channel_type: 'Channel::Email' },
+  { name: 'Gmail', channel_type: 'Channel::Email', provider: 'google' },
+  { name: 'Outlook', channel_type: 'Channel::Email', provider: 'microsoft' },
+  { name: 'Messenger', channel_type: 'Channel::FacebookPage' },
+  { name: 'Instagram', channel_type: 'Channel::Instagram' },
+  { name: 'Line', channel_type: 'Channel::Line' },
+  { name: 'Telegram', channel_type: 'Channel::Telegram' },
+  { name: 'WhatsApp', channel_type: 'Channel::Whatsapp' },
+  { name: 'TikTok', channel_type: 'Channel::Tiktok' },
+  { name: 'SMS', channel_type: 'Channel::Sms' },
+  { name: 'Twilio SMS', channel_type: 'Channel::TwilioSms' },
+  {
+    name: 'Twilio WhatsApp',
+    channel_type: 'Channel::TwilioSms',
+    medium: 'whatsapp',
+  },
+  {
+    name: 'Voice',
+    channel_type: 'Channel::TwilioSms',
+    voice_enabled: true,
+  },
+  { name: 'Website', channel_type: 'Channel::WebWidget' },
+];
+
+const brandInboxes = inboxes.filter(inbox => useChannelBrandIcon(inbox).value);
+</script>
+
+<template>
+  <Story title="Components/Icons/ChannelIcon">
+    <Variant title="Glyph (default)">
+      <div class="grid grid-cols-4 gap-5">
+        <div
+          v-for="inbox in inboxes"
+          :key="inbox.name"
+          class="flex items-center gap-2"
+        >
+          <ChannelIcon :inbox="inbox" class="size-6 text-n-slate-11" />
+          <span>{{ inbox.name }}</span>
+        </div>
+      </div>
+    </Variant>
+    <Variant title="Brand icon">
+      <div class="grid grid-cols-4 gap-5">
+        <div
+          v-for="inbox in brandInboxes"
+          :key="inbox.name"
+          class="flex items-center gap-2"
+        >
+          <ChannelIcon
+            :inbox="inbox"
+            use-brand-icon
+            class="size-6 text-n-slate-11"
+          />
+          <span>{{ inbox.name }}</span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, toRef } from 'vue';
 import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
-import { useChannelIcon } from './provider';
+import { useChannelIcon, useChannelBrandIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';

 const props = defineProps({
@@ -9,17 +9,30 @@ const props = defineProps({
    type: Object,
    required: true,
  },
+  // When true, render the full-color brand icon (when one exists for the
+  // channel type) and fall back to the monochrome glyph otherwise.
+  useBrandIcon: {
+    type: Boolean,
+    default: false,
+  },
 });

 defineOptions({ inheritAttrs: false });

-const channelIcon = useChannelIcon(toRef(props, 'inbox'));
+const inboxRef = toRef(props, 'inbox');
+
 const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
+const channelIcon = useChannelIcon(inboxRef);
+const brandIcon = useChannelBrandIcon(inboxRef);
+
+const icon = computed(() =>
+  props.useBrandIcon && brandIcon.value ? brandIcon.value : channelIcon.value
+);
 </script>

 <template>
  <span class="relative inline-flex" v-bind="$attrs">
-    <Icon :icon="channelIcon" class="size-full" />
+    <Icon :icon="icon" class="size-full" />
    <span
      v-if="hasVoiceBadge"
      class="absolute top-0 ltr:right-0 rtl:left-0 inline-flex items-center justify-center size-2 rounded-full bg-n-surface-1"
@@ -1,29 +1,49 @@
 import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
 import { computed } from 'vue';

+const channelTypeIconMap = {
+  'Channel::Api': 'i-woot-api',
+  'Channel::Email': 'i-woot-mail',
+  'Channel::FacebookPage': 'i-woot-messenger',
+  'Channel::Line': 'i-woot-line',
+  'Channel::Sms': 'i-woot-sms',
+  'Channel::Telegram': 'i-woot-telegram',
+  'Channel::TwilioSms': 'i-woot-sms',
+  'Channel::TwitterProfile': 'i-woot-x',
+  'Channel::WebWidget': 'i-woot-website',
+  'Channel::Whatsapp': 'i-woot-whatsapp',
+  'Channel::Instagram': 'i-woot-instagram',
+  'Channel::Tiktok': 'i-woot-tiktok',
+};
+
+const providerIconMap = {
+  microsoft: 'i-woot-outlook',
+  google: 'i-woot-gmail',
+};
+
+// Full-color brand icons. Most come from the `logos` Iconify set; Instagram,
+// Outlook and Line use custom `woot` glyphs since the `logos` versions are
+// monochrome or missing. Channels not listed here have no brand variant and
+// callers should fall back to the monochrome glyph via useChannelIcon.
+const channelTypeBrandIconMap = {
+  'Channel::FacebookPage': 'i-logos-messenger',
+  'Channel::Line': 'i-woot-line-color',
+  'Channel::Telegram': 'i-logos-telegram',
+  'Channel::Whatsapp': 'i-logos-whatsapp-icon',
+  'Channel::Instagram': 'i-woot-instagram-color',
+  'Channel::Tiktok': 'i-logos-tiktok-icon',
+};
+
+const providerBrandIconMap = {
+  microsoft: 'i-woot-outlook-color',
+  google: 'i-logos-google-gmail',
+};
+
+const resolveInbox = inbox => inbox?.value ?? inbox;
+
 export function useChannelIcon(inbox) {
-  const channelTypeIconMap = {
-    'Channel::Api': 'i-woot-api',
-    'Channel::Email': 'i-woot-mail',
-    'Channel::FacebookPage': 'i-woot-messenger',
-    'Channel::Line': 'i-woot-line',
-    'Channel::Sms': 'i-woot-sms',
-    'Channel::Telegram': 'i-woot-telegram',
-    'Channel::TwilioSms': 'i-woot-sms',
-    'Channel::TwitterProfile': 'i-woot-x',
-    'Channel::WebWidget': 'i-woot-website',
-    'Channel::Whatsapp': 'i-woot-whatsapp',
-    'Channel::Instagram': 'i-woot-instagram',
-    'Channel::Tiktok': 'i-woot-tiktok',
-  };
-
-  const providerIconMap = {
-    microsoft: 'i-woot-outlook',
-    google: 'i-woot-gmail',
-  };
-
  const channelIcon = computed(() => {
-    const inboxDetails = inbox.value || inbox;
+    const inboxDetails = resolveInbox(inbox);
    const type = inboxDetails.channel_type;
    let icon = channelTypeIconMap[type];

@@ -58,3 +78,26 @@ export function useChannelIcon(inbox) {

  return channelIcon;
 }
+
+export function useChannelBrandIcon(inbox) {
+  return computed(() => {
+    const inboxDetails = resolveInbox(inbox);
+    const type = inboxDetails.channel_type;
+    let icon = channelTypeBrandIconMap[type];
+
+    if (type === INBOX_TYPES.EMAIL && inboxDetails.provider) {
+      if (Object.keys(providerBrandIconMap).includes(inboxDetails.provider)) {
+        icon = providerBrandIconMap[inboxDetails.provider];
+      }
+    }
+
+    if (
+      type === INBOX_TYPES.TWILIO &&
+      inboxDetails.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
+    ) {
+      icon = channelTypeBrandIconMap['Channel::Whatsapp'];
+    }
+
+    return icon ?? null;
+  });
+}
@@ -6,9 +6,12 @@ import BaseBubble from './Base.vue';

 const { inboxId } = useMessageContext();

-const { isAFacebookInbox, isAnInstagramChannel, isATiktokChannel } = useInbox(
-  inboxId.value
-);
+const {
+  isAFacebookInbox,
+  isAnInstagramChannel,
+  isATiktokChannel,
+  isAWhatsAppChannel,
+} = useInbox(inboxId.value);

 const unsupportedMessageKey = computed(() => {
  if (isAFacebookInbox.value)
@@ -16,6 +19,8 @@ const unsupportedMessageKey = computed(() => {
  if (isAnInstagramChannel.value)
    return 'CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM';
  if (isATiktokChannel.value) return 'CONVERSATION.UNSUPPORTED_MESSAGE_TIKTOK';
+  if (isAWhatsAppChannel.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_WHATSAPP';
  return 'CONVERSATION.UNSUPPORTED_MESSAGE';
 });
 </script>
@@ -14,6 +14,11 @@ const props = defineProps({
    type: String,
    default: 'conversation',
  },
+  action: {
+    type: String,
+    default: 'assign',
+    validator: value => ['assign', 'remove'].includes(value),
+  },
  isLoading: {
    type: Boolean,
    default: false,
@@ -22,9 +27,13 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  appliedLabels: {
+    type: Array,
+    default: null,
+  },
 });

-const emit = defineEmits(['assign']);
+const emit = defineEmits(['assign', 'remove']);

 const { t } = useI18n();

@@ -35,17 +44,43 @@ const [showDropdown, toggleDropdown] = useToggle(false);
 const selectedLabels = ref([]);

 const isTypeContact = computed(() => props.type === 'contact');
+const isRemoveAction = computed(() => props.action === 'remove');

-const buttonLabel = computed(() =>
-  props.type === 'contact' ? t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS') : ''
+const buttonLabel = computed(() => {
+  if (!isTypeContact.value) return '';
+
+  return isRemoveAction.value
+    ? t('CONTACTS_BULK_ACTIONS.REMOVE_LABELS')
+    : t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS');
+});
+
+const tooltipLabel = computed(() =>
+  isRemoveAction.value
+    ? t('BULK_ACTION.LABELS.REMOVE_LABELS')
+    : t('BULK_ACTION.LABELS.ASSIGN_LABELS')
+);
+
+const confirmLabel = computed(() =>
+  isRemoveAction.value
+    ? t('BULK_ACTION.LABELS.REMOVE_SELECTED_LABELS')
+    : t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')
 );

 const isLabelSelected = labelTitle => {
  return selectedLabels.value.includes(labelTitle);
 };

+const visibleLabels = computed(() => {
+  if (!isRemoveAction.value || props.appliedLabels === null) {
+    return labels.value;
+  }
+
+  const applied = new Set(props.appliedLabels);
+  return labels.value.filter(label => applied.has(label.title));
+});
+
 const labelMenuItems = computed(() => {
-  return labels.value.map(label => ({
+  return visibleLabels.value.map(label => ({
    action: 'select',
    value: label.title,
    label: label.title,
@@ -64,9 +99,13 @@ const toggleLabelSelection = labelTitle => {
  }
 };

-const handleAssign = () => {
+const handleApply = () => {
  if (selectedLabels.value.length > 0) {
-    emit('assign', selectedLabels.value);
+    if (isRemoveAction.value) {
+      emit('remove', selectedLabels.value);
+    } else {
+      emit('assign', selectedLabels.value);
+    }
    toggleDropdown(false);
    selectedLabels.value = [];
  }
@@ -81,9 +120,9 @@ const handleDismiss = () => {
 <template>
  <div ref="containerRef" class="relative">
    <NextButton
-      v-tooltip="isTypeContact ? '' : $t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+      v-tooltip="tooltipLabel"
      :label="buttonLabel"
-      icon="i-lucide-tag"
+      :icon="isRemoveAction ? 'i-woot-tag-remove' : 'i-lucide-tag'"
      slate
      :size="isTypeContact ? 'sm' : 'xs'"
      ghost
@@ -148,9 +187,9 @@ const handleDismiss = () => {
            <NextButton
              sm
              class="w-full [&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline-flex"
-              :label="t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')"
+              :label="confirmLabel"
              :disabled="!selectedLabels.length"
-              @click="handleAssign"
+              @click="handleApply"
            />
          </div>
        </template>
@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, useAttrs } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import { emitter } from 'shared/helpers/mitt';
@@ -55,12 +56,25 @@ defineOptions({
 const attrs = useAttrs();

 const {
+  selectedConversations,
  onAssignAgent,
  onAssignLabels,
+  onRemoveLabels,
  onAssignTeamsForBulk: onAssignTeam,
  onUpdateConversations,
 } = useBulkActions();

+const getConversationById = useMapGetter('getConversationById');
+
+const appliedLabelsForSelection = computed(() => {
+  const applied = new Set();
+  selectedConversations.value.forEach(id => {
+    const conversation = getConversationById.value(id);
+    (conversation?.labels || []).forEach(label => applied.add(label));
+  });
+  return Array.from(applied);
+});
+
 const showCustomTimeSnoozeModal = ref(false);

 function onCmdSnoozeConversation(snoozeType) {
@@ -161,6 +175,11 @@ onUnmounted(() => {
        </div>
        <div class="flex items-center gap-2">
          <BulkLabelActions @assign="onAssignLabels" />
+          <BulkLabelActions
+            action="remove"
+            :applied-labels="appliedLabelsForSelection"
+            @remove="onRemoveLabels"
+          />
          <BulkUpdateActions
            :show-resolve="!showResolvedAction"
            :show-reopen="!showOpenAction"
@@ -108,7 +108,7 @@ export function useBulkActions() {
    }
  }

-  // Only used in context menu
+  // Used by both context menu and bulk action bar.
  async function onRemoveLabels(labelsToRemove, conversationId = null) {
    try {
      await store.dispatch('bulkActions/process', {
@@ -119,14 +119,24 @@ export function useBulkActions() {
        },
      });

-      useAlert(
-        t('CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_REMOVAL.SUCCESFUL', {
-          labelName: labelsToRemove[0],
-          conversationId,
-        })
-      );
+      // Context-menu remove should not disturb an existing bulk selection.
+      if (conversationId) {
+        useAlert(
+          t('CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_REMOVAL.SUCCESFUL', {
+            labelName: labelsToRemove[0],
+            conversationId,
+          })
+        );
+      } else {
+        store.dispatch('bulkActions/clearSelectedConversationIds');
+        useAlert(t('BULK_ACTION.LABELS.REMOVE_SUCCESFUL'));
+      }
    } catch (err) {
-      useAlert(t('CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_REMOVAL.FAILED'));
+      useAlert(
+        conversationId
+          ? t('CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_REMOVAL.FAILED')
+          : t('BULK_ACTION.LABELS.REMOVE_FAILED')
+      );
    }
  }

@@ -27,9 +27,13 @@
    },
    "LABELS": {
      "ASSIGN_LABELS": "Assign labels",
+      "REMOVE_LABELS": "Remove labels",
      "ASSIGN_SELECTED_LABELS": "Assign selected labels",
+      "REMOVE_SELECTED_LABELS": "Remove selected labels",
      "ASSIGN_SUCCESFUL": "Labels assigned successfully.",
-      "ASSIGN_FAILED": "Failed to assign labels. Please try again."
+      "ASSIGN_FAILED": "Failed to assign labels. Please try again.",
+      "REMOVE_SUCCESFUL": "Labels removed successfully.",
+      "REMOVE_FAILED": "Failed to remove labels. Please try again."
    },
    "TEAMS": {
      "NONE": "None",
@@ -586,8 +586,11 @@
  },
  "CONTACTS_BULK_ACTIONS": {
    "ASSIGN_LABELS": "Assign Labels",
+    "REMOVE_LABELS": "Remove Labels",
    "ASSIGN_LABELS_SUCCESS": "Labels assigned successfully.",
    "ASSIGN_LABELS_FAILED": "Failed to assign labels",
+    "REMOVE_LABELS_SUCCESS": "Labels removed successfully.",
+    "REMOVE_LABELS_FAILED": "Failed to remove labels",
    "DESCRIPTION": "Select the labels you want to add to the selected contacts.",
    "NO_LABELS_FOUND": "No labels available yet.",
    "SELECTED_COUNT": "{count} selected",
@@ -62,6 +62,7 @@
    "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
    "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
    "UNSUPPORTED_MESSAGE_TIKTOK": "This message is unsupported. You can view this message on the TikTok app.",
+    "UNSUPPORTED_MESSAGE_WHATSAPP": "This message is unsupported. You can view this message on the WhatsApp app.",
    "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
    "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
    "NO_RESPONSE": "No response",
@@ -607,9 +607,12 @@
        "DRAFT": "Draft",
        "ARCHIVE": "Archive",
        "TRANSLATE": "Translate",
+        "MOVE_TO_CATEGORY": "Category",
        "DELETE": "Delete",
        "STATUS_SUCCESS": "Articles updated successfully",
        "STATUS_ERROR": "Failed to update articles",
+        "CATEGORY_SUCCESS": "Articles moved successfully",
+        "CATEGORY_ERROR": "Failed to move articles",
        "DELETE_CONFIRM_TITLE": "Delete article | Delete {count} articles",
        "DELETE_CONFIRM_DESCRIPTION": "This will permanently delete the selected article. This action cannot be undone. | This will permanently delete {count} selected articles. This action cannot be undone.",
        "DELETE_CONFIRM": "Delete",
@@ -25,6 +25,7 @@ const props = defineProps({
 const emit = defineEmits([
  'clearSelection',
  'assignLabels',
+  'removeLabels',
  'toggleAll',
  'deleteSelected',
 ]);
@@ -72,6 +73,10 @@ const selectionModel = computed({
 const handleAssignLabels = labels => {
  emit('assignLabels', labels);
 };
+
+const handleRemoveLabels = labels => {
+  emit('removeLabels', labels);
+};
 </script>

 <template>
@@ -103,6 +108,13 @@ const handleAssignLabels = labels => {
            :disabled="!selectedCount"
            @assign="handleAssignLabels"
          />
+          <BulkLabelActions
+            type="contact"
+            action="remove"
+            :is-loading="isLoading"
+            :disabled="!selectedCount"
+            @remove="handleRemoveLabels"
+          />
          <div class="w-px h-3 bg-n-weak rounded-lg" />
          <Policy :permissions="['administrator']">
            <Button
@@ -351,6 +351,28 @@ const assignLabels = async labels => {
  }
 };

+const removeLabels = async labels => {
+  if (!labels.length || !selectedContactIds.value.length) {
+    return;
+  }
+
+  isBulkActionLoading.value = true;
+  try {
+    await BulkActionsAPI.create({
+      type: 'Contact',
+      ids: selectedContactIds.value,
+      labels: { remove: labels },
+    });
+    useAlert(t('CONTACTS_BULK_ACTIONS.REMOVE_LABELS_SUCCESS'));
+    clearSelection();
+    await fetchContactsBasedOnContext(pageNumber.value);
+  } catch (error) {
+    useAlert(t('CONTACTS_BULK_ACTIONS.REMOVE_LABELS_FAILED'));
+  } finally {
+    isBulkActionLoading.value = false;
+  }
+};
+
 const deleteContacts = async () => {
  if (!selectedContactIds.value.length) {
    return;
@@ -514,6 +536,7 @@ onMounted(async () => {
          @toggle-all="toggleSelectAll"
          @clear-selection="clearSelection"
          @assign-labels="assignLabels"
+          @remove-labels="removeLabels"
          @delete-selected="openBulkDeleteDialog"
        />
        <ContactEmptyState