feat: Add preview for attachment messages (#1562)

Add preview for pending messages and attachments

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/AgentMessage.vue

@@ -14,14 +14,18 @@
       </div>
       <div class="message-wrap">
         <AgentMessageBubble
-          v-if="!hasAttachments && shouldDisplayAgentMessage"
+          v-if="shouldDisplayAgentMessage"
           :content-type="contentType"
           :message-content-attributes="messageContentAttributes"
           :message-id="message.id"
           :message-type="messageType"
           :message="message.content"
         />
-        <div v-if="hasAttachments" class="chat-bubble has-attachment agent">
+        <div
+          v-if="hasAttachments"
+          class="chat-bubble has-attachment agent"
+          :class="wrapClass"
+        >
           <div v-for="attachment in message.attachments" :key="attachment.id">
             <file-bubble
               v-if="attachment.file_type !== 'image'"
@@ -87,6 +91,7 @@ export default {
       ) {
         return false;
       }
+      if (!this.message.content) return false;
       return true;
     },
     hasAttachments() {
@@ -167,6 +172,11 @@ export default {
         })
       );
     },
+    wrapClass() {
+      return {
+        'has-text': this.shouldDisplayAgentMessage,
+      };
+    },
   },
 };
 </script>
@@ -213,6 +223,10 @@ export default {
   .has-attachment {
     padding: 0;
     overflow: hidden;
+
+    &.has-text {
+      margin-top: $space-smaller;
+    }
   }
 
   .agent-message-wrap {

app/javascript/widget/views/Unread.vue

@@ -15,7 +15,7 @@
         v-for="message in unreadMessages"
         :key="message.id"
         :message-id="message.id"
-        :message="message.content"
+        :message="getMessageContent(message)"
       />
     </div>
     <div>
@@ -88,6 +88,16 @@ export default {
         });
       }
     },
+    getMessageContent(message) {
+      const { attachments, content } = message;
+      const hasAttachments = attachments && attachments.length;
+
+      if (content) return content;
+
+      if (hasAttachments) return `📑`;
+
+      return '';
+    },
   },
 };
 </script>