feat(voice): unify call button flow and redesign call widget

- Contact-panel call button now continues in the open conversation when
  the conversation's inbox is voice-capable, mirroring the header button.
  For non-voice channels it falls back to the inbox picker.
- Twilio and WhatsApp paths share the same upstream decision; both pass
  a conversationId hint to the provider so the agent stays in the same
  thread.
- Floating call widget redesigned: avatar + name + phone with duration
  on top, a clickable "View chat history" pill linking to the
  conversation, and labeled End / Join action buttons. Mute is preserved
  for active WhatsApp calls.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/javascript/dashboard/api/contacts.js

@@ -47,9 +47,10 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/labels`);
   }
 
-  initiateCall(contactId, inboxId) {
+  initiateCall(contactId, inboxId, conversationId = null) {
     return axios.post(`${this.url}/${contactId}/call`, {
       inbox_id: inboxId,
+      conversation_id: conversationId,
     });
   }
 

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

@@ -20,6 +20,9 @@ import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 const props = defineProps({
   phone: { type: String, default: '' },
   contactId: { type: [String, Number], required: true },
+  // When set, the WhatsApp call continues in this conversation (matching the
+  // header button) instead of looking up the contact's most recent one.
+  conversationId: { type: [String, Number], default: null },
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
   size: { type: String, default: 'sm' },
@@ -76,8 +79,12 @@ const findWhatsappConversationId = async inboxId => {
   return match?.id || null;
 };
 
-const startWhatsappCall = async inboxId => {
-  const conversationId = await findWhatsappConversationId(inboxId);
+const startWhatsappCall = async (inboxId, conversationIdHint) => {
+  // WhatsApp /initiate is conversation-scoped, so we must hand it a
+  // conversation. Use the caller's hint when given (in-conversation flow);
+  // otherwise pick the most recent one in the inbox.
+  const conversationId =
+    conversationIdHint || (await findWhatsappConversationId(inboxId));
   if (!conversationId) {
     useAlert(t('CONTACT_PANEL.CALL_FAILED'));
     return;
@@ -108,13 +115,13 @@ const startWhatsappCall = async inboxId => {
   navigateToConversation(conversationId);
 };
 
-const startCall = async inboxId => {
+const startCall = async (inboxId, conversationIdHint = null) => {
   if (isInitiatingCall.value) return;
 
   const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
   if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
     try {
-      await startWhatsappCall(inboxId);
+      await startWhatsappCall(inboxId, conversationIdHint);
     } catch (error) {
       useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
     }
@@ -125,6 +132,7 @@ const startCall = async inboxId => {
     const response = await store.dispatch('contacts/initiateCall', {
       contactId: props.contactId,
       inboxId,
+      conversationId: conversationIdHint,
     });
     const { call_sid: callSid, conversation_id: conversationId } = response;
 
@@ -145,6 +153,22 @@ const startCall = async inboxId => {
 };
 
 const onClick = async () => {
+  // In conversation context, only stay in this conversation if its inbox is
+  // itself voice-capable (works the same for Twilio and WhatsApp). For
+  // non-voice channels (email, web, …) fall back to the picker so the call
+  // goes out via a voice inbox.
+  if (props.conversationId) {
+    const conversation = store.getters.getConversationById(
+      props.conversationId
+    );
+    const conversationInbox = (inboxesList.value || []).find(
+      i => i.id === conversation?.inbox_id
+    );
+    if (conversationInbox && isVoiceCallEnabled(conversationInbox)) {
+      await startCall(conversationInbox.id, props.conversationId);
+      return;
+    }
+  }
   if (voiceInboxes.value.length > 1) {
     dialogRef.value?.open();
     return;

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

@@ -1,14 +1,16 @@
 <script setup>
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useCallSession } from 'dashboard/composables/useCallSession';
 import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const RINGTONE_URL = '/audio/dashboard/bell.mp3';
 
+const route = useRoute();
 const router = useRouter();
 const store = useStore();
 
@@ -56,11 +58,21 @@ const getCallInfo = call => {
       caller?.name ||
       caller?.phone ||
       'Unknown caller',
+    phoneNumber: sender?.phone_number || caller?.phone || '',
     inboxName: inbox?.name || 'Customer support',
     avatar: sender?.avatar || sender?.thumbnail || caller?.avatar,
   };
 };
 
+const goToConversation = call => {
+  const conversationId = call?.conversationId;
+  const accountId = route.params.accountId;
+  if (!conversationId || !accountId) return;
+  router.push({
+    path: frontendURL(conversationUrl({ accountId, id: conversationId })),
+  });
+};
+
 const handleEndCall = async () => {
   const call = activeCall.value;
   if (!call) return;
@@ -152,42 +164,67 @@ onBeforeUnmount(stopRingtone);
 <template>
   <div
     v-if="incomingCalls.length || hasActiveCall"
-    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-72"
+    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-80"
   >
     <!-- Incoming Calls (shown above active call) -->
     <div
       v-for="call in hasActiveCall ? incomingCalls : []"
       :key="call.callSid"
-      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+      class="flex flex-col gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
     >
-      <div class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex">
-        <Avatar
-          :src="getCallInfo(call).avatar"
-          :name="getCallInfo(call).contactName"
-          :size="40"
-          rounded-full
-        />
+      <div class="flex items-center gap-3">
+        <div
+          class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex"
+        >
+          <Avatar
+            :src="getCallInfo(call).avatar"
+            :name="getCallInfo(call).contactName"
+            :size="40"
+            rounded-full
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+            {{ getCallInfo(call).contactName }}
+          </p>
+          <p
+            v-if="getCallInfo(call).phoneNumber"
+            class="text-xs text-n-slate-11 truncate mb-0"
+          >
+            {{ getCallInfo(call).phoneNumber }}
+          </p>
+        </div>
       </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
-          {{ getCallInfo(call).contactName }}
-        </p>
-        <p class="text-xs text-n-slate-11 truncate">
-          {{ getCallInfo(call).inboxName }}
-        </p>
-      </div>
-      <div class="flex shrink-0 gap-2">
+      <button
+        v-if="call.conversationId"
+        class="flex items-center gap-2 px-3 py-2 bg-n-alpha-2 hover:bg-n-alpha-3 rounded-lg transition-colors"
+        @click="goToConversation(call)"
+      >
+        <i class="text-base text-n-slate-11 i-ph-chat-circle-text-bold" />
+        <span class="text-xs text-n-slate-12">
+          {{ $t('CONVERSATION.VOICE_WIDGET.VIEW_CHAT_HISTORY') }}
+        </span>
+        <span class="ml-auto text-xs text-n-slate-11">
+          #{{ call.conversationId }}
+        </span>
+        <i class="text-xs text-n-slate-11 i-ph-caret-right-bold" />
+      </button>
+      <div class="flex items-center justify-between gap-2">
         <button
-          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+          v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')"
+          class="flex justify-center items-center w-10 h-10 bg-n-slate-3 hover:bg-n-slate-4 rounded-full transition-colors"
           @click="dismissCall(call.callSid)"
         >
-          <i class="text-lg text-white i-ph-phone-x-bold" />
+          <i class="text-lg text-n-slate-12 i-ph-phone-x-bold" />
         </button>
         <button
-          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+          class="flex justify-center items-center gap-2 px-4 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
           @click="handleJoinCall(call)"
         >
-          <i class="text-lg text-white i-ph-phone-bold" />
+          <i class="text-base text-white i-ph-phone-bold" />
+          <span class="text-sm font-medium text-white">
+            {{ $t('CONVERSATION.VOICE_WIDGET.JOIN_CALL') }}
+          </span>
         </button>
       </div>
     </div>
@@ -195,27 +232,38 @@ onBeforeUnmount(stopRingtone);
     <!-- Main Call Widget -->
     <div
       v-if="hasActiveCall || incomingCalls.length"
-      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+      class="flex flex-col gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
     >
-      <div
-        class="ring-2 ring-n-teal-9 rounded-full inline-flex"
-        :class="{ 'animate-pulse': !hasActiveCall }"
-      >
-        <Avatar
-          :src="getCallInfo(activeCall || incomingCalls[0]).avatar"
-          :name="getCallInfo(activeCall || incomingCalls[0]).contactName"
-          :size="40"
-          rounded-full
-        />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
-          {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
-        </p>
-        <p v-if="hasActiveCall" class="font-mono text-sm text-n-teal-9">
+      <div class="flex items-center gap-3">
+        <div
+          class="ring-2 ring-n-teal-9 rounded-full inline-flex"
+          :class="{ 'animate-pulse': !hasActiveCall }"
+        >
+          <Avatar
+            :src="getCallInfo(activeCall || incomingCalls[0]).avatar"
+            :name="getCallInfo(activeCall || incomingCalls[0]).contactName"
+            :size="40"
+            rounded-full
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+            {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
+          </p>
+          <p
+            v-if="getCallInfo(activeCall || incomingCalls[0]).phoneNumber"
+            class="text-xs text-n-slate-11 truncate mb-0"
+          >
+            {{ getCallInfo(activeCall || incomingCalls[0]).phoneNumber }}
+          </p>
+        </div>
+        <p
+          v-if="hasActiveCall"
+          class="font-mono text-sm text-n-slate-12 shrink-0"
+        >
           {{ formattedCallDuration }}
         </p>
-        <p v-else class="text-xs text-n-slate-11">
+        <p v-else class="text-xs text-n-slate-11 shrink-0">
           {{
             incomingCalls[0]?.callDirection === 'outbound'
               ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
@@ -223,50 +271,76 @@ onBeforeUnmount(stopRingtone);
           }}
         </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"
+
+      <button
+        v-if="(activeCall || incomingCalls[0])?.conversationId"
+        class="flex items-center gap-2 px-3 py-2 bg-n-alpha-2 hover:bg-n-alpha-3 rounded-lg transition-colors"
+        @click="goToConversation(activeCall || incomingCalls[0])"
+      >
+        <i class="text-base text-n-slate-11 i-ph-chat-circle-text-bold" />
+        <span class="text-xs text-n-slate-12">
+          {{ $t('CONVERSATION.VOICE_WIDGET.VIEW_CHAT_HISTORY') }}
+        </span>
+        <span class="ml-auto text-xs text-n-slate-11">
+          #{{ (activeCall || incomingCalls[0])?.conversationId }}
+        </span>
+        <i class="text-xs text-n-slate-11 i-ph-caret-right-bold" />
+      </button>
+
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex 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
-                ? 'text-white i-ph-microphone-slash-bold'
-                : 'text-n-slate-12 i-ph-microphone-bold'
+                ? 'bg-n-amber-9 hover:bg-n-amber-10'
+                : 'bg-n-slate-3 hover:bg-n-slate-4'
             "
-          />
-        </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="
-            hasActiveCall
-              ? handleEndCall()
-              : rejectIncomingCall(incomingCalls[0]?.callSid)
-          "
-        >
-          <i class="text-lg text-white i-ph-phone-x-bold" />
-        </button>
-        <button
-          v-if="
-            !hasActiveCall && incomingCalls[0]?.callDirection !== 'outbound'
-          "
-          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
-          @click="handleJoinCall(incomingCalls[0])"
-        >
-          <i class="text-lg text-white i-ph-phone-bold" />
-        </button>
+            @click="toggleMute"
+          >
+            <i
+              class="text-lg"
+              :class="
+                isMuted
+                  ? 'text-white i-ph-microphone-slash-bold'
+                  : 'text-n-slate-12 i-ph-microphone-bold'
+              "
+            />
+          </button>
+        </div>
+        <div class="flex gap-2">
+          <button
+            v-if="
+              !hasActiveCall && incomingCalls[0]?.callDirection !== 'outbound'
+            "
+            class="flex justify-center items-center gap-2 px-4 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+            @click="handleJoinCall(incomingCalls[0])"
+          >
+            <i class="text-base text-white i-ph-phone-bold" />
+            <span class="text-sm font-medium text-white">
+              {{ $t('CONVERSATION.VOICE_WIDGET.JOIN_CALL') }}
+            </span>
+          </button>
+          <button
+            class="flex justify-center items-center gap-2 px-4 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+            @click="
+              hasActiveCall
+                ? handleEndCall()
+                : rejectIncomingCall(incomingCalls[0]?.callSid)
+            "
+          >
+            <i class="text-base text-white i-ph-phone-x-bold" />
+            <span class="text-sm font-medium text-white">
+              {{ $t('CONVERSATION.VOICE_WIDGET.END_CALL') }}
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>

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

@@ -309,7 +309,8 @@
       "JOIN_CALL": "Join call",
       "END_CALL": "End call",
       "MUTE": "Mute mic",
-      "UNMUTE": "Unmute mic"
+      "UNMUTE": "Unmute mic",
+      "VIEW_CHAT_HISTORY": "View chat history"
     }
   },
   "EMAIL_TRANSCRIPT": {

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -56,7 +56,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ uiFlags: 'contacts/getUIFlags' }),
+    ...mapGetters({
+      uiFlags: 'contacts/getUIFlags',
+      currentChat: 'getSelectedChat',
+    }),
     contactProfileLink() {
       return `/app/accounts/${this.$route.params.accountId}/contacts/${this.contact.id}`;
     },
@@ -305,11 +308,13 @@ export default {
         <VoiceCallButton
           :phone="contact.phone_number"
           :contact-id="contact.id"
-          icon="i-ri-phone-fill"
+          :conversation-id="currentChat?.id"
+          icon="i-lucide-phone"
           size="sm"
+          variant="ghost"
+          color="slate"
+          class="rounded-md hover:bg-n-alpha-2"
           :tooltip-label="$t('CONTACT_PANEL.CALL')"
-          slate
-          faded
         />
         <NextButton
           v-tooltip.top-end="$t('EDIT_CONTACT.BUTTON_LABEL')"

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

@@ -312,10 +312,14 @@ export const actions = {
     commit(types.CLEAR_CONTACT_FILTERS);
   },
 
-  initiateCall: async ({ commit }, { contactId, inboxId }) => {
+  initiateCall: async ({ commit }, { contactId, inboxId, conversationId }) => {
     commit(types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true });
     try {
-      const response = await ContactAPI.initiateCall(contactId, inboxId);
+      const response = await ContactAPI.initiateCall(
+        contactId,
+        inboxId,
+        conversationId
+      );
       commit(types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false });
       return response.data;
     } catch (error) {