feat: Shows error message with retry for widget messages (#3594)

- Adds error message retry option for widget bubbles
- Adds a fallback for widget images with file type bubble

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

@@ -24,15 +24,35 @@ export const actions = {
       commit('setConversationUIFlag', { isCreating: false });
     }
   },
-  sendMessage: async ({ commit }, params) => {
+  sendMessage: async ({ dispatch }, params) => {
     const { content } = params;
-    commit('pushMessageToConversation', createTemporaryMessage({ content }));
-    await sendMessageAPI(content);
+    const message = createTemporaryMessage({ content });
+
+    dispatch('sendMessageWithData', message);
+  },
+  sendMessageWithData: async ({ commit }, message) => {
+    const { id, content, meta = {} } = message;
+
+    commit('pushMessageToConversation', message);
+    commit('updateMessageMeta', { id, meta: { ...meta, error: '' } });
+    try {
+      const { data } = await sendMessageAPI(content);
+
+      commit('deleteMessage', message.id);
+      commit('pushMessageToConversation', { ...data, status: 'sent' });
+    } catch (error) {
+      commit('pushMessageToConversation', { ...message, status: 'failed' });
+      commit('updateMessageMeta', {
+        id,
+        meta: { ...meta, error: '' },
+      });
+    }
   },
 
   sendAttachment: async ({ commit }, params) => {
     const {
       attachment: { thumbUrl, fileType },
+      meta = {},
     } = params;
     const attachment = {
       thumb_url: thumbUrl,
@@ -50,7 +70,13 @@ export const actions = {
         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
     }
   },

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

@@ -72,6 +72,16 @@ export const mutations = {
     };
   },
 
+  updateMessageMeta($state, { id, meta }) {
+    const message = $state.conversations[id];
+    if (!message) return;
+
+    const newMeta = message.meta ? { ...message.meta, ...meta } : { ...meta };
+    Vue.set(message, 'meta', {
+      ...newMeta,
+    });
+  },
+
   deleteMessage($state, id) {
     const messagesInbox = $state.conversations;
     Vue.delete(messagesInbox, id);

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

@@ -6,6 +6,7 @@ jest.mock('../../../../helpers/uuid');
 jest.mock('widget/helpers/axios');
 
 const commit = jest.fn();
+const dispatch = jest.fn();
 
 describe('#actions', () => {
   describe('#createConversation', () => {
@@ -92,7 +93,7 @@ describe('#actions', () => {
   });
 
   describe('#sendMessage', () => {
-    it('sends correct mutations', () => {
+    it('sends correct mutations', async () => {
       const mockDate = new Date(1466424490000);
       getUuid.mockImplementationOnce(() => '1111');
       const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
@@ -109,15 +110,16 @@ describe('#actions', () => {
           search: '?param=1',
         },
       }));
-      actions.sendMessage({ commit }, { content: 'hello' });
+      await actions.sendMessage({ commit, dispatch }, { content: 'hello' });
       spy.mockRestore();
       windowSpy.mockRestore();
-      expect(commit).toBeCalledWith('pushMessageToConversation', {
-        id: '1111',
+      expect(dispatch).toBeCalledWith('sendMessageWithData', {
+        attachments: undefined,
         content: 'hello',
-        status: 'in_progress',
         created_at: 1466424490,
+        id: '1111',
         message_type: 0,
+        status: 'in_progress',
       });
     });
   });
@@ -130,7 +132,7 @@ describe('#actions', () => {
       const thumbUrl = '';
       const attachment = { thumbUrl, fileType: 'file' };
 
-      actions.sendAttachment({ commit }, { attachment });
+      actions.sendAttachment({ commit, dispatch }, { attachment });
       spy.mockRestore();
       expect(commit).toBeCalledWith('pushMessageToConversation', {
         id: '1111',