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