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

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

app/javascript/widget/components/AgentMessageBubble.vue

@@ -4,7 +4,7 @@
       v-if="!isCards && !isOptions && !isForm && !isArticle"
       class="chat-bubble agent"
     >
-      <span v-html="formatMessage(message, false)"></span>
+      <div class="message-content" v-html="formatMessage(message, false)"></div>
       <email-input
         v-if="isTemplateEmail"
         :message-id="messageId"
@@ -133,3 +133,13 @@ export default {
   }
 }
 </style>
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.chat-bubble .message-content::v-deep pre {
+  background: $color-primary-light;
+  color: $color-body;
+  overflow: scroll;
+  padding: $space-smaller;
+}
+</style>

app/javascript/widget/components/UserMessage.vue

@@ -94,6 +94,7 @@ export default {
 
     .message-wrap {
       margin-right: $space-small;
+      max-width: 100%;
     }
 
     .in-progress {

app/javascript/widget/components/UserMessageBubble.vue

@@ -44,12 +44,17 @@ export default {
   padding: $space-slab $space-normal $space-slab $space-normal;
   text-align: left;
   word-break: break-word;
+  max-width: 100%;
 
   > a {
     color: $color-primary;
     word-break: break-all;
   }
 
+  .link {
+    text-decoration: underline;
+  }
+
   &.user {
     border-bottom-right-radius: $space-smaller;
 
@@ -59,3 +64,13 @@ export default {
   }
 }
 </style>
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.chat-bubble.user::v-deep pre {
+  background: $color-primary-light;
+  color: $color-body;
+  overflow: scroll;
+  padding: $space-smaller;
+}
+</style>