feat(voice): unify call button flow and redesign call widget
- Contact-panel call button now continues in the open conversation when the conversation's inbox is voice-capable, mirroring the header button. For non-voice channels it falls back to the inbox picker. - Twilio and WhatsApp paths share the same upstream decision; both pass a conversationId hint to the provider so the agent stays in the same thread. - Floating call widget redesigned: avatar + name + phone with duration on top, a clickable "View chat history" pill linking to the conversation, and labeled End / Join action buttons. Mute is preserved for active WhatsApp calls. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tanmay Deep Sharma
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
0b3284ac62
commit
4093a8a48d
@@ -1,14 +1,16 @@
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { useCallSession } from 'dashboard/composables/useCallSession';
|
||||
import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
|
||||
import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
|
||||
import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
|
||||
const RINGTONE_URL = '/audio/dashboard/bell.mp3';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
@@ -56,11 +58,21 @@ const getCallInfo = call => {
|
||||
caller?.name ||
|
||||
caller?.phone ||
|
||||
'Unknown caller',
|
||||
phoneNumber: sender?.phone_number || caller?.phone || '',
|
||||
inboxName: inbox?.name || 'Customer support',
|
||||
avatar: sender?.avatar || sender?.thumbnail || caller?.avatar,
|
||||
};
|
||||
};
|
||||
|
||||
const goToConversation = call => {
|
||||
const conversationId = call?.conversationId;
|
||||
const accountId = route.params.accountId;
|
||||
if (!conversationId || !accountId) return;
|
||||
router.push({
|
||||
path: frontendURL(conversationUrl({ accountId, id: conversationId })),
|
||||
});
|
||||
};
|
||||
|
||||
const handleEndCall = async () => {
|
||||
const call = activeCall.value;
|
||||
if (!call) return;
|
||||
@@ -152,42 +164,67 @@ onBeforeUnmount(stopRingtone);
|
||||
<template>
|
||||
<div
|
||||
v-if="incomingCalls.length || hasActiveCall"
|
||||
class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-72"
|
||||
class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-80"
|
||||
>
|
||||
<!-- Incoming Calls (shown above active call) -->
|
||||
<div
|
||||
v-for="call in hasActiveCall ? incomingCalls : []"
|
||||
:key="call.callSid"
|
||||
class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
|
||||
class="flex flex-col gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
|
||||
>
|
||||
<div class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex">
|
||||
<Avatar
|
||||
:src="getCallInfo(call).avatar"
|
||||
:name="getCallInfo(call).contactName"
|
||||
:size="40"
|
||||
rounded-full
|
||||
/>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex"
|
||||
>
|
||||
<Avatar
|
||||
:src="getCallInfo(call).avatar"
|
||||
:name="getCallInfo(call).contactName"
|
||||
:size="40"
|
||||
rounded-full
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-n-slate-12 truncate mb-0">
|
||||
{{ getCallInfo(call).contactName }}
|
||||
</p>
|
||||
<p
|
||||
v-if="getCallInfo(call).phoneNumber"
|
||||
class="text-xs text-n-slate-11 truncate mb-0"
|
||||
>
|
||||
{{ getCallInfo(call).phoneNumber }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-n-slate-12 truncate mb-0">
|
||||
{{ getCallInfo(call).contactName }}
|
||||
</p>
|
||||
<p class="text-xs text-n-slate-11 truncate">
|
||||
{{ getCallInfo(call).inboxName }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 gap-2">
|
||||
<button
|
||||
v-if="call.conversationId"
|
||||
class="flex items-center gap-2 px-3 py-2 bg-n-alpha-2 hover:bg-n-alpha-3 rounded-lg transition-colors"
|
||||
@click="goToConversation(call)"
|
||||
>
|
||||
<i class="text-base text-n-slate-11 i-ph-chat-circle-text-bold" />
|
||||
<span class="text-xs text-n-slate-12">
|
||||
{{ $t('CONVERSATION.VOICE_WIDGET.VIEW_CHAT_HISTORY') }}
|
||||
</span>
|
||||
<span class="ml-auto text-xs text-n-slate-11">
|
||||
#{{ call.conversationId }}
|
||||
</span>
|
||||
<i class="text-xs text-n-slate-11 i-ph-caret-right-bold" />
|
||||
</button>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<button
|
||||
class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
|
||||
v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')"
|
||||
class="flex justify-center items-center w-10 h-10 bg-n-slate-3 hover:bg-n-slate-4 rounded-full transition-colors"
|
||||
@click="dismissCall(call.callSid)"
|
||||
>
|
||||
<i class="text-lg text-white i-ph-phone-x-bold" />
|
||||
<i class="text-lg text-n-slate-12 i-ph-phone-x-bold" />
|
||||
</button>
|
||||
<button
|
||||
class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
|
||||
class="flex justify-center items-center gap-2 px-4 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
|
||||
@click="handleJoinCall(call)"
|
||||
>
|
||||
<i class="text-lg text-white i-ph-phone-bold" />
|
||||
<i class="text-base text-white i-ph-phone-bold" />
|
||||
<span class="text-sm font-medium text-white">
|
||||
{{ $t('CONVERSATION.VOICE_WIDGET.JOIN_CALL') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -195,27 +232,38 @@ onBeforeUnmount(stopRingtone);
|
||||
<!-- Main Call Widget -->
|
||||
<div
|
||||
v-if="hasActiveCall || incomingCalls.length"
|
||||
class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
|
||||
class="flex flex-col gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
|
||||
>
|
||||
<div
|
||||
class="ring-2 ring-n-teal-9 rounded-full inline-flex"
|
||||
:class="{ 'animate-pulse': !hasActiveCall }"
|
||||
>
|
||||
<Avatar
|
||||
:src="getCallInfo(activeCall || incomingCalls[0]).avatar"
|
||||
:name="getCallInfo(activeCall || incomingCalls[0]).contactName"
|
||||
:size="40"
|
||||
rounded-full
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-n-slate-12 truncate mb-0">
|
||||
{{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
|
||||
</p>
|
||||
<p v-if="hasActiveCall" class="font-mono text-sm text-n-teal-9">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="ring-2 ring-n-teal-9 rounded-full inline-flex"
|
||||
:class="{ 'animate-pulse': !hasActiveCall }"
|
||||
>
|
||||
<Avatar
|
||||
:src="getCallInfo(activeCall || incomingCalls[0]).avatar"
|
||||
:name="getCallInfo(activeCall || incomingCalls[0]).contactName"
|
||||
:size="40"
|
||||
rounded-full
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-n-slate-12 truncate mb-0">
|
||||
{{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
|
||||
</p>
|
||||
<p
|
||||
v-if="getCallInfo(activeCall || incomingCalls[0]).phoneNumber"
|
||||
class="text-xs text-n-slate-11 truncate mb-0"
|
||||
>
|
||||
{{ getCallInfo(activeCall || incomingCalls[0]).phoneNumber }}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
v-if="hasActiveCall"
|
||||
class="font-mono text-sm text-n-slate-12 shrink-0"
|
||||
>
|
||||
{{ formattedCallDuration }}
|
||||
</p>
|
||||
<p v-else class="text-xs text-n-slate-11">
|
||||
<p v-else class="text-xs text-n-slate-11 shrink-0">
|
||||
{{
|
||||
incomingCalls[0]?.callDirection === 'outbound'
|
||||
? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
|
||||
@@ -223,50 +271,76 @@ onBeforeUnmount(stopRingtone);
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 gap-2">
|
||||
<button
|
||||
v-if="hasActiveCall && isWhatsappActive"
|
||||
v-tooltip.top="
|
||||
isMuted
|
||||
? $t('CONVERSATION.VOICE_WIDGET.UNMUTE')
|
||||
: $t('CONVERSATION.VOICE_WIDGET.MUTE')
|
||||
"
|
||||
class="flex justify-center items-center w-10 h-10 rounded-full transition-colors"
|
||||
:class="
|
||||
isMuted
|
||||
? 'bg-n-amber-9 hover:bg-n-amber-10'
|
||||
: 'bg-n-slate-3 hover:bg-n-slate-4'
|
||||
"
|
||||
@click="toggleMute"
|
||||
>
|
||||
<i
|
||||
class="text-lg"
|
||||
|
||||
<button
|
||||
v-if="(activeCall || incomingCalls[0])?.conversationId"
|
||||
class="flex items-center gap-2 px-3 py-2 bg-n-alpha-2 hover:bg-n-alpha-3 rounded-lg transition-colors"
|
||||
@click="goToConversation(activeCall || incomingCalls[0])"
|
||||
>
|
||||
<i class="text-base text-n-slate-11 i-ph-chat-circle-text-bold" />
|
||||
<span class="text-xs text-n-slate-12">
|
||||
{{ $t('CONVERSATION.VOICE_WIDGET.VIEW_CHAT_HISTORY') }}
|
||||
</span>
|
||||
<span class="ml-auto text-xs text-n-slate-11">
|
||||
#{{ (activeCall || incomingCalls[0])?.conversationId }}
|
||||
</span>
|
||||
<i class="text-xs text-n-slate-11 i-ph-caret-right-bold" />
|
||||
</button>
|
||||
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-if="hasActiveCall && isWhatsappActive"
|
||||
v-tooltip.top="
|
||||
isMuted
|
||||
? $t('CONVERSATION.VOICE_WIDGET.UNMUTE')
|
||||
: $t('CONVERSATION.VOICE_WIDGET.MUTE')
|
||||
"
|
||||
class="flex justify-center items-center w-10 h-10 rounded-full transition-colors"
|
||||
:class="
|
||||
isMuted
|
||||
? 'text-white i-ph-microphone-slash-bold'
|
||||
: 'text-n-slate-12 i-ph-microphone-bold'
|
||||
? 'bg-n-amber-9 hover:bg-n-amber-10'
|
||||
: 'bg-n-slate-3 hover:bg-n-slate-4'
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
|
||||
@click="
|
||||
hasActiveCall
|
||||
? handleEndCall()
|
||||
: rejectIncomingCall(incomingCalls[0]?.callSid)
|
||||
"
|
||||
>
|
||||
<i class="text-lg text-white i-ph-phone-x-bold" />
|
||||
</button>
|
||||
<button
|
||||
v-if="
|
||||
!hasActiveCall && incomingCalls[0]?.callDirection !== 'outbound'
|
||||
"
|
||||
class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
|
||||
@click="handleJoinCall(incomingCalls[0])"
|
||||
>
|
||||
<i class="text-lg text-white i-ph-phone-bold" />
|
||||
</button>
|
||||
@click="toggleMute"
|
||||
>
|
||||
<i
|
||||
class="text-lg"
|
||||
:class="
|
||||
isMuted
|
||||
? 'text-white i-ph-microphone-slash-bold'
|
||||
: 'text-n-slate-12 i-ph-microphone-bold'
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
v-if="
|
||||
!hasActiveCall && incomingCalls[0]?.callDirection !== 'outbound'
|
||||
"
|
||||
class="flex justify-center items-center gap-2 px-4 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
|
||||
@click="handleJoinCall(incomingCalls[0])"
|
||||
>
|
||||
<i class="text-base text-white i-ph-phone-bold" />
|
||||
<span class="text-sm font-medium text-white">
|
||||
{{ $t('CONVERSATION.VOICE_WIDGET.JOIN_CALL') }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex justify-center items-center gap-2 px-4 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
|
||||
@click="
|
||||
hasActiveCall
|
||||
? handleEndCall()
|
||||
: rejectIncomingCall(incomingCalls[0]?.callSid)
|
||||
"
|
||||
>
|
||||
<i class="text-base text-white i-ph-phone-x-bold" />
|
||||
<span class="text-sm font-medium text-white">
|
||||
{{ $t('CONVERSATION.VOICE_WIDGET.END_CALL') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user