@cognigy/chat-components-vue 0.1.0 → 0.2.0

package/src/components/messages/AdaptiveCard.vue

@@ -1,143 +1,114 @@
 <template>
   <ChatBubble
-    v-if="hasAdaptiveCard"
-    :class="['adaptivecard-wrapper', 'internal', $style.wrapper]"
-    data-testid="adaptive-card-message"
+      v-if="hasAdaptiveCard"
+      :class="wrapperClasses"
+      data-testid="adaptive-card-message"
   >
-    <div :class="$style.card">
-      <!-- Card icon/indicator -->
-      <div :class="$style.icon">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          :width="24"
-          :height="24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-          <line x1="9" y1="9" x2="15" y2="9"></line>
-          <line x1="9" y1="15" x2="15" y2="15"></line>
-        </svg>
-      </div>
-
-      <!-- Card content -->
-      <div :class="$style.content">
-        <Typography
-          variant="title1-semibold"
-          component="div"
-          :class="$style.title"
-        >
-          {{ cardTitle }}
-        </Typography>
-
-        <Typography
-          v-if="cardBody"
-          variant="body-regular"
-          component="div"
-          :class="$style.body"
-        >
-          {{ cardBody }}
-        </Typography>
-
-        <div v-if="hasActions" :class="$style.actions">
-          <Typography variant="copy-medium" component="span" :class="$style.actionsLabel">
-            {{ actionsLabel }}
-          </Typography>
-        </div>
-      </div>
-    </div>
+    <AdaptiveCardRenderer
+        :payload="cardPayload"
+        :host-config="adaptiveCardsHostConfig"
+        :readonly="isReadonly"
+        :input-data="submittedData"
+    />
   </ChatBubble>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+/**
+ * AdaptiveCard - Message component for rendering Microsoft Adaptive Cards
+ *
+ * This component wraps the AdaptiveCardRenderer in a ChatBubble and handles
+ * payload extraction from the message context. It's designed for presentation-only
+ * mode (display only, no interactivity).
+ *
+ * The actual card rendering is handled by the AdaptiveCardRenderer component
+ * which uses Microsoft's adaptivecards library.
+ */
+import { computed, useCssModule } from 'vue'
 import ChatBubble from '../common/ChatBubble.vue'
-import Typography from '../common/Typography.vue'
+import AdaptiveCardRenderer from './AdaptiveCardRenderer.vue'
 import { useMessageContext } from '../../composables/useMessageContext'
-import { isAdaptiveCardPayload } from '../../types'
+import type { IMessageDataExtended } from '../../types'
+
+const styles = useCssModule()
+const { message, config } = useMessageContext()
 
 /**
- * Simplified adaptive card structure for our rendering needs.
- * The full IAdaptiveCard type from 'adaptivecards' package is complex,
- * but we only need a subset for display purposes.
+ * Host configuration for Adaptive Cards styling
+ * Matches the React version's configuration
+ *
+ * Note: foregroundColors are applied as inline styles by the adaptivecards library,
+ * so we use actual color values here. For customization, consumers should use
+ * the CSS variables (--cc-adaptive-card-text-color) which override via !important.
+ *
+ * This is typed as a plain object (not Partial<HostConfig>) because the HostConfig
+ * constructor accepts plain objects and parses them internally.
  */
