akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: setup overrides for error and email

Browse Source
This commit is contained in:
Shivam Mishra
2026-01-16 13:24:50 +05:30
parent 8cacf95aae
commit 87e8c50ee1
5 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/bubbles/Base.vue
+4 -2
View File
@@ -30,10 +30,11 @@ const varaintBaseMap = {
'bg-[rgb(var(--bubble-bot-bg))] text-[rgb(var(--bubble-bot-text))] border-[length:var(--bubble-border-width)] border-[rgb(var(--bubble-bot-border))]',
[MESSAGE_VARIANTS.TEMPLATE]:
'bg-[rgb(var(--bubble-bot-bg))] text-[rgb(var(--bubble-bot-text))] border-[length:var(--bubble-border-width)] border-[rgb(var(--bubble-bot-border))]',
[MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
[MESSAGE_VARIANTS.ERROR]:
'bg-[rgb(var(--bubble-error-bg))] text-[rgb(var(--bubble-error-text))] border-[length:var(--bubble-border-width)] border-[rgb(var(--bubble-error-border))]',
[MESSAGE_VARIANTS.EMAIL]: 'w-full',
[MESSAGE_VARIANTS.UNSUPPORTED]:
'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
'bg-[rgb(var(--bubble-unsupported-bg))]/70 border border-dashed border-[rgb(var(--bubble-unsupported-border))] text-[rgb(var(--bubble-unsupported-text))]',
};
const orientationMap = {
@@ -88,6 +89,7 @@ const metaColorClass = computed(() => {
[MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-meta))]',
[MESSAGE_VARIANTS.TEMPLATE]: 'text-[rgb(var(--bubble-bot-meta))]',
[MESSAGE_VARIANTS.EMAIL]: 'text-[rgb(var(--bubble-agent-meta))]',
[MESSAGE_VARIANTS.ERROR]: 'text-[rgb(var(--bubble-error-meta))]',
};
return metaClassMap[variant.value] || 'text-[rgb(var(--bubble-agent-meta))]';
});
app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
+22 -7
View File
@@ -1,14 +1,32 @@
<script setup>
import { computed } from 'vue';
import { MESSAGE_STATUS } from '../../constants';
import { MESSAGE_STATUS, MESSAGE_TYPES } from '../../constants';
import { useMessageContext } from '../../provider.js';
const { contentAttributes, status, sender } = useMessageContext();
const { contentAttributes, status, sender, messageType } = useMessageContext();
const hasError = computed(() => {
return status.value === MESSAGE_STATUS.FAILED;
});
const isIncoming = computed(() => {
return messageType.value === MESSAGE_TYPES.INCOMING;
});
const secondaryTextClass = computed(() => {
if (hasError.value) return 'text-[rgb(var(--bubble-error-meta))]';
return isIncoming.value
? 'text-[rgb(var(--bubble-user-meta))]'
: 'text-[rgb(var(--bubble-agent-meta))]';
});
const primaryTextClass = computed(() => {
if (hasError.value) return 'text-[rgb(var(--bubble-error-text))]';
return isIncoming.value
? 'text-[rgb(var(--bubble-user-text))]'
: 'text-[rgb(var(--bubble-agent-text))]';
});
const fromEmail = computed(() => {
return contentAttributes.value?.email?.from ?? [];
});
@@ -68,13 +86,10 @@ const showMeta = computed(() => {
<section
v-show="showMeta"
class="space-y-1 rtl:pl-9 ltr:pr-9 text-sm break-words"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
:class="secondaryTextClass"
>
<template v-if="showMeta">
<div
v-if="fromEmail[0]"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'"
>
<div v-if="fromEmail[0]" :class="primaryTextClass">
<template v-if="senderName">
<span>
{{ senderName }}
app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+6 -6
View File
@@ -104,11 +104,11 @@ const handleSeeOriginal = () => {
<template>
<BaseBubble
class="w-full px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)]"
class="w-full px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)] border-[length:var(--bubble-border-width)]"
:class="{
'bg-[rgb(var(--bubble-user-bg))] text-[rgb(var(--bubble-user-text))]':
'bg-[rgb(var(--bubble-user-bg))] text-[rgb(var(--bubble-user-text))] border-[rgb(var(--bubble-user-border))]':
isIncoming,
'bg-[rgb(var(--bubble-agent-bg))] text-[rgb(var(--bubble-agent-text))]':
'bg-[rgb(var(--bubble-agent-bg))] text-[rgb(var(--bubble-agent-text))] border-[rgb(var(--bubble-agent-border))]':
isOutgoing,
}"
data-bubble-name="email"
@@ -131,9 +131,9 @@ const handleSeeOriginal = () => {
v-if="isExpandable && !isExpanded"
class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end"
:class="{
'bg-gradient-to-t from-n-slate-4 via-n-slate-4 via-20% to-transparent':
'bg-gradient-to-t from-[rgb(var(--bubble-user-bg))] via-[rgb(var(--bubble-user-bg))] via-20% to-transparent':
isIncoming,
'bg-gradient-to-t from-n-solid-blue via-n-solid-blue via-20% to-transparent':
'bg-gradient-to-t from-[rgb(var(--bubble-agent-bg))] via-[rgb(var(--bubble-agent-bg))] via-20% to-transparent':
isOutgoing,
}"
>
@@ -147,7 +147,7 @@ const handleSeeOriginal = () => {
</div>
<FormattedContent
v-if="isOutgoing && content && !hasEmailContent"
class="text-n-slate-12"
class="text-[rgb(var(--bubble-agent-text))]"
:content="messageContent"
/>
<template v-else>