@cognigy/chat-components-vue 0.1.0 → 0.2.0

package/src/components/messages/AdaptiveCardRenderer.vue

@@ -0,0 +1,260 @@
+<template>
+  <div ref="targetRef" data-testid="adaptive-card-renderer" />
+</template>
+
+<script setup lang="ts">
+/**
+ * AdaptiveCardRenderer - Inner component that uses Microsoft's adaptivecards library
+ *
+ * This component handles the actual rendering of Adaptive Cards using the
+ * Microsoft adaptivecards library. It's designed for presentation-only mode
+ * (no action handling).
+ *
+ * Inspired by Microsoft's adaptivecards-react package:
+ * https://github.com/microsoft/AdaptiveCards/blob/5b66a52e0e0cee5074a42dcbe688d608e0327ae4/source/nodejs/adaptivecards-react/src/adaptive-card.tsx
+ */
+import { ref, shallowRef, watch, onMounted, onBeforeUnmount } from 'vue'
+import { AdaptiveCard as MSAdaptiveCard, HostConfig } from 'adaptivecards'
+import MarkdownIt from 'markdown-it'
+import { sanitizeHTMLWithConfig } from '../../utils/sanitize'
+
+/**
+ * Shared MarkdownIt instance at module scope.
+ *
+ * Why this is safe to share across component instances:
+ * - MarkdownIt's render() method is a pure function (input → output, no side effects)
+ * - No internal state is mutated during rendering
+ * - Configuration is set at construction time and doesn't change
+ * - This pattern is recommended by MarkdownIt documentation for performance
+ *
+ * Creating a new instance per component would be wasteful since there's no
+ * per-instance state to isolate.
+ */
+const md = new MarkdownIt()
+
+/**
+ * Set up Markdown processing for Adaptive Cards (module-level, runs once)
+ *
+ * This sets a static callback on MSAdaptiveCard that processes markdown text.
+ * We intentionally do this at module scope to:
+ * 1. Avoid race conditions from multiple components setting the callback
+ * 2. Ensure consistent markdown processing across all card instances
+ *
+ * Note: We use sanitizeHTML directly (not via useSanitize composable) because
+ * this runs at module scope without component context. For adaptive cards,
+ * sanitization is always applied for security - config overrides don't apply.
+ */
+MSAdaptiveCard.onProcessMarkdown = (text, result) => {
+  try {
+    const html = md.render(text)
+    // Use default sanitization (no custom allowed tags for adaptive card content)
+    result.outputHtml = sanitizeHTMLWithConfig(html)
+    result.didProcess = true
+  } catch (error) {
+    console.error('AdaptiveCardRenderer: Markdown processing failed', { error })
+    result.outputHtml = text
+    result.didProcess = true
+  }
+}
+
+/**
+ * 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>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+})
+
+const targetRef = ref<HTMLDivElement | null>(null)
+
+// Component-scoped card instance - using shallowRef for proper instance isolation
+// Each component gets its own MSAdaptiveCard instance to prevent conflicts
+const cardInstance = shallowRef<MSAdaptiveCard | null>(null)
+
+/**
+ * Apply input data to card payload by setting values on input elements
+ * Recursively walks the card structure to find inputs and set their values
+ */
+function applyInputData(
+  cardPayload: Record<string, unknown>,
+  inputData: Record<string, unknown>
+): Record<string, unknown> {
+  if (!inputData || Object.keys(inputData).length === 0) {
+    return cardPayload
+  }
+
+  // Deep clone to avoid mutating original
+  const payload = structuredClone(cardPayload)
+
+  function processElement(element: Record<string, unknown>): void {
+    // Check if this is an input element with an id
+    const type = element.type as string | undefined
+    const id = element.id as string | undefined
+
+    if (type?.startsWith('Input.') && id && id in inputData) {
+      // Set the value for this input
+      const value = inputData[id]
+
+      if (type === 'Input.Toggle') {
+        // Toggle inputs use valueOn/valueOff - custom values take precedence
+        const matchesCustomOn = element.valueOn !== undefined && value === element.valueOn
+        const matchesCustomOff = element.valueOff !== undefined && value === element.valueOff
+        const isStandardOn = value === true || value === 'true'
+
+        const isToggleOn = matchesCustomOn || (!matchesCustomOff && isStandardOn)
+
+        element.value = isToggleOn
+          ? (element.valueOn ?? 'true')
+          : (element.valueOff ?? 'false')
+      } else if (type === 'Input.ChoiceSet' && Array.isArray(value)) {
+        // Multi-select choice sets use comma-separated values
+        element.value = value.join(',')
+      } else {
+        element.value = value
+      }
+    }
+
+    // Recursively process child elements
+    if (Array.isArray(element.body)) {
+      element.body.forEach((child: Record<string, unknown>) => processElement(child))
+    }
+    if (Array.isArray(element.items)) {
+      element.items.forEach((child: Record<string, unknown>) => processElement(child))
+    }
+    if (Array.isArray(element.columns)) {
+      element.columns.forEach((col: Record<string, unknown>) => {
+        if (Array.isArray(col.items)) {
+          col.items.forEach((child: Record<string, unknown>) => processElement(child))
+        }
+      })
+    }
+    if (Array.isArray(element.actions)) {
+      element.actions.forEach((action: Record<string, unknown>) => {
+        if (action.card) {
+          processElement(action.card as Record<string, unknown>)
+        }
+      })
+    }
+  }
+
+  processElement(payload)
+  return payload
+}
+
+/**
+ * Disable all interactive elements in the rendered card
+ * Used for displaying submitted cards in chat history
+ */
+function disableInteractiveElements(container: HTMLElement): void {
+  const interactiveElements = container.querySelectorAll(
+    'input, textarea, select, button'
+  )
+  interactiveElements.forEach((el) => {
+    el.setAttribute('disabled', 'true')
+    el.setAttribute('aria-disabled', 'true')
+  })
+
+  // Add a class to the container for additional styling hooks
+  container.classList.add('ac-readonly')
+}
+
+/**
+ * Render the adaptive card
+ */
+function renderCard(): void {
+  if (!targetRef.value || !props.payload) {
+    return
+  }
+
+  // Create card instance if needed
+  if (!cardInstance.value) {
+    cardInstance.value = new MSAdaptiveCard()
+  }
+
+  // Apply host config if provided
+  if (props.hostConfig) {
+    cardInstance.value.hostConfig = new HostConfig(props.hostConfig)
+  }
+
+  try {
+    // Apply input data to payload if provided
+    const payloadToRender = props.inputData
+      ? applyInputData(props.payload, props.inputData)
+      : props.payload
+
+    // Parse and render the card
+    cardInstance.value.parse(payloadToRender)
+    const renderedCard = cardInstance.value.render()
+
+    if (renderedCard && targetRef.value) {
+      // Clear previous content and append new
+      targetRef.value.innerHTML = ''
+      targetRef.value.appendChild(renderedCard)
+
+      // Accessibility: Add aria-level to heading elements without it
+      const headings = targetRef.value.querySelectorAll("[role='heading']")
+      headings.forEach((heading) => {
+        if (heading.getAttribute('aria-level') === null) {
+          heading.setAttribute('aria-level', '4')
+        }
+      })
+
+      // Disable all interactive elements when in readonly mode
+      if (props.readonly) {
+        disableInteractiveElements(targetRef.value)
+      }
+    }
+  } catch (error) {
+    console.error('AdaptiveCardRenderer: Unable to render Adaptive Card', {
+      error,
+      payload: props.payload,
+    })
+  }
+}
+
+// Render on mount (markdown processing is set up at module scope)
+onMounted(() => {
+  renderCard()
+})
+
+// Re-render when payload, hostConfig, or inputData changes
+watch(
+  () => [props.payload, props.hostConfig, props.inputData],
+  () => {
+    renderCard()
+  },
+  { deep: true }
+)
+
+// Cleanup on unmount
+onBeforeUnmount(() => {
+  cardInstance.value = null
+})
+</script>

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/types/index.ts

