@cognigy/chat-components-vue 0.2.0 → 0.3.1

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/ActionButton.vue.d.ts

@@ -24,6 +24,7 @@ interface Props {
     dataMessageId?: string;
     onEmitAnalytics?: AnalyticsEventCallback;
     size?: 'small' | 'large';
+    variant?: 'primary' | 'secondary';
     id?: string;
     className?: string;
     openXAppOverlay?: (url: string | undefined) => void;
@@ -44,6 +45,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     disabled: boolean;
     config: ChatConfig;
     className: string;
+    variant: "primary" | "secondary";
     customIcon: CustomIcon;
     showUrlIcon: boolean;
     dataMessageId: string;

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

@@ -14,6 +14,7 @@ interface Props {
     dataMessageId?: string;
     onEmitAnalytics?: AnalyticsEventCallback;
     size?: 'small' | 'large';
+    variant?: 'primary' | 'secondary';
     templateTextId?: string;
     openXAppOverlay?: (url: string | undefined) => void;
 }
@@ -22,6 +23,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     action: MessageSender;
     config: ChatConfig;
     className: string;
+    variant: "primary" | "secondary";
     customIcon: CustomIcon;
     showUrlIcon: boolean;
     dataMessageId: string;

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/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,11 +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;
@@ -99,6 +132,12 @@ export interface ChatSettings {
          * 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;
@@ -187,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
@@ -243,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

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.2.0",
+  "version": "0.3.1",
   "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"
@@ -71,6 +74,7 @@
     "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",
@@ -79,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, reactive, watchEffect, 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, MessageContext } 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,10 +57,14 @@ 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
 // Using reactive object synced via watchEffect for proper reactivity tracking
@@ -63,7 +73,11 @@ const messageContext = reactive<MessageContext>({
   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(() => {
@@ -71,61 +85,80 @@ watchEffect(() => {
   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)
+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>
@@ -134,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

@@ -33,6 +33,7 @@ interface Props {
   dataMessageId?: string
   onEmitAnalytics?: AnalyticsEventCallback
   size?: 'small' | 'large'
+  variant?: 'primary' | 'secondary'
   id?: string
   className?: string
   openXAppOverlay?: (url: string | undefined) => void
@@ -47,6 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
   dataMessageId: undefined,
   onEmitAnalytics: undefined,
   size: 'small',
+  variant: 'primary',
   id: undefined,
   className: '',
   openXAppOverlay: undefined,
@@ -158,6 +160,7 @@ const target = computed(() => {
 // CSS classes
 const buttonClasses = computed(() => {
   const classes = [styles.button]
+  if (props.variant === 'secondary') classes.push(styles.secondary)
   if (isWebURL.value) classes.push(styles.url)
   if (props.className) classes.push(props.className)
   if (props.disabled) {
@@ -282,7 +285,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 +299,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 +307,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,11 +334,45 @@ 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;
+}
+
+/* Secondary variant: outlined style */
+button.button.secondary,
+a.button.secondary {
+  background: transparent;
+  color: var(--cc-primary-color);
+  border: 1px solid var(--cc-primary-color);
+}
+
+button.button.secondary:hover,
+a.button.secondary:hover,
+button.button.secondary:focus,
+a.button.secondary:focus {
+  background: color-mix(in srgb, var(--cc-primary-color) 10%, transparent);
+}
+
+button.button.secondary:disabled,
+button.button.secondary:disabled:hover,
+a.button.secondary.disabled,
+a.button.secondary.disabled:hover {
+  background: transparent;
+  color: var(--cc-primary-color-disabled, color-mix(in srgb, var(--cc-primary-color) 40%, #999));
+  border-color: var(--cc-primary-color-disabled, color-mix(in srgb, var(--cc-primary-color) 40%, #999));
   cursor: default;
   pointer-events: none;
 }
 
+/* Focus-visible for secondary */
+:where(button.button.secondary):focus-visible,
+:where(a.button.secondary):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);
+}
+
 .buttonLabelWithImage {
   margin-left: 40px;
 }
@@ -349,6 +395,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>

package/src/components/common/ActionButtons.vue

@@ -18,6 +18,7 @@ interface Props {
   dataMessageId?: string
   onEmitAnalytics?: AnalyticsEventCallback
   size?: 'small' | 'large'
+  variant?: 'primary' | 'secondary'
   templateTextId?: string
   openXAppOverlay?: (url: string | undefined) => void
 }
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   dataMessageId: undefined,
   onEmitAnalytics: undefined,
   size: 'small',
+  variant: 'primary',
   templateTextId: undefined,
   openXAppOverlay: undefined,
 })
@@ -118,6 +120,7 @@ const containerClasses = computed(() => {
           :config="config"
           :on-emit-analytics="onEmitAnalytics"
           :size="size"
+          :variant="variant"
           :data-message-id="dataMessageId"
           :class-name="buttonClassName"
           :open-x-app-overlay="openXAppOverlay"
@@ -140,6 +143,7 @@ const containerClasses = computed(() => {
         :config="config"
         :on-emit-analytics="onEmitAnalytics"
         :size="size"
+        :variant="variant"
         :data-message-id="dataMessageId"
         :class-name="buttonClassName"
         :open-x-app-overlay="openXAppOverlay"

package/src/components/common/ChatBubble.vue

@@ -64,7 +64,6 @@ const bubbleStyle = computed((): CSSProperties => {
 
 <style module>
 .bubble {
-  border-radius: 15px;
   border: 1px solid var(--cc-border-bot-message, transparent);
   padding: 12px;
   max-width: 295px;
@@ -73,6 +72,9 @@ const bubbleStyle = computed((): CSSProperties => {
   margin-block-end: 12px;
   word-break: break-word;
   white-space: pre-wrap;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .bubble.disableBorder {
@@ -97,13 +99,13 @@ article:global(.user) .bubble {
   color: var(--cc-user-message-contrast-color, #ffffff);
 }
 
-article:not(:global(.user)) .incoming,
-article:global(.user) .incoming {
-  margin-inline-start: none;
+.incoming {
+  margin-inline-start: 0;
+  border-radius: 15px 15px 15px 0;
 }
 
-article:not(:global(.user)) .outgoing,
-article:global(.user) .outgoing {
+.outgoing {
   margin-inline-start: auto;
+  border-radius: 15px 15px 0 15px;
 }
 </style>