mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 11:37:58 +00:00
2a385f377c
* 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>
69 lines
1.2 KiB
Vue
Executable File
69 lines
1.2 KiB
Vue
Executable File
<template>
|
|
<div
|
|
v-dompurify-html="formatMessage(message, false)"
|
|
class="chat-bubble user"
|
|
:style="{ background: widgetColor, color: textColor }"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
|
import { getContrastingTextColor } from '@chatwoot/utils';
|
|
|
|
export default {
|
|
name: 'UserMessageBubble',
|
|
mixins: [messageFormatterMixin],
|
|
props: {
|
|
message: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
status: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
widgetColor: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
computed: {
|
|
textColor() {
|
|
return getContrastingTextColor(this.widgetColor);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.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>
|