@cognigy/chat-components-vue 0.1.0 → 0.3.0

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

@@ -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,8 +47,32 @@ 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,
+
+    // 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,
+
+    // 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
@@ -56,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 }
+}