@cognigy/chat-components-vue 0.1.0 → 0.3.0

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/useCollation.ts

@@ -44,35 +44,22 @@ export interface UseCollationReturn {
 }
 
 /**
- * Check if two messages can be collated together
+ * Check if two messages can be collated together.
+ * Both must be bot messages with text, no rich content, attachments, or plugins.
  */
 function canCollate(current: IMessage, previous: IMessage): boolean {
-  // Must both be bot messages
-  if (current.source !== 'bot' || previous.source !== 'bot') {
-    return false
-  }
-
-  // Must both be simple text messages (no rich content)
-  if (current.data?._cognigy?._webchat || previous.data?._cognigy?._webchat) {
-    return false
-  }
-
-  // Must both have text
-  if (!current.text || !previous.text) {
-    return false
-  }
-
-  // Don't collate if either has attachments
-  if (current.data?.attachments || previous.data?.attachments) {
-    return false
-  }
-
-  // Don't collate plugin messages
-  if (current.data?._plugin || previous.data?._plugin) {
-    return false
-  }
-
-  return true
+  return (
+    current.source === 'bot' &&
+    previous.source === 'bot' &&
+    Boolean(current.text) &&
+    Boolean(previous.text) &&
+    !current.data?._cognigy?._webchat &&
+    !previous.data?._cognigy?._webchat &&
+    !current.data?.attachments &&
+    !previous.data?.attachments &&
+    !current.data?._plugin &&
+    !previous.data?._plugin
+  )
 }
 
 /**
@@ -109,37 +96,33 @@ export function useCollation(
 
     const result: CollatedMessage[] = []
 
-    for (let i = 0; i < msgs.length; i++) {
-      const current = msgs[i]
+    for (const current of msgs) {
+      const lastIndex = result.length - 1
+      const lastCollated = result[lastIndex]
 
-      // Check if we can collate with the last message in result
-      if (result.length > 0) {
-        const lastCollated = result[result.length - 1]
-        const lastOriginal = lastCollated.collatedFrom
-          ? lastCollated.collatedFrom[lastCollated.collatedFrom.length - 1]
+      if (lastCollated) {
+        const existingCollatedFrom = lastCollated.collatedFrom
+        const lastOriginal = existingCollatedFrom
+          ? existingCollatedFrom[existingCollatedFrom.length - 1]
           : lastCollated
 
         if (canCollate(current, lastOriginal)) {
-          // Collate: combine texts with newline separator
-          const existingText = lastCollated.text ?? ''
-          const currentText = current.text ?? ''
-
-          const collatedFrom = lastCollated.collatedFrom
-            ? [...lastCollated.collatedFrom, current]
+          // Collate: create new object with combined text (avoid mutating existing)
+          const collatedFrom = existingCollatedFrom
+            ? [...existingCollatedFrom, current]
             : [lastOriginal, current]
 
-          // Update the last message with combined text (joined by newline)
-          result[result.length - 1] = {
+          result[lastIndex] = {
             ...lastCollated,
-            text: existingText + '\n' + currentText,
+            text: (lastCollated.text ?? '') + '\n' + (current.text ?? ''),
             collatedFrom,
           }
           continue
         }
       }
 
-      // Can't collate, add as new message
-      result.push(current as CollatedMessage)
+      // Can't collate, add as new message (shallow copy to avoid mutating original)
+      result.push({ ...current })
     }
 
     return result

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
 // =============================================================================
@@ -22,7 +46,7 @@ export interface IMessageWithId extends IMessage {
  * Type guard to check if a message has an id property
  */
 export function hasMessageId(message: IMessage): message is IMessageWithId & { id: string } {
-  return 'id' in message && typeof (message as IMessageWithId).id === 'string'
+  return 'id' in message && typeof message.id === 'string'
 }
 
 /**
@@ -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,8 +149,32 @@ 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
+
+    // Adaptive Card colors
+    adaptiveCardTextColor?: string
+    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
@@ -127,6 +182,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
@@ -232,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
 }
 
 /**
@@ -303,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
 }
 
 /**
@@ -369,5 +455,44 @@ 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/src/utils/helpers.ts

@@ -4,6 +4,13 @@
 
 import type {IWebchatButton, IWebchatQuickReply} from '../types'
 
+// Pre-compiled regex patterns (compiled once at module load)
+const TEMPLATE_PLACEHOLDER_REGEX = /{(\w+)}/g
+const URL_MATCHER_REGEX =
+  /(^|\s)(\b(https?):\/\/([-A-Z0-9+&@$#/%?=~_|!:,.;\p{L}]*[-A-Z0-9+&$@#/%=~_|\p{L}]))/giu
+const CONTROL_CHARS_REGEX = /[\r\n\f]/g
+const URL_SCHEME_REGEX = /^[a-zA-Z][a-zA-Z0-9+.-]*:/
+
 /**
  * Gets the label for a button
  * Returns "Call" for phone_number buttons without title
@@ -29,7 +36,7 @@ export function interpolateString(
   template: string,
   replacements: Record<string, string>
 ): string {
-  return template.replace(/{(\w+)}/g, (_, key) => {
+  return template.replace(TEMPLATE_PLACEHOLDER_REGEX, (_, key) => {
     return key in replacements ? replacements[key] : ''
   })
 }
@@ -55,19 +62,31 @@ export function moveFocusToMessageFocusTarget(dataMessageId: string): void {
   }, 0)
 }
 
+/**
+ * Escapes HTML special characters to prevent injection attacks
+ */
+function escapeHtmlAttribute(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
 /**
  * Helper function that replaces URLs in a string with HTML anchor elements
  * - 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 function replaceUrlsWithHTMLanchorElem(text: string): string {
-  // Enhanced regex to capture URLs with parameters
-  const urlMatcherRegex =
-    /(^|\s)(\b(https?):\/\/([-A-Z0-9+&@$#/%?=~_|!:,.;\p{L}]*[-A-Z0-9+&$@#/%=~_|\p{L}]))/giu
-
-  return text.replace(urlMatcherRegex, (url) => {
-    return `<a href="${url}" target="_blank">${url}</a>`
+  return text.replace(URL_MATCHER_REGEX, (_, prefix, url) => {
+    // Escape URL for safe insertion into HTML attributes and content
+    const escapedUrl = escapeHtmlAttribute(url)
+    // Preserve leading whitespace, but keep it outside the anchor
+    return `${prefix}<a href="${escapedUrl}" target="_blank">${escapedUrl}</a>`
   })
 }
 
@@ -79,13 +98,13 @@ export function getBackgroundImage(url: string): string | undefined {
   if (!url) return undefined
 
   // Remove control characters that could break CSS parsing
-  let sanitized = url.replace(/[\r\n\f]/g, '')
+  let sanitized = url.replace(CONTROL_CHARS_REGEX, '')
 
   // If the string looks like an absolute URL (has a scheme), validate allowed protocols (http/https).
-  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(sanitized)) {
+  if (URL_SCHEME_REGEX.test(sanitized)) {
     try {
       const parsed = new URL(sanitized)
-      if (!/^https?:$/i.test(parsed.protocol)) {
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
         return undefined
       }
       // Normalize absolute URLs
@@ -117,13 +136,12 @@ const ONE_KB = 1000
  * Example: "document.pdf" → "document."
  */
 export function getFileName(fileNameWithExtension: string): string {
-  const splitName = fileNameWithExtension.split('.')
-  if (splitName.length > 1) {
-    return `${splitName.slice(0, -1).join('.')}.`
-  } else {
-    // return full name here if it didn't have a file ending
-    return fileNameWithExtension
+  const lastDotIndex = fileNameWithExtension.lastIndexOf('.')
+  if (lastDotIndex > 0) {
+    return fileNameWithExtension.slice(0, lastDotIndex + 1)
   }
+  // Return full name if no extension
+  return fileNameWithExtension
 }
 
 /**
@@ -131,12 +149,11 @@ export function getFileName(fileNameWithExtension: string): string {
  * Example: "document.pdf" → "pdf"
  */
 export function getFileExtension(fileNameWithExtension: string): string | null {
-  const splitName = fileNameWithExtension.split('.')
-  if (splitName.length > 1) {
-    return splitName.pop() || null
-  } else {
-    return null
+  const lastDotIndex = fileNameWithExtension.lastIndexOf('.')
+  if (lastDotIndex > 0 && lastDotIndex < fileNameWithExtension.length - 1) {
+    return fileNameWithExtension.slice(lastDotIndex + 1)
   }
+  return null
 }
 
 /**
@@ -152,13 +169,18 @@ export 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 const VALID_IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+export const VALID_IMAGE_MIME_TYPES = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+])
 
 /**
  * Checks if attachment is a valid image type
  */
 export function isImageAttachment(mimeType: string): boolean {
-  return VALID_IMAGE_MIME_TYPES.includes(mimeType)
+  return VALID_IMAGE_MIME_TYPES.has(mimeType)
 }