From 056765584065a5e1237b3cd055d2c7096899386a Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Thu, 30 Apr 2026 20:43:35 +0700
Subject: [PATCH] fix(voice): outbound STUN, mute toggle, skip voice_call
 bubble in send pipeline

---
 .../components/widgets/FloatingCallWidget.vue | 43 ++++++++++++++++++-
 .../composables/useWhatsappCallSession.js     | 23 +++++++++-
 .../i18n/locale/en/conversation.json          |  4 +-
 app/services/base/send_on_channel_service.rb  |  4 +-
 4 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue b/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue
index 4086c733c..c3a12999f 100644
--- a/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue
+++ b/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,6 +22,22 @@ 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);
@@ -162,6 +179,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="
diff --git a/app/javascript/dashboard/composables/useWhatsappCallSession.js b/app/javascript/dashboard/composables/useWhatsappCallSession.js
index 57b057027..34f981ba0 100644
--- a/app/javascript/dashboard/composables/useWhatsappCallSession.js
+++ b/app/javascript/dashboard/composables/useWhatsappCallSession.js
@@ -46,6 +46,11 @@ const RECORDER_MIME_CANDIDATES = [
   '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') {
@@ -174,7 +179,7 @@ export function useWhatsappCallSession() {
   const prepareOutboundOffer = async () => {
     cleanup();
     localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    buildPeerConnection();
+    buildPeerConnection(DEFAULT_OUTBOUND_ICE_SERVERS);
     localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
     const offer = await pc.createOffer();
     await pc.setLocalDescription(offer);
@@ -261,6 +266,22 @@ export const hasActiveWhatsappCall = () => Boolean(activeCallId);
 // is removed by a cable end-event (the other side hung up).
 export const cleanupWhatsappSession = () => cleanup();
 
+// Mute helpers — toggle the mic track's enabled flag (instantaneous, no renegotiation).
+export const setWhatsappCallMuted = muted => {
+  if (!localStream) return false;
+  localStream.getAudioTracks().forEach(track => {
+    track.enabled = !muted;
+  });
+  return muted;
+};
+
+export const isWhatsappCallMuted = () => {
+  if (!localStream) return false;
+  const tracks = localStream.getAudioTracks();
+  if (!tracks.length) return false;
+  return !tracks[0].enabled;
+};
+
 // Best-effort terminate when the tab actually closes after the beforeunload prompt.
 export const sendWhatsappTerminateBeacon = () => {
   if (!activeCallId || intentionallyClosing) return;
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 5018463e0..358e6ce96 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -301,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": {
diff --git a/app/services/base/send_on_channel_service.rb b/app/services/base/send_on_channel_service.rb
index 298f60962..1f48b607c 100644
--- a/app/services/base/send_on_channel_service.rb
+++ b/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