## 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>
210 lines
5.4 KiB
JavaScript
210 lines
5.4 KiB
JavaScript
import { CONTENT_TYPES } from 'dashboard/components-next/message/constants';
|
|
import { useCallsStore } from 'dashboard/stores/calls';
|
|
import types from 'dashboard/store/mutation-types';
|
|
|
|
export const TERMINAL_STATUSES = [
|
|
'completed',
|
|
'busy',
|
|
'failed',
|
|
'no-answer',
|
|
'canceled',
|
|
'missed',
|
|
'ended',
|
|
];
|
|
|
|
export const isInbound = direction => direction === 'inbound';
|
|
|
|
const isVoiceCallMessage = message => {
|
|
return CONTENT_TYPES.VOICE_CALL === message?.content_type;
|
|
};
|
|
|
|
const shouldSkipCall = (callDirection, senderId, currentUserId) => {
|
|
return callDirection === 'outbound' && senderId !== currentUserId;
|
|
};
|
|
|
|
const extractAssigneeId = conversation => {
|
|
return conversation?.assignee_id || conversation?.meta?.assignee?.id || null;
|
|
};
|
|
|
|
const isAssignedToAnotherAgent = (assigneeId, currentUserId) => {
|
|
if (currentUserId == null) return false;
|
|
return !!assigneeId && assigneeId !== currentUserId;
|
|
};
|
|
|
|
const shouldShowCall = ({
|
|
callDirection,
|
|
senderId,
|
|
assigneeId,
|
|
currentUserId,
|
|
}) => {
|
|
if (shouldSkipCall(callDirection, senderId, currentUserId)) return false;
|
|
// Outbound calls are scoped to the initiator via shouldSkipCall; the
|
|
// conversation may be auto-assigned to a different agent on creation, so
|
|
// skip the assignee filter for outbound to avoid hiding the caller's own widget.
|
|
if (callDirection === 'outbound') return true;
|
|
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,
|
|
currentUserAvailability
|
|
) {
|
|
if (!isVoiceCallMessage(message)) return;
|
|
|
|
const {
|
|
callSid,
|
|
callId,
|
|
provider,
|
|
callDirection,
|
|
conversationId,
|
|
inboxId,
|
|
assigneeId,
|
|
senderId,
|
|
} = extractCallData(message);
|
|
|
|
if (
|
|
!shouldShowCall({
|
|
callDirection,
|
|
senderId,
|
|
assigneeId,
|
|
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,
|
|
currentUserAvailability
|
|
) {
|
|
if (!isVoiceCallMessage(message)) return;
|
|
|
|
const {
|
|
callSid,
|
|
callId,
|
|
provider,
|
|
status,
|
|
callDirection,
|
|
conversationId,
|
|
inboxId,
|
|
assigneeId,
|
|
senderId,
|
|
} = extractCallData(message);
|
|
|
|
const callsStore = useCallsStore();
|
|
|
|
callsStore.handleCallStatusChanged({ callSid, status, conversationId });
|
|
|
|
commit(types.UPDATE_MESSAGE_CALL_STATUS, {
|
|
conversationId,
|
|
callStatus: status,
|
|
callSid,
|
|
});
|
|
|
|
if (
|
|
!shouldShowCall({
|
|
callDirection,
|
|
senderId,
|
|
assigneeId,
|
|
currentUserId,
|
|
})
|
|
) {
|
|
callsStore.removeCall(callSid);
|
|
return;
|
|
}
|
|
|
|
if (status === 'ringing') {
|
|
if (!shouldRingInbound(callDirection, currentUserAvailability)) return;
|
|
|
|
callsStore.addCall({
|
|
callSid,
|
|
callId,
|
|
provider,
|
|
conversationId,
|
|
inboxId,
|
|
callDirection,
|
|
senderId,
|
|
caller: extractCallerSnapshot(message),
|
|
});
|
|
}
|
|
}
|
|
|
|
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();
|
|
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));
|
|
}
|