-
-
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - {{ currentContact.name }} -
-
-
-
-
-
+
diff --git a/frontend/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/frontend/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 6b6e3d2b..fe6fa224 100644
--- a/frontend/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/frontend/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -25,9 +25,9 @@ import { getTypingUsersText } from '../../../helper/commons';
import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
import { LocalStorage } from 'shared/helpers/localStorage';
import {
- filterDuplicateSourceMessages,
- getReadMessages,
- getUnreadMessages,
+ filterDuplicateSourceMessages,
+ getReadMessages,
+ getUnreadMessages,
} from 'dashboard/helper/conversationHelper';
// constants
@@ -38,500 +38,529 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
import { INBOX_TYPES } from 'dashboard/helper/inbox';
export default {
- components: {
- MessageList,
- ReplyBox,
- Banner,
- ConversationLabelSuggestion,
- Spinner,
- ResizableEditorWrapper,
- },
- mixins: [inboxMixin],
- setup() {
- const conversationPanelRef = ref(null);
- const resizableEditorWrapperRef = ref(null);
- const messagesViewRef = useTemplateRef('messagesViewRef');
- const topBannerRef = useTemplateRef('topBannerRef');
- const { height: containerHeight } = useElementSize(messagesViewRef);
- const { height: topBannerHeight } = useElementSize(topBannerRef);
+ components: {
+ MessageList,
+ ReplyBox,
+ Banner,
+ ConversationLabelSuggestion,
+ Spinner,
+ ResizableEditorWrapper,
+ },
+ mixins: [inboxMixin],
+ setup() {
+ const conversationPanelRef = ref(null);
+ const resizableEditorWrapperRef = ref(null);
+ const messagesViewRef = useTemplateRef('messagesViewRef');
+ const topBannerRef = useTemplateRef('topBannerRef');
+ const { height: containerHeight } = useElementSize(messagesViewRef);
+ const { height: topBannerHeight } = useElementSize(topBannerRef);
- const {
- captainTasksEnabled,
- isLabelSuggestionFeatureEnabled,
- getLabelSuggestions,
- } = useLabelSuggestions();
+ const {
+ captainTasksEnabled,
+ isLabelSuggestionFeatureEnabled,
+ getLabelSuggestions,
+ } = useLabelSuggestions();
- provide('contextMenuElementTarget', conversationPanelRef);
+ provide('contextMenuElementTarget', conversationPanelRef);
- return {
- captainTasksEnabled,
- getLabelSuggestions,
- isLabelSuggestionFeatureEnabled,
- conversationPanelRef,
- resizableEditorWrapperRef,
- messagesViewRef,
- topBannerRef,
- containerHeight,
- topBannerHeight,
- };
- },
- data() {
- return {
- isLoadingPrevious: true,
- heightBeforeLoad: null,
- conversationPanel: null,
- hasUserScrolled: false,
- isProgrammaticScroll: false,
- messageSentSinceOpened: false,
- labelSuggestions: [],
- };
- },
+ return {
+ captainTasksEnabled,
+ getLabelSuggestions,
+ isLabelSuggestionFeatureEnabled,
+ conversationPanelRef,
+ resizableEditorWrapperRef,
+ messagesViewRef,
+ topBannerRef,
+ containerHeight,
+ topBannerHeight,
+ };
+ },
+ 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.captainTasksEnabled &&
- this.isLabelSuggestionFeatureEnabled &&
- !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);
- }
+ computed: {
+ ...mapGetters({
+ currentChat: 'getSelectedChat',
+ currentUserId: 'getCurrentUserID',
+ listLoadingStatus: 'getAllMessagesLoaded',
+ currentAccountId: 'getCurrentAccountId',
+ }),
+ isOpen() {
+ return this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
+ },
+ shouldShowLabelSuggestions() {
+ return (
+ this.isOpen &&
+ this.captainTasksEnabled &&
+ this.isLabelSuggestionFeatureEnabled &&
+ !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 '';
+ },
+ 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
- );
- },
+ 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.isATiktokChannel) {
- return REPLY_POLICY.TIKTOK;
- }
- 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.isATiktokChannel) {
- return this.$t('CONVERSATION.48_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;
+ 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.isATiktokChannel) {
+ return REPLY_POLICY.TIKTOK;
+ }
+ 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.isATiktokChannel) {
+ return this.$t('CONVERSATION.48_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 };
- },
- },
+ return { incoming, outgoing };
+ },
+ },
- watch: {
- currentChat(newChat, oldChat) {
- if (newChat.id === oldChat.id) {
- return;
- }
- this.fetchAllAttachmentsFromCurrentChat();
- this.fetchSuggestions();
- this.messageSentSinceOpened = false;
- this.resetReplyEditorHeight();
- },
- },
+ watch: {
+ currentChat(newChat, oldChat) {
+ if (newChat.id === oldChat.id) {
+ return;
+ }
+ this.fetchAllAttachmentsFromCurrentChat();
+ this.fetchSuggestions();
+ this.messageSentSinceOpened = false;
+ this.resetReplyEditorHeight();
+ },
+ },
- 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;
- });
- },
+ 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();
- },
+ mounted() {
+ this.addScrollListener();
+ this.fetchAllAttachmentsFromCurrentChat();
+ this.fetchSuggestions();
+ },
- unmounted() {
- this.removeBusListeners();
- this.removeScrollListener();
- },
+ unmounted() {
+ this.removeBusListeners();
+ this.removeScrollListener();
+ },
- methods: {
- async fetchSuggestions() {
- // start empty, this ensures that the label suggestions are not shown
- this.labelSuggestions = [];
+ methods: {
+ async fetchSuggestions() {
+ // start empty, this ensures that the label suggestions are not shown
+ this.labelSuggestions = [];
- if (this.isLabelSuggestionDismissed()) {
- return;
- }
+ if (this.isLabelSuggestionDismissed()) {
+ return;
+ }
- // Early exit if conversation already has labels - no need to suggest more
- const existingLabels = this.currentChat?.labels || [];
- if (existingLabels.length > 0) return;
+ // Early exit if conversation already has labels - no need to suggest more
+ const existingLabels = this.currentChat?.labels || [];
+ if (existingLabels.length > 0) return;
- if (!this.captainTasksEnabled || !this.isLabelSuggestionFeatureEnabled) {
- return;
- }
+ if (
+ !this.captainTasksEnabled ||
+ !this.isLabelSuggestionFeatureEnabled
+ ) {
+ return;
+ }
- this.labelSuggestions = await this.getLabelSuggestions();
+ this.labelSuggestions = await this.getLabelSuggestions();
- // 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;
+ // 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 = [];
+ // 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');
+ // 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);
- }
+ // 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;
- },
+ 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;
+ 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;
- }
- }
- },
+ 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);
- },
+ 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);
- },
- toggleReplyEditorSize() {
- this.resizableEditorWrapperRef?.toggleEditorExpand?.();
- },
- resetReplyEditorHeight() {
- this.resizableEditorWrapperRef?.resetEditorHeight?.();
- },
- },
+ makeMessagesRead() {
+ if (this.unreadMessageCount > 0) {
+ this.$store.dispatch('markMessagesRead', {
+ id: this.currentChat.id,
+ });
+ }
+ },
+ async handleMessageRetry(message) {
+ if (!message) return;
+ const payload = useSnakeCase(message);
+ await this.$store.dispatch('sendMessageWithData', payload);
+ },
+ toggleReplyEditorSize() {
+ this.resizableEditorWrapperRef?.toggleEditorExpand?.();
+ },
+ resetReplyEditorHeight() {
+ this.resizableEditorWrapperRef?.resetEditorHeight?.();
+ },
+ },
};
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ currentContact.name }} +
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- {{ unreadMessageLabel }}
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
- {{ typingUserNames }}
- 
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {{ unreadMessageLabel }}
+
+
+
+
+
+
diff --git a/frontend/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json b/frontend/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json
index 030353a8..6738c97f 100644
--- a/frontend/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json
+++ b/frontend/app/javascript/dashboard/i18n/locale/zh_CN/inboxMgmt.json
@@ -621,10 +621,10 @@
"DISABLED": "已禁用"
},
"LOCK_TO_SINGLE_CONVERSATION": {
- "ENABLED": "Reopen same conversation",
- "DISABLED": "Create new conversations",
- "ENABLED_DESCRIPTION": "When a contact messages again, the previous conversation will be reopened.",
- "DISABLED_DESCRIPTION": "A new conversation will be created each time after the previous one is resolved."
+ "ENABLED": "重开同一会话",
+ "DISABLED": "创建新会话",
+ "ENABLED_DESCRIPTION": "当联系人再次发送消息时，将重新打开上一次会话。",
+ "DISABLED_DESCRIPTION": "上一次会话解决后，每次收到新消息都会创建一个新会话。"
},
"ENABLE_HMAC": {
"LABEL": "启用"
@@ -669,8 +669,8 @@
"DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections."
}
},
- "CHANNEL_PREFERENCES": "Channel Preferences",
- "WIDGET_FEATURES": "Widget features",
+ "CHANNEL_PREFERENCES": "频道偏好设置",
+ "WIDGET_FEATURES": "组件功能",
"ACCOUNT_HEALTH": {
"TITLE": "Manage your WhatsApp account",
"DESCRIPTION": "Review your WhatsApp account status, messaging limits, and quality. Update settings or resolve issues if needed",
@@ -776,9 +776,9 @@
"SENDER_NAME_SECTION_TEXT": "启用/禁用在电子邮件中显示代理名称，如果禁用，将显示业务名称",
"ENABLE_CONTINUITY_VIA_EMAIL": "通过电子邮件启用对话连续性",
"ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "如果有联系人的电子邮件地址，对话将会继续在电子邮件中进行。",
- "ENABLE_CONTINUITY_VIA_EMAIL_DISABLED_TEXT": "This feature is available on a paid plan. Upgrade to enable conversation continuity via email.",
- "LOCK_TO_SINGLE_CONVERSATION": "Conversation Routing",
- "LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT": "Configure conversation creation for existing contacts",
+ "ENABLE_CONTINUITY_VIA_EMAIL_DISABLED_TEXT": "此功能在付费计划中可用。升级后即可通过电子邮件启用对话连续性。",
+ "LOCK_TO_SINGLE_CONVERSATION": "会话路由",
+ "LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT": "配置已有联系人的会话创建方式",
"INBOX_UPDATE_TITLE": "收件箱设置",
"INBOX_UPDATE_SUB_TEXT": "更新收件箱设置",
"AUTO_ASSIGNMENT_SUB_TEXT": "启用或禁用添加到此收件箱的代理人自动分配新的会话。",
diff --git a/frontend/app/javascript/dashboard/store/modules/conversations/actions/messageReadActions.js b/frontend/app/javascript/dashboard/store/modules/conversations/actions/messageReadActions.js
index f6040a51..3a3b1488 100644
--- a/frontend/app/javascript/dashboard/store/modules/conversations/actions/messageReadActions.js
+++ b/frontend/app/javascript/dashboard/store/modules/conversations/actions/messageReadActions.js
@@ -3,33 +3,34 @@ import ConversationApi from '../../../../api/inbox/conversation';
import mutationTypes from '../../../mutation-types';
export default {
- markMessagesRead: async ({ commit }, data) => {
- try {
- const {
- data: { id, agent_last_seen_at: lastSeen },
- } = await ConversationApi.markMessageRead(data);
- setTimeout(
- () =>
- commit(mutationTypes.UPDATE_MESSAGE_UNREAD_COUNT, { id, lastSeen }),
- 4000
- );
- } catch (error) {
- // Handle error
- }
- },
+ markMessagesRead: async ({ commit }, data) => {
+ try {
+ const { data: conversation } =
+ await ConversationApi.markMessageRead(data);
+ commit(mutationTypes.UPDATE_MESSAGE_UNREAD_COUNT, {
+ id: conversation.id,
+ lastSeen: conversation.agent_last_seen_at,
+ });
+ } catch (error) {
+ // Handle error
+ }
+ },
- markMessagesUnread: async ({ commit }, { id }) => {
- try {
- const {
- data: { agent_last_seen_at: lastSeen, unread_count: unreadCount },
- } = await ConversationApi.markMessagesUnread({ id });
- commit(mutationTypes.UPDATE_MESSAGE_UNREAD_COUNT, {
- id,
- lastSeen,
- unreadCount,
- });
- } catch (error) {
- throwErrorMessage(error);
- }
- },
+ markMessagesUnread: async ({ commit }, { id }) => {
+ try {
+ const {
+ data: {
+ agent_last_seen_at: lastSeen,
+ unread_count: unreadCount,
+ },
+ } = await ConversationApi.markMessagesUnread({ id });
+ commit(mutationTypes.UPDATE_MESSAGE_UNREAD_COUNT, {
+ id,
+ lastSeen,
+ unreadCount,
+ });
+ } catch (error) {
+ throwErrorMessage(error);
+ }
+ },
};
diff --git a/frontend/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js b/frontend/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
index 132e83b6..8a4f3d56 100644
--- a/frontend/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
+++ b/frontend/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
@@ -1,17 +1,17 @@
import axios from 'axios';
import actions, {
- hasMessageFailedWithExternalError,
+ hasMessageFailedWithExternalError,
} from '../../conversations/actions';
import types from '../../../mutation-types';
const dataToSend = {
- payload: [
- {
- attribute_key: 'status',
- filter_operator: 'equal_to',
- values: ['open'],
- query_operator: null,
- },
- ],
+ payload: [
+ {
+ attribute_key: 'status',
+ filter_operator: 'equal_to',
+ values: ['open'],
+ query_operator: null,
+ },
+ ],
};
import { dataReceived } from './testConversationResponse';
@@ -21,898 +21,935 @@ global.axios = axios;
vi.mock('axios');
describe('#hasMessageFailedWithExternalError', () => {
- it('returns false if message is sent', () => {
- const pendingMessage = {
- status: 'sent',
- content_attributes: {},
- };
- expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(false);
- });
- it('returns false if status is not failed', () => {
- const pendingMessage = {
- status: 'progress',
- content_attributes: {},
- };
- expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(false);
- });
+ it('returns false if message is sent', () => {
+ const pendingMessage = {
+ status: 'sent',
+ content_attributes: {},
+ };
+ expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(false);
+ });
+ it('returns false if status is not failed', () => {
+ const pendingMessage = {
+ status: 'progress',
+ content_attributes: {},
+ };
+ expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(false);
+ });
- it('returns false if status is failed but no external error', () => {
- const pendingMessage = {
- status: 'failed',
- content_attributes: {},
- };
- expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(false);
- });
+ it('returns false if status is failed but no external error', () => {
+ const pendingMessage = {
+ status: 'failed',
+ content_attributes: {},
+ };
+ expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(false);
+ });
- it('returns true if status is failed and has external error', () => {
- const pendingMessage = {
- status: 'failed',
- content_attributes: {
- external_error: 'error',
- },
- };
- expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(true);
- });
+ it('returns true if status is failed and has external error', () => {
+ const pendingMessage = {
+ status: 'failed',
+ content_attributes: {
+ external_error: 'error',
+ },
+ };
+ expect(hasMessageFailedWithExternalError(pendingMessage)).toBe(true);
+ });
});
describe('#actions', () => {
- describe('#getConversation', () => {
- it('sends correct actions if API is success', async () => {
- axios.get.mockResolvedValue({
- data: { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
- });
- await actions.getConversation({ commit }, 1);
- expect(commit.mock.calls).toEqual([
- [
- types.UPDATE_CONVERSATION,
- { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
- ],
- ['contacts/SET_CONTACT_ITEM', { id: 1, name: 'Contact 1' }],
- ]);
- });
- it('sends correct actions if API is error', async () => {
- axios.get.mockRejectedValue({ message: 'Incorrect header' });
- await actions.getConversation({ commit });
- expect(commit.mock.calls).toEqual([]);
- });
- });
- describe('#muteConversation', () => {
- it('sends correct actions if API is success', async () => {
- axios.get.mockResolvedValue(null);
- await actions.muteConversation({ commit }, 1);
- expect(commit.mock.calls).toEqual([[types.MUTE_CONVERSATION]]);
- });
- it('sends correct actions if API is error', async () => {
- axios.get.mockRejectedValue({ message: 'Incorrect header' });
- await actions.getConversation({ commit });
- expect(commit.mock.calls).toEqual([]);
- });
- });
+ describe('#getConversation', () => {
+ it('sends correct actions if API is success', async () => {
+ axios.get.mockResolvedValue({
+ data: { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+ });
+ await actions.getConversation({ commit }, 1);
+ expect(commit.mock.calls).toEqual([
+ [
+ types.UPDATE_CONVERSATION,
+ { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+ ],
+ ['contacts/SET_CONTACT_ITEM', { id: 1, name: 'Contact 1' }],
+ ]);
+ });
+ it('sends correct actions if API is error', async () => {
+ axios.get.mockRejectedValue({ message: 'Incorrect header' });
+ await actions.getConversation({ commit });
+ expect(commit.mock.calls).toEqual([]);
+ });
+ });
+ describe('#muteConversation', () => {
+ it('sends correct actions if API is success', async () => {
+ axios.get.mockResolvedValue(null);
+ await actions.muteConversation({ commit }, 1);
+ expect(commit.mock.calls).toEqual([[types.MUTE_CONVERSATION]]);
+ });
+ it('sends correct actions if API is error', async () => {
+ axios.get.mockRejectedValue({ message: 'Incorrect header' });
+ await actions.getConversation({ commit });
+ expect(commit.mock.calls).toEqual([]);
+ });
+ });
- describe('#updateConversation', () => {
- it('sends setContact action and update_conversation mutation', () => {
- const conversation = {
- id: 1,
- messages: [],
- meta: { sender: { id: 1, name: 'john-doe' } },
- labels: ['support'],
- };
- actions.updateConversation(
- { commit, rootState: { route: { name: 'home' } }, dispatch },
- conversation
- );
- expect(commit.mock.calls).toEqual([
- [types.UPDATE_CONVERSATION, conversation],
- ]);
- expect(dispatch.mock.calls).toEqual([
- [
- 'conversationLabels/setConversationLabel',
- { id: 1, data: ['support'] },
- ],
- [
- 'contacts/setContact',
- {
- id: 1,
- name: 'john-doe',
- },
- ],
- ]);
- });
- });
+ describe('#updateConversation', () => {
+ it('sends setContact action and update_conversation mutation', () => {
+ const conversation = {
+ id: 1,
+ messages: [],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ labels: ['support'],
+ };
+ actions.updateConversation(
+ { commit, rootState: { route: { name: 'home' } }, dispatch },
+ conversation
+ );
+ expect(commit.mock.calls).toEqual([
+ [types.UPDATE_CONVERSATION, conversation],
+ ]);
+ expect(dispatch.mock.calls).toEqual([
+ [
+ 'conversationLabels/setConversationLabel',
+ { id: 1, data: ['support'] },
+ ],
+ [
+ 'contacts/setContact',
+ {
+ id: 1,
+ name: 'john-doe',
+ },
+ ],
+ ]);
+ });
+ });
- describe('#addConversation', () => {
- it('doesnot send mutation if conversation is from a different inbox', () => {
- const conversation = {
- id: 1,
- messages: [],
- meta: { sender: { id: 1, name: 'john-doe' } },
- inbox_id: 2,
- };
- actions.addConversation(
- {
- commit,
- rootState: { route: { name: 'home' } },
- dispatch,
- state: { currentInbox: 1, appliedFilters: [] },
- },
- conversation
- );
- expect(commit.mock.calls).toEqual([]);
- expect(dispatch.mock.calls).toEqual([]);
- });
+ describe('#addConversation', () => {
+ it('doesnot send mutation if conversation is from a different inbox', () => {
+ const conversation = {
+ id: 1,
+ messages: [],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ inbox_id: 2,
+ };
+ actions.addConversation(
+ {
+ commit,
+ rootState: { route: { name: 'home' } },
+ dispatch,
+ state: { currentInbox: 1, appliedFilters: [] },
+ },
+ conversation
+ );
+ expect(commit.mock.calls).toEqual([]);
+ expect(dispatch.mock.calls).toEqual([]);
+ });
- it('doesnot send mutation if conversation filters are applied', () => {
- const conversation = {
- id: 1,
- messages: [],
- meta: { sender: { id: 1, name: 'john-doe' } },
- inbox_id: 1,
- };
- actions.addConversation(
- {
- commit,
- rootState: { route: { name: 'home' } },
- dispatch,
- state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
- },
- conversation
- );
- expect(commit.mock.calls).toEqual([]);
- expect(dispatch.mock.calls).toEqual([]);
- });
+ it('doesnot send mutation if conversation filters are applied', () => {
+ const conversation = {
+ id: 1,
+ messages: [],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ inbox_id: 1,
+ };
+ actions.addConversation(
+ {
+ commit,
+ rootState: { route: { name: 'home' } },
+ dispatch,
+ state: {
+ currentInbox: 1,
+ appliedFilters: [{ id: 'random-filter' }],
+ },
+ },
+ conversation
+ );
+ expect(commit.mock.calls).toEqual([]);
+ expect(dispatch.mock.calls).toEqual([]);
+ });
- it('doesnot send mutation if the view is conversation mentions', () => {
- const conversation = {
- id: 1,
- messages: [],
- meta: { sender: { id: 1, name: 'john-doe' } },
- inbox_id: 1,
- };
- actions.addConversation(
- {
- commit,
- rootState: { route: { name: 'conversation_mentions' } },
- dispatch,
- state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
- },
- conversation
- );
- expect(commit.mock.calls).toEqual([]);
- expect(dispatch.mock.calls).toEqual([]);
- });
+ it('doesnot send mutation if the view is conversation mentions', () => {
+ const conversation = {
+ id: 1,
+ messages: [],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ inbox_id: 1,
+ };
+ actions.addConversation(
+ {
+ commit,
+ rootState: { route: { name: 'conversation_mentions' } },
+ dispatch,
+ state: {
+ currentInbox: 1,
+ appliedFilters: [{ id: 'random-filter' }],
+ },
+ },
+ conversation
+ );
+ expect(commit.mock.calls).toEqual([]);
+ expect(dispatch.mock.calls).toEqual([]);
+ });
- it('doesnot send mutation if the view is conversation folders', () => {
- const conversation = {
- id: 1,
- messages: [],
- meta: { sender: { id: 1, name: 'john-doe' } },
- inbox_id: 1,
- };
- actions.addConversation(
- {
- commit,
- rootState: { route: { name: 'folder_conversations' } },
- dispatch,
- state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
- },
- conversation
- );
- expect(commit.mock.calls).toEqual([]);
- expect(dispatch.mock.calls).toEqual([]);
- });
+ it('doesnot send mutation if the view is conversation folders', () => {
+ const conversation = {
+ id: 1,
+ messages: [],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ inbox_id: 1,
+ };
+ actions.addConversation(
+ {
+ commit,
+ rootState: { route: { name: 'folder_conversations' } },
+ dispatch,
+ state: {
+ currentInbox: 1,
+ appliedFilters: [{ id: 'random-filter' }],
+ },
+ },
+ conversation
+ );
+ expect(commit.mock.calls).toEqual([]);
+ expect(dispatch.mock.calls).toEqual([]);
+ });
- it('sends correct mutations', () => {
- const conversation = {
- id: 1,
- messages: [],
- meta: { sender: { id: 1, name: 'john-doe' } },
- inbox_id: 1,
- };
- actions.addConversation(
- {
- commit,
- rootState: { route: { name: 'home' } },
- dispatch,
- state: { currentInbox: 1, appliedFilters: [] },
- },
- conversation
- );
- expect(commit.mock.calls).toEqual([
- [types.ADD_CONVERSATION, conversation],
- ]);
- expect(dispatch.mock.calls).toEqual([
- [
- 'contacts/setContact',
- {
- id: 1,
- name: 'john-doe',
- },
- ],
- ]);
- });
+ it('sends correct mutations', () => {
+ const conversation = {
+ id: 1,
+ messages: [],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ inbox_id: 1,
+ };
+ actions.addConversation(
+ {
+ commit,
+ rootState: { route: { name: 'home' } },
+ dispatch,
+ state: { currentInbox: 1, appliedFilters: [] },
+ },
+ conversation
+ );
+ expect(commit.mock.calls).toEqual([
+ [types.ADD_CONVERSATION, conversation],
+ ]);
+ expect(dispatch.mock.calls).toEqual([
+ [
+ 'contacts/setContact',
+ {
+ id: 1,
+ name: 'john-doe',
+ },
+ ],
+ ]);
+ });
- it('sends correct mutations if inbox filter is not available', () => {
- const conversation = {
- id: 1,
- messages: [],
- meta: { sender: { id: 1, name: 'john-doe' } },
- inbox_id: 1,
- };
- actions.addConversation(
- {
- commit,
- rootState: { route: { name: 'home' } },
- dispatch,
- state: { appliedFilters: [] },
- },
- conversation
- );
- expect(commit.mock.calls).toEqual([
- [types.ADD_CONVERSATION, conversation],
- ]);
- expect(dispatch.mock.calls).toEqual([
- [
- 'contacts/setContact',
- {
- id: 1,
- name: 'john-doe',
- },
- ],
- ]);
- });
- });
+ it('sends correct mutations if inbox filter is not available', () => {
+ const conversation = {
+ id: 1,
+ messages: [],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ inbox_id: 1,
+ };
+ actions.addConversation(
+ {
+ commit,
+ rootState: { route: { name: 'home' } },
+ dispatch,
+ state: { appliedFilters: [] },
+ },
+ conversation
+ );
+ expect(commit.mock.calls).toEqual([
+ [types.ADD_CONVERSATION, conversation],
+ ]);
+ expect(dispatch.mock.calls).toEqual([
+ [
+ 'contacts/setContact',
+ {
+ id: 1,
+ name: 'john-doe',
+ },
+ ],
+ ]);
+ });
+ });
- describe('#addMessage', () => {
- it('sends correct mutations if message is incoming', () => {
- const message = {
- id: 1,
- message_type: 0,
- conversation_id: 1,
- };
- actions.addMessage({ commit }, message);
- expect(commit.mock.calls).toEqual([
- [types.ADD_MESSAGE, message],
- [
- types.SET_CONVERSATION_CAN_REPLY,
- { conversationId: 1, canReply: true },
- ],
- [types.ADD_CONVERSATION_ATTACHMENTS, message],
- ]);
- });
- it('sends correct mutations if message is not an incoming message', () => {
- const message = {
- id: 1,
- message_type: 1,
- conversation_id: 1,
- };
- actions.addMessage({ commit }, message);
- expect(commit.mock.calls).toEqual([[types.ADD_MESSAGE, message]]);
- });
- });
+ describe('#addMessage', () => {
+ it('sends correct mutations if message is incoming', () => {
+ const message = {
+ id: 1,
+ message_type: 0,
+ conversation_id: 1,
+ };
+ actions.addMessage({ commit }, message);
+ expect(commit.mock.calls).toEqual([
+ [types.ADD_MESSAGE, message],
+ [
+ types.SET_CONVERSATION_CAN_REPLY,
+ { conversationId: 1, canReply: true },
+ ],
+ [types.ADD_CONVERSATION_ATTACHMENTS, message],
+ ]);
+ });
+ it('sends correct mutations if message is not an incoming message', () => {
+ const message = {
+ id: 1,
+ message_type: 1,
+ conversation_id: 1,
+ };
+ actions.addMessage({ commit }, message);
+ expect(commit.mock.calls).toEqual([[types.ADD_MESSAGE, message]]);
+ });
+ });
- describe('#sendMessageWithData', () => {
- it('keeps the status returned by the server', async () => {
- const localCommit = vi.fn();
- const pendingMessage = {
- id: 'echo-1',
- conversation_id: 7,
- message: 'hello',
- status: 'progress',
- content_attributes: {},
- };
- const responseMessage = {
- id: 42,
- conversation_id: 7,
- content: 'hello',
- status: 'progress',
- };
- axios.mockResolvedValue({ data: responseMessage });
+ describe('#sendMessageWithData', () => {
+ it('keeps the status returned by the server', async () => {
+ const localCommit = vi.fn();
+ const pendingMessage = {
+ id: 'echo-1',
+ conversation_id: 7,
+ message: 'hello',
+ status: 'progress',
+ content_attributes: {},
+ };
+ const responseMessage = {
+ id: 42,
+ conversation_id: 7,
+ content: 'hello',
+ status: 'progress',
+ };
+ axios.mockResolvedValue({ data: responseMessage });
- await actions.sendMessageWithData({ commit: localCommit }, pendingMessage);
+ await actions.sendMessageWithData(
+ { commit: localCommit },
+ pendingMessage
+ );
- expect(localCommit).toHaveBeenNthCalledWith(
- 2,
- types.ADD_MESSAGE,
- responseMessage
- );
- expect(localCommit).toHaveBeenNthCalledWith(
- 3,
- types.ADD_CONVERSATION_ATTACHMENTS,
- responseMessage
- );
- });
- });
+ expect(localCommit).toHaveBeenNthCalledWith(
+ 2,
+ types.ADD_MESSAGE,
+ responseMessage
+ );
+ expect(localCommit).toHaveBeenNthCalledWith(
+ 3,
+ types.ADD_CONVERSATION_ATTACHMENTS,
+ responseMessage
+ );
+ });
+ });
- describe('#markMessagesRead', () => {
- beforeEach(() => {
- vi.useFakeTimers();
- });
+ describe('#markMessagesRead', () => {
+ it('sends correct mutations if api is successful', async () => {
+ const lastSeen = new Date().getTime() / 1000;
+ axios.post.mockResolvedValue({
+ data: { id: 1, agent_last_seen_at: lastSeen },
+ });
+ await actions.markMessagesRead({ commit }, { id: 1 });
+ expect(commit).toHaveBeenCalledTimes(1);
+ expect(commit.mock.calls).toEqual([
+ [types.UPDATE_MESSAGE_UNREAD_COUNT, { id: 1, lastSeen }],
+ ]);
+ });
+ it('sends correct mutations if api is unsuccessful', async () => {
+ axios.post.mockRejectedValue({ message: 'Incorrect header' });
+ await actions.markMessagesRead({ commit }, { id: 1 });
+ expect(commit.mock.calls).toEqual([]);
+ });
+ });
- it('sends correct mutations if api is successful', async () => {
- const lastSeen = new Date().getTime() / 1000;
- axios.post.mockResolvedValue({
- data: { id: 1, agent_last_seen_at: lastSeen },
- });
- await actions.markMessagesRead({ commit }, { id: 1 });
- vi.runAllTimers();
- expect(commit).toHaveBeenCalledTimes(1);
- expect(commit.mock.calls).toEqual([
- [types.UPDATE_MESSAGE_UNREAD_COUNT, { id: 1, lastSeen }],
- ]);
- });
- it('sends correct mutations if api is unsuccessful', async () => {
- axios.post.mockRejectedValue({ message: 'Incorrect header' });
- await actions.markMessagesRead({ commit }, { id: 1 });
- expect(commit.mock.calls).toEqual([]);
- });
- });
+ describe('#markMessagesUnread', () => {
+ it('sends correct mutations if API is successful', async () => {
+ const lastSeen = new Date().getTime() / 1000;
+ axios.post.mockResolvedValue({
+ data: { id: 1, agent_last_seen_at: lastSeen, unread_count: 1 },
+ });
+ await actions.markMessagesUnread({ commit }, { id: 1 });
+ expect(commit).toHaveBeenCalledTimes(1);
+ expect(commit.mock.calls).toEqual([
+ [
+ types.UPDATE_MESSAGE_UNREAD_COUNT,
+ { id: 1, lastSeen, unreadCount: 1 },
+ ],
+ ]);
+ });
+ it('sends correct mutations if API is unsuccessful', async () => {
+ axios.post.mockRejectedValue({ message: 'Incorrect header' });
+ await expect(
+ actions.markMessagesUnread({ commit }, { id: 1 })
+ ).rejects.toThrow(Error);
+ });
+ });
- describe('#markMessagesUnread', () => {
- it('sends correct mutations if API is successful', async () => {
- const lastSeen = new Date().getTime() / 1000;
- axios.post.mockResolvedValue({
- data: { id: 1, agent_last_seen_at: lastSeen, unread_count: 1 },
- });
- await actions.markMessagesUnread({ commit }, { id: 1 });
- vi.runAllTimers();
- expect(commit).toHaveBeenCalledTimes(1);
- expect(commit.mock.calls).toEqual([
- [
- types.UPDATE_MESSAGE_UNREAD_COUNT,
- { id: 1, lastSeen, unreadCount: 1 },
- ],
- ]);
- });
- it('sends correct mutations if API is unsuccessful', async () => {
- axios.post.mockRejectedValue({ message: 'Incorrect header' });
- await expect(
- actions.markMessagesUnread({ commit }, { id: 1 })
- ).rejects.toThrow(Error);
- });
- });
+ describe('#sendEmailTranscript', () => {
+ it('sends correct mutations if api is successful', async () => {
+ axios.post.mockResolvedValue({});
+ await actions.sendEmailTranscript(
+ { commit },
+ { conversationId: 1, email: 'testemail@example.com' }
+ );
+ expect(commit).toHaveBeenCalledTimes(0);
+ expect(commit.mock.calls).toEqual([]);
+ });
+ });
- describe('#sendEmailTranscript', () => {
- it('sends correct mutations if api is successful', async () => {
- axios.post.mockResolvedValue({});
- await actions.sendEmailTranscript(
- { commit },
- { conversationId: 1, email: 'testemail@example.com' }
- );
- expect(commit).toHaveBeenCalledTimes(0);
- expect(commit.mock.calls).toEqual([]);
- });
- });
+ describe('#assignAgent', () => {
+ it('sends correct mutations if assignment is successful', async () => {
+ axios.post.mockResolvedValue({
+ data: { id: 1, name: 'User' },
+ });
+ await actions.assignAgent(
+ { dispatch },
+ { conversationId: 1, agentId: 1 }
+ );
+ expect(dispatch).toHaveBeenCalledWith('setCurrentChatAssignee', {
+ conversationId: 1,
+ assignee: { id: 1, name: 'User' },
+ });
+ });
+ });
- describe('#assignAgent', () => {
- it('sends correct mutations if assignment is successful', async () => {
- axios.post.mockResolvedValue({
- data: { id: 1, name: 'User' },
- });
- await actions.assignAgent(
- { dispatch },
- { conversationId: 1, agentId: 1 }
- );
- expect(dispatch).toHaveBeenCalledWith('setCurrentChatAssignee', {
- conversationId: 1,
- assignee: { id: 1, name: 'User' },
- });
- });
- });
+ describe('#setCurrentChatAssignee', () => {
+ it('sends correct mutations if assignment is successful', async () => {
+ const payload = {
+ conversationId: 1,
+ assignee: { id: 1, name: 'User' },
+ };
+ await actions.setCurrentChatAssignee({ commit }, payload);
+ expect(commit).toHaveBeenCalledTimes(1);
+ expect(commit.mock.calls).toEqual([['ASSIGN_AGENT', payload]]);
+ });
+ });
- describe('#setCurrentChatAssignee', () => {
- it('sends correct mutations if assignment is successful', async () => {
- const payload = {
- conversationId: 1,
- assignee: { id: 1, name: 'User' },
- };
- await actions.setCurrentChatAssignee({ commit }, payload);
- expect(commit).toHaveBeenCalledTimes(1);
- expect(commit.mock.calls).toEqual([['ASSIGN_AGENT', payload]]);
- });
- });
+ describe('#toggleStatus', () => {
+ it('sends correct mutations if toggle status is successful', async () => {
+ axios.post.mockResolvedValue({
+ data: {
+ payload: {
+ conversation_id: 1,
+ current_status: 'snoozed',
+ snoozed_until: null,
+ },
+ },
+ });
+ await actions.toggleStatus(
+ { commit },
+ { conversationId: 1, status: 'snoozed' }
+ );
+ expect(commit).toHaveBeenCalledTimes(1);
+ expect(commit.mock.calls).toEqual([
+ [
+ 'CHANGE_CONVERSATION_STATUS',
+ {
+ conversationId: 1,
+ status: 'snoozed',
+ snoozedUntil: null,
+ },
+ ],
+ ]);
+ });
+ });
- describe('#toggleStatus', () => {
- it('sends correct mutations if toggle status is successful', async () => {
- axios.post.mockResolvedValue({
- data: {
- payload: {
- conversation_id: 1,
- current_status: 'snoozed',
- snoozed_until: null,
- },
- },
- });
- await actions.toggleStatus(
- { commit },
- { conversationId: 1, status: 'snoozed' }
- );
- expect(commit).toHaveBeenCalledTimes(1);
- expect(commit.mock.calls).toEqual([
- [
- 'CHANGE_CONVERSATION_STATUS',
- { conversationId: 1, status: 'snoozed', snoozedUntil: null },
- ],
- ]);
- });
- });
+ describe('#assignTeam', () => {
+ it('sends correct mutations if assignment is successful', async () => {
+ axios.post.mockResolvedValue({
+ data: { id: 1, name: 'Team' },
+ });
+ await actions.assignTeam(
+ { commit },
+ { conversationId: 1, teamId: 1 }
+ );
+ expect(commit).toHaveBeenCalledTimes(0);
+ expect(commit.mock.calls).toEqual([]);
+ });
+ });
- describe('#assignTeam', () => {
- it('sends correct mutations if assignment is successful', async () => {
- axios.post.mockResolvedValue({
- data: { id: 1, name: 'Team' },
- });
- await actions.assignTeam({ commit }, { conversationId: 1, teamId: 1 });
- expect(commit).toHaveBeenCalledTimes(0);
- expect(commit.mock.calls).toEqual([]);
- });
- });
+ describe('#setCurrentChatTeam', () => {
+ it('sends correct mutations if assignment is successful', async () => {
+ axios.post.mockResolvedValue({
+ data: { id: 1, name: 'Team' },
+ });
+ await actions.setCurrentChatTeam(
+ { commit },
+ { team: { id: 1, name: 'Team' }, conversationId: 1 }
+ );
+ expect(commit).toHaveBeenCalledTimes(1);
+ expect(commit.mock.calls).toEqual([
+ [
+ 'ASSIGN_TEAM',
+ { team: { id: 1, name: 'Team' }, conversationId: 1 },
+ ],
+ ]);
+ });
+ });
- describe('#setCurrentChatTeam', () => {
- it('sends correct mutations if assignment is successful', async () => {
- axios.post.mockResolvedValue({
- data: { id: 1, name: 'Team' },
- });
- await actions.setCurrentChatTeam(
- { commit },
- { team: { id: 1, name: 'Team' }, conversationId: 1 }
- );
- expect(commit).toHaveBeenCalledTimes(1);
- expect(commit.mock.calls).toEqual([
- ['ASSIGN_TEAM', { team: { id: 1, name: 'Team' }, conversationId: 1 }],
- ]);
- });
- });
+ describe('#fetchFilteredConversations', () => {
+ it('fetches filtered conversations and clears the loading state', async () => {
+ const localCommit = vi.fn();
+ const localDispatch = vi.fn();
+ axios.post.mockResolvedValue({
+ data: dataReceived,
+ });
+ await actions.fetchFilteredConversations(
+ { commit: localCommit, dispatch: localDispatch },
+ dataToSend
+ );
+ expect(localCommit.mock.calls).toEqual([
+ [types.CLEAR_LIST_ERROR_STATUS],
+ [types.SET_LIST_LOADING_STATUS],
+ [types.SET_ALL_CONVERSATION, dataReceived.payload],
+ [
+ `contacts/${types.SET_CONTACTS}`,
+ dataReceived.payload.map(
+ conversation => conversation.meta.sender
+ ),
+ ],
+ [types.CLEAR_LIST_ERROR_STATUS],
+ [types.CLEAR_LIST_LOADING_STATUS],
+ ]);
+ expect(localDispatch).toHaveBeenCalledWith(
+ 'conversationStats/set',
+ dataReceived.meta
+ );
+ });
- describe('#fetchFilteredConversations', () => {
- it('fetches filtered conversations and clears the loading state', async () => {
- const localCommit = vi.fn();
- const localDispatch = vi.fn();
- axios.post.mockResolvedValue({
- data: dataReceived,
- });
- await actions.fetchFilteredConversations(
- { commit: localCommit, dispatch: localDispatch },
- dataToSend
- );
- expect(localCommit.mock.calls).toEqual([
- [types.CLEAR_LIST_ERROR_STATUS],
- [types.SET_LIST_LOADING_STATUS],
- [types.SET_ALL_CONVERSATION, dataReceived.payload],
- [
- `contacts/${types.SET_CONTACTS}`,
- dataReceived.payload.map(conversation => conversation.meta.sender),
- ],
- [types.CLEAR_LIST_ERROR_STATUS],
- [types.CLEAR_LIST_LOADING_STATUS],
- ]);
- expect(localDispatch).toHaveBeenCalledWith(
- 'conversationStats/set',
- dataReceived.meta
- );
- });
+ it('clears the loading state when the API request fails', async () => {
+ const localCommit = vi.fn();
+ axios.post.mockRejectedValue(new Error('Request failed'));
- it('clears the loading state when the API request fails', async () => {
- const localCommit = vi.fn();
- axios.post.mockRejectedValue(new Error('Request failed'));
+ await actions.fetchFilteredConversations(
+ { commit: localCommit, dispatch: vi.fn() },
+ dataToSend
+ );
- await actions.fetchFilteredConversations(
- { commit: localCommit, dispatch: vi.fn() },
- dataToSend
- );
+ expect(localCommit.mock.calls).toEqual([
+ [types.CLEAR_LIST_ERROR_STATUS],
+ [types.SET_LIST_LOADING_STATUS],
+ [types.SET_LIST_ERROR_STATUS],
+ [types.CLEAR_LIST_LOADING_STATUS],
+ ]);
+ });
+ });
- expect(localCommit.mock.calls).toEqual([
- [types.CLEAR_LIST_ERROR_STATUS],
- [types.SET_LIST_LOADING_STATUS],
- [types.SET_LIST_ERROR_STATUS],
- [types.CLEAR_LIST_LOADING_STATUS],
- ]);
- });
- });
+ describe('#fetchAllConversations', () => {
+ it('fetches conversations and clears the loading state', async () => {
+ const localCommit = vi.fn();
+ const localDispatch = vi.fn();
+ const filters = {
+ inboxId: 4,
+ status: 'open',
+ assigneeType: 'all',
+ page: 1,
+ };
+ axios.get.mockResolvedValue({ data: { data: dataReceived } });
- describe('#fetchAllConversations', () => {
- it('fetches conversations and clears the loading state', async () => {
- const localCommit = vi.fn();
- const localDispatch = vi.fn();
- const filters = {
- inboxId: 4,
- status: 'open',
- assigneeType: 'all',
- page: 1,
- };
- axios.get.mockResolvedValue({ data: { data: dataReceived } });
+ await actions.fetchAllConversations({
+ commit: localCommit,
+ dispatch: localDispatch,
+ state: { conversationFilters: filters },
+ });
- await actions.fetchAllConversations({
- commit: localCommit,
- dispatch: localDispatch,
- state: { conversationFilters: filters },
- });
+ expect(localCommit.mock.calls).toEqual([
+ [types.CLEAR_LIST_ERROR_STATUS],
+ [types.SET_LIST_LOADING_STATUS],
+ [types.SET_ALL_CONVERSATION, dataReceived.payload],
+ [
+ `contacts/${types.SET_CONTACTS}`,
+ dataReceived.payload.map(
+ conversation => conversation.meta.sender
+ ),
+ ],
+ [types.CLEAR_LIST_ERROR_STATUS],
+ [types.CLEAR_LIST_LOADING_STATUS],
+ ]);
+ expect(localDispatch).toHaveBeenCalledWith(
+ 'conversationStats/set',
+ dataReceived.meta
+ );
+ });
- expect(localCommit.mock.calls).toEqual([
- [types.CLEAR_LIST_ERROR_STATUS],
- [types.SET_LIST_LOADING_STATUS],
- [types.SET_ALL_CONVERSATION, dataReceived.payload],
- [
- `contacts/${types.SET_CONTACTS}`,
- dataReceived.payload.map(conversation => conversation.meta.sender),
- ],
- [types.CLEAR_LIST_ERROR_STATUS],
- [types.CLEAR_LIST_LOADING_STATUS],
- ]);
- expect(localDispatch).toHaveBeenCalledWith(
- 'conversationStats/set',
- dataReceived.meta
- );
- });
+ it('clears the loading state when the API request fails', async () => {
+ const localCommit = vi.fn();
+ axios.get.mockRejectedValue(new Error('Request failed'));
- it('clears the loading state when the API request fails', async () => {
- const localCommit = vi.fn();
- axios.get.mockRejectedValue(new Error('Request failed'));
+ await actions.fetchAllConversations({
+ commit: localCommit,
+ dispatch: vi.fn(),
+ state: { conversationFilters: {} },
+ });
- await actions.fetchAllConversations({
- commit: localCommit,
- dispatch: vi.fn(),
- state: { conversationFilters: {} },
- });
+ expect(localCommit.mock.calls).toEqual([
+ [types.CLEAR_LIST_ERROR_STATUS],
+ [types.SET_LIST_LOADING_STATUS],
+ [types.SET_LIST_ERROR_STATUS],
+ [types.CLEAR_LIST_LOADING_STATUS],
+ ]);
+ });
+ });
- expect(localCommit.mock.calls).toEqual([
- [types.CLEAR_LIST_ERROR_STATUS],
- [types.SET_LIST_LOADING_STATUS],
- [types.SET_LIST_ERROR_STATUS],
- [types.CLEAR_LIST_LOADING_STATUS],
- ]);
- });
- });
+ describe('#setConversationFilter', () => {
+ it('commits the correct mutation and sets filter state', () => {
+ const filters = [
+ {
+ attribute_key: 'status',
+ filter_operator: 'equal_to',
+ values: [{ id: 'snoozed', name: 'Snoozed' }],
+ query_operator: 'and',
+ },
+ ];
+ actions.setConversationFilters({ commit }, filters);
+ expect(commit.mock.calls).toEqual([
+ [types.SET_CONVERSATION_FILTERS, filters],
+ ]);
+ });
+ });
- describe('#setConversationFilter', () => {
- it('commits the correct mutation and sets filter state', () => {
- const filters = [
- {
- attribute_key: 'status',
- filter_operator: 'equal_to',
- values: [{ id: 'snoozed', name: 'Snoozed' }],
- query_operator: 'and',
- },
- ];
- actions.setConversationFilters({ commit }, filters);
- expect(commit.mock.calls).toEqual([
- [types.SET_CONVERSATION_FILTERS, filters],
- ]);
- });
- });
+ describe('#clearConversationFilter', () => {
+ it('commits the correct mutation and clears filter state', () => {
+ actions.clearConversationFilters({ commit });
+ expect(commit.mock.calls).toEqual([
+ [types.CLEAR_CONVERSATION_FILTERS],
+ ]);
+ });
+ });
- describe('#clearConversationFilter', () => {
- it('commits the correct mutation and clears filter state', () => {
- actions.clearConversationFilters({ commit });
- expect(commit.mock.calls).toEqual([[types.CLEAR_CONVERSATION_FILTERS]]);
- });
- });
+ describe('#updateConversationLastActivity', () => {
+ it('sends correct action', async () => {
+ await actions.updateConversationLastActivity(
+ { commit },
+ { conversationId: 1, lastActivityAt: 12121212 }
+ );
+ expect(commit.mock.calls).toEqual([
+ [
+ 'UPDATE_CONVERSATION_LAST_ACTIVITY',
+ { conversationId: 1, lastActivityAt: 12121212 },
+ ],
+ ]);
+ });
+ });
- describe('#updateConversationLastActivity', () => {
- it('sends correct action', async () => {
- await actions.updateConversationLastActivity(
- { commit },
- { conversationId: 1, lastActivityAt: 12121212 }
- );
- expect(commit.mock.calls).toEqual([
- [
- 'UPDATE_CONVERSATION_LAST_ACTIVITY',
- { conversationId: 1, lastActivityAt: 12121212 },
- ],
- ]);
- });
- });
-
- describe('#setChatSortFilter', () => {
- it('sends correct action', async () => {
- await actions.setChatSortFilter(
- { commit },
- { data: 'sort_on_created_at' }
- );
- expect(commit.mock.calls).toEqual([
- ['CHANGE_CHAT_SORT_FILTER', { data: 'sort_on_created_at' }],
- ]);
- });
- });
+ describe('#setChatSortFilter', () => {
+ it('sends correct action', async () => {
+ await actions.setChatSortFilter(
+ { commit },
+ { data: 'sort_on_created_at' }
+ );
+ expect(commit.mock.calls).toEqual([
+ ['CHANGE_CHAT_SORT_FILTER', { data: 'sort_on_created_at' }],
+ ]);
+ });
+ });
});
describe('#deleteMessage', () => {
- it('sends correct actions if API is success', async () => {
- const [conversationId, messageId] = [1, 1];
- axios.delete.mockResolvedValue({
- data: { id: 1, content: 'deleted' },
- });
- await actions.deleteMessage({ commit }, { conversationId, messageId });
- expect(commit.mock.calls).toEqual([
- [types.ADD_MESSAGE, { id: 1, content: 'deleted' }],
- [types.DELETE_CONVERSATION_ATTACHMENTS, { id: 1, content: 'deleted' }],
- ]);
- });
- it('sends no actions if API is error', async () => {
- const [conversationId, messageId] = [1, 1];
- axios.delete.mockRejectedValue({ message: 'Incorrect header' });
- await expect(
- actions.deleteMessage({ commit }, { conversationId, messageId })
- ).rejects.toThrow(Error);
- expect(commit.mock.calls).toEqual([]);
- });
+ it('sends correct actions if API is success', async () => {
+ const [conversationId, messageId] = [1, 1];
+ axios.delete.mockResolvedValue({
+ data: { id: 1, content: 'deleted' },
+ });
+ await actions.deleteMessage({ commit }, { conversationId, messageId });
+ expect(commit.mock.calls).toEqual([
+ [types.ADD_MESSAGE, { id: 1, content: 'deleted' }],
+ [
+ types.DELETE_CONVERSATION_ATTACHMENTS,
+ { id: 1, content: 'deleted' },
+ ],
+ ]);
+ });
+ it('sends no actions if API is error', async () => {
+ const [conversationId, messageId] = [1, 1];
+ axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+ await expect(
+ actions.deleteMessage({ commit }, { conversationId, messageId })
+ ).rejects.toThrow(Error);
+ expect(commit.mock.calls).toEqual([]);
+ });
- describe('#deleteConversation', () => {
- it('send correct actions if API is success', async () => {
- axios.delete.mockResolvedValue({
- data: { id: 1 },
- });
- await actions.deleteConversation({ commit, dispatch }, 1);
- expect(commit.mock.calls).toEqual([[types.DELETE_CONVERSATION, 1]]);
- expect(dispatch.mock.calls).toEqual([
- ['conversationStats/get', {}, { root: true }],
- ]);
- });
+ describe('#deleteConversation', () => {
+ it('send correct actions if API is success', async () => {
+ axios.delete.mockResolvedValue({
+ data: { id: 1 },
+ });
+ await actions.deleteConversation({ commit, dispatch }, 1);
+ expect(commit.mock.calls).toEqual([[types.DELETE_CONVERSATION, 1]]);
+ expect(dispatch.mock.calls).toEqual([
+ ['conversationStats/get', {}, { root: true }],
+ ]);
+ });
- it('send no actions if API is error', async () => {
- axios.delete.mockRejectedValue({ message: 'Incorrect header' });
- await expect(
- actions.deleteConversation({ commit, dispatch }, 1)
- ).rejects.toThrow(Error);
- expect(commit.mock.calls).toEqual([]);
- expect(dispatch.mock.calls).toEqual([]);
- });
- });
+ it('send no actions if API is error', async () => {
+ axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+ await expect(
+ actions.deleteConversation({ commit, dispatch }, 1)
+ ).rejects.toThrow(Error);
+ expect(commit.mock.calls).toEqual([]);
+ expect(dispatch.mock.calls).toEqual([]);
+ });
+ });
- describe('#updateCustomAttributes', () => {
- it('update conversation custom attributes', async () => {
- axios.post.mockResolvedValue({
- data: { custom_attributes: { order_d: '1001' } },
- });
- await actions.updateCustomAttributes(
- { commit },
- {
- conversationId: 1,
- customAttributes: { order_d: '1001' },
- }
- );
- expect(commit.mock.calls).toEqual([
- [
- types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES,
- {
- conversationId: 1,
- customAttributes: { order_d: '1001' },
- },
- ],
- ]);
- });
- });
+ describe('#updateCustomAttributes', () => {
+ it('update conversation custom attributes', async () => {
+ axios.post.mockResolvedValue({
+ data: { custom_attributes: { order_d: '1001' } },
+ });
+ await actions.updateCustomAttributes(
+ { commit },
+ {
+ conversationId: 1,
+ customAttributes: { order_d: '1001' },
+ }
+ );
+ expect(commit.mock.calls).toEqual([
+ [
+ types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES,
+ {
+ conversationId: 1,
+ customAttributes: { order_d: '1001' },
+ },
+ ],
+ ]);
+ });
+ });
});
describe('#addMentions', () => {
- it('does not send mutations if the view is not mentions', () => {
- actions.addMentions(
- { commit, dispatch, rootState: { route: { name: 'home' } } },
- { id: 1 }
- );
- expect(commit.mock.calls).toEqual([]);
- expect(dispatch.mock.calls).toEqual([]);
- });
+ it('does not send mutations if the view is not mentions', () => {
+ actions.addMentions(
+ { commit, dispatch, rootState: { route: { name: 'home' } } },
+ { id: 1 }
+ );
+ expect(commit.mock.calls).toEqual([]);
+ expect(dispatch.mock.calls).toEqual([]);
+ });
- it('send mutations if the view is mentions', () => {
- actions.addMentions(
- {
- dispatch,
- rootState: { route: { name: 'conversation_mentions' } },
- },
- { id: 1, meta: { sender: { id: 1 } } }
- );
- expect(dispatch.mock.calls).toEqual([
- ['updateConversation', { id: 1, meta: { sender: { id: 1 } } }],
- ]);
- });
+ it('send mutations if the view is mentions', () => {
+ actions.addMentions(
+ {
+ dispatch,
+ rootState: { route: { name: 'conversation_mentions' } },
+ },
+ { id: 1, meta: { sender: { id: 1 } } }
+ );
+ expect(dispatch.mock.calls).toEqual([
+ ['updateConversation', { id: 1, meta: { sender: { id: 1 } } }],
+ ]);
+ });
- it('#syncActiveConversationMessages', async () => {
- const conversations = [
- {
- id: 1,
- messages: [
- {
- id: 1,
- content: 'Hello',
- },
- ],
- meta: { sender: { id: 1, name: 'john-doe' } },
- inbox_id: 1,
- },
- ];
- axios.get.mockResolvedValue({
- data: {
- payload: [{ id: 2, content: 'Welcome' }],
- meta: {
- agent_last_seen_at: '2023-04-20T05:22:42.990Z',
- },
- },
- });
- await actions.syncActiveConversationMessages(
- {
- commit,
- dispatch,
- state: {
- allConversations: conversations,
- syncConversationsMessages: {
- 1: 1,
- },
- },
- },
- { conversationId: 1 }
- );
- expect(commit.mock.calls).toEqual([
- [
- 'conversationMetadata/SET_CONVERSATION_METADATA',
- {
- id: 1,
- data: {
- agent_last_seen_at: '2023-04-20T05:22:42.990Z',
- },
- },
- ],
- [
- 'SET_MISSING_MESSAGES',
- {
- id: 1,
- data: [
- { id: 1, content: 'Hello' },
- { id: 2, content: 'Welcome' },
- ],
- },
- ],
- [
- 'SET_LAST_MESSAGE_ID_FOR_SYNC_CONVERSATION',
- { conversationId: 1, messageId: null },
- ],
- ]);
- });
+ it('#syncActiveConversationMessages', async () => {
+ const conversations = [
+ {
+ id: 1,
+ messages: [
+ {
+ id: 1,
+ content: 'Hello',
+ },
+ ],
+ meta: { sender: { id: 1, name: 'john-doe' } },
+ inbox_id: 1,
+ },
+ ];
+ axios.get.mockResolvedValue({
+ data: {
+ payload: [{ id: 2, content: 'Welcome' }],
+ meta: {
+ agent_last_seen_at: '2023-04-20T05:22:42.990Z',
+ },
+ },
+ });
+ await actions.syncActiveConversationMessages(
+ {
+ commit,
+ dispatch,
+ state: {
+ allConversations: conversations,
+ syncConversationsMessages: {
+ 1: 1,
+ },
+ },
+ },
+ { conversationId: 1 }
+ );
+ expect(commit.mock.calls).toEqual([
+ [
+ 'conversationMetadata/SET_CONVERSATION_METADATA',
+ {
+ id: 1,
+ data: {
+ agent_last_seen_at: '2023-04-20T05:22:42.990Z',
+ },
+ },
+ ],
+ [
+ 'SET_MISSING_MESSAGES',
+ {
+ id: 1,
+ data: [
+ { id: 1, content: 'Hello' },
+ { id: 2, content: 'Welcome' },
+ ],
+ },
+ ],
+ [
+ 'SET_LAST_MESSAGE_ID_FOR_SYNC_CONVERSATION',
+ { conversationId: 1, messageId: null },
+ ],
+ ]);
+ });
- describe('#fetchAllAttachments', () => {
- it('fetches all attachments', async () => {
- axios.get.mockResolvedValue({
- data: {
- payload: [
- {
- id: 1,
- message_id: 1,
- file_type: 'image',
- data_url: '',
- thumb_url: '',
- },
- ],
- },
- });
- await actions.fetchAllAttachments({ commit }, 1);
- expect(commit.mock.calls).toEqual([
- [
- types.SET_ALL_ATTACHMENTS,
- {
- id: 1,
- data: [
- {
- id: 1,
- message_id: 1,
- file_type: 'image',
- data_url: '',
- thumb_url: '',
- },
- ],
- },
- ],
- ]);
- });
- });
+ describe('#fetchAllAttachments', () => {
+ it('fetches all attachments', async () => {
+ axios.get.mockResolvedValue({
+ data: {
+ payload: [
+ {
+ id: 1,
+ message_id: 1,
+ file_type: 'image',
+ data_url: '',
+ thumb_url: '',
+ },
+ ],
+ },
+ });
+ await actions.fetchAllAttachments({ commit }, 1);
+ expect(commit.mock.calls).toEqual([
+ [
+ types.SET_ALL_ATTACHMENTS,
+ {
+ id: 1,
+ data: [
+ {
+ id: 1,
+ message_id: 1,
+ file_type: 'image',
+ data_url: '',
+ thumb_url: '',
+ },
+ ],
+ },
+ ],
+ ]);
+ });
+ });
- describe('#setContextMenuChatId', () => {
- it('sets the context menu chat id', () => {
- actions.setContextMenuChatId({ commit }, 1);
- expect(commit.mock.calls).toEqual([[types.SET_CONTEXT_MENU_CHAT_ID, 1]]);
- });
- });
+ describe('#setContextMenuChatId', () => {
+ it('sets the context menu chat id', () => {
+ actions.setContextMenuChatId({ commit }, 1);
+ expect(commit.mock.calls).toEqual([
+ [types.SET_CONTEXT_MENU_CHAT_ID, 1],
+ ]);
+ });
+ });
- describe('#setChatListFilters', () => {
- it('set chat list filters', () => {
- const filters = {
- inboxId: 1,
- assigneeType: 'me',
- status: 'open',
- sortBy: 'created_at',
- page: 1,
- labels: ['label'],
- teamId: 1,
- conversationType: 'mention',
- };
- actions.setChatListFilters({ commit }, filters);
- expect(commit.mock.calls).toEqual([
- [types.SET_CHAT_LIST_FILTERS, filters],
- ]);
- });
- });
+ describe('#setChatListFilters', () => {
+ it('set chat list filters', () => {
+ const filters = {
+ inboxId: 1,
+ assigneeType: 'me',
+ status: 'open',
+ sortBy: 'created_at',
+ page: 1,
+ labels: ['label'],
+ teamId: 1,
+ conversationType: 'mention',
+ };
+ actions.setChatListFilters({ commit }, filters);
+ expect(commit.mock.calls).toEqual([
+ [types.SET_CHAT_LIST_FILTERS, filters],
+ ]);
+ });
+ });
- describe('#updateChatListFilters', () => {
- it('update chat list filters', () => {
- actions.updateChatListFilters({ commit }, { updatedWithin: 20 });
- expect(commit.mock.calls).toEqual([
- [types.UPDATE_CHAT_LIST_FILTERS, { updatedWithin: 20 }],
- ]);
- });
- });
+ describe('#updateChatListFilters', () => {
+ it('update chat list filters', () => {
+ actions.updateChatListFilters({ commit }, { updatedWithin: 20 });
+ expect(commit.mock.calls).toEqual([
+ [types.UPDATE_CHAT_LIST_FILTERS, { updatedWithin: 20 }],
+ ]);
+ });
+ });
- describe('#setActiveChat', () => {
- it('should commit SET_CHAT_DATA_FETCHED with conversation ID after fetch', async () => {
- const localCommit = vi.fn();
- const localDispatch = vi.fn().mockResolvedValue();
- const data = { id: 42, messages: [{ id: 100 }] };
+ describe('#setActiveChat', () => {
+ it('should commit SET_CHAT_DATA_FETCHED with conversation ID after fetch', async () => {
+ const localCommit = vi.fn();
+ const localDispatch = vi.fn().mockResolvedValue();
+ const data = { id: 42, messages: [{ id: 100 }] };
- await actions.setActiveChat(
- { commit: localCommit, dispatch: localDispatch },
- { data, after: 99 }
- );
+ await actions.setActiveChat(
+ { commit: localCommit, dispatch: localDispatch },
+ { data, after: 99 }
+ );
- expect(localCommit.mock.calls).toEqual([
- [types.SET_CURRENT_CHAT_WINDOW, data],
- [types.CLEAR_ALL_MESSAGES_LOADED, 42],
- [types.SET_CHAT_DATA_FETCHED, 42],
- ]);
- expect(localDispatch).toHaveBeenCalledWith('fetchPreviousMessages', {
- after: 99,
- before: 100,
- conversationId: 42,
- });
- });
+ expect(localCommit.mock.calls).toEqual([
+ [types.SET_CURRENT_CHAT_WINDOW, data],
+ [types.CLEAR_ALL_MESSAGES_LOADED, 42],
+ [types.SET_CHAT_DATA_FETCHED, 42],
+ ]);
+ expect(localDispatch).toHaveBeenCalledWith(
+ 'fetchPreviousMessages',
+ {
+ after: 99,
+ before: 100,
+ conversationId: 42,
+ }
+ );
+ });
- it('should not dispatch fetchPreviousMessages if dataFetched is already set', async () => {
- const localCommit = vi.fn();
- const localDispatch = vi.fn();
- const data = { id: 42, messages: [{ id: 100 }], dataFetched: true };
+ it('should not dispatch fetchPreviousMessages if dataFetched is already set', async () => {
+ const localCommit = vi.fn();
+ const localDispatch = vi.fn();
+ const data = { id: 42, messages: [{ id: 100 }], dataFetched: true };
- await actions.setActiveChat(
- { commit: localCommit, dispatch: localDispatch },
- { data }
- );
+ await actions.setActiveChat(
+ { commit: localCommit, dispatch: localDispatch },
+ { data }
+ );
- expect(localCommit.mock.calls).toEqual([
- [types.SET_CURRENT_CHAT_WINDOW, data],
- [types.CLEAR_ALL_MESSAGES_LOADED, 42],
- ]);
- expect(localDispatch).not.toHaveBeenCalled();
- });
+ expect(localCommit.mock.calls).toEqual([
+ [types.SET_CURRENT_CHAT_WINDOW, data],
+ [types.CLEAR_ALL_MESSAGES_LOADED, 42],
+ ]);
+ expect(localDispatch).not.toHaveBeenCalled();
+ });
- it('should commit SET_CHAT_DATA_FETCHED by ID, not mutate the data object directly (race condition fix)', async () => {
- const localCommit = vi.fn();
- const localDispatch = vi.fn().mockResolvedValue();
- const data = { id: 42, messages: [{ id: 100 }] };
+ it('should commit SET_CHAT_DATA_FETCHED by ID, not mutate the data object directly (race condition fix)', async () => {
+ const localCommit = vi.fn();
+ const localDispatch = vi.fn().mockResolvedValue();
+ const data = { id: 42, messages: [{ id: 100 }] };
- await actions.setActiveChat(
- { commit: localCommit, dispatch: localDispatch },
- { data }
- );
+ await actions.setActiveChat(
+ { commit: localCommit, dispatch: localDispatch },
+ { data }
+ );
- // The action must NOT set dataFetched on the data object directly
- expect(data.dataFetched).toBeUndefined();
+ // The action must NOT set dataFetched on the data object directly
+ expect(data.dataFetched).toBeUndefined();
- // Instead it commits a mutation that finds the conversation by ID in the store
- expect(localCommit).toHaveBeenCalledWith(types.SET_CHAT_DATA_FETCHED, 42);
- });
- });
+ // Instead it commits a mutation that finds the conversation by ID in the store
+ expect(localCommit).toHaveBeenCalledWith(
+ types.SET_CHAT_DATA_FETCHED,
+ 42
+ );
+ });
+ });
- describe('#getInboxCaptainAssistantById', () => {
- it('fetches inbox assistant by id', async () => {
- axios.get.mockResolvedValue({
- data: {
- id: 1,
- name: 'Assistant',
- description: 'Assistant description',
- },
- });
- await actions.getInboxCaptainAssistantById({ commit }, 1);
- expect(commit.mock.calls).toEqual([
- [
- types.SET_INBOX_CAPTAIN_ASSISTANT,
- { id: 1, name: 'Assistant', description: 'Assistant description' },
- ],
- ]);
- });
- });
+ describe('#getInboxCaptainAssistantById', () => {
+ it('fetches inbox assistant by id', async () => {
+ axios.get.mockResolvedValue({
+ data: {
+ id: 1,
+ name: 'Assistant',
+ description: 'Assistant description',
+ },
+ });
+ await actions.getInboxCaptainAssistantById({ commit }, 1);
+ expect(commit.mock.calls).toEqual([
+ [
+ types.SET_INBOX_CAPTAIN_ASSISTANT,
+ {
+ id: 1,
+ name: 'Assistant',
+ description: 'Assistant description',
+ },
+ ],
+ ]);
+ });
+ });
});
diff --git a/frontend/app/javascript/shared/helpers/specs/timeHelper.spec.js b/frontend/app/javascript/shared/helpers/specs/timeHelper.spec.js
index d12a42bc..4bb12718 100644
--- a/frontend/app/javascript/shared/helpers/specs/timeHelper.spec.js
+++ b/frontend/app/javascript/shared/helpers/specs/timeHelper.spec.js
@@ -7,6 +7,7 @@ import {
getDayDifferenceFromNow,
hasOneDayPassed,
} from 'shared/helpers/timeHelper';
+import { zhCN } from 'date-fns/locale';
beforeEach(() => {
process.env.TZ = 'UTC';
@@ -35,12 +36,27 @@ describe('#messageTimestamp', () => {
it('should return the message date and time in a different format if the message was sent in a different year', () => {
expect(messageTimestamp(1612971343)).toEqual('Feb 10 2021, 3:35 PM');
});
+ it('supports Chinese message time formats for current and previous years', () => {
+ expect(
+ messageTimestamp(1680777464, 'M月d日 aaa h:mm', {
+ locale: zhCN,
+ fallbackFormat: 'yyyy年M月d日 aaa h:mm',
+ })
+ ).toEqual('4月6日 上午 10:37');
+ expect(
+ messageTimestamp(1612971343, 'M月d日 aaa h:mm', {
+ locale: zhCN,
+ fallbackFormat: 'yyyy年M月d日 aaa h:mm',
+ })
+ ).toEqual('2021年2月10日 下午 3:35');
+ });
});
describe('#dynamicTime', () => {
it('returns correct value', () => {
Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
expect(dynamicTime(1612971343)).toEqual('about 2 years ago');
+ expect(dynamicTime(1612971343, { locale: zhCN })).toEqual('大约 2 年前');
});
});
@@ -48,6 +64,9 @@ describe('#dateFormat', () => {
it('returns correct value', () => {
expect(dateFormat(1612971343)).toEqual('Feb 10, 2021');
expect(dateFormat(1612971343, 'LLL d, yyyy')).toEqual('Feb 10, 2021');
+ expect(dateFormat(1612971343, 'yyyy年M月d日', { locale: zhCN })).toEqual(
+ '2021年2月10日'
+ );
});
});
diff --git a/frontend/app/javascript/shared/helpers/timeHelper.js b/frontend/app/javascript/shared/helpers/timeHelper.js
index db5609d8..824a1432 100644
--- a/frontend/app/javascript/shared/helpers/timeHelper.js
+++ b/frontend/app/javascript/shared/helpers/timeHelper.js
@@ -21,14 +21,20 @@ export const messageStamp = (time, dateFormat = 'h:mm a') => {
* Provides a formatted timestamp, adjusting the format based on the current year.
* @param {number} time - Unix timestamp.
* @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
+ * @param {object} [options] - date-fns options and a different-year fallback format.
* @returns {string} Formatted date string.
*/
-export const messageTimestamp = (time, dateFormat = 'MMM d, yyyy') => {
+export const messageTimestamp = (
+ time,
+ dateFormat = 'MMM d, yyyy',
+ options = {}
+) => {
const messageTime = fromUnixTime(time);
const now = new Date();
- const messageDate = format(messageTime, dateFormat);
+ const { fallbackFormat = 'LLL d y, h:mm a', ...formatOptions } = options;
+ const messageDate = format(messageTime, dateFormat, formatOptions);
if (!isSameYear(messageTime, now)) {
- return format(messageTime, 'LLL d y, h:mm a');
+ return format(messageTime, fallbackFormat, formatOptions);
}
return messageDate;
};
@@ -38,9 +44,9 @@ export const messageTimestamp = (time, dateFormat = 'MMM d, yyyy') => {
* @param {number} time - Unix timestamp.
* @returns {string} Relative time string.
*/
-export const dynamicTime = time => {
+export const dynamicTime = (time, options = {}) => {
const unixTime = fromUnixTime(time);
- return formatDistanceToNow(unixTime, { addSuffix: true });
+ return formatDistanceToNow(unixTime, { addSuffix: true, ...options });
};
/**
@@ -49,9 +55,9 @@ export const dynamicTime = time => {
* @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
* @returns {string} Formatted date string.
*/
-export const dateFormat = (time, df = 'MMM d, yyyy') => {
+export const dateFormat = (time, df = 'MMM d, yyyy', options = {}) => {
const unixTime = fromUnixTime(time);
- return format(unixTime, df);
+ return format(unixTime, df, options);
};
/**
diff --git a/output/index.html b/output/index.html
new file mode 100644
index 00000000..170b2324
--- /dev/null
+++ b/output/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ typingUserNames }}
+
+
+
+