@@ -22,7 +22,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'
 }
 
 /**
@@ -120,6 +120,12 @@ export interface ChatSettings {
 
     // Link color
     textLinkColor?: string
+
+    // Adaptive Card colors
+    adaptiveCardTextColor?: string
+    adaptiveCardInputColor?: string
+    adaptiveCardInputBackground?: string
+    adaptiveCardInputBorder?: string
   }
   behavior?: {
     renderMarkdown?: boolean
@@ -127,6 +133,15 @@ 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
   }
   widgetSettings?: {
     enableDefaultPreview?: boolean
@@ -369,5 +384,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)
 }

package/src/utils/matcher.ts

@@ -10,6 +10,9 @@ import type { IMessage } from '@cognigy/socket-client'
 import type { ChatConfig, MatchRule, MessagePlugin, MatchResult } from '../types'
 import { isAdaptiveCardPayload } from '../types'
 
+// Pre-compiled regex for escape sequence check
+const ESCAPE_SEQUENCE_REGEX = /^[\n\t\r\v\f\s]*$/
+
 /**
  * Check if message has channel payload
  */
@@ -46,16 +49,17 @@ function isOnlyEscapeSequence(text: string | null | undefined): boolean {
   }
 
   const trimmed = text.trim()
-  return trimmed === '' || /^[\n\t\r\v\f\s]*$/.test(trimmed)
+  return trimmed === '' || ESCAPE_SEQUENCE_REGEX.test(trimmed)
 }
 
 /**
  * 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.
+ *
+ * Created once at module load for performance - rules are static.
  */
