feat(conversation): add label search to right-click context menu (#15084)

app/javascript/dashboard/components/ui/ContextMenu.vue

@@ -77,6 +77,15 @@ const handleClose = () => {
   emit('close');
 };
 
+const handleFocusOut = event => {
+  // Keep the menu open while focus stays inside it (e.g. the label search
+  // input); close it once focus leaves the menu entirely.
+  if (menuRef.value?.contains(event.relatedTarget)) {
+    return;
+  }
+  handleClose();
+};
+
 onUnmounted(() => {
   isLocked.value = false;
 });
@@ -89,7 +98,7 @@ onUnmounted(() => {
       class="fixed outline-none z-[9999] cursor-pointer"
       :style="position"
       tabindex="0"
-      @blur="handleClose"
+      @focusout="handleFocusOut"
     >
       <slot />
     </div>

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -7,10 +7,13 @@ import {
   getSortedAgentsByAvailability,
   getAgentsByUpdatedPresence,
 } from 'dashboard/helper/agentHelper.js';
+import { picoSearch } from '@scmmishra/pico-search';
 import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
+import NextInput from 'dashboard/components-next/input/Input.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const MENU = {
   MARK_AS_READ: 'mark-as-read',
@@ -31,6 +34,8 @@ export default {
     MenuItem,
     MenuItemWithSubmenu,
     AgentLoadingPlaceholder,
+    NextInput,
+    Icon,
   },
   props: {
     chatId: {
@@ -87,6 +92,7 @@ export default {
   data() {
     return {
       MENU,
+      labelSearchQuery: '',
       STATUS_TYPE: wootConstants.STATUS_TYPE,
       readOption: {
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_READ'),
@@ -216,6 +222,14 @@ export default {
       // Don't show snooze if the conversation is already snoozed/resolved/pending
       return this.status === wootConstants.STATUS_TYPE.OPEN;
     },
+    filteredLabels() {
+      const labels = this.labelSearchQuery
+        ? picoSearch(this.labels, this.labelSearchQuery, ['title'])
+        : this.labels;
+      // Assigned labels first, keeping each group's existing order.
+      const isAssigned = label => this.conversationLabels.includes(label.title);
+      return [...labels].sort((a, b) => isAssigned(b) - isAssigned(a));
+    },
   },
   mounted() {
     this.$store.dispatch('inboxAssignableAgents/fetch', [this.inboxId]);
@@ -335,21 +349,49 @@ export default {
         :option="labelMenuConfig"
         :sub-menu-available="!!labels.length"
       >
-        <MenuItem
-          v-for="label in labels"
-          :key="label.id"
-          :option="generateMenuLabelConfig(label, 'label')"
-          :variant="
-            conversationLabels.includes(label.title)
-              ? 'label-assigned'
-              : 'label'
-          "
-          @click.stop="
-            conversationLabels.includes(label.title)
-              ? $emit('removeLabel', label)
-              : $emit('assignLabel', label)
-          "
-        />
+        <div class="pb-1 w-[12.5rem]">
+          <NextInput
+            v-model="labelSearchQuery"
+            type="search"
+            size="sm"
+            class="w-full"
+            custom-input-class="!ps-8 !text-xs"
+            :placeholder="$t('CONVERSATION.CARD_CONTEXT_MENU.SEARCH_LABELS')"
+            @click.stop
+            @keydown.stop
+          >
+            <template #prefix>
+              <Icon
+                icon="i-lucide-search"
+                class="absolute z-10 -translate-y-1/2 pointer-events-none size-3.5 text-n-slate-10 top-1/2 start-2"
+              />
+            </template>
+          </NextInput>
+        </div>
+        <div class="overflow-x-hidden overflow-y-auto max-h-[12.5rem]">
+          <MenuItem
+            v-for="label in filteredLabels"
+            :key="label.id"
+            :option="generateMenuLabelConfig(label, 'label')"
+            :variant="
+              conversationLabels.includes(label.title)
+                ? 'label-assigned'
+                : 'label'
+            "
+            @mousedown.prevent
+            @click.stop="
+              conversationLabels.includes(label.title)
+                ? $emit('removeLabel', label)
+                : $emit('assignLabel', label)
+            "
+          />
+          <p
+            v-if="!filteredLabels.length"
+            class="px-2 py-2 m-0 text-xs text-center text-n-slate-11"
+          >
+            {{ $t('CONVERSATION.CARD_CONTEXT_MENU.NO_LABELS_FOUND') }}
+          </p>
+        </div>
       </MenuItemWithSubmenu>
       <MenuItemWithSubmenu
         v-if="isAllowed([MENU.AGENT])"

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -15,7 +15,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="menu text-n-slate-12 min-h-7 min-w-0" role="button">
+  <div class="menu group text-n-slate-12 min-h-7 min-w-0" role="button">
     <fluent-icon
       v-if="variant === 'icon' && option.icon"
       :icon="option.icon"
@@ -52,7 +52,7 @@ defineProps({
     <Icon
       v-if="variant === 'label-assigned'"
       icon="i-lucide-check"
-      class="flex-shrink-0 size-3.5 mr-1"
+      class="flex-shrink-0 size-3.5 text-n-brand group-hover:text-white"
     />
   </div>
 </template>

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

@@ -193,6 +193,8 @@
       },
       "ASSIGN_AGENT": "Assign agent",
       "ASSIGN_LABEL": "Assign label",
+      "SEARCH_LABELS": "Search labels",
+      "NO_LABELS_FOUND": "No labels found",
       "AGENTS_LOADING": "Loading agents...",
       "ASSIGN_TEAM": "Assign team",
       "DELETE": "Delete conversation",