feat: Update conversation messages screen UI (#12975)
This commit is contained in:
Sivin Varghese
@@ -1,92 +1,83 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStore } from 'vuex';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import ConversationHeader from './ConversationHeader.vue';
|
||||
import DashboardAppFrame from '../DashboardApp/Frame.vue';
|
||||
import EmptyState from './EmptyState/EmptyState.vue';
|
||||
import MessagesView from './MessagesView.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ConversationHeader,
|
||||
DashboardAppFrame,
|
||||
EmptyState,
|
||||
MessagesView,
|
||||
defineProps({
|
||||
inboxId: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
props: {
|
||||
inboxId: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
isInboxView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isContactPanelOpen: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isOnExpandedLayout: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isInboxView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
data() {
|
||||
return { activeIndex: 0 };
|
||||
isOnExpandedLayout: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentChat: 'getSelectedChat',
|
||||
dashboardApps: 'dashboardApps/getRecords',
|
||||
}),
|
||||
dashboardAppTabs() {
|
||||
return [
|
||||
{
|
||||
key: 'messages',
|
||||
index: 0,
|
||||
name: this.$t('CONVERSATION.DASHBOARD_APP_TAB_MESSAGES'),
|
||||
},
|
||||
...this.dashboardApps.map((dashboardApp, index) => ({
|
||||
key: `dashboard-${dashboardApp.id}`,
|
||||
index: index + 1,
|
||||
name: dashboardApp.title,
|
||||
})),
|
||||
];
|
||||
},
|
||||
showContactPanel() {
|
||||
return this.isContactPanelOpen && this.currentChat.id;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'currentChat.inbox_id': {
|
||||
immediate: true,
|
||||
handler(inboxId) {
|
||||
if (inboxId) {
|
||||
this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
|
||||
}
|
||||
},
|
||||
},
|
||||
'currentChat.id'() {
|
||||
this.fetchLabels();
|
||||
this.activeIndex = 0;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchLabels();
|
||||
this.$store.dispatch('dashboardApps/get');
|
||||
},
|
||||
methods: {
|
||||
fetchLabels() {
|
||||
if (!this.currentChat.id) {
|
||||
return;
|
||||
}
|
||||
this.$store.dispatch('conversationLabels/get', this.currentChat.id);
|
||||
},
|
||||
onDashboardAppTabChange(index) {
|
||||
this.activeIndex = index;
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
|
||||
const currentChat = useMapGetter('getSelectedChat');
|
||||
const dashboardApps = useMapGetter('dashboardApps/getRecords');
|
||||
|
||||
const activeIndex = ref(0);
|
||||
|
||||
const dashboardAppTabs = computed(() => [
|
||||
{
|
||||
key: 'messages',
|
||||
index: 0,
|
||||
name: t('CONVERSATION.DASHBOARD_APP_TAB_MESSAGES'),
|
||||
},
|
||||
...dashboardApps.value.map((dashboardApp, index) => ({
|
||||
key: `dashboard-${dashboardApp.id}`,
|
||||
index: index + 1,
|
||||
name: dashboardApp.title,
|
||||
})),
|
||||
]);
|
||||
|
||||
const fetchLabels = () => {
|
||||
if (!currentChat.value.id) {
|
||||
return;
|
||||
}
|
||||
store.dispatch('conversationLabels/get', currentChat.value.id);
|
||||
};
|
||||
|
||||
const onDashboardAppTabChange = index => {
|
||||
activeIndex.value = index;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => currentChat.value.inbox_id,
|
||||
inboxId => {
|
||||
if (inboxId) {
|
||||
store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => currentChat.value.id,
|
||||
() => {
|
||||
fetchLabels();
|
||||
activeIndex.value = 0;
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchLabels();
|
||||
store.dispatch('dashboardApps/get');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -99,12 +90,13 @@ export default {
|
||||
<ConversationHeader
|
||||
v-if="currentChat.id"
|
||||
:chat="currentChat"
|
||||
:is-on-expanded-view="isOnExpandedLayout"
|
||||
:show-back-button="isOnExpandedLayout && !isInboxView"
|
||||
/>
|
||||
<woot-tabs
|
||||
v-if="dashboardApps.length && currentChat.id"
|
||||
:index="activeIndex"
|
||||
class="-mt-px"
|
||||
class="[&>ul]:px-5 h-10"
|
||||
@change="onDashboardAppTabChange"
|
||||
>
|
||||
<woot-tabs-item
|
||||
@@ -114,7 +106,6 @@ export default {
|
||||
:name="tab.name"
|
||||
:show-badge="false"
|
||||
is-compact
|
||||
class="[&_a]:pt-1"
|
||||
/>
|
||||
</woot-tabs>
|
||||
<div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
|
||||
|
||||
@@ -4,9 +4,8 @@ import { useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import BackButton from '../BackButton.vue';
|
||||
import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import MoreActions from './MoreActions.vue';
|
||||
import Avatar from 'next/avatar/Avatar.vue';
|
||||
import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
|
||||
import wootConstants from 'dashboard/constants/globals';
|
||||
import { conversationListPageURL } from 'dashboard/helper/URLHelper';
|
||||
@@ -23,6 +22,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isOnExpandedView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
@@ -80,78 +83,73 @@ const snoozedDisplayText = computed(() => {
|
||||
return t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
|
||||
});
|
||||
|
||||
const inbox = computed(() => {
|
||||
const { inbox_id: inboxId } = props.chat;
|
||||
return store.getters['inboxes/getInbox'](inboxId);
|
||||
});
|
||||
|
||||
const hasMultipleInboxes = computed(
|
||||
() => store.getters['inboxes/getInboxes'].length > 1
|
||||
);
|
||||
|
||||
const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="conversationHeader"
|
||||
class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 pt-3 pb-2 h-24 xl:h-12"
|
||||
class="flex flex-col items-start gap-x-6 gap-y-2 w-full min-w-0 pt-3 pb-2 ltr:pl-4 rtl:pr-4 ltr:pr-1 rtl:pl-1"
|
||||
:class="{
|
||||
'md:flex-row md:items-center': isOnExpandedView,
|
||||
'lg:flex-row lg:items-center': !isOnExpandedView,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"
|
||||
class="flex items-center gap-2 min-w-0 w-full"
|
||||
:class="{
|
||||
'md:flex-1 md:basis-0': isOnExpandedView,
|
||||
'lg:flex-1 lg:basis-0': !isOnExpandedView,
|
||||
}"
|
||||
>
|
||||
<BackButton
|
||||
v-if="showBackButton"
|
||||
:back-url="backButtonUrl"
|
||||
class="ltr:mr-2 rtl:ml-2"
|
||||
/>
|
||||
<Avatar
|
||||
:name="currentContact.name"
|
||||
:src="currentContact.thumbnail"
|
||||
:size="32"
|
||||
:status="currentContact.availability_status"
|
||||
hide-offline-status
|
||||
rounded-full
|
||||
/>
|
||||
<div
|
||||
class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"
|
||||
>
|
||||
<div class="flex flex-row items-center max-w-full gap-1 p-0 m-0">
|
||||
<span
|
||||
class="text-sm font-medium truncate leading-tight text-n-slate-12"
|
||||
>
|
||||
{{ currentContact.name }}
|
||||
</span>
|
||||
<fluent-icon
|
||||
v-if="!isHMACVerified"
|
||||
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
|
||||
size="14"
|
||||
class="text-n-amber-10 my-0 mx-0 min-w-[14px] flex-shrink-0"
|
||||
icon="warning"
|
||||
/>
|
||||
</div>
|
||||
<BackButton v-if="showBackButton" :back-url="backButtonUrl" />
|
||||
|
||||
<div
|
||||
class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
|
||||
>
|
||||
<InboxName v-if="hasMultipleInboxes" :inbox="inbox" class="!mx-0" />
|
||||
<span v-if="isSnoozed" class="font-medium text-n-amber-10">
|
||||
{{ snoozedDisplayText }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 min-w-0 flex-1">
|
||||
<span class="text-base font-medium text-n-slate-12 truncate min-w-0">
|
||||
{{ currentContact.name }}
|
||||
</span>
|
||||
<Icon
|
||||
v-if="!isHMACVerified"
|
||||
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
|
||||
icon="i-lucide-triangle-alert"
|
||||
class="text-n-amber-10 size-3.5 shrink-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center justify-start xl:justify-end flex-shrink-0 gap-2 w-full xl:w-auto header-actions-wrap"
|
||||
class="flex items-center gap-2 min-w-0 w-full"
|
||||
:class="{
|
||||
'md:flex-1 md:basis-0 md:justify-end': isOnExpandedView,
|
||||
'lg:flex-1 lg:basis-0 lg:justify-end': !isOnExpandedView,
|
||||
}"
|
||||
>
|
||||
<div v-if="isSnoozed" class="flex items-center gap-1 min-w-0 shrink">
|
||||
<Icon
|
||||
icon="i-lucide-bell-off"
|
||||
class="text-n-slate-11 size-3.5 shrink-0"
|
||||
/>
|
||||
<span class="text-xs text-n-slate-11 font-420 truncate min-w-0">
|
||||
{{ snoozedDisplayText }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="isSnoozed" class="w-px h-3 rounded-lg bg-n-strong shrink-0" />
|
||||
|
||||
<SLACardLabel
|
||||
v-if="hasSlaPolicyId"
|
||||
:chat="chat"
|
||||
show-extended-info
|
||||
:parent-width="width"
|
||||
class="hidden md:flex"
|
||||
class="p-1 shrink-0"
|
||||
/>
|
||||
<MoreActions :conversation-id="currentChat.id" />
|
||||
|
||||
<div
|
||||
v-if="hasSlaPolicyId"
|
||||
class="w-px h-3 rounded-lg bg-n-strong ltr:mx-2 rtl:mx-2 shrink-0"
|
||||
/>
|
||||
|
||||
<MoreActions :conversation-id="currentChat.id" class="shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,452 +1,462 @@
|
||||
<script>
|
||||
import { ref, provide } from 'vue';
|
||||
// composable
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
provide,
|
||||
getCurrentInstance,
|
||||
} from 'vue';
|
||||
|
||||
import { useConfig } from 'dashboard/composables/useConfig';
|
||||
import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
|
||||
import { useAI } from 'dashboard/composables/useAI';
|
||||
import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store';
|
||||
import {
|
||||
useInbox,
|
||||
INBOX_FEATURES,
|
||||
INBOX_FEATURE_MAP,
|
||||
} from 'dashboard/composables/useInbox';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
// components
|
||||
import ReplyBox from './ReplyBox.vue';
|
||||
import MessageList from 'next/message/MessageList.vue';
|
||||
import ConversationLabelSuggestion from './conversation/LabelSuggestion.vue';
|
||||
import Banner from 'dashboard/components/ui/Banner.vue';
|
||||
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
|
||||
|
||||
// stores and apis
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
// mixins
|
||||
import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
|
||||
|
||||
// utils
|
||||
import { emitter } from 'shared/helpers/mitt';
|
||||
import { getTypingUsersText } from '../../../helper/commons';
|
||||
import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
|
||||
import { LocalStorage } from 'shared/helpers/localStorage';
|
||||
import {
|
||||
filterDuplicateSourceMessages,
|
||||
getReadMessages,
|
||||
getUnreadMessages,
|
||||
} from 'dashboard/helper/conversationHelper';
|
||||
|
||||
// constants
|
||||
import { BUS_EVENTS } from 'shared/constants/busEvents';
|
||||
import { REPLY_POLICY } from 'shared/constants/links';
|
||||
import wootConstants from 'dashboard/constants/globals';
|
||||
import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
|
||||
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MessageList,
|
||||
ReplyBox,
|
||||
Banner,
|
||||
ConversationLabelSuggestion,
|
||||
Spinner,
|
||||
},
|
||||
mixins: [inboxMixin],
|
||||
setup() {
|
||||
const isPopOutReplyBox = ref(false);
|
||||
const conversationPanelRef = ref(null);
|
||||
const { isEnterprise } = useConfig();
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const instance = getCurrentInstance();
|
||||
const { isEnterprise } = useConfig();
|
||||
|
||||
const keyboardEvents = {
|
||||
Escape: {
|
||||
action: () => {
|
||||
isPopOutReplyBox.value = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
const {
|
||||
isAIIntegrationEnabled,
|
||||
isLabelSuggestionFeatureEnabled,
|
||||
fetchIntegrationsIfRequired,
|
||||
fetchLabelSuggestions,
|
||||
} = useAI();
|
||||
|
||||
useKeyboardEvents(keyboardEvents);
|
||||
const isPopOutReplyBox = ref(false);
|
||||
const conversationPanelRef = ref(null);
|
||||
const isLoadingPrevious = ref(true);
|
||||
const heightBeforeLoad = ref(null);
|
||||
const scrollTopBeforeLoad = ref(null);
|
||||
const conversationPanel = ref(null);
|
||||
const hasUserScrolled = ref(false);
|
||||
const isProgrammaticScroll = ref(false);
|
||||
const messageSentSinceOpened = ref(false);
|
||||
const labelSuggestions = ref([]);
|
||||
|
||||
const {
|
||||
isAIIntegrationEnabled,
|
||||
isLabelSuggestionFeatureEnabled,
|
||||
fetchIntegrationsIfRequired,
|
||||
fetchLabelSuggestions,
|
||||
} = useAI();
|
||||
|
||||
provide('contextMenuElementTarget', conversationPanelRef);
|
||||
|
||||
return {
|
||||
isEnterprise,
|
||||
isPopOutReplyBox,
|
||||
isAIIntegrationEnabled,
|
||||
isLabelSuggestionFeatureEnabled,
|
||||
fetchIntegrationsIfRequired,
|
||||
fetchLabelSuggestions,
|
||||
conversationPanelRef,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoadingPrevious: true,
|
||||
heightBeforeLoad: null,
|
||||
conversationPanel: null,
|
||||
hasUserScrolled: false,
|
||||
isProgrammaticScroll: false,
|
||||
messageSentSinceOpened: false,
|
||||
labelSuggestions: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentChat: 'getSelectedChat',
|
||||
currentUserId: 'getCurrentUserID',
|
||||
listLoadingStatus: 'getAllMessagesLoaded',
|
||||
currentAccountId: 'getCurrentAccountId',
|
||||
}),
|
||||
isOpen() {
|
||||
return this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
|
||||
},
|
||||
shouldShowLabelSuggestions() {
|
||||
return (
|
||||
this.isOpen &&
|
||||
this.isEnterprise &&
|
||||
this.isAIIntegrationEnabled &&
|
||||
!this.messageSentSinceOpened
|
||||
);
|
||||
},
|
||||
inboxId() {
|
||||
return this.currentChat.inbox_id;
|
||||
},
|
||||
inbox() {
|
||||
return this.$store.getters['inboxes/getInbox'](this.inboxId);
|
||||
},
|
||||
typingUsersList() {
|
||||
const userList = this.$store.getters[
|
||||
'conversationTypingStatus/getUserList'
|
||||
](this.currentChat.id);
|
||||
return userList;
|
||||
},
|
||||
isAnyoneTyping() {
|
||||
const userList = this.typingUsersList;
|
||||
return userList.length !== 0;
|
||||
},
|
||||
typingUserNames() {
|
||||
const userList = this.typingUsersList;
|
||||
if (this.isAnyoneTyping) {
|
||||
const [i18nKey, params] = getTypingUsersText(userList);
|
||||
return this.$t(i18nKey, params);
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
getMessages() {
|
||||
const messages = this.currentChat.messages || [];
|
||||
if (this.isAWhatsAppChannel) {
|
||||
return filterDuplicateSourceMessages(messages);
|
||||
}
|
||||
return messages;
|
||||
},
|
||||
readMessages() {
|
||||
return getReadMessages(
|
||||
this.getMessages,
|
||||
this.currentChat.agent_last_seen_at
|
||||
);
|
||||
},
|
||||
unReadMessages() {
|
||||
return getUnreadMessages(
|
||||
this.getMessages,
|
||||
this.currentChat.agent_last_seen_at
|
||||
);
|
||||
},
|
||||
shouldShowSpinner() {
|
||||
return (
|
||||
(this.currentChat && this.currentChat.dataFetched === undefined) ||
|
||||
(!this.listLoadingStatus && this.isLoadingPrevious)
|
||||
);
|
||||
},
|
||||
// Check there is a instagram inbox exists with the same instagram_id
|
||||
hasDuplicateInstagramInbox() {
|
||||
const instagramId = this.inbox.instagram_id;
|
||||
const { additional_attributes: additionalAttributes = {} } = this.inbox;
|
||||
const instagramInbox =
|
||||
this.$store.getters['inboxes/getInstagramInboxByInstagramId'](
|
||||
instagramId
|
||||
);
|
||||
|
||||
return (
|
||||
this.inbox.channel_type === INBOX_TYPES.FB &&
|
||||
additionalAttributes.type === 'instagram_direct_message' &&
|
||||
instagramInbox
|
||||
);
|
||||
},
|
||||
|
||||
replyWindowBannerMessage() {
|
||||
if (this.isAWhatsAppChannel) {
|
||||
return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
|
||||
}
|
||||
if (this.isAPIInbox) {
|
||||
const { additional_attributes: additionalAttributes = {} } = this.inbox;
|
||||
if (additionalAttributes) {
|
||||
const {
|
||||
agent_reply_time_window_message: agentReplyTimeWindowMessage,
|
||||
agent_reply_time_window: agentReplyTimeWindow,
|
||||
} = additionalAttributes;
|
||||
return (
|
||||
agentReplyTimeWindowMessage ||
|
||||
this.$t('CONVERSATION.API_HOURS_WINDOW', {
|
||||
hours: agentReplyTimeWindow,
|
||||
})
|
||||
);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
return this.$t('CONVERSATION.CANNOT_REPLY');
|
||||
},
|
||||
replyWindowLink() {
|
||||
if (this.isAFacebookInbox || this.isAnInstagramChannel) {
|
||||
return REPLY_POLICY.FACEBOOK;
|
||||
}
|
||||
if (this.isAWhatsAppCloudChannel) {
|
||||
return REPLY_POLICY.WHATSAPP_CLOUD;
|
||||
}
|
||||
if (!this.isAPIInbox) {
|
||||
return REPLY_POLICY.TWILIO_WHATSAPP;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
replyWindowLinkText() {
|
||||
if (
|
||||
this.isAWhatsAppChannel ||
|
||||
this.isAFacebookInbox ||
|
||||
this.isAnInstagramChannel
|
||||
) {
|
||||
return this.$t('CONVERSATION.24_HOURS_WINDOW');
|
||||
}
|
||||
if (!this.isAPIInbox) {
|
||||
return this.$t('CONVERSATION.TWILIO_WHATSAPP_24_HOURS_WINDOW');
|
||||
}
|
||||
return '';
|
||||
},
|
||||
unreadMessageCount() {
|
||||
return this.currentChat.unread_count || 0;
|
||||
},
|
||||
unreadMessageLabel() {
|
||||
const count =
|
||||
this.unreadMessageCount > 9 ? '9+' : this.unreadMessageCount;
|
||||
const label =
|
||||
this.unreadMessageCount > 1
|
||||
? 'CONVERSATION.UNREAD_MESSAGES'
|
||||
: 'CONVERSATION.UNREAD_MESSAGE';
|
||||
return `${count} ${this.$t(label)}`;
|
||||
},
|
||||
inboxSupportsReplyTo() {
|
||||
const incoming = this.inboxHasFeature(INBOX_FEATURES.REPLY_TO);
|
||||
const outgoing =
|
||||
this.inboxHasFeature(INBOX_FEATURES.REPLY_TO_OUTGOING) &&
|
||||
!this.is360DialogWhatsAppChannel;
|
||||
|
||||
return { incoming, outgoing };
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentChat(newChat, oldChat) {
|
||||
if (newChat.id === oldChat.id) {
|
||||
return;
|
||||
}
|
||||
this.fetchAllAttachmentsFromCurrentChat();
|
||||
this.fetchSuggestions();
|
||||
this.messageSentSinceOpened = false;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
emitter.on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
|
||||
// when a message is sent we set the flag to true this hides the label suggestions,
|
||||
// until the chat is changed and the flag is reset in the watch for currentChat
|
||||
emitter.on(BUS_EVENTS.MESSAGE_SENT, () => {
|
||||
this.messageSentSinceOpened = true;
|
||||
});
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.addScrollListener();
|
||||
this.fetchAllAttachmentsFromCurrentChat();
|
||||
this.fetchSuggestions();
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
this.removeBusListeners();
|
||||
this.removeScrollListener();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async fetchSuggestions() {
|
||||
// start empty, this ensures that the label suggestions are not shown
|
||||
this.labelSuggestions = [];
|
||||
|
||||
if (this.isLabelSuggestionDismissed()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isEnterprise) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Early exit if conversation already has labels - no need to suggest more
|
||||
const existingLabels = this.currentChat?.labels || [];
|
||||
if (existingLabels.length > 0) return;
|
||||
|
||||
// method available in mixin, need to ensure that integrations are present
|
||||
await this.fetchIntegrationsIfRequired();
|
||||
|
||||
if (!this.isLabelSuggestionFeatureEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.labelSuggestions = await this.fetchLabelSuggestions({
|
||||
conversationId: this.currentChat.id,
|
||||
});
|
||||
|
||||
// once the labels are fetched, we need to scroll to bottom
|
||||
// but we need to wait for the DOM to be updated
|
||||
// so we use the nextTick method
|
||||
this.$nextTick(() => {
|
||||
// this param is added to route, telling the UI to navigate to the message
|
||||
// it is triggered by the SCROLL_TO_MESSAGE method
|
||||
// see setActiveChat on ConversationView.vue for more info
|
||||
const { messageId } = this.$route.query;
|
||||
|
||||
// only trigger the scroll to bottom if the user has not scrolled
|
||||
// and there's no active messageId that is selected in view
|
||||
if (!messageId && !this.hasUserScrolled) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
});
|
||||
},
|
||||
isLabelSuggestionDismissed() {
|
||||
return LocalStorage.getFlag(
|
||||
LOCAL_STORAGE_KEYS.DISMISSED_LABEL_SUGGESTIONS,
|
||||
this.currentAccountId,
|
||||
this.currentChat.id
|
||||
);
|
||||
},
|
||||
fetchAllAttachmentsFromCurrentChat() {
|
||||
this.$store.dispatch('fetchAllAttachments', this.currentChat.id);
|
||||
},
|
||||
removeBusListeners() {
|
||||
emitter.off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
|
||||
},
|
||||
onScrollToMessage({ messageId = '' } = {}) {
|
||||
this.$nextTick(() => {
|
||||
const messageElement = document.getElementById('message' + messageId);
|
||||
if (messageElement) {
|
||||
this.isProgrammaticScroll = true;
|
||||
messageElement.scrollIntoView({ behavior: 'smooth' });
|
||||
this.fetchPreviousMessages();
|
||||
} else {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
});
|
||||
this.makeMessagesRead();
|
||||
},
|
||||
addScrollListener() {
|
||||
this.conversationPanel = this.$el.querySelector('.conversation-panel');
|
||||
this.setScrollParams();
|
||||
this.conversationPanel.addEventListener('scroll', this.handleScroll);
|
||||
this.$nextTick(() => this.scrollToBottom());
|
||||
this.isLoadingPrevious = false;
|
||||
},
|
||||
removeScrollListener() {
|
||||
this.conversationPanel.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
scrollToBottom() {
|
||||
this.isProgrammaticScroll = true;
|
||||
let relevantMessages = [];
|
||||
|
||||
// label suggestions are not part of the messages list
|
||||
// so we need to handle them separately
|
||||
let labelSuggestions =
|
||||
this.conversationPanel.querySelector('.label-suggestion');
|
||||
|
||||
// if there are unread messages, scroll to the first unread message
|
||||
if (this.unreadMessageCount > 0) {
|
||||
// capturing only the unread messages
|
||||
relevantMessages =
|
||||
this.conversationPanel.querySelectorAll('.message--unread');
|
||||
} else if (labelSuggestions) {
|
||||
// when scrolling to the bottom, the label suggestions is below the last message
|
||||
// so we scroll there if there are no unread messages
|
||||
// Unread messages always take the highest priority
|
||||
relevantMessages = [labelSuggestions];
|
||||
} else {
|
||||
// if there are no unread messages or label suggestion, scroll to the last message
|
||||
// capturing last message from the messages list
|
||||
relevantMessages = Array.from(
|
||||
this.conversationPanel.querySelectorAll('.message--read')
|
||||
).slice(-1);
|
||||
}
|
||||
|
||||
this.conversationPanel.scrollTop = calculateScrollTop(
|
||||
this.conversationPanel.scrollHeight,
|
||||
this.$el.scrollHeight,
|
||||
relevantMessages
|
||||
);
|
||||
},
|
||||
setScrollParams() {
|
||||
this.heightBeforeLoad = this.conversationPanel.scrollHeight;
|
||||
this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;
|
||||
},
|
||||
|
||||
async fetchPreviousMessages(scrollTop = 0) {
|
||||
this.setScrollParams();
|
||||
const shouldLoadMoreMessages =
|
||||
this.currentChat.dataFetched === true &&
|
||||
!this.listLoadingStatus &&
|
||||
!this.isLoadingPrevious;
|
||||
|
||||
if (
|
||||
scrollTop < 100 &&
|
||||
!this.isLoadingPrevious &&
|
||||
shouldLoadMoreMessages
|
||||
) {
|
||||
this.isLoadingPrevious = true;
|
||||
try {
|
||||
await this.$store.dispatch('fetchPreviousMessages', {
|
||||
conversationId: this.currentChat.id,
|
||||
before: this.currentChat.messages[0].id,
|
||||
});
|
||||
const heightDifference =
|
||||
this.conversationPanel.scrollHeight - this.heightBeforeLoad;
|
||||
this.conversationPanel.scrollTop =
|
||||
this.scrollTopBeforeLoad + heightDifference;
|
||||
this.setScrollParams();
|
||||
} catch (error) {
|
||||
// Ignore Error
|
||||
} finally {
|
||||
this.isLoadingPrevious = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleScroll(e) {
|
||||
if (this.isProgrammaticScroll) {
|
||||
// Reset the flag
|
||||
this.isProgrammaticScroll = false;
|
||||
this.hasUserScrolled = false;
|
||||
} else {
|
||||
this.hasUserScrolled = true;
|
||||
}
|
||||
emitter.emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL);
|
||||
this.fetchPreviousMessages(e.target.scrollTop);
|
||||
},
|
||||
|
||||
makeMessagesRead() {
|
||||
this.$store.dispatch('markMessagesRead', { id: this.currentChat.id });
|
||||
},
|
||||
async handleMessageRetry(message) {
|
||||
if (!message) return;
|
||||
const payload = useSnakeCase(message);
|
||||
await this.$store.dispatch('sendMessageWithData', payload);
|
||||
const keyboardEvents = {
|
||||
Escape: {
|
||||
action: () => {
|
||||
isPopOutReplyBox.value = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
useKeyboardEvents(keyboardEvents);
|
||||
|
||||
provide('contextMenuElementTarget', conversationPanelRef);
|
||||
|
||||
const currentChat = useMapGetter('getSelectedChat');
|
||||
const currentUserId = useMapGetter('getCurrentUserID');
|
||||
const listLoadingStatus = useMapGetter('getAllMessagesLoaded');
|
||||
const currentAccountId = useMapGetter('getCurrentAccountId');
|
||||
const instagramInboxByIdGetter = useMapGetter(
|
||||
'inboxes/getInstagramInboxByInstagramId'
|
||||
);
|
||||
const inboxGetter = useMapGetter('inboxes/getInbox');
|
||||
const typingUsersListGetter = useMapGetter(
|
||||
'conversationTypingStatus/getUserList'
|
||||
);
|
||||
|
||||
const isOpen = computed(() => {
|
||||
return currentChat.value?.status === wootConstants.STATUS_TYPE.OPEN;
|
||||
});
|
||||
|
||||
const shouldShowLabelSuggestions = computed(() => {
|
||||
return (
|
||||
isOpen.value &&
|
||||
isEnterprise &&
|
||||
isAIIntegrationEnabled.value &&
|
||||
!messageSentSinceOpened.value
|
||||
);
|
||||
});
|
||||
|
||||
const inboxId = computed(() => {
|
||||
return currentChat.value?.inbox_id;
|
||||
});
|
||||
|
||||
const inbox = computed(() => {
|
||||
return inboxGetter.value(inboxId.value);
|
||||
});
|
||||
|
||||
const {
|
||||
isAPIInbox,
|
||||
isAFacebookInbox,
|
||||
isAWhatsAppChannel,
|
||||
isAWhatsAppCloudChannel,
|
||||
isAnInstagramChannel,
|
||||
is360DialogWhatsAppChannel,
|
||||
isAnEmailChannel,
|
||||
} = useInbox();
|
||||
|
||||
const inboxHasFeature = feature => {
|
||||
const channelType = inbox.value?.channel_type;
|
||||
return INBOX_FEATURE_MAP[feature]?.includes(channelType) ?? false;
|
||||
};
|
||||
|
||||
const typingUsersList = computed(() => {
|
||||
const userList = typingUsersListGetter.value(currentChat.value.id);
|
||||
return userList;
|
||||
});
|
||||
|
||||
const isAnyoneTyping = computed(() => {
|
||||
const userList = typingUsersList.value;
|
||||
return userList.length !== 0;
|
||||
});
|
||||
|
||||
const typingUserNames = computed(() => {
|
||||
const userList = typingUsersList.value;
|
||||
if (isAnyoneTyping.value) {
|
||||
const [i18nKey, params] = getTypingUsersText(userList);
|
||||
return t(i18nKey, params);
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
|
||||
const getMessages = computed(() => {
|
||||
const messages = currentChat.value.messages || [];
|
||||
if (isAWhatsAppChannel.value) {
|
||||
return filterDuplicateSourceMessages(messages);
|
||||
}
|
||||
return messages;
|
||||
});
|
||||
|
||||
const unReadMessages = computed(() => {
|
||||
return getUnreadMessages(
|
||||
getMessages.value,
|
||||
currentChat.value.agent_last_seen_at
|
||||
);
|
||||
});
|
||||
|
||||
const shouldShowSpinner = computed(() => {
|
||||
return (
|
||||
(currentChat.value && currentChat.value.dataFetched === undefined) ||
|
||||
(!listLoadingStatus.value && isLoadingPrevious.value)
|
||||
);
|
||||
});
|
||||
|
||||
// Check there is a instagram inbox exists with the same instagram_id
|
||||
const hasDuplicateInstagramInbox = computed(() => {
|
||||
const instagramId = inbox.value.instagram_id;
|
||||
const { additional_attributes: additionalAttributes = {} } = inbox.value;
|
||||
const instagramInbox = instagramInboxByIdGetter.value(instagramId);
|
||||
|
||||
return (
|
||||
inbox.value.channel_type === INBOX_TYPES.FB &&
|
||||
additionalAttributes.type === 'instagram_direct_message' &&
|
||||
instagramInbox
|
||||
);
|
||||
});
|
||||
|
||||
const replyWindowBannerMessage = computed(() => {
|
||||
if (isAWhatsAppChannel.value) {
|
||||
return t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
|
||||
}
|
||||
if (isAPIInbox.value) {
|
||||
const { additional_attributes: additionalAttributes = {} } = inbox.value;
|
||||
if (additionalAttributes) {
|
||||
const {
|
||||
agent_reply_time_window_message: agentReplyTimeWindowMessage,
|
||||
agent_reply_time_window: agentReplyTimeWindow,
|
||||
} = additionalAttributes;
|
||||
return (
|
||||
agentReplyTimeWindowMessage ||
|
||||
t('CONVERSATION.API_HOURS_WINDOW', {
|
||||
hours: agentReplyTimeWindow,
|
||||
})
|
||||
);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
return t('CONVERSATION.CANNOT_REPLY');
|
||||
});
|
||||
|
||||
const replyWindowLink = computed(() => {
|
||||
if (isAFacebookInbox.value || isAnInstagramChannel.value) {
|
||||
return REPLY_POLICY.FACEBOOK;
|
||||
}
|
||||
if (isAWhatsAppCloudChannel.value) {
|
||||
return REPLY_POLICY.WHATSAPP_CLOUD;
|
||||
}
|
||||
if (!isAPIInbox.value) {
|
||||
return REPLY_POLICY.TWILIO_WHATSAPP;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const replyWindowLinkText = computed(() => {
|
||||
if (
|
||||
isAWhatsAppChannel.value ||
|
||||
isAFacebookInbox.value ||
|
||||
isAnInstagramChannel.value
|
||||
) {
|
||||
return t('CONVERSATION.24_HOURS_WINDOW');
|
||||
}
|
||||
if (!isAPIInbox.value) {
|
||||
return t('CONVERSATION.TWILIO_WHATSAPP_24_HOURS_WINDOW');
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const unreadMessageCount = computed(() => {
|
||||
return currentChat.value.unread_count || 0;
|
||||
});
|
||||
|
||||
const unreadMessageLabel = computed(() => {
|
||||
const count = unreadMessageCount.value > 9 ? '9+' : unreadMessageCount.value;
|
||||
const label =
|
||||
unreadMessageCount.value > 1
|
||||
? 'CONVERSATION.UNREAD_MESSAGES'
|
||||
: 'CONVERSATION.UNREAD_MESSAGE';
|
||||
return `${count} ${t(label)}`;
|
||||
});
|
||||
|
||||
const inboxSupportsReplyTo = computed(() => {
|
||||
const incoming = inboxHasFeature(INBOX_FEATURES.REPLY_TO);
|
||||
const outgoing =
|
||||
inboxHasFeature(INBOX_FEATURES.REPLY_TO_OUTGOING) &&
|
||||
!is360DialogWhatsAppChannel.value;
|
||||
|
||||
return { incoming, outgoing };
|
||||
});
|
||||
|
||||
const isLabelSuggestionDismissed = () => {
|
||||
return LocalStorage.getFlag(
|
||||
LOCAL_STORAGE_KEYS.DISMISSED_LABEL_SUGGESTIONS,
|
||||
currentAccountId.value,
|
||||
currentChat.value.id
|
||||
);
|
||||
};
|
||||
|
||||
const fetchAllAttachmentsFromCurrentChat = () => {
|
||||
store.dispatch('fetchAllAttachments', currentChat.value.id);
|
||||
};
|
||||
|
||||
const makeMessagesRead = () => {
|
||||
store.dispatch('markMessagesRead', { id: currentChat.value.id });
|
||||
};
|
||||
|
||||
const setScrollParams = () => {
|
||||
heightBeforeLoad.value = conversationPanel.value.scrollHeight;
|
||||
scrollTopBeforeLoad.value = conversationPanel.value.scrollTop;
|
||||
};
|
||||
|
||||
const scrollToBottom = () => {
|
||||
isProgrammaticScroll.value = true;
|
||||
let relevantMessages = [];
|
||||
|
||||
// label suggestions are not part of the messages list
|
||||
// so we need to handle them separately
|
||||
let labelSuggestionsEl =
|
||||
conversationPanel.value.querySelector('.label-suggestion');
|
||||
|
||||
// if there are unread messages, scroll to the first unread message
|
||||
if (unreadMessageCount.value > 0) {
|
||||
// capturing only the unread messages
|
||||
relevantMessages =
|
||||
conversationPanel.value.querySelectorAll('.message--unread');
|
||||
} else if (labelSuggestionsEl) {
|
||||
// when scrolling to the bottom, the label suggestions is below the last message
|
||||
// so we scroll there if there are no unread messages
|
||||
// Unread messages always take the highest priority
|
||||
relevantMessages = [labelSuggestionsEl];
|
||||
} else {
|
||||
// if there are no unread messages or label suggestion, scroll to the last message
|
||||
// capturing last message from the messages list
|
||||
relevantMessages = Array.from(
|
||||
conversationPanel.value.querySelectorAll('.message--read')
|
||||
).slice(-1);
|
||||
}
|
||||
|
||||
conversationPanel.value.scrollTop = calculateScrollTop(
|
||||
conversationPanel.value.scrollHeight,
|
||||
instance.proxy.$el.scrollHeight,
|
||||
relevantMessages
|
||||
);
|
||||
};
|
||||
|
||||
const fetchPreviousMessages = async (scrollTop = 0) => {
|
||||
setScrollParams();
|
||||
const shouldLoadMoreMessages =
|
||||
currentChat.value.dataFetched === true &&
|
||||
!listLoadingStatus.value &&
|
||||
!isLoadingPrevious.value;
|
||||
|
||||
if (scrollTop < 100 && !isLoadingPrevious.value && shouldLoadMoreMessages) {
|
||||
isLoadingPrevious.value = true;
|
||||
try {
|
||||
await store.dispatch('fetchPreviousMessages', {
|
||||
conversationId: currentChat.value.id,
|
||||
before: currentChat.value.messages[0].id,
|
||||
});
|
||||
const heightDifference =
|
||||
conversationPanel.value.scrollHeight - heightBeforeLoad.value;
|
||||
conversationPanel.value.scrollTop =
|
||||
scrollTopBeforeLoad.value + heightDifference;
|
||||
setScrollParams();
|
||||
} catch (error) {
|
||||
// Ignore Error
|
||||
} finally {
|
||||
isLoadingPrevious.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onScrollToMessage = ({ messageId = '' } = {}) => {
|
||||
nextTick(() => {
|
||||
const messageElement = document.getElementById('message' + messageId);
|
||||
if (messageElement) {
|
||||
isProgrammaticScroll.value = true;
|
||||
messageElement.scrollIntoView({ behavior: 'smooth' });
|
||||
fetchPreviousMessages();
|
||||
} else {
|
||||
scrollToBottom();
|
||||
}
|
||||
});
|
||||
makeMessagesRead();
|
||||
};
|
||||
|
||||
const handleScroll = e => {
|
||||
if (isProgrammaticScroll.value) {
|
||||
// Reset the flag
|
||||
isProgrammaticScroll.value = false;
|
||||
hasUserScrolled.value = false;
|
||||
} else {
|
||||
hasUserScrolled.value = true;
|
||||
}
|
||||
emitter.emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL);
|
||||
fetchPreviousMessages(e.target.scrollTop);
|
||||
};
|
||||
|
||||
const addScrollListener = () => {
|
||||
conversationPanel.value = instance.proxy.$el.querySelector(
|
||||
'.conversation-panel'
|
||||
);
|
||||
setScrollParams();
|
||||
conversationPanel.value.addEventListener('scroll', handleScroll);
|
||||
nextTick(() => scrollToBottom());
|
||||
isLoadingPrevious.value = false;
|
||||
};
|
||||
|
||||
const removeScrollListener = () => {
|
||||
conversationPanel.value.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
|
||||
const removeBusListeners = () => {
|
||||
emitter.off(BUS_EVENTS.SCROLL_TO_MESSAGE, onScrollToMessage);
|
||||
};
|
||||
|
||||
const fetchSuggestions = async () => {
|
||||
// start empty, this ensures that the label suggestions are not shown
|
||||
labelSuggestions.value = [];
|
||||
|
||||
if (isLabelSuggestionDismissed()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isEnterprise) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Early exit if conversation already has labels - no need to suggest more
|
||||
const existingLabels = currentChat.value?.labels || [];
|
||||
if (existingLabels.length > 0) return;
|
||||
|
||||
// method available in mixin, need to ensure that integrations are present
|
||||
await fetchIntegrationsIfRequired();
|
||||
|
||||
if (!isLabelSuggestionFeatureEnabled.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
labelSuggestions.value = await fetchLabelSuggestions({
|
||||
conversationId: currentChat.value.id,
|
||||
});
|
||||
|
||||
// once the labels are fetched, we need to scroll to bottom
|
||||
// but we need to wait for the DOM to be updated
|
||||
// so we use the nextTick method
|
||||
nextTick(() => {
|
||||
// this param is added to route, telling the UI to navigate to the message
|
||||
// it is triggered by the SCROLL_TO_MESSAGE method
|
||||
// see setActiveChat on ConversationView.vue for more info
|
||||
const { messageId } = route.query;
|
||||
|
||||
// only trigger the scroll to bottom if the user has not scrolled
|
||||
// and there's no active messageId that is selected in view
|
||||
if (!messageId && !hasUserScrolled.value) {
|
||||
scrollToBottom();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleMessageRetry = async message => {
|
||||
if (!message) return;
|
||||
const payload = useSnakeCase(message);
|
||||
await store.dispatch('sendMessageWithData', payload);
|
||||
};
|
||||
|
||||
watch(currentChat, (newChat, oldChat) => {
|
||||
if (newChat.id === oldChat.id) {
|
||||
return;
|
||||
}
|
||||
fetchAllAttachmentsFromCurrentChat();
|
||||
fetchSuggestions();
|
||||
messageSentSinceOpened.value = false;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on(BUS_EVENTS.SCROLL_TO_MESSAGE, onScrollToMessage);
|
||||
// when a message is sent we set the flag to true this hides the label suggestions,
|
||||
// until the chat is changed and the flag is reset in the watch for currentChat
|
||||
emitter.on(BUS_EVENTS.MESSAGE_SENT, () => {
|
||||
messageSentSinceOpened.value = true;
|
||||
});
|
||||
|
||||
addScrollListener();
|
||||
fetchAllAttachmentsFromCurrentChat();
|
||||
fetchSuggestions();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
removeBusListeners();
|
||||
removeScrollListener();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -463,7 +473,7 @@ export default {
|
||||
v-else-if="hasDuplicateInstagramInbox"
|
||||
color-scheme="alert"
|
||||
class="mx-2 mt-2 overflow-hidden rounded-lg"
|
||||
:banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
|
||||
:banner-message="t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
|
||||
/>
|
||||
<MessageList
|
||||
ref="conversationPanelRef"
|
||||
|
||||
@@ -91,7 +91,7 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex items-center gap-2 actions--container">
|
||||
<div class="relative flex items-center gap-1">
|
||||
<ResolveAction
|
||||
:conversation-id="currentChat.id"
|
||||
:status="currentChat.status"
|
||||
|
||||
@@ -1355,11 +1355,12 @@ export default {
|
||||
|
||||
.reply-box {
|
||||
transition: height 2s cubic-bezier(0.37, 0, 0.63, 1);
|
||||
box-shadow: 0 2px 4px 0 rgba(27, 28, 29, 0.04);
|
||||
|
||||
@apply relative mb-2 mx-2 border border-n-weak rounded-xl bg-n-solid-1;
|
||||
@apply relative mb-3 mx-3 border border-n-weak rounded-xl bg-n-solid-1;
|
||||
|
||||
&.is-private {
|
||||
@apply bg-n-solid-amber dark:border-n-amber-3/10 border-n-amber-12/5;
|
||||
@apply bg-n-amber-2 border-n-amber-5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user