fix: bubble colors for email and text (#10701)

This commit is contained in:
Shivam Mishra
2025-01-17 00:57:22 +05:30
committed by GitHub
parent c20cb9535b
commit 2f60301064
3 changed files with 19 additions and 5 deletions

View File

@@ -18,12 +18,12 @@ const varaintBaseMap = {
[MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
[MESSAGE_VARIANTS.PRIVATE]:
'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
[MESSAGE_VARIANTS.USER]: 'bg-n-gray-3 text-n-slate-12',
[MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
[MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
[MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
[MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
[MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
[MESSAGE_VARIANTS.EMAIL]: 'bg-n-gray-3 w-full',
[MESSAGE_VARIANTS.EMAIL]: 'w-full',
[MESSAGE_VARIANTS.UNSUPPORTED]:
'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
};

View File

@@ -55,7 +55,7 @@ const showMeta = computed(() => {
<template>
<section
v-show="showMeta"
class="space-y-1 rtl:pl-9 ltr:pr-9 border-b border-n-strong text-sm break-words"
class="space-y-1 rtl:pl-9 ltr:pr-9 text-sm break-words"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
>
<template v-if="showMeta">

View File

@@ -27,6 +27,7 @@ onMounted(() => {
const isOutgoing = computed(() => {
return messageType.value === MESSAGE_TYPES.OUTGOING;
});
const isIncoming = computed(() => !isOutgoing.value);
const fullHTML = computed(() => {
return contentAttributes?.value?.email?.htmlContent?.full ?? content.value;
@@ -48,8 +49,21 @@ const textToShow = computed(() => {
</script>
<template>
<BaseBubble class="w-full" data-bubble-name="email">
<EmailMeta class="p-3" />
<BaseBubble
class="w-full"
:class="{
'bg-n-slate-4': isIncoming,
'bg-n-solid-blue': isOutgoing,
}"
data-bubble-name="email"
>
<EmailMeta
class="p-3"
:class="{
'border-b border-n-strong': isIncoming,
'border-b border-n-slate-8/20': isOutgoing,
}"
/>
<section ref="contentContainer" class="p-3">
<div
:class="{