@cognigy/chat-components-vue 0.1.0

package/src/components/Message.vue

@@ -0,0 +1,152 @@
+<template>
+  <article
+    v-if="matchedComponents.length > 0"
+    :class="rootClasses"
+    :style="cssVariableStyle"
+    :data-message-id="dataMessageId"
+  >
+    <component
+      v-for="(matchedComponent, index) in matchedComponents"
+      :key="index"
+      :is="matchedComponent"
+    />
+
+    <!-- Visually hidden focusable target for better keyboard navigation -->
+    <div
+      :id="`webchat-focus-target-${dataMessageId}`"
+      :tabindex="-1"
+      :class="$style.srOnly"
+      aria-hidden="true"
+    />
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed, 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'
+
+const $style = useCssModule()
+
+// Import all message type components
+import TextMessage from './messages/TextMessage.vue'
+import ImageMessage from './messages/ImageMessage.vue'
+import VideoMessage from './messages/VideoMessage.vue'
+import AudioMessage from './messages/AudioMessage.vue'
+import TextWithButtons from './messages/TextWithButtons.vue'
+import Gallery from './messages/Gallery.vue'
+import List from './messages/List.vue'
+import FileMessage from './messages/FileMessage.vue'
+import DatePicker from './messages/DatePicker.vue'
+import AdaptiveCard from './messages/AdaptiveCard.vue'
+
+const props = withDefaults(defineProps<MessageProps>(), {
+  action: undefined,
+  config: undefined,
+  theme: undefined,
+  prevMessage: undefined,
+  plugins: undefined,
+  onEmitAnalytics: undefined,
+  disableHeader: false,
+})
+
+// Generate a unique message ID for accessibility
+const dataMessageId = computed(() => getMessageId(props.message))
+
+// Provide message context for child components
+provideMessageContext({
+  message: props.message,
+  config: props.config || {},
+  action: props.action || (() => {}),
+  onEmitAnalytics: props.onEmitAnalytics || (() => {}),
+})
+
+// Component map for internal match rules (maps rule names to Vue components)
+const componentMap: Record<string, Component> = {
+  'Text': TextMessage,
+  'Image': ImageMessage,
+  'Video': VideoMessage,
+  'Audio': AudioMessage,
+  'TextWithButtons': TextWithButtons,
+  'Gallery': Gallery,
+  'List': List,
+  'File': FileMessage,
+  'DatePicker': DatePicker,
+  'AdaptiveCard': AdaptiveCard,
+}
+
+// Match message to appropriate components
+const matchedComponents = computed(() => {
+  const matched = match(props.message, props.config, props.plugins)
+
+  if (!Array.isArray(matched) || matched.length < 1) {
+    return []
+  }
+
+  // Resolve components from match results
+  return matched
+    .map(rule => {
+      // External plugins (MessagePlugin) provide their own component
+      if (isMessagePlugin(rule)) {
+        return rule.component
+      }
+      // Internal rules (MatchRule) use name lookup in componentMap
+      return componentMap[rule.name] ?? null
+    })
+    .filter((c): c is Component => c !== null)
+})
+
+// Root element classes
+const rootClasses = computed(() => {
+  return [
+    'webchat-message-row',
+    props.message.source,
+    $style.message,
+    props.message.source === 'bot' && $style.bot,
+    props.message.source === 'user' && $style.user,
+    props.message.source === 'agent' && $style.agent,
+  ].filter(Boolean)
+})
+
+// CSS variable injection from config colors
+const cssVariableStyle = computed(() => {
+  return configColorsToCssVariables(props.config?.settings?.colors)
+})
+</script>
+
+<style module>
+.message {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.message.bot {
+  align-items: flex-start;
+}
+
+.message.user {
+  align-items: flex-end;
+}
+
+.message.agent {
+  align-items: flex-start;
+}
+
+/* Screen reader only */
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>

package/src/components/common/ActionButton.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue'
+import { sanitizeUrl } from '@braintree/sanitize-url'
+import Typography from './Typography.vue'
+import LinkIcon from './LinkIcon.vue'
+import { sanitizeHTMLWithConfig } from '../../utils/sanitize'
+import { getWebchatButtonLabel, interpolateString, moveFocusToMessageFocusTarget } from '../../utils/helpers'
+import type { IWebchatButton, IWebchatQuickReply, ChatConfig, MessageSender, CustomIcon, AnalyticsEventCallback } from '../../types'
+
+type NormalizedActionButton = {
+  type?: string
+  content_type?: string
+  contentType?: string
+  title?: string
+  payload?: string
+  url?: string
+  target?: string
+  image_url?: string
+  imageUrl?: string
+  image_alt_text?: string
+  imageAltText?: string
+}
+
+interface Props {
+  button: (IWebchatButton | IWebchatQuickReply) & NormalizedActionButton
+  action?: MessageSender
+  disabled?: boolean
+  total: number
+  position: number
+  customIcon?: CustomIcon
+  showUrlIcon?: boolean
+  config?: ChatConfig
+  dataMessageId?: string
+  onEmitAnalytics?: AnalyticsEventCallback
+  size?: 'small' | 'large'
+  id?: string
+  className?: string
+  openXAppOverlay?: (url: string | undefined) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  action: undefined,
+  disabled: false,
+  customIcon: undefined,
+  showUrlIcon: false,
+  config: undefined,
+  dataMessageId: undefined,
+  onEmitAnalytics: undefined,
+  size: 'small',
+  id: undefined,
+  className: '',
+  openXAppOverlay: undefined,
+})
+
+const styles = useCssModule()
+
+// Determine button type
+const buttonType = computed(() => {
+  return props.button.type ?? props.button.content_type ?? props.button.contentType ?? null
+})
+
+// Get button image
+const buttonImage = computed(() => {
+  if ('image_url' in props.button) return props.button.image_url
+  if ('imageUrl' in props.button) return props.button.imageUrl
+  return null
+})
+
+// Get button image alt text
+const buttonImageAltText = computed(() => {
+  if ('image_alt_text' in props.button) return props.button.image_alt_text
+  if ('imageAltText' in props.button) return props.button.imageAltText
+  return ''
+})
+
+// Get button label
+const buttonLabel = computed(() => {
+  return getWebchatButtonLabel(props.button) || ''
+})
+
+// Sanitize button label HTML
+const sanitizedLabel = computed(() => {
+  const customAllowedHtmlTags = props.config?.settings?.widgetSettings?.customAllowedHtmlTags
+  return props.config?.settings?.layout?.disableHtmlContentSanitization
+    ? buttonLabel.value
+    : sanitizeHTMLWithConfig(buttonLabel.value, customAllowedHtmlTags)
+})
+
+// Check if phone number button
+const isPhoneNumber = computed(() => {
+  return props.button.payload && (buttonType.value === 'phone_number' || buttonType.value === 'user_phone_number')
+})
+
+// Check if web URL button
+const isWebURL = computed(() => {
+  return 'type' in props.button && props.button.type === 'web_url'
+})
+
+// Check if opens in new tab
+const isWebURLButtonTargetBlank = computed(() => {
+  return isWebURL.value && props.button.target !== '_self'
+})
+
+// Get aria-label
+const ariaLabel = computed(() => {
+  const buttonTitle = props.button.title || ''
+  const opensInNewTabLabel = props.config?.settings?.customTranslations?.ariaLabels?.opensInNewTab || 'Opens in new tab'
+
+  const isURLInNewTab = isWebURL.value && isWebURLButtonTargetBlank.value
+  const newTabURLButtonTitle = `${buttonTitle}. ${opensInNewTabLabel}`
+  const buttonTitleWithTarget = isURLInNewTab ? newTabURLButtonTitle : props.button.title
+
+  if (props.total > 1) {
+    return (
+      interpolateString(
+        props.config?.settings?.customTranslations?.ariaLabels?.actionButtonPositionText ?? '{position} of {total}',
+        {
+          position: props.position.toString(),
+          total: props.total.toString(),
+        }
+      ) +
+      ': ' +
+      buttonTitleWithTarget
+    )
+  } else if (props.total <= 1 && isURLInNewTab) {
+    return newTabURLButtonTitle
+  }
+
+  return undefined
+})
+
+// Determine which component to render
+const componentTag = computed(() => {
+  const isURLComponent = isWebURL.value || isPhoneNumber.value
+  if (!isURLComponent) return 'button'
+  return 'a'
+})
+
+// Get href for anchor tags
+const href = computed(() => {
+  if (isPhoneNumber.value && props.button.payload) {
+    return `tel:${props.button.payload}`
+  }
+  if (isWebURL.value && props.button.url) {
+    return props.button.url
+  }
+  return undefined
+})
+
+// Get target for anchor tags
+const target = computed(() => {
+  if (isWebURL.value) {
+    return props.button.target
+  }
+  return undefined
+})
+
+// CSS classes
+const buttonClasses = computed(() => {
+  const classes = [styles.button]
+  if (isWebURL.value) classes.push(styles.url)
+  if (props.className) classes.push(props.className)
+  if (props.disabled) {
+    classes.push(styles.disabled)
+    classes.push('disabled')
+  }
+  if (isPhoneNumber.value) classes.push('phone-number-or-url-anchor')
+  if (isWebURL.value) classes.push('phone-number-or-url-anchor')
+  return classes
+})
+
+// Handle button click
+const handleClick = (event: MouseEvent) => {
+  event.stopPropagation()
+  props.onEmitAnalytics?.('action', props.button)
+
+  if (isPhoneNumber.value) {
+    if (props.disabled) {
+      event.preventDefault()
+    }
+    return
+  }
+
+  if (isWebURL.value) {
+    const url = props.config?.settings?.layout?.disableUrlButtonSanitization
+      ? props.button.url
+      : sanitizeUrl(props.button.url)
+
+    // Prevent no-ops from sending you to a blank page
+    if (url === 'about:blank') return
+
+    window.open(url, isWebURLButtonTargetBlank.value ? '_blank' : '_self')
+  }
+
+  if (props.disabled) return
+
+  event.preventDefault()
+
+  if (isWebURL.value) {
+    return
+  }
+
+  if (buttonType.value === 'openXApp') {
+    props.openXAppOverlay?.(props.button.payload)
+    return
+  }
+
+  props.action?.(props.button.payload, null, { label: props.button.title })
+
+  focusHandling()
+}
+
+// Focus handling after action
+const focusHandling = () => {
+  // Focus the input after postback button click, if focusInputAfterPostback is true
+  if (props.config?.settings?.behavior?.focusInputAfterPostback) {
+    const textMessageInput = document.getElementById('webchatInputMessageInputInTextMode')
+    textMessageInput?.focus?.()
+    return
+  }
+
+  // Focus the visually hidden focus target after postback
+  if (props.dataMessageId) {
+    moveFocusToMessageFocusTarget(props.dataMessageId)
+  }
+}
+
+// Render icon
+const showIcon = computed(() => {
+  if (props.customIcon) return true
+  if (isWebURL.value && props.showUrlIcon) return true
+  return false
+})
+</script>
+
+<template>
+  <component
+    :is="componentTag"
+    :id="id"
+    :href="href"
+    :target="target"
+    :class="buttonClasses"
+    :aria-label="ariaLabel"
+    :aria-disabled="disabled"
+    :disabled="componentTag === 'button' ? disabled : undefined"
+    :tabindex="disabled ? -1 : 0"
+    @click="handleClick"
+  >
+    <div v-if="buttonImage" :class="styles.buttonImageContainer">
+      <img
+        :src="buttonImage"
+        :alt="buttonImageAltText"
+        :class="[
+          'webchat-template-button-image',
+          styles.buttonImage,
+          disabled && styles.imageDisabled
+        ]"
+      />
+    </div>
+
+    <Typography
+      :variant="size === 'large' ? 'title1-semibold' : 'cta-semibold'"
+      component="span"
+      :class="buttonImage && styles.buttonLabelWithImage"
+      v-html="sanitizedLabel"
+    />
+
+    <slot v-if="customIcon" name="icon" />
+    <LinkIcon v-else-if="showIcon && isWebURL && showUrlIcon" />
+  </component>
+</template>
+
+<style module>
+button.button,
+a.button {
+  border-radius: 19px;
+  padding: 8px 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  text-decoration: none;
+  background: var(--cc-primary-color);
+  color: var(--cc-primary-contrast-color);
+  border: none;
+  outline: none;
+  position: relative;
+}
+
+a.button:global(.phone-number-or-url-anchor) {
+  background: var(--cc-primary-color);
+}
+
+button.button svg,
+a.button svg,
+button.button path,
+a.button svg path {
+  fill: var(--cc-primary-contrast-color);
+  width: 12px;
+}
+
+button.button:hover,
+a.button:hover,
+button.button:focus,
+a.button:focus {
+  background: var(--cc-primary-color-hover);
+}
+
+/* Explicitly increase the specificity of the :focus-visible selector */
+[data-cognigy-webchat-root] button.button:focus-visible,
+[data-cognigy-webchat-root] a.button:focus-visible,
+[data-cognigy-webchat-root] a.button:global(.phone-number-or-url-anchor):focus-visible {
+  outline: 2px solid var(--cc-primary-color-focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--cc-primary-contrast-color);
+}
+
+button.button:disabled,
+button.button:disabled:hover,
+button.button:disabled:focus,
+a.button.disabled,
+a.button.disabled:hover,
+a.button.disabled:focus {
+  background: var(--cc-primary-color-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+
+.buttonLabelWithImage {
+  margin-left: 40px;
+}
+
+.buttonImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-top-left-radius: 19px;
+  border-bottom-left-radius: 19px;
+}
+
+.buttonImage.imageDisabled {
+  opacity: 0.6;
+}
+
+.buttonImageContainer {
+  display: flex;
+  position: absolute;
+  left: 0;
+  width: 40px;
+  height: 100%;
+  border-right: 2px solid var(--cc-primary-contrast-color);
+}
+</style>

package/src/components/common/ActionButtons.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed, useCssModule, onMounted, CSSProperties } from 'vue'
+import ActionButton from './ActionButton.vue'
+import { getRandomId } from '../../utils/helpers'
+import type { IWebchatButton, IWebchatQuickReply, ChatConfig, MessageSender, CustomIcon, AnalyticsEventCallback } from '../../types'
+
+interface Props {
+  payload: (IWebchatButton | IWebchatQuickReply)[]
+  action?: MessageSender
+  className?: string
+  containerClassName?: string
+  containerStyle?: CSSProperties
+  buttonClassName?: string
+  buttonListItemClassName?: string
+  customIcon?: CustomIcon
+  showUrlIcon?: boolean
+  config?: ChatConfig
+  dataMessageId?: string
+  onEmitAnalytics?: AnalyticsEventCallback
+  size?: 'small' | 'large'
+  templateTextId?: string
+  openXAppOverlay?: (url: string | undefined) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  action: undefined,
+  className: '',
+  containerClassName: '',
+  containerStyle: undefined,
+  buttonClassName: '',
+  buttonListItemClassName: '',
+  customIcon: undefined,
+  showUrlIcon: false,
+  config: undefined,
+  dataMessageId: undefined,
+  onEmitAnalytics: undefined,
+  size: 'small',
+  templateTextId: undefined,
+  openXAppOverlay: undefined,
+})
+
+const styles = useCssModule()
+
+// Generate unique ID for buttons
+const webchatButtonTemplateButtonId = getRandomId('webchatButtonTemplateButton')
+
+// Auto-focus first button on mount if enabled
+onMounted(() => {
+  if (!props.config?.settings?.widgetSettings?.enableAutoFocus) return
+
+  const firstButton = document.getElementById(`${webchatButtonTemplateButtonId}-0`)
+  const chatHistory = document.getElementById('webchatChatHistoryWrapperLiveLogPanel')
+
+  if (!chatHistory?.contains(document.activeElement)) return
+
+  setTimeout(() => {
+    firstButton?.focus()
+  }, 200)
+})
+
+// Filter valid buttons
+const buttons = computed(() => {
+  if (!props.payload || props.payload?.length === 0) return []
+
+  return props.payload.filter((button: Props['payload'][number]) => {
+    // Filter by type
+    if ('type' in button && !['postback', 'web_url', 'phone_number', 'openXApp'].includes(button.type)) {
+      return false
+    }
+
+    // Filter text content_type buttons without title
+    if ('content_type' in button && button.content_type === 'text' && !button.title) {
+      return false
+    }
+
+    return true
+  })
+})
+
+// Determine container component type
+const componentTag = computed(() => {
+  return buttons.value.length > 1 ? 'ul' : 'div'
+})
+
+// Container classes
+const containerClasses = computed(() => {
+  const classes = [props.className, styles.buttons, props.containerClassName]
+  return classes.filter(Boolean).join(' ')
+})
+</script>
+
+<template>
+  <component
+    :is="componentTag"
+    v-if="buttons.length > 0"
+    :class="containerClasses"
+    :style="containerStyle || {}"
+    :aria-labelledby="templateTextId"
+    data-testid="action-buttons"
+  >
+    <template v-if="buttons.length > 1">
+      <li
+        v-for="(button, index) in buttons"
+        :key="`${webchatButtonTemplateButtonId}-${index}`"
+        :class="buttonListItemClassName"
+        :aria-posinset="index + 1"
+        :aria-setsize="buttons.length"
+      >
+        <ActionButton
+          :id="`${webchatButtonTemplateButtonId}-${index}`"
+          :button="button"
+          :action="action"
+          :disabled="action === undefined"
+          :position="index + 1"
+          :total="buttons.length"
+          :custom-icon="customIcon"
+          :show-url-icon="showUrlIcon"
+          :config="config"
+          :on-emit-analytics="onEmitAnalytics"
+          :size="size"
+          :data-message-id="dataMessageId"
+          :class-name="buttonClassName"
+          :open-x-app-overlay="openXAppOverlay"
+        />
+      </li>
+    </template>
+
+    <template v-else>
+      <ActionButton
+        v-for="(button, index) in buttons"
+        :id="`${webchatButtonTemplateButtonId}-${index}`"
+        :key="`${webchatButtonTemplateButtonId}-${index}`"
+        :button="button"
+        :action="action"
+        :disabled="action === undefined"
+        :position="index + 1"
+        :total="buttons.length"
+        :custom-icon="customIcon"
+        :show-url-icon="showUrlIcon"
+        :config="config"
+        :on-emit-analytics="onEmitAnalytics"
+        :size="size"
+        :data-message-id="dataMessageId"
+        :class-name="buttonClassName"
+        :open-x-app-overlay="openXAppOverlay"
+      />
+    </template>
+  </component>
+</template>
+
+<style module>
+.buttons {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 295px;
+}
+
+ul.buttons {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: 0;
+}
+
+ul.buttons li {
+  list-style: none;
+}
+</style>