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 });
     }
   },
 

app/javascript/widget/store/modules/specs/conversation/actions.spec.js

@@ -26,6 +26,13 @@ describe('#actions', () => {
     });
   });
 
+  describe('#updateMessage', () => {
+    it('sends correct mutations', () => {
+      actions.updateMessage({ commit }, { id: 1 });
+      expect(commit).toBeCalledWith('pushMessageToConversation', { id: 1 });
+    });
+  });
+
   describe('#sendMessage', () => {
     it('sends correct mutations', () => {
       const mockDate = new Date(1466424490000);
@@ -59,12 +66,14 @@ describe('#actions', () => {
         status: 'in_progress',
         created_at: 1466424490,
         message_type: 0,
-        attachment: {
-          thumb_url: '',
-          data_url: '',
-          file_type: 'file',
-          status: 'in_progress',
-        },
+        attachments: [
+          {
+            thumb_url: '',
+            data_url: '',
+            file_type: 'file',
+            status: 'in_progress',
+          },
+        ],
       });
     });
   });

app/javascript/widget/store/modules/specs/conversation/mutations.spec.js

@@ -93,7 +93,7 @@ describe('#mutations', () => {
     });
   });
 
-  describe('#setMessageStatus', () => {
+  describe('#updateAttachmentMessageStatus', () => {
     it('Updates status of loading messages if payload is not empty', () => {
       const state = {
         conversations: {
@@ -113,12 +113,18 @@ describe('#mutations', () => {
         id: '1',
         content: '',
         status: 'sent',
-        attachment: {
-          file: '',
-          file_type: 'image',
-        },
+        message_type: 0,
+        attachments: [
+          {
+            file: '',
+            file_type: 'image',
+          },
+        ],
       };
-      mutations.setMessageStatus(state, { message, tempId: 'rand_id_123' });
+      mutations.updateAttachmentMessageStatus(state, {
+        message,
+        tempId: 'rand_id_123',
+      });
 
       expect(state.conversations).toEqual({
         1: {
@@ -126,10 +132,12 @@ describe('#mutations', () => {
           content: '',
           message_type: 0,
           status: 'sent',
-          attachment: {
-            file: '',
-            file_type: 'image',
-          },
+          attachments: [
+            {
+              file: '',
+              file_type: 'image',
+            },
+          ],
         },
       });
     });