feat: allow overrides

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -119,6 +119,14 @@
     --bubble-bot-bg: var(--solid-iris);
     --bubble-bot-text: var(--slate-12);
 
+    // Bubble spacing (ratio of 1 = default, 1.5 = 50% larger, 0.5 = 50% smaller)
+    --bubble-spacing-ratio: 1;
+    --bubble-radius: calc(0.75rem * var(--bubble-spacing-ratio));
+    --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));
+
     --alpha-1: 67, 67, 67, 0.06;
     --alpha-2: 201, 202, 207, 0.15;
     --alpha-3: 255, 255, 255, 0.96;
@@ -244,6 +252,14 @@
     --bubble-bot-bg: var(--solid-iris);
     --bubble-bot-text: var(--slate-12);
 
+    // Bubble spacing (inherited from light mode, can be overridden)
+    --bubble-spacing-ratio: 1;
+    --bubble-radius: calc(0.75rem * var(--bubble-spacing-ratio));
+    --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));
+
     --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/bubbles/Base.vue

@@ -38,10 +38,10 @@ const varaintBaseMap = {
 
 const orientationMap = {
   [ORIENTATION.LEFT]:
-    'left-bubble rounded-xl ltr:rounded-bl-sm rtl:rounded-br-sm',
+    'left-bubble rounded-[var(--bubble-radius)] ltr:rounded-bl-[var(--bubble-radius-sm)] rtl:rounded-br-[var(--bubble-radius-sm)]',
   [ORIENTATION.RIGHT]:
-    'right-bubble rounded-xl ltr:rounded-br-sm rtl:rounded-bl-sm',
-  [ORIENTATION.CENTER]: 'rounded-md',
+    'right-bubble rounded-[var(--bubble-radius)] ltr:rounded-br-[var(--bubble-radius-sm)] rtl:rounded-bl-[var(--bubble-radius-sm)]',
+  [ORIENTATION.CENTER]: 'rounded-[var(--bubble-radius-md)]',
 };
 
 const flexOrientationClass = computed(() => {
@@ -60,7 +60,7 @@ const messageClass = computed(() => {
   if (variant.value !== MESSAGE_VARIANTS.ACTIVITY) {
     classToApply.push(orientationMap[orientation.value]);
   } else {
-    classToApply.push('rounded-lg');
+    classToApply.push('rounded-[var(--bubble-radius-lg)]');
   }
 
   return classToApply;

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

@@ -23,7 +23,6 @@ const attachment = computed(() => {
 
 const { isLoaded, hasError, loadWithRetry } = useLoadWithRetry();
 
-const showGallery = ref(false);
 const isDownloading = ref(false);
 const { showGallery, isGalleryAllowed, toggleGallery } = useGallery();
 

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

@@ -0,0 +1,41 @@
+/*
+ * Runtime Theme Customization for Chatwoot Web Components
+ *
+ * Consumers can override bubble styles from outside the Shadow DOM.
+ * Set these CSS variables on :root or any ancestor element:
+ *
+ * COLORS (RGB values without commas, e.g., "59 130 246"):
+ *   --chatwoot-bubble-agent-bg: Agent message background
+ *   --chatwoot-bubble-agent-text: Agent message text
+ *   --chatwoot-bubble-user-bg: User message background
+ *   --chatwoot-bubble-user-text: User message text
+ *   --chatwoot-bubble-private-bg: Private note background
+ *   --chatwoot-bubble-private-text: Private note text
+ *   --chatwoot-bubble-bot-bg: Bot message background
+ *   --chatwoot-bubble-bot-text: Bot message text
+ *
+ * SPACING:
+ *   --chatwoot-bubble-spacing-ratio: Scale factor for border radius (1 = default)
+ *
+ * Example usage in consumer's CSS:
+ *   :root {
+ *     --chatwoot-bubble-agent-bg: 59 130 246;
+ *     --chatwoot-bubble-user-bg: 243 244 246;
+ *     --chatwoot-bubble-spacing-ratio: 1.5;
+ *   }
+ */
+
+:host {
+  /* Colors - falls back to theme defaults from _next-colors.scss */
+  --bubble-agent-bg: var(--chatwoot-bubble-agent-bg, var(--solid-blue));
+  --bubble-agent-text: var(--chatwoot-bubble-agent-text, var(--slate-12));
+  --bubble-user-bg: var(--chatwoot-bubble-user-bg, var(--slate-4));
+  --bubble-user-text: var(--chatwoot-bubble-user-text, var(--slate-12));
+  --bubble-private-bg: var(--chatwoot-bubble-private-bg, var(--solid-amber));
+  --bubble-private-text: var(--chatwoot-bubble-private-text, var(--amber-12));
+  --bubble-bot-bg: var(--chatwoot-bubble-bot-bg, var(--solid-iris));
+  --bubble-bot-text: var(--chatwoot-bubble-bot-text, var(--slate-12));
+
+  /* Spacing - 1 = default */
+  --bubble-spacing-ratio: var(--chatwoot-bubble-spacing-ratio, 1);
+}

app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue

@@ -7,47 +7,7 @@ import MessageList from '../../../ui/MessageList.vue';
 </template>
 
 <style>
-/*
- * Runtime Theme Customization
- *
- * Consumers can override bubble colors from outside the Shadow DOM.
- * Set these CSS variables on :root or any ancestor element:
- *
- *   --chatwoot-bubble-agent-bg: RGB values for agent message background
- *   --chatwoot-bubble-agent-text: RGB values for agent message text
- *   --chatwoot-bubble-user-bg: RGB values for user message background
- *   --chatwoot-bubble-user-text: RGB values for user message text
- *   --chatwoot-bubble-private-bg: RGB values for private note background
- *   --chatwoot-bubble-private-text: RGB values for private note text
- *   --chatwoot-bubble-bot-bg: RGB values for bot message background
- *   --chatwoot-bubble-bot-text: RGB values for bot message text
- *
- * Example usage in consumer's CSS:
- *   :root {
- *     --chatwoot-bubble-agent-bg: 59 130 246;
- *     --chatwoot-bubble-user-bg: 243 244 246;
- *   }
- */
-:host {
-  /* FUNKY TEST COLORS - remove these overrides for production */
-  --bubble-agent-bg: var(
-    --chatwoot-bubble-agent-bg,
-    255 105 180
-  ); /* Hot Pink */
-  --bubble-agent-text: var(--chatwoot-bubble-agent-text, 255 255 255);
-  --bubble-user-bg: var(
-    --chatwoot-bubble-user-bg,
-    144 238 144
-  ); /* Lime Green */
-  --bubble-user-text: var(--chatwoot-bubble-user-text, 28 32 36);
-  --bubble-private-bg: var(
-    --chatwoot-bubble-private-bg,
-    255 165 0
-  ); /* Orange */
-  --bubble-private-text: var(--chatwoot-bubble-private-text, 79 52 34);
-  --bubble-bot-bg: var(--chatwoot-bubble-bot-bg, 0 255 255); /* Cyan */
-  --bubble-bot-text: var(--chatwoot-bubble-bot-text, 28 32 36);
-}
+/* Bubble theme overrides are in src/styles/bubble-overrides.css */
 
 .file-uploads {
   overflow: hidden;

app/javascript/react-components/src/vue-components/registerWebComponents.js

@@ -4,6 +4,7 @@ import chatwootStyles from '../../../dashboard/assets/scss/app.scss?inline';
 import multiselectStyles from 'vue-multiselect/dist/vue-multiselect.css?inline';
 import floatingVueStyles from 'floating-vue/dist/style.css?inline';
 import uploadStyles from '../styles/upload.css?inline';
+import bubbleOverrideStyles from '../styles/bubble-overrides.css?inline';
 import en from '../../../dashboard/i18n/locale/en';
 import store from '../../../dashboard/store';
 import vueActionCable from '../../../dashboard/helper/actionCable';
@@ -34,7 +35,14 @@ const ceOptions = {
     // eslint-disable-next-line no-underscore-dangle
     vueActionCable.init(store, window.__PUBSUB_TOKEN__);
   },
-  styles: [chatwootStyles, multiselectStyles, floatingVueStyles, uploadStyles],
+  // bubbleOverrideStyles MUST be last to override _next-colors.scss
+  styles: [
+    chatwootStyles,
+    multiselectStyles,
+    floatingVueStyles,
+    uploadStyles,
+    bubbleOverrideStyles,
+  ],
 };
 
 // Convert Vue components to Web Components