feat: Add support for markdown in messages (#1642)

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

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

@@ -3,7 +3,7 @@
   @include margin($zero);
   background: $color-woot;
   border-radius: $space-one;
-  color: $color-white;
+  color: var(--white);
   font-size: $font-size-small;
   font-weight: $font-weight-normal;
   position: relative;
@@ -11,9 +11,8 @@
   .message-text__wrap {
     position: relative;
 
-
     .link {
-      color: $color-white;
+      color: var(--white);
       text-decoration: underline;
     }
   }
@@ -88,8 +87,6 @@
     }
   }
 
-
-
   .content-box {
     text-align: center;
   }
@@ -138,7 +135,6 @@
   @include flex-weight(1);
   @include margin($zero);
   flex-direction: column;
-  // Firefox flexbox fix
   height: 100%;
   overflow-y: auto;
   padding-bottom: var(--space-normal);
@@ -164,7 +160,7 @@
       @include elegant-card;
       @include round-corner;
       background: $color-woot;
-      color: $color-white;
+      color: var(--white);
       font-size: $font-size-mini;
       font-weight: $font-weight-medium;
       margin: $space-one auto;
@@ -215,6 +211,7 @@
           color: $color-primary-dark;
         }
       }
+
     }
 
     +.right {
@@ -303,6 +300,12 @@
   }
 }
 
+.activity-wrap .message-text__wrap {
+  .text-content p {
+    margin-bottom: 0;
+  }
+}
+
 .conversation-footer {
   display: flex;
   flex-direction: column;
@@ -320,7 +323,7 @@
   .typing-indicator {
     @include elegant-card;
     @include round-corner;
-    background: $color-white;
+    background: var(--white);
     color: $color-light-gray;
     font-size: $font-size-mini;
     font-weight: $font-weight-bold;
@@ -333,3 +336,65 @@
     }
   }
 }
+
+.left .bubble .text-content {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--color-body);
+  }
+
+  a {
+    color: var(--color-woot);
+    text-decoration: underline;
+  }
+
+  blockquote {
+    border-left-color: var(--s-300);
+
+    p {
+      color: var(--s-300);
+    }
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.right .bubble .text-content {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--white);
+  }
+
+  a {
+    color: var(--white);
+    text-decoration: underline;
+  }
+
+  blockquote {
+    border-left-color: var(--w-100);
+
+    p {
+      color: var(--w-100);
+    }
+  }
+
+  pre code {
+    background: var(--color-background);
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}

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

@@ -27,7 +27,7 @@
       <p v-if="lastMessageInChat" class="conversation--message">
         <i v-if="messageByAgent" class="ion-ios-undo message-from-agent"></i>
         <span v-if="lastMessageInChat.content">
-          {{ lastMessageInChat.content }}
+          {{ parsedLastMessage }}
         </span>
         <span v-else-if="!lastMessageInChat.attachments">{{ ` ` }}</span>
         <span v-else>
@@ -47,6 +47,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 import Thumbnail from '../Thumbnail';
 import conversationMixin from '../../../mixins/conversations';
@@ -59,7 +60,7 @@ export default {
     Thumbnail,
   },
 
-  mixins: [timeMixin, conversationMixin],
+  mixins: [timeMixin, conversationMixin, messageFormatterMixin],
   props: {
     activeLabel: {
       type: String,
@@ -129,6 +130,10 @@ export default {
       const { message_type: messageType } = lastMessage;
       return messageType === MESSAGE_TYPE.OUTGOING;
     },
+
+    parsedLastMessage() {
+      return this.getPlainText(this.lastMessageInChat.content);
+    },
   },
 
   methods: {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="message-text__wrap">
-    <span v-html="message"></span>
+    <div class="text-content" v-html="message"></div>
   </div>
 </template>
 

app/javascript/dashboard/routes/dashboard/conversation/search/Search.vue

@@ -57,6 +57,7 @@
 import { mapGetters } from 'vuex';
 import { frontendURL, conversationUrl } from '../../../../helper/URLHelper';
 import timeMixin from '../../../../mixins/time';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
   directives: {
@@ -66,7 +67,7 @@ export default {
       },
     },
   },
-  mixins: [timeMixin],
+  mixins: [timeMixin, messageFormatterMixin],
   props: {
     show: {
       type: Boolean,
@@ -107,7 +108,8 @@ export default {
   },
   methods: {
     prepareContent(content = '') {
-      return content.replace(
+      const plainTextContent = this.getPlainText(content);
+      return plainTextContent.replace(
         new RegExp(`(${this.searchTerm})`, 'ig'),
         '<span class="searchkey--highlight">$1</span>'
       );