feat(inbox): preserve channel logo with voice badge in inbox/sidebar

Inboxes with voice enabled were showing a generic phone icon in the
inbox list and sidebar, hiding the underlying channel (e.g. WhatsApp).
Keep the native channel logo and overlay an audio-waveform badge when
voice is enabled. The native Twilio Voice inbox (TwilioSms with no
WhatsApp medium) still resolves to the phone icon.
This commit is contained in:
Tanmay Deep Sharma
2026-05-13 16:28:40 +05:30
parent 5d9c979ace
commit 3d914065e0
2 changed files with 23 additions and 5 deletions
@@ -1,5 +1,6 @@
<script setup>
import { toRef } from 'vue';
import { computed, toRef } from 'vue';
import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
import { useChannelIcon } from './provider';
import Icon from 'next/icon/Icon.vue';
@@ -10,9 +11,20 @@ const props = defineProps({
},
});
defineOptions({ inheritAttrs: false });
const channelIcon = useChannelIcon(toRef(props, 'inbox'));
const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
</script>
<template>
<Icon :icon="channelIcon" />
<span class="relative inline-flex" v-bind="$attrs">
<Icon :icon="channelIcon" class="size-full" />
<span
v-if="hasVoiceBadge"
class="absolute -top-1 -right-1 inline-flex items-center justify-center size-2.5 rounded-full bg-n-alpha-2 ring-1 ring-n-solid-1"
>
<Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-10" />
</span>
</span>
</template>
@@ -1,5 +1,4 @@
import { computed } from 'vue';
import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
export function useChannelIcon(inbox) {
const channelTypeIconMap = {
@@ -38,8 +37,15 @@ export function useChannelIcon(inbox) {
icon = 'i-woot-whatsapp';
}
// Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
if (isVoiceCallEnabled(inboxDetails)) {
// 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 === 'Channel::TwilioSms' &&
voiceEnabled &&
inboxDetails.medium !== 'whatsapp'
) {
icon = 'i-woot-voice';
}