mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-03 20:48:07 +00:00
c19d70a6a0
This PR has fixes for the following issues - Inconsistent spacing between meta and text in text bubble - Activity bubble overflows for longer text (for now I have truncated it, I'll work with @absurdiya on a better solution) - Ugly lookinh gradient for expand button on email bubble - Email bubble overflow issues and text rendering issues - Alignment for error message - Minute-wise grouping not working - Link color should not be blue - Use `gray-3` for bubble background instead of `gray-4`
120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { messageTimestamp } from 'shared/helpers/timeHelper';
|
|
|
|
import MessageStatus from './MessageStatus.vue';
|
|
import Icon from 'next/icon/Icon.vue';
|
|
import { useInbox } from 'dashboard/composables/useInbox';
|
|
import { useMessageContext } from './provider.js';
|
|
|
|
import { MESSAGE_STATUS, MESSAGE_TYPES } from './constants';
|
|
|
|
const {
|
|
isAFacebookInbox,
|
|
isALineChannel,
|
|
isAPIInbox,
|
|
isASmsInbox,
|
|
isATelegramChannel,
|
|
isATwilioChannel,
|
|
isAWebWidgetInbox,
|
|
isAWhatsAppChannel,
|
|
isAnEmailChannel,
|
|
} = useInbox();
|
|
|
|
const { status, isPrivate, createdAt, sourceId, messageType } =
|
|
useMessageContext();
|
|
|
|
const readableTime = computed(() =>
|
|
messageTimestamp(createdAt.value, 'LLL d, h:mm a')
|
|
);
|
|
|
|
const showStatusIndicator = computed(() => {
|
|
if (isPrivate.value) return false;
|
|
if (messageType.value === MESSAGE_TYPES.OUTGOING) return true;
|
|
if (messageType.value === MESSAGE_TYPES.TEMPLATE) return true;
|
|
|
|
return false;
|
|
});
|
|
|
|
const isSent = computed(() => {
|
|
if (!showStatusIndicator.value) return false;
|
|
|
|
// Messages will be marked as sent for the Email channel if they have a source ID.
|
|
if (isAnEmailChannel.value) return !!sourceId.value;
|
|
|
|
if (
|
|
isAWhatsAppChannel.value ||
|
|
isATwilioChannel.value ||
|
|
isAFacebookInbox.value ||
|
|
isASmsInbox.value ||
|
|
isATelegramChannel.value
|
|
) {
|
|
return sourceId.value && status.value === MESSAGE_STATUS.SENT;
|
|
}
|
|
|
|
// All messages will be mark as sent for the Line channel, as there is no source ID.
|
|
if (isALineChannel.value) return true;
|
|
|
|
return false;
|
|
});
|
|
|
|
const isDelivered = computed(() => {
|
|
if (!showStatusIndicator.value) return false;
|
|
|
|
if (
|
|
isAWhatsAppChannel.value ||
|
|
isATwilioChannel.value ||
|
|
isASmsInbox.value ||
|
|
isAFacebookInbox.value
|
|
) {
|
|
return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
|
|
}
|
|
// All messages marked as delivered for the web widget inbox and API inbox once they are sent.
|
|
if (isAWebWidgetInbox.value || isAPIInbox.value) {
|
|
return status.value === MESSAGE_STATUS.SENT;
|
|
}
|
|
if (isALineChannel.value) {
|
|
return status.value === MESSAGE_STATUS.DELIVERED;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
const isRead = computed(() => {
|
|
if (!showStatusIndicator.value) return false;
|
|
|
|
if (
|
|
isAWhatsAppChannel.value ||
|
|
isATwilioChannel.value ||
|
|
isAFacebookInbox.value
|
|
) {
|
|
return sourceId.value && status.value === MESSAGE_STATUS.READ;
|
|
}
|
|
|
|
if (isAWebWidgetInbox.value || isAPIInbox.value) {
|
|
return status.value === MESSAGE_STATUS.READ;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
const statusToShow = computed(() => {
|
|
if (isRead.value) return MESSAGE_STATUS.READ;
|
|
if (isDelivered.value) return MESSAGE_STATUS.DELIVERED;
|
|
if (isSent.value) return MESSAGE_STATUS.SENT;
|
|
|
|
return MESSAGE_STATUS.PROGRESS;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-xs flex items-center gap-1.5">
|
|
<div class="inline">
|
|
<time class="inline">{{ readableTime }}</time>
|
|
</div>
|
|
<Icon v-if="isPrivate" icon="i-lucide-lock-keyhole" class="size-3" />
|
|
<MessageStatus v-if="showStatusIndicator" :status="statusToShow" />
|
|
</div>
|
|
</template>
|
|
`
|