-interface AdaptiveCardData {
-  title?: string
-  body?: unknown[]
-  actions?: unknown[]
-  speak?: string
+const adaptiveCardsHostConfig = {
+  fontFamily: 'inherit',
+  fontSizes: {
+    small: 10,
+    default: 14,
+    medium: 16,
+    large: 18,
+    extraLarge: 34,
+  },
+  fontWeights: {
+    lighter: 300,
+    default: 400,
+    bolder: 600,
+  },
+  lineHeights: {
+    small: 12,
+    default: 18.2,
+    medium: 22.4,
+    large: 23.4,
+    extraLarge: 40.8,
+  },
+  containerStyles: {
+    default: {
+      backgroundColor: '#fff',
+      foregroundColors: {
+        default: {
+          default: '#333333',
+          subtle: '#666666',
+        },
+      },
+    },
+  },
 }
 
 /**
- * Adaptive card sources from different payload locations
+ * Type-safe access to extended message data
  */
-interface AdaptiveCardSources {
-  webchat: AdaptiveCardData | undefined
-  defaultPreview: AdaptiveCardData | undefined
-  plugin: AdaptiveCardData | undefined
-}
+const messageData = computed<IMessageDataExtended | undefined>(() => {
+  return message?.data as IMessageDataExtended | undefined
+})
 
 /**
- * Extract adaptive card from various message payload locations.
- *
- * Note on types: The socket-client types have limitations:
- * - _defaultPreview is typed as `any`
- * - _plugin.data is `any` for adaptivecards type
- * We use runtime type guards to safely access these properties.
+ * Check if this message has an adaptive card payload
  */
-function getAdaptiveCardSources(message: ReturnType<typeof useMessageContext>['message']): AdaptiveCardSources {
-  const cognigyData = message?.data?._cognigy
-  const pluginData = message?.data?._plugin
-
-  // _webchat can be IWebchatMessage | IAdaptiveCardMessage - use type guard
-  const webchatPayload = cognigyData?._webchat
-  const webchat = isAdaptiveCardPayload(webchatPayload)
-    ? (webchatPayload.adaptiveCard as AdaptiveCardData)
-    : undefined
-
-  // _defaultPreview is typed as `any` in socket-client (upstream limitation)
-  // We safely check for adaptiveCard property
-  const defaultPreviewPayload = cognigyData?._defaultPreview
-  const defaultPreview = isAdaptiveCardPayload(defaultPreviewPayload)
-    ? (defaultPreviewPayload.adaptiveCard as AdaptiveCardData)
-    : undefined
-
-  // Plugin data can come in two formats:
-  // 1. Typed format: { type: 'adaptivecards', data: cardData }
-  // 2. Legacy format: { payload: cardData }
-  let plugin: AdaptiveCardData | undefined
-  if (pluginData) {
-    if (pluginData.type === 'adaptivecards' && 'data' in pluginData) {
-      plugin = pluginData.data as AdaptiveCardData
-    } else if ('payload' in pluginData) {
-      plugin = (pluginData as { payload?: unknown }).payload as AdaptiveCardData
-    }
-  }
-
-  return { webchat, defaultPreview, plugin }
-}
-
-// Message context
-const { message, config } = useMessageContext()
-
-// Get all adaptive card sources
-const cardSources = computed(() => getAdaptiveCardSources(message))
-
-// Check if this message has an adaptive card
 const hasAdaptiveCard = computed(() => {
-  const { webchat, defaultPreview, plugin } = cardSources.value
+  const data = messageData.value
+  const webchat = data?._cognigy?._webchat?.adaptiveCard
+  const defaultPreview = data?._cognigy?._defaultPreview?.adaptiveCard
+  const plugin = data?._plugin?.payload
+
   return !!(webchat || defaultPreview || plugin)
 })
 
-// Get card payload based on configuration
-const cardPayload = computed((): AdaptiveCardData | undefined => {
-  const { webchat, defaultPreview, plugin } = cardSources.value
+/**
+ * Extract the card payload from the message
+ * Follows the same priority logic as the React version
+ */
+const cardPayload = computed(() => {
+  const data = messageData.value
+  const webchat = data?._cognigy?._webchat?.adaptiveCard
+  const defaultPreview = data?._cognigy?._defaultPreview?.adaptiveCard
+  const plugin = data?._plugin?.payload
   const defaultPreviewEnabled = config?.settings?.widgetSettings?.enableDefaultPreview
 
+  // Priority: webchat over defaultPreview (unless defaultPreview is enabled)
   if (webchat && defaultPreview && !defaultPreviewEnabled) {
     return webchat
   }
@@ -148,145 +119,271 @@ const cardPayload = computed((): AdaptiveCardData | undefined => {
 })
 
 /**
- * Adaptive card body element (simplified type for our use case)
+ * Compute wrapper classes
  */
-interface AdaptiveCardElement {
-  type: string
-  text?: string
-  size?: string
-}
+const wrapperClasses = computed(() => [
+  styles.adaptivecardWrapper,
+  'adaptivecard-wrapper',
+  'internal',
+])
 
 /**
- * Check if an item is a TextBlock element
+ * Extract submitted data from the message
+ * This data will be used to pre-fill input fields in the card
+ * Checks multiple locations where Cognigy might store the submitted data
  */
-function isTextBlock(item: unknown): item is AdaptiveCardElement & { type: 'TextBlock'; text: string } {
-  return (
-    typeof item === 'object' &&
-    item !== null &&
-    (item as AdaptiveCardElement).type === 'TextBlock' &&
-    typeof (item as AdaptiveCardElement).text === 'string'
-  )
-}
-
-// Extract card title
-const cardTitle = computed(() => {
-  const card = cardPayload.value
-  if (!card) return 'Adaptive Card'
-
-  // Try to get title from card property (custom extension)
-  if ('title' in card && typeof card.title === 'string') {
-    return card.title
-  }
-
-  // Try to get from body elements
-  const body = card.body
-  if (body && Array.isArray(body)) {
-    // Look for large text block (likely a title)
-    const titleElement = body.find(
-      (item): item is AdaptiveCardElement =>
-        isTextBlock(item) && item.size === 'large'
-    )
-    if (titleElement?.text) {
-      return titleElement.text
-    }
-
-    // Fallback to first TextBlock
-    const firstText = body.find(isTextBlock)
-    if (firstText?.text) {
-      return firstText.text
-    }
+const submittedData = computed<Record<string, unknown> | undefined>(() => {
+  const data = messageData.value
+  const webchatData = data?._cognigy?._webchat
+
+  // Check various locations where submitted data might be stored
+  // Priority: request.value > adaptiveCardData > data > formData
+  const submittedValue =
+    data?.request?.value ||
+    webchatData?.adaptiveCardData ||
+    webchatData?.data ||
+    webchatData?.formData ||
+    data?.adaptiveCardData ||
+    data?.data ||
+    data?.formData
+
+  if (submittedValue && typeof submittedValue === 'object' && !Array.isArray(submittedValue)) {
+    return submittedValue
   }
 
-  // Fallback to speak text or generic title
-  if (card.speak) {
-    return card.speak.substring(0, 50)
-  }
+  return undefined
+})
 
-  return 'Adaptive Card'
+/**
+ * Determine if the card should be rendered in readonly mode
+ *
+ * Readonly when:
+ * - config.settings.behavior.adaptiveCardsReadonly is true (forced presentation mode)
+ * - OR submitted data exists (card was already submitted, showing history)
+ */
+const isReadonly = computed(() => {
+  const configReadonly = config?.settings?.behavior?.adaptiveCardsReadonly
+  return configReadonly === true || submittedData.value !== undefined
 })
+</script>
 
-// Extract card body text
-const cardBody = computed(() => {
-  const body = cardPayload.value?.body
-  if (!body || !Array.isArray(body)) {
-    return null
-  }
+<style module>
+/* Main wrapper styles - match React version */
+.adaptivecardWrapper {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 16px !important;
+}
 
-  // Get text from body elements (skip the title)
-  const titleText = cardTitle.value
-  const bodyTexts = body
-    .filter((item): item is AdaptiveCardElement & { text: string } =>
-      isTextBlock(item) && item.text !== titleText
-    )
-    .map(item => item.text)
-    .slice(0, 2) // Limit to first 2 text blocks
+.adaptivecardWrapper > *:focus {
+  outline: 1px solid var(--cc-primary-color-focus, #0b3694);
+  border-color: var(--cc-primary-color-focus, #0b3694);
+}
 
-  return bodyTexts.length > 0 ? bodyTexts.join(' ') : null
-})
+/* Button styles */
+.adaptivecardWrapper :global(button) {
+  appearance: none;
+  background: var(--cc-primary-color, #0b3694);
+  border-radius: 10px;
+  border: none;
+  color: var(--cc-primary-contrast-color, white);
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: 600;
+  line-height: 160% !important;
+  min-width: 100%;
+  padding-block: 11px;
+  width: 100%;
+}
 
-// Check if card has actions
-const hasActions = computed(() => {
-  return cardPayload.value?.actions && Array.isArray(cardPayload.value.actions) && cardPayload.value.actions.length > 0
-})
+.adaptivecardWrapper :global(button:hover) {
+  background: var(--cc-primary-color-hover, #092d7a);
+}
 
-// Actions label
-const actionsLabel = computed(() => {
-  const actions = cardPayload.value?.actions
-  if (!actions || !Array.isArray(actions) || actions.length === 0) return ''
+.adaptivecardWrapper :global(button:focus-visible) {
+  outline: 2px solid var(--cc-primary-color-focus, #0b3694);
+  outline-offset: 2px;
+}
 
-  const count = actions.length
-  return count === 1 ? '1 action available' : `${count} actions available`
-})
-</script>
+.adaptivecardWrapper :global(button:disabled) {
+  background: var(--cc-primary-color-disabled, #999);
+}
 
-<style module>
-.wrapper {
-  max-width: 400px;
+/* Text styles - use CSS variable for customizable font color */
+.adaptivecardWrapper :global(.ac-textRun) {
+  color: var(--cc-adaptive-card-text-color, #333) !important;
+  font-size: 12px !important;
+  line-height: 140%;
+}
+
+/* Container styles */
+.adaptivecardWrapper :global(.ac-container) {
+  border-radius: 15px;
 }
 
-.card {
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-  background-color: var(--cc-white, #ffffff);
-  border-radius: var(--cc-bubble-border-radius, 15px);
+/* Input styles - use CSS variables for customizable colors */
+.adaptivecardWrapper :global(input),
+.adaptivecardWrapper :global(textarea),
+.adaptivecardWrapper :global(select) {
+  align-self: stretch;
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background: var(--cc-adaptive-card-input-background, #fff);
+  border-radius: 10px;
+  border: 1px solid var(--cc-adaptive-card-input-border, #ccc);
+  color: var(--cc-adaptive-card-input-color, #333) !important;
+  font-size: 14px !important;
+  gap: 10px;
+  line-height: 140%;
+  padding: 8px 12px 8px 12px;
+  resize: none;
+}
+
+@media screen and (max-width: 575px) {
+  .adaptivecardWrapper :global(input),
+  .adaptivecardWrapper :global(textarea),
+  .adaptivecardWrapper :global(select) {
+    font-size: 16px !important;
+  }
 }
 
-.icon {
-  flex-shrink: 0;
-  color: var(--cc-primary-color, #1976d2);
-  display: flex;
-  align-items: flex-start;
-  padding-top: 2px;
+.adaptivecardWrapper :global(textarea) {
+  min-height: 98px;
 }
 
-.content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+:global(.ac-horizontal-separator) {
+  height: 16px !important;
+}
+
+.adaptivecardWrapper :global(textarea::-webkit-scrollbar) {
+  width: 27px;
+}
+
+.adaptivecardWrapper :global(textarea::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+.adaptivecardWrapper :global(textarea::-webkit-scrollbar-thumb) {
+  background-color: var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border-radius: 10px;
+  border: 12px solid var(--cc-white, #fff);
+  border-block: none;
+}
+
+.adaptivecardWrapper :global(input:focus),
+.adaptivecardWrapper :global(textarea:focus),
+.adaptivecardWrapper :global(select:focus) {
+  outline: 1px solid var(--cc-primary-color-focus, #0b3694);
+  border-color: var(--cc-primary-color-focus, #0b3694);
+}
+
+.adaptivecardWrapper :global(input:focus-visible),
+.adaptivecardWrapper :global(textarea:focus-visible),
+.adaptivecardWrapper :global(select:focus-visible) {
+  outline: 2px solid var(--cc-primary-color-focus, #0b3694);
+  border-color: var(--cc-primary-color-focus, #0b3694);
+}
+
+/* Action set styles */
+.adaptivecardWrapper :global(.ac-actionSet) {
+  flex-wrap: wrap;
   gap: 8px;
-  min-width: 0;
 }
 
-.title {
-  color: var(--cc-black-10, rgba(0, 0, 0, 0.1));
-  margin: 0;
+/* Card container styles */
+.adaptivecardWrapper > * {
+  background-color: white;
+  border-radius: 15px;
+  box-shadow: none;
+  padding: 0;
+  border: 1px solid var(--cc-black-80, #ccc);
+  margin: -17px;
+}
+
+/* Checkbox styles */
+.adaptivecardWrapper :global([type='checkbox']) {
+  appearance: none;
+  background-color: var(--cc-white, #fff);
+  border: 1px solid var(--cc-black-60, #666);
+  border-radius: 1px;
+  width: 16px;
+  height: 16px;
+}
+
+.adaptivecardWrapper :global([type='checkbox']:checked) {
+  background-color: var(--cc-primary-color, #0b3694);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5172 4.4569C12.8172 4.74256 12.8288 5.2173 12.5431 5.51724L7.19089 11.1371C6.69828 11.6543 5.87315 11.6543 5.38054 11.1371L3.4569 9.11724C3.17123 8.8173 3.18281 8.34256 3.48276 8.0569C3.78271 7.77123 4.25744 7.78281 4.5431 8.08276L6.28572 9.9125L11.4569 4.48276C11.7426 4.18281 12.2173 4.17123 12.5172 4.4569Z' fill='white'/%3E%3C/svg%3E");
+  background-position: -1px -1px;
+}
+
+.adaptivecardWrapper :global([type='checkbox']:active) {
+  background-color: var(--cc-primary-color-hover, #092d7a);
+  border-color: var(--cc-primary-color-hover, #092d7a);
+}
+
+.adaptivecardWrapper :global([type='checkbox']:checked:hover) {
+  background-color: var(--cc-primary-color-hover, #092d7a);
+  border-color: var(--cc-primary-color-hover, #092d7a);
+}
+
+.adaptivecardWrapper :global(input:invalid) {
+  border-color: red;
+}
+
+/* Date/Time picker icons */
+.adaptivecardWrapper :global([type='date']::-webkit-calendar-picker-indicator),
+.adaptivecardWrapper :global([type='time']::-webkit-calendar-picker-indicator) {
+  background: none;
+}
+
+.adaptivecardWrapper :global([type='date']),
+.adaptivecardWrapper :global([type='time']) {
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+}
+
+.adaptivecardWrapper :global([type='date']) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0.75C3 0.335786 3.33579 0 3.75 0C4.16421 0 4.5 0.335786 4.5 0.75V3H11V0.75C11 0.335786 11.3358 0 11.75 0C12.1642 0 12.5 0.335786 12.5 0.75V3H14C15.1046 3 16 3.89543 16 5V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V5C0 3.89543 0.895431 3 2 3H3V0.75ZM1.5 6H14.5V14C14.5 14.2761 14.2761 14.5 14 14.5H2C1.72386 14.5 1.5 14.2761 1.5 14V6Z' fill='%232455E6'/%3E%3C/svg%3E");
+}
+
+.adaptivecardWrapper :global([type='time']) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z' fill='%232455E6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.0303 12.0303C10.7374 12.3232 10.2626 12.3232 9.96967 12.0303L7.25 9.31066L7.25 4C7.25 3.58579 7.58578 3.25 8 3.25C8.41421 3.25 8.75 3.58579 8.75 4L8.75 8.68934L11.0303 10.9697C11.3232 11.2626 11.3232 11.7374 11.0303 12.0303Z' fill='%232455E6'/%3E%3C/svg%3E");
+}
+
+/* Select dropdown styles */
+.adaptivecardWrapper :global(select) {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.34923 4.24022C1.76855 3.8808 2.39985 3.92936 2.75927 4.34869L8.00002 10.4629L13.2408 4.34869C13.6002 3.92936 14.2315 3.8808 14.6508 4.24022C15.0701 4.59965 15.1187 5.23095 14.7593 5.65027L9.51853 11.7645C8.72034 12.6957 7.2797 12.6957 6.4815 11.7645L1.24076 5.65027C0.881339 5.23095 0.929901 4.59965 1.34923 4.24022Z' fill='%232455E6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+}
+
+.adaptivecardWrapper :global(select::-ms-expand) {
+  display: none;
+}
+
+.adaptivecardWrapper :global(select option) {
+  color: var(--cc-adaptive-card-input-color, #333);
+  border-bottom: 1px solid var(--cc-black-80, #ccc);
 }
 
-.body {
-  color: var(--cc-black-20, rgba(0, 0, 0, 0.2));
-  margin: 0;
-  overflow-wrap: break-word;
+/* Readonly/disabled state styles */
+.adaptivecardWrapper :global(.ac-readonly) input:disabled,
+.adaptivecardWrapper :global(.ac-readonly) textarea:disabled,
+.adaptivecardWrapper :global(.ac-readonly) select:disabled {
+  background-color: var(--cc-black-95, #f5f5f5);
+  cursor: not-allowed;
+  opacity: 0.8;
 }
 
-.actions {
-  margin-top: 4px;
-  padding-top: 8px;
-  border-top: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+.adaptivecardWrapper :global(.ac-readonly) button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.actionsLabel {
-  color: var(--cc-black-40, rgba(0, 0, 0, 0.4));
-  font-style: italic;
+.adaptivecardWrapper :global(.ac-readonly) [type='checkbox']:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 </style>