@cognigy/chat-components-vue 0.2.0 → 0.3.1

package/src/components/messages/VideoMessage.vue

@@ -64,23 +64,23 @@
       </video>
     </div>
 
-    <!-- Download transcript button -->
-    <div v-if="videoData.altText" :class="$style.downloadButtonWrapper">
-      <button
-        :class="[$style.downloadButton, 'webchat-buttons-template-button-video']"
-        @click="downloadTranscript"
-      >
-        <DownloadIcon :class="$style.downloadIcon" />
-        Download Transcript
-      </button>
-      <a
-        ref="downloadLinkRef"
-        :href="transcriptDataUrl"
-        download="video-transcript.txt"
-        style="display: none"
-        aria-hidden="true"
-      />
-    </div>
+    <!-- Download transcript button (split-border: flush card extension below player) -->
+    <button
+      v-if="videoData.altText"
+      :class="[$style.downloadButton, 'webchat-buttons-template-button-video']"
+      @click="downloadTranscript"
+    >
+      <DownloadIcon :class="$style.downloadIcon" />
+      Download Transcript
+    </button>
+    <a
+      v-if="videoData.altText"
+      ref="downloadLinkRef"
+      :href="transcriptDataUrl"
+      download="video-transcript.txt"
+      style="display: none"
+      aria-hidden="true"
+    />
   </div>
 </template>
 
