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/dashboard/components/widgets/conversation/Message.vue

@@ -14,8 +14,8 @@
         >
           {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
         </span>
-        <span v-if="!isPending && hasAttachments">
-          <span v-for="attachment in data.attachments" :key="attachment.id">
+        <div v-if="!isPending && hasAttachments">
+          <div v-for="attachment in data.attachments" :key="attachment.id">
             <bubble-image
               v-if="attachment.file_type === 'image'"
               :url="attachment.data_url"
@@ -26,8 +26,8 @@
               :url="attachment.data_url"
               :readable-time="readableTime"
             />
-          </span>
-        </span>
+          </div>
+        </div>
 
         <bubble-actions
           :id="data.id"
@@ -138,6 +138,9 @@ export default {
       }
       return false;
     },
+    hasText() {
+      return !!this.data.content;
+    },
     sentByMessage() {
       const { sender } = this;
 
@@ -160,6 +163,7 @@ export default {
         bubble: this.isBubble,
         'is-private': this.data.private,
         'is-image': this.hasImageAttachment,
+        'is-text': this.hasText,
       };
     },
     isPending() {
@@ -170,15 +174,27 @@ export default {
 </script>
 <style lang="scss">
 .wrap {
-  > .is-image.bubble {
-    padding: 0;
-    overflow: hidden;
-
-    .image {
-      max-width: 32rem;
+  > .bubble {
+    &.is-image {
       padding: 0;
+      overflow: hidden;
+
+      .image {
+        max-width: 32rem;
+        padding: var(--space-micro);
+
+        > img {
+          border-radius: var(--border-radius-medium);
+        }
+      }
+    }
+
+    &.is-image.is-text > .message-text__wrap {
+      max-width: 32rem;
+      padding: var(--space-small) var(--space-normal);
     }
   }
+
   &.is-pending {
     position: relative;
     opacity: 0.8;
@@ -188,6 +204,10 @@ export default {
       bottom: var(--space-smaller);
       right: var(--space-smaller);
     }
+
+    > .is-image.is-text.bubble > .message-text__wrap {
+      padding: 0;
+    }
   }
 }