diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss index 22092f7d4..9f3f59182 100644 --- a/app/javascript/dashboard/assets/scss/_next-colors.scss +++ b/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; diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue index c78bf9a54..77e7d963d 100644 --- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue +++ b/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; diff --git a/app/javascript/dashboard/components-next/message/bubbles/Image.vue b/app/javascript/dashboard/components-next/message/bubbles/Image.vue index 209f24366..03aed39d2 100644 --- a/app/javascript/dashboard/components-next/message/bubbles/Image.vue +++ b/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(); diff --git a/app/javascript/react-components/src/styles/bubble-overrides.css b/app/javascript/react-components/src/styles/bubble-overrides.css new file mode 100644 index 000000000..ac19cf771 --- /dev/null +++ b/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); +} diff --git a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue index bc555ab06..9699ac063 100644 --- a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue +++ b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue @@ -7,47 +7,7 @@ import MessageList from '../../../ui/MessageList.vue';