chore: fix conversation list status

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

@@ -1546,8 +1546,65 @@ export default {
       { immediate: true }
     );
 
-    // This function was removed as it's no longer needed
-    
+    // Add watcher for call status changes
+    watch(
+      () => store.state.calls.activeCall?.status,
+      (newStatus) => {
+        if (newStatus === 'ended' || newStatus === 'completed' || newStatus === 'missed') {
+          console.log('Call status changed to:', newStatus);
+          stopDurationTimer();
+          stopRingtone();
+          isCallActive.value = false;
+          
+          // Update app state
+          if (window.app && window.app.$data) {
+            window.app.$data.showCallWidget = false;
+          }
+          
+          // Emit event
+          emit('callEnded');
+          
+          // Clear store state
+          store.dispatch('calls/clearActiveCall');
+          store.dispatch('calls/clearIncomingCall');
+        }
+      }
+    );
+
+    // Add specific watcher for outbound call status
+    watch(
+      () => store.state.calls.activeCall,
+      (newCall) => {
+        // Check if this is an outbound call
+        const isOutboundCall = newCall && newCall.isOutbound === true;
+        
+        if (isOutboundCall) {
+          console.log('Outbound call status:', newCall?.status);
+          
+          // Handle outbound call status changes
+          if (newCall?.status === 'ended' || newCall?.status === 'completed' || newCall?.status === 'missed') {
+            console.log('Outbound call ended with status:', newCall.status);
+            stopDurationTimer();
+            stopRingtone();
+            isCallActive.value = false;
+            
+            // Update app state
+            if (window.app && window.app.$data) {
+              window.app.$data.showCallWidget = false;
+            }
+            
+            // Emit event
+            emit('callEnded');
+            
+            // Clear store state
+            store.dispatch('calls/clearActiveCall');
+            store.dispatch('calls/clearIncomingCall');
+          }
+        }
+      },
+      { deep: true } // Watch for nested changes in the call object
+    );
+
     return {
       isCallActive,
       callDuration,

app/javascript/dashboard/helper/actionCable.js

@@ -232,13 +232,40 @@ class ActionCableConnector extends BaseActionCableConnector {
       status: data.status,
       conversationId: data.conversation_id,
       inboxId: data.inbox_id,
+      timestamp: data.timestamp || Date.now()
     };
     
     // Update store with call status change
     this.app.$store.dispatch('calls/handleCallStatusChanged', normalizedPayload);
     
-    // For non-terminal statuses, update the active call
-    if (!['ended', 'missed', 'completed'].includes(data.status)) {
+    // For terminal statuses, clear the active call to close the widget
+    if (['ended', 'missed', 'completed', 'failed', 'busy', 'no_answer'].includes(data.status)) {
+      console.log(`ActionCable: Call status changed to terminal status: ${data.status}`);
+      
+      // Clear active call for terminal statuses
+      this.app.$store.dispatch('calls/clearActiveCall');
+      
+      // Ensure window.app.$data exists before modifying it
+      if (window.app && window.app.$data) {
+        console.log('ActionCable: Hiding call widget');
+        window.app.$data.showCallWidget = false;
+      }
+      
+      // Update conversation list to show current status
+      if (data.conversation_id) {
+        console.log(`ActionCable: Updating conversation last activity for conversation ${data.conversation_id}`);
+        this.app.$store.dispatch('updateConversationLastActivity', {
+          conversationId: data.conversation_id,
+          lastActivityAt: new Date().toISOString(),
+        });
+        
+        // Also ensure that the conversation gets refreshed
+        this.app.$store.dispatch('fetchConversation', {
+          id: data.conversation_id
+        });
+      }
+    } else {
+      // Update active call for non-terminal statuses
       this.app.$store.dispatch('calls/setActiveCall', normalizedPayload);
     }
   };

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

@@ -29,7 +29,8 @@ export default {
     const transcription = ref('');
     const durationTimer = ref(null);
     const isCallActive = computed(
-      () => callStatus.value && callStatus.value !== 'completed'
+      () => callStatus.value && 
+            !['completed', 'ended', 'missed', 'failed', 'busy', 'no-answer'].includes(callStatus.value)
     );
 
     const callStatusText = computed(() => {
@@ -77,16 +78,24 @@ export default {
     const updateCallStatus = status => {
       callStatus.value = status;
 
-      if (status === 'in-progress') {
+      // Log the status update to help with debugging
+      console.log(`CallManager: Updating call status to ${status}`);
+
+      if (status === 'in-progress' || status === 'in_progress') {
         startDurationTimer();
       } else if (
-        status === 'completed' ||
-        status === 'failed' ||
-        status === 'busy' ||
-        status === 'no-answer'
+        ['completed', 'ended', 'missed', 'failed', 'busy', 'no-answer', 'no_answer'].includes(status)
       ) {
+        console.log(`CallManager: Call ended with status ${status}`);
         stopDurationTimer();
         emit('callEnded');
+        
+        // Forcefully hide the call widget after a short delay
+        setTimeout(() => {
+          if (window.app && window.app.$data) {
+            window.app.$data.showCallWidget = false;
+          }
+        }, 2000);
       }
     };
 
@@ -271,8 +280,8 @@ export default {
 
 <template>
   <div
-    v-show="isCallActive && callStatus"
-    v-if="isCallActive && callStatus"
+    v-show="callStatus"
+    v-if="callStatus"
     class="relative p-4 mb-4 border border-solid rounded-md bg-n-slate-1 border-n-slate-4 flex flex-col gap-2"
   >
     <div class="flex items-center justify-between">

app/javascript/dashboard/store/modules/calls.js

@@ -13,10 +13,36 @@ const getters = {
 const actions = {
   // This action will handle both message updates and direct call status changes
   handleCallStatusChanged({ state, dispatch }, { callSid, status }) {
+    // Check if this is the active call
+    const isActiveCall = callSid === state.activeCall?.callSid;
+    const isOutboundCall = state.activeCall?.isOutbound === true;
+    
     // If this is the active call and it has ended or was missed, close the widget
-    if (callSid === state.activeCall?.callSid && 
+    if (isActiveCall && 
         (status === 'ended' || status === 'missed' || status === 'completed')) {
+      console.log('Call status changed to:', status, 'isOutbound:', isOutboundCall);
+      
+      // Clear the active call
       dispatch('clearActiveCall');
+      
+      // Force update app state to hide widget
+      if (window.app && window.app.$data) {
+        window.app.$data.showCallWidget = false;
+      }
+      
+      // Emit event to notify components
+      if (window.app) {
+        window.app.$emit('callEnded');
+      }
+      
+      // For outbound calls, also clear any pending state
+      if (isOutboundCall) {
+        // Additional cleanup for outbound calls
+        if (window.globalCallStatus) {
+          window.globalCallStatus.active = false;
+          window.globalCallStatus.incoming = false;
+        }
+      }
     }
   },