c4a6a19e9b
## 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>
106 lines
2.1 KiB
JavaScript
106 lines
2.1 KiB
JavaScript
export const MESSAGE_TYPES = {
|
|
INCOMING: 0,
|
|
OUTGOING: 1,
|
|
ACTIVITY: 2,
|
|
TEMPLATE: 3,
|
|
};
|
|
|
|
export const MESSAGE_VARIANTS = {
|
|
USER: 'user',
|
|
AGENT: 'agent',
|
|
ACTIVITY: 'activity',
|
|
PRIVATE: 'private',
|
|
BOT: 'bot',
|
|
ERROR: 'error',
|
|
TEMPLATE: 'template',
|
|
EMAIL: 'email',
|
|
UNSUPPORTED: 'unsupported',
|
|
};
|
|
|
|
export const SENDER_TYPES = {
|
|
CONTACT: 'Contact',
|
|
USER: 'User',
|
|
AGENT_BOT: 'agent_bot',
|
|
CAPTAIN_ASSISTANT: 'captain_assistant',
|
|
};
|
|
|
|
export const ORIENTATION = {
|
|
LEFT: 'left',
|
|
RIGHT: 'right',
|
|
CENTER: 'center',
|
|
};
|
|
|
|
export const MESSAGE_STATUS = {
|
|
SENT: 'sent',
|
|
DELIVERED: 'delivered',
|
|
READ: 'read',
|
|
FAILED: 'failed',
|
|
PROGRESS: 'progress',
|
|
};
|
|
|
|
export const ATTACHMENT_TYPES = {
|
|
IMAGE: 'image',
|
|
AUDIO: 'audio',
|
|
VIDEO: 'video',
|
|
FILE: 'file',
|
|
LOCATION: 'location',
|
|
FALLBACK: 'fallback',
|
|
SHARE: 'share',
|
|
STORY_MENTION: 'story_mention',
|
|
CONTACT: 'contact',
|
|
IG_REEL: 'ig_reel',
|
|
EMBED: 'embed',
|
|
IG_POST: 'ig_post',
|
|
IG_STORY: 'ig_story',
|
|
IG_STORY_REPLY: 'ig_story_reply',
|
|
};
|
|
|
|
export const CONTENT_TYPES = {
|
|
TEXT: 'text',
|
|
INPUT_TEXT: 'input_text',
|
|
INPUT_TEXTAREA: 'input_textarea',
|
|
INPUT_EMAIL: 'input_email',
|
|
INPUT_SELECT: 'input_select',
|
|
CARDS: 'cards',
|
|
FORM: 'form',
|
|
ARTICLE: 'article',
|
|
INCOMING_EMAIL: 'incoming_email',
|
|
INPUT_CSAT: 'input_csat',
|
|
INTEGRATIONS: 'integrations',
|
|
STICKER: 'sticker',
|
|
VOICE_CALL: 'voice_call',
|
|
};
|
|
|
|
export const MEDIA_TYPES = [
|
|
ATTACHMENT_TYPES.IMAGE,
|
|
ATTACHMENT_TYPES.VIDEO,
|
|
ATTACHMENT_TYPES.AUDIO,
|
|
ATTACHMENT_TYPES.IG_REEL,
|
|
];
|
|
|
|
export const VOICE_CALL_STATUS = {
|
|
IN_PROGRESS: 'in-progress',
|
|
RINGING: 'ringing',
|
|
COMPLETED: 'completed',
|
|
NO_ANSWER: 'no-answer',
|
|
FAILED: 'failed',
|
|
};
|
|
|
|
export const VOICE_CALL_DIRECTION = {
|
|
INBOUND: 'inbound',
|
|
INCOMING: 'incoming',
|
|
OUTGOING: 'outgoing',
|
|
ONGOING: 'ongoing',
|
|
OUTBOUND: 'outbound',
|
|
};
|
|
|
|
export const VOICE_CALL_OUTBOUND_INIT_STATUS = {
|
|
LOCKED: 'locked',
|
|
PERMISSION_REQUESTED: 'permission_requested',
|
|
PERMISSION_PENDING: 'permission_pending',
|
|
};
|
|
|
|
export const VOICE_CALL_END_REASON = {
|
|
AGENT_REJECTED: 'agent_rejected',
|
|
};
|