Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/widget/store/modules/conversation/actions.js

@@ -0,0 +1,198 @@
+import {
+  createConversationAPI,
+  sendMessageAPI,
+  getMessagesAPI,
+  sendAttachmentAPI,
+  toggleTyping,
+  setUserLastSeenAt,
+  toggleStatus,
+  setCustomAttributes,
+  deleteCustomAttribute,
+} from 'widget/api/conversation';
+
+import { ON_CONVERSATION_CREATED } from 'widget/constants/widgetBusEvents';
+import { createTemporaryMessage, getNonDeletedMessages } from './helpers';
+import { emitter } from 'shared/helpers/mitt';
+export const actions = {
+  createConversation: async ({ commit, dispatch }, params) => {
+    commit('setConversationUIFlag', { isCreating: true });
+    try {
+      const { data } = await createConversationAPI(params);
+      const { messages } = data;
+      const [message = {}] = messages;
+      commit('pushMessageToConversation', message);
+      dispatch('conversationAttributes/getAttributes', {}, { root: true });
+      // Emit event to notify that conversation is created and show the chat screen
+      emitter.emit(ON_CONVERSATION_CREATED);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit('setConversationUIFlag', { isCreating: false });
+    }
+  },
+  sendMessage: async ({ dispatch }, params) => {
+    const { content, replyTo } = params;
+    const message = createTemporaryMessage({ content, replyTo });
+    dispatch('sendMessageWithData', message);
+  },
+  sendMessageWithData: async ({ commit }, message) => {
+    const { id, content, replyTo, meta = {} } = message;
+
+    commit('pushMessageToConversation', message);
+    commit('updateMessageMeta', { id, meta: { ...meta, error: '' } });
+    try {
+      const { data } = await sendMessageAPI(content, replyTo);
+
+      // [VITE] Don't delete this manually, since `pushMessageToConversation` does the replacement for us anyway
+      // commit('deleteMessage', message.id);
+      commit('pushMessageToConversation', { ...data, status: 'sent' });
+    } catch (error) {
+      commit('pushMessageToConversation', { ...message, status: 'failed' });
+      commit('updateMessageMeta', {
+        id,
+        meta: { ...meta, error: '' },
+      });
+    }
+  },
+
+  setLastMessageId: async ({ commit }) => {
+    commit('setLastMessageId');
+  },
+
+  sendAttachment: async ({ commit }, params) => {
+    const {
+      attachment: { thumbUrl, fileType },
+      meta = {},
+    } = params;
+    const attachment = {
+      thumb_url: thumbUrl,
+      data_url: thumbUrl,
+      file_type: fileType,
+      status: 'in_progress',
+    };
+    const tempMessage = createTemporaryMessage({
+      attachments: [attachment],
+      replyTo: params.replyTo,
+    });
+    commit('pushMessageToConversation', tempMessage);
+    try {
+      const { data } = await sendAttachmentAPI(params);
+      commit('updateAttachmentMessageStatus', {
+        message: data,
+        tempId: tempMessage.id,
+      });
+      commit('pushMessageToConversation', { ...data, status: 'sent' });
+    } catch (error) {
+      commit('pushMessageToConversation', { ...tempMessage, status: 'failed' });
+      commit('updateMessageMeta', {
+        id: tempMessage.id,
+        meta: { ...meta, error: '' },
+      });
+      // Show error
+    }
+  },
+  fetchOldConversations: async ({ commit }, { before } = {}) => {
+    try {
+      commit('setConversationListLoading', true);
+      const {
+        data: { payload, meta },
+      } = await getMessagesAPI({ before });
+      const { contact_last_seen_at: lastSeen } = meta;
+      const formattedMessages = getNonDeletedMessages({ messages: payload });
+      commit('conversation/setMetaUserLastSeenAt', lastSeen, { root: true });
+      commit('setMessagesInConversation', formattedMessages);
+      commit('setConversationListLoading', false);
+    } catch (error) {
+      commit('setConversationListLoading', false);
+    }
+  },
+
+  syncLatestMessages: async ({ state, commit }) => {
+    try {
+      const { lastMessageId, conversations } = state;
+
+      const {
+        data: { payload, meta },
+      } = await getMessagesAPI({ after: lastMessageId });
+
+      const { contact_last_seen_at: lastSeen } = meta;
+      const formattedMessages = getNonDeletedMessages({ messages: payload });
+      const missingMessages = formattedMessages.filter(
+        message => conversations?.[message.id] === undefined
+      );
+      if (!missingMessages.length) return;
+      missingMessages.forEach(message => {
+        conversations[message.id] = message;
+      });
+      // Sort conversation messages by created_at
+      const updatedConversation = Object.fromEntries(
+        Object.entries(conversations).sort(
+          (a, b) => a[1].created_at - b[1].created_at
+        )
+      );
+      commit('conversation/setMetaUserLastSeenAt', lastSeen, { root: true });
+      commit('setMissingMessagesInConversation', updatedConversation);
+    } catch (error) {
+      // IgnoreError
+    }
+  },
+
+  clearConversations: ({ commit }) => {
+    commit('clearConversations');
+  },
+
+  addOrUpdateMessage: async ({ commit }, data) => {
+    const { id, content_attributes } = data;
+    if (content_attributes && content_attributes.deleted) {
+      commit('deleteMessage', id);
+      return;
+    }
+    commit('pushMessageToConversation', data);
+  },
+
+  toggleAgentTyping({ commit }, data) {
+    commit('toggleAgentTypingStatus', data);
+  },
+
+  toggleUserTyping: async (_, data) => {
+    try {
+      await toggleTyping(data);
+    } catch (error) {
+      // IgnoreError
+    }
+  },
+
+  setUserLastSeen: async ({ commit, getters: appGetters }) => {
+    if (!appGetters.getConversationSize) {
+      return;
+    }
+
+    const lastSeen = Date.now() / 1000;
+    try {
+      commit('setMetaUserLastSeenAt', lastSeen);
+      await setUserLastSeenAt({ lastSeen });
+    } catch (error) {
+      // IgnoreError
+    }
+  },
+
+  resolveConversation: async () => {
+    await toggleStatus();
+  },
+
+  setCustomAttributes: async (_, customAttributes = {}) => {
+    try {
+      await setCustomAttributes(customAttributes);
+    } catch (error) {
+      // IgnoreError
+    }
+  },
+
+  deleteCustomAttribute: async (_, customAttribute) => {
+    try {
+      await deleteCustomAttribute(customAttribute);
+    } catch (error) {
+      // IgnoreError
+    }
+  },
+};

