feat(voice): Wire Twilio voice flow through unified call model (#14091)

Twilio voice now uses first-class `Call` records as the source of truth
for call state, instead of storing it on
`conversation.additional_attributes` and `conversation.identifier`. Each
call gets its own record, its own `voice_call` bubble matched by
`call_sid`, and its own conference name keyed off `Call.id`. Multiple
calls on the same conversation (for `lock_to_single_conversation`
inboxes) now work correctly, and the conversation card stays in sync
with the real latest message.
Fixes https://linear.app/chatwoot/issue/PLA-121/lock-to-single-thread

---------

Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>

app/javascript/dashboard/api/channel/voice/twilioVoiceClient.js

@@ -68,7 +68,7 @@ class TwilioVoiceClient extends EventTarget {
     this.inboxId = null;
   }
 
-  async joinClientCall({ to, conversationId }) {
+  async joinClientCall({ to, conversationId, callSid }) {
     if (!this.device || !this.initialized || !to) return null;
     if (this.activeConnection) return this.activeConnection;
 
@@ -76,6 +76,7 @@ class TwilioVoiceClient extends EventTarget {
       To: to,
       is_agent: 'true',
       conversation_id: conversationId,
+      call_sid: callSid,
     };
 
     const connection = await this.device.connect({ params });

app/javascript/dashboard/api/channel/voice/voiceAPIClient.js

@@ -12,10 +12,10 @@ class VoiceAPI extends ApiClient {
     return ContactsAPI.initiateCall(contactId, inboxId).then(r => r.data);
   }
 
-  leaveConference(inboxId, conversationId) {
+  leaveConference({ inboxId, conversationId, callSid }) {
     return axios
       .delete(`${this.baseUrl()}/inboxes/${inboxId}/conference`, {
-        params: { conversation_id: conversationId },
+        params: { conversation_id: conversationId, call_sid: callSid },
       })
       .then(r => r.data);
   }

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue

@@ -35,10 +35,16 @@ const emit = defineEmits([
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 const showLabelsSection = computed(() => props.chat.labels?.length > 0);
 
-const voiceCallData = computed(() => ({
-  status: props.chat.additional_attributes?.call_status,
-  direction: props.chat.additional_attributes?.call_direction,
-}));
+const voiceCallData = computed(() => {
+  const last = lastMessageInChat.value;
+  if (last?.content_type !== 'voice_call' || !last.call) {
+    return { status: null, direction: null };
+  }
+  return {
+    status: last.call.status,
+    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
+  };
+});
 
 const unreadCount = computed(() => props.chat.unread_count);
 

app/javascript/dashboard/components-next/message/Message.vue

@@ -113,6 +113,7 @@ const props = defineProps({
     validator: value => Object.values(MESSAGE_STATUS).includes(value),
   },
   attachments: { type: Array, default: () => [] },
+  call: { type: Object, default: null }, // eslint-disable-line vue/no-unused-properties
   content: { type: String, default: null },
   contentAttributes: { type: Object, default: () => ({}) },
   contentType: {

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useMessageContext } from '../provider.js';
-import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
+import { VOICE_CALL_STATUS } from '../constants';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
@@ -30,12 +30,10 @@ const BG_COLOR_MAP = {
   [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };
 
-const { contentAttributes, messageType } = useMessageContext();
+const { call } = useMessageContext();
 
-const data = computed(() => contentAttributes.value?.data);
-const status = computed(() => data.value?.status?.toString());
-
-const isOutbound = computed(() => messageType.value === MESSAGE_TYPES.OUTGOING);
+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)
 );

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

@@ -44,6 +44,7 @@ const handleEndCall = async () => {
   await endCallSession({
     conversationId: call.conversationId,
     inboxId,
+    callSid: call.callSid,
   });
 };
 

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

@@ -38,10 +38,16 @@ const unreadCount = computed(() => props.chat.unread_count);
 const hasUnread = computed(() => unreadCount.value > 0);
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
-const voiceCallData = computed(() => ({
-  status: props.chat.additional_attributes?.call_status,
-  direction: props.chat.additional_attributes?.call_direction,
-}));
+const voiceCallData = computed(() => {
+  const last = lastMessageInChat.value;
+  if (last?.content_type !== 'voice_call' || !last.call) {
+    return { status: null, direction: null };
+  }
+  return {
+    status: last.call.status,
+    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
+  };
+});
 
 const showMetaSection = computed(() => {
   return (

app/javascript/dashboard/composables/useCallSession.js

@@ -42,8 +42,8 @@ export function useCallSession() {
     );
   });
 
-  const endCall = async ({ conversationId, inboxId }) => {
-    await VoiceAPI.leaveConference(inboxId, conversationId);
+  const endCall = async ({ conversationId, inboxId, callSid }) => {
+    await VoiceAPI.leaveConference({ inboxId, conversationId, callSid });
     TwilioVoiceClient.endClientCall();
     durationTimer.stop();
     callsStore.clearActiveCall();
@@ -66,6 +66,7 @@ export function useCallSession() {
       await TwilioVoiceClient.joinClientCall({
         to: joinResponse?.conference_sid,
         conversationId,
+        callSid,
       });
 
       callsStore.setCallActive(callSid);

app/javascript/dashboard/helper/voice.js

@@ -23,11 +23,11 @@ const shouldSkipCall = (callDirection, senderId, currentUserId) => {
 };
 
 function extractCallData(message) {
-  const contentData = message?.content_attributes?.data || {};
+  const call = message?.call || {};
   return {
-    callSid: contentData.call_sid,
-    status: contentData.status,
-    callDirection: contentData.call_direction,
+    callSid: call.provider_call_id,
+    status: call.status,
+    callDirection: call.direction === 'outgoing' ? 'outbound' : 'inbound',
     conversationId: message?.conversation_id,
     senderId: message?.sender?.id,
   };
@@ -60,9 +60,11 @@ export function handleVoiceCallUpdated(commit, message, currentUserId) {
 
   callsStore.handleCallStatusChanged({ callSid, status, conversationId });
 
-  const callInfo = { conversationId, callStatus: status };
-  commit(types.UPDATE_CONVERSATION_CALL_STATUS, callInfo);
-  commit(types.UPDATE_MESSAGE_CALL_STATUS, callInfo);
+  commit(types.UPDATE_MESSAGE_CALL_STATUS, {
+    conversationId,
+    callStatus: status,
+    callSid,
+  });
 
   const isNewCall =
     status === 'ringing' &&

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

@@ -307,34 +307,21 @@ export const mutations = {
     }
   },
 
-  [types.UPDATE_CONVERSATION_CALL_STATUS](
+  [types.UPDATE_MESSAGE_CALL_STATUS](
     _state,
-    { conversationId, callStatus }
+    { conversationId, callStatus, callSid }
   ) {
     const chat = getConversationById(_state)(conversationId);
     if (!chat) return;
 
-    chat.additional_attributes = {
-      ...chat.additional_attributes,
-      call_status: callStatus,
-    };
-  },
-
-  [types.UPDATE_MESSAGE_CALL_STATUS](_state, { conversationId, callStatus }) {
-    const chat = getConversationById(_state)(conversationId);
-    if (!chat) return;
-
-    const lastCall = (chat.messages || []).findLast(
-      m => m.content_type === CONTENT_TYPES.VOICE_CALL
+    const message = (chat.messages || []).find(
+      m =>
+        m.content_type === CONTENT_TYPES.VOICE_CALL &&
+        m.call?.provider_call_id === callSid
     );
+    if (!message?.call) return;
 
-    if (!lastCall) return;
-
-    lastCall.content_attributes ??= {};
-    lastCall.content_attributes.data = {
-      ...lastCall.content_attributes.data,
-      status: callStatus,
-    };
+    message.call = { ...message.call, status: callStatus };
   },
 
   [types.SET_ACTIVE_INBOX](_state, inboxId) {

app/javascript/dashboard/store/modules/conversations/specs/mutations.spec.js

@@ -2,55 +2,18 @@ import { mutations } from '../index';
 import types from '../../../mutation-types';
 
 describe('#mutations', () => {
-  describe('#UPDATE_CONVERSATION_CALL_STATUS', () => {
-    it('does nothing if conversation is not found', () => {
-      const state = { allConversations: [] };
-      mutations[types.UPDATE_CONVERSATION_CALL_STATUS](state, {
-        conversationId: 1,
-        callStatus: 'ringing',
-      });
-      expect(state.allConversations).toEqual([]);
-    });
-
-    it('updates call_status preserving existing additional_attributes', () => {
-      const state = {
-        allConversations: [
-          { id: 1, additional_attributes: { other_attr: 'value' } },
-        ],
-      };
-      mutations[types.UPDATE_CONVERSATION_CALL_STATUS](state, {
-        conversationId: 1,
-        callStatus: 'in-progress',
-      });
-      expect(state.allConversations[0].additional_attributes).toEqual({
-        other_attr: 'value',
-        call_status: 'in-progress',
-      });
-    });
-
-    it('creates additional_attributes if it does not exist', () => {
-      const state = { allConversations: [{ id: 1 }] };
-      mutations[types.UPDATE_CONVERSATION_CALL_STATUS](state, {
-        conversationId: 1,
-        callStatus: 'completed',
-      });
-      expect(state.allConversations[0].additional_attributes).toEqual({
-        call_status: 'completed',
-      });
-    });
-  });
-
   describe('#UPDATE_MESSAGE_CALL_STATUS', () => {
     it('does nothing if conversation is not found', () => {
       const state = { allConversations: [] };
       mutations[types.UPDATE_MESSAGE_CALL_STATUS](state, {
         conversationId: 1,
         callStatus: 'ringing',
+        callSid: 'CA123',
       });
       expect(state.allConversations).toEqual([]);
     });
 
-    it('does nothing if no voice call message exists', () => {
+    it('does nothing if no matching voice call message exists', () => {
       const state = {
         allConversations: [
           { id: 1, messages: [{ id: 1, content_type: 'text' }] },
@@ -59,6 +22,7 @@ describe('#mutations', () => {
       mutations[types.UPDATE_MESSAGE_CALL_STATUS](state, {
         conversationId: 1,
         callStatus: 'ringing',
+        callSid: 'CA123',
       });
       expect(state.allConversations[0].messages[0]).toEqual({
         id: 1,
@@ -66,7 +30,7 @@ describe('#mutations', () => {
       });
     });
 
-    it('updates the last voice call message status', () => {
+    it('updates only the voice call message matching the given callSid', () => {
       const state = {
         allConversations: [
           {
@@ -75,12 +39,12 @@ describe('#mutations', () => {
               {
                 id: 1,
                 content_type: 'voice_call',
-                content_attributes: { data: { status: 'ringing' } },
+                call: { provider_call_id: 'CA111', status: 'ringing' },
               },
               {
                 id: 2,
                 content_type: 'voice_call',
-                content_attributes: { data: { status: 'ringing' } },
+                call: { provider_call_id: 'CA222', status: 'ringing' },
               },
             ],
           },
@@ -89,34 +53,15 @@ describe('#mutations', () => {
       mutations[types.UPDATE_MESSAGE_CALL_STATUS](state, {
         conversationId: 1,
         callStatus: 'in-progress',
+        callSid: 'CA111',
       });
-      expect(
-        state.allConversations[0].messages[0].content_attributes.data.status
-      ).toBe('ringing');
-      expect(
-        state.allConversations[0].messages[1].content_attributes.data.status
-      ).toBe('in-progress');
+      expect(state.allConversations[0].messages[0].call.status).toBe(
+        'in-progress'
+      );
+      expect(state.allConversations[0].messages[1].call.status).toBe('ringing');
     });
 
-    it('creates content_attributes.data if it does not exist', () => {
-      const state = {
-        allConversations: [
-          {
-            id: 1,
-            messages: [{ id: 1, content_type: 'voice_call' }],
-          },
-        ],
-      };
-      mutations[types.UPDATE_MESSAGE_CALL_STATUS](state, {
-        conversationId: 1,
-        callStatus: 'completed',
-      });
-      expect(
-        state.allConversations[0].messages[0].content_attributes.data.status
-      ).toBe('completed');
-    });
-
-    it('preserves existing data in content_attributes.data', () => {
+    it('preserves existing call fields when updating status', () => {
       const state = {
         allConversations: [
           {
@@ -125,8 +70,11 @@ describe('#mutations', () => {
               {
                 id: 1,
                 content_type: 'voice_call',
-                content_attributes: {
-                  data: { call_sid: 'CA123', status: 'ringing' },
+                call: {
+                  provider_call_id: 'CA123',
+                  status: 'ringing',
+                  direction: 'incoming',
+                  duration_seconds: null,
                 },
               },
             ],
@@ -136,12 +84,13 @@ describe('#mutations', () => {
       mutations[types.UPDATE_MESSAGE_CALL_STATUS](state, {
         conversationId: 1,
         callStatus: 'in-progress',
+        callSid: 'CA123',
       });
-      expect(
-        state.allConversations[0].messages[0].content_attributes.data
-      ).toEqual({
-        call_sid: 'CA123',
+      expect(state.allConversations[0].messages[0].call).toEqual({
+        provider_call_id: 'CA123',
         status: 'in-progress',
+        direction: 'incoming',
+        duration_seconds: null,
       });
     });
 
@@ -152,8 +101,34 @@ describe('#mutations', () => {
       mutations[types.UPDATE_MESSAGE_CALL_STATUS](state, {
         conversationId: 1,
         callStatus: 'ringing',
+        callSid: 'CA123',
       });
       expect(state.allConversations[0].messages).toEqual([]);
     });
+
+    it('does nothing if matching message has no call object yet', () => {
+      const state = {
+        allConversations: [
+          {
+            id: 1,
+            messages: [
+              {
+                id: 1,
+                content_type: 'voice_call',
+                call: { provider_call_id: 'CA-OTHER' },
+              },
+            ],
+          },
+        ],
+      };
+      mutations[types.UPDATE_MESSAGE_CALL_STATUS](state, {
+        conversationId: 1,
+        callStatus: 'completed',
+        callSid: 'CA-MISSING',
+      });
+      expect(state.allConversations[0].messages[0].call).toEqual({
+        provider_call_id: 'CA-OTHER',
+      });
+    });
   });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -52,7 +52,6 @@ export default {
   UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES:
     'UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES',
   UPDATE_CONVERSATION_LAST_ACTIVITY: 'UPDATE_CONVERSATION_LAST_ACTIVITY',
-  UPDATE_CONVERSATION_CALL_STATUS: 'UPDATE_CONVERSATION_CALL_STATUS',
   UPDATE_MESSAGE_CALL_STATUS: 'UPDATE_MESSAGE_CALL_STATUS',
   SET_MISSING_MESSAGES: 'SET_MISSING_MESSAGES',