@cognigy/chat-components-vue 0.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,275 @@
+import { IMessage, IWebchatQuickReply as QuickReply, IWebchatTemplateAttachment as TemplateAttachment, IWebchatAudioAttachment as AudioAttachment, IWebchatImageAttachment as ImageAttachment, IWebchatVideoAttachment as VideoAttachment } from '@cognigy/socket-client';
+import { Component } from 'vue';
+/**
+ * Extended IMessage with optional runtime properties not in base interface.
+ * The socket-client IMessage doesn't include 'id', but it may be present at runtime.
+ */
+export interface IMessageWithId extends IMessage {
+    id?: string;
+}
+/**
+ * Type guard to check if a message has an id property
+ */
+export declare function hasMessageId(message: IMessage): message is IMessageWithId & {
+    id: string;
+};
+/**
+ * Get message ID with fallback to timestamp-based ID
+ */
+export declare function getMessageId(message: IMessage): string;
+/**
+ * Adaptive card payload structure.
+ * Used for type narrowing when accessing adaptive card data from message payloads.
+ */
+export interface IAdaptiveCardPayload {
+    adaptiveCard: unknown;
+}
+/**
+ * Type guard to check if a payload contains an adaptive card
+ */
+export declare function isAdaptiveCardPayload(payload: unknown): payload is IAdaptiveCardPayload;
+declare global {
+    interface Window {
+        /** Test-only: Message ID for component testing */
+        __TEST_MESSAGE_ID__?: string;
+    }
+}
+/**
+ * Configuration for the chat components
+ * Mirrors IWebchatConfig from React version
+ */
+export interface ChatConfig {
+    active?: boolean;
+    URLToken?: string;
+    initialSessionId?: string;
+    settings?: ChatSettings;
+    isConfigLoaded?: boolean;
+    isTimedOut?: boolean;
+}
+export interface ChatSettings {
+    layout?: {
+        title?: string;
+        logoUrl?: string;
+        botAvatarName?: string;
+        botLogoUrl?: string;
+        agentAvatarName?: string;
+        agentLogoUrl?: string;
+        disableHtmlContentSanitization?: boolean;
+        enableGenericHTMLStyling?: boolean;
+        disableBotOutputBorder?: boolean;
+        botOutputMaxWidthPercentage?: number;
+        disableUrlButtonSanitization?: boolean;
+        dynamicImageAspectRatio?: boolean;
+        showEngagementInChat?: boolean;
+    };
+    colors?: {
+        primaryColor?: string;
+        primaryColorHover?: string;
+        primaryColorFocus?: string;
+        primaryColorDisabled?: string;
+        primaryContrastColor?: string;
+        secondaryColor?: string;
+        botMessageColor?: string;
+        botMessageContrastColor?: string;
+        userMessageColor?: string;
+        userMessageContrastColor?: string;
+        agentMessageColor?: string;
+        agentMessageContrastColor?: string;
+        borderBotMessage?: string;
+        borderUserMessage?: string;
+        borderAgentMessage?: string;
+        textLinkColor?: string;
+    };
+    behavior?: {
+        renderMarkdown?: boolean;
+        enableTypingIndicator?: boolean;
+        messageDelay?: number;
+        collateStreamedOutputs?: boolean;
+        focusInputAfterPostback?: boolean;
+    };
+    widgetSettings?: {
+        enableDefaultPreview?: boolean;
+        enableStrictMessengerSync?: boolean;
+        customAllowedHtmlTags?: string[];
+        enableAutoFocus?: boolean;
+        disableRenderURLsAsLinks?: boolean;
+        disableTextInputSanitization?: boolean;
+        sourceDirectionMapping?: {
+            user?: 'incoming' | 'outgoing';
+            bot?: 'incoming' | 'outgoing';
+            agent?: 'incoming' | 'outgoing';
+        };
+    };
+    customTranslations?: {
+        ariaLabels?: {
+            messageHeader?: {
+                user?: string;
+                bot?: string;
+                timestamp?: string;
+            };
+            opensInNewTab?: string;
+            actionButtonPositionText?: string;
+            viewImageInFullsize?: string;
+            fullSizeImageViewerTitle?: string;
+            downloadFullsizeImage?: string;
+            closeFullsizeImageModal?: string;
+            playAudio?: string;
+            pauseAudio?: string;
+            audioPlaybackProgress?: string;
+            audioTimeRemaining?: string;
+            downloadTranscript?: string;
+            playVideo?: string;
+            slide?: string;
+            [key: string]: any;
+        };
+        [key: string]: any;
+    };
+}
+/**
+ * Theme configuration
+ */
+export interface ChatTheme {
+    primaryColor?: string;
+    primaryColorHover?: string;
+    secondaryColor?: string;
+    backgroundBotMessage?: string;
+    backgroundUserMessage?: string;
+    textDark?: string;
+    textLight?: string;
+    fontFamily?: string;
+}
+/**
+ * Message sender callback type.
+ * The data parameter uses Record<string, any> because it passes through
+ * unchanged to @cognigy/socket-client - shape is determined by backend.
+ */
+export type MessageSender = (text?: string, data?: Record<string, any> | null, options?: Partial<SendMessageOptions>) => void;
+export interface SendMessageOptions {
+    label: string;
+    collate: boolean;
+}
+/**
+ * Custom icon for action buttons.
+ * Can be a Vue component or a string identifier.
+ */
+export type CustomIcon = Component | string;
+/**
+ * Analytics event data passed to analytics callbacks.
+ * Shape varies by event type, so we use Record<string, any> for flexibility.
+ */
+export type AnalyticsEventData = Record<string, any>;
+/**
+ * Callback for emitting analytics events from components.
+ */
+export type AnalyticsEventCallback = (event: string, data?: AnalyticsEventData) => void;
+/**
+ * Props for the Message component
+ */
+export interface MessageProps {
+    message: IMessage;
+    action?: MessageSender;
+    config?: ChatConfig;
+    theme?: ChatTheme;
+    prevMessage?: IMessage;
+    disableHeader?: boolean;
+    plugins?: MessagePlugin[];
+    onEmitAnalytics?: (event: string, payload?: unknown) => void;
+}
+/**
+ * Options for match rules and plugins
+ */
+export interface MatchRuleOptions {
+    /** If true, continue matching after this rule (allows multiple components) */
+    passthrough?: boolean;
+    /** Render component in fullscreen mode */
+    fullscreen?: boolean;
+    /** Render component at full width */
+    fullwidth?: boolean;
+}
+/**
+ * Internal match rule used by the matcher system.
+ * These define which message types map to which internal components.
+ * Components are resolved by name lookup in Message.vue.
+ */
+export interface MatchRule {
+    /** Unique name identifying this rule (maps to component in Message.vue) */
+    name: string;
+    /** Function to determine if this rule matches a message */
+    match: (message: IMessage, config?: ChatConfig) => boolean;
+    /** Optional rule behavior settings */
+    options?: MatchRuleOptions;
+}
+/**
+ * External message plugin for custom message types.
+ * Users provide these to handle custom message formats.
+ */
+export interface MessagePlugin extends MatchRule {
+    /** Vue component to render for matched messages (required for external plugins) */
+    component: Component;
+}
+/**
+ * Union type for matcher results - can be internal rule or external plugin
+ */
+export type MatchResult = MatchRule | MessagePlugin;
+/**
+ * Type guard to check if a match result is an external plugin with a component
+ */
+export declare function isMessagePlugin(rule: MatchResult): rule is MessagePlugin;
+/**
+ * Check if a value is a valid Vue component (not null/undefined/empty)
+ */
+export declare function isValidComponent(component: unknown): component is Component;
+/** @deprecated Use MatchRuleOptions instead */
+export type MessagePluginOptions = MatchRuleOptions;
+/**
+ * Context provided to message components
+ */
+export interface MessageContext {
+    message: IMessage;
+    config?: ChatConfig;
+    theme?: ChatTheme;
+    action?: MessageSender;
+    onEmitAnalytics?: (event: string, payload?: unknown) => void;
+}
+/**
+ * DatePicker plugin data interface
+ */
+export interface IDatePickerData {
+    openPickerButtonText?: string;
+    submitButtonText?: string;
+    eventName?: string;
+    dateFormat?: string;
+    defaultDate?: string;
+    minDate?: string;
+    maxDate?: string;
+    mode?: 'single' | 'multiple' | 'range';
+    enableTime?: boolean;
+    time_24hr?: boolean;
+    noCalendar?: boolean;
+    weekNumbers?: boolean;
+    locale?: string;
+    enable_disable?: string[];
+    function_enable_disable?: string;
+    wantDisable?: boolean;
+    defaultHour?: number;
+    defaultMinute?: number;
+    hourIncrement?: number;
+    minuteIncrement?: number;
+}
+/**
+ * Export types from @cognigy/socket-client for convenience
+ */
+export type { IMessage } from '@cognigy/socket-client';
+export type { IWebchatButton, IWebchatQuickReply, IWebchatTemplateAttachment, IWebchatAttachmentElement, IWebchatAudioAttachment, IWebchatImageAttachment, IWebchatVideoAttachment, IUploadFileAttachmentData, } from '@cognigy/socket-client';
+/**
+ * Webchat channel payload structure
+ * This is the shape of _webchat, _facebook, or _defaultPreview in message.data._cognigy
+ */
+export interface IWebchatChannelPayload {
+    message?: {
+        text?: string;
+        quick_replies?: QuickReply[];
+        attachment?: TemplateAttachment | AudioAttachment | ImageAttachment | VideoAttachment;
+    };
+    adaptiveCard?: unknown;
+}

