feat(voice): WhatsApp Cloud Calling — UI [6] (#14346)

## Summary

Frontend for WhatsApp Cloud Calling: header / contact-panel call
buttons, ringing widget, accept/reject/hangup, mute, in-bubble audio
player + transcript, recording-on-hangup upload, mid-call reload
warning. WebRTC is browser-direct to Meta — no media server bridge.

## Closes
- https://linear.app/chatwoot/issue/PLA-150

## How to test

Requires backend support — the controller, services, model changes, and
routes ship in **#14334** (`feature/pla-150`). Merge / deploy that first
(or simultaneously); the FE alone won't function without those
endpoints.

Then on staging, for a WhatsApp Cloud + embedded-signup inbox with the
new \`Configuration → Enable voice calling\` toggle ON and webhook
registered:

1. **Outbound** — open a conversation, click the phone icon in the
conversation header (or contact panel), grant mic, your phone rings,
answer, audio both ways, hang up. Recording + transcript land in the
bubble within ~10s.
2. **Inbound** — call the business number from your phone. The
FloatingCallWidget appears bottom-right with caller name. Click accept,
audio both ways, hang up. Recording + transcript appear.
3. **Mute** — during an active WhatsApp call, click the mic icon next to
hangup. Speech stops reaching Meta until you click again.
4. **Mid-call reload guard** — try `Cmd-R` during an active call;
browser shows a confirm prompt.

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/helper/actionCable.js

@@ -4,6 +4,15 @@ 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';
+import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
+import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const { isImpersonating } = useImpersonation();
@@ -41,6 +50,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,
     };
   }
 
@@ -261,6 +274,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 !== VOICE_CALL_PROVIDERS.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: VOICE_CALL_DIRECTION.INBOUND,
+      provider: VOICE_CALL_PROVIDERS.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 !== VOICE_CALL_PROVIDERS.WHATSAPP || !data.sdp_answer)
+      return;
+    // Account-wide broadcast that can arrive before /initiate sets this tab's
+    // call id. applyOutboundAnswer filters foreign calls and buffers the answer
+    // until the id is known, so we must not drop it here on a null activeCallId.
+    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 !== VOICE_CALL_PROVIDERS.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 !== VOICE_CALL_PROVIDERS.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 {

app/javascript/dashboard/helper/inbox.js

@@ -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;
 };

app/javascript/dashboard/helper/voice.js

@@ -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));
 }