## 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>
104 lines
3.4 KiB
JavaScript
104 lines
3.4 KiB
JavaScript
import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
|
|
import { cleanupWhatsappSession } from 'dashboard/composables/useWhatsappCallSession';
|
|
import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
|
|
import { TERMINAL_STATUSES } from 'dashboard/helper/voice';
|
|
import { defineStore } from 'pinia';
|
|
|
|
const teardownByProvider = call => {
|
|
if (call?.provider === VOICE_CALL_PROVIDERS.WHATSAPP) {
|
|
cleanupWhatsappSession();
|
|
} else {
|
|
TwilioVoiceClient.endClientCall();
|
|
}
|
|
};
|
|
|
|
export const useCallsStore = defineStore('calls', {
|
|
state: () => ({
|
|
calls: [],
|
|
}),
|
|
|
|
getters: {
|
|
activeCall: state => state.calls.find(call => call.isActive) || null,
|
|
hasActiveCall: state => state.calls.some(call => call.isActive),
|
|
incomingCalls: state => state.calls.filter(call => !call.isActive),
|
|
hasIncomingCall: state => state.calls.some(call => !call.isActive),
|
|
},
|
|
|
|
actions: {
|
|
handleCallStatusChanged({ callSid, status }) {
|
|
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 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,
|
|
isActive: false,
|
|
});
|
|
},
|
|
|
|
removeCall(callSid) {
|
|
const callToRemove = this.calls.find(c => c.callSid === callSid);
|
|
if (callToRemove?.isActive) {
|
|
teardownByProvider(callToRemove);
|
|
}
|
|
this.calls = this.calls.filter(c => c.callSid !== callSid);
|
|
},
|
|
|
|
setCallActive(callSid) {
|
|
this.calls = this.calls.map(call => ({
|
|
...call,
|
|
isActive: call.callSid === callSid,
|
|
}));
|
|
},
|
|
|
|
clearActiveCall() {
|
|
const active = this.calls.find(c => c.isActive);
|
|
teardownByProvider(active);
|
|
this.calls = this.calls.filter(call => !call.isActive);
|
|
},
|
|
|
|
dismissCall(callSid) {
|
|
this.calls = this.calls.filter(call => call.callSid !== callSid);
|
|
},
|
|
|
|
removeCallsForConversation(conversationId) {
|
|
const callsToRemove = this.calls.filter(
|
|
call => call.conversationId === conversationId
|
|
);
|
|
|
|
// 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
|
|
);
|
|
},
|
|
},
|
|
});
|