package/dist/utils/helpers.d.ts

@@ -0,0 +1,56 @@
+import { IWebchatButton, IWebchatQuickReply } from '../types';
+/**
+ * Gets the label for a button
+ * Returns "Call" for phone_number buttons without title
+ */
+export declare function getWebchatButtonLabel(button: IWebchatButton | IWebchatQuickReply): string | undefined;
+/**
+ * Interpolates a template string with replacements
+ * Example: interpolateString("{position} of {total}", { position: "1", total: "4" })
+ * Returns: "1 of 4"
+ */
+export declare function interpolateString(template: string, replacements: Record<string, string>): string;
+/**
+ * Generates a random ID with optional prefix
+ */
+export declare function getRandomId(prefix?: string): string;
+/**
+ * Move focus to the visually hidden focus target
+ * This prevents focus loss for keyboard users
+ */
+export declare function moveFocusToMessageFocusTarget(dataMessageId: string): void;
+/**
+ * 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 declare function replaceUrlsWithHTMLanchorElem(text: string): string;
+/**
+ * Sanitizes a URL for use in CSS background-image property
+ * Returns url("...") string or undefined if invalid
+ */
+export declare function getBackgroundImage(url: string): string | undefined;
+/**
+ * Extracts filename without extension
+ * Example: "document.pdf" → "document."
+ */
+export declare function getFileName(fileNameWithExtension: string): string;
+/**
+ * Extracts file extension
+ * Example: "document.pdf" → "pdf"
+ */
+export declare function getFileExtension(fileNameWithExtension: string): string | null;
+/**
+ * Formats file size in MB or KB
+ * Example: 1500000 → "1.50 MB"
+ */
+export declare function getSizeLabel(size: number): string;
+/**
+ * Valid image MIME types for file attachments
+ */
+export declare const VALID_IMAGE_MIME_TYPES: string[];
+/**
+ * Checks if attachment is a valid image type
+ */
+export declare function isImageAttachment(mimeType: string): boolean;

