LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Pranav Raj S
2023-03-02 23:56:54 -08:00
committed by GitHub
parent ec04ddc725
commit 2a385f377c
13 changed files with 332 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/widget/assets/scss/_variables.scss
View File

@@ -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;

26
app/javascript/widget/assets/scss/views/_conversation.scss
View File

@@ -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;
}
}

13
app/javascript/widget/components/AgentMessageBubble.vue
View File

@@ -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>

53
app/javascript/widget/components/ChatMessage.vue
View File

@@ -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>

31
app/javascript/widget/components/UserMessageBubble.vue
View File

@@ -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>