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>