fix(voice): keep ringing WhatsApp calls alive across page refresh

Inverted the previous decision: only the active (accepted) call gets
terminated on pagehide, since its WebRTC session dies with the page and
genuinely can't be rejoined. Ringing calls have no WebRTC state yet —
they're just a row on the backend and a state on Meta — so killing them
on refresh would needlessly hang up on the customer when the agent
intended to recover their UI, not reject the call.

After this, the flow on refresh during a ringing inbound is:
  - beforeunload prompt fires (warning the agent)
  - pagehide does nothing for ringing calls; active calls still terminate
  - new page loads, conversation messages fetch
  - seedCallsFromHydratedMessages picks up status='ringing' voice_call
    messages and populates the calls store
  - FloatingCallWidget reappears with Accept; agent clicks; acceptIncomingCall
    fetches the SDP via /whatsapp_calls/:id and the call connects

.github/workflows/deploy_check.yml

@@ -11,9 +11,6 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   deployment_check:
     name: Check Deployment

.github/workflows/frontend-fe.yml

@@ -8,9 +8,6 @@ on:
     branches:
       - develop
 
-permissions:
-  contents: read
-
 jobs:
   test:
     runs-on: ubuntu-22.04

.github/workflows/logging_percentage_check.yml

@@ -10,9 +10,6 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   log_lines_check:
     runs-on: ubuntu-latest

.github/workflows/nightly_installer.yml

@@ -14,9 +14,6 @@ on:
     - cron: "0 0 * * *"
   workflow_dispatch:
 
-permissions:
-  contents: read
-
 jobs:
   nightly:
     runs-on: ubuntu-24.04

.github/workflows/publish_codespace_image.yml

@@ -3,10 +3,6 @@ name: Publish Codespace Base Image
 on:
   workflow_dispatch:
 
-permissions:
-  contents: read
-  packages: write
-
 jobs:
   publish-code-space-image:
     runs-on: ubuntu-latest

.github/workflows/publish_ee_docker.yml

@@ -18,9 +18,6 @@ on:
 env:
   DOCKER_REPO: chatwoot/chatwoot
 
-permissions:
-  contents: read
-
 jobs:
   build:
     strategy:

.github/workflows/publish_foss_docker.yml

@@ -18,9 +18,6 @@ on:
 env:
   DOCKER_REPO: chatwoot/chatwoot
 
-permissions:
-  contents: read
-
 jobs:
   build:
     strategy:

.github/workflows/size-limit.yml

@@ -10,9 +10,6 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   test:
     runs-on: ubuntu-22.04

.github/workflows/test_docker_build.yml

@@ -7,9 +7,6 @@ on:
       - master
   workflow_dispatch:
 
-permissions:
-  contents: read
-
 jobs:
   test-build:
     strategy:

app/controllers/api/v1/widget/conversations_controller.rb

@@ -1,7 +1,6 @@
 class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   include Events::Types
-  before_action :render_not_found_if_empty,
-                only: [:toggle_typing, :toggle_status, :request_handoff, :set_custom_attributes, :destroy_custom_attributes]
+  before_action :render_not_found_if_empty, only: [:toggle_typing, :toggle_status, :set_custom_attributes, :destroy_custom_attributes]
 
   def index
     @conversation = conversation
@@ -65,11 +64,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
     head :ok
   end
 
-  def request_handoff
-    perform_handoff if conversation.pending?
-    head :ok
-  end
-
   def set_custom_attributes
     conversation.update!(custom_attributes: permitted_params[:custom_attributes])
   end
@@ -105,40 +99,4 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
                                                                message: [:content, :referer_url, :timestamp, :echo_id],
                                                                custom_attributes: {})
   end
-
-  def perform_handoff
-    assistant = captain_assistant
-    previous_executed_by = Current.executed_by
-    Current.executed_by = assistant if assistant
-
-    I18n.with_locale(conversation.account.locale) do
-      create_captain_handoff_message(assistant) if assistant
-      conversation.bot_handoff!
-      send_out_of_office_message_after_handoff
-    end
-  ensure
-    Current.executed_by = previous_executed_by
-  end
-
-  def captain_assistant
-    return unless inbox.respond_to?(:captain_assistant)
-
-    inbox.captain_assistant
-  end
-
-  def create_captain_handoff_message(assistant)
-    conversation.messages.create!(
-      message_type: :outgoing,
-      account_id: conversation.account_id,
-      inbox_id: conversation.inbox_id,
-      sender: assistant,
-      content: assistant.config['handoff_message'].presence || I18n.t('conversations.captain.handoff')
-    )
-  end
-
-  def send_out_of_office_message_after_handoff
-    return if conversation.campaign.present?
-
-    ::MessageTemplates::Template::OutOfOffice.perform_if_applicable(conversation)
-  end
 end

app/drops/user_drop.rb

@@ -7,15 +7,11 @@ class UserDrop < BaseDrop
     @obj.try(:available_name)
   end
 
-  def email
-    @obj.try(:email)
-  end
-
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
 
   def last_name
-    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
+    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
 end

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,19 +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 { useCallSession } from 'dashboard/composables/useCallSession';
 
 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',
