fix: Render line-breaks properly in messages (#2699)

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -144,7 +144,6 @@ export default {
           text_content: { full: fullTextContent, reply: replyTextContent } = {},
         } = {},
       } = this.contentAttributes;
-
       let contentToBeParsed =
         replyHTMLContent ||
         replyTextContent ||
@@ -154,7 +153,7 @@ export default {
       if (contentToBeParsed && this.isIncoming) {
         const parsedContent = this.stripStyleCharacters(contentToBeParsed);
         if (parsedContent) {
-          return parsedContent;
+          return parsedContent.replace(/\n/g, '<br />');
         }
       }
       return (

app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue

@@ -29,7 +29,7 @@
 export default {
   props: {
     emailAttributes: {
-      type: Array,
+      type: Object,
       default: () => ({}),
     },
     isIncoming: {

app/javascript/shared/helpers/MessageFormatter.js

@@ -47,7 +47,7 @@ class MessageFormatter {
       const markedDownOutput = marked(withHash);
       return markedDownOutput;
     }
-    return marked(this.message);
+    return marked(this.message, { breaks: true, gfm: true });
   }
 
   get formattedMessage() {

app/javascript/widget/components/UserMessage.vue

@@ -126,5 +126,9 @@ export default {
       margin-top: $space-normal;
     }
   }
+
+  p:not(:last-child) {
+    margin-bottom: $space-normal;
+  }
 }
 </style>