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