fix(voice): reuse open conversation for inbound calls instead of always creating new

fix(voice): re-check call state under lock before forcing agent_rejected
fix(voice): require embedded-signup cloud inbox to toggle WhatsApp calling
2026-05-20 17:02:22 +05:30 · 2026-05-20 16:41:48 +05:30 · 2026-05-20 16:39:49 +05:30 · 2026-05-20 16:30:31 +05:30 · 2026-05-20 16:30:29 +05:30 · 2026-05-20 16:22:38 +05:30
44 changed files with 2199 additions and 297 deletions
@@ -0,0 +1,45 @@
+/* global axios */
+import ApiClient from '../../ApiClient';
+
+class WhatsappCallsAPI extends ApiClient {
+  constructor() {
+    super('whatsapp_calls', { accountScoped: true });
+  }
+
+  show(callId) {
+    return axios.get(`${this.url}/${callId}`).then(r => r.data);
+  }
+
+  initiate(conversationId, sdpOffer) {
+    return axios
+      .post(`${this.url}/initiate`, {
+        conversation_id: conversationId,
+        sdp_offer: sdpOffer,
+      })
+      .then(r => r.data);
+  }
+
+  accept(callId, sdpAnswer) {
+    return axios
+      .post(`${this.url}/${callId}/accept`, { sdp_answer: sdpAnswer })
+      .then(r => r.data);
+  }
+
+  reject(callId) {
+    return axios.post(`${this.url}/${callId}/reject`).then(r => r.data);
+  }
+
+  terminate(callId) {
+    return axios.post(`${this.url}/${callId}/terminate`).then(r => r.data);
+  }
+
+  uploadRecording(callId, blob, filename = 'call-recording.webm') {
+    const formData = new FormData();
+    formData.append('recording', blob, filename);
+    return axios
+      .post(`${this.url}/${callId}/upload_recording`, formData)
+      .then(r => r.data);
+  }
+}
+
+export default new WhatsappCallsAPI();
@@ -35,8 +35,9 @@ class ContactAPI extends ApiClient {
    return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
  }

