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

feat: override color and message meta

Browse Source
This commit is contained in:
Shivam Mishra
2025-12-01 16:16:12 +05:30
parent faf6b29626
commit c548f71c1a
6 changed files with 147 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/assets/scss/_next-colors.scss
+34 -1
View File
@@ -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;
app/javascript/dashboard/components-next/message/MessageStatus.vue
+53 -9
View File
@@ -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"
/>
<Icon
v-else
app/javascript/dashboard/components-next/message/bubbles/Base.vue
+14 -3
View File
@@ -79,6 +79,19 @@ const shouldShowMeta = computed(
variant.value !== MESSAGE_VARIANTS.ACTIVITY
);
const metaColorClass = computed(() => {
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"
/>
app/javascript/react-components/doc.md
+22
View File
@@ -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 |
app/javascript/react-components/src/styles/bubble-overrides.css
+16
View File
@@ -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);
}