feat: setup overrides for error and email

app/javascript/dashboard/components-next/message/bubbles/Base.vue

@@ -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

@@ -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

@@ -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>

app/javascript/react-components/doc.md

@@ -420,6 +420,10 @@ The Web Component supports runtime theming via CSS custom properties. These vari
 | `--chatwoot-bubble-private-text` | Private note text | `--amber-12` |
 | `--chatwoot-bubble-bot-bg` | Bot/template message background | `--solid-iris` |
 | `--chatwoot-bubble-bot-text` | Bot message text | `--slate-12` |
+| `--chatwoot-bubble-error-bg` | Error message background | `--ruby-4` |
+| `--chatwoot-bubble-error-text` | Error message text | `--ruby-12` |
+| `--chatwoot-bubble-unsupported-bg` | Unsupported message background | `--amber-4` |
+| `--chatwoot-bubble-unsupported-text` | Unsupported message text | `--amber-12` |
 
 #### Meta (timestamp) - Per Variant
 
@@ -429,6 +433,7 @@ The Web Component supports runtime theming via CSS custom properties. These vari
 | `--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` |
+| `--chatwoot-bubble-error-meta` | Meta text for error messages | `--ruby-11` |
 
 #### Message Status Icons - Per Variant
 
@@ -458,6 +463,8 @@ The Web Component supports runtime theming via CSS custom properties. These vari
 | `--chatwoot-bubble-user-border` | User message border color | `--slate-6` |
 | `--chatwoot-bubble-private-border` | Private note border color | `--amber-6` |
 | `--chatwoot-bubble-bot-border` | Bot message border color | `--iris-6` |
+| `--chatwoot-bubble-error-border` | Error message border color | `--ruby-6` |
+| `--chatwoot-bubble-unsupported-border` | Unsupported message border color | `--amber-12` |
 
 ### Usage Examples
 

app/javascript/react-components/src/styles/bubble-overrides.css

@@ -13,10 +13,16 @@
  *   --chatwoot-bubble-private-text: Private note text
  *   --chatwoot-bubble-bot-bg: Bot message background
  *   --chatwoot-bubble-bot-text: Bot message text
+ *   --chatwoot-bubble-error-bg: Error message background
+ *   --chatwoot-bubble-error-text: Error message text
+ *   --chatwoot-bubble-unsupported-bg: Unsupported message background
+ *   --chatwoot-bubble-unsupported-text: Unsupported message text
  *   --chatwoot-bubble-agent-border: Agent message border color
  *   --chatwoot-bubble-user-border: User message border color
  *   --chatwoot-bubble-private-border: Private note border color
  *   --chatwoot-bubble-bot-border: Bot message border color
+ *   --chatwoot-bubble-error-border: Error message border color
+ *   --chatwoot-bubble-unsupported-border: Unsupported message border color
  *
  * BORDER:
  *   --chatwoot-bubble-border-width: Border width in px (0 = invisible, default: 0)
@@ -67,6 +73,17 @@
   --bubble-private-border: var(--chatwoot-bubble-private-border, var(--amber-6));
   --bubble-bot-border: var(--chatwoot-bubble-bot-border, var(--iris-6));
 
+  /* Error variant */
+  --bubble-error-bg: var(--chatwoot-bubble-error-bg, var(--ruby-4));
+  --bubble-error-text: var(--chatwoot-bubble-error-text, var(--ruby-12));
+  --bubble-error-meta: var(--chatwoot-bubble-error-meta, var(--ruby-11));
+  --bubble-error-border: var(--chatwoot-bubble-error-border, var(--ruby-6));
+
+  /* Unsupported variant */
+  --bubble-unsupported-bg: var(--chatwoot-bubble-unsupported-bg, var(--amber-4));
+  --bubble-unsupported-text: var(--chatwoot-bubble-unsupported-text, var(--amber-12));
+  --bubble-unsupported-border: var(--chatwoot-bubble-unsupported-border, var(--amber-12));
+
   /* Spacing - 1 = default */
   --bubble-spacing-ratio: var(--chatwoot-bubble-spacing-ratio, 1);
 }