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/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);
}