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/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>