@@ -28,40 +31,36 @@ const BG_COLOR_MAP = {
   [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };
 
-const { t } = useI18n();
-const store = useStore();
-const { call, conversationId, currentUserId, inboxId } = useMessageContext();
-const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
-  useCallSession();
+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?.acceptedByAgentId);
-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?.acceptedByAgentName) return call.value.acceptedByAgentName;
-  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(() => {
@@ -76,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(() => {
@@ -106,45 +93,6 @@ const iconName = computed(() => {
 });
 
 const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
-
-const callSid = computed(() => call.value?.providerCallId);
-
-// Show "Join call" when the call is still ringing, no agent has claimed it,
-// and the conversation is unassigned or assigned to the current user. Mirrors
-// the eligibility used by FloatingCallWidget so the bubble can act as a
-// recovery affordance after a refresh or missed widget.
-const canJoinCall = computed(() => {
-  if (status.value !== VOICE_CALL_STATUS.RINGING) return false;
-  if (isOutbound.value) return false;
-  if (acceptedByAgentId.value) return false;
-  if (!callSid.value || !inboxId.value || !conversationId.value) return false;
-  // Suppress the button once this call is the local active session — the
-  // message status webhook may lag behind, so we can't rely on `status` alone
-  // to hide it after a successful join from this client.
-  if (hasActiveCall.value && activeCall.value?.callSid === callSid.value)
-    return false;
-  const assignee = conversationAssignee.value;
-  if (assignee?.id && assignee.id !== currentUserId.value) return false;
-  return true;
-});
-
-const handleJoinCall = async () => {
-  if (!canJoinCall.value || isJoining.value) return;
-
-  if (hasActiveCall.value && activeCall.value?.callSid !== callSid.value) {
-    await endCall({
-      conversationId: activeCall.value.conversationId,
-      inboxId: activeCall.value.inboxId,
-      callSid: activeCall.value.callSid,
-    });
-  }
-
-  await joinCall({
-    conversationId: conversationId.value,
-    inboxId: inboxId.value,
-    callSid: callSid.value,
-  });
-};
 </script>
 
 <template>
@@ -170,19 +118,19 @@ const handleJoinCall = async () => {
             {{ $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>
-          <button
-            v-if="canJoinCall"
-            type="button"
-            class="p-0 mt-1 text-xs font-medium text-start text-n-teal-10 hover:text-n-teal-11 disabled:opacity-50"
-            :disabled="isJoining"
-            @click="handleJoinCall"
-          >
-            {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
-          </button>
         </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,9 @@
 <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 WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
@@ -21,16 +22,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 +74,25 @@ const handleEndCall = async () => {
 };
 
 const handleJoinCall = async call => {
+  if (!call || isJoining.value) 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 +191,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,22 @@
 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 { useAlert } from 'dashboard/composables';
+import {
+  useWhatsappCallSession,
+  sendWhatsappTerminateBeacon,
+  cleanupWhatsappSession,
+} from 'dashboard/composables/useWhatsappCallSession';
+import { handleVoiceCallCreated } from 'dashboard/helper/voice';
 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 +26,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 +41,83 @@ 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 refresh prompt. Terminate the
+  // active call only — its WebRTC session dies with the page and can't be
+  // rejoined. Ringing calls intentionally stay alive on Meta so the agent can
+  // pick them up after the page reloads (FloatingCallWidget rehydrates them
+  // via seedCallsFromHydratedMessages once the conversation messages land).
+  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();
@@ -57,6 +129,18 @@ export function useCallSession() {
 
     isJoining.value = true;
     try {
+      const call = findCall(callSid);
+      if (isWhatsappCall(call)) {
+        await whatsappSession.acceptIncomingCall({
+          callId: call.callId,
+          sdpOffer: call.sdpOffer,
+          iceServers: call.iceServers,
+        });
+        callsStore.setCallActive(callSid);
+        durationTimer.start();
+        return { callId: call.callId };
+      }
+
       const device = await TwilioVoiceClient.initializeDevice(inboxId);
       if (!device) return null;
 
@@ -77,13 +161,12 @@ 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);
-      }
       // 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 +174,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,388 @@
+import { ref } from 'vue';
+import Cookies from 'js-cookie';
+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;
+};
+
+// devise-token-auth requires access-token / client / uid headers on every
+// request — navigator.sendBeacon can't set custom headers, so the dashboard
+// stashes the auth payload in the cw_d_session_info cookie at login and we
+// rehydrate it here for unload-time requests.
+const getDeviseAuthHeaders = () => {
+  try {
+    const raw = Cookies.get('cw_d_session_info');
+    if (!raw) return null;
+    const session = JSON.parse(raw);
+    return {
+      'access-token': session['access-token'] || '',
+      client: session.client || '',
+      uid: session.uid || '',
+      expiry: session.expiry || '',
+      'token-type': session['token-type'] || 'Bearer',
+    };
+  } catch (_) {
+    return null;
+  }
+};
+
+// Best-effort terminate beacon for any WhatsApp call — the backend's terminate
+// endpoint handles both ringing and in_progress states (terminate while ringing
+// records 'no_answer' which is the right shape for "agent left the page").
+// Browser-direct WebRTC has no rejoin path, so the only sensible thing on page
+// close is to release the call on Meta's side.
+//
+// Uses fetch+keepalive instead of navigator.sendBeacon so we can attach the
+// devise-token-auth headers — without them the request 401s and the call
+// stays open on Meta until the carrier-side timeout (~60s).
+export const sendWhatsappCallBeacon = callId => {
+  if (!callId) return;
+  const accountId = window.location.pathname.split('/')[3];
+  if (!accountId) return;
+  const headers = getDeviseAuthHeaders();
+  if (!headers) return;
+  const url = `/api/v1/accounts/${accountId}/whatsapp_calls/${callId}/terminate`;
+  try {
+    fetch(url, {
+      method: 'POST',
+      keepalive: true,
+      credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/json', ...headers },
+      body: '{}',
+    }).catch(() => {});
+  } catch (_) {
+    /* noop */
+  }
+};
+
+// Backward-compat wrapper for the active-call case — guarded by
+// intentionallyClosing so we don't double-terminate after an explicit hangup.
+export const sendWhatsappTerminateBeacon = () => {
+  if (!activeCallId || intentionallyClosing) return;
+  sendWhatsappCallBeacon(activeCallId);
+};

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,9 +83,7 @@
       "CALL_ENDED": "Call ended",
       "NOT_ANSWERED_YET": "Not answered yet",
       "THEY_ANSWERED": "They answered",
-      "YOU_ANSWERED": "You answered",
-      "AGENT_ANSWERED": "{agentName} answered",
-      "JOIN_CALL": "Join call"
+      "YOU_ANSWERED": "You answered"
     },
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
@@ -99,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}",
@@ -299,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

@@ -637,7 +637,8 @@
       "BOT_CONFIGURATION": "Bot Configuration",
       "ACCOUNT_HEALTH": "Account Health",
       "CSAT": "CSAT",
-      "VOICE": "Voice"
+      "VOICE": "Voice",
+      "CALLS": "Calls"
     },
     "VOICE_CONFIGURATION": {
       "ENABLE_VOICE": {
@@ -648,6 +649,20 @@
         "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections."
       }
     },
+    "WHATSAPP_CALLING": {
+      "ENABLE": {
+        "LABEL": "Enable WhatsApp Calling",
+        "DESCRIPTION": "Allow agents to receive and place WhatsApp Cloud calls on this inbox. Customers can call this business number directly from WhatsApp."
+      },
+      "PHONE_NUMBER": {
+        "LABEL": "Business phone number",
+        "HELP_TEXT": "WhatsApp number that customers will call."
+      },
+      "HOW_IT_WORKS": {
+        "LABEL": "How it works",
+        "DESCRIPTION": "Calls are placed peer-to-peer between the agent's browser and Meta — no extra credentials are required. Make sure the agent's browser has microphone permission for this site."
+      }
+    },
     "CHANNEL_PREFERENCES": "Channel Preferences",
     "WIDGET_FEATURES": "Widget features",
     "ACCOUNT_HEALTH": {
@@ -800,6 +815,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/Settings.vue

@@ -22,6 +22,7 @@ import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import VoiceConfigurationPage from './settingsPage/VoiceConfigurationPage.vue';
+import WhatsappCallingPage from './settingsPage/WhatsappCallingPage.vue';
 import CustomerSatisfactionPage from './settingsPage/CustomerSatisfactionPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
@@ -48,6 +49,7 @@ export default {
     CollaboratorsPage,
     ConfigurationPage,
     VoiceConfigurationPage,
+    WhatsappCallingPage,
     CustomerSatisfactionPage,
     FacebookReauthorize,
     GreetingsEditor,
@@ -249,6 +251,16 @@ export default {
         ];
       }
 
+      if (this.isAWhatsAppCloudChannel && this.isEmbeddedSignupWhatsApp) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'calls-configuration',
+            name: this.$t('INBOX_MGMT.TABS.CALLS'),
+          },
+        ];
+      }
+
       return visibleToAllChannelTabs;
     },
     currentInboxId() {
@@ -1262,6 +1274,12 @@ export default {
         >
           <VoiceConfigurationPage :inbox="inbox" />
         </div>
+        <div
+          v-if="selectedTabKey === 'calls-configuration'"
+          class="mx-6 max-w-4xl"
+        >
+          <WhatsappCallingPage :inbox="inbox" />
+        </div>
         <div v-if="selectedTabKey === 'csat'">
           <CustomerSatisfactionPage :inbox="inbox" />
         </div>

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/routes/dashboard/settings/inbox/settingsPage/WhatsappCallingPage.vue

@@ -0,0 +1,91 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    SettingsFieldSection,
+    SettingsToggleSection,
+    NextButton,
+  },
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      callingEnabled: this.inbox.provider_config?.calling_enabled || false,
+      isUpdating: false,
+    };
+  },
+  computed: {
+    phoneNumber() {
+      return (
+        this.inbox.provider_config?.phone_number || this.inbox.phone_number
+      );
+    },
+  },
+  watch: {
+    'inbox.provider_config.calling_enabled'(val) {
+      this.callingEnabled = val || false;
+    },
+  },
+  methods: {
+    async updateCallingSettings() {
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('inboxes/updateInbox', {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              calling_enabled: this.callingEnabled,
+            },
+          },
+        });
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      } finally {
+        this.isUpdating = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <SettingsToggleSection
+      v-model="callingEnabled"
+      :header="$t('INBOX_MGMT.WHATSAPP_CALLING.ENABLE.LABEL')"
+      :description="$t('INBOX_MGMT.WHATSAPP_CALLING.ENABLE.DESCRIPTION')"
+    />
+
+    <SettingsFieldSection
+      v-if="phoneNumber"
+      :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.LABEL')"
+      :help-text="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.HELP_TEXT')"
+    >
+      <woot-code :script="phoneNumber" lang="html" />
+    </SettingsFieldSection>
+
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.WHATSAPP_CALLING.HOW_IT_WORKS.LABEL')"
+      :help-text="$t('INBOX_MGMT.WHATSAPP_CALLING.HOW_IT_WORKS.DESCRIPTION')"
+    />
+
+    <div>
+      <NextButton
+        :is-loading="isUpdating"
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        @click="updateCallingSettings"
+      />
+    </div>
+  </div>
+</template>

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/javascript/widget/api/conversation.js

@@ -62,12 +62,6 @@ const toggleStatus = async () => {
   );
 };
 
