chore: Calls page UI improvements (#15129)

2026-07-23 18:45:56 +05:30
parent bae20ca83e
commit a98666030b
27 changed files with 283 additions and 92 deletions
@@ -28,7 +28,12 @@ const inboxes = computed(() => {
    return {
      name: inbox.name,
      id: inbox.id,
-      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
+      icon: getInboxIconByType(
+        inbox.channelType,
+        inbox.medium,
+        'line',
+        inbox.voiceEnabled
+      ),
    };
  });
 });
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
+import { getInboxVoiceIcon } from 'dashboard/helper/inbox';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import AudioPlayer from 'dashboard/components-next/audio/AudioPlayer.vue';
@@ -60,7 +61,7 @@ const resultLabel = computed(() => {
 });

 const providerIcon = computed(() =>
-  props.call.provider === 'whatsapp' ? 'i-woot-whatsapp' : 'i-lucide-phone'
+  getInboxVoiceIcon(props.call.inbox.channelType, props.call.inbox.medium)
 );

 const createdAtLabel = computed(() =>
@@ -150,7 +151,7 @@ const conversationRoute = computed(() => ({
  <div
    class="hidden items-center gap-x-1.5 gap-y-2.5 border-b border-n-weak lg:flex lg:items-center lg:gap-1.5"
  >
-    <div class="flex items-center gap-2.5 min-w-0 w-40 shrink-0 py-3.5">
+    <div class="flex items-center gap-2.5 min-w-0 w-52 shrink-0 py-3.5">
      <Avatar
        :src="call.contact.avatar"
        :name="contactName"
@@ -169,9 +170,12 @@ const conversationRoute = computed(() => ({
    >
      <div class="flex items-center gap-x-2 min-w-0 lg:contents py-3.5">
        <CallStatusBadge :kind="kind" class="shrink-0" />
-        <template v-if="agentActionLabel">
+        <div
+          v-if="agentActionLabel"
+          class="gap-x-1.5 min-w-0 flex items-center"
+        >
          <span
-            class="text-label-small text-n-slate-10 truncate min-w-0 shrink min-w-8"
+            class="text-label-small text-n-slate-10 truncate shrink min-w-8 xl:min-w-14"
          >
            {{ agentActionLabel }}
          </span>
@@ -192,7 +196,7 @@ const conversationRoute = computed(() => ({
              {{ call.agent.name }}
            </span>
          </span>
-        </template>
+        </div>
        <span
          v-else-if="resultLabel"
          class="text-body-main truncate text-n-slate-10 min-w-0 shrink-[20]"
@@ -212,10 +216,10 @@ const conversationRoute = computed(() => ({
        content: call.inbox.name,
        delay: { show: 500, hide: 0 },
      }"
-      class="flex items-center gap-1.5 justify-start min-w-14 shrink-[100] py-3.5"
+      class="flex items-center gap-1 justify-end w-40 min-w-4 shrink-[100] py-3.5"
    >
      <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
-      <span class="text-body-main truncate text-n-slate-11">
+      <span class="text-body-main truncate text-n-slate-11 min-w-0">
        {{ call.inbox.name }}
      </span>
    </div>
@@ -232,7 +236,7 @@ const conversationRoute = computed(() => ({
        content: createdAtLabel,
        delay: { show: 500, hide: 0 },
      }"
-      class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end w-16 shrink-0"
+      class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end min-w-16 max-w-20 shrink-0"
    >
      {{ createdAtLabel }}
    </span>
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';

 const props = defineProps({
  // Null while a fetch is in flight so stale counts are never shown.
@@ -117,10 +118,16 @@ const moreFiltersSections = computed(() => [
  },
 ]);

+const selectedAssignee = computed(
+  () => props.agents.find(agent => agent.id === assigneeId.value) || null
+);
+
 const selectedAssigneeLabel = computed(
-  () =>
-    props.agents.find(agent => agent.id === assigneeId.value)?.name ||
-    t('CALLS_PAGE.FILTERS.ASSIGNEE')
+  () => selectedAssignee.value?.name || t('CALLS_PAGE.FILTERS.ASSIGNEE')
+);
+
+const isOtherActivitySelected = computed(() =>
+  OTHER_ACTIVITIES.includes(activity.value)
 );

 const hasMoreFilters = computed(() => Boolean(inboxId.value));
@@ -143,7 +150,7 @@ const applyMoreFilter = ({ action, value }) => {

 <template>
  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div class="flex flex-wrap items-center gap-3">
+    <div class="flex flex-wrap items-center gap-2">
      <span v-if="!activity" class="text-heading-3 text-n-slate-11 shrink-0">
        {{
          totalCount === null
@@ -157,13 +164,13 @@ const applyMoreFilter = ({ action, value }) => {
        color="blue"
        size="sm"
        :icon="ACTIVITY_ICONS[activity]"
-        class="shrink-0"
+        class="shrink-0 !h-7 !px-2"
        @click="setActivity(null)"
      >
        {{ activeChipLabel }}
        <Icon icon="i-lucide-x" />
      </Button>
-      <div class="w-px h-4 bg-n-strong shrink-0" />
+      <div class="w-px h-3.5 mx-1 bg-n-strong shrink-0" />
      <Button
        v-for="chip in inactiveChips"
        :key="chip"
@@ -172,7 +179,7 @@ const applyMoreFilter = ({ action, value }) => {
        size="sm"
        :icon="ACTIVITY_ICONS[chip]"
        :label="activityLabel(chip)"
-        class="shrink-0 text-n-slate-12"
+        class="shrink-0 text-n-slate-11 !h-7 !px-2"
        @click="setActivity(chip)"
      />
      <OnClickOutside
@@ -184,7 +191,10 @@ const applyMoreFilter = ({ action, value }) => {
          color="slate"
          size="sm"
          icon="i-lucide-phone"
-          class="text-n-slate-12"
+          class="!h-7 !px-2"
+          :class="
+            isOtherActivitySelected ? 'text-n-slate-12' : 'text-n-slate-11'
+          "
          @click="toggleMenu('activity')"
        >
          {{ t('CALLS_PAGE.FILTERS.OTHER_ACTIVITY') }}
@@ -208,10 +218,19 @@ const applyMoreFilter = ({ action, value }) => {
          variant="outline"
          color="slate"
          size="sm"
-          icon="i-lucide-user-round-cog"
-          class="max-w-52 text-n-slate-12"
+          icon="i-woot-empty-assignee"
+          class="max-w-52 !h-7 !px-2"
+          :class="assigneeId ? 'text-n-slate-12' : 'text-n-slate-11'"
          @click="toggleMenu('assignee')"
        >
+          <template v-if="selectedAssignee" #icon>
+            <Avatar
+              :src="selectedAssignee.thumbnail"
+              :name="selectedAssignee.name"
+              :size="16"
+              rounded-full
+            />
+          </template>
          <span class="truncate">{{ selectedAssigneeLabel }}</span>
          <Icon icon="i-lucide-chevron-down" class="text-n-slate-11 shrink-0" />
        </Button>
@@ -228,8 +247,9 @@ const applyMoreFilter = ({ action, value }) => {
          variant="outline"
          size="sm"
          icon="i-lucide-list-filter"
+          class="!h-7 !px-2"
          :color="hasMoreFilters ? 'blue' : 'slate'"
-          :class="hasMoreFilters ? '' : 'text-n-slate-12'"
+          :class="hasMoreFilters ? '' : 'text-n-slate-11'"
          @click="toggleMenu('more')"
        >
          {{ t('CALLS_PAGE.FILTERS.MORE_FILTERS') }}
@@ -83,8 +83,12 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');

 const inboxIcon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium);
+  const {
+    medium,
+    channel_type: type,
+    voice_enabled: voiceEnabled,
+  } = props.inbox;
+  return getInboxIconByType(type, medium, 'fill', voiceEnabled);
 });
 </script>

@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);

 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });

 const lastActivityAt = computed(() => {
@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);

 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });

 const hasSlaThreshold = computed(() => {
@@ -37,10 +37,11 @@ const transformInbox = ({
  channelType,
  phoneNumber,
  medium,
+  voiceEnabled,
  ...rest
 }) => ({
  id,
-  icon: getInboxIconByType(channelType, medium, 'line'),
+  icon: getInboxIconByType(channelType, medium, 'line', voiceEnabled),
  label: generateLabelForContactableInboxesList({
    name,
    email,
@@ -54,6 +55,7 @@ const transformInbox = ({
  phoneNumber,
  channelType,
  medium,
+  voiceEnabled,
  ...rest,
 });

@@ -79,6 +79,20 @@ describe('composeConversationHelper', () => {
        channelType: INBOX_TYPES.EMAIL,
      });
    });
+
+    it('uses the voice glyph for a voice-enabled inbox', () => {
+      const inboxes = [
+        {
+          id: 2,
+          name: 'WhatsApp Cloud',
+          channelType: INBOX_TYPES.WHATSAPP,
+          voiceEnabled: true,
+        },
+      ];
+
+      const result = helpers.buildContactableInboxesList(inboxes);
+      expect(result[0].icon).toBe('i-woot-whatsapp-voice');
+    });
  });

  describe('getCapitalizedNameFromEmail', () => {
@@ -117,8 +117,8 @@ const downloadRecording = () => {
    >
      <template #icon>
        <Icon
-          :icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
-          class="size-4 flex-shrink-0"
+          :icon="isPlaying ? 'i-woot-audio-pause' : 'i-woot-audio-play'"
+          class="size-4 flex-shrink-0 text-n-slate-11"
        />
      </template>
    </Button>
@@ -127,10 +127,10 @@ const downloadRecording = () => {
      min="0"
      :max="duration || 0"
      :value="currentTime"
-      class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-1 rounded-lg appearance-none cursor-pointer bg-n-slate-12/30 accent-n-slate-11"
+      class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-0.5 rounded-full appearance-none cursor-pointer bg-n-slate-12/30 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-2 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-n-slate-11 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:size-2 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-n-slate-11"
      @input="seek"
    />
-    <span class="text-sm tabular-nums text-n-slate-11 shrink-0">
+    <span class="text-label-small tabular-nums text-n-slate-11 shrink-0">
      {{ displayedTime }}
    </span>
    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
@@ -58,8 +58,12 @@ const menuItems = computed(() => [
 ]);

 const icon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium, 'outline');
+  const {
+    medium,
+    channel_type: type,
+    voice_enabled: voiceEnabled,
+  } = props.inbox;
+  return getInboxIconByType(type, medium, 'outline', voiceEnabled);
 });

 const handleAction = ({ action, value }) => {
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, toRef } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 import { useChannelIcon, useChannelBrandIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';

@@ -21,7 +20,6 @@ defineOptions({ inheritAttrs: false });

 const inboxRef = toRef(props, 'inbox');

-const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
 const channelIcon = useChannelIcon(inboxRef);
 const brandIcon = useChannelBrandIcon(inboxRef);

@@ -31,13 +29,7 @@ const icon = computed(() =>
 </script>

 <template>
-  <span class="relative inline-flex" v-bind="$attrs">
+  <span class="inline-flex" v-bind="$attrs">
    <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"
-    >
-      <Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-12" />
-    </span>
  </span>
 </template>
@@ -1,4 +1,9 @@
-import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
+import {
+  INBOX_TYPES,
+  TWILIO_CHANNEL_MEDIUM,
+  isVoiceCallEnabled,
+  getInboxVoiceIcon,
+} from 'dashboard/helper/inbox';
 import { computed } from 'vue';

 const channelTypeIconMap = {
@@ -61,16 +66,9 @@ export function useChannelIcon(inbox) {
      icon = 'i-woot-whatsapp';
    }

-    // Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
-    // is presented as a Voice channel, so show the phone icon.
-    const voiceEnabled =
-      inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
-    if (
-      type === INBOX_TYPES.TWILIO &&
-      voiceEnabled &&
-      inboxDetails.medium !== TWILIO_CHANNEL_MEDIUM.WHATSAPP
-    ) {
-      icon = 'i-woot-voice';
+    // Voice-enabled inboxes use the combined channel + voice-wave badge glyph.
+    if (isVoiceCallEnabled(inboxDetails)) {
+      icon = getInboxVoiceIcon(type, inboxDetails.medium);
    }

    return icon ?? 'i-ri-global-fill';
@@ -19,13 +19,32 @@ describe('useChannelIcon', () => {
    expect(icon).toBe('i-woot-whatsapp');
  });

-  it('returns correct icon for voice-enabled Twilio channel', () => {
+  it('returns the voice-call glyph for a voice-enabled Twilio channel', () => {
    const inbox = {
      channel_type: 'Channel::TwilioSms',
      voice_enabled: true,
    };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-voice');
+    expect(icon).toBe('i-woot-voice-call');
+  });
+
+  it('returns the WhatsApp voice glyph for a voice-enabled WhatsApp channel', () => {
+    const inbox = {
+      channel_type: 'Channel::Whatsapp',
+      voice_enabled: true,
+    };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-woot-whatsapp-voice');
+  });
+
+  it('returns the WhatsApp voice glyph for a voice-enabled Twilio WhatsApp channel', () => {
+    const inbox = {
+      channel_type: 'Channel::TwilioSms',
+      medium: 'whatsapp',
+      voice_enabled: true,
+    };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-woot-whatsapp-voice');
  });

  it('returns correct icon for Line channel', () => {
@@ -457,10 +457,11 @@ function handleReplyTo() {

 const avatarInfo = computed(() => {
  if (props.contentAttributes?.externalEcho) {
-    const { name, avatar_url, channel_type, medium } = inbox.value;
+    const { name, avatar_url, channel_type, medium, voice_enabled } =
+      inbox.value;
    const iconName = avatar_url
      ? null
-      : getInboxIconByType(channel_type, medium);
+      : getInboxIconByType(channel_type, medium, 'fill', voice_enabled);
    return {
      name: iconName ? '' : name || t('CONVERSATION.NATIVE_APP'),
      src: avatar_url || '',
@@ -55,11 +55,30 @@ export const getVoiceCallProvider = inbox => {

 export const isVoiceCallEnabled = inbox => getVoiceCallProvider(inbox) !== null;

+// Combined channel + voice-wave badge glyph per voice-call provider.
+export const VOICE_CALL_ICONS = {
+  [VOICE_CALL_PROVIDERS.WHATSAPP]: 'i-woot-whatsapp-voice',
+  [VOICE_CALL_PROVIDERS.TWILIO]: 'i-woot-voice-call',
+};
+
+export const getVoiceCallIcon = provider =>
+  VOICE_CALL_ICONS[provider] ?? VOICE_CALL_ICONS[VOICE_CALL_PROVIDERS.TWILIO];
+
 export const TWILIO_CHANNEL_MEDIUM = {
  WHATSAPP: 'whatsapp',
  SMS: 'sms',
 };

+export const getInboxVoiceIcon = (channelType, medium) => {
+  const isWhatsapp =
+    channelType === INBOX_TYPES.WHATSAPP ||
+    (channelType === INBOX_TYPES.TWILIO &&
+      medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP);
+  return getVoiceCallIcon(
+    isWhatsapp ? VOICE_CALL_PROVIDERS.WHATSAPP : VOICE_CALL_PROVIDERS.TWILIO
+  );
+};
+
 const INBOX_ICON_MAP_FILL = {
  [INBOX_TYPES.WEB]: 'i-ri-global-fill',
  [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
@@ -182,7 +201,14 @@ export const getInboxClassByType = (type, phoneNumber) => {
  }
 };

-export const getInboxIconByType = (type, medium, variant = 'fill') => {
+export const getInboxIconByType = (
+  type,
+  medium,
+  variant = 'fill',
+  voiceEnabled = false
+) => {
+  if (voiceEnabled) return getInboxVoiceIcon(type, medium);
+
  const iconMap =
    variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
  const defaultIcon =
@@ -1,8 +1,11 @@
 import {
  INBOX_TYPES,
+  VOICE_CALL_PROVIDERS,
  getInboxClassByType,
  getInboxIconByType,
+  getInboxVoiceIcon,
  getInboxWarningIconClass,
+  getVoiceCallIcon,
 } from '../inbox';

 describe('#Inbox Helpers', () => {
@@ -166,4 +169,63 @@ describe('#Inbox Helpers', () => {
      );
    });
  });
+
+  describe('getVoiceCallIcon', () => {
+    it('returns the WhatsApp voice glyph for the whatsapp provider', () => {
+      expect(getVoiceCallIcon(VOICE_CALL_PROVIDERS.WHATSAPP)).toBe(
+        'i-woot-whatsapp-voice'
+      );
+    });
+
+    it('returns the generic voice-call glyph for the twilio provider', () => {
+      expect(getVoiceCallIcon(VOICE_CALL_PROVIDERS.TWILIO)).toBe(
+        'i-woot-voice-call'
+      );
+    });
+
+    it('falls back to the generic voice-call glyph for an unknown provider', () => {
+      expect(getVoiceCallIcon('unknown')).toBe('i-woot-voice-call');
+      expect(getVoiceCallIcon(undefined)).toBe('i-woot-voice-call');
+    });
+  });
+
+  describe('getInboxVoiceIcon', () => {
+    it('returns the WhatsApp voice glyph for a WhatsApp inbox', () => {
+      expect(getInboxVoiceIcon(INBOX_TYPES.WHATSAPP)).toBe(
+        'i-woot-whatsapp-voice'
+      );
+    });
+
+    it('returns the WhatsApp voice glyph for a Twilio WhatsApp inbox', () => {
+      expect(getInboxVoiceIcon(INBOX_TYPES.TWILIO, 'whatsapp')).toBe(
+        'i-woot-whatsapp-voice'
+      );
+    });
+
+    it('returns the generic voice-call glyph for a Twilio voice inbox', () => {
+      expect(getInboxVoiceIcon(INBOX_TYPES.TWILIO, 'sms')).toBe(
+        'i-woot-voice-call'
+      );
+    });
+  });
+
+  describe('getInboxIconByType with voice enabled', () => {
+    it('returns the WhatsApp voice glyph for a voice-enabled WhatsApp inbox', () => {
+      expect(
+        getInboxIconByType(INBOX_TYPES.WHATSAPP, undefined, 'line', true)
+      ).toBe('i-woot-whatsapp-voice');
+    });
+
+    it('returns the generic voice-call glyph for a voice-enabled Twilio inbox', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'sms', 'line', true)).toBe(
+        'i-woot-voice-call'
+      );
+    });
+
+    it('returns the normal channel icon when voice is not enabled', () => {
+      expect(
+        getInboxIconByType(INBOX_TYPES.WHATSAPP, undefined, 'line', false)
+      ).toBe('i-woot-whatsapp');
+    });
+  });
 });
@@ -87,8 +87,8 @@ const inboxName = computed(() => props.inbox?.name);

 const inboxIcon = computed(() => {
  if (!inbox.value) return null;
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });
 </script>

@@ -65,8 +65,8 @@ const inboxName = computed(() => inbox.value?.name);

 const inboxIcon = computed(() => {
  if (!inbox.value) return null;
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });

 const fileAttachments = computed(() => {
@@ -129,22 +129,22 @@ onMounted(async () => {
    v-else
    class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1"
  >
-    <header class="px-6 pt-6 pb-4 shrink-0">
-      <div class="w-full">
+    <header class="shrink-0">
+      <div class="w-full px-6 pt-6">
        <h1 class="text-xl font-medium text-n-slate-12">
          {{ t('CALLS_PAGE.HEADER') }}
        </h1>
-        <CallsFilterBar
-          v-model:activity="activity"
-          v-model:assignee-id="assigneeId"
-          v-model:inbox-id="inboxId"
-          class="mt-5"
-          :total-count="isFetching ? null : meta.count"
-          :agents="agents"
-          :inboxes="voiceInboxes"
-          :show-assignee="isAdmin"
-        />
      </div>
+      <CallsFilterBar
+        v-model:activity="activity"
+        v-model:assignee-id="assigneeId"
+        v-model:inbox-id="inboxId"
+        class="mt-5 pb-4 border-b border-n-weak mx-6"
+        :total-count="isFetching ? null : meta.count"
+        :agents="agents"
+        :inboxes="voiceInboxes"
+        :show-assignee="isAdmin"
+      />
    </header>
    <main class="flex-1 px-6 overflow-y-auto">
      <div class="w-full">
@@ -79,13 +79,15 @@ const breadcrumbItems = computed(() => {
 });

 const buildInboxList = allInboxes =>
-  allInboxes?.map(({ name, id, email, phoneNumber, channelType, medium }) => ({
-    name,
-    id,
-    email,
-    phoneNumber,
-    icon: getInboxIconByType(channelType, medium, 'line'),
-  })) || [];
+  allInboxes?.map(
+    ({ name, id, email, phoneNumber, channelType, medium, voiceEnabled }) => ({
+      name,
+      id,
+      email,
+      phoneNumber,
+      icon: getInboxIconByType(channelType, medium, 'line', voiceEnabled),
+    })
+  ) || [];

 const policyInboxes = computed(() =>
  buildInboxList(selectedPolicy.value?.inboxes)
@@ -64,13 +64,23 @@ const allInboxes = computed(
    inboxes.value
      ?.slice()
      .sort((a, b) => a.name.localeCompare(b.name))
-      .map(({ name, id, email, phoneNumber, channelType, medium }) => ({
-        name,
-        id,
-        email,
-        phoneNumber,
-        icon: getInboxIconByType(channelType, medium, 'line'),
-      })) || []
+      .map(
+        ({
+          name,
+          id,
+          email,
+          phoneNumber,
+          channelType,
+          medium,
+          voiceEnabled,
+        }) => ({
+          name,
+          id,
+          email,
+          phoneNumber,
+          icon: getInboxIconByType(channelType, medium, 'line', voiceEnabled),
+        })
+      ) || []
 );

 const formData = computed(() => ({
@@ -29,7 +29,8 @@ const inboxIcon = computed(() => {
  return getInboxIconByType(
    props.inbox.channelType,
    props.inbox.medium,
-    'line'
+    'line',
+    props.inbox.voiceEnabled
  );
 });

@@ -281,8 +281,12 @@ export default {
      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
    },
    inboxIcon() {
-      const { medium, channel_type: type } = this.inbox;
-      return getInboxIconByType(type, medium, 'line');
+      const {
+        medium,
+        channel_type: type,
+        voice_enabled: voiceEnabled,
+      } = this.inbox;
+      return getInboxIconByType(type, medium, 'line', voiceEnabled);
    },
    bannerMaxWidth() {
      const narrowTabs = ['collaborators', 'bot-configuration'];