-export function createDefaultMatchRules(): MatchRule[] {
-  return [
+const DEFAULT_MATCH_RULES: MatchRule[] = [
     // xApp submit
     {
       name: 'XAppSubmit',
@@ -240,6 +244,14 @@ export function createDefaultMatchRules(): MatchRule[] {
       },
     },
   ]
+
+/**
+ * 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 function createDefaultMatchRules(): MatchRule[] {
+  return [...DEFAULT_MATCH_RULES]
 }
 
 /**
@@ -254,9 +266,11 @@ export function match(
   config?: ChatConfig,
   externalPlugins: MessagePlugin[] = []
 ): MatchResult[] {
-  // Combine external plugins with default rules
-  // External plugins are checked first
-  const allRules: MatchResult[] = [...externalPlugins, ...createDefaultMatchRules()]
+  // External plugins are checked first, then default rules
+  // Always create a new array to prevent mutation of DEFAULT_MATCH_RULES
+  const allRules: MatchResult[] = externalPlugins.length > 0
+    ? [...externalPlugins, ...DEFAULT_MATCH_RULES]
+    : [...DEFAULT_MATCH_RULES]
 
   const matchedRules: MatchResult[] = []
 

package/src/utils/sanitize.ts

@@ -95,8 +95,7 @@ export function sanitizeHTMLWithConfig(
   })
 
   try {
-    const sanitized = DOMPurify.sanitize(text, config).toString()
-    return sanitized
+    return DOMPurify.sanitize(text, config).toString()
   } catch (error) {
     console.error('sanitizeHTMLWithConfig: Sanitization failed', {
       error,

package/src/utils/theme.ts

@@ -49,6 +49,12 @@ export function configColorsToCssVariables(
 
     // Link color
     '--cc-text-link-color': colors.textLinkColor,
+
+    // Adaptive Card colors
+    '--cc-adaptive-card-text-color': colors.adaptiveCardTextColor,
+    '--cc-adaptive-card-input-color': colors.adaptiveCardInputColor,
+    '--cc-adaptive-card-input-background': colors.adaptiveCardInputBackground,
+    '--cc-adaptive-card-input-border': colors.adaptiveCardInputBorder,
   }
 
   // Filter out undefined values and return only defined CSS variables