research/chatwoot/app/javascript/widget/store/modules/conversation/getters.js

@@ -0,0 +1,61 @@
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { groupBy } from 'widget/helpers/utils';
+import { groupConversationBySender } from './helpers';
+import { formatUnixDate } from 'shared/helpers/DateHelper';
+
+export const getters = {
+  getAllMessagesLoaded: _state => _state.uiFlags.allMessagesLoaded,
+  getIsCreating: _state => _state.uiFlags.isCreating,
+  getIsAgentTyping: _state => _state.uiFlags.isAgentTyping,
+  getConversation: _state => _state.conversations,
+  getConversationSize: _state => Object.keys(_state.conversations).length,
+  getEarliestMessage: _state => {
+    const conversation = Object.values(_state.conversations);
+    if (conversation.length) {
+      return conversation[0];
+    }
+    return {};
+  },
+  getLastMessage: _state => {
+    const conversation = Object.values(_state.conversations);
+    if (conversation.length) {
+      return conversation[conversation.length - 1];
+    }
+    return {};
+  },
+  getGroupedConversation: _state => {
+    const conversationGroupedByDate = groupBy(
+      Object.values(_state.conversations),
+      message => formatUnixDate(message.created_at)
+    );
+    return Object.keys(conversationGroupedByDate).map(date => ({
+      date,
+      messages: groupConversationBySender(conversationGroupedByDate[date]),
+    }));
+  },
+  getIsFetchingList: _state => _state.uiFlags.isFetchingList,
+  getMessageCount: _state => {
+    return Object.values(_state.conversations).length;
+  },
+  getUnreadMessageCount: _state => {
+    const { userLastSeenAt } = _state.meta;
+    return Object.values(_state.conversations).filter(chat => {
+      const { created_at: createdAt, message_type: messageType } = chat;
+      const isOutGoing = messageType === MESSAGE_TYPE.OUTGOING;
+      const hasNotSeen = userLastSeenAt
+        ? createdAt * 1000 > userLastSeenAt * 1000
+        : true;
+      return hasNotSeen && isOutGoing;
+    }).length;
+  },
+  getUnreadTextMessages: (_state, _getters) => {
+    const unreadCount = _getters.getUnreadMessageCount;
+    const allMessages = [...Object.values(_state.conversations)];
+    const unreadAgentMessages = allMessages.filter(message => {
+      const { message_type: messageType } = message;
+      return messageType === MESSAGE_TYPE.OUTGOING;
+    });
+    const maxUnreadCount = Math.min(unreadCount, 3);
+    return unreadAgentMessages.splice(-maxUnreadCount);
+  },
+};

research/chatwoot/app/javascript/widget/store/modules/conversation/helpers.js

