chore: Use markdown-it instead of marked (#6123)

* chore: Use markdown-it instead of marked

* Adds styling for markdown rendered content

* fixes codeclimate issue

* Fixes blockquote styles for widget in darkmode

* fix: issue block quote color issue in light mode

* fix: issue block quote color issue in light mode

* Fixes blockquote color in dark mode

* Remove usage of dark mode mixin in user bubble

* chore: code clean up

---------

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -5,7 +5,7 @@
         !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
       "
       class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-700')"
+      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
     >
       <div
         v-dompurify-html="formatMessage(message, false)"
@@ -142,14 +142,3 @@ export default {
   },
 };
 </script>
-
-<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-y: auto;
-  padding: $space-smaller;
-}
-</style>

app/javascript/widget/components/ChatMessage.vue

@@ -35,3 +35,56 @@ export default {
   max-width: 90%;
 }
 </style>
+
+<style lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.chat-bubble .message-content,
+.chat-bubble.user {
+  p code {
+    background-color: var(--s-75);
+    display: inline-block;
+    line-height: 1;
+
+    border-radius: $border-radius-small;
+    padding: $space-smaller;
+  }
+
+  pre {
+    overflow-y: auto;
+    background-color: var(--s-75);
+    border-color: var(--s-75);
+    color: var(--s-800);
+    border-radius: $border-radius-normal;
+    padding: $space-small;
+    margin-top: $space-smaller;
+    margin-bottom: $space-small;
+    display: block;
+    line-height: 1.7;
+    white-space: pre-wrap;
+
+    code {
+      background-color: transparent;
+      color: var(--s-800);
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: $space-micro solid var(--s-75);
+    color: var(--s-800);
+    padding: $space-smaller $space-small;
+    margin: $space-smaller 0;
+    padding: $space-small $space-small 0 $space-normal;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .chat-bubble.agent.has-dark-mode {
+    blockquote {
+      border-color: var(--s-200);
+      color: var(--s-50);
+    }
+  }
+}
+</style>

app/javascript/widget/components/UserMessageBubble.vue

@@ -38,10 +38,31 @@ export default {
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
-.chat-bubble.user::v-deep pre {
-  background: $color-primary-light;
-  color: $color-body;
-  overflow: auto;
-  padding: $space-smaller;
+.chat-bubble.user::v-deep {
+  p code {
+    background-color: var(--w-600);
+    color: var(--white);
+  }
+
+  pre {
+    background-color: var(--w-800);
+    border-color: var(--w-700);
+    color: var(--white);
+
+    code {
+      background-color: transparent;
+      color: var(--white);
+    }
+  }
+
+  blockquote {
+    border-left: $space-micro solid var(--w-400);
+    background: var(--s-25);
+    border-color: var(--s-200);
+
+    p {
+      color: var(--s-800);
+    }
+  }
 }
 </style>