Chore: Message to support multiple attachments (#730)

* Changes for the message to have multiple attachments
* changed the message association to attachments from has_one to has_many
* changed all the references of this association in building and fetching to reflect this change

* Added number of attachments validation to the message model

* Modified the backend responses and endpoints to reflect multiple attachment support (#737)

* Changing the frontend components for multiple attachments
* changed the request structure to reflect the multiple attachment structures
* changed the message bubbles to support multiple attachments
* bugfix: agent side attachment was not showing because of a missing await
* broken message was shown because of the store filtering
* Added documentation for ImageMagick

* spec fixes

* refactored code to reflect more apt namings

* Added updated message listener for the dashboard (#727)
* Added the publishing for message updated event
* Implemented the listener for dashboard

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/javascript/widget/store/modules/conversation.js

@@ -12,12 +12,12 @@ import DateHelper from '../../../shared/helpers/DateHelper';
 
 const groupBy = require('lodash.groupby');
 
-export const createTemporaryMessage = ({ attachment, content }) => {
+export const createTemporaryMessage = ({ attachments, content }) => {
   const timestamp = new Date().getTime() / 1000;
   return {
     id: getUuid(),
     content,
-    attachment,
+    attachments,
     status: 'in_progress',
     created_at: timestamp,
     message_type: MESSAGE_TYPE.INCOMING,
@@ -97,11 +97,14 @@ export const actions = {
       file_type: fileType,
       status: 'in_progress',
     };
-    const tempMessage = createTemporaryMessage({ attachment });
+    const tempMessage = createTemporaryMessage({ attachments: [attachment] });
     commit('pushMessageToConversation', tempMessage);
     try {
       const { data } = await sendAttachmentAPI(params);
-      commit('setMessageStatus', { message: data, tempId: tempMessage.id });
+      commit('updateAttachmentMessageStatus', {
+        message: data,
+        tempId: tempMessage.id,
+      });
     } catch (error) {
       // Show error
     }
@@ -125,6 +128,10 @@ export const actions = {
 
     commit('pushMessageToConversation', data);
   },
+
+  updateMessage({ commit }, data) {
+    commit('pushMessageToConversation', data);
+  },
 };
 
 export const mutations = {
@@ -151,24 +158,15 @@ export const mutations = {
     }
   },
 
-  setMessageStatus($state, { message, tempId }) {
-    const { status, id } = message;
+  updateAttachmentMessageStatus($state, { message, tempId }) {
+    const { id } = message;
     const messagesInbox = $state.conversations;
 
     const messageInConversation = messagesInbox[tempId];
 
     if (messageInConversation) {
       Vue.delete(messagesInbox, tempId);
-      const { attachment } = messageInConversation;
-      if (attachment.file_type === 'file') {
-        attachment.data_url = message.attachment.data_url;
-      }
-      Vue.set(messagesInbox, id, {
-        ...messageInConversation,
-        attachment,
-        id,
-        status,
-      });
+      Vue.set(messagesInbox, id, { ...message });
     }
   },