@@ -0,0 +1,55 @@
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
+
+import getUuid from '../../../helpers/uuid';
+export const createTemporaryMessage = ({ attachments, content, replyTo }) => {
+  const timestamp = new Date().getTime() / 1000;
+  return {
+    id: getUuid(),
+    content,
+    attachments,
+    status: 'in_progress',
+    replyTo,
+    created_at: timestamp,
+    message_type: MESSAGE_TYPE.INCOMING,
+  };
+};
+
+const getSenderName = message => (message.sender ? message.sender.name : '');
+
+const shouldShowAvatar = (message, nextMessage) => {
+  const currentSender = getSenderName(message);
+  const nextSender = getSenderName(nextMessage);
+
+  return (
+    currentSender !== nextSender ||
+    message.message_type !== nextMessage.message_type ||
+    isASubmittedFormMessage(nextMessage)
+  );
+};
+
+export const groupConversationBySender = conversationsForADate =>
+  conversationsForADate.map((message, index) => {
+    let showAvatar;
+    const isLastMessage = index === conversationsForADate.length - 1;
+    if (isASubmittedFormMessage(message)) {
+      showAvatar = false;
+    } else if (isLastMessage) {
+      showAvatar = true;
+    } else {
+      const nextMessage = conversationsForADate[index + 1];
+      showAvatar = shouldShowAvatar(message, nextMessage);
+    }
+    return { showAvatar, ...message };
+  });
+
+export const findUndeliveredMessage = (messageInbox, { content }) =>
+  Object.values(messageInbox).filter(
+    message => message.content === content && message.status === 'in_progress'
+  );
+
+export const getNonDeletedMessages = ({ messages }) => {
+  return messages.filter(
+    item => !(item.content_attributes && item.content_attributes.deleted)
+  );
+};

research/chatwoot/app/javascript/widget/store/modules/conversation/index.js

@@ -0,0 +1,25 @@
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations } from './mutations';
+
+const state = {
+  conversations: {},
+  meta: {
+    userLastSeenAt: undefined,
+  },
+  uiFlags: {
+    allMessagesLoaded: false,
+    isFetchingList: false,
+    isAgentTyping: false,
+    isCreating: false,
+  },
+  lastMessageId: null,
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

research/chatwoot/app/javascript/widget/store/modules/conversation/mutations.js

@@ -0,0 +1,116 @@
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { findUndeliveredMessage } from './helpers';
+
+export const mutations = {
+  clearConversations($state) {
+    $state.conversations = {};
+  },
+  pushMessageToConversation($state, message) {
+    const { id, status, message_type: type } = message;
+
+    const messagesInbox = $state.conversations;
+    const isMessageIncoming = type === MESSAGE_TYPE.INCOMING;
+    const isTemporaryMessage = status === 'in_progress';
+
+    if (!isMessageIncoming || isTemporaryMessage) {
+      messagesInbox[id] = message;
+      return;
+    }
+
+    const [messageInConversation] = findUndeliveredMessage(
+      messagesInbox,
+      message
+    );
+    if (!messageInConversation) {
+      messagesInbox[id] = message;
+    } else {
+      // [VITE] instead of leaving undefined behind, we remove it completely
+      // remove the temporary message and replace it with the new message
+      // messagesInbox[messageInConversation.id] = undefined;
+      delete messagesInbox[messageInConversation.id];
+      messagesInbox[id] = message;
+    }
+  },
+
+  updateAttachmentMessageStatus($state, { message, tempId }) {
+    const { id } = message;
+    const messagesInbox = $state.conversations;
+
+    const messageInConversation = messagesInbox[tempId];
+
+    if (messageInConversation) {
+      // [VITE] instead of leaving undefined behind, we remove it completely
+      // remove the temporary message and replace it with the new message
+      // messagesInbox[tempId] = undefined;
+      delete messagesInbox[tempId];
+      messagesInbox[id] = { ...message };
+    }
+  },
+
+  setConversationUIFlag($state, uiFlags) {
+    $state.uiFlags = {
+      ...$state.uiFlags,
+      ...uiFlags,
+    };
+  },
+
+  setConversationListLoading($state, status) {
+    $state.uiFlags.isFetchingList = status;
+  },
+
+  setMessagesInConversation($state, payload) {
+    if (!payload.length) {
+      $state.uiFlags.allMessagesLoaded = true;
+      return;
+    }
+
+    payload.forEach(message => {
+      $state.conversations[message.id] = message;
+    });
+  },
+
+  setMissingMessagesInConversation($state, payload) {
+    $state.conversation = payload;
+  },
+
+  updateMessage($state, { id, content_attributes }) {
+    $state.conversations[id] = {
+      ...$state.conversations[id],
+      content_attributes: {
+        ...($state.conversations[id].content_attributes || {}),
+        ...content_attributes,
+      },
+    };
+  },
+
+  updateMessageMeta($state, { id, meta }) {
+    const message = $state.conversations[id];
+    if (!message) return;
+
+    const newMeta = message.meta ? { ...message.meta, ...meta } : { ...meta };
+    message.meta = { ...newMeta };
+  },
+
+  deleteMessage($state, id) {
+    delete $state.conversations[id];
+    // [VITE] In Vue 3 proxy objects, we can't delete properties by setting them to undefined
+    // Instead, we have to use the delete operator
+    // $state.conversations[id] = undefined;
+  },
+
+  toggleAgentTypingStatus($state, { status }) {
+    $state.uiFlags.isAgentTyping = status === 'on';
+  },
+
+  setMetaUserLastSeenAt($state, lastSeen) {
+    $state.meta.userLastSeenAt = lastSeen;
+  },
+
+  setLastMessageId($state) {
+    const { conversations } = $state;
+    const lastMessage = Object.values(conversations).pop();
+    if (!lastMessage) return;
+    const { id } = lastMessage;
+    $state.lastMessageId = id;
+  },
+};