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/assets/scss/app.scss

@@ -3,6 +3,7 @@
 @import 'shared/assets/stylesheets/spacing';
 @import 'shared/assets/stylesheets/font-size';
 @import 'shared/assets/stylesheets/font-weights';
+@import 'shared/assets/stylesheets/border-radius';
 @import 'variables';
 
 @import '~spinkit/scss/spinners/7-three-bounce';

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -18,13 +18,6 @@
     }
   }
 
-  .message-text {
-    &::after {
-      content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
-      display: inline;
-    }
-  }
-
   .image {
     cursor: pointer;
     position: relative;
@@ -201,6 +194,10 @@
       color: $color-body;
       margin-right: auto;
 
+      &.is-image {
+        border-radius: var(--border-radius-large);
+      }
+
       .link {
         color: $color-primary-dark;
       }
@@ -257,6 +254,10 @@
           top: $space-smaller + $space-micro;
         }
       }
+
+      &.is-image {
+        border-radius: var(--border-radius-large);
+      }
     }
 
     +.left {
@@ -296,30 +297,9 @@
     border-radius: $space-smaller;
     font-size: $font-size-small;
 
-    p {
-      color: $color-heading;
-      margin-bottom: $zero;
-
-      .ion-person {
-        color: $color-body;
-        font-size: $font-size-default;
-        margin-right: $space-small;
-        position: relative;
-        top: $space-micro;
-      }
-
-      .message-text__wrap {
-        position: relative;
-      }
-
-      .message-text {
-        &::after {
-          content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
-          display: inline;
-        }
-      }
+    .message-text__wrap {
+      display: inline-block;
     }
-
   }
 }