@cognigy/chat-components-vue 0.1.0

package/src/utils/helpers.ts

@@ -0,0 +1,164 @@
+/**
+ * Helper utilities
+ */
+
+import type {IWebchatButton, IWebchatQuickReply} from '../types'
+
+/**
+ * Gets the label for a button
+ * Returns "Call" for phone_number buttons without title
+ */
+export function getWebchatButtonLabel(
+  button: IWebchatButton | IWebchatQuickReply
+): string | undefined {
+  const { title } = button
+
+  if (!title && 'type' in button && button.type === 'phone_number') {
+    return 'Call'
+  }
+
+  return title
+}
+
+/**
+ * Interpolates a template string with replacements
+ * Example: interpolateString("{position} of {total}", { position: "1", total: "4" })
+ * Returns: "1 of 4"
+ */
+export function interpolateString(
+  template: string,
+  replacements: Record<string, string>
+): string {
+  return template.replace(/{(\w+)}/g, (_, key) => {
+    return key in replacements ? replacements[key] : ''
+  })
+}
+
+/**
+ * Generates a random ID with optional prefix
+ */
+export function getRandomId(prefix = ''): string {
+  const id = window?.crypto?.randomUUID?.() || Date.now().toString()
+  return prefix ? `${prefix}-${id}` : id.toString()
+}
+
+/**
+ * Move focus to the visually hidden focus target
+ * This prevents focus loss for keyboard users
+ */
+export function moveFocusToMessageFocusTarget(dataMessageId: string): void {
+  setTimeout(() => {
+    const focusElement = document.getElementById(`webchat-focus-target-${dataMessageId}`)
+    if (focusElement) {
+      focusElement.focus({ preventScroll: true })
+    }
+  }, 0)
+}
+
+/**
+ * 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
+ */
+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>`
+  })
+}
+
+/**
+ * Sanitizes a URL for use in CSS background-image property
+ * Returns url("...") string or undefined if invalid
+ */
+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, '')
+
+  // 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)) {
+    try {
+      const parsed = new URL(sanitized)
+      if (!/^https?:$/i.test(parsed.protocol)) {
+        return undefined
+      }
+      // Normalize absolute URLs
+      sanitized = parsed.href
+    } catch {
+      // URL constructor failed (invalid absolute URL). Reject.
+      return undefined
+    }
+  }
+
+  // Escape characters that could terminate or escape the quoted url("...") context.
+  sanitized = sanitized
+    .replace(/\\/g, '\\\\') // Escape backslashes first
+    .replace(/"/g, '\\"') // Escape double quotes
+    .replace(/\)/g, '\\)') // Escape closing parenthesis
+
+  return `url("${sanitized}")`
+}
+
+/**
+ * File attachment helpers
+ */
+
+const ONE_MB = 1000000
+const ONE_KB = 1000
+
+/**
+ * Extracts filename without extension
+ * 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
+  }
+}
+
+/**
+ * Extracts file extension
+ * 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
+  }
+}
+
+/**
+ * Formats file size in MB or KB
+ * Example: 1500000 → "1.50 MB"
+ */
+export function getSizeLabel(size: number): string {
+  if (size > ONE_MB) {
+    return `${(size / ONE_MB).toFixed(2)} MB`
+  }
+
+  return `${(size / ONE_KB).toFixed(2)} KB`
+}
+
+/**
+ * Valid image MIME types for file attachments
+ */
+export const VALID_IMAGE_MIME_TYPES = ['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)
+}

package/src/utils/matcher.ts

@@ -0,0 +1,283 @@
+/**
+ * Message matcher system
+ * Determines which component to render based on message data structure
+ *
+ * This is the core of the data-driven architecture.
+ * The same matching rules as the React version.
+ */
+
+import type { IMessage } from '@cognigy/socket-client'
+import type { ChatConfig, MatchRule, MessagePlugin, MatchResult } from '../types'
+import { isAdaptiveCardPayload } from '../types'
+
+/**
+ * Check if message has channel payload
+ */
+export function getChannelPayload(message: IMessage, config?: ChatConfig) {
+  if (!message?.data?._cognigy) {
+    return undefined
+  }
+
+  const { _facebook, _webchat, _defaultPreview } = message.data._cognigy
+
+  // Check default preview first
+  const defaultPreviewEnabled = config?.settings?.widgetSettings?.enableDefaultPreview
+  if (defaultPreviewEnabled && _defaultPreview) {
+    return _defaultPreview
+  }
+
+  // Check messenger sync
+  const strictMessengerSync = config?.settings?.widgetSettings?.enableStrictMessengerSync
+  const shouldSyncWithFacebook = message.data._cognigy.syncWebchatWithFacebook
+  if (strictMessengerSync && shouldSyncWithFacebook && _facebook) {
+    return _facebook
+  }
+
+  // Return webchat or facebook as fallback
+  return _webchat || _facebook
+}
+
+/**
+ * Check if text is only escape sequences (whitespace, newlines, etc.)
+ */
+function isOnlyEscapeSequence(text: string | null | undefined): boolean {
+  if (typeof text !== 'string') {
+    return false
+  }
+
+  const trimmed = text.trim()
+  return trimmed === '' || /^[\n\t\r\v\f\s]*$/.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.
+ */
+export function createDefaultMatchRules(): MatchRule[] {
+  return [
+    // xApp submit
+    {
+      name: 'XAppSubmit',
+      match: (message) => {
+        return message?.data?._plugin?.type === 'x-app-submit'
+      },
+    },
+
+    // Webchat3Event
+    {
+      name: 'Webchat3Event',
+      match: (message) => {
+        return !!message?.data?._cognigy?._webchat3?.type
+      },
+    },
+
+    // Date picker
+    {
+      name: 'DatePicker',
+      match: (message) => {
+        return message?.data?._plugin?.type === 'date-picker'
+      },
+    },
+
+    // Text with buttons / Quick Replies
+    {
+      name: 'TextWithButtons',
+      match: (message, config) => {
+        const channelConfig = getChannelPayload(message, config)
+        if (!channelConfig) {
+          return false
+        }
+
+        const hasQuickReplies =
+          channelConfig.message?.quick_replies &&
+          channelConfig.message.quick_replies.length > 0
+
+        const isButtonTemplate =
+          channelConfig.message?.attachment?.payload?.template_type === 'button'
+
+        const hasMessengerText = !!channelConfig.message?.text
+
+        const isDefaultPreviewEnabled = config?.settings?.widgetSettings?.enableDefaultPreview
+        const hasDefaultPreview = !!message?.data?._cognigy?._defaultPreview
+        const shouldSkip = isDefaultPreviewEnabled && !hasDefaultPreview && message.text
+
+        return !shouldSkip && (hasQuickReplies || isButtonTemplate || hasMessengerText)
+      },
+    },
+
+    // Image
+    {
+      name: 'Image',
+      match: (message, config) => {
+        const channelConfig = getChannelPayload(message, config)
+        if (!channelConfig) {
+          return false
+        }
+
+        return channelConfig.message?.attachment?.type === 'image'
+      },
+    },
+
+    // Video
+    {
+      name: 'Video',
+      match: (message, config) => {
+        const channelConfig = getChannelPayload(message, config)
+        if (!channelConfig) {
+          return false
+        }
+
+        return channelConfig.message?.attachment?.type === 'video'
+      },
+    },
+
+    // Audio
+    {
+      name: 'Audio',
+      match: (message, config) => {
+        const channelConfig = getChannelPayload(message, config)
+        if (!channelConfig) {
+          return false
+        }
+
+        return channelConfig.message?.attachment?.type === 'audio'
+      },
+    },
+
+    // File
+    {
+      name: 'File',
+      match: (message) => {
+        return !!message?.data?.attachments
+      },
+    },
+
+    // List
+    {
+      name: 'List',
+      match: (message, config) => {
+        const channelConfig = getChannelPayload(message, config)
+        if (!channelConfig) {
+          return false
+        }
+
+        return channelConfig.message?.attachment?.payload?.template_type === 'list'
+      },
+    },
+
+    // Gallery
+    {
+      name: 'Gallery',
+      match: (message, config) => {
+        const channelConfig = getChannelPayload(message, config)
+        if (!channelConfig) {
+          return false
+        }
+
+        return channelConfig.message?.attachment?.payload?.template_type === 'generic'
+      },
+    },
+
+    // Adaptive Card
+    {
+      name: 'AdaptiveCard',
+      match: (message, config) => {
+        const webchatPayload = message?.data?._cognigy?._webchat
+        const defaultPreviewPayload = message?.data?._cognigy?._defaultPreview
+        const hasWebchatAdaptiveCard = isAdaptiveCardPayload(webchatPayload)
+        const hasDefaultPreviewAdaptiveCard = isAdaptiveCardPayload(defaultPreviewPayload)
+        const isPluginAdaptiveCard = message?.data?._plugin?.type === 'adaptivecards'
+        const defaultPreviewEnabled = config?.settings?.widgetSettings?.enableDefaultPreview
+
+        // Skip if default preview has a message and is enabled
+        if (defaultPreviewPayload?.message && defaultPreviewEnabled) {
+          return false
+        }
+
+        return (
+          (hasDefaultPreviewAdaptiveCard && defaultPreviewEnabled) ||
+          (hasWebchatAdaptiveCard && hasDefaultPreviewAdaptiveCard && !defaultPreviewEnabled) ||
+          hasWebchatAdaptiveCard ||
+          isPluginAdaptiveCard
+        )
+      },
+    },
+
+    // Text message (fallback)
+    {
+      name: 'Text',
+      match: (message, config) => {
+        // Don't render engagement messages unless configured
+        if (
+          message?.source === 'engagement' &&
+          !config?.settings?.layout?.showEngagementInChat
+        ) {
+          return false
+        }
+
+        // Don't render if has file attachments
+        if (message?.data?.attachments) {
+          return false
+        }
+
+        // Handle message arrays (from streaming mode)
+        if (Array.isArray(message?.text)) {
+          return message.text.length > 0
+        }
+
+        // Handle messages with only escape sequences
+        if (
+          isOnlyEscapeSequence(message.text) &&
+          !config?.settings?.behavior?.collateStreamedOutputs
+        ) {
+          return false
+        }
+
+        return message?.text !== null &&
+               message?.text !== undefined &&
+               message?.text !== ''
+      },
+    },
+  ]
+}
+
+/**
+ * Match a message to component(s)
+ * @param message - The message to match
+ * @param config - Optional configuration
+ * @param externalPlugins - Custom plugins to check first (these provide their own components)
+ * @returns Array of matched rules/plugins
+ */
+export function match(
+  message: IMessage,
+  config?: ChatConfig,
+  externalPlugins: MessagePlugin[] = []
+): MatchResult[] {
+  // Combine external plugins with default rules
+  // External plugins are checked first
+  const allRules: MatchResult[] = [...externalPlugins, ...createDefaultMatchRules()]
+
+  const matchedRules: MatchResult[] = []
+
+  for (const rule of allRules) {
+    try {
+      if (rule.match(message, config)) {
+        matchedRules.push(rule)
+
+        // Stop matching unless passthrough is enabled
+        if (!rule.options?.passthrough) {
+          break
+        }
+      }
+    } catch (error) {
+      console.error('Matcher: Error in match function', {
+        ruleName: rule.name,
+        error,
+        messageId: message.traceId,
+      })
+    }
+  }
+
+  return matchedRules
+}

package/src/utils/sanitize.ts

@@ -0,0 +1,133 @@
+/**
+ * HTML sanitization utilities
+ * Uses DOMPurify to sanitize HTML content
+ */
+
+import DOMPurify from 'dompurify'
+
+/**
+ * Default allowed HTML tags
+ * Same as React version
+ */
+export const allowedHtmlTags = [
+  'a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio',
+  'b', 'bdi', 'bdo', 'big', 'blockquote', 'br', 'button',
+  'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup',
+  'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt',
+  'em', 'embed',
+  'fieldset', 'figcaption', 'figure', 'footer', 'form',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr',
+  'i', 'iframe', 'img', 'input', 'ins',
+  'kbd',
+  'label', 'legend', 'li', 'link',
+  'main', 'map', 'mark', 'meta', 'meter',
+  'nav',
+  'ol', 'optgroup', 'option', 'output',
+  'p', 'param', 'picture', 'pre', 'progress',
+  'q',
+  'rp', 'rt', 'ruby',
+  's', 'samp', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'svg',
+  'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track',
+  'u', 'ul',
+  'var', 'video',
+  'wbr',
+]
+
+/**
+ * Default allowed HTML attributes
+ */
+export const allowedHtmlAttributes = [
+  'accept', 'accept-charset', 'accesskey', 'action', 'align', 'alt', 'autocomplete', 'autofocus', 'autoplay',
+  'bgcolor', 'border',
+  'charset', 'checked', 'cite', 'class', 'color', 'cols', 'colspan', 'content', 'contenteditable', 'controls', 'coords',
+  'data', 'data-*', 'datetime', 'default', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'dropzone',
+  'enctype',
+  'for', 'form', 'formaction',
+  'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv',
+  'id', 'ismap',
+  'kind',
+  'label', 'lang', 'list', 'loop', 'low',
+  'max', 'maxlength', 'media', 'method', 'min', 'multiple', 'muted',
+  'name', 'novalidate',
+  'open', 'optimum',
+  'pattern', 'placeholder', 'poster', 'preload',
+  'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan',
+  'sandbox', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'spellcheck', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'style',
+  'tabindex', 'target', 'title', 'translate', 'type',
+  'usemap',
+  'value',
+  'width', 'wrap',
+]
+
+/**
+ * Sanitize HTML with custom configuration
+ * @param text - HTML text to sanitize
+ * @param customAllowedHtmlTags - Optional custom allowed tags
+ * @returns Sanitized HTML string
+ */
+export function sanitizeHTMLWithConfig(
+  text: string,
+  customAllowedHtmlTags?: string[]
+): string {
+  if (!text) {
+    return ''
+  }
+
+  // Handle orphan closing tags (from streaming LLMs)
+  if (text.startsWith('</')) {
+    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  }
+
+  // Configure DOMPurify
+  const config = {
+    ALLOWED_TAGS: customAllowedHtmlTags || allowedHtmlTags,
+    ALLOWED_ATTR: allowedHtmlAttributes,
+  }
+
+  // Add hook for unknown elements
+  // Note: DOMPurify's hook callback types don't fully describe the node parameter
+  DOMPurify.addHook('beforeSanitizeElements', (node: any) => {
+    if (node instanceof HTMLUnknownElement) {
+      const unClosedTag = `<${node.tagName.toLowerCase()}>${node.innerHTML}`
+      const closedTag = `<${node.tagName.toLowerCase()}>${node.innerHTML}</${node.tagName.toLowerCase()}>`
+      node.replaceWith(unClosedTag === text ? unClosedTag : closedTag)
+    }
+  })
+
+  try {
+    const sanitized = DOMPurify.sanitize(text, config).toString()
+    return sanitized
+  } catch (error) {
+    console.error('sanitizeHTMLWithConfig: Sanitization failed', {
+      error,
+      textLength: text.length,
+    })
+    // Return escaped text as fallback
+    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  } finally {
+    DOMPurify.removeAllHooks()
+  }
+}
+
+/**
+ * Sanitize content if sanitization is enabled
+ * @param content - Content to sanitize
+ * @param isSanitizeEnabled - Whether sanitization is enabled
+ * @param customAllowedHtmlTags - Custom allowed tags
+ * @returns Sanitized or raw content
+ */
+export function sanitizeContent(
+  content: string | undefined,
+  isSanitizeEnabled: boolean,
+  customAllowedHtmlTags?: string[]
+): string {
+  if (!content) {
+    return ''
+  }
+
+  if (!isSanitizeEnabled) {
+    return content
+  }
+
+  return sanitizeHTMLWithConfig(content, customAllowedHtmlTags)
+}

package/src/utils/theme.ts

@@ -0,0 +1,58 @@
+/**
+ * Theme utilities for config-driven CSS variable injection
+ */
+
+import type { ChatSettings } from '../types'
+
+/**
+ * Maps config.settings.colors to CSS custom properties.
+ * Returns an object suitable for use as an inline style that sets CSS variables.
+ *
+ * @param colors - The colors object from ChatSettings
+ * @returns A record of CSS variable names to their values
+ *
+ * @example
+ * ```typescript
+ * const style = configColorsToCssVariables({
+ *   primaryColor: '#0b3694',
+ *   botMessageColor: '#f5f5f5',
+ * })
+ * // Returns: { '--cc-primary-color': '#0b3694', '--cc-background-bot-message': '#f5f5f5' }
+ * ```
+ */
+export function configColorsToCssVariables(
+  colors?: ChatSettings['colors']
+): Record<string, string> {
+  if (!colors) return {}
+
+  const mapping: Record<string, string | undefined> = {
+    // Primary action colors
+    '--cc-primary-color': colors.primaryColor,
+    '--cc-primary-color-hover': colors.primaryColorHover,
+    '--cc-primary-color-focus': colors.primaryColorFocus,
+    '--cc-primary-color-disabled': colors.primaryColorDisabled,
+    '--cc-primary-contrast-color': colors.primaryContrastColor,
+    '--cc-secondary-color': colors.secondaryColor,
+
+    // Message bubble backgrounds
+    '--cc-background-bot-message': colors.botMessageColor,
+    '--cc-bot-message-contrast-color': colors.botMessageContrastColor,
+    '--cc-background-user-message': colors.userMessageColor,
+    '--cc-user-message-contrast-color': colors.userMessageContrastColor,
+    '--cc-background-agent-message': colors.agentMessageColor,
+    '--cc-agent-message-contrast-color': colors.agentMessageContrastColor,
+
+    // Message bubble borders
+    '--cc-border-bot-message': colors.borderBotMessage,
+    '--cc-border-user-message': colors.borderUserMessage,
+    '--cc-border-agent-message': colors.borderAgentMessage,
+
+    // Link color
+    '--cc-text-link-color': colors.textLinkColor,
+  }
+
+  // Filter out undefined values and return only defined CSS variables
+  return Object.fromEntries(
+    Object.entries(mapping).filter(([, value]) => value !== undefined)
+  ) as Record<string, string>
+}