package/dist/utils/matcher.d.ts

@@ -0,0 +1,20 @@
+import { IMessage } from '@cognigy/socket-client';
+import { ChatConfig, MatchRule, MessagePlugin, MatchResult } from '../types';
+/**
+ * Check if message has channel payload
+ */
+export declare function getChannelPayload(message: IMessage, config?: ChatConfig): any;
+/**
+ * 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 declare function createDefaultMatchRules(): MatchRule[];
+/**
+ * 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 declare function match(message: IMessage, config?: ChatConfig, externalPlugins?: MessagePlugin[]): MatchResult[];

package/dist/utils/sanitize.d.ts

@@ -0,0 +1,28 @@
+/**
+ * HTML sanitization utilities
+ * Uses DOMPurify to sanitize HTML content
+ */
+/**
+ * Default allowed HTML tags
+ * Same as React version
+ */
+export declare const allowedHtmlTags: string[];
+/**
+ * Default allowed HTML attributes
+ */
+export declare const allowedHtmlAttributes: string[];
+/**
+ * Sanitize HTML with custom configuration
+ * @param text - HTML text to sanitize
+ * @param customAllowedHtmlTags - Optional custom allowed tags
+ * @returns Sanitized HTML string
+ */
+export declare function sanitizeHTMLWithConfig(text: string, customAllowedHtmlTags?: string[]): string;
+/**
+ * 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 declare function sanitizeContent(content: string | undefined, isSanitizeEnabled: boolean, customAllowedHtmlTags?: string[]): string;

package/dist/utils/theme.d.ts

@@ -0,0 +1,18 @@
+import { 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 declare function configColorsToCssVariables(colors?: ChatSettings['colors']): Record<string, string>;

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@cognigy/chat-components-vue",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Vue 3 version of @cognigy/chat-components",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Cognigy/chat-components-vue.git"
+  },
+  "homepage": "https://github.com/Cognigy/chat-components-vue#readme",
+  "bugs": {
+    "url": "https://github.com/Cognigy/chat-components-vue/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "chat",
+    "components",
+    "cognigy",
+    "webchat",
+    "messaging"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "main": "./dist/chat-components-vue.js",
+  "module": "./dist/chat-components-vue.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/chat-components-vue.js",
+      "default": "./dist/chat-components-vue.js"
+    },
+    "./style.css": "./dist/chat-components-vue.css",
+    "./dist/*": "./dist/*"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist/**",
+    "src/**"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "type-check": "vue-tsc --noEmit",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@braintree/sanitize-url": "^7.1.1",
+    "@cognigy/socket-client": "5.0.0-beta.25",
+    "@fontsource/figtree": "5.2.10",
+    "dompurify": "^3.0.11",
+    "flatpickr": "^4.6.13",
+    "markdown-it": "^14.1.0",
+    "moment": "^2.30.1",
+    "swiper": "^12.0.3"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^25.0.9",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/coverage-v8": "^4.0.17",
+    "@vue/test-utils": "^2.4.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-vue": "^10.7.0",
+    "globals": "^17.0.0",
+    "jsdom": "^27.0.0",
+    "npm-check-updates": "^19.3.1",
+    "typescript": "^5.9.0",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.2.0",
+    "vitest": "^4.0.0",
+    "vue": "^3.5.27",
+    "vue-tsc": "^3.2.2"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}

package/src/assets/svg/ArrowBackIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    viewBox="0 0 16 16"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.7578 1.34923C12.1172 1.76855 12.0687 2.39985 11.6494 2.75927L5.53516 8.00002L11.6494 13.2408C12.0687 13.6002 12.1172 14.2315 11.7578 14.6508C11.3984 15.0701 10.7671 15.1187 10.3478 14.7593L4.23357 9.51853C3.30235 8.72034 3.30235 7.2797 4.23357 6.4815L10.3478 1.24076C10.7671 0.881339 11.3984 0.929901 11.7578 1.34923Z"
+      fill="white"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    width?: string
+    height?: string
+  }>(),
+  {
+    width: '16',
+    height: '16',
+  }
+)
+</script>

package/src/assets/svg/AudioPauseIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <g>
+      <circle cx="15" cy="15" r="15" fill="#1A1A1A" />
+      <rect height="10" width="2.5" x="10.8" y="10" fill="#FFFFFF" />
+      <rect height="10" width="2.5" x="16.8" y="10" fill="#FFFFFF" />
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+// Audio pause button icon
+</script>

package/src/assets/svg/AudioPlayIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <g>
+      <circle cx="15" cy="15" r="15" fill="#1A1A1A" />
+      <path d="M12.5 10L20 15L12.5 20V10Z" fill="white"/>
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+// Audio play button icon
+</script>

package/src/assets/svg/CloseIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7265 1.29289C15.117 1.68342 15.117 2.31658 14.7265 2.70711L2.70567 14.7279C2.31515 15.1184 1.68198 15.1184 1.29146 14.7279C0.900934 14.3374 0.900934 13.7042 1.29146 13.3137L13.3123 1.29289C13.7028 0.902369 14.336 0.902369 14.7265 1.29289Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7266 14.7279C14.3361 15.1184 13.7029 15.1184 13.3124 14.7279L1.29161 2.70711C0.901084 2.31658 0.901084 1.68342 1.29161 1.29289C1.68213 0.902369 2.3153 0.90237 2.70582 1.29289L14.7266 13.3137C15.1172 13.7042 15.1172 14.3374 14.7266 14.7279Z" fill="#1A1A1A"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+// Close icon for image lightbox and modals
+</script>

package/src/assets/svg/DownloadIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M9 1C9 0.447715 8.55228 0 8 0C7.44772 0 7 0.447715 7 1V10.0097L4.09689 7.84985C3.65379 7.5202 3.02734 7.61217 2.69768 8.05528C2.36802 8.49839 2.46 9.12484 2.90311 9.45449L7.40311 12.8023C7.75739 13.0659 8.24261 13.0659 8.5969 12.8023L13.0969 9.45449C13.54 9.12484 13.632 8.49839 13.3023 8.05528C12.9727 7.61217 12.3462 7.5202 11.9031 7.84985L9 10.0097V1Z" fill="#1A1A1A"/>
+    <path d="M1 14C0.447715 14 0 14.4477 0 15C0 15.5523 0.447715 16 1 16H15C15.5523 16 16 15.5523 16 15C16 14.4477 15.5523 14 15 14H1Z" fill="#1A1A1A"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+// Download icon for image lightbox and buttons
+</script>

package/src/assets/svg/VideoPlayIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <g>
+      <circle cx="15" cy="15" r="15" fill="white" fill-opacity="90%" />
+      <path d="M12.5 10L20 15L12.5 20V10Z" fill="#1A1A1A"/>
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  width?: string
+  height?: string
+}>(), {
+  width: '30',
+  height: '30',
+})
+</script>

package/src/assets/svg/index.ts

@@ -0,0 +1,7 @@
+export { default as CloseIcon } from './CloseIcon.vue'
+export { default as DownloadIcon } from './DownloadIcon.vue'
+export { default as VideoPlayIcon } from './VideoPlayIcon.vue'
+export { default as AudioPlayIcon } from './AudioPlayIcon.vue'
+export { default as AudioPauseIcon } from './AudioPauseIcon.vue'
+export { default as ArrowBackIcon } from './ArrowBackIcon.vue'
+export { default as LinkIcon } from '../../components/common/LinkIcon.vue'