chore: message previews in conversation list
This commit is contained in:
Sojan
+191
-56
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user