-  getConversations(contactId) {
-    return axios.get(`${this.url}/${contactId}/conversations`);
+  getConversations(contactId, { inboxId } = {}) {
+    const params = inboxId ? { inbox_id: inboxId } : {};
+    return axios.get(`${this.url}/${contactId}/conversations`, { params });
  }

  getContactableInboxes(contactId) {
@@ -47,9 +48,10 @@ class ContactAPI extends ApiClient {
    return axios.get(`${this.url}/${contactId}/labels`);
  }

-  initiateCall(contactId, inboxId) {
+  initiateCall(contactId, inboxId, conversationId = null) {
    return axios.post(`${this.url}/${contactId}/call`, {
      inbox_id: inboxId,
+      conversation_id: conversationId,
    });
  }

@@ -52,6 +52,14 @@ class Inboxes extends CacheEnabledApiClient {
  resetSecret(inboxId) {
    return axios.post(`${this.url}/${inboxId}/reset_secret`);
  }
+
+  enableWhatsappCalling(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/enable_whatsapp_calling`);
+  }
+
+  disableWhatsappCalling(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
+  }
 }

 export default new Inboxes();
@@ -41,7 +41,8 @@ describe('#ContactsAPI', () => {
    it('#getConversations', () => {
      contactAPI.getConversations(1);
      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/contacts/1/conversations'
+        '/api/v1/contacts/1/conversations',
+        { params: {} }
      );
    });

@@ -3,10 +3,16 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import {
+  isVoiceCallEnabled,
+  getVoiceCallProvider,
+  VOICE_CALL_PROVIDERS,
+} from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import ContactAPI from 'dashboard/api/contacts';

 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -14,6 +20,9 @@ import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 const props = defineProps({
  phone: { type: String, default: '' },
  contactId: { type: [String, Number], required: true },
+  // When set, the WhatsApp call continues in this conversation (matching the
+  // header button) instead of looking up the contact's most recent one.
+  conversationId: { type: [String, Number], default: null },
  label: { type: String, default: '' },
  icon: { type: [String, Object, Function], default: '' },
  size: { type: String, default: 'sm' },
@@ -38,7 +47,6 @@ const voiceInboxes = computed(() =>
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);

-// Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);

 const isInitiatingCall = computed(() => {
@@ -58,17 +66,85 @@ const navigateToConversation = conversationId => {
  }
 };

-const startCall = async inboxId => {
+const whatsappCallSession = useWhatsappCallSession();
+
+// Find the most recent open conversation for this contact in the picked inbox.
+// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
+// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
+// contacts whose latest WhatsApp conversation falls outside the 20 most recent
+// across all inboxes would be treated as having no conversation.
+const findWhatsappConversationId = async inboxId => {
+  const { data } = await ContactAPI.getConversations(props.contactId, {
+    inboxId,
+  });
+  const conversations = data?.payload || [];
+  const match = [...conversations].sort(
+    (a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0)
+  )[0];
+  return match?.id || null;
+};
+
+const startWhatsappCall = async (inboxId, conversationIdHint) => {
+  // WhatsApp /initiate is conversation-scoped, so we must hand it a
+  // conversation. Use the caller's hint when given (in-conversation flow);
+  // otherwise pick the most recent one in the inbox.
+  const conversationId =
+    conversationIdHint || (await findWhatsappConversationId(inboxId));
+  if (!conversationId) {
+    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
+    return;
+  }
+
+  const response =
+    await whatsappCallSession.initiateOutboundCall(conversationId);
+  // The composable returns { status: 'locked' } when an init is already in
+  // flight or a call is already active; treat that as a soft no-op rather than
+  // claiming success.
+  if (response?.status === 'locked') return;
+  if (!response?.id) {
+    // Permission flow returns no id — banner already handled server-side; surface to user.
+    useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+    navigateToConversation(conversationId);
+    return;
+  }
+
+  const callsStore = useCallsStore();
+  // Stay non-active until the connect cable event arrives — flipping to active
+  // here would start the duration timer before the contact picks up.
+  callsStore.addCall({
+    callSid: response.call_id,
+    callId: response.id,
+    conversationId,
+    inboxId,
+    callDirection: 'outbound',
+    provider: 'whatsapp',
+  });
+
+  useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+  navigateToConversation(conversationId);
+};
+
+const startCall = async (inboxId, conversationIdHint = null) => {
  if (isInitiatingCall.value) return;

+  const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
+  if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
+    try {
+      await startWhatsappCall(inboxId, conversationIdHint);
+    } catch (error) {
+      useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+    }
+    return;
+  }
+
  try {
    const response = await store.dispatch('contacts/initiateCall', {
      contactId: props.contactId,
      inboxId,
+      conversationId: conversationIdHint,
    });
    const { call_sid: callSid, conversation_id: conversationId } = response;

-    // Add call to store immediately so widget shows
    const callsStore = useCallsStore();
    callsStore.addCall({
      callSid,
@@ -86,6 +162,22 @@ const startCall = async inboxId => {
 };

 const onClick = async () => {
+  // In conversation context, only stay in this conversation if its inbox is
+  // itself voice-capable (works the same for Twilio and WhatsApp). For
+  // non-voice channels (email, web, …) fall back to the picker so the call
+  // goes out via a voice inbox.
+  if (props.conversationId) {
+    const conversation = store.getters.getConversationById(
+      props.conversationId
+    );
+    const conversationInbox = (inboxesList.value || []).find(
+      i => i.id === conversation?.inbox_id
+    );
+    if (conversationInbox && isVoiceCallEnabled(conversationInbox)) {
+      await startCall(conversationInbox.id, props.conversationId);
+      return;
+    }
+  }
  if (voiceInboxes.value.length > 1) {
    dialogRef.value?.open();
    return;
@@ -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';
    }

@@ -3,9 +3,12 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import { useMessageContext } from '../provider.js';
-import { VOICE_CALL_STATUS } from '../constants';
-import { useCallSession } from 'dashboard/composables/useCallSession';
+import { VOICE_CALL_STATUS, MESSAGE_TYPES } from '../constants';
+import { useCallActions } from 'dashboard/composables/useCallSession';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import { useCallsStore } from 'dashboard/stores/calls';
 import { formatDuration } from 'shared/helpers/timeHelper';
+import { useAlert } from 'dashboard/composables';

 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
@@ -17,39 +20,54 @@ const LABEL_MAP = {
 };

 const ICON_MAP = {
-  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
-  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
-  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
-};
-
-const BG_COLOR_MAP = {
-  [VOICE_CALL_STATUS.IN_PROGRESS]: 'bg-n-teal-9',
-  [VOICE_CALL_STATUS.RINGING]: 'bg-n-teal-9 animate-pulse',
-  [VOICE_CALL_STATUS.COMPLETED]: 'bg-n-slate-11',
-  [VOICE_CALL_STATUS.NO_ANSWER]: 'bg-n-ruby-9',
-  [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call-bold',
+  [VOICE_CALL_STATUS.COMPLETED]: 'i-ph-phone-bold',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x-bold',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x-bold',
 };

 const { t } = useI18n();
 const store = useStore();
-const { call, conversationId, currentUserId, inboxId } = useMessageContext();
+const {
+  call,
+  attachments,
+  contentAttributes,
+  conversationId,
+  currentUserId,
+  inboxId,
+  sender,
+  messageType,
+} = useMessageContext();
 const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
-  useCallSession();
+  useCallActions();
+const whatsappCallSession = useWhatsappCallSession();

 const status = computed(() => call.value?.status);
-const isOutbound = computed(() => call.value?.direction === 'outgoing');
+// Server-side call records use `outgoing`/`incoming`, while the Pinia store
+// and a few API hops normalise to `outbound`/`inbound`. Accept either so the
+// bubble label matches the message orientation no matter the source.
+const isOutbound = computed(() => {
+  const dir = call.value?.direction;
+  if (dir === 'outgoing' || dir === 'outbound') return true;
+  if (dir === 'incoming' || dir === 'inbound') return false;
+  // Fall back to the message orientation: agent-authored messages sit on the
+  // right (outbound) and contact-authored ones on the left.
+  return messageType.value === MESSAGE_TYPES.OUTGOING;
+});
+const isWhatsapp = computed(() => call.value?.provider === 'whatsapp');
 const isFailed = computed(() =>
  [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
+const isMissedInbound = computed(() => isFailed.value && !isOutbound.value);
+const endReason = computed(() => call.value?.endReason);
+const wasDeclinedByAgent = computed(
+  () => isMissedInbound.value && endReason.value === 'agent_rejected'
+);
 const acceptedByAgentId = computed(() => call.value?.acceptedByAgentId);
 const didCurrentUserAnswer = computed(
  () =>
    !!acceptedByAgentId.value && acceptedByAgentId.value === currentUserId.value
 );
-// Pickup auto-assigns the conversation, so the assignee is a safe display proxy
-// for the answerer when the Call payload lacks accepted_by_agent_id (e.g.,
-// Twilio's call-status webhook flipped the call to in-progress before the
-// participant-join webhook claimed it).
 const conversationAssignee = computed(() => {
  const conversation = store.getters.getConversationById?.(
    conversationId?.value
@@ -66,6 +84,19 @@ const displayAgentName = computed(() => {
  return conversationAssignee.value?.name || null;
 });

+const audioAttachment = computed(() =>
+  (attachments?.value || []).find(a => a.fileType === 'audio')
+);
+
+const durationSeconds = computed(() => {
+  const fromCall = call.value?.durationSeconds || call.value?.duration_seconds;
+  if (fromCall != null) return fromCall;
+  const data = contentAttributes?.value?.data;
+  return data?.durationSeconds || data?.duration_seconds;
+});
+
+const formattedDuration = computed(() => formatDuration(durationSeconds.value));
+
 const labelKey = computed(() => {
  if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
  if (status.value === VOICE_CALL_STATUS.RINGING) {
@@ -73,24 +104,25 @@ const labelKey = computed(() => {
      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
  }
-  return isFailed.value
-    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
-    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  if (isFailed.value) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_LABEL'
+      : 'CONVERSATION.VOICE_CALL.MISSED_CALL';
+  }
+  return 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });

-const formattedDuration = computed(() =>
-  formatDuration(call.value?.durationSeconds)
-);
-
 const subtext = computed(() => {
  if (status.value === VOICE_CALL_STATUS.RINGING) {
-    return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+    return isOutbound.value
+      ? t('CONVERSATION.VOICE_CALL.CALLING')
+      : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
  }
  if (status.value === VOICE_CALL_STATUS.COMPLETED) {
    return formattedDuration.value;
  }
  if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    if (isOutbound.value) return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    if (isOutbound.value) return null;
    if (didCurrentUserAnswer.value) {
      return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
    }
@@ -99,34 +131,51 @@ const subtext = computed(() => {
        agentName: displayAgentName.value,
      });
    }
-    return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    return null;
  }
-  return isFailed.value
-    ? t('CONVERSATION.VOICE_CALL.NO_ANSWER')
-    : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+  if (isFailed.value) {
+    if (isOutbound.value) {
+      return t('CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_SUBTEXT');
+    }
+    if (wasDeclinedByAgent.value && displayAgentName.value) {
+      return t('CONVERSATION.VOICE_CALL.MISSED_CALL_DECLINED_BY', {
+        agentName: displayAgentName.value,
+      });
+    }
+    return t('CONVERSATION.VOICE_CALL.MISSED_CALL_INBOUND_SUBTEXT');
+  }
+  return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
 });

 const iconName = computed(() => {
  if (ICON_MAP[status.value]) return ICON_MAP[status.value];
-  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+  return isOutbound.value
+    ? 'i-ph-phone-outgoing-bold'
+    : 'i-ph-phone-incoming-bold';
 });

-const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
+// Subtle icon container — matches the design's tonal swatch over the bubble bg.
+// Status drives the accent: teal for live, ruby for missed, neutral otherwise.
+const iconContainerClass = computed(() => {
+  if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
+    return 'bg-n-teal-3 text-n-teal-11';
+  }
+  if (status.value === VOICE_CALL_STATUS.RINGING) {
+    return 'bg-n-teal-3 text-n-teal-11';
+  }
+  if (isMissedInbound.value) {
+    return 'bg-n-alpha-2 text-n-ruby-9';
+  }
+  return 'bg-n-alpha-2 text-n-slate-12';
+});

 const callSid = computed(() => call.value?.providerCallId);

-// Show "Join call" when the call is still ringing, no agent has claimed it,
-// and the conversation is unassigned or assigned to the current user. Mirrors
-// the eligibility used by FloatingCallWidget so the bubble can act as a
-// recovery affordance after a refresh or missed widget.
 const canJoinCall = computed(() => {
  if (status.value !== VOICE_CALL_STATUS.RINGING) return false;
  if (isOutbound.value) return false;
  if (acceptedByAgentId.value) return false;
  if (!callSid.value || !inboxId.value || !conversationId.value) return false;
-  // Suppress the button once this call is the local active session — the
-  // message status webhook may lag behind, so we can't rely on `status` alone
-  // to hide it after a successful join from this client.
  if (hasActiveCall.value && activeCall.value?.callSid === callSid.value)
    return false;
  const assignee = conversationAssignee.value;
@@ -135,6 +184,7 @@ const canJoinCall = computed(() => {
 });

 const recordingAttachment = computed(() => {
+  if (audioAttachment.value) return audioAttachment.value;
  const url = call.value?.recordingUrl;
  if (!url) return null;
  return {
@@ -162,48 +212,102 @@ const handleJoinCall = async () => {
    callSid: callSid.value,
  });
 };
+
+const canCallBack = computed(
+  () => isMissedInbound.value && !!inboxId.value && !!conversationId.value
+);
+
+const handleCallBack = async () => {
+  if (!canCallBack.value) return;
+  try {
+    if (isWhatsapp.value) {
+      const response = await whatsappCallSession.initiateOutboundCall(
+        conversationId.value
+      );
+      if (response?.status === 'locked') return;
+      if (response?.call_id) {
+        const callsStore = useCallsStore();
+        callsStore.addCall({
+          callSid: response.call_id,
+          callId: response.id,
+          conversationId: conversationId.value,
+          inboxId: inboxId.value,
+          callDirection: 'outbound',
+          provider: 'whatsapp',
+        });
+      }
+      return;
+    }
+    await store.dispatch('contacts/initiateCall', {
+      contactId: sender.value?.id,
+      inboxId: inboxId.value,
+      conversationId: conversationId.value,
+    });
+  } catch (error) {
+    useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+  }
+};
 </script>

 <template>
-  <BaseBubble class="p-0 border-none" hide-meta>
-    <div class="flex overflow-hidden flex-col w-full max-w-sm">
-      <div class="flex gap-3 items-center p-3 w-full">
+  <BaseBubble class="!p-3 !max-w-md min-w-[240px]" hide-meta>
+    <div class="flex flex-col gap-3 w-full">
+      <!-- Header row: icon + title + duration/subtext -->
+      <div class="flex gap-2.5 items-start">
        <div
-          class="flex justify-center items-center rounded-full size-10 shrink-0"
-          :class="bgColor"
+          class="flex justify-center items-center rounded-xl size-11 shrink-0"
+          :class="iconContainerClass"
        >
-          <Icon
-            class="size-5"
-            :icon="iconName"
-            :class="{
-              'text-n-slate-1': status === VOICE_CALL_STATUS.COMPLETED,
-              'text-white': status !== VOICE_CALL_STATUS.COMPLETED,
-            }"
-          />
+          <Icon class="size-4" :icon="iconName" />
        </div>
-
-        <div class="flex overflow-hidden flex-col flex-grow">
-          <span class="text-sm font-medium truncate text-n-slate-12">
+        <div class="flex flex-col flex-1 min-w-0 self-center">
+          <span
+            class="font-display text-sm font-medium leading-tight truncate tracking-tight"
+          >
            {{ $t(labelKey) }}
          </span>
-          <span v-if="subtext" class="text-xs text-n-slate-11">
+          <span
+            v-if="subtext"
+            class="text-sm leading-tight truncate tracking-tight opacity-75"
+          >
            {{ subtext }}
          </span>
-          <button
-            v-if="canJoinCall"
-            type="button"
-            class="p-0 mt-1 text-xs font-medium text-start text-n-teal-10 hover:text-n-teal-11 disabled:opacity-50"
-            :disabled="isJoining"
-            @click="handleJoinCall"
-          >
-            {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
-          </button>
        </div>
      </div>

-      <div v-if="recordingAttachment" class="px-3 pb-3">
-        <AudioChip :attachment="recordingAttachment" />
-      </div>
+      <!-- Audio player (when there's a recording) -->
+      <AudioChip
+        v-if="recordingAttachment"
+        :attachment="recordingAttachment"
+        show-transcribed-text
+      />
+
+      <!-- Call back button (missed inbound) -->
+      <button
+        v-if="canCallBack"
+        type="button"
+        class="flex justify-center items-center gap-2 px-3 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+        @click="handleCallBack"
+      >
+        <i class="text-base text-white i-ph-phone-bold" />
+        <span class="text-sm font-medium text-white tracking-tight">
+          {{ $t('CONVERSATION.VOICE_CALL.CALL_BACK') }}
+        </span>
+      </button>
+
+      <!-- Join call button (ringing inbound) -->
+      <button
+        v-if="canJoinCall"
+        type="button"
+        class="flex justify-center items-center gap-2 px-3 h-10 bg-n-teal-9 hover:bg-n-teal-10 disabled:opacity-50 rounded-full transition-colors"
+        :disabled="isJoining"
+        @click="handleJoinCall"
+      >
+        <i class="text-base text-white i-ph-phone-bold" />
+        <span class="text-sm font-medium text-white tracking-tight">
+          {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
+        </span>
+      </button>
    </div>
  </BaseBubble>
 </template>
@@ -41,8 +41,33 @@ const playbackSpeed = ref(1);

 const { uid } = getCurrentInstance();

+// MediaRecorder-produced WebM/Opus blobs lack a Duration header → <audio>.duration
+// resolves to Infinity until we seek past the end, which forces the engine to
+// scan the file and compute the real length. Safe no-op for files with a real
+// duration already (mp3/m4a/etc).
+const resolveStreamingDuration = () => {
+  const el = audioPlayer.value;
+  if (!el) return;
+  const onTimeUpdate = () => {
+    el.removeEventListener('timeupdate', onTimeUpdate);
+    el.currentTime = 0;
+    duration.value = el.duration;
+  };
+  el.addEventListener('timeupdate', onTimeUpdate);
+  try {
+    el.currentTime = Number.MAX_SAFE_INTEGER;
+  } catch {
+    el.removeEventListener('timeupdate', onTimeUpdate);
+  }
+};
+
 const onLoadedMetadata = () => {
-  duration.value = audioPlayer.value?.duration;
+  const d = audioPlayer.value?.duration;
+  if (!Number.isFinite(d)) {
+    resolveStreamingDuration();
+    return;
+  }
+  duration.value = d;
 };

 const playbackSpeedLabel = computed(() => {
@@ -53,7 +78,8 @@ const playbackSpeedLabel = computed(() => {
 // When the onLoadMetadata is called, so we need to set the duration
 // value when the component is mounted
 onMounted(() => {
-  duration.value = audioPlayer.value?.duration;
+  const d = audioPlayer.value?.duration;
+  if (Number.isFinite(d)) duration.value = d;
  audioPlayer.value.playbackRate = playbackSpeed.value;
 });

@@ -24,6 +24,10 @@ defineProps({
    type: Boolean,
    default: false,
  },
+  hasVoiceBadge: {
+    type: Boolean,
+    default: false,
+  },
 });

 const { t } = useI18n();
@@ -38,10 +42,18 @@ const { t } = useI18n();
      'cursor-not-allowed disabled:opacity-80': isComingSoon,
    }"
  >
-    <div
-      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
-    >
-      <Icon :icon="icon" class="text-n-slate-10 size-6" />
+    <div class="relative">
+      <div
+        class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
+      >
+        <Icon :icon="icon" class="text-n-slate-10 size-6" />
+      </div>
+      <div
+        v-if="hasVoiceBadge"
+        class="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-n-alpha-2 ring-2 ring-n-solid-1"
+      >
+        <Icon icon="i-lucide-audio-lines" class="text-n-slate-10 size-2.5" />
+      </div>
    </div>

    <div class="flex flex-col items-start gap-1.5">
@@ -56,6 +56,14 @@ const isActive = computed(() => {
    return props.enabledFeatures.channel_voice;
  }

+  if (key === 'whatsapp_call') {
+    return (
+      props.enabledFeatures.channel_voice &&
+      !!window.chatwootConfig?.whatsappAppId &&
+      window.chatwootConfig.whatsappAppId !== 'none'
+    );
+  }
+
  return [
    'website',
    'twilio',
@@ -78,7 +86,14 @@ const isComingSoon = computed(() => {
 });

 const isBeta = computed(() => {
-  return ['tiktok', 'voice'].includes(props.channel.key);
+  return ['tiktok', 'voice', 'whatsapp_call'].includes(props.channel.key);
+});
+
+const hasVoiceBadge = computed(() => {
+  return (
+    ['voice', 'whatsapp_call'].includes(props.channel.key) &&
+    !!props.enabledFeatures.channel_voice
+  );
 });

 const onItemClick = () => {
@@ -95,6 +110,7 @@ const onItemClick = () => {
    :icon="channel.icon"
    :is-coming-soon="isComingSoon"
    :is-beta="isBeta"
+    :has-voice-badge="hasVoiceBadge"
    :disabled="!isActive"
    @click="onItemClick"
  />
@@ -1,11 +1,17 @@
 <script setup>
-import { watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+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';
+import CallCard from 'dashboard/components/widgets/call/CallCard.vue';
+import countriesList from 'shared/constants/countries.js';

+const RINGTONE_URL = '/audio/dashboard/bell.mp3';
+
+const route = useRoute();
 const router = useRouter();
 const store = useStore();

@@ -21,19 +27,103 @@ const {
  formattedCallDuration,
 } = useCallSession();

+// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
+// don't expose a mic track on the browser side.
+const isMuted = ref(false);
+const isWhatsappActive = computed(
+  () => activeCall.value?.provider === 'whatsapp'
+);
+
+const primaryIncomingCall = computed(() =>
+  hasActiveCall.value ? null : incomingCalls.value[0] || null
+);
+
+const stackedIncomingCalls = computed(() =>
+  hasActiveCall.value ? incomingCalls.value : incomingCalls.value.slice(1)
+);
+
+const mainCardState = computed(() => {
+  if (hasActiveCall.value) return 'ongoing';
+  const direction = primaryIncomingCall.value?.callDirection;
+  return direction === 'outbound' ? 'outgoing' : 'incoming';
+});
+
+const toggleMute = () => {
+  isMuted.value = !isMuted.value;
+  setWhatsappCallMuted(isMuted.value);
+};
+
+watch(hasActiveCall, active => {
+  if (!active) isMuted.value = false;
+});
+
+// Convert ISO 3166-1 alpha-2 country code (e.g. "US") to its regional indicator
+// flag emoji. Returns empty string if the code is missing or malformed.
+const countryCodeToFlag = code => {
+  if (!code || code.length !== 2) return '';
+  const base = 0x1f1e6;
+  const offset = 'A'.charCodeAt(0);
+  return String.fromCodePoint(
+    ...code
+      .toUpperCase()
+      .split('')
+      .map(c => base + (c.charCodeAt(0) - offset))
+  );
+};
+
 const getCallInfo = call => {
  const conversation = store.getters.getConversationById(call?.conversationId);
-  const inbox = store.getters['inboxes/getInbox'](conversation?.inbox_id);
+  // Look up inbox from the call's own inboxId — the conversation can drop out
+  // of the Vuex store when the user navigates between inbox views, so going
+  // through `conversation.inbox_id` would lose the inbox name (and fall back
+  // to the literal "Customer support" string).
+  const inbox = store.getters['inboxes/getInbox'](call?.inboxId);
  const sender = conversation?.meta?.sender;
+  // `caller` is the snapshot captured when the call first landed (from the
+  // message sender or the WhatsApp cable payload). It outlives the
+  // conversation being in the store, so prefer it for display.
+  const caller = call?.caller;
+  const additional =
+    sender?.additional_attributes || caller?.additionalAttributes || {};
+  const city = additional.city || '';
+  const countryCode = additional.country_code || '';
+  const country =
+    additional.country ||
+    countriesList.find(c => c.id === countryCode.toUpperCase())?.name ||
+    '';
+  // Prefer the richest available location string ("City, Country"); fall back to
+  // whichever single field is present; finally fall back to the inbox name so
+  // there's always something to show.
+  const locationParts = [city, country].filter(Boolean);
+  const location =
+    locationParts.join(', ') || inbox?.name || 'Customer support';
  return {
    conversation,
    inbox,
-    contactName: sender?.name || sender?.phone_number || 'Unknown caller',
+    contactName:
+      caller?.name ||
+      sender?.name ||
+      caller?.phone ||
+      sender?.phone_number ||
+      'Unknown caller',
+    phoneNumber: caller?.phone || sender?.phone_number || '',
    inboxName: inbox?.name || 'Customer support',
-    avatar: sender?.avatar || sender?.thumbnail,
+    location,
+    countryFlag: countryCodeToFlag(countryCode),
+    hasLocation: locationParts.length > 0,
+    avatar: caller?.avatar || sender?.avatar || sender?.thumbnail,
  };
 };

+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;
@@ -49,21 +139,22 @@ const handleEndCall = async () => {
 };

 const handleJoinCall = async call => {
+  if (!call || isJoining.value) return;
  const { conversation } = getCallInfo(call);
-  if (!call || !conversation || isJoining.value) return;

-  // End current active call before joining new one
  if (hasActiveCall.value) {
    await handleEndCall();
  }

+  // The conversation may not be hydrated yet (post-refresh seeding path);
+  // call.inboxId already carries what joinCall needs.
  const result = await joinCall({
    conversationId: call.conversationId,
-    inboxId: conversation.inbox_id,
+    inboxId: call.inboxId || conversation?.inbox_id,
    callSid: call.callSid,
  });

-  if (result) {
+  if (result && conversation) {
    router.push({
      name: 'inbox_conversation',
      params: { conversation_id: call.conversationId },
@@ -71,12 +162,15 @@ const handleJoinCall = async call => {
  }
 };

-// Auto-join outbound calls when window is visible
+// Auto-join outbound calls when window is visible. WhatsApp outbound has no
+// separate join step (the offer was sent at initiate time and the answer is
+// applied directly by the cable handler), so this only covers Twilio.
 watch(
  () => incomingCalls.value[0],
  call => {
    if (
      call?.callDirection === 'outbound' &&
+      call?.provider !== 'whatsapp' &&
      !hasActiveCall.value &&
      WindowVisibilityHelper.isWindowVisible()
    ) {
@@ -85,101 +179,73 @@ watch(
  },
  { immediate: true }
 );
+
+// Loop the ringtone while an inbound call is unanswered. Stop the moment any
+// call is active (we joined), every inbound call cleared, or the widget tears
+// down. The watcher only fires on the boolean transitioning, so additional
+// ringing calls arriving while one is already ringing don't restart the audio
+// — they silently stack into the UI without producing a fresh ring.
+// Browser autoplay may reject the first play() if the tab has no prior
+// user gesture; that's fine — the visual widget still surfaces the call.
+const ringtone = new Audio(RINGTONE_URL);
+ringtone.loop = true;
+ringtone.volume = 1;
+
+const stopRingtone = () => {
+  ringtone.pause();
+  ringtone.currentTime = 0;
+};
+
+const ringingInbound = computed(() =>
+  incomingCalls.value.some(call => call.callDirection !== 'outbound')
+);
+
+watch(
+  () => ringingInbound.value && !hasActiveCall.value,
+  shouldRing => {
+    if (shouldRing) {
+      ringtone.play().catch(() => {});
+    } else {
+      stopRingtone();
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(stopRingtone);
 </script>

 <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-3 w-[400px]"
  >
-    <!-- Incoming Calls (shown above active call) -->
-    <div
-      v-for="call in hasActiveCall ? incomingCalls : []"
+    <!-- Stacked incoming calls (shown above the primary card) -->
+    <CallCard
+      v-for="call in stackedIncomingCalls"
      :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"
-    >
-      <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 class="text-xs text-n-slate-11 truncate">
-          {{ getCallInfo(call).inboxName }}
-        </p>
-      </div>
-      <div class="flex shrink-0 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"
-          @click="dismissCall(call.callSid)"
-        >
-          <i class="text-lg text-white 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"
-          @click="handleJoinCall(call)"
-        >
-          <i class="text-lg text-white i-ph-phone-bold" />
-        </button>
-      </div>
-    </div>
+      :call="call"
+      state="incoming"
+      :call-info="getCallInfo(call)"
+      @accept="handleJoinCall(call)"
+      @reject="dismissCall(call.callSid)"
+      @go-to-conversation="goToConversation(call)"
+    />

    <!-- 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"
-    >
-      <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">
-          {{ formattedCallDuration }}
-        </p>
-        <p v-else class="text-xs text-n-slate-11">
-          {{
-            incomingCalls[0]?.callDirection === 'outbound'
-              ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
-              : $t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL')
-          }}
-        </p>
-      </div>
-      <div class="flex shrink-0 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"
-          @click="
-            hasActiveCall
-              ? handleEndCall()
-              : rejectIncomingCall(incomingCalls[0]?.callSid)
-          "
-        >
-          <i class="text-lg text-white i-ph-phone-x-bold" />
-        </button>
-        <button
-          v-if="!hasActiveCall"
-          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>
-      </div>
-    </div>
+    <CallCard
+      v-if="hasActiveCall || primaryIncomingCall"
+      :call="activeCall || primaryIncomingCall"
+      :state="mainCardState"
+      :call-info="getCallInfo(activeCall || primaryIncomingCall)"
+      :duration="hasActiveCall ? formattedCallDuration : ''"
+      :is-muted="isMuted"
+      :show-mute="hasActiveCall && isWhatsappActive"
+      @accept="handleJoinCall(primaryIncomingCall)"
+      @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
+      @end="handleEndCall"
+      @toggle-mute="toggleMute"
+      @go-to-conversation="goToConversation(activeCall || primaryIncomingCall)"
+    />
  </div>
 </template>
@@ -0,0 +1,208 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const props = defineProps({
+  call: {
+    type: Object,
+    required: true,
+  },
+  callInfo: {
+    type: Object,
+    required: true,
+  },
+  // 'incoming' | 'outgoing' | 'ongoing'
+  state: {
+    type: String,
+    required: true,
+  },
+  duration: {
+    type: String,
+    default: '',
+  },
+  isMuted: {
+    type: Boolean,
+    default: false,
+  },
+  showMute: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(['accept', 'reject', 'end', 'toggleMute', 'goToConversation']);
+
+const { t } = useI18n();
+
+const isOngoing = computed(() => props.state === 'ongoing');
+const isIncoming = computed(() => props.state === 'incoming');
+const isOutgoing = computed(() => props.state === 'outgoing');
+
+const statusIcon = computed(() => {
+  if (isOngoing.value) return 'i-ph-phone-call-bold';
+  if (isOutgoing.value) return 'i-ph-phone-outgoing-bold';
+  return 'i-ph-phone-incoming-bold';
+});
+
+const statusLabel = computed(() => {
+  if (isOngoing.value) return t('CONVERSATION.VOICE_WIDGET.CALL_IN_PROGRESS');
+  if (isOutgoing.value) return t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL');
+  return t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL');
+});
+
+const channelIcon = computed(() => {
+  if (props.call?.provider === 'whatsapp') return 'i-ri-whatsapp-fill';
+  return 'i-ph-phone-bold';
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-3 pt-4 pb-4 bg-n-solid-2/95 rounded-2xl shadow-xl outline outline-1 outline-n-strong backdrop-blur-md"
+  >
+    <!-- Top section: status badge + location/inbox + duration -->
+    <div class="flex flex-col gap-3 pb-2">
+      <div class="flex items-center gap-2 px-4">
+        <!-- Ongoing: status badge on left -->
+        <div v-if="isOngoing" class="flex items-center gap-1.5 shrink-0">
+          <i class="text-sm text-n-teal-9" :class="statusIcon" />
+          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
+            {{ statusLabel }}
+          </span>
+        </div>
+
+        <!-- Caller location (city, country) or fallback to channel + inbox name -->
+        <div class="flex items-center gap-1.5 min-w-0 flex-1">
+          <span
+            v-if="callInfo.hasLocation && callInfo.countryFlag"
+            class="text-sm leading-none shrink-0"
+          >
+            {{ callInfo.countryFlag }}
+          </span>
+          <i
+            v-else-if="!isOngoing"
+            class="text-sm text-n-slate-10 shrink-0"
+            :class="channelIcon"
+          />
+          <span
+            class="text-xs font-medium text-n-slate-11 tracking-tight truncate"
+          >
+            {{ callInfo.location }}
+          </span>
+        </div>
+
+        <!-- Ongoing: duration on right -->
+        <p
+          v-if="isOngoing"
+          class="font-display text-base font-medium text-n-slate-11 shrink-0 mb-0 tabular-nums tracking-tight"
+        >
+          {{ duration }}
+        </p>
+        <!-- Incoming/Outgoing: status badge on right -->
+        <div v-else class="flex items-center gap-1.5 shrink-0">
+          <i class="text-sm text-n-teal-9" :class="statusIcon" />
+          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
+            {{ statusLabel }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Main row: avatar + name/phone + actions -->
+      <div class="flex items-end gap-3 px-4">
+        <div class="shrink-0">
+          <Avatar
+            :src="callInfo.avatar"
+            :name="callInfo.contactName"
+            :size="44"
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <p
+            class="font-display text-sm font-medium text-n-slate-12 truncate mb-0.5 tracking-tight leading-tight"
+          >
+            {{ callInfo.contactName }}
+          </p>
+          <p
+            v-if="callInfo.phoneNumber"
+            class="text-sm text-n-slate-11 truncate mb-0 tracking-tight leading-tight"
+          >
+            {{ callInfo.phoneNumber }}
+          </p>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex items-center gap-2 shrink-0">
+          <!-- Mute toggle (WhatsApp ongoing only) -->
+          <button
+            v-if="isOngoing && showMute"
+            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 text-white'
+                : 'bg-n-teal-3 hover:bg-n-teal-4 text-n-teal-11'
+            "
+            @click="$emit('toggleMute')"
+          >
+            <i
+              class="text-base"
+              :class="
+                isMuted ? 'i-ph-microphone-slash-bold' : 'i-ph-microphone-bold'
+              "
+            />
+          </button>
+
+          <!-- Accept call (incoming only) -->
+          <button
+            v-if="isIncoming"
+            v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.JOIN_CALL')"
+            class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors shadow-sm"
+            @click="$emit('accept')"
+          >
+            <i class="text-base text-white i-ph-phone-bold" />
+          </button>
+
+          <!-- Reject / end call (all states) -->
+          <button
+            v-tooltip.top="
+              isOngoing
+                ? $t('CONVERSATION.VOICE_WIDGET.END_CALL')
+                : $t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')
+            "
+            class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors shadow-sm"
+            @click="isOngoing ? $emit('end') : $emit('reject')"
+          >
+            <i class="text-base text-white i-ph-phone-x-bold rotate-[134deg]" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer: go to conversation thread -->
+    <button
+      v-if="call?.conversationId"
+      class="flex items-center justify-between gap-2 px-4 pt-3 border-t border-n-strong hover:bg-n-alpha-1 transition-colors group"
+      @click="$emit('goToConversation')"
+    >
+      <span
+        class="text-sm text-n-slate-11 tracking-tight group-hover:text-n-slate-12"
+      >
+        {{ $t('CONVERSATION.VOICE_WIDGET.GO_TO_CONVERSATION') }}
+      </span>
+      <span
+        class="flex items-center gap-1 text-n-slate-11 group-hover:text-n-slate-12"
+      >
+        <i class="text-sm i-ph-chat-circle-text-bold" />
+        <span class="text-sm tracking-tight tabular-nums">
+          #{{ call.conversationId }}
+        </span>
+        <i class="text-xs i-ph-caret-right-bold" />
+      </span>
+    </button>
+  </div>
+</template>
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Avatar from 'next/avatar/Avatar.vue';
@@ -12,9 +13,16 @@ import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { useInbox } from 'dashboard/composables/useInbox';
+import {
+  getVoiceCallProvider,
+  VOICE_CALL_PROVIDERS,
+} from 'dashboard/helper/inbox';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import { useCallsStore } from 'dashboard/stores/calls';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';

 const props = defineProps({
  chat: {
@@ -94,6 +102,97 @@ const hasMultipleInboxes = computed(

 const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);

+const callsStore = useCallsStore();
+const whatsappCallSession = useWhatsappCallSession();
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+
+const voiceCallProvider = computed(() => getVoiceCallProvider(inbox.value));
+const isVoiceCallInbox = computed(() => voiceCallProvider.value !== null);
+const isWhatsappVoiceInbox = computed(
+  () => voiceCallProvider.value === VOICE_CALL_PROVIDERS.WHATSAPP
+);
+
+const isCallButtonDisabled = computed(() => {
+  if (callsStore.hasActiveCall || callsStore.hasIncomingCall) return true;
+  if (isWhatsappVoiceInbox.value) {
+    return whatsappCallSession.isInitiating.value;
+  }
+  return contactsUiFlags.value?.isInitiatingCall || false;
+});
+
+const isCallButtonLoading = computed(() =>
+  isWhatsappVoiceInbox.value
+    ? whatsappCallSession.isInitiating.value
+    : !!contactsUiFlags.value?.isInitiatingCall
+);
+
+const callButtonTooltip = computed(() =>
+  isWhatsappVoiceInbox.value
+    ? t('CONVERSATION.HEADER.WHATSAPP_CALL')
+    : t('CONVERSATION.HEADER.VOICE_CALL')
+);
+
+const startWhatsappCall = async () => {
+  if (whatsappCallSession.isInitiating.value) return;
+  try {
+    const response = await whatsappCallSession.initiateOutboundCall(
+      currentChat.value.id
+    );
+
+    // Composable returns { status: 'locked' } when init is already in flight or
+    // a call is active; soft no-op so a parallel click doesn't trigger a banner.
+    if (response?.status === 'locked') return;
+    // Permission template path returns no call id — show banner, no widget yet.
+    if (!response?.id) {
+      const status = response?.status;
+      const messageKey =
+        status === 'permission_pending'
+          ? 'CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_PENDING'
+          : 'CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_REQUESTED';
+      useAlert(t(messageKey));
+      return;
+    }
+
+    // Stay non-active until Meta delivers the connect webhook (sdp_answer);
+    // flipping to active here would start the duration timer before pickup.
+    callsStore.addCall({
+      callSid: response.call_id,
+      callId: response.id,
+      conversationId: currentChat.value.id,
+      inboxId: inbox.value?.id,
+      callDirection: 'outbound',
+      provider: 'whatsapp',
+    });
+  } catch (error) {
+    useAlert(error?.message || t('CONVERSATION.HEADER.WHATSAPP_CALL_FAILED'));
+  }
+};
+
+const startTwilioCall = async () => {
+  if (contactsUiFlags.value?.isInitiatingCall) return;
+  try {
+    const response = await store.dispatch('contacts/initiateCall', {
+      contactId: currentContact.value.id,
+      inboxId: inbox.value?.id,
+      conversationId: currentChat.value.id,
+    });
+
+    callsStore.addCall({
+      callSid: response?.call_sid,
+      conversationId: response?.conversation_id ?? currentChat.value.id,
+      inboxId: inbox.value?.id,
+      callDirection: 'outbound',
+    });
+  } catch (error) {
+    useAlert(error?.message || t('CONVERSATION.HEADER.VOICE_CALL_FAILED'));
+  }
+};
+
+const startCall = () => {
+  if (isWhatsappVoiceInbox.value) return startWhatsappCall();
+  return startTwilioCall();
+};
+
 const copyConversationId = async () => {
  try {
    await copyTextToClipboard(String(props.chat.id));
@@ -172,6 +271,18 @@ const copyConversationId = async () => {
        :parent-width="width"
        class="hidden md:flex"
      />
+      <ButtonV4
+        v-if="isVoiceCallInbox"
+        v-tooltip.bottom="callButtonTooltip"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        icon="i-lucide-phone"
+        :is-loading="isCallButtonLoading"
+        :disabled="isCallButtonDisabled"
+        class="rounded-md hover:bg-n-alpha-2"
+        @click="startCall"
+      />
      <MoreActions :conversation-id="currentChat.id" />
    </div>
  </div>
@@ -1,62 +1,129 @@
 import { computed, ref, watch, onUnmounted, onMounted } from 'vue';
+import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import VoiceAPI from 'dashboard/api/channel/voice/voiceAPIClient';
 import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { useCallsStore } from 'dashboard/stores/calls';
 import { useAlert } from 'dashboard/composables';
+import {
+  useWhatsappCallSession,
+  sendWhatsappTerminateBeacon,
+  cleanupWhatsappSession,
+} from 'dashboard/composables/useWhatsappCallSession';
+import { handleVoiceCallCreated } from 'dashboard/helper/voice';
 import Timer from 'dashboard/helper/Timer';

-export function useCallSession() {
-  const callsStore = useCallsStore();
-  const { t } = useI18n();
-  const isJoining = ref(false);
-  const callDuration = ref(0);
-  const durationTimer = new Timer(elapsed => {
-    callDuration.value = elapsed;
+const isWhatsappCall = call => call?.provider === 'whatsapp';
+
+// Dismissed call sids must not be re-seeded by the conversation-load watcher.
+// Lives at module scope so all consumers share the same set.
+const dismissedCallSids = new Set();
+const markDismissed = callSid => {
+  if (callSid) dismissedCallSids.add(callSid);
+};
+
+// Globals attached once across all useCallSession() consumers — bubbles in a
+// long thread call this composable many times, and a per-instance Timer +
+// window listener stack would multiply work.
+let globalsAttachedCount = 0;
+let globalDurationTimer = null;
+const globalCallDuration = ref(0);
+let storedCallsStoreRef = null;
+// Shared join lock so two surfaces (bubble + widget) clicking concurrently
+// see one in-flight join, not two unrelated isJoining refs.
+const globalIsJoining = ref(false);
+
+const handleBeforeUnloadGlobal = event => {
+  const store = storedCallsStoreRef;
+  if (!store) return;
+  if (!store.hasActiveCall && !store.hasIncomingCall) return;
+  event.preventDefault();
+  event.returnValue = '';
+};
+const handlePageHideGlobal = () => sendWhatsappTerminateBeacon();
+const handleTwilioDisconnectedGlobal = () =>
+  storedCallsStoreRef?.clearActiveCall();
+
+const attachGlobalsOnFirstMount = callsStore => {
+  globalsAttachedCount += 1;
+  if (globalsAttachedCount > 1) return;
+  storedCallsStoreRef = callsStore;
+  globalDurationTimer = new Timer(elapsed => {
+    globalCallDuration.value = elapsed;
  });
-
-  const activeCall = computed(() => callsStore.activeCall);
-  const incomingCalls = computed(() => callsStore.incomingCalls);
-  const hasActiveCall = computed(() => callsStore.hasActiveCall);
-
-  watch(
-    hasActiveCall,
-    active => {
-      if (active) {
-        durationTimer.start();
-      } else {
-        durationTimer.stop();
-        callDuration.value = 0;
-      }
-    },
-    { immediate: true }
+  TwilioVoiceClient.addEventListener(
+    'call:disconnected',
+    handleTwilioDisconnectedGlobal
  );
+  window.addEventListener('beforeunload', handleBeforeUnloadGlobal);
+  window.addEventListener('pagehide', handlePageHideGlobal);
+};

-  onMounted(() => {
-    TwilioVoiceClient.addEventListener('call:disconnected', () =>
-      callsStore.clearActiveCall()
-    );
-  });
+const detachGlobalsOnLastUnmount = () => {
+  globalsAttachedCount -= 1;
+  if (globalsAttachedCount > 0) return;
+  globalDurationTimer?.stop();
+  globalDurationTimer = null;
+  globalCallDuration.value = 0;
+  storedCallsStoreRef = null;
+  TwilioVoiceClient.removeEventListener(
+    'call:disconnected',
+    handleTwilioDisconnectedGlobal
+  );
+  window.removeEventListener('beforeunload', handleBeforeUnloadGlobal);
+  window.removeEventListener('pagehide', handlePageHideGlobal);
+};

-  onUnmounted(() => {
-    durationTimer.stop();
-    TwilioVoiceClient.removeEventListener('call:disconnected', () =>
-      callsStore.clearActiveCall()
-    );
-  });
+// Build the action surface used by both the root session composable and the
+// lighter useCallActions consumer. All state is module-scoped — the actions
+// don't depend on per-instance refs, so they're cheap to call from anywhere.
+const buildCallActions = ({ callsStore, whatsappSession, t }) => {
+  const findCall = callSid => callsStore.calls.find(c => c.callSid === callSid);

  const endCall = async ({ conversationId, inboxId, callSid }) => {
+    const call = findCall(callSid);
+    if (isWhatsappCall(call)) {
+      // Pass call.callId so a wiped module state (e.g. a prior accept attempt
+      // tore down the WebRTC session) doesn't stop us hitting /terminate.
+      await whatsappSession.endActiveCall(call?.callId);
+      globalDurationTimer?.stop();
+      callsStore.clearActiveCall();
+      return;
+    }
+
    await VoiceAPI.leaveConference({ inboxId, conversationId, callSid });
    TwilioVoiceClient.endClientCall();
-    durationTimer.stop();
+    globalDurationTimer?.stop();
    callsStore.clearActiveCall();
  };

  const joinCall = async ({ conversationId, inboxId, callSid }) => {
-    if (isJoining.value) return null;
+    if (globalIsJoining.value) return null;

-    isJoining.value = true;
+    const call = findCall(callSid);
+    // Outbound *WhatsApp* calls have no separate join step — the offer was
+    // sent at initiate time and the answer is applied by the cable handler.
+    // Routing through acceptIncomingCall here would call prepareInboundAnswer →
+    // cleanup() and destroy the live outbound session. Outbound *Twilio*
+    // calls still need joinConference + joinClientCall (FloatingCallWidget
+    // auto-joins them), so don't short-circuit those.
+    if (call?.callDirection === 'outbound' && isWhatsappCall(call)) {
+      return null;
+    }
+
+    globalIsJoining.value = true;
    try {
+      if (isWhatsappCall(call)) {
+        await whatsappSession.acceptIncomingCall({
+          callId: call.callId,
+          sdpOffer: call.sdpOffer,
+          iceServers: call.iceServers,
+        });
+        callsStore.setCallActive(callSid);
+        globalDurationTimer?.start();
+        return { callId: call.callId };
+      }
+
      const device = await TwilioVoiceClient.initializeDevice(inboxId);
      if (!device) return null;

@@ -73,47 +140,160 @@ export function useCallSession() {
      });

      callsStore.setCallActive(callSid);
-      durationTimer.start();
+      globalDurationTimer?.start();

      return { conferenceSid: joinResponse?.conference_sid };
    } catch (error) {
      useAlert(error?.response?.data?.error || t('CONTACT_PANEL.CALL_FAILED'));
      if (error?.response?.status === 409) {
        TwilioVoiceClient.endClientCall();
+        markDismissed(callSid);
        callsStore.dismissCall(callSid);
      }
      // eslint-disable-next-line no-console
      console.error('Failed to join call:', error);
+      // Drop any half-built WebRTC state so the next click starts fresh.
+      cleanupWhatsappSession();
      return null;
    } finally {
-      isJoining.value = false;
+      globalIsJoining.value = false;
    }
  };

-  const rejectIncomingCall = callSid => {
-    TwilioVoiceClient.endClientCall();
-    callsStore.dismissCall(callSid);
+  // Await provider-side reject before dismissing the local entry; if the API
+  // call fails the call should stay surfaced so the agent can retry instead of
+  // disappearing while the backend still rings.
+  const rejectIncomingCall = async callSid => {
+    const call = findCall(callSid);
+    try {
+      if (isWhatsappCall(call) && call?.callId) {
+        if (call.callDirection === 'outbound') {
+          // Outbound calls that are still ringing must be terminated, not
+          // rejected (reject is the inbound-side verb on Meta's API).
+          await whatsappSession.endActiveCall(call.callId);
+        } else {
+          await whatsappSession.rejectIncomingCall(call.callId);
+        }
+      } else if (call?.inboxId && call?.conversationId) {
+        // Twilio incoming reject: agent hasn't joined the Device yet, so
+        // endClientCall is a no-op. End the conference server-side instead
+        // so Twilio hangs up the inbound leg.
+        await VoiceAPI.leaveConference({
+          inboxId: call.inboxId,
+          conversationId: call.conversationId,
+          callSid,
+        });
+      } else {
+        TwilioVoiceClient.endClientCall();
+      }
+    } finally {
+      markDismissed(callSid);
+      callsStore.dismissCall(callSid);
+    }
  };

  const dismissCall = callSid => {
+    markDismissed(callSid);
    callsStore.dismissCall(callSid);
  };

+  return { endCall, joinCall, rejectIncomingCall, dismissCall };
+};
+
+const buildReactiveSurface = callsStore => {
+  const activeCall = computed(() => callsStore.activeCall);
+  const incomingCalls = computed(() => callsStore.incomingCalls);
+  const hasActiveCall = computed(() => callsStore.hasActiveCall);
  const formattedCallDuration = computed(() => {
-    const minutes = Math.floor(callDuration.value / 60);
-    const seconds = callDuration.value % 60;
+    const total = globalCallDuration.value;
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  });
-
  return {
    activeCall,
    incomingCalls,
    hasActiveCall,
-    isJoining,
+    isJoining: globalIsJoining,
    formattedCallDuration,
-    joinCall,
-    endCall,
-    rejectIncomingCall,
-    dismissCall,
  };
+};
+
+// Root-mount composable. Call once at the dashboard root (FloatingCallWidget
+// is the natural anchor — always mounted, lifetime spans the whole session).
+// This is the only path that registers global window/Twilio listeners and
+// owns the duration Timer.
+export function useCallSession() {
+  const store = useStore();
+  const callsStore = useCallsStore();
+  const whatsappSession = useWhatsappCallSession();
+  const { t } = useI18n();
+
+  const reactive = buildReactiveSurface(callsStore);
+
+  // Cable broadcasts (voice_call.incoming / message.created) are one-shot, so
+  // on a hard refresh they leave the calls store empty. Seed it from any
+  // ringing voice_call message in the conversation cache. Skip calls the
+  // agent has already dismissed locally so they don't re-pop on the next
+  // conversation update.
+  const seedCallsFromHydratedMessages = () => {
+    const conversations = store.getters.getAllConversations || [];
+    const currentUserId = store.getters.getCurrentUserID;
+    const currentUserAvailability = store.getters.getCurrentUserAvailability;
+    conversations.forEach(conv => {
+      (conv.messages || []).forEach(msg => {
+        if (msg.content_type !== 'voice_call') return;
+        if (msg.call?.status !== 'ringing') return;
+        const callSid = msg.call?.provider_call_id;
+        if (callSid && dismissedCallSids.has(callSid)) return;
+        handleVoiceCallCreated(msg, currentUserId, currentUserAvailability);
+      });
+    });
+  };
+
+  watch(
+    reactive.hasActiveCall,
+    active => {
+      if (active) {
+        globalDurationTimer?.start();
+      } else {
+        globalDurationTimer?.stop();
+        globalCallDuration.value = 0;
+      }
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    attachGlobalsOnFirstMount(callsStore);
+    seedCallsFromHydratedMessages();
+  });
+
+  // Re-seed when conversations stream in after mount; addCall merges by callSid
+  // and dismissed sids are filtered, so this is idempotent.
+  watch(
+    () => store.getters.getAllConversations?.length,
+    () => seedCallsFromHydratedMessages()
+  );
+
+  onUnmounted(() => detachGlobalsOnLastUnmount());
+
+  const actions = buildCallActions({ callsStore, whatsappSession, t });
+
+  return { ...reactive, ...actions };
+}
+
+// Lightweight consumer for components that need to read state and trigger
+// actions but should NOT mount global listeners (e.g., per-message bubbles
+// rendered in a thread). Reads from the same module-level state that
+// useCallSession owns, so the duration timer and dismissed set stay coherent.
+export function useCallActions() {
+  const callsStore = useCallsStore();
+  const whatsappSession = useWhatsappCallSession();
+  const { t } = useI18n();
+
+  const reactive = buildReactiveSurface(callsStore);
+  const actions = buildCallActions({ callsStore, whatsappSession, t });
+
+  return { ...reactive, ...actions };
 }
@@ -0,0 +1,414 @@
+import { ref } from 'vue';
+import Cookies from 'js-cookie';
+import WhatsappCallsAPI from 'dashboard/api/channel/whatsapp/whatsappCallsAPI';
+
+// Module-level state lets the cable handlers and unload listeners reach the
+// live PeerConnection without prop-drilling refs through every composable.
+let pc = null;
+let localStream = null;
+let remoteStream = null;
+let remoteAudioEl = null;
+let mediaRecorder = null;
+let recorderChunks = [];
+let audioContext = null;
+let activeCallId = null;
+// Module-scoped so multiple composable callers (header button + contact-panel
+// button) share the same lock. A per-instance ref let two parallel callers
+// both pass the guard and tear down each other's WebRTC state in cleanup().
+// ref() so consumers can reactively gate buttons on it (the composable
+// re-exports this as `isInitiating`).
+const isInitiatingOutbound = ref(false);
+// Inbound calls record from the moment the agent clicks accept (their click =
+// pickup). Outbound calls must wait — Meta's `connect` webhook (which lands
+// during ringing) negotiates remote tracks ~20s before the contact actually
+// answers, and we don't want pre-pickup audio in the recording. This flag is
+// flipped to true by armOutboundRecorder() when the ACCEPTED status arrives.
+let recorderArmed = false;
+
+const ensureRemoteAudioElement = () => {
+  if (remoteAudioEl) return remoteAudioEl;
+  remoteAudioEl = document.createElement('audio');
+  remoteAudioEl.id = 'whatsapp-call-remote-audio';
+  remoteAudioEl.autoplay = true;
+  remoteAudioEl.playsInline = true;
+  remoteAudioEl.style.display = 'none';
+  document.body.appendChild(remoteAudioEl);
+  return remoteAudioEl;
+};
+
+const playRemoteStream = stream => {
+  const el = ensureRemoteAudioElement();
+  el.srcObject = stream;
+  el.play().catch(err => {
+    // eslint-disable-next-line no-console
+    console.warn('[WhatsApp Call] remote audio play() failed:', err);
+  });
+};
+
+// 1s timeslice keeps a recent recording chunk in memory so a remote hangup
+// that races cleanup still has data to upload.
+const RECORDING_TIMESLICE_MS = 1000;
+const ICE_GATHER_TIMEOUT_MS = 10000;
+
+const RECORDER_MIME_CANDIDATES = [
+  'audio/webm;codecs=opus',
+  'audio/webm',
+  'audio/ogg;codecs=opus',
+];
+
+// Outbound calls have no backend-supplied ice_servers (the call doesn't exist
+// at offer time). Without STUN the browser only sends host candidates and
+// browser→Meta media silently drops through any non-trivial NAT.
+const DEFAULT_OUTBOUND_ICE_SERVERS = [{ urls: 'stun:stun.l.google.com:19302' }];
+
+const waitForIceGatheringComplete = peer =>
+  new Promise(resolve => {
+    if (peer.iceGatheringState === 'complete') {
+      resolve();
+      return;
+    }
+    const timer = setTimeout(resolve, ICE_GATHER_TIMEOUT_MS);
+    peer.addEventListener('icegatheringstatechange', () => {
+      if (peer.iceGatheringState === 'complete') {
+        clearTimeout(timer);
+        resolve();
+      }
+    });
+  });
+
+const setupRecorder = () => {
+  if (!localStream || !remoteStream || mediaRecorder) return;
+  // createMediaStreamSource on a stream with no audio tracks wires up to
+  // nothing — the recorded mix would be silence. Wait until ontrack fires.
+  if (remoteStream.getAudioTracks().length === 0) return;
+
+  audioContext = new AudioContext({ sampleRate: 48000 });
+  // AudioContext starts suspended under most autoplay policies; without
+  // resume() the destination stream produces silence.
+  audioContext.resume().catch(() => {});
+
+  const destination = audioContext.createMediaStreamDestination();
+  audioContext.createMediaStreamSource(localStream).connect(destination);
+  audioContext.createMediaStreamSource(remoteStream).connect(destination);
+
+  const mimeType = RECORDER_MIME_CANDIDATES.find(t =>
+    MediaRecorder.isTypeSupported(t)
+  );
+  if (!mimeType) return;
+
+  recorderChunks = [];
+  mediaRecorder = new MediaRecorder(destination.stream, { mimeType });
+  mediaRecorder.ondataavailable = event => {
+    if (event.data && event.data.size > 0) recorderChunks.push(event.data);
+  };
+  mediaRecorder.start(RECORDING_TIMESLICE_MS);
+};
+
+const cleanup = () => {
+  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+    try {
+      mediaRecorder.stop();
+    } catch (_) {
+      /* noop */
+    }
+  }
+  if (audioContext && audioContext.state !== 'closed') {
+    audioContext.close().catch(() => {});
+  }
+  if (localStream) localStream.getTracks().forEach(t => t.stop());
+  if (remoteStream) remoteStream.getTracks().forEach(t => t.stop());
+  if (pc) pc.close();
+  if (remoteAudioEl) remoteAudioEl.srcObject = null;
+
+  pc = null;
+  localStream = null;
+  remoteStream = null;
+  mediaRecorder = null;
+  recorderChunks = [];
+  audioContext = null;
+  activeCallId = null;
+  recorderArmed = false;
+};
+
+const buildPeerConnection = iceServers => {
+  const config = iceServers && iceServers.length ? { iceServers } : {};
+  pc = new RTCPeerConnection(config);
+  remoteStream = new MediaStream();
+  pc.ontrack = event => {
+    // Reuse the same MediaStream object — the recorder's audioContext source
+    // taps it once, so reassigning would orphan the recorder.
+    const tracks =
+      event.streams && event.streams[0]
+        ? event.streams[0].getTracks()
+        : [event.track];
+    tracks.forEach(track => {
+      if (!remoteStream.getTracks().includes(track))
+        remoteStream.addTrack(track);
+    });
+    playRemoteStream(remoteStream);
+    // Only arm the recorder when the call is actually accepted. For outbound
+    // this is the ACCEPTED status webhook; for inbound this is the agent's
+    // own click (acceptIncomingCall flips recorderArmed before returning).
+    if (recorderArmed) setupRecorder();
+  };
+  return pc;
+};
+
+const stopRecorderAndUpload = async callId => {
+  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+    await new Promise(resolve => {
+      mediaRecorder.addEventListener('stop', resolve, { once: true });
+      try {
+        mediaRecorder.stop();
+      } catch (_) {
+        resolve();
+      }
+    });
+  }
+  if (!recorderChunks.length || !callId) return;
+
+  const blob = new Blob(recorderChunks, { type: recorderChunks[0].type });
+  // Best-effort — the controller's idempotency guard handles a retry.
+  try {
+    await WhatsappCallsAPI.uploadRecording(callId, blob);
+  } catch (_) {
+    /* noop */
+  }
+};
+
+// devise-token-auth requires access-token / client / uid headers on every
+// request — navigator.sendBeacon can't set custom headers, so we rehydrate
+// the auth payload from the cw_d_session_info cookie that the dashboard sets
+// at login. Used by the page-close terminate path below.
+const getDeviseAuthHeaders = () => {
+  try {
+    const raw = Cookies.get('cw_d_session_info');
+    if (!raw) return null;
+    const session = JSON.parse(raw);
+    return {
+      'access-token': session['access-token'] || '',
+      client: session.client || '',
+      uid: session.uid || '',
+      expiry: session.expiry || '',
+      'token-type': session['token-type'] || 'Bearer',
+    };
+  } catch (_) {
+    return null;
+  }
+};
+
+const beaconTerminate = callId => {
+  if (!callId) return;
+  const accountId = window.location.pathname.split('/')[3];
+  if (!accountId) return;
+  const headers = getDeviseAuthHeaders();
+  if (!headers) return;
+  const url = `/api/v1/accounts/${accountId}/whatsapp_calls/${callId}/terminate`;
+  // fetch+keepalive (instead of navigator.sendBeacon) so we can attach auth
+  // headers — without them devise-token-auth 401s and the call stays open on
+  // Meta until its carrier-side timeout (~60s).
+  try {
+    fetch(url, {
+      method: 'POST',
+      keepalive: true,
+      credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/json', ...headers },
+      body: '{}',
+    }).catch(() => {});
+  } catch (_) {
+    /* noop */
+  }
+};
+
+export const hasActiveWhatsappCall = () => !!(activeCallId || pc);
+
+export const isLocalWhatsappCall = callId =>
+  !!callId && activeCallId != null && callId === activeCallId;
+
+export function useWhatsappCallSession() {
+  const prepareInboundAnswer = async (sdpOffer, iceServers) => {
+    cleanup();
+    localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    buildPeerConnection(iceServers);
+    localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
+    await pc.setRemoteDescription({ type: 'offer', sdp: sdpOffer });
+    const answer = await pc.createAnswer();
+    await pc.setLocalDescription(answer);
+    await waitForIceGatheringComplete(pc);
+    return pc.localDescription.sdp;
+  };
+
+  const prepareOutboundOffer = async () => {
+    cleanup();
+    localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    buildPeerConnection(DEFAULT_OUTBOUND_ICE_SERVERS);
+    localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    await waitForIceGatheringComplete(pc);
+    return pc.localDescription.sdp;
+  };
+
+  const acceptIncomingCall = async ({ callId, sdpOffer, iceServers }) => {
+    // The store may not have sdpOffer yet (the cable broadcast can race the
+    // click). Fall back to GET /whatsapp_calls/:id which exposes it.
+    let offer = sdpOffer;
+    let ice = iceServers;
+    if (!offer && callId) {
+      try {
+        const fresh = await WhatsappCallsAPI.show(callId);
+        offer = fresh?.sdp_offer || fresh?.sdpOffer;
+        ice = ice || fresh?.ice_servers || fresh?.iceServers;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(
+          '[WhatsApp Call] failed to fetch call data for accept:',
+          e
+        );
+      }
+    }
+    if (!offer) {
+      throw new Error('Missing sdp_offer for accept — call may have ended.');
+    }
+
+    const sdpAnswer = await prepareInboundAnswer(offer, ice);
+    activeCallId = callId;
+    // Inbound: agent's click is the pickup. Arm the recorder before the API
+    // round-trip so when ontrack fires (triggered by setRemoteDescription
+    // back in prepareInboundAnswer) the recorder is already authorized.
+    recorderArmed = true;
+    setupRecorder();
+    await WhatsappCallsAPI.accept(callId, sdpAnswer);
+  };
+
+  const rejectIncomingCall = async callId => {
+    try {
+      await WhatsappCallsAPI.reject(callId);
+    } finally {
+      cleanup();
+    }
+  };
+
+  const initiateOutboundCall = async conversationId => {
+    // Module-scoped lock + active-session guard so a second click — from the
+    // same composable instance OR a different one (header vs contact panel)
+    // OR while a call is already live — can't tear down the in-flight setup
+    // via prepareOutboundOffer's cleanup().
+    if (isInitiatingOutbound.value) return { status: 'locked' };
+    if (hasActiveWhatsappCall()) return { status: 'locked' };
+    isInitiatingOutbound.value = true;
+    try {
+      const sdpOffer = await prepareOutboundOffer();
+      const response = await WhatsappCallsAPI.initiate(
+        conversationId,
+        sdpOffer
+      );
+      if (response?.id) {
+        activeCallId = response.id;
+        return response;
+      }
+      // No call id back: this is the permission-request branch. The mic +
+      // PeerConnection allocated by prepareOutboundOffer aren't useful until
+      // the contact opts in and the agent retries — release them.
+      cleanup();
+      return response;
+    } catch (e) {
+      cleanup();
+      // BE returns 422 when the contact hasn't opted in (permission template
+      // sent or already pending). Surface it to the caller as a normal
+      // response shape so it can render the banner instead of an error toast.
+      const data = e?.response?.data;
+      if (
+        data?.status === 'permission_requested' ||
+        data?.status === 'permission_pending'
+      ) {
+        return { status: data.status };
+      }
+      throw e;
+    } finally {
+      isInitiatingOutbound.value = false;
+    }
+  };
+
+  // callIdOverride is the call.id from the dashboard's calls store. Module
+  // `activeCallId` may be null after a prior accept attempt's cleanup() — but
+  // the call still exists on Meta and must still be terminated. Falling back
+  // to the override means hangup is robust to a wiped local session.
+  const endActiveCall = async (callIdOverride = null) => {
+    const callId = activeCallId || callIdOverride;
+    if (!callId) {
+      cleanup();
+      return;
+    }
+    try {
+      await stopRecorderAndUpload(callId);
+      await WhatsappCallsAPI.terminate(callId).catch(() => {});
+    } finally {
+      cleanup();
+    }
+  };
+
+  return {
+    isInitiating: isInitiatingOutbound,
+    prepareInboundAnswer,
+    prepareOutboundOffer,
+    acceptIncomingCall,
+    rejectIncomingCall,
+    initiateOutboundCall,
+    endActiveCall,
+  };
+}
+
+// Cable handlers fire outside any composable instance, so the shared session
+// surface is exposed as module-level functions for them.
+
+export const applyOutboundAnswer = async (callId, sdpAnswer) => {
+  if (!pc) return;
+  // voice_call.outbound_connected is broadcast account-wide; only apply
+  // the SDP answer if it's for this tab's in-flight outbound call.
+  if (activeCallId != null && callId !== activeCallId) return;
+  activeCallId = callId;
+  await pc.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });
+};
+
+// Called by the cable handler when Meta delivers status=ACCEPTED for the
+// outbound call (real pickup). Flips the recorder gate and starts the
+// MediaRecorder. Idempotent — safe if ontrack hasn't fired yet (setupRecorder
+// bails until the remote stream has audio tracks; ontrack will retry).
+export const armOutboundRecorder = () => {
+  recorderArmed = true;
+  setupRecorder();
+};
+
+export const cleanupWhatsappSession = () => cleanup();
+
+export const handleWhatsappRemoteEnd = async callId => {
+  // Snapshot before cleanup nulls activeCallId.
+  const id = callId || activeCallId;
+  if (!id) {
+    cleanup();
+    return;
+  }
+  try {
+    await stopRecorderAndUpload(id);
+  } finally {
+    cleanup();
+  }
+};
+
+export const setWhatsappCallMuted = muted => {
+  if (!localStream) return false;
+  localStream.getAudioTracks().forEach(track => {
+    track.enabled = !muted;
+  });
+  return muted;
+};
+
+export const sendWhatsappTerminateBeacon = () => {
+  // Always fire when there's a live callId. The beacon endpoint is idempotent,
+  // so racing it with an in-flight Axios terminate (which unload may abort) is
+  // fine — Meta gets exactly one terminate either way, and we avoid leaving
+  // the call ringing on Meta until its carrier-side timeout.
+  if (!activeCallId) return;
+  beaconTerminate(activeCallId);
+};
@@ -4,6 +4,13 @@ import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotifi
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { useImpersonation } from 'dashboard/composables/useImpersonation';
+import { useCallsStore } from 'dashboard/stores/calls';
+import {
+  applyOutboundAnswer,
+  armOutboundRecorder,
+  handleWhatsappRemoteEnd,
+  isLocalWhatsappCall,
+} from 'dashboard/composables/useWhatsappCallSession';

 const { isImpersonating } = useImpersonation();

@@ -35,6 +42,10 @@ class ActionCableConnector extends BaseActionCableConnector {
      'account.cache_invalidated': this.onCacheInvalidate,
      'account.enrichment_completed': this.onEnrichmentCompleted,
      'copilot.message.created': this.onCopilotMessageCreated,
+      'voice_call.incoming': this.onVoiceCallIncoming,
+      'voice_call.outbound_connected': this.onVoiceCallOutboundConnected,
+      'voice_call.outbound_accepted': this.onVoiceCallOutboundAccepted,
+      'voice_call.ended': this.onVoiceCallEnded,
    };
  }

@@ -205,6 +216,74 @@ class ActionCableConnector extends BaseActionCableConnector {
    this.app.$store.dispatch('inboxes/revalidate', { newKey: keys.inbox });
    this.app.$store.dispatch('teams/revalidate', { newKey: keys.team });
  };
+
+  onVoiceCallIncoming = data => {
+    if (data?.provider !== 'whatsapp') return;
+    // Defense in depth: the server already filters to online agent streams,
+    // but if anything ever broadcasts to a broader stream (e.g. account-wide),
+    // an agent who's set availability=offline/busy shouldn't ring.
+    const availability = this.app.$store.getters.getCurrentUserAvailability;
+    if (availability !== 'online') return;
+
+    useCallsStore().addCall({
+      callSid: data.call_id,
+      callId: data.id,
+      conversationId: data.conversation_id,
+      inboxId: data.inbox_id,
+      callDirection: 'inbound',
+      provider: 'whatsapp',
+      sdpOffer: data.sdp_offer,
+      iceServers: data.ice_servers,
+      caller: data.caller,
+    });
+  };
+
+  // `connect` is the WebRTC tunnel-ready signal (fires ~20s before pickup
+  // for outbound). Apply the SDP answer so the handshake completes during
+  // ringing, but stay non-active until `outbound_accepted` arrives.
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallOutboundConnected = async data => {
+    if (data?.provider !== 'whatsapp' || !data.sdp_answer) return;
+    // Account-wide broadcast: skip SDPs for calls another agent is handling,
+    // otherwise applyOutboundAnswer would feed a foreign SDP into this tab's
+    // peer connection.
+    if (!isLocalWhatsappCall(data.id)) return;
+    try {
+      await applyOutboundAnswer(data.id, data.sdp_answer);
+    } catch (_) {
+      /* noop */
+    }
+  };
+
+  // Real pickup signal — Meta sends status=ACCEPTED on the call when the
+  // contact answers. Flip active (timer starts) and arm the recorder.
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallOutboundAccepted = data => {
+    if (data?.provider !== 'whatsapp') return;
+    const store = useCallsStore();
+    if (!store.calls.some(c => c.callSid === data.call_id)) return;
+    store.setCallActive(data.call_id);
+    armOutboundRecorder();
+  };
+
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallEnded = async data => {
+    if (data?.provider !== 'whatsapp') return;
+    // The store entry should always be removed for this account-wide broadcast,
+    // but the WebRTC/recorder teardown must only run for the call this tab owns
+    // — otherwise an unrelated agent's call ending would stop this tab's
+    // recorder and upload its chunks against the wrong call id.
+    if (isLocalWhatsappCall(data.id)) {
+      // Await upload before removeCall — the store's sync teardown would otherwise
+      // wipe the recorder chunks before they reach the server.
+      try {
+        await handleWhatsappRemoteEnd(data.id);
+      } catch (_) {
+        /* noop */
+      }
+    }
+    useCallsStore().removeCall(data.call_id);
+  };
 }

 export default {
@@ -16,6 +16,7 @@ export const INBOX_TYPES = {
 // Add providers here as they gain voice capability (e.g., WhatsApp Cloud, Twilio WhatsApp)
 export const VOICE_CALL_PROVIDERS = {
  TWILIO: 'twilio',
+  WHATSAPP: 'whatsapp',
 };

 export const getVoiceCallProvider = inbox => {
@@ -25,9 +26,11 @@ export const getVoiceCallProvider = inbox => {
  const channelType = inbox.channel_type || inbox.channelType;
  const voiceEnabled = inbox.voice_enabled || inbox.voiceEnabled;

-  if (channelType === INBOX_TYPES.TWILIO && voiceEnabled) {
-    return VOICE_CALL_PROVIDERS.TWILIO;
-  }
+  if (!voiceEnabled) return null;
+
+  if (channelType === INBOX_TYPES.TWILIO) return VOICE_CALL_PROVIDERS.TWILIO;
+  if (channelType === INBOX_TYPES.WHATSAPP)
+    return VOICE_CALL_PROVIDERS.WHATSAPP;

  return null;
 };
@@ -45,23 +45,62 @@ const shouldShowCall = ({
  return !isAssignedToAnotherAgent(assigneeId, currentUserId);
 };

+// Offline/busy agents shouldn't get a ringing popup for inbound calls, but
+// outbound calls always belong to the initiator regardless of their status,
+// and existing (already-surfaced) calls keep going so a status change
+// mid-call doesn't yank away an active widget.
+const shouldRingInbound = (callDirection, currentUserAvailability) => {
+  if (callDirection === 'outbound') return true;
+  return currentUserAvailability === 'online';
+};
+
+function extractCallerSnapshot(message) {
+  // Snapshot caller info from the message at add-time so the widget can keep
+  // rendering it after the user navigates away from a conversation list that
+  // had the conversation hydrated (and Vuex evicts it from the store).
+  const sender = message?.sender;
+  if (!sender) return null;
+  return {
+    name: sender.name,
+    phone: sender.phone_number,
+    avatar: sender.avatar || sender.thumbnail,
+    additionalAttributes: sender.additional_attributes || {},
+  };
+}
+
 function extractCallData(message) {
  const call = message?.call || {};
  return {
    callSid: call.provider_call_id,
+    callId: call.id,
+    provider: call.provider,
    status: call.status,
    callDirection: call.direction === 'outgoing' ? 'outbound' : 'inbound',
    conversationId: message?.conversation_id,
+    inboxId: message?.inbox_id ?? message?.conversation?.inbox_id,
    assigneeId: extractAssigneeId(message?.conversation),
    senderId: message?.sender?.id,
+    caller: extractCallerSnapshot(message),
  };
 }

-export function handleVoiceCallCreated(message, currentUserId) {
+export function handleVoiceCallCreated(
+  message,
+  currentUserId,
+  currentUserAvailability
+) {
  if (!isVoiceCallMessage(message)) return;

-  const { callSid, callDirection, conversationId, assigneeId, senderId } =
-    extractCallData(message);
+  const {
+    callSid,
+    callId,
+    provider,
+    callDirection,
+    conversationId,
+    inboxId,
+    assigneeId,
+    senderId,
+  } = extractCallData(message);

  if (
    !shouldShowCall({
@@ -74,23 +113,37 @@ export function handleVoiceCallCreated(message, currentUserId) {
    return;
  }

+  if (!shouldRingInbound(callDirection, currentUserAvailability)) return;
+
  const callsStore = useCallsStore();
  callsStore.addCall({
    callSid,
+    callId,
+    provider,
    conversationId,
+    inboxId,
    callDirection,
    senderId,
+    caller: extractCallerSnapshot(message),
  });
 }

-export function handleVoiceCallUpdated(commit, message, currentUserId) {
+export function handleVoiceCallUpdated(
+  commit,
+  message,
+  currentUserId,
+  currentUserAvailability
+) {
  if (!isVoiceCallMessage(message)) return;

  const {
    callSid,
+    callId,
+    provider,
    status,
    callDirection,
    conversationId,
+    inboxId,
    assigneeId,
    senderId,
  } = extractCallData(message);
@@ -118,11 +171,17 @@ export function handleVoiceCallUpdated(commit, message, currentUserId) {
  }

  if (status === 'ringing') {
+    if (!shouldRingInbound(callDirection, currentUserAvailability)) return;
+
    callsStore.addCall({
      callSid,
+      callId,
+      provider,
      conversationId,
+      inboxId,
      callDirection,
      senderId,
+      caller: extractCallerSnapshot(message),
    });
  }
 }
@@ -131,6 +190,20 @@ export function syncConversationCallVisibility(conversation, currentUserId) {
  const assigneeId = extractAssigneeId(conversation);
  if (!isAssignedToAnotherAgent(assigneeId, currentUserId)) return;

+  // Outbound calls belong to the initiator regardless of who the conversation
+  // is currently assigned to (auto-assignment may flip mid-call). Mirror
+  // shouldShowCall's outbound exception so an in-progress outbound call isn't
+  // ripped out from under the caller when the conversation reassigns.
  const callsStore = useCallsStore();
-  callsStore.removeCallsForConversation(conversation.id);
+  const callsToRemove = callsStore.calls.filter(
+    call =>
+      call.conversationId === conversation.id &&
+      !shouldShowCall({
+        callDirection: call.callDirection,
+        senderId: call.senderId,
+        assigneeId,
+        currentUserId,
+      })
+  );
+  callsToRemove.forEach(call => callsStore.removeCall(call.callSid));
 }
@@ -79,13 +79,19 @@
      "OUTGOING_CALL": "Outgoing call",
      "CALL_IN_PROGRESS": "Call in progress",
      "NO_ANSWER": "No answer",
+      "NO_ANSWER_OUTBOUND_LABEL": "No answer",
+      "NO_ANSWER_OUTBOUND_SUBTEXT": "Contact didn't pick up",
      "MISSED_CALL": "Missed call",
+      "MISSED_CALL_INBOUND_SUBTEXT": "No agent picked up",
+      "MISSED_CALL_DECLINED_BY": "Declined by {agentName}",
      "CALL_ENDED": "Call ended",
      "NOT_ANSWERED_YET": "Not answered yet",
+      "CALLING": "Calling…",
      "THEY_ANSWERED": "They answered",
      "YOU_ANSWERED": "You answered",
      "AGENT_ANSWERED": "{agentName} answered",
-      "JOIN_CALL": "Join call"
+      "JOIN_CALL": "Join call",
+      "CALL_BACK": "Call back"
    },
    "HEADER": {
      "RESOLVE_ACTION": "Resolve",
@@ -100,6 +106,12 @@
      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
+      "WHATSAPP_CALL": "Start WhatsApp call",
+      "WHATSAPP_CALL_FAILED": "Could not start the WhatsApp call.",
+      "VOICE_CALL": "Start call",
+      "VOICE_CALL_FAILED": "Could not start the call.",
+      "WHATSAPP_CALL_PERMISSION_REQUESTED": "Sent a call permission request to the contact. Try again once they accept.",
+      "WHATSAPP_CALL_PERMISSION_PENDING": "Call permission request already sent recently. Try again once the contact accepts.",
      "SLA_STATUS": {
        "FRT": "FRT {status}",
        "NRT": "NRT {status}",
@@ -300,7 +312,11 @@
      "HANDLED_IN_ANOTHER_TAB": "Being handled in another tab",
      "REJECT_CALL": "Reject",
      "JOIN_CALL": "Join call",
-      "END_CALL": "End call"
+      "END_CALL": "End call",
+      "MUTE": "Mute mic",
+      "UNMUTE": "Unmute mic",
+      "VIEW_CHAT_HISTORY": "View chat history",
+      "GO_TO_CONVERSATION": "Go to conversation thread"
    }
  },
  "EMAIL_TRANSCRIPT": {
@@ -308,6 +308,7 @@
          "AUTH_PROCESSING": "Authenticating with Meta",
          "WAITING_FOR_BUSINESS_INFO": "Please complete business setup in the Meta window...",
          "PROCESSING": "Setting up your WhatsApp Business Account",
+          "ENABLING_CALLING": "Enabling WhatsApp Calling on your number…",
          "LOADING_SDK": "Loading Facebook SDK...",
          "CANCELLED": "WhatsApp Signup was cancelled",
          "SUCCESS_TITLE": "WhatsApp Business Account Connected!",
@@ -317,7 +318,8 @@
          "AUTH_NOT_COMPLETED": "Authentication not completed. Please restart the process.",
          "SUCCESS_FALLBACK": "WhatsApp Business Account has been successfully configured",
          "MANUAL_FALLBACK": "If your number is already connected to the WhatsApp Business Platform (API), or if you’re a tech provider onboarding your own number, please use the {link} flow",
-          "MANUAL_LINK_TEXT": "manual setup flow"
+          "MANUAL_LINK_TEXT": "manual setup flow",
+          "CALLING_ENABLE_FAILED": "Your WhatsApp inbox is ready, but voice calling couldn't be turned on — this number isn't enrolled in the WhatsApp Business Calling API yet. Reach out to Meta or your WhatsApp Business Solution Provider to onboard it, then turn calling on from the inbox's Calls settings."
        },
        "API": {
          "ERROR_MESSAGE": "We were not able to save the WhatsApp channel"
@@ -465,6 +467,10 @@
            "TITLE": "WhatsApp",
            "DESCRIPTION": "Support your customers on WhatsApp"
          },
+          "WHATSAPP_CALL": {
+            "TITLE": "WhatsApp Call",
+            "DESCRIPTION": "Take voice calls on your WhatsApp number"
+          },
          "EMAIL": {
            "TITLE": "Email",
            "DESCRIPTION": "Connect with Gmail, Outlook, or other providers"
@@ -637,7 +643,8 @@
      "BOT_CONFIGURATION": "Bot Configuration",
      "ACCOUNT_HEALTH": "Account Health",
      "CSAT": "CSAT",
-      "VOICE": "Voice"
+      "VOICE": "Voice",
+      "CALLS": "Calls"
    },
    "VOICE_CONFIGURATION": {
      "ENABLE_VOICE": {
@@ -648,6 +655,26 @@
        "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections."
      }
    },
+    "WHATSAPP_CALLING": {
+      "ENABLE": {
+        "LABEL": "Enable WhatsApp Calling",
+        "DESCRIPTION": "Allow agents to receive and place WhatsApp Cloud calls on this inbox. Customers can call this business number directly from WhatsApp."
+      },
+      "ENABLE_FAILED": "Voice calling couldn't be turned on for this number — it isn't enrolled in the WhatsApp Business Calling API yet. Reach out to Meta or your WhatsApp Business Solution Provider to onboard it, then try again.",
+      "PHONE_NUMBER": {
+        "LABEL": "Business phone number",
+        "HELP_TEXT": "WhatsApp number that customers will call."
+      },
+      "HOW_IT_WORKS": {
+        "LABEL": "How it works",
+        "DESCRIPTION": "Calls are placed peer-to-peer between the agent's browser and Meta — no extra credentials are required. Make sure the agent's browser has microphone permission for this site."
+      },
+      "PERMISSION_REQUEST_BODY": {
+        "LABEL": "Call permission request message",
+        "HELP_TEXT": "Shown to the contact when they haven't yet consented to receive calls. Leave blank to use the default.",
+        "PLACEHOLDER": "We would like to call you regarding your conversation."
+      }
+    },
    "CHANNEL_PREFERENCES": "Channel Preferences",
    "WIDGET_FEATURES": "Widget features",
    "ACCOUNT_HEALTH": {
@@ -800,6 +827,10 @@
      "WHATSAPP_TEMPLATES_SYNC_SUBHEADER": "Manually sync message templates from WhatsApp to update your available templates.",
      "WHATSAPP_TEMPLATES_SYNC_BUTTON": "Sync Templates",
      "WHATSAPP_TEMPLATES_SYNC_SUCCESS": "Templates sync initiated successfully. It may take a couple of minutes to update.",
+      "WHATSAPP_CALLING_ENABLED": {
+        "LABEL": "Enable voice calling",
+        "DESCRIPTION": "Allow agents to start and receive WhatsApp voice calls on this inbox. Available only on embedded-signup WhatsApp Cloud channels with calling permission granted by Meta."
+      },
      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
    },
    "HELP_CENTER": {
@@ -56,7 +56,10 @@ export default {
    };
  },
  computed: {
-    ...mapGetters({ uiFlags: 'contacts/getUIFlags' }),
+    ...mapGetters({
+      uiFlags: 'contacts/getUIFlags',
+      currentChat: 'getSelectedChat',
+    }),
    contactProfileLink() {
      return `/app/accounts/${this.$route.params.accountId}/contacts/${this.contact.id}`;
    },
@@ -305,11 +308,13 @@ export default {
        <VoiceCallButton
          :phone="contact.phone_number"
          :contact-id="contact.id"
-          icon="i-ri-phone-fill"
+          :conversation-id="currentChat?.id"
+          icon="i-lucide-phone"
          size="sm"
+          variant="ghost"
+          color="slate"
+          class="rounded-md hover:bg-n-alpha-2"
          :tooltip-label="$t('CONTACT_PANEL.CALL')"
-          slate
-          faded
        />
        <NextButton
          v-tooltip.top-end="$t('EDIT_CONTACT.BUTTON_LABEL')"
@@ -7,6 +7,7 @@ import Api from './channels/Api.vue';
 import Email from './channels/Email.vue';
 import Sms from './channels/Sms.vue';
 import Whatsapp from './channels/Whatsapp.vue';
+import WhatsappCall from './channels/WhatsappCall.vue';
 import Line from './channels/Line.vue';
 import Telegram from './channels/Telegram.vue';
 import Instagram from './channels/Instagram.vue';
@@ -21,6 +22,7 @@ const channelViewList = {
  email: Email,
  sms: Sms,
  whatsapp: Whatsapp,
+  whatsapp_call: WhatsappCall,
  line: Line,
  telegram: Telegram,
  instagram: Instagram,
@@ -95,6 +95,13 @@ const channelList = computed(() => {
    icon: 'i-woot-voice',
  });

+  channels.push({
+    key: 'whatsapp_call',
+    title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP_CALL.TITLE'),
+    description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP_CALL.DESCRIPTION'),
+    icon: 'i-woot-whatsapp',
+  });
+
  return channels;
 });

@@ -22,6 +22,7 @@ import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import VoiceConfigurationPage from './settingsPage/VoiceConfigurationPage.vue';
+import WhatsappCallingPage from './settingsPage/WhatsappCallingPage.vue';
 import CustomerSatisfactionPage from './settingsPage/CustomerSatisfactionPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
@@ -48,6 +49,7 @@ export default {
    CollaboratorsPage,
    ConfigurationPage,
    VoiceConfigurationPage,
+    WhatsappCallingPage,
    CustomerSatisfactionPage,
    FacebookReauthorize,
    GreetingsEditor,
@@ -249,6 +251,23 @@ export default {
        ];
      }

+      if (
+        this.isAWhatsAppCloudChannel &&
+        this.isEmbeddedSignupWhatsApp &&
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.CHANNEL_VOICE
+        )
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'calls-configuration',
+            name: this.$t('INBOX_MGMT.TABS.CALLS'),
+          },
+        ];
+      }
+
      return visibleToAllChannelTabs;
    },
    currentInboxId() {
@@ -1262,6 +1281,12 @@ export default {
        >
          <VoiceConfigurationPage :inbox="inbox" />
        </div>
+        <div
+          v-if="selectedTabKey === 'calls-configuration'"
+          class="mx-6 max-w-4xl"
+        >
+          <WhatsappCallingPage :inbox="inbox" />
+        </div>
        <div v-if="selectedTabKey === 'csat'">
          <CustomerSatisfactionPage :inbox="inbox" />
        </div>
@@ -0,0 +1,11 @@
+<script setup>
+import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
+</script>
+
+<template>
+  <div class="overflow-auto col-span-6 p-6 w-full h-full">
+    <div class="px-6 py-5 rounded-2xl border border-n-weak">
+      <WhatsappEmbeddedSignup enable-calling-on-complete />
+    </div>
+  </div>
+</template>
@@ -7,6 +7,7 @@ import { useAlert } from 'dashboard/composables';
 import Icon from 'next/icon/Icon.vue';
 import NextButton from 'next/button/Button.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+import InboxesAPI from 'dashboard/api/inboxes';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import globalConstants from 'dashboard/constants/globals.js';
 import {
@@ -16,6 +17,13 @@ import {
  isValidBusinessData,
 } from './whatsapp/utils';

+const props = defineProps({
+  enableCallingOnComplete: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const store = useStore();
 const router = useRouter();
 const { t } = useI18n();
@@ -65,11 +73,27 @@ const handleSignupCancellation = () => {
  isAuthenticating.value = false;
 };

-const handleSignupSuccess = inboxData => {
-  isProcessing.value = false;
-  isAuthenticating.value = false;
+const enableCallingForInbox = async inboxId => {
+  try {
+    await InboxesAPI.enableWhatsappCalling(inboxId);
+  } catch (_) {
+    useAlert(
+      t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.CALLING_ENABLE_FAILED')
+    );
+  }
+};

+const handleSignupSuccess = async inboxData => {
  if (inboxData && inboxData.id) {
+    if (props.enableCallingOnComplete) {
+      isProcessing.value = true;
+      processingMessage.value = t(
+        'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ENABLING_CALLING'
+      );
+      await enableCallingForInbox(inboxData.id);
+    }
+    isProcessing.value = false;
+    isAuthenticating.value = false;
    useAlert(t('INBOX_MGMT.FINISH.MESSAGE'));
    router.replace({
      name: 'settings_inboxes_add_agents',
@@ -79,6 +103,8 @@ const handleSignupSuccess = inboxData => {
      },
    });
  } else {
+    isProcessing.value = false;
+    isAuthenticating.value = false;
    useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUCCESS_FALLBACK'));
    router.replace({
      name: 'settings_inbox_list',
@@ -0,0 +1,157 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import InboxesAPI from 'dashboard/api/inboxes';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import TextArea from 'next/textarea/TextArea.vue';
+
+export default {
+  components: {
+    SettingsFieldSection,
+    SettingsToggleSection,
+    NextButton,
+    TextArea,
+  },
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      callingEnabled: this.inbox.provider_config?.calling_enabled || false,
+      permissionRequestBody:
+        this.inbox.provider_config?.call_permission_request_body || '',
+      isUpdating: false,
+      isTogglingCalling: false,
+    };
+  },
+  computed: {
+    phoneNumber() {
+      return (
+        this.inbox.provider_config?.phone_number || this.inbox.phone_number
+      );
+    },
+  },
+  watch: {
+    'inbox.provider_config.calling_enabled'(val) {
+      this.callingEnabled = val || false;
+    },
+    'inbox.provider_config.call_permission_request_body'(val) {
+      this.permissionRequestBody = val || '';
+    },
+  },
+  methods: {
+    async handleCallingToggle(newValue) {
+      if (this.isTogglingCalling) return;
+      const previousValue = this.callingEnabled;
+      this.callingEnabled = newValue;
+      this.isTogglingCalling = true;
+      try {
+        if (newValue) {
+          await InboxesAPI.enableWhatsappCalling(this.inbox.id);
+        } else {
+          await InboxesAPI.disableWhatsappCalling(this.inbox.id);
+        }
+        await this.$store.dispatch('inboxes/get', this.inbox.id);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (_) {
+        this.callingEnabled = previousValue;
+        const fallbackKey = newValue
+          ? 'INBOX_MGMT.WHATSAPP_CALLING.ENABLE_FAILED'
+          : 'INBOX_MGMT.EDIT.API.ERROR_MESSAGE';
+        useAlert(this.$t(fallbackKey));
+      } finally {
+        this.isTogglingCalling = false;
+      }
+    },
+    async updateCallingSettings() {
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('inboxes/updateInbox', {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              call_permission_request_body:
+                this.permissionRequestBody.trim() || null,
+            },
+          },
+        });
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        const message =
+          error?.response?.data?.message ||
+          this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE');
+        useAlert(message);
+      } finally {
+        this.isUpdating = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div
+      class="relative"
+      :class="{ 'pointer-events-none opacity-60': isTogglingCalling }"
+    >
+      <SettingsToggleSection
+        :model-value="callingEnabled"
+        :header="$t('INBOX_MGMT.WHATSAPP_CALLING.ENABLE.LABEL')"
+        :description="$t('INBOX_MGMT.WHATSAPP_CALLING.ENABLE.DESCRIPTION')"
+        @update:model-value="handleCallingToggle"
+      />
+      <span
+        v-if="isTogglingCalling"
+        class="absolute top-3 right-12 i-lucide-loader-circle animate-spin size-4 text-n-slate-11"
+      />
+    </div>
+
+    <template v-if="callingEnabled">
+      <SettingsFieldSection
+        v-if="phoneNumber"
+        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.LABEL')"
+        :help-text="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.HELP_TEXT')"
+      >
+        <woot-code :script="phoneNumber" lang="html" />
+      </SettingsFieldSection>
+
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PERMISSION_REQUEST_BODY.LABEL')"
+        :help-text="
+          $t('INBOX_MGMT.WHATSAPP_CALLING.PERMISSION_REQUEST_BODY.HELP_TEXT')
+        "
+      >
+        <TextArea
+          v-model="permissionRequestBody"
+          :placeholder="
+            $t(
+              'INBOX_MGMT.WHATSAPP_CALLING.PERMISSION_REQUEST_BODY.PLACEHOLDER'
+            )
+          "
+          auto-height
+          resize
+        />
+      </SettingsFieldSection>
+
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.HOW_IT_WORKS.LABEL')"
+        :help-text="$t('INBOX_MGMT.WHATSAPP_CALLING.HOW_IT_WORKS.DESCRIPTION')"
+      />
+
+      <div>
+        <NextButton
+          :is-loading="isUpdating"
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          @click="updateCallingSettings"
+        />
+      </div>
+    </template>
+  </div>
+</template>
@@ -312,10 +312,14 @@ export const actions = {
    commit(types.CLEAR_CONTACT_FILTERS);
  },

-  initiateCall: async ({ commit }, { contactId, inboxId }) => {
+  initiateCall: async ({ commit }, { contactId, inboxId, conversationId }) => {
    commit(types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true });
    try {
-      const response = await ContactAPI.initiateCall(contactId, inboxId);
+      const response = await ContactAPI.initiateCall(
+        contactId,
+        inboxId,
+        conversationId
+      );
      commit(types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false });
      return response.data;
    } catch (error) {
@@ -329,12 +329,21 @@ const actions = {
      });
      commit(types.ADD_CONVERSATION_ATTACHMENTS, message);
    }
-    handleVoiceCallCreated(message, rootGetters?.getCurrentUserID);
+    handleVoiceCallCreated(
+      message,
+      rootGetters?.getCurrentUserID,
+      rootGetters?.getCurrentUserAvailability
+    );
  },

  updateMessage({ commit, rootGetters }, message) {
    commit(types.ADD_MESSAGE, message);
-    handleVoiceCallUpdated(commit, message, rootGetters?.getCurrentUserID);
+    handleVoiceCallUpdated(
+      commit,
+      message,
+      rootGetters?.getCurrentUserID,
+      rootGetters?.getCurrentUserAvailability
+    );
  },

  deleteMessage: async function deleteLabels(
@@ -1,7 +1,16 @@
 import { defineStore } from 'pinia';
 import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
+import { cleanupWhatsappSession } from 'dashboard/composables/useWhatsappCallSession';
 import { TERMINAL_STATUSES } from 'dashboard/helper/voice';

+const teardownByProvider = call => {
+  if (call?.provider === 'whatsapp') {
+    cleanupWhatsappSession();
+  } else {
+    TwilioVoiceClient.endClientCall();
+  }
+};
+
 export const useCallsStore = defineStore('calls', {
  state: () => ({
    calls: [],
@@ -16,15 +25,33 @@ export const useCallsStore = defineStore('calls', {

  actions: {
    handleCallStatusChanged({ callSid, status }) {
-      if (TERMINAL_STATUSES.includes(status)) {
-        this.removeCall(callSid);
+      if (!TERMINAL_STATUSES.includes(status)) return;
+
+      const call = this.calls.find(c => c.callSid === callSid);
+      // WhatsApp recordings live in the in-memory recorder until voice_call.ended
+      // uploads them; tearing down here would race-wipe those chunks.
+      if (call?.provider === 'whatsapp') {
+        this.calls = this.calls.filter(c => c.callSid !== callSid);
+        return;
      }
+
+      this.removeCall(callSid);
    },

    addCall(callData) {
      if (!callData?.callSid) return;
-      const exists = this.calls.some(call => call.callSid === callData.callSid);
-      if (exists) return;
+      const existing = this.calls.find(c => c.callSid === callData.callSid);
+      if (existing) {
+        // Merge so a later cable event with sdp_offer/provider/caller fills in
+        // gaps left by the earlier message.created path (and vice versa).
+        // Preserve a previously-captured caller snapshot when the incoming
+        // event has no sender info, otherwise the widget would flip to
+        // "Unknown caller" on the next status update.
+        const next = { ...callData };
+        if (existing.caller && !next.caller) delete next.caller;
+        Object.assign(existing, next, { isActive: existing.isActive });
+        return;
+      }

      this.calls.push({
        ...callData,
@@ -35,7 +62,7 @@ export const useCallsStore = defineStore('calls', {
    removeCall(callSid) {
      const callToRemove = this.calls.find(c => c.callSid === callSid);
      if (callToRemove?.isActive) {
-        TwilioVoiceClient.endClientCall();
+        teardownByProvider(callToRemove);
      }
      this.calls = this.calls.filter(c => c.callSid !== callSid);
    },
@@ -48,7 +75,8 @@ export const useCallsStore = defineStore('calls', {
    },

    clearActiveCall() {
-      TwilioVoiceClient.endClientCall();
+      const active = this.calls.find(c => c.isActive);
+      teardownByProvider(active);
      this.calls = this.calls.filter(call => !call.isActive);
    },

@@ -61,9 +89,10 @@ export const useCallsStore = defineStore('calls', {
        call => call.conversationId === conversationId
      );

-      if (callsToRemove.some(call => call.isActive)) {
-        TwilioVoiceClient.endClientCall();
-      }
+      // Tear down each active call via its own provider so a WhatsApp call
+      // gets cleanupWhatsappSession() (closes pc, stops recorder/mic) instead
+      // of the Twilio-only endClientCall() — otherwise mic stays open.
+      callsToRemove.filter(call => call.isActive).forEach(teardownByProvider);

      this.calls = this.calls.filter(
        call => call.conversationId !== conversationId
@@ -44,12 +44,18 @@ class Channel::Whatsapp < ApplicationRecord
  # Meta's Calling API is only available via the embedded-signup whatsapp_cloud flow —
  # 360dialog (default provider) and manual whatsapp_cloud setups can't reach the call APIs.
  def voice_enabled?
-    provider == 'whatsapp_cloud' &&
-      provider_config['source'] == 'embedded_signup' &&
+    voice_calling_supported? &&
      provider_config['calling_enabled'].present? &&
      account.feature_enabled?('channel_voice')
  end

+  # Whether this inbox can do WhatsApp calling at all. Meta's Calling API is only
+  # reachable via the embedded-signup whatsapp_cloud flow, so manual whatsapp_cloud
+  # and 360dialog inboxes can't be toggled on even though calling_enabled would persist.
+  def voice_calling_supported?
+    provider == 'whatsapp_cloud' && provider_config['source'] == 'embedded_signup'
+  end
+
  def provider_service
    if provider == 'whatsapp_cloud'
      Whatsapp::Providers::WhatsappCloudService.new(whatsapp_channel: self)
@@ -58,6 +64,34 @@ class Channel::Whatsapp < ApplicationRecord
    end
  end

+  # Enables voice: turns calling on at Meta (idempotent), subscribes the `calls`
+  # webhook field, and sets calling_enabled. Raises on Meta failure.
+  # Saved with validate: false to skip validate_provider_config's remote credential
+  # re-check, which could spuriously fail and desync the flag from Meta.
+  def enable_voice_calling!
+    raise 'WhatsApp calling requires an embedded-signup whatsapp_cloud inbox' unless voice_calling_supported?
+
+    provider_service.update_calling_status('ENABLED')
+    webhook_setup_service.register_callback
+    self.provider_config = provider_config.merge('calling_enabled' => true)
+    save!(validate: false)
+  end
+
+  # Disables voice: unsets calling_enabled (gates the call subsystem) and drops
+  # `calls` from the webhook subscription (best-effort, so a Meta outage can't
+  # trap admins). Leaves Meta's WABA calling.status untouched.
+  def disable_voice_calling!
+    raise 'WhatsApp calling requires an embedded-signup whatsapp_cloud inbox' unless voice_calling_supported?
+
+    self.provider_config = provider_config.merge('calling_enabled' => false)
+    save!(validate: false)
+    begin
+      webhook_setup_service.register_callback(subscribed_fields: %w[messages smb_message_echoes])
+    rescue StandardError => e
+      Rails.logger.warn "[WHATSAPP CALL] disable webhook re-subscribe failed: #{e.message}"
+    end
+  end
+
  def mark_message_templates_updated
    # rubocop:disable Rails/SkipsModelValidations
    update_column(:message_templates_last_updated, Time.zone.now)
@@ -88,10 +122,11 @@ class Channel::Whatsapp < ApplicationRecord
  end

  def perform_webhook_setup
-    business_account_id = provider_config['business_account_id']
-    api_key = provider_config['api_key']
+    webhook_setup_service.perform
+  end

-    Whatsapp::WebhookSetupService.new(self, business_account_id, api_key).perform
+  def webhook_setup_service
+    Whatsapp::WebhookSetupService.new(self, provider_config['business_account_id'], provider_config['api_key'])
  end

  def teardown_webhooks
@@ -69,4 +69,12 @@ class InboxPolicy < ApplicationPolicy
  def reset_secret?
    @account_user.administrator?
  end
+
+  def enable_whatsapp_calling?
+    @account_user.administrator?
+  end
+
+  def disable_whatsapp_calling?
+    @account_user.administrator?
+  end
 end
@@ -60,14 +60,16 @@ class Whatsapp::FacebookApiClient
    data['code_verification_status'] == 'VERIFIED'
  end

-  def subscribe_waba_webhook(waba_id, callback_url, verify_token)
+  WEBHOOK_DEFAULT_FIELDS = %w[messages smb_message_echoes calls].freeze
+
+  def subscribe_waba_webhook(waba_id, callback_url, verify_token, subscribed_fields: WEBHOOK_DEFAULT_FIELDS)
    # Step 1: Subscribe app to WABA first (required before override)
    # Meta requires the app to be subscribed before using override_callback_uri
    # See: https://github.com/chatwoot/chatwoot/issues/13097
    subscribe_app_to_waba(waba_id)

    # Step 2: Override callback URL for this specific WABA
-    override_waba_callback(waba_id, callback_url, verify_token)
+    override_waba_callback(waba_id, callback_url, verify_token, subscribed_fields: subscribed_fields)
  end

  def subscribe_app_to_waba(waba_id)
@@ -79,14 +81,14 @@ class Whatsapp::FacebookApiClient
    handle_response(response, 'App subscription to WABA failed')
  end

-  def override_waba_callback(waba_id, callback_url, verify_token)
+  def override_waba_callback(waba_id, callback_url, verify_token, subscribed_fields: WEBHOOK_DEFAULT_FIELDS)
    response = HTTParty.post(
      "#{BASE_URI}/#{@api_version}/#{waba_id}/subscribed_apps",
      headers: request_headers,
      body: {
        override_callback_uri: callback_url,
        verify_token: verify_token,
-        subscribed_fields: %w[messages smb_message_echoes calls]
+        subscribed_fields: subscribed_fields
      }.to_json
    )

@@ -17,9 +17,9 @@ class Whatsapp::WebhookSetupService
    setup_webhook
  end

-  def register_callback
+  def register_callback(subscribed_fields: nil)
    validate_parameters!
-    setup_webhook
+    setup_webhook(subscribed_fields: subscribed_fields)
  end

  private
@@ -55,12 +55,16 @@ class Whatsapp::WebhookSetupService
    @channel.save!
  end

-  def setup_webhook
+  def setup_webhook(subscribed_fields: nil)
    callback_url = build_callback_url
    verify_token = @channel.provider_config['webhook_verify_token']

-    @api_client.subscribe_waba_webhook(@waba_id, callback_url, verify_token)
-
+    args = [@waba_id, callback_url, verify_token]
+    if subscribed_fields
+      @api_client.subscribe_waba_webhook(*args, subscribed_fields: subscribed_fields)
+    else
+      @api_client.subscribe_waba_webhook(*args)
+    end
  rescue StandardError => e
    Rails.logger.error("[WHATSAPP] Webhook setup failed: #{e.message}")
    raise "Webhook setup failed: #{e.message}"
@@ -260,6 +260,8 @@ Rails.application.routes.draw do
              resource :conference, only: %i[create destroy], controller: 'conference' do
                get :token, on: :member
              end
+              post :enable_whatsapp_calling, on: :member
+              post :disable_whatsapp_calling, on: :member
            end

            resource :csat_template, only: [:show, :create], controller: 'inbox_csat_templates' do
@@ -27,7 +27,10 @@ class Api::V1::Accounts::ConferenceController < Api::V1::Accounts::BaseControlle

  def destroy
    call = resolve_call!
+    rejecting = agent_rejecting_before_pickup?(call)
+    # Tear down provider side first so a teardown failure leaves the call repairable.
    Voice::Provider::Twilio::ConferenceService.new(call: call).end_conference
+    finalize_as_agent_reject!(call) if rejecting
    render json: { status: 'success', id: call.conversation.display_id }
  end

@@ -59,4 +62,21 @@ class Api::V1::Accounts::ConferenceController < Api::V1::Accounts::BaseControlle
  def render_call_already_accepted(error)
    render json: { error: error.message }, status: :conflict
  end
+
+  # A hangup before pickup is treated as an agent rejection, matching WhatsApp.
+  def agent_rejecting_before_pickup?(call)
+    call.ringing? && call.accepted_by_agent_id.nil?
+  end
+
+  def finalize_as_agent_reject!(call)
+    # Re-check under a row lock: a webhook may have accepted/completed the call
+    # while end_conference was in flight, so don't force agent_rejected on stale state.
+    rejected = call.with_lock do
+      next false unless agent_rejecting_before_pickup?(call)
+
+      call.update!(status: 'failed', end_reason: 'agent_rejected', accepted_by_agent_id: Current.user.id)
+      true
+    end
+    Voice::CallMessageBuilder.new(call).update_status!(status: 'failed', agent: Current.user) if rejected
+  end
 end
@@ -3,12 +3,38 @@ module Enterprise::Api::V1::Accounts::InboxesController
    super + ee_inbox_attributes
  end

+  def enable_whatsapp_calling
+    return unless ensure_whatsapp_calling_supported
+
+    @inbox.channel.enable_voice_calling!
+    head :ok
+  rescue StandardError => e
+    render_could_not_create_error(e.message)
+  end
+
+  def disable_whatsapp_calling
+    return unless ensure_whatsapp_calling_supported
+
+    @inbox.channel.disable_voice_calling!
+    head :ok
+  rescue StandardError => e
+    render_could_not_create_error(e.message)
+  end
+
  def ee_inbox_attributes
    [auto_assignment_config: [:max_assignment_limit]]
  end

  private

+  def ensure_whatsapp_calling_supported
+    channel = @inbox.channel
+    return true if channel.is_a?(Channel::Whatsapp) && channel.voice_calling_supported?
+
+    render_could_not_create_error('Inbox does not support WhatsApp calling')
+    false
+  end
+
  def allowed_channel_types
    super + ['voice']
  end
@@ -116,6 +116,7 @@ class Call < ApplicationRecord
      direction: direction,
      status: display_status,
      duration_seconds: duration_seconds,
+      end_reason: end_reason,
      conference_sid: conference_sid,
      accepted_by_agent_id: accepted_by_agent_id,
      accepted_by_agent_name: accepted_by_agent&.available_name,
@@ -40,6 +40,22 @@ module Enterprise::Whatsapp::Providers::WhatsappCloudService
    process_initiate_call_response(response)
  end

+  # Sets WABA calling status ('ENABLED'/'DISABLED'). Returns true, or raises with
+  # Meta's user-facing message on failure so the caller can surface it.
+  def update_calling_status(status)
+    response = HTTParty.post(
+      "#{calls_phone_id_path}/settings",
+      headers: api_headers,
+      body: { calling: { status: status } }.to_json
+    )
+    return true if response.success?
+
+    parsed = response.parsed_response.is_a?(Hash) ? response.parsed_response : {}
+    message = parsed.dig('error', 'error_user_msg') || parsed.dig('error', 'message') || 'Failed to update calling status'
+    Rails.logger.error "[WHATSAPP CALL] update_calling_status failed: status=#{response.code} body=#{response.body}"
+    raise message
+  end
+
  private

  def calls_phone_id_path
@@ -4,6 +4,9 @@ class Voice::CallStatus::Manager
  def process_status_update(status, duration: nil, timestamp: nil)
    return unless Call::STATUSES.include?(status)
    return if call.status == status
+    # Don't overwrite a terminal status — Twilio's late `completed` events would
+    # otherwise clobber an agent-rejection reason.
+    return if Call::TERMINAL_STATUSES.include?(call.status)

    apply_call_updates!(status, duration: duration, timestamp: timestamp)
    call.conversation.update!(last_activity_at: Time.zone.now)
@@ -74,15 +74,14 @@ class Voice::InboundCallBuilder
    Whatsapp::PhoneNumberNormalizationService.new(inbox).normalize_and_find_contact_by_provider(digits, :cloud)
  end

+  # Mirror incoming-message routing: reuse the open conversation (or the last one when locked), else create new.
  def resolve_conversation!(contact, contact_inbox)
-    if inbox.lock_to_single_conversation
-      reusable = account.conversations
-                        .where(contact_id: contact.id, inbox_id: inbox.id)
-                        .where.not(status: :resolved)
-                        .order(last_activity_at: :desc)
-                        .first
-      return reusable if reusable
-    end
+    reusable = if inbox.lock_to_single_conversation
+                 contact_inbox.conversations.last
+               else
+                 contact_inbox.conversations.where.not(status: :resolved).last
+               end
+    return reusable if reusable

    account.conversations.create!(
      contact_inbox_id: contact_inbox.id,
@@ -20,7 +20,8 @@ class Whatsapp::CallService
      next if call.terminal? || call.in_progress?

      invoke_provider!(:reject_call)
-      finalize_call('failed')
+      call.update!(accepted_by_agent_id: agent.id) if call.accepted_by_agent_id.nil?
+      finalize_call('failed', end_reason: 'agent_rejected')
    end
    call
  end
@@ -159,17 +159,22 @@ class Whatsapp::IncomingCallService
    )
  end

-  # Ring the assignee if assigned; otherwise account-wide so any agent can pick up.
+  # Ring the assignee if any, else online inbox agents, else the whole account.
  def broadcast_incoming(call, sdp_offer)
    contact = call.contact
    token = call.conversation.assignee&.pubsub_token
+    streams = token ? [token] : (online_agent_streams.presence || account_streams)
    broadcast(call, 'voice_call.incoming',
-              streams: token ? [token] : account_streams,
+              streams: streams,
              direction: call.direction_label, inbox_id: call.inbox_id,
              sdp_offer: sdp_offer, ice_servers: Call.default_ice_servers,
              caller: { name: contact.name, phone: contact.phone_number, avatar: contact.avatar_url })
  end

+  def online_agent_streams
+    inbox.available_agents.pluck('users.pubsub_token').compact
+  end
+
  def broadcast(call, event, streams: account_streams, **extra)
    payload = { event: event, data: base_payload(call).merge(extra) }
    streams.each { |s| ActionCable.server.broadcast(s, payload) }