refactor: optimize agent bot assignment dropdown (#14866)

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -62,7 +62,10 @@ export default {
       immediate: true,
       handler(inboxId) {
         if (inboxId) {
-          this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
+          this.$store.dispatch('inboxAssignableAgents/fetch', {
+            inboxIds: [inboxId],
+            includeAgentBots: true,
+          });
         }
       },
     },

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
 import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import MessagePreview from './MessagePreview.vue';
 import InboxName from '../InboxName.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
@@ -57,6 +58,10 @@ const showMetaSection = computed(() => {
   );
 });
 
+const isAgentBotAssignee = computed(
+  () => props.chat?.meta?.assignee_type === 'AgentBot'
+);
+
 const hasSlaPolicyId = computed(
   () => props.chat?.applied_sla?.id && !props.currentContact?.blocked
 );
@@ -159,10 +164,15 @@ watch(
         >
           <span
             v-if="showAssignee && assignee.name"
-            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center truncate"
+            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center gap-px truncate"
           >
-            <fluent-icon icon="person" size="12" class="text-n-slate-11" />
-            {{ assignee.name }}
+            <Icon
+              :icon="
+                isAgentBotAssignee ? 'i-lucide-bot' : 'i-lucide-user-round'
+              "
+              class="size-3 text-n-slate-11 flex-shrink-0"
+            />
+            <span class="truncate">{{ assignee.name }}</span>
           </span>
           <CardPriorityIcon
             :priority="chat.priority"

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -123,7 +123,13 @@ export default {
               $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
             }}</label>
           </div>
-          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
+          <div
+            v-if="
+              currentChat.meta.assignee &&
+              currentChat.meta.assignee_type !== 'AgentBot'
+            "
+            class="flex items-center gap-2"
+          >
             <input
               id="assignee"
               v-model="selectedType"

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

@@ -33,10 +33,19 @@ defineProps({
       v-if="variant === 'agent'"
       :name="option.label"
       :src="option.thumbnail"
+      :icon-name="option.iconName"
       :status="option.status === 'online' ? option.status : null"
       :size="20"
       class="flex-shrink-0"
-    />
+    >
+      <template v-if="option.iconName && option.thumbnail" #badge>
+        <div
+          class="absolute z-20 flex items-center justify-center rounded-full outline outline-1 outline-n-weak bg-n-solid-1 -bottom-0.5 ltr:-right-0.5 rtl:-left-0.5 size-3"
+        >
+          <Icon icon="i-lucide-bot" class="text-n-slate-11 size-2" />
+        </div>
+      </template>
+    </Avatar>
     <p class="menu-label truncate min-w-0 flex-1">
       {{ option.label }}
     </p>