debug(voice): surface accept-call diagnostics via toast alerts

Console logs aren't visible to the agent on staging — switch to
useAlert toasts so the debug breadcrumbs appear directly in the UI.
Will revert once root cause is identified.

app/javascript/dashboard/api/channel/whatsapp/whatsappCallsAPI.js

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

app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

@@ -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';
@@ -58,9 +64,63 @@ const navigateToConversation = conversationId => {
   }
 };
 
+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).
+const findWhatsappConversationId = async inboxId => {
+  const { data } = await ContactAPI.getConversations(props.contactId);
+  const conversations = data?.payload || [];
+  const match = conversations
+    .filter(c => c.inbox_id === inboxId)
+    .sort((a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0))[0];
+  return match?.id || null;
+};
+
+const startWhatsappCall = async inboxId => {
+  const conversationId = await findWhatsappConversationId(inboxId);
+  if (!conversationId) {
+    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
+    return;
+  }
+
+  const response =
+    await whatsappCallSession.initiateOutboundCall(conversationId);
+  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();
+  callsStore.addCall({
+    callSid: response.call_id,
+    callId: response.id,
+    conversationId,
+    inboxId,
+    callDirection: 'outbound',
+    provider: 'whatsapp',
+  });
+  callsStore.setCallActive(response.call_id);
+
+  useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+  navigateToConversation(conversationId);
+};
+
 const startCall = async inboxId => {
   if (isInitiatingCall.value) return;
 
+  const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
+  if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
+    try {
+      await startWhatsappCall(inboxId);
+    } catch (error) {
+      useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+    }
+    return;
+  }
+
   try {
     const response = await store.dispatch('contacts/initiateCall', {
       contactId: props.contactId,

app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue

@@ -0,0 +1,25 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="text-n-slate-12 max-w-80 flex flex-col gap-2.5">
+    <div class="p-3 bg-n-alpha-2 rounded-xl">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="flex gap-2">
+      <Button label="Call us" slate class="!text-n-blue-11 w-full" />
+      <Button label="Visit our website" slate class="!text-n-blue-11 w-full" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue

@@ -10,22 +10,22 @@ defineProps({
 
 <template>
   <div
-    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
   >
     <div class="px-3 py-2.5">
-      <img :src="message.image_url" class="w-full max-h-44 rounded-lg" />
-      <div class="flex flex-col gap-2 pt-2.5">
+      <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+      <div class="pt-2.5 flex flex-col gap-2">
         <h6 class="font-semibold">{{ message.title }}</h6>
         <span
           v-dompurify-html="message.content"
-          class="text-sm prose prose-bubble"
+          class="prose prose-bubble text-sm"
         />
       </div>
     </div>
-    <div class="flex justify-center items-center p-3">
+    <div class="p-3 flex items-center justify-center">
       <Button label="Call us to order" link class="hover:!no-underline" />
     </div>
-    <div class="flex justify-center items-center p-3">
+    <div class="p-3 flex items-center justify-center">
       <Button label="Visit our store" link class="hover:!no-underline" />
     </div>
   </div>

app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue

@@ -0,0 +1,25 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="See options" link class="hover:!no-underline" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 text-n-slate-12 rounded-xl flex flex-col gap-2.5 p-3 max-w-80"
+  >
+    <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+    <span
+      v-dompurify-html="message.content"
+      class="prose prose-bubble font-medium text-sm"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue

@@ -0,0 +1,68 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="No, that will be all" link class="hover:!no-underline">
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button
+        label="I want to talk to an agents"
+        link
+        class="hover:!no-underline"
+      >
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80">
+  <div class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80">
     <span v-dompurify-html="message.content" class="prose prose-bubble" />
   </div>
 </template>

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -1,18 +1,22 @@
 <script setup>
 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 Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
+import AudioChip from 'dashboard/components-next/message/chips/Audio.vue';
 
 const LABEL_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
   [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
 };
 
+const SUBTEXT_MAP = {
+  [VOICE_CALL_STATUS.RINGING]: 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
 const ICON_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
   [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
@@ -27,39 +31,36 @@ const BG_COLOR_MAP = {
   [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };
 
-const { t } = useI18n();
-const store = useStore();
-const { call, conversationId, currentUserId } = useMessageContext();
+const { call, attachments, contentAttributes } = useMessageContext();
 
 const status = computed(() => call.value?.status);
 const isOutbound = computed(() => call.value?.direction === 'outgoing');
 const isFailed = computed(() =>
   [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
-const acceptedByAgentId = computed(() => call.value?.accepted_by_agent_id);
-const didCurrentUserAnswer = computed(
-  () =>
-    !!acceptedByAgentId.value && acceptedByAgentId.value === currentUserId.value
+
+const audioAttachment = computed(() =>
+  (attachments?.value || []).find(a => a.fileType === 'audio')
 );
-// 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
-  );
-  return conversation?.meta?.assignee || null;
+
+// Duration lives in two places depending on which payload the FE got:
+//   - call.duration_seconds / call.durationSeconds  (push_event_data shape)
+//   - content_attributes.data.duration_seconds      (message-side mirror)
+// Both can be camelCased by useTransformKeys upstream — check every variant.
+const durationSeconds = computed(() => {
+  const fromCall = call.value?.durationSeconds || call.value?.duration_seconds;
+  if (fromCall != null) return fromCall;
+
+  const data = contentAttributes?.value?.data || contentAttributes?.value?.data;
+  return data?.durationSeconds || data?.duration_seconds;
 });
-const displayAgentName = computed(() => {
-  if (call.value?.accepted_by_agent_name)
-    return call.value.accepted_by_agent_name;
-  if (acceptedByAgentId.value) {
-    const agent = store.getters['agents/getAgentById'](acceptedByAgentId.value);
-    if (agent?.available_name) return agent.available_name;
-    if (agent?.name) return agent.name;
-  }
-  return conversationAssignee.value?.name || null;
+
+const formattedDuration = computed(() => {
+  const s = Number(durationSeconds.value);
+  if (!s || Number.isNaN(s)) return '';
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
 });
 
 const labelKey = computed(() => {
@@ -74,28 +75,16 @@ const labelKey = computed(() => {
     : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });
 
-const subtext = computed(() => {
-  if (status.value === VOICE_CALL_STATUS.RINGING) {
-    return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
-  }
-  if (status.value === VOICE_CALL_STATUS.COMPLETED) {
-    return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
-  }
+const subtextKey = computed(() => {
+  if (SUBTEXT_MAP[status.value]) return SUBTEXT_MAP[status.value];
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    if (isOutbound.value) return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
-    if (didCurrentUserAnswer.value) {
-      return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
-    }
-    if (displayAgentName.value) {
-      return t('CONVERSATION.VOICE_CALL.AGENT_ANSWERED', {
-        agentName: displayAgentName.value,
-      });
-    }
-    return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
+      : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
   }
   return isFailed.value
-    ? t('CONVERSATION.VOICE_CALL.NO_ANSWER')
-    : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+    ? 'CONVERSATION.VOICE_CALL.NO_ANSWER'
+    : 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
 });
 
 const iconName = computed(() => {
@@ -129,10 +118,19 @@ const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
             {{ $t(labelKey) }}
           </span>
           <span class="text-xs text-n-slate-11">
-            {{ subtext }}
+            <!-- When the audio chip is rendered it already shows duration in
+                 its own player; suppress here to avoid two competing numbers. -->
+            {{
+              audioAttachment
+                ? $t(subtextKey)
+                : formattedDuration || $t(subtextKey)
+            }}
           </span>
         </div>
       </div>
+      <div v-if="audioAttachment" class="px-3 pb-3 w-full">
+        <AudioChip :attachment="audioAttachment" class="text-n-slate-12" />
+      </div>
     </div>
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/chips/Audio.vue

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

app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue

@@ -0,0 +1,21 @@
+<script setup>
+import CallToAction from '../../bubbles/Template/CallToAction.vue';
+
+const message = {
+  content:
+    'We have super cool products going live! Pre-order and customize products. Contact us for more details',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/CallToAction"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Call To Action">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <CallToAction :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Card from '../../bubbles/Template/Card.vue';
+
+const message = {
+  title: 'Two in one cake (1 pound)',
+  content: 'Customize your order for special occasions',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Card"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Card">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Card :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue

@@ -0,0 +1,21 @@
+<script setup>
+import ListPicker from '../../bubbles/Template/ListPicker.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you? `,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/ListPicker"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="ListPicker">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <ListPicker :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Media from '../../bubbles/Template/Media.vue';
+
+const message = {
+  content:
+    'Welcome to our Diwali sale! Get flat 50% off on select items. Hurry now!',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Media"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Image Media">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Media :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue

@@ -0,0 +1,21 @@
+<script setup>
+import QuickReply from '../../bubbles/Template/QuickReply.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you?`,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/QuickReply"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Quick Replies">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <QuickReply :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue

@@ -0,0 +1,20 @@
+<script setup>
+import Text from '../../bubbles/Template/Text.vue';
+
+const message = {
+  content: 'Hello John, how may we assist you?',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Text"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default Text">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Text :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/template-preview/CallToActionTemplate.vue

@@ -1,33 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div class="flex flex-col gap-2.5 text-n-slate-12 max-w-80">
-    <div class="p-3 rounded-xl bg-n-alpha-2">
-      <span
-        v-dompurify-html="message.content"
-        class="text-sm font-medium prose prose-bubble"
-      />
-    </div>
-    <div
-      v-if="message.buttons && message.buttons.length > 0"
-      class="flex flex-col gap-2"
-    >
-      <Button
-        v-for="(button, index) in message.buttons"
-        :key="index"
-        :label="button.text || button.title || 'Button'"
-        slate
-        class="!text-n-blue-11 w-full"
-      />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/MediaTemplate.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import FileIcon from 'dashboard/components-next/icon/FileIcon.vue';
-
-const props = defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-
-const PDF_EXTENSIONS = ['.pdf', 'pdf'];
-const VIDEO_EXTENSIONS = ['.mp4', '.mov', 'video'];
-const DOC_EXTENSIONS = ['.doc'];
-
-const mediaType = computed(() => {
-  if (props.message.mediaType) return props.message.mediaType;
-
-  const format = props.message.header?.format;
-  if (format) return format.toLowerCase();
-
-  const url = props.message.image_url || '';
-  if (PDF_EXTENSIONS.some(ext => url.includes(ext))) return 'document';
-  if (VIDEO_EXTENSIONS.some(ext => url.includes(ext))) return 'video';
-  return 'image';
-});
-
-const fileType = computed(() => {
-  const url = props.message.image_url || '';
-  return DOC_EXTENSIONS.some(ext => url.includes(ext)) ? 'doc' : 'pdf';
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-2.5 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
-  >
-    <img
-      v-if="mediaType === 'image'"
-      :src="message.image_url"
-      class="object-cover w-full max-h-44 rounded-lg"
-      alt="Template media"
-    />
-
-    <div
-      v-else-if="mediaType === 'video'"
-      class="overflow-hidden relative rounded-lg"
-    >
-      <video
-        :src="message.image_url"
-        class="object-cover w-full max-h-44"
-        controls
-        preload="metadata"
-      />
-    </div>
-
-    <div v-else-if="mediaType === 'document'" class="flex items-center">
-      <FileIcon :file-type="fileType" class="text-2xl text-n-slate-12" />
-    </div>
-
-    <span
-      v-if="message.content"
-      v-dompurify-html="message.content"
-      class="text-sm font-medium prose prose-bubble"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/QuickReplyTemplate.vue

@@ -1,42 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-
-const actions = computed(() => props.message.actions || []);
-</script>
-
-<template>
-  <div
-    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
-  >
-    <div class="p-3">
-      <span
-        v-dompurify-html="message.content"
-        class="text-sm font-medium prose prose-bubble"
-      />
-    </div>
-    <div
-      v-for="(action, index) in actions"
-      :key="index"
-      class="flex justify-center items-center p-3"
-    >
-      <Button
-        :label="action.title || action.text || 'Button'"
-        link
-        class="hover:!no-underline"
-      >
-        <template #icon>
-          <Icon icon="i-woot-quick-reply" class="size-[15px]" />
-        </template>
-      </Button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreview.story.vue

@@ -1,105 +0,0 @@
-<script setup>
-import TemplatePreview from './TemplatePreview.vue';
-import {
-  whatsAppTemplates,
-  getWhatsAppVariables,
-} from './templates/whatsapp-templates.js';
-import { twilioTemplates } from './templates/twilio-templates.js';
-
-const findWhatsApp = name => whatsAppTemplates.find(t => t.name === name);
-const findTwilio = name => twilioTemplates.find(t => t.friendly_name === name);
-
-const greet = findWhatsApp('greet');
-const eventInvitation = findWhatsApp('event_invitation_static');
-const orderConfirmation = findWhatsApp('order_confirmation');
-const discountCoupon = findWhatsApp('discount_coupon');
-const trainingVideo = findWhatsApp('training_video');
-
-const twilioGreet = findTwilio('greet');
-const shoeLaunch = findTwilio('shoe_launch');
-const welcomeMessage = findTwilio('welcome_message_new');
-const courseFeeReminder = findTwilio('course_fee_reminder');
-</script>
-
-<template>
-  <Story
-    title="Components/TemplatePreview"
-    :layout="{ type: 'grid', width: 400 }"
-  >
-    <Variant title="WhatsApp - Simple Text">
-      <TemplatePreview
-        :template="greet"
-        :variables="getWhatsAppVariables(greet)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Simple Text (No Variables)">
-      <TemplatePreview :template="greet" :variables="{}" platform="whatsapp" />
-    </Variant>
-
-    <Variant title="WhatsApp - Call to Action Buttons">
-      <TemplatePreview
-        :template="eventInvitation"
-        :variables="getWhatsAppVariables(eventInvitation)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Image Media">
-      <TemplatePreview
-        :template="orderConfirmation"
-        :variables="getWhatsAppVariables(orderConfirmation)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Video Media">
-      <TemplatePreview
-        :template="trainingVideo"
-        :variables="getWhatsAppVariables(trainingVideo)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Copy Code">
-      <TemplatePreview
-        :template="discountCoupon"
-        :variables="getWhatsAppVariables(discountCoupon)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Text">
-      <TemplatePreview
-        :template="twilioGreet"
-        :variables="twilioGreet.variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Media">
-      <TemplatePreview
-        :template="shoeLaunch"
-        :variables="shoeLaunch.variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Quick Reply">
-      <TemplatePreview
-        :template="welcomeMessage"
-        :variables="welcomeMessage.variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Call to Action">
-      <TemplatePreview
-        :template="courseFeeReminder"
-        :variables="courseFeeReminder.variables"
-        platform="twilio"
-      />
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue

@@ -1,112 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
-import {
-  PLATFORMS,
-  TEMPLATE_TYPES,
-  WA_HEADER_FORMATS,
-  WA_MEDIA_FORMATS,
-} from 'dashboard/services/TemplateConstants';
-
-import CardTemplate from './CardTemplate.vue';
-import CallToActionTemplate from './CallToActionTemplate.vue';
-import MediaTemplate from './MediaTemplate.vue';
-import WhatsAppTextTemplate from './WhatsAppTextTemplate.vue';
-import QuickReplyTemplate from './QuickReplyTemplate.vue';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    required: true,
-  },
-  variables: {
-    type: Object,
-    default: () => ({}),
-  },
-  platform: {
-    type: String,
-    required: true,
-    validator: value => Object.values(PLATFORMS).includes(value),
-  },
-});
-
-const COMPONENT_MAP = {
-  [TEMPLATE_TYPES.WHATSAPP_TEXT]: WhatsAppTextTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER]: WhatsAppTextTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE]: MediaTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO]: MediaTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT]: MediaTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_INTERACTIVE]: CallToActionTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_COPY_CODE]: CallToActionTemplate,
-  [TEMPLATE_TYPES.TWILIO_TEXT]: WhatsAppTextTemplate,
-  [TEMPLATE_TYPES.TWILIO_MEDIA]: MediaTemplate,
-  [TEMPLATE_TYPES.TWILIO_QUICK_REPLY]: QuickReplyTemplate,
-  [TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION]: CallToActionTemplate,
-  [TEMPLATE_TYPES.TWILIO_CARD]: CardTemplate,
-};
-
-const substituteVariables = (text, variables) => {
-  if (!text) return '';
-  return text.replace(/\{\{([^}]+)\}\}/g, (match, variable) => {
-    const value = variables[variable];
-    return value !== undefined && value !== '' ? value : `[${variable}]`;
-  });
-};
-
-const processedTemplate = computed(() => {
-  const normalized = TemplateNormalizer.normalize(
-    props.template,
-    props.platform
-  );
-
-  let content = '';
-  let imageUrl = '';
-  let title = '';
-  let footer = '';
-
-  if (props.platform === PLATFORMS.WHATSAPP) {
-    content = normalized.body?.text || '';
-
-    if (normalized.header) {
-      if (WA_MEDIA_FORMATS.includes(normalized.header.format)) {
-        imageUrl = normalized.header.example?.header_handle?.[0] || '';
-      }
-      if (normalized.header.format === WA_HEADER_FORMATS.TEXT) {
-        title = normalized.header.text || '';
-      }
-    }
-
-    footer = normalized.footer?.text || '';
-  } else {
-    content = normalized.body || '';
-
-    if (normalized.media && normalized.media.length > 0) {
-      imageUrl = normalized.media[0];
-    }
-  }
-
-  const buttons = normalized.buttons?.length
-    ? normalized.buttons
-    : normalized.actions || [];
-
-  return {
-    ...normalized,
-    content: substituteVariables(content, props.variables),
-    title: substituteVariables(title, props.variables),
-    footer: substituteVariables(footer, props.variables),
-    image_url: substituteVariables(imageUrl, props.variables),
-    buttons,
-    actions: normalized.actions || [],
-  };
-});
-
-const previewComponent = computed(
-  () => COMPONENT_MAP[processedTemplate.value.type] || WhatsAppTextTemplate
-);
-</script>
-
-<template>
-  <div class="template-preview">
-    <component :is="previewComponent" :message="processedTemplate" />
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue

@@ -1,199 +0,0 @@
-<script setup>
-import TemplatePreview from './TemplatePreview.vue';
-import {
-  whatsAppTemplates,
-  getWhatsAppVariables,
-} from './templates/whatsapp-templates.js';
-import { twilioTemplates } from './templates/twilio-templates.js';
-</script>
-
-<template>
-  <Story
-    title="Components/TemplatePreviewExamples"
-    :layout="{ type: 'grid', width: 400 }"
-  >
-    <Variant title="WA: Event Invitation (Buttons)">
-      <TemplatePreview
-        :template="whatsAppTemplates[0]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[0])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Purchase Receipt (Document)">
-      <TemplatePreview
-        :template="whatsAppTemplates[1]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[1])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Discount Coupon (Copy Code)">
-      <TemplatePreview
-        :template="whatsAppTemplates[2]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[2])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Support Callback (Phone)">
-      <TemplatePreview
-        :template="whatsAppTemplates[3]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[3])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Training Video (Video)">
-      <TemplatePreview
-        :template="whatsAppTemplates[4]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[4])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Order Confirmation (Image)">
-      <TemplatePreview
-        :template="whatsAppTemplates[5]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[5])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Product Launch (Image + Footer)">
-      <TemplatePreview
-        :template="whatsAppTemplates[6]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[6])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Technician Visit (Header + Buttons)">
-      <TemplatePreview
-        :template="whatsAppTemplates[7]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[7])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Greet (Simple Text)">
-      <TemplatePreview
-        :template="whatsAppTemplates[8]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[8])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Hello World (Header + Footer)">
-      <TemplatePreview
-        :template="whatsAppTemplates[9]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[9])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Feedback Request (Button)">
-      <TemplatePreview
-        :template="whatsAppTemplates[10]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[10])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Address Update (Header)">
-      <TemplatePreview
-        :template="whatsAppTemplates[11]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[11])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Delivery Confirmation">
-      <TemplatePreview
-        :template="whatsAppTemplates[12]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[12])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Shoe Launch (Media)">
-      <TemplatePreview
-        :template="twilioTemplates[0]"
-        :variables="twilioTemplates[0].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Product Launch Custom Price (Media)">
-      <TemplatePreview
-        :template="twilioTemplates[1]"
-        :variables="twilioTemplates[1].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Product Launch (Media)">
-      <TemplatePreview
-        :template="twilioTemplates[2]"
-        :variables="twilioTemplates[2].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Greet (Text)">
-      <TemplatePreview
-        :template="twilioTemplates[3]"
-        :variables="twilioTemplates[3].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Order Status (Text)">
-      <TemplatePreview
-        :template="twilioTemplates[4]"
-        :variables="twilioTemplates[4].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Hello World (Text)">
-      <TemplatePreview
-        :template="twilioTemplates[5]"
-        :variables="twilioTemplates[5].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Welcome Message New (Quick Reply)">
-      <TemplatePreview
-        :template="twilioTemplates[6]"
-        :variables="twilioTemplates[6].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: SaaS WhatsApp Question (Quick Reply)">
-      <TemplatePreview
-        :template="twilioTemplates[7]"
-        :variables="twilioTemplates[7].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Welcome Message (Quick Reply)">
-      <TemplatePreview
-        :template="twilioTemplates[8]"
-        :variables="twilioTemplates[8].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Course Fee Reminder (Call to Action)">
-      <TemplatePreview
-        :template="twilioTemplates[9]"
-        :variables="twilioTemplates[9].variables"
-        platform="twilio"
-      />
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue

@@ -1,26 +0,0 @@
-<script setup>
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-2 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
-  >
-    <div v-if="message.title" class="text-base font-bold">
-      {{ message.title }}
-    </div>
-
-    <div v-if="message.content" class="text-sm font-medium prose prose-bubble">
-      <span v-dompurify-html="message.content" />
-    </div>
-
-    <div v-if="message.footer" class="text-xs opacity-70 text-n-slate-11">
-      {{ message.footer }}
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/index.js

@@ -1,6 +0,0 @@
-// Main Template Preview Component
-export { default as TemplatePreview } from './TemplatePreview.vue';
-
-// Core Services
-export { TemplateTypeDetector } from 'dashboard/services/TemplateTypeDetector';
-export { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';

app/javascript/dashboard/components-next/template-preview/templates/twilio-templates.js

@@ -1,209 +0,0 @@
-export const twilioTemplates = [
-  {
-    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-    types: {
-      'twilio/media': {
-        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'Jordan',
-      2: '100$',
-    },
-    content_sid: 'HX4b1ff075f097ccdf7f274b6af4d7be02',
-    friendly_name: 'shoe_launch',
-    template_type: 'media',
-  },
-  {
-    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-    types: {
-      'twilio/media': {
-        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'Jordan',
-      2: '400$',
-    },
-    content_sid: 'HXd5c1f8f8d68976f841c440d5e4b46c2e',
-    friendly_name: 'product_launch_custom_price',
-    template_type: 'media',
-  },
-  {
-    body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
-    types: {
-      'twilio/media': {
-        body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
-        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {},
-    content_sid: 'HX25f6e823f2416ca4b34254d98e916fae',
-    friendly_name: 'product_launch',
-    template_type: 'media',
-  },
-  {
-    body: 'Hey {{1}}, how may I help you?',
-    types: {
-      'twilio/text': {
-        body: 'Hey {{1}}, how may I help you?',
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'John',
-    },
-    content_sid: 'HXee240fd3a8b5045dba057feda5173e55',
-    friendly_name: 'greet',
-    template_type: 'text',
-  },
-  {
-    body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
-    types: {
-      'twilio/text': {
-        body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'John',
-      3: '12345',
-    },
-    content_sid: 'HX88291ef8d30d7dcd436cbb9b21c236f4',
-    friendly_name: 'order_status',
-    template_type: 'text',
-  },
-  {
-    body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
-    types: {
-      'twilio/text': {
-        body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {},
-    content_sid: 'HXdc6da32d489ee80f67c07d5bb0e7e390',
-    friendly_name: 'hello_world',
-    template_type: 'text',
-  },
-  {
-    body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
-    types: {
-      'twilio/quick-reply': {
-        body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
-        actions: [
-          {
-            id: 'Sales_payload',
-            title: 'Sales',
-          },
-          {
-            id: 'Support_payload',
-            title: 'Support',
-          },
-        ],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en_US',
-    variables: {},
-    content_sid: 'HX778677f5867f96175ab4b7efb9a5bee6',
-    friendly_name: 'welcome_message_new',
-    template_type: 'quick_reply',
-  },
-  {
-    body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
-    types: {
-      'twilio/quick-reply': {
-        body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
-        actions: [
-          {
-            id: 'Chatwoot Cloud_payload',
-            title: 'Chatwoot Cloud',
-          },
-          {
-            id: 'Self-hosted Chatwoot_payload',
-            title: 'Self-hosted Chatwoot',
-          },
-        ],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en_US',
-    variables: {},
-    content_sid: 'HX3a35e5cd76529fd91d19341deb4ef685',
-    friendly_name: 'saas_whatsapp_question',
-    template_type: 'quick_reply',
-  },
-  {
-    body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
-    types: {
-      'twilio/quick-reply': {
-        body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
-        actions: [
-          {
-            id: 'Support_payload',
-            title: 'Support',
-          },
-          {
-            id: 'Sales_payload',
-            title: 'Sales',
-          },
-          {
-            id: 'Demo_payload',
-            title: 'Demo',
-          },
-        ],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en_US',
-    variables: {},
-    content_sid: 'HX5d8e09f96cee2f7fb7bab223c03cb0a1',
-    friendly_name: 'welcome_message',
-    template_type: 'quick_reply',
-  },
-  {
-    types: {
-      'twilio/call-to-action': {
-        actions: [
-          {
-            id: null,
-            title: 'Pay now',
-            type: 'URL',
-            url: 'https://payments.example.com/pay',
-          },
-        ],
-        body: 'Hello, this is a gentle reminder regarding your course fee.\n\nThe payment is due on {{date}}.\nKindly complete the payment at your convenience',
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      date: '01-Jan-2026',
-    },
-    content_sid: 'HX63e56fc142aad670f320bf400d5bfeb7',
-    friendly_name: 'course_fee_reminder',
-    template_type: 'call_to_action',
-  },
-];

app/javascript/dashboard/components-next/template-preview/templates/whatsapp-templates.js

@@ -1,408 +0,0 @@
-export const whatsAppTemplates = [
-  {
-    id: '1381151706284063',
-    name: 'event_invitation_static',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: "You're invited to {{event_name}} at {{location}}, Join us for an amazing experience!",
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'F1',
-              param_name: 'event_name',
-            },
-            {
-              example: 'Dubai',
-              param_name: 'location',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            url: 'https://events.example.com/register',
-            text: 'Visit website',
-            type: 'URL',
-          },
-          {
-            url: 'https://maps.app.goo.gl/YoWAzRj1GDuxs6qz8',
-            text: 'Get Directions',
-            type: 'URL',
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '767076159336759',
-    name: 'purchase_receipt',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'DOCUMENT',
-        example: {
-          header_handle: [
-            'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
-          ],
-        },
-      },
-      {
-        text: 'Thank you for using your {{1}} card at {{2}}. Your {{3}} is attached as a PDF.',
-        type: 'BODY',
-        example: {
-          body_text: [['credit', 'CS Mutual', 'receipt']],
-        },
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '1469258364071127',
-    name: 'discount_coupon',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: 'Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: '30',
-              param_name: 'discount_percentage',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            text: 'Copy offer code',
-            type: 'COPY_CODE',
-            example: ['SAVE1OFF'],
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1075221534579807',
-    name: 'support_callback',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en',
-    components: [
-      {
-        text: 'Hello {{name}},  our support team will call you regarding ticket # {{ticket_id}}.',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'muhsin',
-              param_name: 'name',
-            },
-            {
-              example: '232323',
-              param_name: 'ticket_id',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            text: 'Call Support',
-            type: 'PHONE_NUMBER',
-            phone_number: '+2112121212',
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1023596726651144',
-    name: 'training_video',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'VIDEO',
-        example: {
-          header_handle: [
-            'https://scontent.whatsapp.net/v/t61.29466-34/521582686_1023596729984477_1872358575355618432_n.mp4',
-          ],
-        },
-      },
-      {
-        text: "Hi {{name}}, here's your training video. Please watch by{{date}}.",
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'john',
-              param_name: 'name',
-            },
-            {
-              example: 'July 31',
-              param_name: 'date',
-            },
-          ],
-        },
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1106685194739985',
-    name: 'order_confirmation',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'IMAGE',
-        example: {
-          header_handle: ['https://vite-five-phi.vercel.app/vaporfly.png'],
-        },
-      },
-      {
-        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
-        type: 'BODY',
-        example: {
-          body_text: [['blue canvas shoes']],
-        },
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '1242180011253003',
-    name: 'product_launch',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'IMAGE',
-        example: {
-          header_handle: ['https://vite-five-phi.vercel.app/coat.png'],
-        },
-      },
-      {
-        text: 'New arrival! Our stunning coat now available in {{color}} color.',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'blue',
-              param_name: 'color',
-            },
-          ],
-        },
-      },
-      {
-        text: 'Free shipping on orders over $100. Limited time offer.',
-        type: 'FOOTER',
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1449876326175680',
-    name: 'technician_visit',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: 'Technician visit',
-        type: 'HEADER',
-        format: 'TEXT',
-      },
-      {
-        text: "Hi {{1}}, we're scheduling a technician visit to {{2}} on {{3}} between {{4}} and {{5}}. Please confirm if this time slot works for you.",
-        type: 'BODY',
-        example: {
-          body_text: [
-            ['John', '123 Maple St', '2025-12-31', '10:00 AM', '2:00 PM'],
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            text: 'Confirm',
-            type: 'QUICK_REPLY',
-          },
-          {
-            text: 'Reschedule',
-            type: 'QUICK_REPLY',
-          },
-        ],
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '997298832221901',
-    name: 'greet',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: 'Hey {{customer_name}} how may I help you?',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'John',
-              param_name: 'customer_name',
-            },
-          ],
-        },
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '632315222954611',
-    name: 'hello_world',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: 'Hello World',
-        type: 'HEADER',
-        format: 'TEXT',
-      },
-      {
-        text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
-        type: 'BODY',
-      },
-      {
-        text: 'WhatsApp Business Platform sample message',
-        type: 'FOOTER',
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '787864066907971',
-    name: 'feedback_request',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: "Hey {{name}}, how was your experience with Puma? We'd love your feedback!",
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'muhsin',
-              param_name: 'name',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            url: 'https://feedback.example.com/survey',
-            text: 'Leave Feedback',
-            type: 'URL',
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1938057163677205',
-    name: 'address_update',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: 'Address update',
-        type: 'HEADER',
-        format: 'TEXT',
-      },
-      {
-        text: 'Hi {{1}}, your delivery address has been successfully updated to {{2}}. Contact {{3}} for any inquiries.',
-        type: 'BODY',
-        example: {
-          body_text: [['John', '123 Main St', 'support@telco.com']],
-        },
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '1644094842949394',
-    name: 'delivery_confirmation',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: '{{1}}, your order was successfully delivered on {{2}}.\\n\\nThank you for your purchase.\\n',
-        type: 'BODY',
-        example: {
-          body_text: [['John', 'Jan 1, 2024']],
-        },
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-];
-
-// Helper function to get variable values from examples
-export const getWhatsAppVariables = template => {
-  const variables = {};
-  template.components?.forEach(component => {
-    if (component.example?.body_text_named_params) {
-      component.example.body_text_named_params.forEach(param => {
-        variables[param.param_name] = param.example;
-      });
-    }
-    if (component.example?.body_text) {
-      component.example.body_text[0]?.forEach((value, index) => {
-        variables[(index + 1).toString()] = value;
-      });
-    }
-  });
-  return variables;
-};

app/javascript/dashboard/components/widgets/FloatingCallWidget.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useCallSession } from 'dashboard/composables/useCallSession';
+import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
+import { useAlert } from 'dashboard/composables';
 import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
@@ -21,16 +23,40 @@ 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 toggleMute = () => {
+  isMuted.value = !isMuted.value;
+  setWhatsappCallMuted(isMuted.value);
+};
+
+watch(hasActiveCall, active => {
+  if (!active) isMuted.value = false;
+});
+
 const getCallInfo = call => {
   const conversation = store.getters.getConversationById(call?.conversationId);
   const inbox = store.getters['inboxes/getInbox'](conversation?.inbox_id);
   const sender = conversation?.meta?.sender;
+  // Inbound WhatsApp calls stash caller info on the call record (from the cable
+  // payload) so the widget has something to show before the conversation lands.
+  const caller = call?.caller;
   return {
     conversation,
     inbox,
-    contactName: sender?.name || sender?.phone_number || 'Unknown caller',
+    contactName:
+      sender?.name ||
+      sender?.phone_number ||
+      caller?.name ||
+      caller?.phone ||
+      'Unknown caller',
     inboxName: inbox?.name || 'Customer support',
-    avatar: sender?.avatar || sender?.thumbnail,
+    avatar: sender?.avatar || sender?.thumbnail || caller?.avatar,
   };
 };
 
@@ -49,21 +75,33 @@ const handleEndCall = async () => {
 };
 
 const handleJoinCall = async call => {
+  useAlert('[debug] handleJoinCall click handler fired');
+  if (!call) {
+    useAlert('[debug] handleJoinCall bailed: no call object');
+    return;
+  }
+  if (isJoining.value) {
+    useAlert('[debug] handleJoinCall bailed: already joining');
+    return;
+  }
   const { conversation } = getCallInfo(call);
-  if (!call || !conversation || isJoining.value) return;
 
   // End current active call before joining new one
   if (hasActiveCall.value) {
     await handleEndCall();
   }
 
+  // After a hard refresh the conversation may not be hydrated yet — but the call
+  // object already carries inboxId from the cable / seeding path, so accept can
+  // proceed without it. Twilio still needs inboxId for initializeDevice; falls
+  // back to the conversation's inbox_id when present.
   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 },
@@ -162,6 +200,30 @@ watch(
         </p>
       </div>
       <div class="flex shrink-0 gap-2">
+        <button
+          v-if="hasActiveCall && isWhatsappActive"
+          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'
+              : 'bg-n-slate-3 hover:bg-n-slate-4'
+          "
+          @click="toggleMute"
+        >
+          <i
+            class="text-lg"
+            :class="
+              isMuted
+                ? 'text-white i-ph-microphone-slash-bold'
+                : 'text-n-slate-12 i-ph-microphone-bold'
+            "
+          />
+        </button>
         <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="

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -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,6 +13,13 @@ 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 { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -91,6 +99,45 @@ const hasMultipleInboxes = computed(
 );
 
 const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+
+const callsStore = useCallsStore();
+const whatsappCallSession = useWhatsappCallSession();
+
+const isWhatsappVoiceInbox = computed(
+  () => getVoiceCallProvider(inbox.value) === VOICE_CALL_PROVIDERS.WHATSAPP
+);
+
+const startWhatsappCall = async () => {
+  if (whatsappCallSession.isInitiating.value) return;
+  try {
+    const response = await whatsappCallSession.initiateOutboundCall(
+      currentChat.value.id
+    );
+
+    // 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;
+    }
+
+    callsStore.addCall({
+      callSid: response.call_id,
+      callId: response.id,
+      conversationId: currentChat.value.id,
+      inboxId: inbox.value?.id,
+      callDirection: 'outbound',
+      provider: 'whatsapp',
+    });
+    callsStore.setCallActive(response.call_id);
+  } catch (error) {
+    useAlert(error?.message || t('CONVERSATION.HEADER.WHATSAPP_CALL_FAILED'));
+  }
+};
 </script>
 
 <template>
@@ -152,6 +199,18 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
         :parent-width="width"
         class="hidden md:flex"
       />
+      <ButtonV4
+        v-if="isWhatsappVoiceInbox"
+        v-tooltip.bottom="$t('CONVERSATION.HEADER.WHATSAPP_CALL')"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        icon="i-lucide-phone"
+        :is-loading="whatsappCallSession.isInitiating.value"
+        :disabled="whatsappCallSession.isInitiating.value"
+        class="rounded-md hover:bg-n-alpha-2"
+        @click="startWhatsappCall"
+      />
       <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>

app/javascript/dashboard/composables/useCallSession.js

@@ -1,14 +1,23 @@
 import { computed, ref, watch, onUnmounted, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
 import VoiceAPI from 'dashboard/api/channel/voice/voiceAPIClient';
 import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { useCallsStore } from 'dashboard/stores/calls';
+import {
+  useWhatsappCallSession,
+  sendWhatsappTerminateBeacon,
+  cleanupWhatsappSession,
+} from 'dashboard/composables/useWhatsappCallSession';
+import { handleVoiceCallCreated } from 'dashboard/helper/voice';
 import { useAlert } from 'dashboard/composables';
 import Timer from 'dashboard/helper/Timer';
 
+const isWhatsappCall = call => call?.provider === 'whatsapp';
+
 export function useCallSession() {
+  const store = useStore();
   const callsStore = useCallsStore();
-  const { t } = useI18n();
+  const whatsappSession = useWhatsappCallSession();
   const isJoining = ref(false);
   const callDuration = ref(0);
   const durationTimer = new Timer(elapsed => {
@@ -18,6 +27,7 @@ export function useCallSession() {
   const activeCall = computed(() => callsStore.activeCall);
   const incomingCalls = computed(() => callsStore.incomingCalls);
   const hasActiveCall = computed(() => callsStore.hasActiveCall);
+  const hasIncomingCall = computed(() => callsStore.hasIncomingCall);
 
   watch(
     hasActiveCall,
@@ -32,20 +42,80 @@ export function useCallSession() {
     { immediate: true }
   );
 
+  // Browser-native confirm prompt when reload/close happens mid-call. Reload
+  // tears down the WebRTC session permanently for WhatsApp (no rejoin) and
+  // drops the agent leg for Twilio. Also warn while a call is ringing — the
+  // cable broadcast that delivered the incoming-call event isn't replayed on
+  // refresh, so the agent loses the ability to accept it.
+  const handleBeforeUnload = event => {
+    if (!hasActiveCall.value && !hasIncomingCall.value) return;
+    event.preventDefault();
+    event.returnValue = '';
+  };
+
+  // Hydrate the calls store from already-loaded conversation messages. The
+  // voice_call.incoming / message.created cable events are one-shot and aren't
+  // replayed when the page reconnects, so without this seeding a hard refresh
+  // during a ringing call would leave the FloatingCallWidget empty even though
+  // the call is still ringing on Meta's side.
+  const seedCallsFromHydratedMessages = () => {
+    const conversations = store.getters.getAllConversations || [];
+    const currentUserId = store.getters.getCurrentUserID;
+    conversations.forEach(conv => {
+      (conv.messages || []).forEach(msg => {
+        if (msg.content_type !== 'voice_call') return;
+        if (msg.call?.status !== 'ringing') return;
+        handleVoiceCallCreated(msg, currentUserId);
+      });
+    });
+  };
+
+  // pagehide fires after the user confirms the prompt. Let the WhatsApp session
+  // best-effort sendBeacon a terminate so the server doesn't keep the call open.
+  const handlePageHide = () => {
+    sendWhatsappTerminateBeacon();
+  };
+
+  const handleTwilioDisconnected = () => callsStore.clearActiveCall();
+
   onMounted(() => {
-    TwilioVoiceClient.addEventListener('call:disconnected', () =>
-      callsStore.clearActiveCall()
+    TwilioVoiceClient.addEventListener(
+      'call:disconnected',
+      handleTwilioDisconnected
     );
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener('pagehide', handlePageHide);
+    seedCallsFromHydratedMessages();
   });
 
+  // Conversations are typically fetched after this composable mounts, so the
+  // initial seed pass runs before any messages exist. Re-seed whenever the
+  // conversation list changes — addCall is idempotent (it merges by callSid).
+  watch(
+    () => store.getters.getAllConversations?.length,
+    () => seedCallsFromHydratedMessages()
+  );
+
   onUnmounted(() => {
     durationTimer.stop();
-    TwilioVoiceClient.removeEventListener('call:disconnected', () =>
-      callsStore.clearActiveCall()
+    TwilioVoiceClient.removeEventListener(
+      'call:disconnected',
+      handleTwilioDisconnected
     );
+    window.removeEventListener('beforeunload', handleBeforeUnload);
+    window.removeEventListener('pagehide', handlePageHide);
   });
 
+  const findCall = callSid => callsStore.calls.find(c => c.callSid === callSid);
+
   const endCall = async ({ conversationId, inboxId, callSid }) => {
+    if (isWhatsappCall(findCall(callSid))) {
+      await whatsappSession.endActiveCall();
+      durationTimer.stop();
+      callsStore.clearActiveCall();
+      return;
+    }
+
     await VoiceAPI.leaveConference({ inboxId, conversationId, callSid });
     TwilioVoiceClient.endClientCall();
     durationTimer.stop();
@@ -53,10 +123,34 @@ export function useCallSession() {
   };
 
   const joinCall = async ({ conversationId, inboxId, callSid }) => {
-    if (isJoining.value) return null;
+    useAlert(`[debug] joinCall: callSid=${callSid} inboxId=${inboxId}`);
+    if (isJoining.value) {
+      useAlert('[debug] joinCall bailed: isJoining flag stuck');
+      return null;
+    }
 
     isJoining.value = true;
     try {
+      const call = findCall(callSid);
+      useAlert(
+        `[debug] found call? provider=${call?.provider} callId=${call?.callId} hasSdpOffer=${Boolean(call?.sdpOffer)}`
+      );
+      if (isWhatsappCall(call)) {
+        useAlert('[debug] taking WhatsApp accept path');
+        await whatsappSession.acceptIncomingCall({
+          callId: call.callId,
+          sdpOffer: call.sdpOffer,
+          iceServers: call.iceServers,
+        });
+        useAlert('[debug] /accept POST succeeded');
+        callsStore.setCallActive(callSid);
+        durationTimer.start();
+        return { callId: call.callId };
+      }
+
+      useAlert(
+        `[debug] taking Twilio path — provider mismatch: ${call?.provider}`
+      );
       const device = await TwilioVoiceClient.initializeDevice(inboxId);
       if (!device) return null;
 
@@ -77,13 +171,13 @@ export function useCallSession() {
 
       return { conferenceSid: joinResponse?.conference_sid };
     } catch (error) {
-      useAlert(error?.response?.data?.error || t('CONTACT_PANEL.CALL_FAILED'));
-      if (error?.response?.status === 409) {
-        TwilioVoiceClient.endClientCall();
-        callsStore.dismissCall(callSid);
-      }
+      useAlert(`[debug] joinCall threw: ${error?.message || error}`);
       // eslint-disable-next-line no-console
       console.error('Failed to join call:', error);
+      // Tear down any half-built WebRTC state so the user's next click starts
+      // fresh; otherwise the leftover pc + mic stream survives and confuses
+      // the second-attempt SDP exchange.
+      cleanupWhatsappSession();
       return null;
     } finally {
       isJoining.value = false;
@@ -91,7 +185,12 @@ export function useCallSession() {
   };
 
   const rejectIncomingCall = callSid => {
-    TwilioVoiceClient.endClientCall();
+    const call = findCall(callSid);
+    if (isWhatsappCall(call) && call?.callId) {
+      whatsappSession.rejectIncomingCall(call.callId);
+    } else {
+      TwilioVoiceClient.endClientCall();
+    }
     callsStore.dismissCall(callSid);
   };
 

app/javascript/dashboard/composables/useWhatsappCallSession.js

@@ -0,0 +1,343 @@
+import { ref } from 'vue';
+import WhatsappCallsAPI from 'dashboard/api/channel/whatsapp/whatsappCallsAPI';
+
+// Browser ↔ Meta WebRTC is a singleton — only one PeerConnection at a time can
+// hold the user's mic. Module-level state lets cable handlers and the pagehide
+// listener reach the live session without prop-drilling refs through composables.
+let pc = null;
+let localStream = null;
+let remoteStream = null;
+let remoteAudioEl = null;
+let mediaRecorder = null;
+let recorderChunks = [];
+let audioContext = null;
+let activeCallId = null;
+let intentionallyClosing = false;
+
+// Lazily attach a hidden <audio autoplay> to the document so Meta's track
+// actually plays through the speakers — without this, mic flows to Meta but
+// the user hears nothing back.
+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;
+  // play() may reject under autoplay policies; surface to console but don't crash the call.
+  el.play().catch(err => {
+    // eslint-disable-next-line no-console
+    console.warn('[WhatsApp Call] remote audio play() failed:', err);
+  });
+};
+
+// Smaller timeslice → chunks flush to memory every second so a remote hangup
+// that races cleanup still leaves data behind 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 don't get ice_servers from the backend (call doesn't exist yet
+// at offer time). Without STUN the browser only has host candidates which can't
+// reach Meta through NAT, so the browser→Meta direction silently drops media.
+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 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;
+  intentionallyClosing = false;
+};
+
+// Mix local mic + remote audio via Web Audio so the recording captures both legs.
+const setupRecorder = () => {
+  if (!localStream || !remoteStream || mediaRecorder) return;
+  // Without at least one remote track, createMediaStreamSource on remoteStream
+  // wires up to nothing — the recorded mix is effectively just silence.
+  if (remoteStream.getAudioTracks().length === 0) return;
+
+  audioContext = new AudioContext({ sampleRate: 48000 });
+  // AudioContext starts suspended under most autoplay policies. Resume so the
+  // graph actually runs; otherwise 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 buildPeerConnection = iceServers => {
+  const config = iceServers && iceServers.length ? { iceServers } : {};
+  pc = new RTCPeerConnection(config);
+  remoteStream = new MediaStream();
+  pc.ontrack = event => {
+    // Add to the stable placeholder stream so any sources/recorders referencing
+    // it stay connected — never reassign the variable, since the recorder's
+    // audioContext source taps the original MediaStream object.
+    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);
+    // Defer recorder setup until we actually have remote tracks; createMediaStreamSource
+    // on an empty MediaStream is unreliable across browsers.
+    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 });
+  try {
+    await WhatsappCallsAPI.uploadRecording(callId, blob);
+  } catch (_) {
+    /* best-effort — server-side idempotency guard handles a retry */
+  }
+};
+
+export function useWhatsappCallSession() {
+  const isInitiating = ref(false);
+  const error = ref(null);
+
+  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);
+    // Recorder fires from ontrack once remote tracks arrive.
+    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 (cable's voice_call.incoming raced
+    // the click), so fall back to GET /whatsapp_calls/:id which exposes the
+    // SDP offer + ICE servers from the show jbuilder.
+    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;
+    await WhatsappCallsAPI.accept(callId, sdpAnswer);
+  };
+
+  const rejectIncomingCall = async callId => {
+    intentionallyClosing = true;
+    try {
+      await WhatsappCallsAPI.reject(callId);
+    } finally {
+      cleanup();
+    }
+  };
+
+  const initiateOutboundCall = async conversationId => {
+    if (isInitiating.value) return null;
+    isInitiating.value = true;
+    error.value = null;
+    try {
+      const sdpOffer = await prepareOutboundOffer();
+      const response = await WhatsappCallsAPI.initiate(
+        conversationId,
+        sdpOffer
+      );
+      // Permission flow returns no call id — let the caller render the banner.
+      activeCallId = response?.id || null;
+      return response;
+    } catch (e) {
+      cleanup();
+      error.value = e;
+      throw e;
+    } finally {
+      isInitiating.value = false;
+    }
+  };
+
+  const endActiveCall = async () => {
+    if (!activeCallId) {
+      cleanup();
+      return;
+    }
+    intentionallyClosing = true;
+    const callIdSnapshot = activeCallId;
+    try {
+      await stopRecorderAndUpload(callIdSnapshot);
+      await WhatsappCallsAPI.terminate(callIdSnapshot).catch(() => {});
+    } finally {
+      cleanup();
+    }
+  };
+
+  return {
+    isInitiating,
+    error,
+    prepareInboundAnswer,
+    prepareOutboundOffer,
+    acceptIncomingCall,
+    rejectIncomingCall,
+    initiateOutboundCall,
+    endActiveCall,
+  };
+}
+
+// Cable handlers fire outside any composable instance; expose the shared session
+// surface so they can apply the outbound answer onto the live PeerConnection.
+export const applyOutboundAnswer = async (callId, sdpAnswer) => {
+  if (!pc) return;
+  activeCallId = callId;
+  await pc.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });
+  // Recorder + audio playback fire from ontrack as soon as Meta's tracks arrive.
+};
+
+export const hasActiveWhatsappCall = () => Boolean(activeCallId);
+
+// Used by the calls store as a sync teardown safety net.
+export const cleanupWhatsappSession = () => cleanup();
+
+// Cable-driven end (contact hung up / call timed out). Flush any in-memory
+// recorder chunks and upload them so the resulting message bubble shows the
+// audio + transcript — without this, only agent-initiated hangups upload.
+export const handleWhatsappRemoteEnd = async callId => {
+  // Snapshot before cleanup nulls activeCallId.
+  const id = callId || activeCallId;
+  if (!id) {
+    cleanup();
+    return;
+  }
+  try {
+    await stopRecorderAndUpload(id);
+  } finally {
+    cleanup();
+  }
+};
+
+// Mute helpers — toggle the mic track's enabled flag (instantaneous, no renegotiation).
+export const setWhatsappCallMuted = muted => {
+  if (!localStream) return false;
+  localStream.getAudioTracks().forEach(track => {
+    track.enabled = !muted;
+  });
+  return muted;
+};
+
+export const isWhatsappCallMuted = () => {
+  if (!localStream) return false;
+  const tracks = localStream.getAudioTracks();
+  if (!tracks.length) return false;
+  return !tracks[0].enabled;
+};
+
+// Best-effort terminate when the tab actually closes after the beforeunload prompt.
+export const sendWhatsappTerminateBeacon = () => {
+  if (!activeCallId || intentionallyClosing) return;
+  const accountId = window.location.pathname.split('/')[3];
+  if (!accountId) return;
+  const url = `/api/v1/accounts/${accountId}/whatsapp_calls/${activeCallId}/terminate`;
+  try {
+    navigator.sendBeacon(url);
+  } catch (_) {
+    /* noop */
+  }
+};

app/javascript/dashboard/helper/actionCable.js

@@ -4,6 +4,11 @@ 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,
+  handleWhatsappRemoteEnd,
+} from 'dashboard/composables/useWhatsappCallSession';
 
 const { isImpersonating } = useImpersonation();
 
@@ -35,6 +40,11 @@ class ActionCableConnector extends BaseActionCableConnector {
       'account.cache_invalidated': this.onCacheInvalidate,
       'account.enrichment_completed': this.onEnrichmentCompleted,
       'copilot.message.created': this.onCopilotMessageCreated,
+      // WhatsApp call SDP exchange happens via these events; Twilio-shaped voice_call.*
+      // events also flow through here but are ignored when provider !== 'whatsapp'.
+      'voice_call.incoming': this.onVoiceCallIncoming,
+      'voice_call.outbound_connected': this.onVoiceCallOutboundConnected,
+      'voice_call.ended': this.onVoiceCallEnded,
     };
   }
 
@@ -205,6 +215,44 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('inboxes/revalidate', { newKey: keys.inbox });
     this.app.$store.dispatch('teams/revalidate', { newKey: keys.team });
   };
+
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallIncoming = data => {
+    if (data?.provider !== 'whatsapp') 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 info for the FloatingCallWidget so it doesn't show "Unknown caller"
+      // before the conversation/contact has loaded into the store.
+      caller: data.caller,
+    });
+  };
+
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallOutboundConnected = data => {
+    if (data?.provider !== 'whatsapp' || !data.sdp_answer) return;
+    applyOutboundAnswer(data.id, data.sdp_answer).catch(() => {});
+  };
+
+  // eslint-disable-next-line class-methods-use-this
+  onVoiceCallEnded = async data => {
+    if (data?.provider !== 'whatsapp') return;
+    // Must await the upload-and-cleanup BEFORE removeCall, because the store's
+    // sync teardownByProvider -> cleanupWhatsappSession would otherwise wipe
+    // mediaRecorder + recorderChunks before any upload microtask gets to run.
+    try {
+      await handleWhatsappRemoteEnd(data.id);
+    } catch (_) {
+      /* noop — upload is best-effort */
+    }
+    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

@@ -22,37 +22,15 @@ 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);
-};
-
 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,
-    assigneeId: extractAssigneeId(message?.conversation),
     senderId: message?.sender?.id,
   };
 }
@@ -60,23 +38,16 @@ function extractCallData(message) {
 export function handleVoiceCallCreated(message, currentUserId) {
   if (!isVoiceCallMessage(message)) return;
 
-  const { callSid, callDirection, conversationId, assigneeId, senderId } =
+  const { callSid, callId, provider, callDirection, conversationId, senderId } =
     extractCallData(message);
 
-  if (
-    !shouldShowCall({
-      callDirection,
-      senderId,
-      assigneeId,
-      currentUserId,
-    })
-  ) {
-    return;
-  }
+  if (shouldSkipCall(callDirection, senderId, currentUserId)) return;
 
   const callsStore = useCallsStore();
   callsStore.addCall({
     callSid,
+    callId,
+    provider,
     conversationId,
     callDirection,
     senderId,
@@ -86,14 +57,8 @@ export function handleVoiceCallCreated(message, currentUserId) {
 export function handleVoiceCallUpdated(commit, message, currentUserId) {
   if (!isVoiceCallMessage(message)) return;
 
-  const {
-    callSid,
-    status,
-    callDirection,
-    conversationId,
-    assigneeId,
-    senderId,
-  } = extractCallData(message);
+  const { callSid, status, callDirection, conversationId, senderId } =
+    extractCallData(message);
 
   const callsStore = useCallsStore();
 
@@ -105,19 +70,11 @@ export function handleVoiceCallUpdated(commit, message, currentUserId) {
     callSid,
   });
 
-  if (
-    !shouldShowCall({
-      callDirection,
-      senderId,
-      assigneeId,
-      currentUserId,
-    })
-  ) {
-    callsStore.removeCall(callSid);
-    return;
-  }
+  const isNewCall =
+    status === 'ringing' &&
+    !shouldSkipCall(callDirection, senderId, currentUserId);
 
-  if (status === 'ringing') {
+  if (isNewCall) {
     callsStore.addCall({
       callSid,
       conversationId,
@@ -126,11 +83,3 @@ export function handleVoiceCallUpdated(commit, message, currentUserId) {
     });
   }
 }
-
-export function syncConversationCallVisibility(conversation, currentUserId) {
-  const assigneeId = extractAssigneeId(conversation);
-  if (!isAssignedToAnotherAgent(assigneeId, currentUserId)) return;
-
-  const callsStore = useCallsStore();
-  callsStore.removeCallsForConversation(conversation.id);
-}

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -83,8 +83,7 @@
       "CALL_ENDED": "Call ended",
       "NOT_ANSWERED_YET": "Not answered yet",
       "THEY_ANSWERED": "They answered",
-      "YOU_ANSWERED": "You answered",
-      "AGENT_ANSWERED": "{agentName} answered"
+      "YOU_ANSWERED": "You answered"
     },
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
@@ -98,6 +97,10 @@
       "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.",
+      "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}",
@@ -298,7 +301,9 @@
       "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"
     }
   },
   "EMAIL_TRANSCRIPT": {

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -800,6 +800,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": {

app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js

@@ -1,6 +1,5 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-import store from '../../../store';
 import ConversationView from './ConversationView.vue';
 
 const CONVERSATION_PERMISSIONS = [
@@ -11,37 +10,6 @@ const CONVERSATION_PERMISSIONS = [
   'conversation_participating_manage',
 ];
 
-const isFolderAvailable = async folderId => {
-  let folders = store.getters['customViews/getConversationCustomViews'];
-  if (!folders.length) {
-    await store.dispatch('customViews/get', 'conversation');
-    folders = store.getters['customViews/getConversationCustomViews'];
-  }
-  return folders.some(folder => folder.id === Number(folderId));
-};
-
-const redirectFolderListIfUnavailable = async (to, _from, next) => {
-  if (await isFolderAvailable(to.params.id)) {
-    next();
-    return;
-  }
-  next({ name: 'home', params: { accountId: to.params.accountId } });
-};
-
-const redirectFolderConversationIfUnavailable = async (to, _from, next) => {
-  if (await isFolderAvailable(to.params.id)) {
-    next();
-    return;
-  }
-  next({
-    name: 'inbox_conversation',
-    params: {
-      accountId: to.params.accountId,
-      conversation_id: to.params.conversation_id,
-    },
-  });
-};
-
 export default {
   routes: [
     {
@@ -145,7 +113,6 @@ export default {
       meta: {
         permissions: CONVERSATION_PERMISSIONS,
       },
-      beforeEnter: redirectFolderListIfUnavailable,
       component: ConversationView,
       props: route => ({ foldersId: route.params.id }),
     },
@@ -158,7 +125,6 @@ export default {
         permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
-      beforeEnter: redirectFolderConversationIfUnavailable,
       props: route => ({
         conversationId: route.params.conversation_id,
         foldersId: route.params.id,

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -44,6 +44,7 @@ export default {
       allowedDomains: '',
       isUpdatingAllowedDomains: false,
       isSettingDefaults: false,
+      whatsAppCallingEnabled: false,
     };
   },
   validations: {
@@ -71,6 +72,10 @@ export default {
       if (!this.isSettingDefaults && this.isAWebWidgetInbox)
         this.handleHmacFlag();
     },
+    whatsAppCallingEnabled() {
+      if (!this.isSettingDefaults && this.isEmbeddedSignupWhatsApp)
+        this.updateWhatsAppCallingEnabled();
+    },
   },
   mounted() {
     this.setDefaults();
@@ -83,6 +88,9 @@ export default {
         this.inbox.selected_feature_flags || []
       ).includes('allow_mobile_webview');
       this.allowedDomains = this.inbox.allowed_domains || '';
+      this.whatsAppCallingEnabled = Boolean(
+        this.inbox.provider_config?.calling_enabled
+      );
       this.$nextTick(() => {
         this.isSettingDefaults = false;
       });
@@ -147,6 +155,24 @@ export default {
         this.isUpdatingAllowedDomains = false;
       }
     },
+    async updateWhatsAppCallingEnabled() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              calling_enabled: this.whatsAppCallingEnabled,
+            },
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
     async updateWhatsAppInboxAPIKey() {
       try {
         const payload = {
@@ -374,6 +400,15 @@ export default {
             </NextButton>
           </div>
         </SettingsFieldSection>
+        <SettingsToggleSection
+          v-model="whatsAppCallingEnabled"
+          :header="
+            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CALLING_ENABLED.LABEL')
+          "
+          :description="
+            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CALLING_ENABLED.DESCRIPTION')
+          "
+        />
       </template>
 
       <!-- Manual Setup Section -->

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue

@@ -11,7 +11,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import WithLabel from 'v3/components/Form/WithLabel.vue';
 import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
 import CSATDisplayTypeSelector from './components/CSATDisplayTypeSelector.vue';
-import CSATTemplate from 'dashboard/components-next/template-preview/CSATTemplate.vue';
+import CSATTemplate from 'dashboard/components-next/message/bubbles/Template/CSAT.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';

app/javascript/dashboard/services/TemplateConstants.js

@@ -1,58 +0,0 @@
-export const PLATFORMS = {
-  WHATSAPP: 'whatsapp',
-  TWILIO: 'twilio',
-};
-
-export const WA_COMPONENT_TYPES = {
-  HEADER: 'HEADER',
-  BODY: 'BODY',
-  FOOTER: 'FOOTER',
-  BUTTONS: 'BUTTONS',
-};
-
-export const WA_HEADER_FORMATS = {
-  TEXT: 'TEXT',
-  IMAGE: 'IMAGE',
-  VIDEO: 'VIDEO',
-  DOCUMENT: 'DOCUMENT',
-};
-
-export const WA_MEDIA_FORMATS = [
-  WA_HEADER_FORMATS.IMAGE,
-  WA_HEADER_FORMATS.VIDEO,
-  WA_HEADER_FORMATS.DOCUMENT,
-];
-
-export const WA_BUTTON_TYPES = {
-  COPY_CODE: 'COPY_CODE',
-};
-
-export const WA_PARAM_FORMATS = {
-  POSITIONAL: 'POSITIONAL',
-  NAMED: 'NAMED',
-};
-
-export const TWILIO_TYPE_PREFIX = 'twilio/';
-
-export const TWILIO_TYPES = {
-  TEXT: 'text',
-  MEDIA: 'media',
-  QUICK_REPLY: 'quick_reply',
-  CALL_TO_ACTION: 'call_to_action',
-  CATALOG: 'catalog',
-};
-
-export const TEMPLATE_TYPES = {
-  WHATSAPP_TEXT: 'whatsapp-text',
-  WHATSAPP_TEXT_HEADER: 'whatsapp-text-header',
-  WHATSAPP_MEDIA_IMAGE: 'whatsapp-media-image',
-  WHATSAPP_MEDIA_VIDEO: 'whatsapp-media-video',
-  WHATSAPP_MEDIA_DOCUMENT: 'whatsapp-media-document',
-  WHATSAPP_INTERACTIVE: 'whatsapp-interactive',
-  WHATSAPP_COPY_CODE: 'whatsapp-copy-code',
-  TWILIO_TEXT: 'twilio-text',
-  TWILIO_MEDIA: 'twilio-media',
-  TWILIO_QUICK_REPLY: 'twilio-quick-reply',
-  TWILIO_CALL_TO_ACTION: 'twilio-call-to-action',
-  TWILIO_CARD: 'twilio-card',
-};

app/javascript/dashboard/services/TemplateNormalizer.js

@@ -1,114 +0,0 @@
-import { TemplateTypeDetector } from './TemplateTypeDetector';
-import {
-  PLATFORMS,
-  TWILIO_TYPE_PREFIX,
-  WA_COMPONENT_TYPES,
-  WA_PARAM_FORMATS,
-} from './TemplateConstants';
-
-/**
- * TemplateNormalizer - Convert platform-specific formats to unified structure
- */
-export class TemplateNormalizer {
-  static normalizeWhatsApp(template) {
-    const components = template.components || [];
-
-    return {
-      id: template.id,
-      name: template.name,
-      platform: PLATFORMS.WHATSAPP,
-      type: TemplateTypeDetector.detectWhatsAppType(template),
-      parameterFormat: template.parameter_format || WA_PARAM_FORMATS.POSITIONAL,
-      header: components.find(c => c.type === WA_COMPONENT_TYPES.HEADER),
-      body: components.find(c => c.type === WA_COMPONENT_TYPES.BODY),
-      footer: components.find(c => c.type === WA_COMPONENT_TYPES.FOOTER),
-      buttons:
-        components.find(c => c.type === WA_COMPONENT_TYPES.BUTTONS)?.buttons ||
-        [],
-      variables: this.extractWhatsAppVariables(template),
-      category: template.category,
-      language: template.language,
-      originalTemplate: template,
-    };
-  }
-
-  static normalizeTwilio(template) {
-    const typeKey =
-      template.template_type?.replace(TWILIO_TYPE_PREFIX, '') ||
-      Object.keys(template.types || {})
-        .map(key => key.replace(TWILIO_TYPE_PREFIX, ''))
-        .find(key => key);
-
-    const hyphenatedKey = `${TWILIO_TYPE_PREFIX}${(typeKey || '').replace(/_/g, '-')}`;
-    const underscoreKey = `${TWILIO_TYPE_PREFIX}${(typeKey || '').replace(/-/g, '_')}`;
-    const typeData =
-      template.types?.[hyphenatedKey] || template.types?.[underscoreKey] || {};
-
-    return {
-      contentSid: template.content_sid,
-      name: template.friendly_name,
-      platform: PLATFORMS.TWILIO,
-      type: TemplateTypeDetector.detectTwilioType(template),
-      body: template.body || typeData.body,
-      media: typeData.media || [],
-      mediaType: template.media_type || null,
-      actions: typeData.actions || [],
-      variables: template.variables || {},
-      category: template.category || 'utility',
-      language: template.language || 'en',
-      originalTemplate: template,
-    };
-  }
-
-  static extractWhatsAppVariables(template) {
-    const variables = {};
-    const components = template.components || [];
-
-    components.forEach(component => {
-      if (component.text) {
-        const matches = component.text.match(/\{\{([^}]+)\}\}/g) || [];
-        matches.forEach(match => {
-          const variable = match.replace(/[{}]/g, '');
-
-          if (template.parameter_format === WA_PARAM_FORMATS.NAMED) {
-            const example =
-              component.example?.body_text_named_params?.find(
-                p => p.param_name === variable
-              )?.example || '';
-            variables[variable] = example;
-          } else {
-            const position = parseInt(variable, 10) - 1;
-            const example = component.example?.body_text?.[0]?.[position] || '';
-            variables[variable] = example;
-          }
-        });
-      }
-
-      if (component.buttons) {
-        component.buttons.forEach(button => {
-          if (button.url) {
-            const matches = button.url.match(/\{\{([^}]+)\}\}/g) || [];
-            matches.forEach(match => {
-              const variable = match.replace(/[{}]/g, '');
-              const example = button.example?.[0] || '';
-              variables[variable] = example;
-            });
-          }
-        });
-      }
-    });
-
-    return variables;
-  }
-
-  static normalize(template, platform) {
-    switch (platform) {
-      case PLATFORMS.WHATSAPP:
-        return this.normalizeWhatsApp(template);
-      case PLATFORMS.TWILIO:
-        return this.normalizeTwilio(template);
-      default:
-        throw new Error(`Unsupported platform: ${platform}`);
-    }
-  }
-}

app/javascript/dashboard/services/TemplateNormalizer.spec.js

@@ -1,143 +0,0 @@
-// @vitest-environment node
-
-import { describe, it, expect } from 'vitest';
-
-import { TemplateNormalizer } from './TemplateNormalizer';
-
-describe('TemplateNormalizer', () => {
-  it('normalizes Twilio call-to-action templates with hyphenated keys', () => {
-    const template = {
-      types: {
-        'twilio/call-to-action': {
-          body: 'CTA body for {{date}}',
-          actions: [
-            {
-              id: null,
-              title: 'Pay now',
-              type: 'URL',
-              url: 'https://payments.example.com/pay',
-            },
-          ],
-        },
-      },
-      variables: {
-        date: '01-Jan-2026',
-      },
-      content_sid: 'HX123',
-      friendly_name: 'cta_example',
-      template_type: 'call-to-action',
-    };
-
-    const normalized = TemplateNormalizer.normalizeTwilio(template);
-
-    expect(normalized.type).toBe('twilio-call-to-action');
-    expect(normalized.body).toBe('CTA body for {{date}}');
-    expect(normalized.actions).toHaveLength(1);
-    expect(normalized.variables).toEqual({ date: '01-Jan-2026' });
-  });
-
-  it('normalizes Twilio quick replies', () => {
-    const template = {
-      template_type: 'quick_reply',
-      types: {
-        'twilio/quick-reply': {
-          body: 'Pick an option',
-          actions: [{ id: 'a', title: 'Option A' }],
-        },
-      },
-      variables: {},
-    };
-
-    const normalized = TemplateNormalizer.normalizeTwilio(template);
-
-    expect(normalized.type).toBe('twilio-quick-reply');
-    expect(normalized.body).toBe('Pick an option');
-    expect(normalized.actions).toEqual([{ id: 'a', title: 'Option A' }]);
-  });
-
-  it('normalizes Twilio media templates', () => {
-    const template = {
-      template_type: 'media',
-      body: 'Media body {{1}}',
-      types: {
-        'twilio/media': {
-          body: 'Media body {{1}}',
-          media: ['https://example.com/image.jpg'],
-        },
-      },
-      variables: { 1: 'value' },
-    };
-
-    const normalized = TemplateNormalizer.normalizeTwilio(template);
-
-    expect(normalized.type).toBe('twilio-media');
-    expect(normalized.media).toEqual(['https://example.com/image.jpg']);
-    expect(normalized.body).toBe('Media body {{1}}');
-  });
-
-  it('extracts WhatsApp named variables', () => {
-    const template = {
-      parameter_format: 'NAMED',
-      components: [
-        {
-          type: 'BODY',
-          text: 'Hi {{name}}',
-          example: {
-            body_text_named_params: [{ param_name: 'name', example: 'John' }],
-          },
-        },
-      ],
-    };
-
-    const variables = TemplateNormalizer.extractWhatsAppVariables(template);
-
-    expect(variables).toMatchObject({
-      name: 'John',
-    });
-  });
-
-  it('extracts WhatsApp positional variables', () => {
-    const template = {
-      parameter_format: 'POSITIONAL',
-      components: [
-        {
-          type: 'BODY',
-          text: 'Hi {{1}}',
-          example: {
-            body_text: [['positional']],
-          },
-        },
-      ],
-    };
-
-    const variables = TemplateNormalizer.extractWhatsAppVariables(template);
-
-    expect(variables).toMatchObject({
-      1: 'positional',
-    });
-  });
-
-  it('normalizes WhatsApp media image templates', () => {
-    const template = {
-      id: '1',
-      name: 'order_confirmation',
-      parameter_format: 'POSITIONAL',
-      components: [
-        {
-          type: 'HEADER',
-          format: 'IMAGE',
-          example: { header_handle: ['https://example.com/image.jpg'] },
-        },
-        { type: 'BODY', text: 'Hi {{1}}', example: { body_text: [['John']] } },
-      ],
-      language: 'en',
-    };
-
-    const normalized = TemplateNormalizer.normalizeWhatsApp(template);
-
-    expect(normalized.type).toBe('whatsapp-media-image');
-    expect(normalized.header.format).toBe('IMAGE');
-    expect(normalized.body.text).toBe('Hi {{1}}');
-    expect(normalized.variables).toMatchObject({ 1: 'John' });
-  });
-});

app/javascript/dashboard/services/TemplateTypeDetector.js

@@ -1,63 +0,0 @@
-import {
-  TEMPLATE_TYPES,
-  TWILIO_TYPE_PREFIX,
-  TWILIO_TYPES,
-  WA_BUTTON_TYPES,
-  WA_COMPONENT_TYPES,
-  WA_HEADER_FORMATS,
-} from './TemplateConstants';
-
-/**
- * TemplateTypeDetector - Unified service to identify template types across platforms
- */
-export class TemplateTypeDetector {
-  static detectWhatsAppType(template) {
-    const components = template.components || [];
-    const header = components.find(c => c.type === WA_COMPONENT_TYPES.HEADER);
-    const buttons = components.find(c => c.type === WA_COMPONENT_TYPES.BUTTONS);
-
-    if (header?.format === WA_HEADER_FORMATS.IMAGE)
-      return TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE;
-    if (header?.format === WA_HEADER_FORMATS.VIDEO)
-      return TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO;
-    if (header?.format === WA_HEADER_FORMATS.DOCUMENT)
-      return TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT;
-
-    if (buttons) {
-      const hasCopyCode = buttons.buttons?.some(
-        b => b.type === WA_BUTTON_TYPES.COPY_CODE
-      );
-      if (hasCopyCode) return TEMPLATE_TYPES.WHATSAPP_COPY_CODE;
-      return TEMPLATE_TYPES.WHATSAPP_INTERACTIVE;
-    }
-
-    if (header?.format === WA_HEADER_FORMATS.TEXT)
-      return TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER;
-    return TEMPLATE_TYPES.WHATSAPP_TEXT;
-  }
-
-  static detectTwilioType(template) {
-    const typeFromTemplate =
-      template.template_type?.replace(TWILIO_TYPE_PREFIX, '') ||
-      Object.keys(template.types || {})
-        .map(key => key.replace(TWILIO_TYPE_PREFIX, ''))
-        .find(typeKey => typeKey);
-
-    const templateType = (typeFromTemplate || '')
-      .replace(/-/g, '_')
-      .replace(/__/g, '_');
-
-    switch (templateType) {
-      case TWILIO_TYPES.MEDIA:
-        return TEMPLATE_TYPES.TWILIO_MEDIA;
-      case TWILIO_TYPES.QUICK_REPLY:
-        return TEMPLATE_TYPES.TWILIO_QUICK_REPLY;
-      case TWILIO_TYPES.CALL_TO_ACTION:
-        return TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION;
-      case TWILIO_TYPES.CATALOG:
-        return TEMPLATE_TYPES.TWILIO_CARD;
-      default:
-        return TEMPLATE_TYPES.TWILIO_TEXT;
-    }
-  }
-}

app/javascript/dashboard/services/TemplateTypeDetector.spec.js

@@ -1,106 +0,0 @@
-// @vitest-environment node
-
-import { describe, it, expect } from 'vitest';
-
-import { TemplateTypeDetector } from './TemplateTypeDetector';
-
-describe('TemplateTypeDetector', () => {
-  it('detects Twilio call-to-action from hyphenated template_type', () => {
-    const template = {
-      template_type: 'call-to-action',
-      types: {
-        'twilio/call-to-action': {},
-      },
-    };
-
-    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
-      'twilio-call-to-action'
-    );
-  });
-
-  it('detects Twilio call-to-action when only types key is present', () => {
-    const template = {
-      types: {
-        'twilio/call_to_action': {},
-      },
-    };
-
-    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
-      'twilio-call-to-action'
-    );
-  });
-
-  it('detects Twilio quick reply', () => {
-    const template = {
-      template_type: 'quick_reply',
-      types: {
-        'twilio/quick-reply': {},
-      },
-    };
-
-    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
-      'twilio-quick-reply'
-    );
-  });
-
-  it('detects WhatsApp text-with-header and media', () => {
-    const base = {
-      components: [
-        { type: 'HEADER', format: 'TEXT', text: 'Header' },
-        { type: 'BODY', text: 'Body' },
-      ],
-    };
-
-    expect(TemplateTypeDetector.detectWhatsAppType(base)).toBe(
-      'whatsapp-text-header'
-    );
-
-    const withImage = {
-      ...base,
-      components: [{ type: 'HEADER', format: 'IMAGE' }, base.components[1]],
-    };
-    expect(TemplateTypeDetector.detectWhatsAppType(withImage)).toBe(
-      'whatsapp-media-image'
-    );
-  });
-
-  it('detects WhatsApp copy code vs call-to-action buttons', () => {
-    const copyCode = {
-      components: [
-        { type: 'BODY', text: 'Hi' },
-        {
-          type: 'BUTTONS',
-          buttons: [{ type: 'COPY_CODE', text: 'Copy offer code' }],
-        },
-      ],
-    };
-
-    const callToAction = {
-      components: [
-        { type: 'BODY', text: 'Hi' },
-        {
-          type: 'BUTTONS',
-          buttons: [{ type: 'URL', text: 'Visit website' }],
-        },
-      ],
-    };
-
-    expect(TemplateTypeDetector.detectWhatsAppType(copyCode)).toBe(
-      'whatsapp-copy-code'
-    );
-    expect(TemplateTypeDetector.detectWhatsAppType(callToAction)).toBe(
-      'whatsapp-interactive'
-    );
-  });
-
-  it('detects Twilio media', () => {
-    const template = {
-      template_type: 'media',
-      types: { 'twilio/media': {} },
-    };
-
-    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
-      'twilio-media'
-    );
-  });
-});

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -16,7 +16,6 @@ import * as Sentry from '@sentry/vue';
 import {
   handleVoiceCallCreated,
   handleVoiceCallUpdated,
-  syncConversationCallVisibility,
 } from 'dashboard/helper/voice';
 
 export const hasMessageFailedWithExternalError = pendingMessage => {
@@ -394,18 +393,19 @@ const actions = {
     }
   },
 
-  updateConversation({ commit, dispatch, rootGetters }, conversation) {
-    const sender = conversation.meta?.sender;
+  updateConversation({ commit, dispatch }, conversation) {
+    const {
+      meta: { sender },
+    } = conversation;
 
     commit(types.UPDATE_CONVERSATION, conversation);
-    syncConversationCallVisibility(conversation, rootGetters?.getCurrentUserID);
 
     dispatch('conversationLabels/setConversationLabel', {
       id: conversation.id,
       data: conversation.labels,
     });
 
-    if (sender) dispatch('contacts/setContact', sender);
+    dispatch('contacts/setContact', sender);
   },
 
   updateConversationLastActivity(

app/javascript/dashboard/store/modules/specs/inboxes/templateFixtures.js

@@ -368,7 +368,7 @@ export const templates = [
     namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
     components: [
       {
-        text: 'Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
+        text: '🎉 Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
         type: 'BODY',
       },
       {
@@ -400,7 +400,7 @@ export const templates = [
           {
             text: 'Call Support',
             type: 'PHONE_NUMBER',
-            phone_number: '+23232323',
+            phone_number: '+16506677566',
           },
         ],
       },

app/javascript/dashboard/stores/calls.js

@@ -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,32 @@ 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);
+      // For WhatsApp, the upload-and-cleanup must happen before the recorder
+      // state is wiped — that runs from the voice_call.ended cable handler.
+      // If we tear down here (race-winning the cable end-event), the recorder
+      // chunks are gone before they get uploaded, so the recording is lost.
+      // Just drop the call from the store; voice_call.ended will idempotently
+      // finish cleanup once it arrives.
+      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).
+        Object.assign(existing, callData, { isActive: existing.isActive });
+        return;
+      }
 
       this.calls.push({
         ...callData,
@@ -35,7 +61,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,26 +74,13 @@ 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);
     },
 
     dismissCall(callSid) {
       this.calls = this.calls.filter(call => call.callSid !== callSid);
     },
-
-    removeCallsForConversation(conversationId) {
-      const callsToRemove = this.calls.filter(
-        call => call.conversationId === conversationId
-      );
-
-      if (callsToRemove.some(call => call.isActive)) {
-        TwilioVoiceClient.endClientCall();
-      }
-
-      this.calls = this.calls.filter(
-        call => call.conversationId !== conversationId
-      );
-    },
   },
 });

app/jobs/webhooks/whatsapp_events_job.rb

@@ -128,3 +128,5 @@ class Webhooks::WhatsappEventsJob < MutexApplicationJob
     return channel if channel && channel.provider_config['phone_number_id'] == phone_number_id
   end
 end
+
+Webhooks::WhatsappEventsJob.prepend_mod_with('Webhooks::WhatsappEventsJob')

app/models/attachment.rb

@@ -104,11 +104,23 @@ class Attachment < ApplicationRecord
     audio_file_data = base_data.merge(file_metadata)
     audio_file_data.merge(
       {
+        # ActiveStorage's redirect endpoint defaults to Content-Disposition: attachment,
+        # which makes <audio> elements download instead of play. Force inline so the
+        # call-recording chip (and any other audio bubble) can stream directly.
+        data_url: inline_audio_url,
         transcribed_text: meta&.[]('transcribed_text') || ''
       }
     )
   end
 
+  def inline_audio_url
+    return '' unless file.attached?
+
+    # Proxy endpoint streams through Rails and honours `disposition: 'inline'`,
+    # unlike the redirect endpoint which always sends Content-Disposition: attachment.
+    Rails.application.routes.url_helpers.rails_storage_proxy_url(file, disposition: 'inline')
+  end
+
   def file_metadata
     metadata = {
       extension: extension,

app/models/channel/whatsapp.rb

@@ -40,6 +40,15 @@ class Channel::Whatsapp < ApplicationRecord
     'Whatsapp'
   end
 
+  # Mirrors Channel::TwilioSms#voice_enabled? so the call subsystem can duck-type across providers.
+  # 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' &&
+      provider_config['calling_enabled'].present?
+  end
+
   def provider_service
     if provider == 'whatsapp_cloud'
       Whatsapp::Providers::WhatsappCloudService.new(whatsapp_channel: self)

app/services/base/send_on_channel_service.rb

@@ -46,7 +46,9 @@ class Base::SendOnChannelService
   def invalid_message?
     # private notes aren't send to the channels
     # we should also avoid the case of message loops, when outgoing messages are created from channel
-    message.private? || outgoing_message_originated_from_channel?
+    # voice_call bubbles are call status indicators, not deliverable messages — skip the send pipeline
+    # otherwise it falls through to "Template not found" / 24-hour-window errors
+    message.private? || outgoing_message_originated_from_channel? || message.content_type == 'voice_call'
   end
 
   def validate_target_channel

app/services/imap/base_fetch_email_service.rb

@@ -1,8 +1,6 @@
 require 'net/imap'
 
 class Imap::BaseFetchEmailService
-  MAX_MESSAGES_PER_SYNC = 500
-
   pattr_initialize [:channel!, :interval]
 
   def fetch_emails
@@ -79,48 +77,27 @@ class Imap::BaseFetchEmailService
     Rails.logger.info "[IMAP::FETCH_EMAIL_SERVICE] Fetching mails from #{channel.email}, found #{seq_nums.length}."
 
     message_ids_with_seq = []
-    seq_nums.each_slice(MAX_MESSAGES_PER_SYNC).each do |batch|
-      append_message_ids_for_batch(batch, message_ids_with_seq)
-      if message_ids_with_seq.length >= MAX_MESSAGES_PER_SYNC
-        Rails.logger.info "[IMAP::FETCH_EMAIL_SERVICE] Reached MAX_MESSAGES_PER_SYNC=#{MAX_MESSAGES_PER_SYNC} for #{channel.email}, stopping sync."
-        break
+    seq_nums.each_slice(10).each do |batch|
+      # Fetch only message-id only without mail body or contents.
+      batch_message_ids = imap_client.fetch(batch, 'BODY.PEEK[HEADER]')
+
+      # .fetch returns an array of Net::IMAP::FetchData or nil
+      # (instead of an empty array) if there is no matching message.
+      # Check
+      if batch_message_ids.blank?
+        Rails.logger.info "[IMAP::FETCH_EMAIL_SERVICE] Fetching the batch failed for #{channel.email}."
+        next
+      end
+
+      batch_message_ids.each do |data|
+        message_id = build_mail_from_string(data.attr['BODY[HEADER]']).message_id
+        message_ids_with_seq.push([data.seqno, message_id])
       end
     end
 
     message_ids_with_seq
   end
 
-  def append_message_ids_for_batch(batch, message_ids_with_seq)
-    # Fetch only message-id only without mail body or contents.
-    batch_message_ids = imap_client.fetch(batch, 'BODY.PEEK[HEADER]')
-    Rails.logger.info "[IMAP::FETCH_EMAIL_SERVICE] Fetching the batch for #{channel.email}. Found #{batch_message_ids&.length} messages."
-
-    # .fetch returns an array of Net::IMAP::FetchData or nil
-    # (instead of an empty array) if there is no matching message.
-    if batch_message_ids.blank?
-      Rails.logger.info "[IMAP::FETCH_EMAIL_SERVICE] Fetching the batch failed for #{channel.email}."
-      return
-    end
-
-    batch_message_ids.each do |data|
-      entry = build_message_id_entry(data)
-      next if entry.nil?
-
-      message_ids_with_seq.push(entry)
-      break if message_ids_with_seq.length >= MAX_MESSAGES_PER_SYNC
-    end
-  end
-
-  def build_message_id_entry(data)
-    mail = build_mail_from_string(data.attr['BODY[HEADER]'])
-    return nil if MailPresenter.new(mail, channel.account).notification_email_from_chatwoot?
-
-    message_id = mail.message_id
-    return nil if message_id.present? && email_already_present?(channel, message_id)
-
-    [data.seqno, message_id]
-  end
-
   # Sends a SEARCH command to search the mailbox for messages that were
   # created between yesterday (or given date) and today and returns message sequence numbers.
   # Return <message set>

app/services/whatsapp/providers/whatsapp_cloud_service.rb

@@ -205,3 +205,5 @@ class Whatsapp::Providers::WhatsappCloudService < Whatsapp::Providers::BaseServi
     process_response(response, message)
   end
 end
+
+Whatsapp::Providers::WhatsappCloudService.prepend_mod_with('Whatsapp::Providers::WhatsappCloudService')

app/views/api/v1/models/_inbox.json.jbuilder

@@ -142,3 +142,8 @@ if resource.twilio? && resource.channel.respond_to?(:voice_enabled?)
     json.voice_status_webhook_url resource.channel.try(:voice_status_webhook_url)
   end
 end
+
+## Voice attribute for WhatsApp Cloud (only embedded-signup channels surface true)
+if resource.channel_type == 'Channel::Whatsapp' && resource.channel.respond_to?(:voice_enabled?)
+  json.voice_enabled resource.channel.voice_enabled?
+end

config/initializers/active_storage.rb

@@ -0,0 +1,13 @@
+# Allow audio attachments (call recordings, voice notes) to serve inline so the
+# in-app <audio> player can stream them. Without this, ActiveStorage's blob model
+# forces Content-Disposition: attachment for any MIME outside the default allowlist
+# (images + PDF), which makes the browser download instead of play.
+Rails.application.config.active_storage.content_types_allowed_inline += %w[
+  audio/webm
+  audio/ogg
+  audio/mpeg
+  audio/mp4
+  audio/x-m4a
+  audio/wav
+  audio/x-wav
+]

config/locales/en.yml

@@ -64,8 +64,6 @@ en:
       email_already_exists: 'You have already signed up for an account with %{email}'
       invalid_params: 'Invalid, please check the signup paramters and try again'
       failed: Signup failed
-    voice:
-      call_already_accepted: '%{agent_name} is already handling the call.'
     assignment_policy:
       not_found: Assignment policy not found
     attachments:
@@ -116,6 +114,13 @@ en:
       reauthorization:
         generic: 'Failed to reauthorize WhatsApp. Please try again.'
         not_supported: 'Reauthorization is not supported for this type of WhatsApp channel.'
+      calls:
+        not_enabled: 'Calling is not enabled for this inbox'
+        no_recording: 'No recording file provided'
+        no_message: 'Call has no associated message'
+        sdp_offer_required: 'sdp_offer is required'
+        contact_phone_required: 'Contact phone number is required'
+        permission_request_failed: 'Failed to send call permission request'
     inboxes:
       imap:
         socket_error: Please check the network connection, IMAP address and try again.
@@ -245,6 +250,10 @@ en:
       deleted: This message was deleted
       whatsapp:
         list_button_label: 'Choose an item'
+        call_permission_request_body: 'We would like to call you regarding your conversation.'
+      voice_call:
+        twilio: 'Voice Call'
+        whatsapp: 'WhatsApp Call'
       delivery_status:
         error_code: 'Error code: %{error_code}'
     activity:

config/routes.rb

@@ -215,6 +215,21 @@ Rails.application.routes.draw do
             end
           end
           resources :reporting_events, only: [:index] if ChatwootApp.enterprise?
+
+          if ChatwootApp.enterprise?
+            resources :whatsapp_calls, only: [:show] do
+              member do
+                post :accept
+                post :reject
+                post :terminate
+                post :upload_recording
+              end
+              collection do
+                post :initiate
+              end
+            end
+          end
+
           resources :custom_attribute_definitions, only: [:index, :show, :create, :update, :destroy]
           resources :custom_filters, only: [:index, :show, :create, :update, :destroy]
           resources :inboxes, only: [:index, :show, :create, :update, :destroy] do

enterprise/app/builders/enterprise/messages/message_builder.rb

@@ -2,13 +2,12 @@ module Enterprise::Messages::MessageBuilder
   private
 
   def message_type
-    return @message_type if @message_type == 'incoming' && twilio_voice_inbox? && @params[:content_type] == 'voice_call'
+    return @message_type if @message_type == 'incoming' && voice_call_inbox? && @params[:content_type] == 'voice_call'
 
     super
   end
 
-  def twilio_voice_inbox?
-    inbox = @conversation.inbox
-    inbox.channel_type == 'Channel::TwilioSms' && inbox.channel.voice_enabled?
+  def voice_call_inbox?
+    @conversation.inbox.channel.try(:voice_enabled?)
   end
 end

enterprise/app/controllers/api/v1/accounts/conference_controller.rb

@@ -1,6 +1,5 @@
 class Api::V1::Accounts::ConferenceController < Api::V1::Accounts::BaseController
   before_action :set_voice_inbox_for_conference
-  rescue_from CustomExceptions::CallAlreadyAccepted, with: :render_call_already_accepted
 
   def token
     render json: Voice::Provider::Twilio::TokenService.new(
@@ -55,8 +54,4 @@ class Api::V1::Accounts::ConferenceController < Api::V1::Accounts::BaseControlle
     authorize conversation, :show?
     conversation
   end
-
-  def render_call_already_accepted(error)
-    render json: { error: error.message }, status: :conflict
-  end
 end

enterprise/app/controllers/api/v1/accounts/whatsapp_calls_controller.rb

@@ -0,0 +1,166 @@
+class Api::V1::Accounts::WhatsappCallsController < Api::V1::Accounts::BaseController
+  PERMISSION_REQUEST_THROTTLE = 5.minutes
+
+  before_action :set_call, only: %i[show accept reject terminate upload_recording]
+  before_action :set_conversation, only: :initiate
+  before_action :ensure_calling_enabled, only: :initiate
+  before_action :ensure_sdp_offer, only: :initiate
+  before_action :ensure_contact_phone, only: :initiate
+  before_action :ensure_recording_present, only: :upload_recording
+  before_action :ensure_call_message, only: :upload_recording
+
+  rescue_from Voice::CallErrors::NotRinging,
+              Voice::CallErrors::AlreadyAccepted,
+              Voice::CallErrors::CallFailed,
+              with: :render_call_error
+  rescue_from Voice::CallErrors::NoCallPermission, with: :render_permission_request
+
+  def show; end
+
+  def accept
+    call_service.accept
+  end
+
+  def reject
+    call_service.reject
+  end
+
+  def terminate
+    call_service.terminate
+  end
+
+  def upload_recording
+    @upload_status = @call.message.with_lock { attach_recording_idempotently }
+  end
+
+  def initiate
+    @call = create_outbound_call
+    @message = Voice::CallMessageBuilder.new(@call).perform!
+    @call.update!(message_id: @message.id)
+  end
+
+  private
+
+  def call_service
+    @call_service ||= Whatsapp::CallService.new(call: @call, agent: Current.user, sdp_answer: params[:sdp_answer])
+  end
+
+  def provider_service
+    @provider_service ||= @conversation.inbox.channel.provider_service
+  end
+
+  def set_call
+    @call = Current.account.calls.whatsapp.find(params[:id])
+    authorize @call.conversation, :show?
+  end
+
+  def set_conversation
+    @conversation = Current.account.conversations.find_by!(display_id: params[:conversation_id])
+    authorize @conversation, :show?
+  end
+
+  # Twilio voice also exposes voice_enabled? but uses a different initiation path.
+  def ensure_calling_enabled
+    channel = @conversation.inbox.channel
+    return if channel.is_a?(Channel::Whatsapp) && channel.voice_enabled?
+
+    render_could_not_create_error(I18n.t('errors.whatsapp.calls.not_enabled'))
+  end
+
+  def ensure_sdp_offer
+    return if params[:sdp_offer].present?
+
+    render_could_not_create_error(I18n.t('errors.whatsapp.calls.sdp_offer_required'))
+  end
+
+  def ensure_contact_phone
+    return if @conversation.contact&.phone_number.present?
+
+    render_could_not_create_error(I18n.t('errors.whatsapp.calls.contact_phone_required'))
+  end
+
+  def ensure_recording_present
+    return if params[:recording].present?
+
+    render_could_not_create_error(I18n.t('errors.whatsapp.calls.no_recording'))
+  end
+
+  def ensure_call_message
+    return if @call.message.present?
+
+    render_could_not_create_error(I18n.t('errors.whatsapp.calls.no_message'))
+  end
+
+  def attach_recording_idempotently
+    return 'already_uploaded' if @call.message.attachments.exists?(file_type: :audio)
+
+    @call.message.attachments.create!(account_id: @call.account_id, file_type: :audio, file: params[:recording])
+    'uploaded'
+  end
+
+  # Browser-built SDP offer is forwarded to Meta; the connect webhook later delivers Meta's answer.
+  def create_outbound_call
+    contact_phone = @conversation.contact.phone_number.delete('+')
+    result = provider_service.initiate_call(contact_phone, params[:sdp_offer])
+    provider_call_id = result.dig('calls', 0, 'id') || result['call_id']
+
+    Current.account.calls.create!(
+      provider: :whatsapp, inbox: @conversation.inbox, conversation: @conversation, contact: @conversation.contact,
+      provider_call_id: provider_call_id, direction: :outgoing, status: 'ringing',
+      accepted_by_agent_id: Current.user.id,
+      meta: { 'sdp_offer' => params[:sdp_offer], 'ice_servers' => Call.default_ice_servers }
+    )
+  end
+
+  # 138006 = no call permission yet; send opt-in template (throttled) and surface state to FE.
+  # Lock the conversation so concurrent initiate requests can't both pass the throttle gate
+  # and double-send the opt-in template.
+  def render_permission_request
+    status = nil
+    @conversation.with_lock do
+      if permission_request_throttled?
+        status = 'permission_pending'
+        next
+      end
+
+      sent = send_permission_request_safely
+      if sent
+        record_permission_request_wamid(sent)
+        status = 'permission_requested'
+      else
+        status = 'failed'
+      end
+    end
+
+    return render_could_not_create_error(I18n.t('errors.whatsapp.calls.permission_request_failed')) if status == 'failed'
+
+    render json: { status: status }
+  end
+
+  def permission_request_throttled?
+    last_requested = @conversation.additional_attributes&.dig('call_permission_requested_at')
+    last_requested.present? && Time.zone.parse(last_requested) > PERMISSION_REQUEST_THROTTLE.ago
+  end
+
+  # Treat transport errors the same as a falsy provider return so the action renders 422
+  # rather than letting Faraday/HTTParty exceptions bubble up as 500s.
+  def send_permission_request_safely
+    provider_service.send_call_permission_request(@conversation.contact.phone_number.delete('+'))
+  rescue StandardError => e
+    Rails.logger.warn "[WHATSAPP CALL] permission_request failed: #{e.class} #{e.message}"
+    nil
+  end
+
+  # Record the wamid so the reply webhook can match context.id back to this conversation.
+  def record_permission_request_wamid(sent)
+    attrs = (@conversation.additional_attributes || {}).merge(
+      'call_permission_requested_at' => Time.current.iso8601,
+      'call_permission_request_message_id' => sent.dig('messages', 0, 'id')
+    )
+    @conversation.update!(additional_attributes: attrs)
+  end
+
+  def render_call_error(error)
+    render_could_not_create_error(error.message)
+  end
+end

enterprise/app/controllers/twilio/voice_controller.rb

@@ -84,7 +84,6 @@ class Twilio::VoiceController < ApplicationController
     case twilio_direction
     when 'inbound'
       Voice::InboundCallBuilder.perform!(
-        account: current_account,
         inbox: inbox,
         from_number: twilio_from,
         call_sid: twilio_call_sid

enterprise/app/jobs/enterprise/webhooks/whatsapp_events_job.rb

@@ -0,0 +1,41 @@
+module Enterprise::Webhooks::WhatsappEventsJob
+  def handle_message_events(channel, params)
+    return handle_call_events(channel, params) if call_event?(params)
+    return handle_call_permission_reply(channel, params) if call_permission_reply?(params)
+
+    super
+  end
+
+  private
+
+  # Lock per-call_id inside handle_call_events instead of the parent's per-sender mutex.
+  def contact_sender_id(params)
+    return nil if call_event?(params)
+
+    super
+  end
+
+  def call_event?(params)
+    params.dig(:entry, 0, :changes, 0, :field) == 'calls'
+  end
+
+  def call_permission_reply?(params)
+    params.dig(:entry, 0, :changes, 0, :value, :messages, 0, :interactive, :type) == 'call_permission_reply'
+  end
+
+  # Per-call_id mutex so connect/terminate for the same call serialize across batches.
+  def handle_call_events(channel, params)
+    calls = params.dig(:entry, 0, :changes, 0, :value, :calls) || []
+    calls.each do |call_payload|
+      lock_key = format(::Redis::Alfred::WHATSAPP_MESSAGE_MUTEX,
+                        inbox_id: channel.inbox.id, sender_id: "call:#{call_payload[:id]}")
+      with_lock(lock_key, 30.seconds) do
+        Whatsapp::IncomingCallService.new(inbox: channel.inbox, params: { calls: [call_payload] }).perform
+      end
+    end
+  end
+
+  def handle_call_permission_reply(channel, params)
+    Whatsapp::CallPermissionReplyService.new(inbox: channel.inbox, params: params).perform
+  end
+end

enterprise/app/models/call.rb

@@ -36,6 +36,11 @@ class Call < ApplicationRecord
 
   store_accessor :meta, :conference_sid, :recording_sid, :parent_call_sid, :initiated_at, :ended_at
 
+  # Frontend voice bubbles/stores expect inbound/outbound string values
+  DISPLAY_DIRECTION = { 'incoming' => 'inbound', 'outgoing' => 'outbound' }.freeze
+
+  DEFAULT_STUN_URL = 'stun:stun.l.google.com:19302'.freeze
+
   enum :provider, { twilio: 0, whatsapp: 1 }
   enum :direction, { incoming: 0, outgoing: 1 }
 
@@ -64,6 +69,28 @@ class Call < ApplicationRecord
     "conf_account_#{account_id}_call_#{id}"
   end
 
+  # Browser ↔ Meta WebRTC needs at least one STUN server to discover its public srflx candidate.
+  def self.default_ice_servers
+    urls = ENV.fetch('VOICE_CALL_STUN_URLS', DEFAULT_STUN_URL).split(',').filter_map { |u| u.strip.presence }
+    [{ urls: urls }]
+  end
+
+  def direction_label
+    DISPLAY_DIRECTION[direction]
+  end
+
+  def ringing?
+    status == 'ringing'
+  end
+
+  def in_progress?
+    status == 'in_progress'
+  end
+
+  def terminal?
+    TERMINAL_STATUSES.include?(status)
+  end
+
   def display_status
     status.to_s.tr('_', '-')
   end
@@ -92,7 +119,6 @@ class Call < ApplicationRecord
       duration_seconds: duration_seconds,
       conference_sid: conference_sid,
       accepted_by_agent_id: accepted_by_agent_id,
-      accepted_by_agent_name: accepted_by_agent&.available_name,
       started_at: started_at&.to_i,
       ended_at: ended_at,
       from_number: from_number,

enterprise/app/models/channel/voice.rb

@@ -0,0 +1,8 @@
+# Stub for legacy inboxes whose channel_type is still 'Channel::Voice' after
+# the upstream DropChannelVoice migration moved voice fields onto
+# Channel::TwilioSms. Pointing at the new table lets Rails resolve
+# `belongs_to :channel, polymorphic: true` lookups to nil (no matching row),
+# so jbuilder `.try` chains short-circuit instead of raising.
+class Channel::Voice < ApplicationRecord
+  self.table_name = 'channel_twilio_sms'
+end

enterprise/app/models/enterprise/concerns/attachment.rb

@@ -3,6 +3,11 @@ module Enterprise::Concerns::Attachment
 
   included do
     after_create_commit :enqueue_audio_transcription
+    # Broadcast the message update so the FE bubble picks up the new audio
+    # attachment immediately. Without this, the FE has to wait until Whisper
+    # finishes (or fall back to a page refresh) — and if Whisper returns blank,
+    # the bubble never gets the audio at all.
+    after_create_commit :broadcast_message_update_for_audio
   end
 
   private
@@ -12,4 +17,11 @@ module Enterprise::Concerns::Attachment
 
     Messages::AudioTranscriptionJob.perform_later(id)
   end
+
+  def broadcast_message_update_for_audio
+    return unless file_type.to_sym == :audio
+    return unless message
+
+    message.reload.send_update_event
+  end
 end

enterprise/app/models/enterprise/conversation.rb

@@ -13,6 +13,12 @@ module Enterprise::Conversation
     super + %w[sla_policy_id]
   end
 
+  # Surface call lifecycle changes to the FE: writes to additional_attributes
+  # call_status/call_direction should rebroadcast conversation_updated.
+  def allowed_keys?
+    super || call_attributes_changed?
+  end
+
   def with_captain_activity_context(reason:, reason_type:)
     previous_reason = captain_activity_reason
     previous_reason_type = captain_activity_reason_type
@@ -30,4 +36,13 @@ module Enterprise::Conversation
   def dispatch_captain_inference_event(event_name)
     dispatcher_dispatch(event_name)
   end
+
+  def call_attributes_changed?
+    return false if previous_changes['additional_attributes'].blank?
+
+    # Compare before/after values for call keys — checking key presence alone
+    # rebroadcasts on any unrelated additional_attributes write once the keys exist.
+    before, after = previous_changes['additional_attributes']
+    %w[call_status call_direction].any? { |key| (before || {})[key] != (after || {})[key] }
+  end
 end

enterprise/app/services/enterprise/whatsapp/providers/whatsapp_cloud_service.rb

@@ -0,0 +1,96 @@
+module Enterprise::Whatsapp::Providers::WhatsappCloudService
+  # Calls API + the call_permission_request interactive message both require Graph
+  # API v17+; OSS phone_id_path is locked at v13.0 for legacy /messages compatibility.
+  # Use the configured global version (defaulting to v22.0) for call-flow endpoints.
+  WHATSAPP_CALLING_API_VERSION_FALLBACK = 'v22.0'.freeze
+
+  def pre_accept_call(call_id, sdp_answer)
+    call_api('pre_accept_call', call_action_body(call_id, 'pre_accept', sdp_answer))
+  end
+
+  def accept_call(call_id, sdp_answer)
+    call_api('accept_call', call_action_body(call_id, 'accept', sdp_answer))
+  end
+
+  def reject_call(call_id)
+    call_api('reject_call', call_action_body(call_id, 'reject'))
+  end
+
+  def terminate_call(call_id)
+    call_api('terminate_call', call_action_body(call_id, 'terminate'))
+  end
+
+  def send_call_permission_request(to_phone_number, body_text = I18n.t('conversations.messages.whatsapp.call_permission_request_body'))
+    response = HTTParty.post(
+      "#{calls_phone_id_path}/messages", headers: api_headers, body: permission_request_body(to_phone_number, body_text)
+    )
+
+    unless response.success?
+      Rails.logger.error "[WHATSAPP CALL] send_call_permission_request failed: status=#{response.code} body=#{response.body}"
+      return nil
+    end
+
+    response.parsed_response
+  end
+
+  def initiate_call(to_phone_number, sdp_offer)
+    response = HTTParty.post(
+      "#{calls_phone_id_path}/calls", headers: api_headers, body: initiate_call_body(to_phone_number, sdp_offer)
+    )
+    process_initiate_call_response(response)
+  end
+
+  private
+
+  def calls_phone_id_path
+    base = ENV.fetch('WHATSAPP_CLOUD_BASE_URL', 'https://graph.facebook.com')
+    version = GlobalConfigService.load('WHATSAPP_API_VERSION', WHATSAPP_CALLING_API_VERSION_FALLBACK)
+    "#{base}/#{version}/#{whatsapp_channel.provider_config['phone_number_id']}"
+  end
+
+  def call_action_body(call_id, action, sdp_answer = nil)
+    body = { messaging_product: 'whatsapp', call_id: call_id, action: action }
+    body[:session] = { sdp: sdp_answer, sdp_type: 'answer' } if sdp_answer
+    body
+  end
+
+  def call_api(action_name, body)
+    url = "#{calls_phone_id_path}/calls"
+    Rails.logger.info "[WHATSAPP CALL] #{action_name} POST #{url} body=#{body.except(:session).to_json}"
+    response = HTTParty.post(url, headers: api_headers, body: body.to_json)
+    Rails.logger.error "[WHATSAPP CALL] #{action_name} failed: status=#{response.code} body=#{response.body}" unless response.success?
+    response.success?
+  end
+
+  def permission_request_body(to_phone_number, body_text)
+    {
+      messaging_product: 'whatsapp', recipient_type: 'individual', to: to_phone_number,
+      type: 'interactive',
+      interactive: {
+        type: 'call_permission_request',
+        action: { name: 'call_permission_request' },
+        body: { text: body_text }
+      }
+    }.to_json
+  end
+
+  def initiate_call_body(to_phone_number, sdp_offer)
+    {
+      messaging_product: 'whatsapp', to: to_phone_number, type: 'audio',
+      session: { sdp: sdp_offer, sdp_type: 'offer' }
+    }.to_json
+  end
+
+  def process_initiate_call_response(response)
+    return response.parsed_response if response.success?
+
+    Rails.logger.error "[WHATSAPP CALL] initiate_call failed: status=#{response.code} body=#{response.body}"
+    parsed = response.parsed_response.is_a?(Hash) ? response.parsed_response : {}
+    error_code = parsed.dig('error', 'code')
+    error_msg = parsed.dig('error', 'error_user_msg') || 'Failed to initiate call'
+
+    raise Voice::CallErrors::NoCallPermission, error_msg if error_code == Voice::CallErrors::NO_CALL_PERMISSION_CODE
+
+    raise Voice::CallErrors::CallFailed, error_msg
+  end
+end

enterprise/app/services/messages/audio_transcription_service.rb

@@ -67,7 +67,9 @@ class Messages::AudioTranscriptionService< Llm::LegacyBaseOpenAiService
         parameters: {
           model: WHISPER_MODEL,
           file: file,
-          temperature: 0.4
+          # 0.0 minimises Whisper's hallucinations on silence / sub-vocal segments —
+          # higher temperatures produce phantom phrases that look like real transcripts.
+          temperature: 0.0
         }
       )
       transcribed_text = response['text']

enterprise/app/services/voice/call_message_builder.rb

@@ -7,15 +7,30 @@ class Voice::CallMessageBuilder
     call.message || create_message!
   end
 
+  def update_status!(status:, agent: nil, duration_seconds: nil)
+    message = call.message
+    return unless message
+
+    patch = {
+      'status' => status&.to_s&.tr('_', '-'),
+      'accepted_by' => agent && { 'id' => agent.id, 'name' => agent.name },
+      'duration_seconds' => duration_seconds
+    }.compact
+
+    message.update!(content_attributes: (message.content_attributes || {}).deep_merge('data' => patch))
+    message
+  end
+
   private
 
   attr_reader :call
 
   def create_message!
     params = {
-      content: 'Voice Call',
+      content: I18n.t("conversations.messages.voice_call.#{call.provider}"),
       message_type: call.outgoing? ? 'outgoing' : 'incoming',
-      content_type: 'voice_call'
+      content_type: 'voice_call',
+      content_attributes: { 'data' => build_data_payload }
     }
     Messages::MessageBuilder.new(sender, call.conversation, params).perform
   end
@@ -23,4 +38,15 @@ class Voice::CallMessageBuilder
   def sender
     call.outgoing? ? call.accepted_by_agent : call.contact
   end
+
+  # call_source lets the FE disambiguate WhatsApp vs Twilio without re-fetching the Call.
+  def build_data_payload
+    {
+      'call_id' => call.id,
+      'call_sid' => call.provider_call_id,
+      'call_source' => call.provider,
+      'call_direction' => call.direction_label,
+      'status' => call.display_status
+    }
+  end
 end

enterprise/app/services/voice/conference/manager.rb

@@ -31,32 +31,10 @@ class Voice::Conference::Manager
 
   def join_agent!
     user_id = extract_user_id
-    claim_for_user!(user_id) if user_id
+    call.update!(accepted_by_agent_id: user_id) if user_id
     status_manager.process_status_update('in_progress', timestamp: now)
   end
 
-  # First-join wins; later joins by other agents are silently ignored so the
-  # webhook doesn't stomp the original assignee. User-facing rejection happens
-  # at the API layer.
-  def claim_for_user!(user_id)
-    claimed = false
-    call.with_lock do
-      next if call.accepted_by_agent_id.present? && call.accepted_by_agent_id != user_id
-
-      call.update!(accepted_by_agent_id: user_id) if call.accepted_by_agent_id != user_id
-      claimed = true
-    end
-
-    auto_assign_conversation!(user_id) if claimed
-  end
-
-  def auto_assign_conversation!(user_id)
-    conversation = call.conversation
-    return if conversation.assignee_id.present?
-
-    Conversations::AssignmentService.new(conversation: conversation, assignee_id: user_id).perform
-  end
-
   # Parses agent user_id from participant_label. Only returns an id when the
   # label's embedded account id matches the call's account — protects against
   # a spoofed/cross-account label attaching a foreign user to the call.

enterprise/app/services/voice/inbound_call_builder.rb

@@ -1,15 +1,17 @@
 class Voice::InboundCallBuilder
-  attr_reader :account, :inbox, :from_number, :call_sid
+  attr_reader :inbox, :from_number, :call_sid, :provider, :extra_meta
 
-  def self.perform!(account:, inbox:, from_number:, call_sid:)
-    new(account: account, inbox: inbox, from_number: from_number, call_sid: call_sid).perform!
+  def self.perform!(inbox:, from_number:, call_sid:, provider: :twilio, extra_meta: {})
+    new(inbox: inbox, from_number: from_number, call_sid: call_sid,
+        provider: provider, extra_meta: extra_meta).perform!
   end
 
-  def initialize(account:, inbox:, from_number:, call_sid:)
-    @account = account
+  def initialize(inbox:, from_number:, call_sid:, provider: :twilio, extra_meta: {})
     @inbox = inbox
     @from_number = from_number
     @call_sid = call_sid
+    @provider = provider.to_sym
+    @extra_meta = extra_meta || {}
   end
 
   def perform!
@@ -17,8 +19,8 @@ class Voice::InboundCallBuilder
     return existing if existing
 
     ActiveRecord::Base.transaction do
-      contact = ensure_contact!
-      contact_inbox = ensure_contact_inbox!(contact)
+      contact_inbox = ensure_contact_inbox!
+      contact = contact_inbox.contact
       conversation = resolve_conversation!(contact, contact_inbox)
       call = create_call!(contact, conversation)
       message = Voice::CallMessageBuilder.new(call).perform!
@@ -26,15 +28,30 @@ class Voice::InboundCallBuilder
       call
     end
   rescue ActiveRecord::RecordNotUnique
-    # A concurrent Twilio retry won the create race; return what now exists.
+    # A concurrent provider retry won the create race; return what now exists.
     find_existing_call || raise
   end
 
   private
 
+  def account
+    inbox.account
+  end
+
   def find_existing_call
     Call.where(account_id: account.id, inbox_id: inbox.id)
-        .find_by(provider: :twilio, provider_call_id: call_sid)
+        .find_by(provider: provider, provider_call_id: call_sid)
+  end
+
+  # Always look up by (inbox, source_id) first — that pair has a UNIQUE index, so
+  # creating with a colliding source_id under a different contact would raise
+  # RecordNotUnique. Reuse the existing ContactInbox (and its contact) when found.
+  def ensure_contact_inbox!
+    sid = source_id_for_provider
+    existing = inbox.contact_inboxes.find_by(source_id: sid)
+    return existing if existing
+
+    ContactInbox.create!(contact: ensure_contact!, inbox: inbox, source_id: sid)
   end
 
   def ensure_contact!
@@ -43,13 +60,9 @@ class Voice::InboundCallBuilder
     end
   end
 
-  def ensure_contact_inbox!(contact)
-    ContactInbox.find_or_create_by!(
-      contact_id: contact.id,
-      inbox_id: inbox.id
-    ) do |record|
-      record.source_id = from_number
-    end
+  # WhatsApp ContactInbox.source_id must be digits-only (the wa_id); Twilio accepts the +.
+  def source_id_for_provider
+    provider == :whatsapp ? from_number.to_s.delete_prefix('+') : from_number
   end
 
   def resolve_conversation!(contact, contact_inbox)
@@ -76,13 +89,14 @@ class Voice::InboundCallBuilder
       inbox: inbox,
       conversation: conversation,
       contact: contact,
-      provider: :twilio,
+      provider: provider,
       direction: :incoming,
       status: 'ringing',
       provider_call_id: call_sid,
-      meta: { 'initiated_at' => Time.zone.now.to_i }
+      meta: { 'initiated_at' => Time.zone.now.to_i }.merge(extra_meta.stringify_keys)
     )
-    call.update!(conference_sid: call.default_conference_sid)
+    # `conference_sid` is a Twilio bridging concept; WhatsApp goes browser↔Meta.
+    call.update!(conference_sid: call.default_conference_sid) if call.twilio?
     call
   end
 end

enterprise/app/services/voice/provider/twilio/conference_service.rb

@@ -9,8 +9,7 @@ class Voice::Provider::Twilio::ConferenceService
   end
 
   def mark_agent_joined(user:)
-    claim_call!(user)
-    assign_conversation!(user)
+    call.update!(accepted_by_agent: user)
   end
 
   def end_conference
@@ -22,30 +21,4 @@ class Voice::Provider::Twilio::ConferenceService
       .list(friendly_name: call.conference_sid, status: 'in-progress')
       .each { |conf| client.conferences(conf.sid).update(status: 'completed') }
   end
-
-  private
-
-  def claim_call!(user)
-    call.with_lock do
-      raise_already_accepted!(call.accepted_by_agent) if claimed_by_other_agent?(user)
-      call.update!(accepted_by_agent: user) if call.accepted_by_agent_id != user.id
-    end
-  end
-
-  def claimed_by_other_agent?(user)
-    call.accepted_by_agent_id.present? && call.accepted_by_agent_id != user.id
-  end
-
-  def raise_already_accepted!(agent)
-    raise CustomExceptions::CallAlreadyAccepted.new(agent_name: agent&.available_name || agent&.name)
-  end
-
-  # Existing assignments win — manual reassignment and pre-call assignment
-  # (e.g., lock_to_single_conversation) shouldn't be stomped on pickup.
-  def assign_conversation!(user)
-    conversation = call.conversation
-    return if conversation.assignee_id.present?
-
-    Conversations::AssignmentService.new(conversation: conversation, assignee_id: user.id).perform
-  end
 end

enterprise/app/services/whatsapp/call_permission_reply_service.rb

@@ -0,0 +1,61 @@
+class Whatsapp::CallPermissionReplyService
+  pattr_initialize [:inbox!, :params!]
+
+  def perform
+    return unless inbox.channel.voice_enabled?
+
+    reply_data = extract_reply_data
+    return unless reply_data&.dig(:accepted)
+
+    conversation = find_requesting_conversation(reply_data[:context_id])
+    return unless conversation
+
+    clear_permission_flag(conversation)
+    broadcast_permission_granted(conversation.contact, conversation)
+  end
+
+  private
+
+  def extract_reply_data
+    message = params.dig(:entry, 0, :changes, 0, :value, :messages, 0)
+    reply = message&.dig(:interactive, :call_permission_reply)
+    return unless reply
+
+    accepted = reply[:response] == 'accept'
+    Rails.logger.info "[WHATSAPP CALL] call_permission_reply from=#{message[:from]} accepted=#{accepted} permanent=#{reply[:is_permanent]}"
+    { from_number: message[:from], accepted: accepted, context_id: message.dig(:context, :id) }
+  end
+
+  # Match the reply to the conversation whose request message it actually points
+  # at (interactive replies carry context.id = our outbound wamid). Recency-based
+  # lookup would broadcast to the wrong thread when a contact has multiple
+  # parallel pending requests.
+  def find_requesting_conversation(context_id)
+    return if context_id.blank?
+
+    inbox.conversations
+         .where.not(status: :resolved)
+         .where("additional_attributes ->> 'call_permission_request_message_id' = ?", context_id)
+         .first
+  end
+
+  def clear_permission_flag(conversation)
+    attrs = (conversation.additional_attributes || {}).except(
+      'call_permission_requested_at', 'call_permission_request_message_id'
+    )
+    conversation.update!(additional_attributes: attrs)
+  end
+
+  def broadcast_permission_granted(contact, conversation)
+    ActionCable.server.broadcast(
+      "account_#{inbox.account_id}",
+      {
+        event: 'voice_call.permission_granted',
+        data: {
+          account_id: inbox.account_id, conversation_id: conversation.id,
+          contact_name: contact.name, contact_phone: contact.phone_number
+        }
+      }
+    )
+  end
+end

enterprise/app/services/whatsapp/call_service.rb

@@ -0,0 +1,102 @@
+class Whatsapp::CallService
+  pattr_initialize [:call!, :agent!, :sdp_answer]
+
+  def accept
+    raise Voice::CallErrors::CallFailed, 'sdp_answer is required' if sdp_answer.blank?
+
+    # All side effects under the lock so a concurrent terminate cannot finalize
+    # the call between status update and the message/conversation/broadcast writes.
+    call.with_lock do
+      transition_to_in_progress!
+      update_message_status('in_progress')
+      update_conversation_call_status(call.display_status)
+      broadcast(:accepted, accepted_by_agent_id: agent.id)
+    end
+    call
+  end
+
+  def reject
+    call.with_lock do
+      next if call.terminal? || call.in_progress?
+
+      invoke_provider!(:reject_call)
+      finalize_call('failed')
+    end
+    call
+  end
+
+  def terminate
+    call.with_lock do
+      next if call.terminal?
+
+      invoke_provider!(:terminate_call)
+      # Agent hangs up before contact picks up → no_answer; mirrors the webhook terminate path.
+      finalize_call(call.in_progress? ? 'completed' : 'no_answer')
+    end
+    call
+  end
+
+  private
+
+  def transition_to_in_progress!
+    # Order matters: in_progress and terminal both make ringing? false, so we have to
+    # branch on in_progress? first to surface the distinct AlreadyAccepted state.
+    raise Voice::CallErrors::AlreadyAccepted, 'Call already accepted by another agent' if call.in_progress?
+    raise Voice::CallErrors::NotRinging, 'Call is not in ringing state' unless call.ringing?
+
+    forward_answer_to_meta!
+    call.update!(status: 'in_progress', accepted_by_agent_id: agent.id, started_at: Time.current,
+                 meta: (call.meta || {}).merge('sdp_answer' => sdp_answer))
+    claim_conversation_for_agent
+  end
+
+  def forward_answer_to_meta!
+    invoke_provider!(:pre_accept_call, sdp_answer)
+    invoke_provider!(:accept_call, sdp_answer)
+  end
+
+  # Take ownership of the conversation if no one holds it; leave assignee alone otherwise (transfer via UI).
+  def claim_conversation_for_agent
+    call.conversation.update!(assignee: agent) if call.conversation.assignee_id.blank?
+  end
+
+  # Raise on Meta failure (bool false or transport error) so callers bail before
+  # finalizing local state — otherwise we'd mark a still-active call as ended
+  # and broadcast voice_call.ended while Meta thinks it's live.
+  def invoke_provider!(method, *)
+    success = call.inbox.channel.provider_service.public_send(method, call.provider_call_id, *)
+    raise Voice::CallErrors::CallFailed, "Meta #{method} failed" unless success
+  rescue Voice::CallErrors::CallFailed
+    raise
+  rescue StandardError => e
+    Rails.logger.error "[WHATSAPP CALL] #{method} failed: #{e.class} #{e.message}"
+    raise Voice::CallErrors::CallFailed, "Meta #{method} failed"
+  end
+
+  def finalize_call(status)
+    meta = (call.meta || {}).merge('ended_at' => Time.zone.now.to_i)
+    call.update!(status: status, meta: meta)
+    update_message_status(status)
+    update_conversation_call_status(call.display_status)
+    broadcast(:ended, status: call.display_status)
+  end
+
+  def update_message_status(status)
+    Voice::CallMessageBuilder.new(call).update_status!(status: status, agent: agent)
+  end
+
+  def update_conversation_call_status(status)
+    call.conversation.update!(
+      additional_attributes: (call.conversation.additional_attributes || {}).merge('call_status' => status)
+    )
+  end
+
+  def broadcast(event, **extra)
+    payload = {
+      event: "voice_call.#{event}",
+      data: { id: call.id, call_id: call.provider_call_id, provider: call.provider,
+              conversation_id: call.conversation_id, account_id: call.account_id }.merge(extra)
+    }
+    ActionCable.server.broadcast("account_#{call.account_id}", payload)
+  end
+end

enterprise/app/services/whatsapp/incoming_call_service.rb

@@ -0,0 +1,122 @@
+class Whatsapp::IncomingCallService
+  pattr_initialize [:inbox!, :params!]
+
+  def perform
+    return unless inbox.channel.voice_enabled?
+
+    Array(params[:calls]).each { |c| handle_event(c.with_indifferent_access) }
+  end
+
+  private
+
+  def handle_event(payload)
+    case payload[:event]
+    when 'connect' then handle_connect(payload)
+    when 'terminate' then handle_terminate(payload)
+    else Rails.logger.warn "[WHATSAPP CALL] Unknown call event: #{payload[:event]}"
+    end
+  end
+
+  def handle_connect(payload)
+    call = Call.whatsapp.find_by(provider_call_id: payload[:id])
+    return create_inbound_call(payload) if call.nil?
+    return accept_outbound_call(call, payload) if call.outgoing?
+
+    Rails.logger.info "[WHATSAPP CALL] Duplicate inbound connect for #{payload[:id]}; ignoring"
+  rescue ActiveRecord::RecordNotUnique
+    Rails.logger.warn "[WHATSAPP CALL] Duplicate provider_call_id received: #{payload[:id]}"
+  end
+
+  def create_inbound_call(payload)
+    sdp_offer = payload.dig(:session, :sdp)
+    call = Voice::InboundCallBuilder.perform!(
+      inbox: inbox, from_number: "+#{payload[:from]}", call_sid: payload[:id],
+      provider: :whatsapp,
+      extra_meta: { 'sdp_offer' => sdp_offer, 'ice_servers' => Call.default_ice_servers }
+    )
+    update_conversation(call)
+    broadcast_incoming(call, sdp_offer)
+  end
+
+  def accept_outbound_call(call, payload)
+    return if call.in_progress? || call.terminal?
+
+    # Pin setup:active so browsers don't renegotiate when Meta echoes actpass.
+    sdp_answer = payload.dig(:session, :sdp)&.gsub('a=setup:actpass', 'a=setup:active')
+    update_call!(call, 'in_progress',
+                 started_at: Time.current,
+                 meta: (call.meta || {}).merge('sdp_answer' => sdp_answer))
+    broadcast(call, 'voice_call.outbound_connected', sdp_answer: sdp_answer)
+  end
+
+  def handle_terminate(payload)
+    # Webhooks can arrive out of order (terminate before connect under tunnel/network
+    # delays). Materialise a missed-call record so the contact's "called and hung up"
+    # still surfaces in the dashboard instead of being silently dropped.
+    call = Call.whatsapp.find_by(provider_call_id: payload[:id]) || build_missed_inbound_call(payload)
+    return unless call
+
+    duration = payload[:duration]&.to_i
+    status = answered?(call, duration) ? 'completed' : 'no_answer'
+    meta = (call.meta || {}).merge('ended_at' => Time.zone.now.to_i)
+    update_call!(call, status, duration_seconds: duration, end_reason: payload[:terminate_reason], meta: meta)
+    broadcast(call, 'voice_call.ended', status: call.display_status, duration_seconds: call.duration_seconds)
+  end
+
+  # No connect was ever processed (webhook reordering or never delivered) — build a
+  # bare Call+Message for the contact so the UI shows the missed-call bubble.
+  def build_missed_inbound_call(payload)
+    Voice::InboundCallBuilder.perform!(
+      inbox: inbox, from_number: "+#{payload[:from]}", call_sid: payload[:id],
+      provider: :whatsapp,
+      extra_meta: { 'ice_servers' => Call.default_ice_servers }
+    )
+  rescue ActiveRecord::RecordNotUnique
+    Call.whatsapp.find_by(provider_call_id: payload[:id])
+  end
+
+  # accepted_by_agent_id is the initiating agent on outbound calls, so it only signals "answered" for inbound.
+  def answered?(call, duration)
+    call.in_progress? || duration.to_i.positive? || (call.incoming? && call.accepted_by_agent_id.present?)
+  end
+
+  def update_call!(call, status, **attrs)
+    call.update!(status: status, **attrs)
+    Voice::CallMessageBuilder.new(call).update_status!(status: status, agent: call.accepted_by_agent,
+                                                       duration_seconds: attrs[:duration_seconds])
+    update_conversation(call)
+  end
+
+  def update_conversation(call)
+    call.conversation.update!(
+      additional_attributes: (call.conversation.additional_attributes || {}).merge(
+        'call_status' => call.display_status, 'call_direction' => call.direction_label
+      )
+    )
+  end
+
+  # Ring the assignee if assigned; otherwise account-wide so any agent can pick up.
+  def broadcast_incoming(call, sdp_offer)
+    contact = call.contact
+    token = call.conversation.assignee&.pubsub_token
+    broadcast(call, 'voice_call.incoming',
+              streams: token ? [token] : account_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 broadcast(call, event, streams: account_streams, **extra)
+    payload = { event: event, data: base_payload(call).merge(extra) }
+    streams.each { |s| ActionCable.server.broadcast(s, payload) }
+  end
+
+  def account_streams
+    ["account_#{inbox.account_id}"]
+  end
+
+  def base_payload(call)
+    { account_id: inbox.account_id, id: call.id, call_id: call.provider_call_id,
+      provider: 'whatsapp', conversation_id: call.conversation_id }
+  end
+end

enterprise/app/views/api/v1/accounts/whatsapp_calls/accept.json.jbuilder

@@ -0,0 +1 @@
+json.partial! 'api/v1/models/whatsapp_call', call: @call

enterprise/app/views/api/v1/accounts/whatsapp_calls/initiate.json.jbuilder

@@ -0,0 +1,5 @@
+json.status 'calling'
+json.call_id @call.provider_call_id
+json.id @call.id
+json.message_id @message.id
+json.provider 'whatsapp'

enterprise/app/views/api/v1/accounts/whatsapp_calls/reject.json.jbuilder

@@ -0,0 +1,2 @@
+json.id @call.id
+json.status @call.display_status

enterprise/app/views/api/v1/accounts/whatsapp_calls/show.json.jbuilder

@@ -0,0 +1 @@
+json.partial! 'api/v1/models/whatsapp_call', call: @call

enterprise/app/views/api/v1/accounts/whatsapp_calls/terminate.json.jbuilder

@@ -0,0 +1,2 @@
+json.id @call.id
+json.status @call.display_status

enterprise/app/views/api/v1/accounts/whatsapp_calls/upload_recording.json.jbuilder

@@ -0,0 +1,2 @@
+json.id @call.id
+json.status @upload_status

enterprise/app/views/api/v1/models/_whatsapp_call.json.jbuilder

@@ -0,0 +1,24 @@
+contact = call.conversation&.contact
+
+json.id call.id
+json.call_id call.provider_call_id
+json.provider call.provider
+json.status call.display_status
+json.direction call.direction_label
+json.conversation_id call.conversation_id
+json.inbox_id call.inbox_id
+json.message_id call.message_id
+json.accepted_by_agent_id call.accepted_by_agent_id
+json.elapsed_seconds(call.started_at ? (Time.current - call.started_at).to_i : 0)
+json.sdp_offer call.meta&.dig('sdp_offer')
+json.ice_servers(call.meta&.dig('ice_servers') || Call.default_ice_servers)
+
+if contact
+  json.caller do
+    json.name contact.name
+    json.phone contact.phone_number
+    json.avatar contact.avatar_url
+  end
+else
+  json.caller({})
+end

enterprise/lib/voice/call_errors.rb

@@ -0,0 +1,11 @@
+module Voice::CallErrors
+  # Meta WhatsApp Cloud Calling error code returned when the contact has not
+  # granted call permission yet. See `initiate_call` in
+  # Enterprise::Whatsapp::Providers::WhatsappCloudService.
+  NO_CALL_PERMISSION_CODE = 138_006
+
+  class NoCallPermission < StandardError; end
+  class CallFailed < StandardError; end
+  class NotRinging < StandardError; end
+  class AlreadyAccepted < StandardError; end
+end

lib/custom_exceptions/call_already_accepted.rb

@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-class CustomExceptions::CallAlreadyAccepted < CustomExceptions::Base
-  def message
-    I18n.t('errors.voice.call_already_accepted', agent_name: @data[:agent_name])
-  end
-
-  def http_status
-    409
-  end
-end

spec/enterprise/controllers/twilio/voice_controller_spec.rb

@@ -32,7 +32,6 @@ RSpec.describe 'Twilio::VoiceController', type: :request do
       call.update!(conference_sid: call.default_conference_sid)
 
       expect(Voice::InboundCallBuilder).to receive(:perform!).with(
-        account: account,
         inbox: inbox,
         from_number: from_number,
         call_sid: call_sid

spec/enterprise/services/enterprise/whatsapp/providers/whatsapp_cloud_service_spec.rb

@@ -0,0 +1,69 @@
+require 'rails_helper'
+
+describe Whatsapp::Providers::WhatsappCloudService do
+  subject(:service) { described_class.new(whatsapp_channel: whatsapp_channel) }
+
+  let(:whatsapp_channel) { create(:channel_whatsapp, provider: 'whatsapp_cloud', validate_provider_config: false, sync_templates: false) }
+  let(:calls_url) { 'https://graph.facebook.com/v13.0/123456789/calls' }
+  let(:messages_url) { 'https://graph.facebook.com/v13.0/123456789/messages' }
+  let(:headers) { { 'Content-Type' => 'application/json' } }
+
+  before { stub_request(:get, /message_templates/) }
+
+  describe 'call action methods' do
+    it 'POSTs the action body with the SDP answer and returns true on success' do
+      stub_request(:post, calls_url)
+        .with(body: { messaging_product: 'whatsapp', call_id: 'WACALL', action: 'pre_accept',
+                      session: { sdp: 'sdp_answer', sdp_type: 'answer' } }.to_json)
+        .to_return(status: 200, body: '{}', headers: headers)
+
+      expect(service.pre_accept_call('WACALL', 'sdp_answer')).to be true
+    end
+
+    it 'returns false when Meta responds with a non-success status' do
+      stub_request(:post, calls_url).to_return(status: 400, body: '{}', headers: headers)
+
+      expect(service.reject_call('WACALL')).to be false
+    end
+  end
+
+  describe '#send_call_permission_request' do
+    it 'returns the parsed body on success' do
+      stub_request(:post, messages_url)
+        .with(body: hash_including(messaging_product: 'whatsapp', to: '15551234567', type: 'interactive'))
+        .to_return(status: 200, body: { messages: [{ id: 'wamid' }] }.to_json, headers: headers)
+
+      expect(service.send_call_permission_request('15551234567')).to eq('messages' => [{ 'id' => 'wamid' }])
+    end
+  end
+
+  describe '#initiate_call' do
+    it 'returns the parsed body on success' do
+      stub_request(:post, calls_url)
+        .with(body: { messaging_product: 'whatsapp', to: '15551234567', type: 'audio',
+                      session: { sdp: 'sdp_offer', sdp_type: 'offer' } }.to_json)
+        .to_return(status: 200, body: { messages: [{ id: 'wacall_1' }] }.to_json, headers: headers)
+
+      expect(service.initiate_call('15551234567', 'sdp_offer')).to eq('messages' => [{ 'id' => 'wacall_1' }])
+    end
+
+    it 'raises Voice::CallErrors::NoCallPermission when Meta returns error code 138006' do
+      stub_request(:post, calls_url).to_return(
+        status: 400,
+        body: { error: { code: 138_006, error_user_msg: 'No call permission' } }.to_json,
+        headers: headers
+      )
+
+      expect { service.initiate_call('15551234567', 'sdp_offer') }
+        .to raise_error(Voice::CallErrors::NoCallPermission, 'No call permission')
+    end
+
+    it 'raises Voice::CallErrors::CallFailed with a fallback message when the error body is non-JSON' do
+      stub_request(:post, calls_url).to_return(status: 502, body: '<html>502 Bad Gateway</html>',
+                                               headers: { 'Content-Type' => 'text/html' })
+
+      expect { service.initiate_call('15551234567', 'sdp_offer') }
+        .to raise_error(Voice::CallErrors::CallFailed, 'Failed to initiate call')
+    end
+  end
+end

spec/enterprise/services/voice/inbound_call_builder_spec.rb

@@ -16,7 +16,6 @@ RSpec.describe Voice::InboundCallBuilder do
 
   def perform_builder
     described_class.perform!(
-      account: account,
       inbox: inbox,
       from_number: from_number,
       call_sid: call_sid
@@ -87,6 +86,20 @@ RSpec.describe Voice::InboundCallBuilder do
     end
   end
 
+  context 'when a ContactInbox already exists for the source_id (different contact)' do
+    let!(:original_contact) { create(:contact, account: account, phone_number: '+15550009999') }
+    let!(:original_contact_inbox) do
+      create(:contact_inbox, contact: original_contact, inbox: inbox, source_id: from_number)
+    end
+
+    it 'reuses the existing ContactInbox instead of raising RecordNotUnique' do
+      call = perform_builder
+
+      expect(call.contact).to eq(original_contact)
+      expect(call.conversation.contact_inbox).to eq(original_contact_inbox)
+    end
+  end
+
   context 'when the inbox has lock_to_single_conversation enabled' do
     let!(:contact) { create(:contact, account: account, phone_number: from_number) }
     let!(:contact_inbox) { create(:contact_inbox, contact: contact, inbox: inbox, source_id: from_number) }

spec/enterprise/services/whatsapp/call_permission_reply_service_spec.rb

@@ -0,0 +1,97 @@
+require 'rails_helper'
+
+describe Whatsapp::CallPermissionReplyService do
+  let(:account) { create(:account) }
+  let(:channel) do
+    create(:channel_whatsapp, provider: 'whatsapp_cloud', account: account,
+                              validate_provider_config: false, sync_templates: false)
+  end
+  let(:inbox) { channel.inbox }
+  let(:contact) { create(:contact, account: account, phone_number: '+15550001111') }
+  let!(:contact_inbox) { create(:contact_inbox, contact: contact, inbox: inbox, source_id: '15550001111') }
+  let(:request_wamid) { 'wamid.permission_request_abc' }
+  let!(:conversation) do
+    create(:conversation, account: account, inbox: inbox, contact: contact, contact_inbox: contact_inbox, status: :open,
+                          additional_attributes: {
+                            'call_permission_requested_at' => Time.current.iso8601,
+                            'call_permission_request_message_id' => request_wamid
+                          })
+  end
+
+  before do
+    channel.provider_config = channel.provider_config.merge('calling_enabled' => true)
+    channel.save!
+  end
+
+  def reply_params(response:, context_id: request_wamid)
+    interactive = { type: 'call_permission_reply',
+                    call_permission_reply: { response: response, is_permanent: false } }
+    message = { from: '15550001111', type: 'interactive', interactive: interactive }
+    message[:context] = { id: context_id } if context_id
+    { entry: [{ changes: [{ value: { messages: [message] } }] }] }
+  end
+
+  it 'clears both permission flags and broadcasts voice_call.permission_granted on accept' do
+    allow(ActionCable.server).to receive(:broadcast)
+
+    described_class.new(inbox: inbox, params: reply_params(response: 'accept')).perform
+
+    attrs = conversation.reload.additional_attributes
+    expect(attrs).not_to include('call_permission_requested_at')
+    expect(attrs).not_to include('call_permission_request_message_id')
+    expect(ActionCable.server).to have_received(:broadcast).with(
+      "account_#{account.id}",
+      hash_including(event: 'voice_call.permission_granted',
+                     data: hash_including(conversation_id: conversation.id))
+    )
+  end
+
+  it 'is a no-op when the contact rejected the request' do
+    allow(ActionCable.server).to receive(:broadcast)
+
+    described_class.new(inbox: inbox, params: reply_params(response: 'reject')).perform
+
+    expect(conversation.reload.additional_attributes).to include('call_permission_requested_at')
+    expect(ActionCable.server).not_to have_received(:broadcast)
+  end
+
+  it 'is a no-op when calling is disabled on the channel' do
+    channel.provider_config = channel.provider_config.merge('calling_enabled' => false)
+    channel.save!
+    allow(ActionCable.server).to receive(:broadcast)
+
+    described_class.new(inbox: inbox, params: reply_params(response: 'accept')).perform
+
+    expect(ActionCable.server).not_to have_received(:broadcast)
+  end
+
+  it 'matches the originating conversation by context.id when the contact has multiple pending requests' do
+    other_request_wamid = 'wamid.permission_request_xyz'
+    other_open = create(:conversation, account: account, inbox: inbox, contact: contact, contact_inbox: contact_inbox,
+                                       status: :open,
+                                       additional_attributes: {
+                                         'call_permission_requested_at' => Time.current.iso8601,
+                                         'call_permission_request_message_id' => other_request_wamid
+                                       })
+    allow(ActionCable.server).to receive(:broadcast)
+
+    described_class.new(inbox: inbox, params: reply_params(response: 'accept', context_id: other_request_wamid)).perform
+
+    # The reply pointed at other_open's request — it should be the cleared one, not `conversation`
+    expect(other_open.reload.additional_attributes).not_to include('call_permission_request_message_id')
+    expect(conversation.reload.additional_attributes).to include('call_permission_request_message_id')
+    expect(ActionCable.server).to have_received(:broadcast).with(
+      "account_#{account.id}",
+      hash_including(data: hash_including(conversation_id: other_open.id))
+    )
+  end
+
+  it 'is a no-op when the reply has no context.id' do
+    allow(ActionCable.server).to receive(:broadcast)
+
+    described_class.new(inbox: inbox, params: reply_params(response: 'accept', context_id: nil)).perform
+
+    expect(conversation.reload.additional_attributes).to include('call_permission_request_message_id')
+    expect(ActionCable.server).not_to have_received(:broadcast)
+  end
+end

spec/enterprise/services/whatsapp/incoming_call_service_spec.rb

@@ -0,0 +1,192 @@
+require 'rails_helper'
+
+describe Whatsapp::IncomingCallService do
+  let(:account) { create(:account) }
+  let(:channel) do
+    create(:channel_whatsapp, provider: 'whatsapp_cloud', account: account,
+                              validate_provider_config: false, sync_templates: false)
+  end
+  let(:inbox) { channel.inbox }
+  let(:from_number) { '15550001111' }
+  let(:provider_call_id) { 'wacid_abc' }
+
+  before do
+    channel.provider_config = channel.provider_config.merge('calling_enabled' => true)
+    channel.save!
+  end
+
+  def call_payload(event:, **extra)
+    { calls: [{ id: provider_call_id, from: from_number, event: event, **extra }] }
+  end
+
+  context 'when calling is disabled on the channel' do
+    it 'is a no-op' do
+      channel.provider_config = channel.provider_config.merge('calling_enabled' => false)
+      channel.save!
+
+      expect { described_class.new(inbox: inbox, params: call_payload(event: 'connect')).perform }
+        .not_to change(Call, :count)
+    end
+  end
+
+  describe 'inbound connect' do
+    let(:sdp_offer) { "v=0\r\n...sdp..." }
+
+    it 'creates the Call + Conversation + voice_call message and broadcasts voice_call.incoming' do
+      allow(ActionCable.server).to receive(:broadcast)
+
+      params = call_payload(event: 'connect', session: { sdp: sdp_offer, sdp_type: 'offer' })
+      expect { described_class.new(inbox: inbox, params: params).perform }
+        .to change(Call, :count).by(1).and change(Conversation, :count).by(1)
+
+      call = Call.last
+      expect(call).to have_attributes(provider: 'whatsapp', direction: 'incoming', status: 'ringing',
+                                      provider_call_id: provider_call_id)
+      expect(call.meta['sdp_offer']).to eq(sdp_offer)
+      expect(ActionCable.server).to have_received(:broadcast).with(
+        "account_#{account.id}",
+        hash_including(event: 'voice_call.incoming', data: hash_including(sdp_offer: sdp_offer))
+      )
+    end
+  end
+
+  describe 'outbound connect (existing call)' do
+    let!(:call) do
+      conversation = create(:conversation, account: account, inbox: inbox)
+      create(:call, account: account, inbox: inbox, conversation: conversation, contact: conversation.contact,
+                    provider: :whatsapp, direction: :outgoing, status: 'ringing', provider_call_id: provider_call_id)
+    end
+
+    it 'transitions the call to in_progress and broadcasts voice_call.outbound_connected with the SDP answer' do
+      allow(ActionCable.server).to receive(:broadcast)
+      sdp_answer = "v=0\r\na=setup:actpass\r\n"
+
+      params = call_payload(event: 'connect', session: { sdp: sdp_answer, sdp_type: 'answer' })
+      described_class.new(inbox: inbox, params: params).perform
+
+      expect(call.reload).to have_attributes(status: 'in_progress', started_at: be_present)
+      expect(call.meta['sdp_answer']).to include('a=setup:active')
+      expect(ActionCable.server).to have_received(:broadcast).with(
+        "account_#{account.id}",
+        hash_including(event: 'voice_call.outbound_connected')
+      )
+    end
+  end
+
+  describe 'terminate' do
+    let!(:call) do
+      conversation = create(:conversation, account: account, inbox: inbox)
+      create(:call, account: account, inbox: inbox, conversation: conversation, contact: conversation.contact,
+                    provider: :whatsapp, direction: :incoming, status: 'in_progress', provider_call_id: provider_call_id)
+    end
+
+    it 'marks the call completed when the call had been answered' do
+      allow(ActionCable.server).to receive(:broadcast)
+
+      params = call_payload(event: 'terminate', duration: 42, terminate_reason: 'completed_normally')
+      described_class.new(inbox: inbox, params: params).perform
+
+      expect(call.reload).to have_attributes(status: 'completed', duration_seconds: 42, end_reason: 'completed_normally')
+      expect(call.ended_at).to be_present
+      expect(ActionCable.server).to have_received(:broadcast).with(
+        "account_#{account.id}",
+        hash_including(event: 'voice_call.ended', data: hash_including(status: 'completed'))
+      )
+    end
+
+    it 'marks unanswered ringing calls as no_answer' do
+      call.update!(status: 'ringing')
+      params = call_payload(event: 'terminate', duration: 0, terminate_reason: 'no_answer')
+
+      described_class.new(inbox: inbox, params: params).perform
+      expect(call.reload.status).to eq('no_answer')
+    end
+  end
+
+  describe 'duplicate inbound connect' do
+    let!(:call) do
+      conversation = create(:conversation, account: account, inbox: inbox)
+      create(:call, account: account, inbox: inbox, conversation: conversation, contact: conversation.contact,
+                    provider: :whatsapp, direction: :incoming, status: 'ringing', provider_call_id: provider_call_id)
+    end
+
+    it 'logs and ignores rather than treating it as outbound' do
+      allow(Rails.logger).to receive(:info)
+      allow(ActionCable.server).to receive(:broadcast)
+      params = call_payload(event: 'connect', session: { sdp: 'sdp_x', sdp_type: 'offer' })
+
+      described_class.new(inbox: inbox, params: params).perform
+
+      expect(call.reload).to have_attributes(status: 'ringing')
+      expect(Rails.logger).to have_received(:info).with(/Duplicate inbound connect/)
+      expect(ActionCable.server).not_to have_received(:broadcast)
+    end
+  end
+
+  describe 'connect arriving after terminal status' do
+    let!(:call) do
+      conversation = create(:conversation, account: account, inbox: inbox)
+      create(:call, account: account, inbox: inbox, conversation: conversation, contact: conversation.contact,
+                    provider: :whatsapp, direction: :outgoing, status: 'completed', provider_call_id: provider_call_id)
+    end
+
+    it 'does not reopen a completed outbound call' do
+      allow(ActionCable.server).to receive(:broadcast)
+      params = call_payload(event: 'connect', session: { sdp: 'late_sdp', sdp_type: 'answer' })
+
+      described_class.new(inbox: inbox, params: params).perform
+
+      expect(call.reload.status).to eq('completed')
+      expect(ActionCable.server).not_to have_received(:broadcast)
+    end
+  end
+
+  describe 'unanswered outbound call terminate' do
+    let!(:agent) { create(:user, account: account) }
+    let!(:call) do
+      conversation = create(:conversation, account: account, inbox: inbox)
+      create(:call, account: account, inbox: inbox, conversation: conversation, contact: conversation.contact,
+                    provider: :whatsapp, direction: :outgoing, status: 'ringing',
+                    accepted_by_agent: agent, provider_call_id: provider_call_id)
+    end
+
+    it 'marks the call as no_answer even though accepted_by_agent_id is set' do
+      allow(ActionCable.server).to receive(:broadcast)
+      params = call_payload(event: 'terminate', duration: 0, terminate_reason: 'no_answer')
+
+      described_class.new(inbox: inbox, params: params).perform
+
+      expect(call.reload.status).to eq('no_answer')
+      expect(ActionCable.server).to have_received(:broadcast).with(
+        "account_#{account.id}",
+        hash_including(event: 'voice_call.ended', data: hash_including(status: 'no-answer'))
+      )
+    end
+  end
+
+  describe 'unknown event' do
+    it 'logs a warning and does not raise' do
+      allow(Rails.logger).to receive(:warn)
+      params = call_payload(event: 'mystery')
+
+      expect { described_class.new(inbox: inbox, params: params).perform }.not_to raise_error
+      expect(Rails.logger).to have_received(:warn).with(/Unknown call event: mystery/)
+    end
+  end
+
+  describe 'multiple calls in one webhook payload' do
+    it 'processes every call in the array' do
+      allow(ActionCable.server).to receive(:broadcast)
+
+      params = {
+        calls: [
+          { id: 'wacid_a', from: from_number, event: 'connect', session: { sdp: 'sdp_a', sdp_type: 'offer' } },
+          { id: 'wacid_b', from: '15550002222', event: 'connect', session: { sdp: 'sdp_b', sdp_type: 'offer' } }
+        ]
+      }
+
+      expect { described_class.new(inbox: inbox, params: params).perform }.to change(Call, :count).by(2)
+      expect(Call.where(provider_call_id: %w[wacid_a wacid_b]).pluck(:provider_call_id)).to contain_exactly('wacid_a', 'wacid_b')
+    end
+  end
+end

theme/icons.js

@@ -423,10 +423,5 @@ export const icons = {
     width: 16,
     height: 16,
   },
-  'quick-reply': {
-    body: `<path d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z" fill="none" stroke="currentColor" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>`,
-    width: 15,
-    height: 15,
-  },
   /** Ends */
 };