@cognigy/chat-components-vue 0.1.0 → 0.2.0

package/dist/components/messages/AdaptiveCardRenderer.vue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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>;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    readonly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    targetRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/types/index.d.ts

@@ -79,6 +79,10 @@ export interface ChatSettings {
         borderUserMessage?: string;
         borderAgentMessage?: string;
         textLinkColor?: string;
+        adaptiveCardTextColor?: string;
+        adaptiveCardInputColor?: string;
+        adaptiveCardInputBackground?: string;
+        adaptiveCardInputBorder?: string;
     };
     behavior?: {
         renderMarkdown?: boolean;
@@ -86,6 +90,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;
@@ -271,5 +284,41 @@ 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/dist/utils/helpers.d.ts

@@ -24,6 +24,7 @@ export declare function moveFocusToMessageFocusTarget(dataMessageId: string): vo
  * - 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 declare function replaceUrlsWithHTMLanchorElem(text: string): string;
 /**
@@ -47,9 +48,9 @@ export declare function getFileExtension(fileNameWithExtension: string): string
  */
 export declare 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 declare const VALID_IMAGE_MIME_TYPES: string[];
+export declare const VALID_IMAGE_MIME_TYPES: Set<string>;
 /**
  * Checks if attachment is a valid image type
  */

package/dist/utils/matcher.d.ts

@@ -5,9 +5,9 @@ import { ChatConfig, MatchRule, MessagePlugin, MatchResult } from '../types';
  */
 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.
+ * 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 declare function createDefaultMatchRules(): MatchRule[];
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognigy/chat-components-vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Vue 3 version of @cognigy/chat-components",
   "license": "MIT",
@@ -63,11 +63,12 @@
     "@braintree/sanitize-url": "^7.1.1",
     "@cognigy/socket-client": "5.0.0-beta.25",
     "@fontsource/figtree": "5.2.10",
+    "adaptivecards": "^3.0.5",
     "dompurify": "^3.0.11",
     "flatpickr": "^4.6.13",
     "markdown-it": "^14.1.0",
     "moment": "^2.30.1",
-    "swiper": "^12.0.3"
+    "swiper": "^11.2.10"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",

package/src/components/Message.vue

@@ -22,12 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useCssModule, type Component } from 'vue'
+import { computed, reactive, watchEffect, useCssModule, type Component } from 'vue'
 import { match } from '../utils/matcher'
 import { configColorsToCssVariables } from '../utils/theme'
 import { provideMessageContext } from '../composables/useMessageContext'
 import { getMessageId, isMessagePlugin } from '../types'
-import type { MessageProps } from '../types'
+import type { MessageProps, MessageContext } from '../types'
 
 const $style = useCssModule()
 
@@ -57,13 +57,24 @@ const props = withDefaults(defineProps<MessageProps>(), {
 const dataMessageId = computed(() => getMessageId(props.message))
 
 // Provide message context for child components
-provideMessageContext({
+// Using reactive object synced via watchEffect for proper reactivity tracking
+const messageContext = reactive<MessageContext>({
   message: props.message,
-  config: props.config || {},
-  action: props.action || (() => {}),
-  onEmitAnalytics: props.onEmitAnalytics || (() => {}),
+  config: props.config,
+  action: props.action,
+  onEmitAnalytics: props.onEmitAnalytics,
 })
 
+// Keep context in sync with props changes
+watchEffect(() => {
+  messageContext.message = props.message
+  messageContext.config = props.config
+  messageContext.action = props.action
+  messageContext.onEmitAnalytics = props.onEmitAnalytics
+})
+
+provideMessageContext(messageContext)
+
 // Component map for internal match rules (maps rule names to Vue components)
 const componentMap: Record<string, Component> = {
   'Text': TextMessage,