@@ -230,6 +230,10 @@ onMounted(() => {
   border-radius: var(--cc-bubble-border-radius, 15px);
   max-width: 295px;
   position: relative;
+  background-color: var(--cc-white, #ffffff);
+  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);
 }
 
 .player {
@@ -250,8 +254,13 @@ onMounted(() => {
   overflow: hidden;
 }
 
-.wrapperWithButton {
-  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+/* Split-border strategy: playerWrapper gets border with no bottom,
+   downloadButton gets border with no top — seamless card appearance */
+.wrapperWithButton .playerWrapper {
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
+  border-bottom: none;
+  border-radius: var(--cc-bubble-border-radius, 15px) var(--cc-bubble-border-radius, 15px) 0 0;
+  overflow: hidden;
 }
 
 .wrapperWithButton .player {
@@ -259,11 +268,9 @@ onMounted(() => {
   border-bottom-right-radius: 0px;
 }
 
-.downloadButtonWrapper {
-  padding: 16px;
-  background-color: var(--cc-white, #ffffff);
-  border-bottom-left-radius: var(--cc-bubble-border-radius, 15px);
-  border-bottom-right-radius: var(--cc-bubble-border-radius, 15px);
+.wrapperWithButton .lightOverlay {
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
 }
 
 .downloadButton {
@@ -272,11 +279,13 @@ onMounted(() => {
   justify-content: center;
   gap: 10px;
   width: 100%;
+  box-sizing: border-box;
   padding: 12px;
   background-color: var(--cc-primary-color, #1976d2);
   color: var(--cc-primary-contrast-color, #ffffff);
-  border: none;
-  border-radius: 8px;
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
+  border-top: none;
+  border-radius: 0 0 var(--cc-bubble-border-radius, 15px) var(--cc-bubble-border-radius, 15px);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;

package/src/composables/useLiveRegion.ts

@@ -0,0 +1,101 @@
+/**
+ * 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.
+ */
+
+import { onMounted, onUnmounted } from 'vue'
+
+const LIVE_REGION_ID = 'webchat-live-region'
+
+/**
+ * Get or create the shared live region element in the DOM
+ */
+function getOrCreateLiveRegion(): HTMLDivElement {
+  let region = document.getElementById(LIVE_REGION_ID) as HTMLDivElement | null
+
+  if (!region) {
+    region = document.createElement('div')
+    region.id = LIVE_REGION_ID
+    region.setAttribute('role', 'status')
+    region.setAttribute('aria-live', 'polite')
+    region.setAttribute('aria-atomic', 'true')
+
+    // Visually hidden but accessible to screen readers
+    Object.assign(region.style, {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: '0',
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      borderWidth: '0',
+    })
+
+    document.body.appendChild(region)
+  }
+
+  return region
+}
+
+/**
+ * Track reference count so we only clean up when no components are using the region
+ */
+let refCount = 0
+
+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 function useLiveRegion(options: UseLiveRegionOptions): void {
+  onMounted(() => {
+    refCount++
+
+    if (options.enabled === false) return
+    if (!options.announcement) return
+
+    const region = getOrCreateLiveRegion()
+
+    // Clear then set to trigger screen reader re-announcement
+    region.textContent = ''
+    // Use requestAnimationFrame to ensure the empty text is processed first
+    requestAnimationFrame(() => {
+      region.textContent = options.announcement
+    })
+  })
+
+  onUnmounted(() => {
+    refCount--
+
+    // Clean up the live region when no components are using it
+    if (refCount <= 0) {
+      refCount = 0
+      const region = document.getElementById(LIVE_REGION_ID)
+      if (region) {
+        region.textContent = ''
+      }
+    }
+  })
+}

package/src/index.ts

@@ -35,6 +35,7 @@ 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'
 
 // SVG Icons
 export { DownloadIcon, CloseIcon, VideoPlayIcon, AudioPlayIcon, AudioPauseIcon, ArrowBackIcon, LinkIcon } from './assets/svg'
@@ -42,7 +43,7 @@ export { DownloadIcon, CloseIcon, VideoPlayIcon, AudioPlayIcon, AudioPauseIcon,
 // Utilities
 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'
 
 // Types
@@ -55,7 +56,9 @@ export type {
   MessagePlugin,
   MessagePluginOptions,
   MessageContext,
+  MessageParams,
   IMessage,
+  IStreamingMessage,
   IWebchatButton,
   IWebchatQuickReply,
   IWebchatTemplateAttachment,

package/src/types/index.ts

@@ -6,6 +6,30 @@
 import type { IMessage } from '@cognigy/socket-client'
 import type { Component } from 'vue'
 
+// =============================================================================
+// Message Parameter Types
+// =============================================================================
+
+/**
+ * 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 Socket Client Types
 // =============================================================================
@@ -95,6 +119,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?: {
     // Primary action colors
@@ -118,6 +149,12 @@ export interface ChatSettings {
     borderUserMessage?: string
     borderAgentMessage?: string
 
+    // Media card borders (Image, Video, Audio, Gallery, List, TypingIndicator)
+    borderMediaCard?: string
+
+    // List divider color (separator between list items)
+    listDividerColor?: string
+
     // Link color
     textLinkColor?: string
 
@@ -126,6 +163,18 @@ export interface ChatSettings {
     adaptiveCardInputColor?: string
     adaptiveCardInputBackground?: string
     adaptiveCardInputBorder?: string
+
+    // File preview colors (non-image file attachment pills)
+    filePreviewBackground?: string
+    filePreviewTextColor?: string
+    filePreviewSecondaryTextColor?: string
+
+    // Chat event colors (event pill notifications)
+    chatEventBackground?: string
+    chatEventTextColor?: string
+
+    // Message shadow (applied to all message bubbles/cards)
+    messageShadow?: string
   }
   behavior?: {
     renderMarkdown?: boolean
@@ -142,6 +191,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
@@ -247,6 +302,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
 }
 
 /**
@@ -318,6 +381,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
 }
 
 /**

package/src/utils/theme.ts

@@ -2,7 +2,7 @@
  * Theme utilities for config-driven CSS variable injection
  */
 
-import type { ChatSettings } from '../types'
+import type { ChatSettings, ChatTheme } from '../types'
 
 /**
  * Maps config.settings.colors to CSS custom properties.
@@ -47,6 +47,12 @@ export function configColorsToCssVariables(
     '--cc-border-user-message': colors.borderUserMessage,
     '--cc-border-agent-message': colors.borderAgentMessage,
 
+    // Media card borders
+    '--cc-border-media-card': colors.borderMediaCard,
+
+    // List divider color
+    '--cc-list-divider-color': colors.listDividerColor,
+
     // Link color
     '--cc-text-link-color': colors.textLinkColor,
 
@@ -55,6 +61,18 @@ export function configColorsToCssVariables(
     '--cc-adaptive-card-input-color': colors.adaptiveCardInputColor,
     '--cc-adaptive-card-input-background': colors.adaptiveCardInputBackground,
     '--cc-adaptive-card-input-border': colors.adaptiveCardInputBorder,
+
+    // File preview colors
+    '--cc-file-preview-background': colors.filePreviewBackground,
+    '--cc-file-preview-text-color': colors.filePreviewTextColor,
+    '--cc-file-preview-secondary-text-color': colors.filePreviewSecondaryTextColor,
+
+    // Chat event colors
+    '--cc-chat-event-background': colors.chatEventBackground,
+    '--cc-chat-event-text-color': colors.chatEventTextColor,
+
+    // Message shadow
+    '--cc-message-shadow': colors.messageShadow,
   }
 
   // Filter out undefined values and return only defined CSS variables
@@ -62,3 +80,20 @@ export function configColorsToCssVariables(
     Object.entries(mapping).filter(([, value]) => value !== undefined)
   ) as 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 function themeFontToCssVariable(
+  theme?: ChatTheme
+): Record<string, string> {
+  if (!theme?.fontFamily) return {}
+  return { '--cc-font-family': theme.fontFamily }
+}