chore: message previews in conversation list

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

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { useVoiceCallHelpers } from 'dashboard/composables/useVoiceCallHelpers';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
@@ -16,197 +15,84 @@ const props = defineProps({
 const { t } = useI18n();
 const { getPlainText } = useMessageFormatter();
 
-// Use our shared voice call helper
-const {
-  isVoiceChannelConversation,
-  hasArrow: checkHasArrow,
-  isIncomingCall: checkIsIncoming,
-  normalizeCallStatus,
-  getCallIconName,
-  getStatusText,
-  processArrowContent,
-} = useVoiceCallHelpers(props, { t });
-
-// Utility function to find the last voice call message in conversation
-const findVoiceCallMessage = (conversation) => {
-  // If conversation has messages property, look for voice call messages
-  if (conversation && conversation.messages && Array.isArray(conversation.messages)) {
-    // Look through messages in reverse to find the latest voice call
-    for (let i = conversation.messages.length - 1; i >= 0; i--) {
-      const msg = conversation.messages[i];
-      if (msg.content_type === 'voice_call' || msg.content_type === 'voice') {
-        return msg;
-      }
-    }
-  }
-  
-  // If no voice call found in messages or messages not available, check lastNonActivityMessage
-  const { lastNonActivityMessage } = conversation || {};
-  
-  if (lastNonActivityMessage?.content_type === 'voice_call' || 
-      lastNonActivityMessage?.content_type === 'voice') {
-    return lastNonActivityMessage;
-  }
-  
-  // Check if conversation has a call_status in additional_attributes
-  // This is a strong indicator of a voice call conversation
-  if (conversation?.additional_attributes?.call_status) {
-    // If we have a call status but no voice call message, the lastNonActivityMessage
-    // might still be related to the call (even if it doesn't have the right content_type)
-    if (lastNonActivityMessage) {
-      return lastNonActivityMessage;
-    }
-  }
-  
-  // As a fallback, check if last message content includes "Voice Call" or common call-related terms
-  if (lastNonActivityMessage?.content && 
-      typeof lastNonActivityMessage.content === 'string') {
-    const content = lastNonActivityMessage.content.toLowerCase();
-    if (content.includes('voice call') || 
-        content.includes('call ') || 
-        content.includes('missed call') || 
-        content.includes('incoming call') || 
-        content.includes('outgoing call') ||
-        content.startsWith('←') || 
-        content.startsWith('→')) {
-      return lastNonActivityMessage;
-    }
-  }
-  
-  return null;
-};
-
-const voiceCallMessage = computed(() => {
-  return findVoiceCallMessage(props.conversation);
-});
-
-const isVoiceCall = computed(() => {
-  // Force voice call view for voice channel conversations
-  if (isVoiceChannelConversation.value) {
-    return true;
-  }
-  
-  // Check if conversation has a call_status in additional_attributes
-  if (props.conversation?.additional_attributes?.call_status) {
-    return true;
-  }
-  
-  // Check for voice call message
-  return !!voiceCallMessage.value;
-});
-
-const callData = computed(() => {
-  if (!isVoiceCall.value) return {};
-  
-  // First check for data directly in conversation attributes
-  const conversationAttributes = props.conversation?.custom_attributes || 
-                                 props.conversation?.additional_attributes || {};
-  if (conversationAttributes.call_data) {
-    return conversationAttributes.call_data;
-  }
-  
-  // Then check message content attributes
-  if (voiceCallMessage.value?.content_attributes?.data) {
-    return voiceCallMessage.value.content_attributes.data;
-  }
-  
-  return {};
-});
-
-const hasArrow = computed(() => {
-  return checkHasArrow(voiceCallMessage.value);
+// Simple check: Is this a voice channel conversation?
+const isVoiceChannel = computed(() => {
+  return props.conversation?.meta?.inbox?.channel_type === 'Channel::Voice';
 });
 
+// Get call direction: inbound or outbound
 const isIncomingCall = computed(() => {
-  if (!isVoiceCall.value) return null;
+  if (!isVoiceChannel.value) return false;
   
-  // Get the conversation call_status
-  const conversationCallStatus = props.conversation?.additional_attributes?.call_status;
-  
-  return checkIsIncoming(callData.value, voiceCallMessage.value);
+  const direction = props.conversation?.additional_attributes?.call_direction;
+  return direction === 'inbound';
 });
 
+// Simple function to normalize call status
 const normalizedCallStatus = computed(() => {
-  if (!isVoiceCall.value) return '';
+  if (!isVoiceChannel.value) return null;
   
-  // First check for direct call_status in the conversation additional_attributes
-  // This is the most authoritative source for call status
-  const conversationCallStatus = props.conversation?.additional_attributes?.call_status;
-  if (conversationCallStatus) {
-    return normalizeCallStatus(conversationCallStatus, isIncomingCall.value);
-  }
+  // Get the raw status directly from conversation
+  const status = props.conversation?.additional_attributes?.call_status;
   
-  // If there's an arrow in the message, this is a legacy format message
-  if (hasArrow.value) {
-    const content = voiceCallMessage.value?.content || '';
-    if (content.includes('ended') || content.includes('Call ended')) {
-      return 'ended';
-    }
-    if (content.includes('missed') || content.includes('Missed call') || content.includes('no answer')) {
-      return isIncomingCall.value ? 'missed' : 'no-answer';
-    }
-    if (content.includes('in progress') || content.includes('active') || content.includes('answered')) {
-      return 'active';
-    }
-    
-    // For voice channel conversations, default to ended for better display
-    if (isVoiceChannelConversation.value) {
-      return 'ended';
-    }
-    
-    // Default to ended for legacy messages
-    return 'ended';
-  }
+  // Simple mapping of call statuses
+  if (status === 'in-progress') return 'active';
+  if (status === 'completed') return 'ended';
+  if (status === 'canceled') return 'ended';
+  if (status === 'failed') return 'ended';
+  if (status === 'busy') return 'no-answer';
+  if (status === 'no-answer') return isIncomingCall.value ? 'missed' : 'no-answer';
   
-  // Apply the same status mapping logic as VoiceCall component
-  const callStatus = callData.value?.status;
-  if (callStatus) {
-    return normalizeCallStatus(callStatus, isIncomingCall.value);
-  }
+  // Return the status as is for explicit values
+  if (status === 'active') return 'active';
+  if (status === 'missed') return 'missed';
+  if (status === 'ended') return 'ended';
+  if (status === 'ringing') return 'ringing';
   
-  // Determine status from timestamps
-  if (callData.value?.ended_at) {
-    return 'ended';
-  }
-  if (callData.value?.missed) {
-    return isIncomingCall.value ? 'missed' : 'no-answer';
-  }
-  if (callData.value?.started_at || props.conversation?.additional_attributes?.call_started_at) {
-    return 'active';
-  }
-  
-  // For voice channel conversations, default to ended for better display
-  if (isVoiceChannelConversation.value) {
-    return 'ended';
-  }
-  
-  // Default to ended for any remaining cases to avoid showing incorrect status
+  // If no status is set, default to 'ended'
   return 'ended';
 });
 
-const callIconName = computed(() => {
-  return getCallIconName(normalizedCallStatus.value, isIncomingCall.value);
-});
-
+// Get formatted call status text for voice channel conversations
 const callStatusText = computed(() => {
-  if (!isVoiceCall.value) return '';
+  if (!isVoiceChannel.value) return '';
   
-  // For voice channel conversations, force more descriptive text
-  if (isVoiceChannelConversation.value) {
-    return getStatusText(normalizedCallStatus.value, isIncomingCall.value);
+  const status = normalizedCallStatus.value;
+  const isIncoming = isIncomingCall.value;
+  
+  if (status === 'active') {
+    return t('CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS');
   }
   
-  // For legacy messages with arrows, just use a cleaner version of the content
-  if (hasArrow.value && voiceCallMessage.value?.content) {
-    return processArrowContent(
-      voiceCallMessage.value.content, 
-      isIncomingCall.value, 
-      normalizedCallStatus.value
-    );
+  if (isIncoming) {
+    if (status === 'ringing') {
+      return t('CONVERSATION.VOICE_CALL.INCOMING_CALL');
+    }
+    
+    if (status === 'missed') {
+      return t('CONVERSATION.VOICE_CALL.MISSED_CALL');
+    }
+    
+    if (status === 'ended') {
+      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
+    }
+  } else {
+    if (status === 'ringing') {
+      return t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
+    }
+    
+    if (status === 'no-answer') {
+      return t('CONVERSATION.VOICE_CALL.NO_ANSWER');
+    }
+    
+    if (status === 'ended') {
+      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
+    }
   }
   
-  // Generate the correct status text based on call status and direction
-  return getStatusText(normalizedCallStatus.value, isIncomingCall.value);
+  return isIncoming 
+    ? t('CONVERSATION.VOICE_CALL.INCOMING_CALL') 
+    : t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
 });
 
 // Return proper message content based on message type
@@ -216,7 +102,7 @@ const lastNonActivityMessageContent = computed(() => {
   const { email: { subject } = {} } = customAttributes;
   
   // Return special formatting for voice calls
-  if (isVoiceCall.value) {
+  if (isVoiceChannel.value) {
     return callStatusText.value;
   }
   
@@ -244,7 +130,7 @@ const unreadMessagesCount = computed(() => {
   <div class="flex items-end w-full gap-2 pb-1">
     <!-- Voice Call Message -->
     <div 
-      v-if="isVoiceCall" 
+      v-if="isVoiceChannel" 
       class="w-full mb-0 text-sm flex items-center gap-1 pt-0.5"
       :class="{
         'text-green-600 dark:text-green-400': normalizedCallStatus === 'ringing',
@@ -253,20 +139,29 @@ const unreadMessagesCount = computed(() => {
         'text-slate-600 dark:text-slate-400': normalizedCallStatus === 'ended'
       }"
     >
-      <!-- Explicit icon based on call status - force specific icons instead of computed properties -->
+      <!-- Explicit icon based on call status -->
+      <!-- Missed call or no answer -->
       <i v-if="normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer'" 
          class="i-ph-phone-x-fill text-base inline-block flex-shrink-0 text-red-600 dark:text-red-400 mr-1"></i>
             
+      <!-- Active call -->
       <i v-else-if="normalizedCallStatus === 'active'" 
          class="i-ph-phone-call-fill text-base inline-block flex-shrink-0 text-woot-600 dark:text-woot-400 mr-1"></i>
             
-      <i v-else-if="normalizedCallStatus === 'ended' || normalizedCallStatus === 'completed'" 
-         class="i-ph-phone-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
+      <!-- Ended incoming call -->
+      <i v-else-if="normalizedCallStatus === 'ended' && isIncomingCall" 
+         class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
             
+      <!-- Ended outgoing call -->
+      <i v-else-if="normalizedCallStatus === 'ended'" 
+         class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
+            
+      <!-- Ringing incoming call -->
       <i v-else-if="isIncomingCall" 
          class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
          :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
             
+      <!-- Ringing outgoing call -->
       <i v-else 
          class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
          :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>

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

@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { useVoiceCallHelpers } from 'dashboard/composables/useVoiceCallHelpers';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
@@ -25,171 +24,89 @@ const slaCardLabelRef = ref(null);
 
 const { getPlainText } = useMessageFormatter();
 
-// Use our voice call helpers composable
-const {
-  isVoiceChannelConversation,
-  hasArrow,
-  isIncomingCall: checkIsIncoming,
-  normalizeCallStatus,
-  getCallIconName,
-  getStatusText,
-  processArrowContent,
-} = useVoiceCallHelpers(props, { t });
-
-// Force voice call view for voice channel conversations
-const isVoiceCall = computed(() => {
-  if (isVoiceChannelConversation.value) {
-    return true;
-  }
-  
-  // Check if conversation has a call_status in additional_attributes
-  if (props.conversation?.additional_attributes?.call_status) {
-    return true;
-  }
-  
-  // Check for voice call in last message
-  const { lastNonActivityMessage } = props.conversation || {};
-  if (lastNonActivityMessage?.content_type === 'voice_call' || 
-      lastNonActivityMessage?.content_type === 'voice') {
-    return true;
-  }
-  
-  // Look for voice call content with expanded terms
-  if (lastNonActivityMessage?.content && 
-      typeof lastNonActivityMessage.content === 'string') {
-    const content = lastNonActivityMessage.content.toLowerCase();
-    if (content.includes('voice call') || 
-        content.includes('call ') || 
-        content.includes('missed call') || 
-        content.includes('incoming call') || 
-        content.includes('outgoing call') ||
-        content.startsWith('←') || 
-        content.startsWith('→')) {
-      return true;
-    }
-  }
-  
-  return false;
-});
-
-// Check if content has arrow prefix using our helper
-const messageHasArrow = computed(() => {
-  const { lastNonActivityMessage } = props.conversation || {};
-  return hasArrow(lastNonActivityMessage);
-});
-
-// Get call data from multiple sources
-const callData = computed(() => {
-  // First check for data directly in conversation attributes
-  const conversationAttributes = props.conversation?.custom_attributes || {};
-  if (conversationAttributes.call_data) {
-    return conversationAttributes.call_data;
-  }
-  
-  // Then check message content attributes
-  const { lastNonActivityMessage } = props.conversation || {};
-  if (lastNonActivityMessage?.content_attributes?.data) {
-    return lastNonActivityMessage.content_attributes.data;
-  }
-  
-  return {};
+// Simple check: Is this a voice channel conversation?
+const isVoiceChannel = computed(() => {
+  return props.conversation?.meta?.inbox?.channel_type === 'Channel::Voice';
 });
 
+// Get call direction: inbound or outbound
 const isIncomingCall = computed(() => {
-  if (!isVoiceCall.value) return null;
+  if (!isVoiceChannel.value) return false;
   
-  const { lastNonActivityMessage } = props.conversation || {};
-  return checkIsIncoming(callData.value, lastNonActivityMessage);
+  const direction = props.conversation?.additional_attributes?.call_direction;
+  return direction === 'inbound';
 });
 
+// Simple function to normalize call status
 const normalizedCallStatus = computed(() => {
-  if (!isVoiceCall.value) return '';
+  if (!isVoiceChannel.value) return null;
   
-  // First check for direct call_status in the conversation additional_attributes
-  // This is the most authoritative source for call status
-  const conversationCallStatus = props.conversation?.additional_attributes?.call_status;
-  if (conversationCallStatus) {
-    return normalizeCallStatus(conversationCallStatus, isIncomingCall.value);
-  }
+  // Get the raw status directly from conversation
+  const status = props.conversation?.additional_attributes?.call_status;
   
-  // If there's an arrow in the message, this is a legacy format message
-  if (messageHasArrow.value) {
-    const { lastNonActivityMessage } = props.conversation || {};
-    const content = lastNonActivityMessage?.content || '';
-    
-    if (content.includes('ended') || content.includes('Call ended')) {
-      return 'ended';
-    }
-    if (content.includes('missed') || content.includes('Missed call') || content.includes('no answer')) {
-      return isIncomingCall.value ? 'missed' : 'no-answer';
-    }
-    if (content.includes('in progress') || content.includes('active') || content.includes('answered')) {
-      return 'active';
-    }
-    
-    // For voice channel conversations, default to ended for better display
-    if (isVoiceChannelConversation.value) {
-      return 'ended';
-    }
-    
-    // Default to 'ended' for any legacy messages without clear status
-    return 'ended';
-  }
+  // Simple mapping of call statuses
+  if (status === 'in-progress') return 'active';
+  if (status === 'completed') return 'ended';
+  if (status === 'canceled') return 'ended';
+  if (status === 'failed') return 'ended';
+  if (status === 'busy') return 'no-answer';
+  if (status === 'no-answer') return isIncomingCall.value ? 'missed' : 'no-answer';
   
-  // Apply status mapping logic to call data status
-  const callStatus = callData.value?.status;
-  if (callStatus) {
-    return normalizeCallStatus(callStatus, isIncomingCall.value);
-  }
+  // Return the status as is for explicit values
+  if (status === 'active') return 'active';
+  if (status === 'missed') return 'missed';
+  if (status === 'ended') return 'ended';
+  if (status === 'ringing') return 'ringing';
   
-  // Determine status from timestamps
-  if (callData.value?.ended_at) {
-    return 'ended';
-  }
-  if (callData.value?.missed) {
-    return isIncomingCall.value ? 'missed' : 'no-answer';
-  }
-  if (callData.value?.started_at || props.conversation?.additional_attributes?.call_started_at) {
-    return 'active';
-  }
-  
-  // For voice channel conversations, default to ended for better display
-  if (isVoiceChannelConversation.value) {
-    return 'ended';
-  }
-  
-  // Default to ended for any remaining cases to avoid showing incorrect status
+  // If no status is set, default to 'ended'
   return 'ended';
 });
 
-const callIconName = computed(() => {
-  return getCallIconName(normalizedCallStatus.value, isIncomingCall.value);
-});
-
+// Get formatted call status text for voice channel conversations
 const callStatusText = computed(() => {
-  if (!isVoiceCall.value) return '';
+  if (!isVoiceChannel.value) return '';
   
-  // For legacy messages with arrows, process using our helper
-  if (messageHasArrow.value) {
-    const { lastNonActivityMessage } = props.conversation || {};
-    const content = lastNonActivityMessage?.content || '';
+  const status = normalizedCallStatus.value;
+  const isIncoming = isIncomingCall.value;
+  
+  if (status === 'active') {
+    return t('CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS');
+  }
+  
+  if (isIncoming) {
+    if (status === 'ringing') {
+      return t('CONVERSATION.VOICE_CALL.INCOMING_CALL');
+    }
     
-    // Process arrow content with our helper
-    return processArrowContent(content, isIncomingCall.value, normalizedCallStatus.value);
+    if (status === 'missed') {
+      return t('CONVERSATION.VOICE_CALL.MISSED_CALL');
+    }
+    
+    if (status === 'ended') {
+      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
+    }
+  } else {
+    if (status === 'ringing') {
+      return t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
+    }
+    
+    if (status === 'no-answer') {
+      return t('CONVERSATION.VOICE_CALL.NO_ANSWER');
+    }
+    
+    if (status === 'ended') {
+      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
+    }
   }
   
-  // For voice channel conversations, use our helper for descriptive text
-  if (isVoiceChannelConversation.value) {
-    return getStatusText(normalizedCallStatus.value, isIncomingCall.value);
-  }
-  
-  // Generate the correct status text based on call status and direction
-  return getStatusText(normalizedCallStatus.value, isIncomingCall.value);
+  return isIncoming 
+    ? t('CONVERSATION.VOICE_CALL.INCOMING_CALL') 
+    : t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
 });
 
 const lastNonActivityMessageContent = computed(() => {
   // If it's a voice call, use the voice call text with icon
-  if (isVoiceCall.value) {
+  if (isVoiceChannel.value) {
     return callStatusText.value;
   }
   
@@ -232,7 +149,7 @@ defineExpose({
     <div class="flex items-center justify-between w-full gap-2 py-1 h-7">
       <!-- Voice Call Message display with icon -->
       <div 
-        v-if="isVoiceCall" 
+        v-if="isVoiceChannel" 
         class="flex items-center gap-1 mb-0 text-sm line-clamp-1"
         :class="{
           'text-green-600 dark:text-green-400': normalizedCallStatus === 'ringing',
@@ -241,20 +158,29 @@ defineExpose({
           'text-slate-600 dark:text-slate-400': normalizedCallStatus === 'ended'
         }"
       >
-        <!-- Explicit icon based on call status - force specific icons instead of computed properties -->
+        <!-- Explicit icon based on call status -->
+        <!-- Missed call or no answer -->
         <i v-if="normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer'" 
            class="i-ph-phone-x-fill text-base inline-block flex-shrink-0 text-red-600 dark:text-red-400 mr-1"></i>
               
+        <!-- Active call -->
         <i v-else-if="normalizedCallStatus === 'active'" 
            class="i-ph-phone-call-fill text-base inline-block flex-shrink-0 text-woot-600 dark:text-woot-400 mr-1"></i>
               
-        <i v-else-if="normalizedCallStatus === 'ended' || normalizedCallStatus === 'completed'" 
-           class="i-ph-phone-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
+        <!-- Ended incoming call -->
+        <i v-else-if="normalizedCallStatus === 'ended' && isIncomingCall" 
+           class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
               
+        <!-- Ended outgoing call -->
+        <i v-else-if="normalizedCallStatus === 'ended'" 
+           class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
+              
+        <!-- Ringing incoming call -->
         <i v-else-if="isIncomingCall" 
            class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
            :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
               
+        <!-- Ringing outgoing call -->
         <i v-else 
            class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
            :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>

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

@@ -4,6 +4,7 @@ import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { useRouter, useRoute } from 'vue-router';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
@@ -32,6 +33,7 @@ const props = defineProps({
 
 const router = useRouter();
 const route = useRoute();
+const { t } = useI18n();
 
 const cardMessagePreviewWithMetaRef = ref(null);
 
@@ -61,58 +63,42 @@ const lastNonActivityMessage = computed(() => {
   return props.conversation?.lastNonActivityMessage || {};
 });
 
-const isVoiceCall = computed(() => {
-  return lastNonActivityMessage.value?.content_type === 'voice_call' || 
-         lastNonActivityMessage.value?.content_type === 'voice';
-});
-
-const callData = computed(() => {
-  if (!isVoiceCall.value) return null;
-  return lastNonActivityMessage.value?.content_attributes?.data || {};
+// Simple check: Is this a voice channel conversation?
+const isVoiceChannel = computed(() => {
+  return props.conversation?.meta?.inbox?.channel_type === 'Channel::Voice';
 });
 
+// Get call direction: inbound or outbound
 const isIncomingCall = computed(() => {
-  if (!isVoiceCall.value) return false;
+  if (!isVoiceChannel.value) return false;
   
-  const direction = callData.value?.call_direction;
-  if (direction) {
-    return direction === 'inbound';
-  }
-  
-  return lastNonActivityMessage.value?.message_type === 0;
+  const direction = props.conversation?.additional_attributes?.call_direction;
+  return direction === 'inbound';
 });
 
+// Simple function to normalize call status
 const normalizedCallStatus = computed(() => {
-  if (!isVoiceCall.value) return null;
+  if (!isVoiceChannel.value) return null;
   
-  // Apply the same status mapping as in VoiceCall component
-  const callStatus = callData.value?.status;
-  if (callStatus) {
-    const statusMap = {
-      'in-progress': 'active',
-      'completed': 'ended',
-      'canceled': 'ended',
-      'failed': 'ended',
-      'busy': 'no-answer',
-      'no-answer': isIncomingCall.value ? 'missed' : 'no-answer'
-    };
-    
-    return statusMap[callStatus] || callStatus;
-  }
+  // Get the raw status directly from conversation
+  const status = props.conversation?.additional_attributes?.call_status;
   
-  // Determine status from timestamps
-  if (callData.value?.ended_at) {
-    return 'ended';
-  }
-  if (callData.value?.missed) {
-    return isIncomingCall.value ? 'missed' : 'no-answer';
-  }
-  if (callData.value?.started_at) {
-    return 'active';
-  }
+  // Simple mapping of call statuses
+  if (status === 'in-progress') return 'active';
+  if (status === 'completed') return 'ended';
+  if (status === 'canceled') return 'ended';
+  if (status === 'failed') return 'ended';
+  if (status === 'busy') return 'no-answer';
+  if (status === 'no-answer') return isIncomingCall.value ? 'missed' : 'no-answer';
   
-  // Default to ringing
-  return 'ringing';
+  // Return the status as is for explicit values
+  if (status === 'active') return 'active';
+  if (status === 'missed') return 'missed';
+  if (status === 'ended') return 'ended';
+  if (status === 'ringing') return 'ringing';
+  
+  // If no status is set, default to 'ended'
+  return 'ended';
 });
 
 const isRingingCall = computed(() => {
@@ -123,6 +109,73 @@ const isActiveCall = computed(() => {
   return normalizedCallStatus.value === 'active';
 });
 
+// Get formatted call status text for voice channel conversations
+const callStatusText = computed(() => {
+  if (!isVoiceChannel.value) return '';
+  
+  const status = normalizedCallStatus.value;
+  const isIncoming = isIncomingCall.value;
+  
+  if (status === 'active') {
+    return t('CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS');
+  }
+  
+  if (isIncoming) {
+    if (status === 'ringing') {
+      return t('CONVERSATION.VOICE_CALL.INCOMING_CALL');
+    }
+    
+    if (status === 'missed') {
+      return t('CONVERSATION.VOICE_CALL.MISSED_CALL');
+    }
+    
+    if (status === 'ended') {
+      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
+    }
+  } else {
+    if (status === 'ringing') {
+      return t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
+    }
+    
+    if (status === 'no-answer') {
+      return t('CONVERSATION.VOICE_CALL.NO_ANSWER');
+    }
+    
+    if (status === 'ended') {
+      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
+    }
+  }
+  
+  return isIncoming 
+    ? t('CONVERSATION.VOICE_CALL.INCOMING_CALL') 
+    : t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
+});
+
+// Get icon class based on call status
+const callIconClass = computed(() => {
+  if (!isVoiceChannel.value) return '';
+  
+  const status = normalizedCallStatus.value;
+  const isIncoming = isIncomingCall.value;
+  
+  if (status === 'missed' || status === 'no-answer') {
+    return 'i-ph-phone-x-fill';
+  }
+  
+  if (status === 'active') {
+    return 'i-ph-phone-call-fill';
+  }
+  
+  if (status === 'ended' || status === 'completed') {
+    return 'i-ph-phone-fill';
+  }
+  
+  // Default phone icon for ringing state
+  return isIncoming
+    ? 'i-ph-phone-incoming-fill'
+    : 'i-ph-phone-outgoing-fill';
+});
+
 const showMessagePreviewWithoutMeta = computed(() => {
   const { labels = [] } = props.conversation;
   return (
@@ -186,11 +239,33 @@ const onCardClick = e => {
             v-tooltip.left="inboxName"
             class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
           >
-            <!-- Special handling for voice channel -->
+            <!-- Special handling for voice channel with specific icons based on call status -->
             <span
-              v-if="inbox.channelType === 'Channel::Voice'"
-              class="i-ph-phone-fill text-n-slate-11 size-3 inline-block"
-            />
+              v-if="isVoiceChannel && normalizedCallStatus === 'missed'"
+              class="i-ph-phone-x-fill text-red-600 dark:text-red-400 size-3 inline-block"
+            ></span>
+            <span
+              v-else-if="isVoiceChannel && normalizedCallStatus === 'active'"
+              class="i-ph-phone-call-fill text-woot-600 dark:text-woot-400 size-3 inline-block"
+            ></span>
+            <span
+              v-else-if="isVoiceChannel && normalizedCallStatus === 'ended' && isIncomingCall"
+              class="i-ph-phone-incoming-fill text-n-slate-11 size-3 inline-block"
+            ></span>
+            <span
+              v-else-if="isVoiceChannel && normalizedCallStatus === 'ended'"
+              class="i-ph-phone-outgoing-fill text-n-slate-11 size-3 inline-block"
+            ></span>
+            <span
+              v-else-if="isVoiceChannel && isIncomingCall"
+              class="i-ph-phone-incoming-fill text-green-600 dark:text-green-400 size-3 inline-block"
+              :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"
+            ></span>
+            <span
+              v-else-if="isVoiceChannel"
+              class="i-ph-phone-outgoing-fill text-green-600 dark:text-green-400 size-3 inline-block"
+              :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"
+            ></span>
             <Icon
               v-else
               :icon="inboxIcon"
@@ -202,16 +277,60 @@ const onCardClick = e => {
           </span>
         </div>
       </div>
-      <CardMessagePreview
-        v-show="showMessagePreviewWithoutMeta"
-        :conversation="conversation"
-      />
-      <CardMessagePreviewWithMeta
-        v-show="!showMessagePreviewWithoutMeta"
-        ref="cardMessagePreviewWithMetaRef"
-        :conversation="conversation"
-        :account-labels="accountLabels"
-      />
+      
+      <!-- Special preview for voice channel conversations -->
+      <div 
+        v-if="isVoiceChannel"
+        class="flex items-center py-1 h-7 gap-1 mb-0 text-sm line-clamp-1"
+        :class="{
+          'text-green-600 dark:text-green-400': normalizedCallStatus === 'ringing',
+          'text-woot-600 dark:text-woot-400': normalizedCallStatus === 'active',
+          'text-red-600 dark:text-red-400': normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer',
+          'text-slate-600 dark:text-slate-400': normalizedCallStatus === 'ended'
+        }"
+      >
+        <!-- Icon based on call status -->
+        <i v-if="normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer'" 
+           class="i-ph-phone-x-fill text-base inline-block flex-shrink-0 text-red-600 dark:text-red-400 mr-1"></i>
+              
+        <i v-else-if="normalizedCallStatus === 'active'" 
+           class="i-ph-phone-call-fill text-base inline-block flex-shrink-0 text-woot-600 dark:text-woot-400 mr-1"></i>
+              
+        <i v-else-if="normalizedCallStatus === 'ended'" 
+           class="i-ph-phone-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
+              
+        <i v-else-if="isIncomingCall" 
+           class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
+           :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
+              
+        <i v-else 
+           class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
+           :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
+              
+        <span class="text-current truncate">{{ callStatusText }}</span>
+        
+        <!-- Join now prompt for ringing calls -->
+        <span 
+          v-if="normalizedCallStatus === 'ringing'"
+          class="flex-shrink-0 text-xs font-medium text-green-600 dark:text-green-400"
+        >
+          ({{ t('CONVERSATION.VOICE_CALL.JOIN_CALL') }})
+        </span>
+      </div>
+      
+      <!-- Regular message previews for non-voice channel conversations -->
+      <template v-else>
+        <CardMessagePreview
+          v-show="showMessagePreviewWithoutMeta"
+          :conversation="conversation"
+        />
+        <CardMessagePreviewWithMeta
+          v-show="!showMessagePreviewWithoutMeta"
+          ref="cardMessagePreviewWithMetaRef"
+          :conversation="conversation"
+          :account-labels="accountLabels"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -221,6 +340,10 @@ const onCardClick = e => {
   animation: border-pulse 1.5s infinite;
 }
 
+.pulse-animation {
+  animation: icon-pulse 1.5s infinite;
+}
+
 @keyframes border-pulse {
   0% {
     border-color: rgba(34, 197, 94, 0.8); /* Green for ringing */
@@ -232,4 +355,16 @@ const onCardClick = e => {
     border-color: rgba(34, 197, 94, 0.8);
   }
 }
+
+@keyframes icon-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>