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

@@ -26,6 +26,9 @@ $space-big: 4rem;
 $space-jumbo: 5rem;
 $space-mega: 6.25rem;
 
+$border-radius-small: 0.1875rem;
+$border-radius-normal: 0.3125rem;
+
 // font-weight
 $font-weight-feather: 100;
 $font-weight-light: 300;
@@ -74,8 +77,16 @@ $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
 
-$font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
-  Roboto, 'Helvetica Neue', Tahoma, Arial, sans-serif;
+$font-family: 'Inter',
+-apple-system,
+system-ui,
+BlinkMacSystemFont,
+'Segoe UI',
+Roboto,
+'Helvetica Neue',
+Tahoma,
+Arial,
+sans-serif;
 
 // Break points
 $break-point-medium: 667px;

app/javascript/widget/assets/scss/views/_conversation.scss

@@ -1,4 +1,4 @@
-.file-uploads .attachment-button+label {
+.file-uploads .attachment-button + label {
   cursor: pointer;
 }
 
@@ -61,7 +61,7 @@
   }
 
   .agent-message-wrap {
-    +.agent-message-wrap {
+    + .agent-message-wrap {
       margin-top: $space-micro;
 
       .agent-message .chat-bubble {
@@ -69,11 +69,11 @@
       }
     }
 
-    +.user-message-wrap {
+    + .user-message-wrap {
       margin-top: $space-normal;
     }
 
-    &.has-response+.user-message-wrap {
+    &.has-response + .user-message-wrap {
       margin-top: $space-micro;
 
       .chat-bubble {
@@ -81,7 +81,7 @@
       }
     }
 
-    &.has-response+.agent-message-wrap {
+    &.has-response + .agent-message-wrap {
       margin-top: $space-normal;
     }
   }
@@ -117,7 +117,6 @@
     }
   }
 
-
   .user.has-attachment {
     .icon-wrap {
       color: $color-white;
@@ -129,7 +128,7 @@
   }
 
   .user-message-wrap {
-    +.user-message-wrap {
+    + .user-message-wrap {
       margin-top: $space-micro;
 
       .user-message .chat-bubble {
@@ -137,7 +136,7 @@
       }
     }
 
-    +.agent-message-wrap {
+    + .agent-message-wrap {
       margin-top: $space-normal;
     }
   }
@@ -147,7 +146,6 @@
   }
 }
 
-
 .unread-messages {
   display: flex;
   flex-direction: column;
@@ -168,7 +166,7 @@
       border: 1px solid $color-border-dark;
     }
 
-    +.chat-bubble-wrap {
+    + .chat-bubble-wrap {
       .chat-bubble {
         border-top-left-radius: $space-smaller;
       }
@@ -190,7 +188,7 @@
       border-radius: $space-two;
     }
 
-    +.chat-bubble-wrap {
+    + .chat-bubble-wrap {
       .chat-bubble {
         border-top-right-radius: $space-smaller;
       }
@@ -206,7 +204,6 @@
   }
 }
 
-
 .chat-bubble {
   @include light-shadow;
   border-radius: $space-two;
@@ -214,6 +211,7 @@
   display: inline-block;
   font-size: $font-size-default;
   line-height: 1.5;
+  max-width: 100%;
   padding: $space-slab $space-normal;
   text-align: left;
   word-break: break-word;
@@ -222,7 +220,7 @@
     max-width: 100%;
   }
 
-  >a {
+  > a {
     color: $color-primary;
     word-break: break-all;
   }
@@ -234,7 +232,7 @@
   &.user {
     border-bottom-right-radius: $space-smaller;
 
-    >a {
+    > a {
       color: $color-white;
     }
   }