-const requestHandoff = async () => {
-  return API.post(
-    `/api/v1/widget/conversations/request_handoff${window.location.search}`
-  );
-};
-
 const setCustomAttributes = async customAttributes => {
   return API.post(
     `/api/v1/widget/conversations/set_custom_attributes${window.location.search}`,
@@ -96,7 +90,6 @@ export {
   setUserLastSeenAt,
   sendEmailTranscript,
   toggleStatus,
-  requestHandoff,
   setCustomAttributes,
   deleteCustomAttribute,
 };

app/javascript/widget/components/ChatFooter.vue

@@ -5,15 +5,12 @@ import CustomButton from 'shared/components/Button.vue';
 import FooterReplyTo from 'widget/components/FooterReplyTo.vue';
 import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { CONVERSATION_STATUS } from 'shared/constants/messages';
 import { sendEmailTranscript } from 'widget/api/conversation';
 import { useRouter } from 'vue-router';
 import { IFrameHelper } from '../helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
 import { emitter } from 'shared/helpers/mitt';
 
-const CAPTAIN_HANDOFF_REPLY_THRESHOLD = 5;
-
 export default {
   components: {
     ChatInputWrap,
@@ -27,7 +24,6 @@ export default {
   data() {
     return {
       inReplyTo: null,
-      isRequestingHandoff: false,
     };
   },
   computed: {
@@ -35,7 +31,6 @@ export default {
       conversationAttributes: 'conversationAttributes/getConversationParams',
       widgetColor: 'appConfig/getWidgetColor',
       conversationSize: 'conversation/getConversationSize',
-      captainReplyCount: 'conversation/getCaptainReplyCount',
       currentUser: 'contacts/getCurrentUser',
       isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
     }),
@@ -50,12 +45,6 @@ export default {
     showEmailTranscriptButton() {
       return this.hasEmail;
     },
-    showCaptainHandoffButton() {
-      return (
-        this.conversationAttributes.status === CONVERSATION_STATUS.PENDING &&
-        this.captainReplyCount >= CAPTAIN_HANDOFF_REPLY_THRESHOLD
-      );
-    },
     hasEmail() {
       return this.currentUser && this.currentUser.has_email;
     },
@@ -69,11 +58,7 @@ export default {
     emitter.on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.toggleReplyTo);
   },
   methods: {
-    ...mapActions('conversation', [
-      'sendMessage',
-      'sendAttachment',
-      'requestHandoff',
-    ]),
+    ...mapActions('conversation', ['sendMessage', 'sendAttachment']),
     ...mapActions('conversationAttributes', ['getAttributes']),
     async handleSendMessage(content) {
       await this.sendMessage({
@@ -105,18 +90,6 @@ export default {
     toggleReplyTo(message) {
       this.inReplyTo = message;
     },
-    async handleRequestHandoff() {
-      try {
-        this.isRequestingHandoff = true;
-        await this.requestHandoff();
-      } catch (error) {
-        emitter.emit(BUS_EVENTS.SHOW_ALERT, {
-          message: this.$t('CAPTAIN_HANDOFF.ERROR'),
-        });
-      } finally {
-        this.isRequestingHandoff = false;
-      }
-    },
     async sendTranscript() {
       if (this.hasEmail) {
         try {
@@ -151,17 +124,6 @@ export default {
       :in-reply-to="inReplyTo"
       @dismiss="inReplyTo = null"
     />
-    <CustomButton
-      v-if="showCaptainHandoffButton"
-      block
-      class="mb-2 font-medium"
-      :bg-color="widgetColor"
-      :text-color="textColor"
-      :disabled="isRequestingHandoff"
-      @click="handleRequestHandoff"
-    >
-      {{ $t('CAPTAIN_HANDOFF.BUTTON_TEXT') }}
-    </CustomButton>
     <ChatInputWrap
       class="shadow-sm"
       :on-send-message="handleSendMessage"

app/javascript/widget/i18n/locale/en.json

@@ -47,10 +47,6 @@
   "CONTINUE_CONVERSATION": "Continue conversation",
   "YOU": "You",
   "START_NEW_CONVERSATION": "Start a new conversation",
-  "CAPTAIN_HANDOFF": {
-    "BUTTON_TEXT": "Talk to a support agent",
-    "ERROR": "Could not request a handoff, please try again"
-  },
   "VIEW_UNREAD_MESSAGES": "You have unread messages",
   "UNREAD_VIEW": {
     "VIEW_MESSAGES_BUTTON": "See new messages",

app/javascript/widget/store/modules/conversation/actions.js

@@ -6,7 +6,6 @@ import {
   toggleTyping,
   setUserLastSeenAt,
   toggleStatus,
-  requestHandoff,
   setCustomAttributes,
   deleteCustomAttribute,
 } from 'widget/api/conversation';
@@ -213,11 +212,6 @@ export const actions = {
     await toggleStatus();
   },
 
-  requestHandoff: async ({ dispatch }) => {
-    await requestHandoff();
-    dispatch('conversationAttributes/getAttributes', {}, { root: true });
-  },
-
   setCustomAttributes: async (
     { commit, rootGetters },
     customAttributes = {}

app/javascript/widget/store/modules/conversation/getters.js

@@ -39,15 +39,6 @@ export const getters = {
   getMessageCount: _state => {
     return Object.values(_state.conversations).length;
   },
-  getCaptainReplyCount: _state => {
-    return Object.values(_state.conversations).filter(message => {
-      const { message_type: messageType, sender = {} } = message;
-      return (
-        messageType === MESSAGE_TYPE.OUTGOING &&
-        sender.type === 'captain_assistant'
-      );
-    }).length;
-  },
   getUnreadMessageCount: _state => {
     const { userLastSeenAt } = _state.meta;
     return Object.values(_state.conversations).filter(chat => {

app/jobs/internal/trigger_hourly_scheduled_items_job.rb

@@ -1,7 +0,0 @@
-class Internal::TriggerHourlyScheduledItemsJob < ApplicationJob
-  queue_as :scheduled_jobs
-
-  def perform; end
-end
-
-Internal::TriggerHourlyScheduledItemsJob.prepend_mod_with('Internal::TriggerHourlyScheduledItemsJob')

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/models/concerns/liquidable.rb

@@ -11,7 +11,7 @@ module Liquidable
   def message_drops
     {
       'contact' => ContactDrop.new(conversation.contact),
-      'agent' => UserDrop.new(sender || conversation.assignee),
+      'agent' => UserDrop.new(sender),
       'conversation' => ConversationDrop.new(conversation),
       'inbox' => InboxDrop.new(inbox),
       'account' => AccountDrop.new(conversation.account)

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,49 +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.blank?
-    return nil if 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/views/api/v1/models/_inbox.json.jbuilder

@@ -142,3 +142,6 @@ 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)
+json.voice_enabled resource.channel.voice_enabled? if resource.channel_type == 'Channel::Whatsapp' && resource.channel.respond_to?(:voice_enabled?)

config/features.yml

@@ -144,11 +144,10 @@
 - name: chatwoot_v4
   display_name: Chatwoot V4
   enabled: true
-- name: captain_v1_action_classifier
-  display_name: Captain V1 Action Classifier
+- name: report_v4
+  display_name: Report V4
   enabled: false
-  premium: true
-  chatwoot_internal: true
+  deprecated: true
 - name: contact_chatwoot_support_team
   display_name: Contact Chatwoot Support Team
   enabled: true

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/initializers/sidekiq.rb

@@ -40,6 +40,11 @@ Rails.application.reloader.to_prepare do
   if File.exist?(schedule_file) && Sidekiq.server?
     schedule = YAML.load_file(schedule_file)
 
+    # Merge enterprise-only cron entries when running an enterprise build.
+    # Mirrors the conditional-load pattern already used for enterprise initializers.
+    enterprise_schedule_file = Rails.root.join('enterprise/config/schedule.yml')
+    schedule.merge!(YAML.load_file(enterprise_schedule_file)) if ChatwootApp.enterprise? && enterprise_schedule_file.exist?
+
     # Cron entries removed from schedule.yml but possibly still in Redis
     # with source:'dynamic' (predating the source tag). load_from_hash!
     # only cleans up source:'schedule' entries, so these need explicit removal.

config/installation_config.yml

@@ -209,12 +209,6 @@
   description: 'The limits for the Captain AI service for different plans'
   value:
   type: code
-- name: CAPTAIN_DOCUMENT_AUTO_SYNC_INTERVALS
-  display_title: 'Captain Document Auto Sync Intervals'
-  description: 'JSON map of plan-wise Captain document auto-sync intervals in hours. Use null to disable auto-sync for a plan.'
-  value:
-  locked: false
-  type: code
 # End of Captain Config
 
 # ------- Context.dev Config ------- #

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.
@@ -246,6 +251,9 @@ en:
       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
@@ -419,7 +434,6 @@ Rails.application.routes.draw do
             post :update_last_seen
             post :toggle_typing
             post :transcript
-            post :request_handoff
             get  :toggle_status
           end
         end

config/schedule.yml

@@ -14,12 +14,6 @@ trigger_scheduled_items_job:
   class: 'TriggerScheduledItemsJob'
   queue: scheduled_jobs
 
-# executed hourly for scheduled jobs that do not need minute-level cadence
-trigger_hourly_scheduled_items_job:
-  cron: '0 * * * *'
-  class: 'Internal::TriggerHourlyScheduledItemsJob'
-  queue: scheduled_jobs
-
 # executed At every minute..
 trigger_imap_email_inboxes_job:
   cron: '*/1 * * * *'

db/migrate/20260430114500_repurpose_report_v4_flag_for_captain_v1_action_classifier.rb

@@ -1,15 +0,0 @@
-class RepurposeReportV4FlagForCaptainV1ActionClassifier < ActiveRecord::Migration[7.1]
-  def up
-    Account.feature_captain_v1_action_classifier.find_each(batch_size: 100) do |account|
-      account.disable_features(:captain_v1_action_classifier)
-      account.save!(validate: false)
-    end
-
-    config = InstallationConfig.find_by(name: 'ACCOUNT_LEVEL_FEATURE_DEFAULTS')
-    return if config&.value.blank?
-
-    config.value = config.value.reject { |feature| feature['name'] == 'report_v4' }
-    config.save!
-    GlobalConfig.clear_cache
-  end
-end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.1].define(version: 2026_04_30_114500) do
+ActiveRecord::Schema[7.1].define(version: 2026_04_28_120000) do
   # These extensions should be enabled to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"

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/helpers/captain/chat_response_helper.rb

@@ -35,10 +35,7 @@ module Captain::ChatResponseHelper
 
   def credit_used_for_response?(parsed_response)
     response = parsed_response['response']
-
-    # The classifier can still decide to hand off after this trace is written.
-    # Actual response usage is charged later in ResponseBuilderJob, so billing stays correct.
-    response.present? && response != 'conversation_handoff' && parsed_response['action'] != 'handoff'
+    response.present? && response != 'conversation_handoff'
   end
 
   def captain_v1_assistant?

enterprise/app/jobs/captain/conversation/response_builder_job.rb

@@ -1,6 +1,4 @@
 class Captain::Conversation::ResponseBuilderJob < ApplicationJob
-  include Captain::Conversation::V1ActionClassifier
-
   MAX_MESSAGE_LENGTH = 10_000
   retry_on ActiveStorage::FileNotFoundError, attempts: 3, wait: 2.seconds
   retry_on Faraday::BadRequestError, attempts: 3, wait: 2.seconds
@@ -33,11 +31,9 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
   delegate :account, :inbox, to: :@conversation
 
   def generate_and_process_response
-    message_history = collect_previous_messages
     @response = Captain::Llm::AssistantChatService.new(assistant: @assistant, conversation: @conversation).generate_response(
-      message_history: message_history
+      message_history: collect_previous_messages
     )
-    classify_v1_response_action(message_history) if conversation_pending?
     process_response
   end
 
@@ -106,14 +102,6 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
   end
 
   def v1_handoff_requested?
-    legacy_v1_handoff_token? || classifier_v1_handoff_requested?
-  end
-
-  def classifier_v1_handoff_requested?
-    @response['action'] == 'handoff'
-  end
-
-  def legacy_v1_handoff_token?
     @response['response'] == 'conversation_handoff'
   end
 
@@ -123,13 +111,8 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
 
   def process_v1_handoff
     I18n.with_locale(@assistant.account.locale) do
-      Rails.logger.info(
-        "[CAPTAIN][ResponseBuilderJob] V1 handoff requested for account=#{account.id} conversation=#{@conversation.display_id} " \
-        "source=#{@response&.dig('action_source') || 'legacy'} reason=#{@response&.dig('action_reason')}"
-      )
       create_handoff_message
       @conversation.bot_handoff!
-      report_v1_handoff_not_executed if conversation_pending?
       send_out_of_office_message_if_applicable
     end
   end
@@ -183,9 +166,6 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
 
   def handle_error(error)
     log_error(error)
-    @response ||= {}
-    @response['action_source'] ||= 'error'
-    @response['action_reason'] ||= error_action_reason(error)
     process_v1_handoff if conversation_pending?
     true
   end
@@ -194,23 +174,10 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
     ChatwootExceptionTracker.new(error, account: account).capture_exception
   end
 
-  def error_action_reason(error)
-    error.class.name.underscore.tr('/', '_')
-  end
-
   def captain_v2_enabled?
     account.feature_enabled?('captain_integration_v2')
   end
 
-  def report_v1_handoff_not_executed
-    error = StandardError.new("Captain V1 handoff requested but conversation #{@conversation.display_id} is still pending")
-    ChatwootExceptionTracker.new(error, account: account).capture_exception
-    Rails.logger.error(
-      "[CAPTAIN][ResponseBuilderJob] V1 handoff requested but not executed for account=#{account.id} " \
-      "conversation=#{@conversation.display_id}"
-    )
-  end
-
   def conversation_pending?
     status = Conversation.uncached { Conversation.where(id: @conversation.id).pick(:status) }
     status == 'pending' || status == Conversation.statuses[:pending]

enterprise/app/jobs/captain/conversation/v1_action_classifier.rb

@@ -1,59 +0,0 @@
-module Captain::Conversation::V1ActionClassifier
-  private
-
-  def v1_action_classifier_enabled?
-    account.feature_enabled?('captain_v1_action_classifier')
-  end
-
-  def classify_v1_response_action(message_history)
-    return unless v1_action_classifier_enabled?
-    return if legacy_v1_handoff_token?
-
-    classification = Captain::Llm::AssistantActionClassifierService.new(
-      assistant: @assistant,
-      conversation: @conversation
-    ).classify(message_history: message_history, assistant_response: @response['response'])
-
-    apply_v1_action_classification(classification)
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e, account: account).capture_exception
-    Rails.logger.warn(
-      "[CAPTAIN][ResponseBuilderJob] V1 action classifier failed for account=#{account.id} " \
-      "conversation=#{@conversation.display_id}: #{e.class.name}: #{e.message}"
-    )
-  end
-
-  def apply_v1_action_classification(classification)
-    action = classification['action']
-    return log_invalid_v1_action_classification(classification) unless valid_v1_action_classification?(action)
-
-    @response.merge!(
-      'action' => action,
-      'action_reason' => classification['action_reason'],
-      'action_source' => 'classifier',
-      'action_classifier_model' => classification['model'],
-      'action_classifier_prompt_version' => classification['prompt_version']
-    )
-
-    log_v1_action_classification(action, classification)
-  end
-
-  def log_v1_action_classification(action, classification)
-    Rails.logger.info(
-      "[CAPTAIN][ResponseBuilderJob] V1 action classifier account=#{account.id} conversation=#{@conversation.display_id} " \
-      "action=#{action} reason=#{classification['action_reason']} model=#{classification['model']} " \
-      "prompt_version=#{classification['prompt_version']}"
-    )
-  end
-
-  def valid_v1_action_classification?(action)
-    Captain::AssistantActionSchema::ACTIONS.include?(action)
-  end
-
-  def log_invalid_v1_action_classification(classification)
-    Rails.logger.warn(
-      '[CAPTAIN][ResponseBuilderJob] V1 action classifier returned invalid action; falling back to assistant response ' \
-      "for account=#{account.id} conversation=#{@conversation.display_id}: #{classification['error'] || classification['raw_response']}"
-    )
-  end
-end

enterprise/app/jobs/captain/documents/schedule_syncs_job.rb

@@ -7,7 +7,6 @@ class Captain::Documents::ScheduleSyncsJob < ApplicationJob
 
   def perform
     @remaining_global_capacity = GLOBAL_HOURLY_CAP
-    sync_intervals = Enterprise::Account.captain_document_sync_intervals
     stats = { accounts_scanned: 0, accounts_enabled: 0, accounts_scheduled: 0, documents_enqueued: 0 }
 
     Account.joins(:captain_documents).distinct.find_each(batch_size: 100) do |account|
@@ -17,7 +16,7 @@ class Captain::Documents::ScheduleSyncsJob < ApplicationJob
       next unless account.feature_enabled?('captain_document_auto_sync')
 
       stats[:accounts_enabled] += 1
-      interval = account.captain_document_sync_interval(sync_intervals)
+      interval = account.captain_document_sync_interval
       next unless interval
 
       stats[:accounts_scheduled] += 1

enterprise/app/jobs/enterprise/internal/trigger_hourly_scheduled_items_job.rb

@@ -1,7 +0,0 @@
-module Enterprise::Internal::TriggerHourlyScheduledItemsJob
-  def perform
-    super
-
-    Captain::Documents::ScheduleSyncsJob.perform_later
-  end
-end

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/account.rb

@@ -1,22 +1,10 @@
 module Enterprise::Account
-  class << self
-    def captain_document_sync_intervals
-      parse_captain_document_sync_intervals(InstallationConfig.find_by(name: 'CAPTAIN_DOCUMENT_AUTO_SYNC_INTERVALS')&.value)
-    end
-
-    private
-
-    def parse_captain_document_sync_intervals(configured_intervals)
-      return {} if configured_intervals.blank?
-
-      parsed_intervals = configured_intervals.is_a?(String) ? JSON.parse(configured_intervals) : configured_intervals
-      return {} unless parsed_intervals.is_a?(Hash)
-
-      parsed_intervals.transform_keys { |plan| plan.to_s.downcase }
-    rescue JSON::ParserError
-      {}
-    end
-  end
+  CAPTAIN_SYNC_INTERVALS = {
+    'hacker' => nil,
+    'startups' => 7.days,
+    'business' => 1.day,
+    'enterprise' => 6.hours
+  }.freeze
 
   # TODO: Remove this when we upgrade administrate gem to the latest version
   # this is a temporary method since current administrate doesn't support virtual attributes
@@ -53,15 +41,12 @@ module Enterprise::Account
     custom_attributes.delete('marked_for_deletion_at') && custom_attributes.delete('marked_for_deletion_reason') && save
   end
 
-  def captain_document_sync_interval(sync_intervals = Enterprise::Account.captain_document_sync_intervals)
+  def captain_document_sync_interval
     plan = custom_attributes['plan_name']
     plan = 'enterprise' if plan.blank? && ChatwootApp.self_hosted_enterprise?
     return nil if plan.blank?
 
-    interval_hours = sync_intervals[plan.downcase]
-    return nil unless interval_hours.is_a?(Integer) && interval_hours.positive?
-
-    interval_hours.hours
+    CAPTAIN_SYNC_INTERVALS[plan.downcase]
   end
 
   def saml_enabled?

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/captain/llm/assistant_action_classifier_service.rb

@@ -1,152 +0,0 @@
-class Captain::Llm::AssistantActionClassifierService < Llm::BaseAiService
-  include Integrations::LlmInstrumentation
-
-  PROMPT_VERSION = 'v1_custom_xml_precedence'.freeze
-  MAX_CONTEXT_MESSAGES = 10
-
-  def initialize(assistant:, conversation:)
-    super()
-    @assistant = assistant
-    @conversation = conversation
-    @temperature = 0.0
-  end
-
-  def classify(message_history:, assistant_response:)
-    user_prompt = classification_user_prompt(
-      message_history: message_history,
-      assistant_response: assistant_response
-    )
-
-    response = instrument_llm_call(instrumentation_params(user_prompt)) do
-      chat(model: @model, temperature: @temperature)
-        .with_schema(Captain::AssistantActionSchema)
-        .with_instructions(system_prompt)
-        .ask(user_prompt)
-    end
-
-    parsed = parse_response(response.content)
-    normalize_response(parsed, response.content)
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e, account: @conversation.account).capture_exception
-    Rails.logger.warn(
-      "[CAPTAIN][AssistantActionClassifier] Failed for conversation #{@conversation.display_id}: #{e.class.name}: #{e.message}"
-    )
-    { 'action' => nil, 'action_reason' => nil, 'error' => e.message, 'model' => @model, 'prompt_version' => PROMPT_VERSION }
-  end
-
-  private
-
-  def classification_user_prompt(message_history:, assistant_response:)
-    <<~PROMPT
-      <account_custom_instructions>
-      #{@assistant.config['instructions']}
-      </account_custom_instructions>
-
-      <conversation_context>
-      #{format_conversation_context(message_history)}
-      </conversation_context>
-
-      <assistant_response_to_classify>
-      #{assistant_response}
-      </assistant_response_to_classify>
-    PROMPT
-  end
-
-  def normalize_messages(message_history)
-    message_history.filter_map do |message|
-      role = message[:role] || message['role']
-      next if role.blank?
-
-      { role: role.to_s, content: normalize_content(message[:content] || message['content']) }
-    end
-  end
-
-  def normalize_content(content)
-    return content if content.is_a?(String)
-    return content.filter_map { |part| part[:text] || part['text'] if text_part?(part) }.join("\n") if content.is_a?(Array)
-
-    content.to_s
-  end
-
-  def text_part?(part)
-    return false unless part.is_a?(Hash)
-
-    (part[:type] || part['type']).to_s == 'text'
-  end
-
-  def format_conversation_context(messages)
-    normalize_messages(messages).last(MAX_CONTEXT_MESSAGES).filter_map do |message|
-      content = message[:content].to_s.strip
-      next if content.blank?
-
-      "#{role_label(message[:role])}: #{content}"
-    end.join("\n")
-  end
-
-  def role_label(role)
-    return 'User' if role == 'user'
-    return 'Assistant' if role == 'assistant'
-
-    role.to_s.titleize
-  end
-
-  def parse_response(content)
-    return content if content.is_a?(Hash)
-
-    JSON.parse(sanitize_json_response(content))
-  rescue JSON::ParserError, TypeError
-    {}
-  end
-
-  def normalize_response(parsed, raw_content)
-    action = parsed['action'].to_s
-    reason = parsed['action_reason'].to_s
-    return invalid_response(raw_content) unless Captain::AssistantActionSchema::ACTIONS.include?(action)
-
-    {
-      'action' => action,
-      'action_reason' => reason.presence,
-      'raw_response' => raw_content,
-      'model' => @model,
-      'prompt_version' => PROMPT_VERSION
-    }
-  end
-
-  def invalid_response(raw_content)
-    {
-      'action' => nil,
-      'action_reason' => nil,
-      'raw_response' => raw_content,
-      'error' => 'invalid_classifier_response',
-      'model' => @model,
-      'prompt_version' => PROMPT_VERSION
-    }
-  end
-
-  def instrumentation_params(user_prompt)
-    {
-      span_name: 'llm.captain.assistant_action_classifier',
-      model: @model,
-      temperature: @temperature,
-      account_id: @conversation.account_id,
-      conversation_id: @conversation.display_id,
-      feature_name: 'assistant_action_classifier',
-      messages: [
-        { role: 'system', content: system_prompt },
-        { role: 'user', content: user_prompt }
-      ],
-      metadata: {
-        assistant_id: @assistant.id,
-        channel_type: @conversation.inbox&.channel_type,
-        prompt_version: PROMPT_VERSION,
-        source: 'v1_response_builder'
-      }
-    }
-  end
-
-  def system_prompt
-    Captain::Llm::SystemPromptsService.assistant_action_classifier(
-      has_custom_instructions: @assistant.config['instructions'].present?
-    )
-  end
-end

enterprise/app/services/captain/llm/system_prompts_service.rb

@@ -93,50 +93,6 @@ class Captain::Llm::SystemPromptsService
       SYSTEM_PROMPT_MESSAGE
     end
 
-    def assistant_action_classifier(has_custom_instructions: false)
-      <<~PROMPT
-        You are a routing classifier for a customer-support assistant.
-
-        Decide whether the current conversation should stay with the assistant or be transferred to a human agent now.
-
-        The action field MUST be one of:
-        - "continue": keep the current conversation with the assistant.
-        - "handoff": transfer the current conversation to a human agent now.
-
-        The action_reason field MUST be one of:
-        - "general_product_question"
-        - "missing_docs_bounded_answer"
-        - "clarifying_question_needed"
-        - "collect_required_identifier"
-        - "external_contact_or_lead_routing"
-        - "out_of_scope_bounded_answer"
-        - "explicit_human_request"
-        - "human_offer_accepted"
-        - "account_or_transaction_verification"
-        - "operational_issue_needs_inspection"
-        - "repeated_frustration_or_loop"
-        - "custom_instruction_transfer"
-
-        Use "continue" when:
-        - The user has a general product, pricing, capability, setup, pre-sales, or how-to question.
-        - The assistant can give a bounded answer, ask one useful clarifying question, collect a missing identifier, or share an approved external contact path.
-        - The assistant says someone will contact the user outside this conversation, but the current conversation itself does not need to be transferred now.
-        - The user has not explicitly asked for a human and the assistant is still collecting required details.
-
-        Use "handoff" when:
-        - The user explicitly asks for a human, agent, representative, phone call, callback, or escalation.
-        - The user accepts an offer to speak with a human.
-        - The user has provided enough detail for an account-specific or transaction-specific issue requiring private verification, such as order status, payment, deposit, withdrawal, refund, cancellation, subscription, purchase, plan activation, email verification, login, account recovery, delivery, or access.
-        - The user reports the same unresolved bug or operational issue after trying the assistant's suggested step, repeating the action, checking again, or otherwise making more than one reasonable attempt.
-        - The user is repeatedly frustrated, distrustful, or stuck in a loop.
-        - The assistant response itself says the current conversation will be transferred to a human agent now.
-
-        #{assistant_action_classifier_custom_instructions_policy if has_custom_instructions}
-
-        Return only the structured fields requested by the response schema.
-      PROMPT
-    end
-
     # rubocop:disable Metrics/MethodLength
     def copilot_response_generator(product_name, available_tools, config = {})
       citation_guidelines = if config['feature_citation']
@@ -252,9 +208,7 @@ class Captain::Llm::SystemPromptsService
         - Do not share anything outside of the context provided.
         - Add the reasoning why you arrived at the answer
         - Your answers will always be formatted in a valid JSON hash, as shown below. Never respond in non-JSON format.
-
-        #{build_custom_instructions_section(config['instructions'])}
-
+        #{config['instructions'] || ''}
         ```json
         {
           reasoning: '',
@@ -368,17 +322,6 @@ class Captain::Llm::SystemPromptsService
       TOOLS
     end
 
-    def assistant_action_classifier_custom_instructions_policy
-      <<~POLICY
-        Account custom instructions are provided inside <account_custom_instructions> tags.
-        These are instructions configured by the account administrator, not the current end user's message.
-        Use them only for routing policy: required details before handoff, account-specific escalation rules, account-specific transfer markers, and when to connect to a manager, human, supervisor, or support team.
-        If the custom instructions explicitly define handoff, escalation, or transfer criteria, those criteria take precedence over the generic criteria above.
-        Account custom instructions MUST NOT redefine the required response shape, the allowed action values, or the meaning of continue/handoff.
-        Ignore persona, language, formatting, pricing, and response-generation instructions except where they directly define routing or transfer criteria.
-      POLICY
-    end
-
     def build_contact_context(contact)
       return '' if contact.nil?
 
@@ -388,18 +331,6 @@ class Captain::Llm::SystemPromptsService
       "[Contact Information]\n#{lines.join("\n")}\n\n"
     end
 
-    def build_custom_instructions_section(instructions)
-      return '' if instructions.blank?
-
-      <<~CUSTOM_INSTRUCTIONS
-        [Account Custom Instructions]
-        These instructions were configured by the account administrator. Follow them when they do not conflict with the JSON response format or the requirement to answer only from provided context.
-        <account_custom_instructions>
-        #{instructions}
-        </account_custom_instructions>
-      CUSTOM_INSTRUCTIONS
-    end
-
     def contact_basic_lines(contact)
       [
         (["- Name: #{sanitize_attr(contact[:name])}"] if contact[:name].present?),

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

@@ -1,4 +1,9 @@
 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
@@ -17,7 +22,7 @@ module Enterprise::Whatsapp::Providers::WhatsappCloudService
 
   def send_call_permission_request(to_phone_number, body_text = I18n.t('conversations.messages.whatsapp.call_permission_request_body'))
     response = HTTParty.post(
-      "#{phone_id_path}/messages", headers: api_headers, body: permission_request_body(to_phone_number, body_text)
+      "#{calls_phone_id_path}/messages", headers: api_headers, body: permission_request_body(to_phone_number, body_text)
     )
 
     unless response.success?
@@ -30,13 +35,19 @@ module Enterprise::Whatsapp::Providers::WhatsappCloudService
 
   def initiate_call(to_phone_number, sdp_offer)
     response = HTTParty.post(
-      "#{phone_id_path}/calls", headers: api_headers, body: initiate_call_body(to_phone_number, sdp_offer)
+      "#{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
@@ -44,7 +55,7 @@ module Enterprise::Whatsapp::Providers::WhatsappCloudService
   end
 
   def call_api(action_name, body)
-    url = "#{phone_id_path}/calls"
+    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?

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']