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/assets/scss/views/_conversation.scss

@@ -1,4 +1,4 @@
-.file-uploads .attachment-button + label {
+.file-uploads .attachment-button+label {
   cursor: pointer;
 }
 
@@ -59,7 +59,7 @@
   }
 
   .agent-message-wrap {
-    + .agent-message-wrap {
+    +.agent-message-wrap {
       margin-top: $space-micro;
 
       .agent-message .chat-bubble {
@@ -67,11 +67,11 @@
       }
     }
 
-    + .user-message-wrap {
+    +.user-message-wrap {
       margin-top: $space-normal;
     }
 
-    &.has-response + .user-message-wrap {
+    &.has-response+.user-message-wrap {
       margin-top: $space-micro;
 
       .chat-bubble {
@@ -79,7 +79,7 @@
       }
     }
 
-    &.has-response + .agent-message-wrap {
+    &.has-response+.agent-message-wrap {
       margin-top: $space-normal;
     }
   }
@@ -98,9 +98,21 @@
       max-width: 100%;
     }
 
-    .in-progress {
+    .in-progress,
+    .is-failed {
       opacity: 0.6;
     }
+
+    .is-failed {
+      align-items: flex-end;
+      display: flex;
+      flex-direction: row-reverse;
+
+      .chat-bubble.user {
+        background: $color-error !important;
+        // TODO: Remove the important
+      }
+    }
   }
 
 
@@ -115,7 +127,7 @@
   }
 
   .user-message-wrap {
-    + .user-message-wrap {
+    +.user-message-wrap {
       margin-top: $space-micro;
 
       .user-message .chat-bubble {
@@ -123,7 +135,7 @@
       }
     }
 
-    + .agent-message-wrap {
+    +.agent-message-wrap {
       margin-top: $space-normal;
     }
   }
@@ -154,7 +166,7 @@
       border: 1px solid $color-border-dark;
     }
 
-    + .chat-bubble-wrap {
+    +.chat-bubble-wrap {
       .chat-bubble {
         border-top-left-radius: $space-smaller;
       }
@@ -176,7 +188,7 @@
       border-radius: $space-two;
     }
 
-    + .chat-bubble-wrap {
+    +.chat-bubble-wrap {
       .chat-bubble {
         border-top-right-radius: $space-smaller;
       }
@@ -206,7 +218,7 @@
   text-align: left;
   word-break: break-word;
 
-  > a {
+  >a {
     color: $color-primary;
     word-break: break-all;
   }
@@ -218,7 +230,7 @@
   &.user {
     border-bottom-right-radius: $space-smaller;
 
-    > a {
+    >a {
       color: $color-white;
     }
   }

app/javascript/widget/components/AgentMessage.vue

@@ -27,16 +27,14 @@
           :class="wrapClass"
         >
           <div v-for="attachment in message.attachments" :key="attachment.id">
-            <file-bubble
-              v-if="attachment.file_type !== 'image'"
-              :url="attachment.data_url"
-            />
             <image-bubble
-              v-else
+              v-if="attachment.file_type === 'image' && !hasImageError"
               :url="attachment.data_url"
               :thumb="attachment.thumb_url"
               :readable-time="readableTime"
+              @error="onImageLoadError"
             />
+            <file-bubble v-else :url="attachment.data_url" />
           </div>
         </div>
         <p v-if="message.showAvatar || hasRecordedResponse" class="agent-name">
@@ -83,6 +81,11 @@ export default {
       default: () => {},
     },
   },
+  data() {
+    return {
+      hasImageError: false,
+    };
+  },
   computed: {
     shouldDisplayAgentMessage() {
       if (
@@ -170,5 +173,18 @@ export default {
       };
     },
   },
+  watch: {
+    message() {
+      this.hasImageError = false;
+    },
+  },
+  mounted() {
+    this.hasImageError = false;
+  },
+  methods: {
+    onImageLoadError() {
+      this.hasImageError = true;
+    },
+  },
 };
 </script>

app/javascript/widget/components/ImageBubble.vue

@@ -6,7 +6,12 @@
     class="image"
   >
     <div class="wrap">
-      <img :src="thumb" alt="Picture message" />
+      <img
+        :src="thumb"
+        alt="Picture message"
+        @click="onClick"
+        @error="onImgError"
+      />
       <span class="time">{{ readableTime }}</span>
     </div>
   </a>
@@ -15,6 +20,11 @@
 <script>
 export default {
   props: ['url', 'thumb', 'readableTime'],
+  methods: {
+    onImgError() {
+      this.$emit('error');
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

app/javascript/widget/components/UserMessage.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="user-message-wrap">
     <div class="user-message">
-      <div class="message-wrap" :class="{ 'in-progress': isInProgress }">
+      <div
+        class="message-wrap"
+        :class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
+      >
         <user-message-bubble
           v-if="showTextBubble"
           :message="message.content"
@@ -14,19 +17,33 @@
           :style="{ backgroundColor: widgetColor }"
         >
           <div v-for="attachment in message.attachments" :key="attachment.id">
-            <file-bubble
-              v-if="attachment.file_type !== 'image'"
-              :url="attachment.data_url"
-              :is-in-progress="isInProgress"
-            />
             <image-bubble
-              v-else
+              v-if="attachment.file_type === 'image' && !hasImageError"
               :url="attachment.data_url"
               :thumb="attachment.thumb_url"
               :readable-time="readableTime"
+              @error="onImageLoadError"
+            />
+            <file-bubble
+              v-else
+              :url="attachment.data_url"
+              :is-in-progress="isInProgress"
             />
           </div>
         </div>
+        <div
+          v-if="isFailed"
+          class="flex justify-end align-middle px-4 py-2 text-red-700"
+        >
+          <button
+            v-if="!hasAttachments"
+            :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
+            class="inline-flex justify-center items-center ml-2"
+            @click="retrySendMessage"
+          >
+            <fluent-icon icon="arrow-clockwise" size="14" />
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -35,6 +52,7 @@
 <script>
 import UserMessageBubble from 'widget/components/UserMessageBubble';
 import ImageBubble from 'widget/components/ImageBubble';
+import FluentIcon from 'shared/components/FluentIcon/Index';
 import FileBubble from 'widget/components/FileBubble';
 import timeMixin from 'dashboard/mixins/time';
 import messageMixin from '../mixins/messageMixin';
@@ -46,6 +64,7 @@ export default {
     UserMessageBubble,
     ImageBubble,
     FileBubble,
+    FluentIcon,
   },
   mixins: [timeMixin, messageMixin],
   props: {
@@ -54,6 +73,11 @@ export default {
       default: () => {},
     },
   },
+  data() {
+    return {
+      hasImageError: false,
+    };
+  },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
@@ -71,6 +95,35 @@ export default {
       const { created_at: createdAt = '' } = this.message;
       return this.messageStamp(createdAt);
     },
+    isFailed() {
+      const { status = '' } = this.message;
+      return status === 'failed';
+    },
+    errorMessage() {
+      const { meta } = this.message;
+      return meta
+        ? meta.error
+        : this.$t('COMPONENTS.MESSAGE_BUBBLE.ERROR_MESSAGE');
+    },
+  },
+  watch: {
+    message() {
+      this.hasImageError = false;
+    },
+  },
+  mounted() {
+    this.hasImageError = false;
+  },
+  methods: {
+    async retrySendMessage() {
+      await this.$store.dispatch(
+        'conversation/sendMessageWithData',
+        this.message
+      );
+    },
+    onImageLoadError() {
+      this.hasImageError = true;
+    },
   },
 };
 </script>

app/javascript/widget/i18n/locale/en.json

@@ -6,6 +6,10 @@
     },
     "FORM_BUBBLE": {
       "SUBMIT": "Submit"
+    },
+    "MESSAGE_BUBBLE": {
+      "RETRY": "Send message again",
+      "ERROR_MESSAGE": "Couldn't send, try again"
     }
   },
   "TEAM_AVAILABILITY": {

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