@cognigy/chat-components-vue 0.1.0 → 0.3.0

package/dist/components/Message.vue.d.ts

@@ -3,6 +3,10 @@ declare const _default: import('vue').DefineComponent<MessageProps, {}, {}, {},
     action: import('..').MessageSender;
     config: import('..').ChatConfig;
     onEmitAnalytics: (event: string, payload?: unknown) => void;
+    openXAppOverlay: (url: string | undefined) => void;
+    onImageClick: (url: string) => void;
+    messageParams: import('..').MessageParams;
+    onSlideChange: (index: number, total: number) => void;
     theme: import('..').ChatTheme;
     prevMessage: import('@cognigy/socket-client').IMessage;
     disableHeader: boolean;

package/dist/components/common/Typography.vue.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'vue';
-export type TagVariant = 'h1-semibold' | 'h2-regular' | 'h2-semibold' | 'title1-semibold' | 'title1-regular' | 'title2-semibold' | 'title2-regular' | 'body-regular' | 'body-semibold' | 'copy-medium' | 'cta-semibold';
+export type TagVariant = "h1-semibold" | "h2-regular" | "h2-semibold" | "title1-semibold" | "title1-regular" | "title2-semibold" | "title2-regular" | "body-regular" | "body-semibold" | "copy-medium" | "cta-semibold";
 interface Props {
     variant?: TagVariant;
     component?: string;

package/dist/components/messages/AdaptiveCardRenderer.vue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Host config input type - plain object that HostConfig constructor parses.
+ * We don't use Partial<HostConfig> because HostConfig properties are class instances,
+ * but the constructor accepts plain objects and converts them internally.
+ */
+type HostConfigInput = Record<string, unknown>;
+interface Props {
+    /**
+     * The Adaptive Card payload to render
+     */
+    payload?: Record<string, unknown>;
+    /**
+     * Host configuration for styling the card.
+     * Accepts a plain object matching the HostConfig structure - the library
+     * parses this internally when constructing the HostConfig instance.
+     */
+    hostConfig?: HostConfigInput;
+    /**
+     * When true, disables all inputs and buttons after rendering
+     * Useful for displaying submitted cards in chat history
+     */
+    readonly?: boolean;
+    /**
+     * Data to pre-fill into input fields
+     * Keys should match input element IDs in the card
+     * Used to show submitted values in chat history
+     */
+    inputData?: Record<string, unknown>;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    readonly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    targetRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/messages/ListItem.vue.d.ts

@@ -2,7 +2,7 @@ import { IWebchatAttachmentElement } from '../../types';
 interface Props {
     element: IWebchatAttachmentElement;
     isHeaderElement?: boolean;
-    headingLevel?: 'h4' | 'h5';
+    headingLevel?: "h4" | "h5";
     id: string;
     dividerBefore?: boolean;
     dividerAfter?: boolean;

package/dist/composables/useLiveRegion.d.ts

@@ -0,0 +1,30 @@
+/**
+ * useLiveRegion composable
+ *
+ * Manages an ARIA live region for screen reader announcements.
+ * Creates/reuses a single visually-hidden <div role="status" aria-live="polite"> element
+ * in the DOM, and announces content when messages arrive.
+ *
+ * This matches the React reference implementation's approach to accessibility
+ * announcements for message components.
+ */
+interface UseLiveRegionOptions {
+    /** Text to announce to screen readers */
+    announcement: string;
+    /** Whether the announcement should be made (defaults to true) */
+    enabled?: boolean;
+}
+/**
+ * Composable that announces content to screen readers via an ARIA live region.
+ *
+ * @example
+ * ```typescript
+ * // In a message component:
+ * useLiveRegion({
+ *   announcement: `New message: ${messageText}`,
+ *   enabled: !props.ignoreLiveRegion,
+ * })
+ * ```
+ */
+export declare function useLiveRegion(options: UseLiveRegionOptions): void;
+export {};

package/dist/index.d.ts

@@ -24,10 +24,11 @@ export { useSanitize } from './composables/useSanitize';
 export { useImageContext, provideImageContext, ImageContextKey } from './composables/useImageContext';
 export { useChannelPayload, type UseChannelPayloadReturn } from './composables/useChannelPayload';
 export { useCollation, type UseCollationReturn, type CollatedMessage } from './composables/useCollation';
+export { useLiveRegion } from './composables/useLiveRegion';
 export { DownloadIcon, CloseIcon, VideoPlayIcon, AudioPlayIcon, AudioPauseIcon, ArrowBackIcon, LinkIcon } from './assets/svg';
 export { match, getChannelPayload } from './utils/matcher';
 export { sanitizeHTMLWithConfig, sanitizeContent } from './utils/sanitize';
-export { configColorsToCssVariables } from './utils/theme';
+export { configColorsToCssVariables, themeFontToCssVariable } from './utils/theme';
 export { getWebchatButtonLabel, interpolateString, getRandomId, moveFocusToMessageFocusTarget, replaceUrlsWithHTMLanchorElem, getBackgroundImage, getFileName, getFileExtension, getSizeLabel, isImageAttachment, VALID_IMAGE_MIME_TYPES } from './utils/helpers';
-export type { ChatConfig, ChatSettings, ChatTheme, MessageProps, MessageSender, MessagePlugin, MessagePluginOptions, MessageContext, IMessage, IWebchatButton, IWebchatQuickReply, IWebchatTemplateAttachment, IWebchatAttachmentElement, IWebchatAudioAttachment, IWebchatImageAttachment, IWebchatVideoAttachment, IUploadFileAttachmentData, IDatePickerData, IWebchatChannelPayload, } from './types';
+export type { ChatConfig, ChatSettings, ChatTheme, MessageProps, MessageSender, MessagePlugin, MessagePluginOptions, MessageContext, MessageParams, IMessage, IStreamingMessage, IWebchatButton, IWebchatQuickReply, IWebchatTemplateAttachment, IWebchatAttachmentElement, IWebchatAudioAttachment, IWebchatImageAttachment, IWebchatVideoAttachment, IUploadFileAttachmentData, IDatePickerData, IWebchatChannelPayload, } from './types';
 export type { TagVariant } from './components/common/Typography.vue';

package/dist/types/index.d.ts

@@ -1,5 +1,23 @@
 import { IMessage, IWebchatQuickReply as QuickReply, IWebchatTemplateAttachment as TemplateAttachment, IWebchatAudioAttachment as AudioAttachment, IWebchatImageAttachment as ImageAttachment, IWebchatVideoAttachment as VideoAttachment } from '@cognigy/socket-client';
 import { Component } from 'vue';
+/**
+ * Parameters about the current message state in the conversation.
+ * Used to control interactive element behavior (e.g., disabling quick replies after user reply).
+ */
+export interface MessageParams {
+    /** Whether the user has already replied to this message (disables quick reply buttons) */
+    hasReply?: boolean;
+    /** Whether the conversation has ended (disables all interactive elements) */
+    isConversationEnded?: boolean;
+}
+/**
+ * Extended IMessage with streaming animation state.
+ * Used with progressive message rendering to conditionally show/hide elements
+ * based on whether the message is still being streamed.
+ */
+export interface IStreamingMessage extends IMessage {
+    animationState?: 'start' | 'animating' | 'done';
+}
 /**
  * Extended IMessage with optional runtime properties not in base interface.
  * The socket-client IMessage doesn't include 'id', but it may be present at runtime.
@@ -61,6 +79,13 @@ export interface ChatSettings {
         disableUrlButtonSanitization?: boolean;
         dynamicImageAspectRatio?: boolean;
         showEngagementInChat?: boolean;
+        /**
+         * Gallery layout variant:
+         * - 'default': Standard gallery with 206px wide slides
+         * - 'compact': Narrower slides with smaller navigation buttons
+         * - 'copilot': Adaptive sizing based on card count (1-card, 2-card, 3+ layouts)
+         */
+        galleryVariant?: 'default' | 'compact' | 'copilot';
     };
     colors?: {
         primaryColor?: string;
@@ -78,7 +103,19 @@ export interface ChatSettings {
         borderBotMessage?: string;
         borderUserMessage?: string;
         borderAgentMessage?: string;
+        borderMediaCard?: string;
+        listDividerColor?: string;
         textLinkColor?: string;
+        adaptiveCardTextColor?: string;
+        adaptiveCardInputColor?: string;
+        adaptiveCardInputBackground?: string;
+        adaptiveCardInputBorder?: string;
+        filePreviewBackground?: string;
+        filePreviewTextColor?: string;
+        filePreviewSecondaryTextColor?: string;
+        chatEventBackground?: string;
+        chatEventTextColor?: string;
+        messageShadow?: string;
     };
     behavior?: {
         renderMarkdown?: boolean;
@@ -86,6 +123,21 @@ export interface ChatSettings {
         messageDelay?: number;
         collateStreamedOutputs?: boolean;
         focusInputAfterPostback?: boolean;
+        /**
+         * Controls adaptive card interactivity.
+         * - `true`: All cards are readonly (presentation only), regardless of submitted data
+         * - `false` or `undefined`: Smart default - readonly only if card has submitted data
+         *
+         * Use `true` for chat history/transcript displays where no interaction is needed.
+         * Use `false`/omit for interactive chat interfaces with smart auto-detection.
+         */
+        adaptiveCardsReadonly?: boolean;
+        /**
+         * When true, buttons/quick replies are hidden while a message is still being streamed.
+         * Works with IStreamingMessage.animationState to delay showing interactive elements
+         * until the text animation is complete.
+         */
+        progressiveMessageRendering?: boolean;
     };
     widgetSettings?: {
         enableDefaultPreview?: boolean;
@@ -174,6 +226,14 @@ export interface MessageProps {
     disableHeader?: boolean;
     plugins?: MessagePlugin[];
     onEmitAnalytics?: (event: string, payload?: unknown) => void;
+    /** Conversation state parameters (hasReply, isConversationEnded) */
+    messageParams?: MessageParams;
+    /** Callback to open an xApp overlay (for openXApp button type) */
+    openXAppOverlay?: (url: string | undefined) => void;
+    /** Callback when gallery slide changes — receives (activeIndex, totalSlides) */
+    onSlideChange?: (index: number, total: number) => void;
+    /** Callback when an image is clicked — receives the image URL */
+    onImageClick?: (url: string) => void;
 }
 /**
  * Options for match rules and plugins
@@ -230,6 +290,14 @@ export interface MessageContext {
     theme?: ChatTheme;
     action?: MessageSender;
     onEmitAnalytics?: (event: string, payload?: unknown) => void;
+    /** Conversation state parameters (hasReply, isConversationEnded) */
+    messageParams?: MessageParams;
+    /** Callback to open an xApp overlay (for openXApp button type) */
+    openXAppOverlay?: (url: string | undefined) => void;
+    /** Callback when gallery slide changes — receives (activeIndex, totalSlides) */
+    onSlideChange?: (index: number, total: number) => void;
+    /** Callback when an image is clicked — receives the image URL */
+    onImageClick?: (url: string) => void;
 }
 /**
  * DatePicker plugin data interface
@@ -271,5 +339,41 @@ export interface IWebchatChannelPayload {
         quick_replies?: QuickReply[];
         attachment?: TemplateAttachment | AudioAttachment | ImageAttachment | VideoAttachment;
     };
-    adaptiveCard?: unknown;
+    adaptiveCard?: Record<string, unknown>;
+    /** Submitted adaptive card data */
+    adaptiveCardData?: Record<string, unknown>;
+    data?: Record<string, unknown>;
+    formData?: Record<string, unknown>;
+}
+/**
+ * Cognigy message data structure
+ * Shape of message.data._cognigy
+ */
+export interface ICognigyData {
+    _webchat?: IWebchatChannelPayload;
+    _defaultPreview?: IWebchatChannelPayload;
+    _facebook?: IWebchatChannelPayload;
+}
+/**
+ * Plugin payload structure for custom message types
+ */
+export interface IPluginPayload {
+    type?: string;
+    payload?: Record<string, unknown>;
+}
+/**
+ * Extended message data with Cognigy-specific fields
+ * Use this when accessing message.data with Cognigy payload structures
+ */
+export interface IMessageDataExtended {
+    _cognigy?: ICognigyData;
+    _plugin?: IPluginPayload;
+    /** Adaptive card submission request data */
+    request?: {
+        value?: Record<string, unknown>;
+    };
+    /** Direct adaptive card data fields (fallback locations) */
+    adaptiveCardData?: Record<string, unknown>;
+    data?: Record<string, unknown>;
+    formData?: Record<string, unknown>;
 }

package/dist/utils/helpers.d.ts

@@ -24,6 +24,7 @@ export declare function moveFocusToMessageFocusTarget(dataMessageId: string): vo
  * - Works with URLs starting with http/https, www., or just domain/subdomain
  * - Will only match URLs at the beginning or following whitespace
  * - Will not work with emails
+ * - URLs are escaped to prevent injection attacks
  */
 export declare function replaceUrlsWithHTMLanchorElem(text: string): string;
 /**
@@ -47,9 +48,9 @@ export declare function getFileExtension(fileNameWithExtension: string): string
  */
 export declare function getSizeLabel(size: number): string;
 /**
- * Valid image MIME types for file attachments
+ * Valid image MIME types for file attachments (Set for O(1) lookup)
  */
-export declare const VALID_IMAGE_MIME_TYPES: string[];
+export declare const VALID_IMAGE_MIME_TYPES: Set<string>;
 /**
  * Checks if attachment is a valid image type
  */

package/dist/utils/matcher.d.ts

@@ -5,9 +5,9 @@ import { ChatConfig, MatchRule, MessagePlugin, MatchResult } from '../types';
  */
 export declare function getChannelPayload(message: IMessage, config?: ChatConfig): any;
 /**
- * Default match rules for internal message types.
- * These rules map message data structures to component names.
- * Components are resolved by name lookup in Message.vue.
+ * Returns a copy of the default match rules.
+ * Exposed for testing and extension purposes.
+ * Returns a new array to prevent mutation of internal rules.
  */
 export declare function createDefaultMatchRules(): MatchRule[];
 /**

package/dist/utils/theme.d.ts

@@ -1,4 +1,4 @@
-import { ChatSettings } from '../types';
+import { ChatSettings, ChatTheme } from '../types';
 /**
  * Maps config.settings.colors to CSS custom properties.
  * Returns an object suitable for use as an inline style that sets CSS variables.
@@ -16,3 +16,14 @@ import { ChatSettings } from '../types';
  * ```
  */
 export declare function configColorsToCssVariables(colors?: ChatSettings['colors']): Record<string, string>;
+/**
+ * Maps a ChatTheme's fontFamily to the --cc-font-family CSS variable.
+ * Consumers can set this to override the default Figtree font.
+ *
+ * Components should reference font-family as:
+ *   font-family: var(--cc-font-family, 'Figtree', sans-serif);
+ *
+ * @param theme - The ChatTheme object
+ * @returns A record with the --cc-font-family CSS variable, or empty object
+ */
+export declare function themeFontToCssVariable(theme?: ChatTheme): Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognigy/chat-components-vue",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Vue 3 version of @cognigy/chat-components",
   "license": "MIT",
@@ -52,6 +52,9 @@
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:update": "playwright test --update-snapshots",
+    "test:e2e:ui": "playwright test --ui",
     "lint": "eslint .",
     "type-check": "vue-tsc --noEmit",
     "prepare": "npm run build"
@@ -63,13 +66,15 @@
     "@braintree/sanitize-url": "^7.1.1",
     "@cognigy/socket-client": "5.0.0-beta.25",
     "@fontsource/figtree": "5.2.10",
+    "adaptivecards": "^3.0.5",
     "dompurify": "^3.0.11",
     "flatpickr": "^4.6.13",
     "markdown-it": "^14.1.0",
     "moment": "^2.30.1",
-    "swiper": "^12.0.3"
+    "swiper": "^11.2.10"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^25.0.9",
     "@vitejs/plugin-vue": "^6.0.0",
@@ -78,7 +83,7 @@
     "eslint": "^9.0.0",
     "eslint-plugin-vue": "^10.7.0",
     "globals": "^17.0.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^28.0.0",
     "npm-check-updates": "^19.3.1",
     "typescript": "^5.9.0",
     "typescript-eslint": "^8.53.1",

package/src/components/Message.vue

@@ -22,26 +22,32 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useCssModule, type Component } from 'vue'
-import { match } from '../utils/matcher'
-import { configColorsToCssVariables } from '../utils/theme'
-import { provideMessageContext } from '../composables/useMessageContext'
-import { getMessageId, isMessagePlugin } from '../types'
-import type { MessageProps } from '../types'
-
-const $style = useCssModule()
+import {
+  computed,
+  reactive,
+  watchEffect,
+  useCssModule,
+  type Component,
+} from "vue";
+import { match } from "../utils/matcher";
+import {configColorsToCssVariables, themeFontToCssVariable} from "../utils/theme";
+import { provideMessageContext } from "../composables/useMessageContext";
+import { getMessageId, isMessagePlugin } from "../types";
+import type { MessageProps, MessageContext } from "../types";
+
+const $style = useCssModule();
 
 // Import all message type components
-import TextMessage from './messages/TextMessage.vue'
-import ImageMessage from './messages/ImageMessage.vue'
-import VideoMessage from './messages/VideoMessage.vue'
-import AudioMessage from './messages/AudioMessage.vue'
-import TextWithButtons from './messages/TextWithButtons.vue'
-import Gallery from './messages/Gallery.vue'
-import List from './messages/List.vue'
-import FileMessage from './messages/FileMessage.vue'
-import DatePicker from './messages/DatePicker.vue'
-import AdaptiveCard from './messages/AdaptiveCard.vue'
+import TextMessage from "./messages/TextMessage.vue";
+import ImageMessage from "./messages/ImageMessage.vue";
+import VideoMessage from "./messages/VideoMessage.vue";
+import AudioMessage from "./messages/AudioMessage.vue";
+import TextWithButtons from "./messages/TextWithButtons.vue";
+import Gallery from "./messages/Gallery.vue";
+import List from "./messages/List.vue";
+import FileMessage from "./messages/FileMessage.vue";
+import DatePicker from "./messages/DatePicker.vue";
+import AdaptiveCard from "./messages/AdaptiveCard.vue";
 
 const props = withDefaults(defineProps<MessageProps>(), {
   action: undefined,
@@ -51,70 +57,108 @@ const props = withDefaults(defineProps<MessageProps>(), {
   plugins: undefined,
   onEmitAnalytics: undefined,
   disableHeader: false,
-})
+  messageParams: undefined,
+  openXAppOverlay: undefined,
+  onSlideChange: undefined,
+  onImageClick: undefined,
+});
 
 // Generate a unique message ID for accessibility
-const dataMessageId = computed(() => getMessageId(props.message))
+const dataMessageId = computed(() => getMessageId(props.message));
 
 // Provide message context for child components
-provideMessageContext({
+// Using reactive object synced via watchEffect for proper reactivity tracking
+const messageContext = reactive<MessageContext>({
   message: props.message,
-  config: props.config || {},
-  action: props.action || (() => {}),
-  onEmitAnalytics: props.onEmitAnalytics || (() => {}),
-})
+  config: props.config,
+  action: props.action,
+  onEmitAnalytics: props.onEmitAnalytics,
+  messageParams: props.messageParams,
+  openXAppOverlay: props.openXAppOverlay,
+  onSlideChange: props.onSlideChange,
+  onImageClick: props.onImageClick,
+});
+
+// Keep context in sync with props changes
+watchEffect(() => {
+  messageContext.message = props.message
+  messageContext.config = props.config
+  messageContext.action = props.action
+  messageContext.onEmitAnalytics = props.onEmitAnalytics
+  messageContext.messageParams = props.messageParams
+  messageContext.openXAppOverlay = props.openXAppOverlay
+  messageContext.onSlideChange = props.onSlideChange
+  messageContext.onImageClick = props.onImageClick
+});
+
+provideMessageContext(messageContext);
 
 // Component map for internal match rules (maps rule names to Vue components)
 const componentMap: Record<string, Component> = {
-  'Text': TextMessage,
-  'Image': ImageMessage,
-  'Video': VideoMessage,
-  'Audio': AudioMessage,
-  'TextWithButtons': TextWithButtons,
-  'Gallery': Gallery,
-  'List': List,
-  'File': FileMessage,
-  'DatePicker': DatePicker,
-  'AdaptiveCard': AdaptiveCard,
-}
+  Text: TextMessage,
+  Image: ImageMessage,
+  Video: VideoMessage,
+  Audio: AudioMessage,
+  TextWithButtons: TextWithButtons,
+  Gallery: Gallery,
+  List: List,
+  File: FileMessage,
+  DatePicker: DatePicker,
+  AdaptiveCard: AdaptiveCard,
+};
 
 // Match message to appropriate components
 const matchedComponents = computed(() => {
-  const matched = match(props.message, props.config, props.plugins)
+  const matched = match(props.message, props.config, props.plugins);
 
   if (!Array.isArray(matched) || matched.length < 1) {
-    return []
+    return [];
   }
 
   // Resolve components from match results
   return matched
-    .map(rule => {
+    .map((rule) => {
       // External plugins (MessagePlugin) provide their own component
       if (isMessagePlugin(rule)) {
-        return rule.component
+        return rule.component;
       }
       // Internal rules (MatchRule) use name lookup in componentMap
-      return componentMap[rule.name] ?? null
+      return componentMap[rule.name] ?? null;
     })
-    .filter((c): c is Component => c !== null)
+    .filter((c): c is Component => c !== null);
+});
+
+// Compute direction based on source + config mapping
+const directionMapping = computed(() => props.config?.settings?.widgetSettings?.sourceDirectionMapping)
+
+const messageDirection = computed(() => {
+  const source = props.message.source
+  if (source === 'user') return directionMapping.value?.user || 'outgoing'
+  if (source === 'bot') return directionMapping.value?.bot || 'incoming'
+  if (source === 'agent') return directionMapping.value?.agent || 'incoming'
+  return 'incoming'
 })
 
 // Root element classes
 const rootClasses = computed(() => {
   return [
     'webchat-message-row',
-    props.message.source,
+    props.message.source,              // keep global source class (for ChatBubble color selectors)
     $style.message,
-    props.message.source === 'bot' && $style.bot,
-    props.message.source === 'user' && $style.user,
-    props.message.source === 'agent' && $style.agent,
+    props.message.source === "bot" && $style.bot,
+    props.message.source === "user" && $style.user,
+    props.message.source === "agent" && $style.agent,
+    $style[messageDirection.value],    // incoming or outgoing alignment
   ].filter(Boolean)
 })
 
-// CSS variable injection from config colors
+// CSS variable injection from config colors and theme font
 const cssVariableStyle = computed(() => {
-  return configColorsToCssVariables(props.config?.settings?.colors)
-})
+  return {
+    ...configColorsToCssVariables(props.config?.settings?.colors),
+    ...themeFontToCssVariable(props.theme),
+  }
+});
 </script>
 
 <style module>
@@ -123,20 +167,19 @@ const cssVariableStyle = computed(() => {
   flex-direction: column;
   gap: 8px;
   margin-bottom: 16px;
+  font-family: var(--cc-font-family, 'Figtree', sans-serif);
+  padding-left: 56px;
+  padding-right: 16px;
 }
 
-.message.bot {
+.message.incoming {
   align-items: flex-start;
 }
 
-.message.user {
+.message.outgoing {
   align-items: flex-end;
 }
 
-.message.agent {
-  align-items: flex-start;
-}
-
 /* Screen reader only */
 .srOnly {
   position: absolute;

package/src/components/common/ActionButton.vue

@@ -282,7 +282,7 @@ a.button {
   gap: 10px;
   text-decoration: none;
   background: var(--cc-primary-color);
-  color: var(--cc-primary-contrast-color);
+  color: var(--cc-primary-contrast-color, #ffffff);
   border: none;
   outline: none;
   position: relative;
@@ -296,7 +296,7 @@ button.button svg,
 a.button svg,
 button.button path,
 a.button svg path {
-  fill: var(--cc-primary-contrast-color);
+  fill: var(--cc-primary-contrast-color, #ffffff);
   width: 12px;
 }
 
@@ -304,16 +304,25 @@ button.button:hover,
 a.button:hover,
 button.button:focus,
 a.button:focus {
-  background: var(--cc-primary-color-hover);
+  background: var(--cc-primary-color-hover, color-mix(in srgb, var(--cc-primary-color), black 15%));
 }
 
 /* Explicitly increase the specificity of the :focus-visible selector */
 [data-cognigy-webchat-root] button.button:focus-visible,
 [data-cognigy-webchat-root] a.button:focus-visible,
 [data-cognigy-webchat-root] a.button:global(.phone-number-or-url-anchor):focus-visible {
-  outline: 2px solid var(--cc-primary-color-focus);
+  outline: 2px solid var(--cc-primary-color-focus, var(--cc-primary-color));
   outline-offset: 2px;
-  box-shadow: 0 0 0 4px var(--cc-primary-contrast-color);
+  box-shadow: 0 0 0 4px var(--cc-primary-contrast-color, #ffffff);
+}
+
+/* Fallback for consumers without [data-cognigy-webchat-root] wrapper.
+   :where() has zero specificity, so the rules above win when the wrapper exists. */
+:where(button.button):focus-visible,
+:where(a.button):focus-visible {
+  outline: 2px solid var(--cc-primary-color-focus, var(--cc-primary-color));
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--cc-primary-contrast-color, #ffffff);
 }
 
 button.button:disabled,
@@ -322,7 +331,7 @@ button.button:disabled:focus,
 a.button.disabled,
 a.button.disabled:hover,
 a.button.disabled:focus {
-  background: var(--cc-primary-color-disabled);
+  background: var(--cc-primary-color-disabled, color-mix(in srgb, var(--cc-primary-color) 40%, #999));
   cursor: default;
   pointer-events: none;
 }
@@ -349,6 +358,6 @@ a.button.disabled:focus {
   left: 0;
   width: 40px;
   height: 100%;
-  border-right: 2px solid var(--cc-primary-contrast-color);
+  border-right: 2px solid var(--cc-primary-contrast-color, #ffffff);
 }
 </style>