-
+
+
+
-
+
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
index 86827395e..045451389 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
+++ b/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({
-
+
+
+
-
+
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
index 0d406fa9c..bf0019c6f 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
+++ b/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"
>
-
+
+ v-if="isVoiceChannel && normalizedCallStatus === 'missed'"
+ class="i-ph-phone-x-fill text-red-600 dark:text-red-400 size-3 inline-block"
+ >
+
+
+
+
+
{
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ callStatusText }}
+
+
+
+ ({{ t('CONVERSATION.VOICE_CALL.JOIN_CALL') }})
+
+
+
+
+
+
+
+