diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss index 9f3f59182..e1e6e8021 100644 --- a/app/javascript/dashboard/assets/scss/_next-colors.scss +++ b/app/javascript/dashboard/assets/scss/_next-colors.scss @@ -125,7 +125,24 @@ --bubble-radius-sm: calc(0.125rem * var(--bubble-spacing-ratio)); --bubble-radius-md: calc(0.375rem * var(--bubble-spacing-ratio)); --bubble-radius-lg: calc(0.5rem * var(--bubble-spacing-ratio)); - --bubble-padding: calc(0.75rem * var(--bubble-spacing-ratio)); + --bubble-padding-x: calc(1rem * var(--bubble-spacing-ratio)); + --bubble-padding-y: calc(0.75rem * var(--bubble-spacing-ratio)); + + // Bubble meta text colors (per variant) + --bubble-agent-meta: var(--slate-11); + --bubble-user-meta: var(--slate-11); + --bubble-private-meta: var(--amber-12); + --bubble-bot-meta: var(--slate-11); + + // Message status colors (per variant) + --bubble-agent-status: var(--slate-10); + --bubble-agent-status-read: 126 182 255; + --bubble-user-status: var(--slate-10); + --bubble-user-status-read: 126 182 255; + --bubble-private-status: var(--amber-11); + --bubble-private-status-read: 126 182 255; + --bubble-bot-status: var(--slate-10); + --bubble-bot-status-read: 126 182 255; --alpha-1: 67, 67, 67, 0.06; --alpha-2: 201, 202, 207, 0.15; @@ -260,6 +277,22 @@ --bubble-radius-lg: calc(0.5rem * var(--bubble-spacing-ratio)); --bubble-padding: calc(0.75rem * var(--bubble-spacing-ratio)); + // Bubble meta text colors (per variant) + --bubble-agent-meta: var(--slate-11); + --bubble-user-meta: var(--slate-11); + --bubble-private-meta: var(--amber-12); + --bubble-bot-meta: var(--slate-11); + + // Message status colors (per variant) + --bubble-agent-status: var(--slate-10); + --bubble-agent-status-read: 126 182 255; + --bubble-user-status: var(--slate-10); + --bubble-user-status-read: 126 182 255; + --bubble-private-status: var(--amber-11); + --bubble-private-status-read: 126 182 255; + --bubble-bot-status: var(--slate-10); + --bubble-bot-status-read: 126 182 255; + --alpha-1: 36, 36, 36, 0.8; --alpha-2: 139, 147, 182, 0.15; --alpha-3: 36, 38, 45, 0.9; diff --git a/app/javascript/dashboard/components-next/message/MessageStatus.vue b/app/javascript/dashboard/components-next/message/MessageStatus.vue index d8f996cf5..32ed40433 100644 --- a/app/javascript/dashboard/components-next/message/MessageStatus.vue +++ b/app/javascript/dashboard/components-next/message/MessageStatus.vue @@ -2,7 +2,8 @@ import { computed, ref } from 'vue'; import { useIntervalFn } from '@vueuse/core'; import { useI18n } from 'vue-i18n'; -import { MESSAGE_STATUS } from './constants'; +import { MESSAGE_STATUS, MESSAGE_VARIANTS } from './constants'; +import { useMessageContext } from './provider.js'; import Icon from 'next/icon/Icon.vue'; @@ -15,6 +16,19 @@ const { status } = defineProps({ }); const { t } = useI18n(); +const { variant } = useMessageContext(); + +const variantPrefix = computed(() => { + const prefixMap = { + [MESSAGE_VARIANTS.AGENT]: 'agent', + [MESSAGE_VARIANTS.USER]: 'user', + [MESSAGE_VARIANTS.PRIVATE]: 'private', + [MESSAGE_VARIANTS.BOT]: 'bot', + [MESSAGE_VARIANTS.TEMPLATE]: 'bot', + [MESSAGE_VARIANTS.EMAIL]: 'agent', + }; + return prefixMap[variant.value] || 'agent'; +}); const progresIconSequence = [ 'i-lucide-clock-1', @@ -54,14 +68,44 @@ const statusIcon = computed(() => { return statusIconMap[status]; }); -const statusColor = computed(() => { - const statusIconMap = { - [MESSAGE_STATUS.SENT]: 'text-n-slate-10', - [MESSAGE_STATUS.DELIVERED]: 'text-n-slate-10', - [MESSAGE_STATUS.READ]: 'text-[#7EB6FF]', - }; +const statusColorMap = { + agent: { + [MESSAGE_STATUS.SENT]: 'text-[rgb(var(--bubble-agent-status))]', + [MESSAGE_STATUS.DELIVERED]: 'text-[rgb(var(--bubble-agent-status))]', + [MESSAGE_STATUS.READ]: 'text-[rgb(var(--bubble-agent-status-read))]', + }, + user: { + [MESSAGE_STATUS.SENT]: 'text-[rgb(var(--bubble-user-status))]', + [MESSAGE_STATUS.DELIVERED]: 'text-[rgb(var(--bubble-user-status))]', + [MESSAGE_STATUS.READ]: 'text-[rgb(var(--bubble-user-status-read))]', + }, + private: { + [MESSAGE_STATUS.SENT]: 'text-[rgb(var(--bubble-private-status))]', + [MESSAGE_STATUS.DELIVERED]: 'text-[rgb(var(--bubble-private-status))]', + [MESSAGE_STATUS.READ]: 'text-[rgb(var(--bubble-private-status-read))]', + }, + bot: { + [MESSAGE_STATUS.SENT]: 'text-[rgb(var(--bubble-bot-status))]', + [MESSAGE_STATUS.DELIVERED]: 'text-[rgb(var(--bubble-bot-status))]', + [MESSAGE_STATUS.READ]: 'text-[rgb(var(--bubble-bot-status-read))]', + }, +}; - return statusIconMap[status]; +const statusColor = computed(() => { + const variantMap = + statusColorMap[variantPrefix.value] || statusColorMap.agent; + return variantMap[status]; +}); + +const progressColorMap = { + agent: 'text-[rgb(var(--bubble-agent-status))]', + user: 'text-[rgb(var(--bubble-user-status))]', + private: 'text-[rgb(var(--bubble-private-status))]', + bot: 'text-[rgb(var(--bubble-bot-status))]', +}; + +const progressColor = computed(() => { + return progressColorMap[variantPrefix.value] || progressColorMap.agent; }); const tooltipText = computed(() => { @@ -81,7 +125,7 @@ const tooltipText = computed(() => { v-if="status === MESSAGE_STATUS.PROGRESS" v-tooltip.top-start="tooltipText" :icon="progessIcon" - class="text-n-slate-10" + :class="progressColor" /> { + const metaClassMap = { + [MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-meta))]', + [MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-meta))]', + [MESSAGE_VARIANTS.PRIVATE]: + 'text-[rgb(var(--bubble-private-meta))] opacity-50', + [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))]', + }; + return metaClassMap[variant.value] || 'text-[rgb(var(--bubble-agent-meta))]'; +}); + const replyToPreview = computed(() => { if (!inReplyTo) return ''; @@ -121,9 +134,7 @@ const replyToPreview = computed(() => { :class="[ flexOrientationClass, variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '', - variant === MESSAGE_VARIANTS.PRIVATE - ? 'text-n-amber-12/50' - : 'text-n-slate-11', + metaColorClass, ]" class="mt-2" /> diff --git a/app/javascript/react-components/doc.md b/app/javascript/react-components/doc.md index d2f617ca5..815cc3173 100644 --- a/app/javascript/react-components/doc.md +++ b/app/javascript/react-components/doc.md @@ -421,6 +421,28 @@ The Web Component supports runtime theming via CSS custom properties. These vari | `--chatwoot-bubble-bot-bg` | Bot/template message background | `--solid-iris` | | `--chatwoot-bubble-bot-text` | Bot message text | `--slate-12` | +#### Meta (timestamp) - Per Variant + +| Variable | Description | Default | +|----------|-------------|---------| +| `--chatwoot-bubble-agent-meta` | Meta text for agent messages | `--slate-11` | +| `--chatwoot-bubble-user-meta` | Meta text for user messages | `--slate-11` | +| `--chatwoot-bubble-private-meta` | Meta text for private notes (50% opacity applied) | `--amber-12` | +| `--chatwoot-bubble-bot-meta` | Meta text for bot messages | `--slate-11` | + +#### Message Status Icons - Per Variant + +| Variable | Description | Default | +|----------|-------------|---------| +| `--chatwoot-bubble-agent-status` | Agent: sent/delivered/progress color | `--slate-10` | +| `--chatwoot-bubble-agent-status-read` | Agent: read receipt color | `126 182 255` | +| `--chatwoot-bubble-user-status` | User: sent/delivered/progress color | `--slate-10` | +| `--chatwoot-bubble-user-status-read` | User: read receipt color | `126 182 255` | +| `--chatwoot-bubble-private-status` | Private: sent/delivered/progress color | `--amber-11` | +| `--chatwoot-bubble-private-status-read` | Private: read receipt color | `126 182 255` | +| `--chatwoot-bubble-bot-status` | Bot: sent/delivered/progress color | `--slate-10` | +| `--chatwoot-bubble-bot-status-read` | Bot: read receipt color | `126 182 255` | + #### Spacing | Variable | Description | Default | diff --git a/app/javascript/react-components/src/styles/bubble-overrides.css b/app/javascript/react-components/src/styles/bubble-overrides.css index ac19cf771..fce9bcc5c 100644 --- a/app/javascript/react-components/src/styles/bubble-overrides.css +++ b/app/javascript/react-components/src/styles/bubble-overrides.css @@ -36,6 +36,22 @@ --bubble-bot-bg: var(--chatwoot-bubble-bot-bg, var(--solid-iris)); --bubble-bot-text: var(--chatwoot-bubble-bot-text, var(--slate-12)); + /* Meta text colors (per variant) */ + --bubble-agent-meta: var(--chatwoot-bubble-agent-meta, var(--slate-11)); + --bubble-user-meta: var(--chatwoot-bubble-user-meta, var(--slate-11)); + --bubble-private-meta: var(--chatwoot-bubble-private-meta, var(--amber-12)); + --bubble-bot-meta: var(--chatwoot-bubble-bot-meta, var(--slate-11)); + + /* Message status icon colors (per variant) */ + --bubble-agent-status: var(--chatwoot-bubble-agent-status, var(--slate-10)); + --bubble-agent-status-read: var(--chatwoot-bubble-agent-status-read, 126 182 255); + --bubble-user-status: var(--chatwoot-bubble-user-status, var(--slate-10)); + --bubble-user-status-read: var(--chatwoot-bubble-user-status-read, 126 182 255); + --bubble-private-status: var(--chatwoot-bubble-private-status, var(--amber-11)); + --bubble-private-status-read: var(--chatwoot-bubble-private-status-read, 126 182 255); + --bubble-bot-status: var(--chatwoot-bubble-bot-status, var(--slate-10)); + --bubble-bot-status-read: var(--chatwoot-bubble-bot-status-read, 126 182 255); + /* Spacing - 1 = default */ --bubble-spacing-ratio: var(--chatwoot-bubble-spacing-ratio, 1); } diff --git a/tailwind.config.js b/tailwind.config.js index b1033358c..43dd5eee4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -49,7 +49,7 @@ const tailwindConfig = { typography: { bubble: { css: { - color: 'rgb(var(--slate-12))', + color: 'inherit', // Inherit from parent bubble for theme customization lineHeight: '1.6', fontSize: '14px', '*': { @@ -60,17 +60,17 @@ const tailwindConfig = { overflowWrap: 'anywhere', strong: { - color: 'rgb(var(--slate-12))', + color: 'inherit', fontWeight: '700', }, b: { - color: 'rgb(var(--slate-12))', + color: 'inherit', fontWeight: '700', }, h1: { - color: 'rgb(var(--slate-12))', + color: 'inherit', fontWeight: '700', fontSize: '1.25rem', '&:first-child': { @@ -78,7 +78,7 @@ const tailwindConfig = { }, }, h2: { - color: 'rgb(var(--slate-12))', + color: 'inherit', fontWeight: '700', fontSize: '1rem', '&:first-child': { @@ -86,7 +86,7 @@ const tailwindConfig = { }, }, h3: { - color: 'rgb(var(--slate-12))', + color: 'inherit', fontWeight: '700', fontSize: '1rem', '&:first-child': { @@ -98,7 +98,7 @@ const tailwindConfig = { marginBottom: '1.5em', }, a: { - color: 'rgb(var(--slate-12))', + color: 'inherit', textDecoration: 'underline', }, ul: { @@ -161,7 +161,7 @@ const tailwindConfig = { }, th: { padding: '0.75em', - color: 'rgb(var(--slate-12))', + color: 'inherit', border: `none`, textAlign: 'start', fontWeight: '600',