@cognigy/chat-components-vue 0.1.0

package/src/components/messages/List.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    v-if="elements.length > 0"
+    :class="['webchat-list-template-root', $style.wrapper]"
+    :id="listTemplateId"
+    data-testid="list-message"
+  >
+    <!-- Header element (first element if top_element_style is large) -->
+    <ListItem
+      v-if="headerElement"
+      :element="headerElement"
+      isHeaderElement
+      headingLevel="h4"
+      :id="`header-${listTemplateId}`"
+    />
+
+    <!-- Regular list items -->
+    <ul
+      :aria-labelledby="headerElement ? `listHeader-header-${listTemplateId}` : undefined"
+      :class="$style.list"
+    >
+      <ListItem
+        v-for="(element, index) in regularElements"
+        :key="index"
+        :element="element"
+        :headingLevel="headerElement ? 'h5' : 'h4'"
+        :id="`${listTemplateId}-${index}`"
+        :dividerBefore="index > 0"
+        :dividerAfter="Boolean(globalButton && index === regularElements.length - 1)"
+      />
+    </ul>
+
+    <!-- Global button at bottom -->
+    <ActionButtons
+      v-if="globalButton"
+      :payload="[globalButton]"
+      :action="shouldBeDisabled ? undefined : action"
+      buttonClassName="webchat-list-template-global-button"
+      :containerClassName="$style.mainButtonWrapper"
+      :config="config"
+      :dataMessageId="dataMessageId"
+      :onEmitAnalytics="onEmitAnalytics"
+      size="large"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, useCssModule } from 'vue'
+import ListItem from './ListItem.vue'
+import ActionButtons from '../common/ActionButtons.vue'
+import { useMessageContext } from '../../composables/useMessageContext'
+import { getChannelPayload } from '../../utils/matcher'
+import { getRandomId } from '../../utils/helpers'
+import type { IWebchatTemplateAttachment } from '../../types'
+
+const $style = useCssModule()
+
+// Message context
+const { message, config, action, onEmitAnalytics } = useMessageContext()
+const dataMessageId = window.__TEST_MESSAGE_ID__ // For testing
+
+// Get list data from message payload
+const payload = computed(() => getChannelPayload(message, config))
+const attachment = computed(() => payload.value?.message?.attachment as IWebchatTemplateAttachment | undefined)
+
+// Extract list elements and configuration
+const elements = computed(() => {
+  return attachment.value?.payload?.elements || []
+})
+
+const topElementStyle = computed(() => {
+  return attachment.value?.payload?.top_element_style
+})
+
+const showTopElementLarge = computed(() => {
+  return topElementStyle.value === 'large' || topElementStyle.value === true
+})
+
+// Split elements into header and regular items
+const headerElement = computed(() => {
+  return showTopElementLarge.value ? elements.value[0] : null
+})
+
+const regularElements = computed(() => {
+  return showTopElementLarge.value ? elements.value.slice(1) : elements.value
+})
+
+// Global button (first button in buttons array)
+const globalButton = computed(() => {
+  const buttons = attachment.value?.payload?.buttons
+  return buttons?.[0]
+})
+
+// Should buttons be disabled
+const shouldBeDisabled = computed(() => {
+  // TODO: Add conversation ended check when messageParams available
+  return false
+})
+
+// Generate unique ID for list
+const listTemplateId = getRandomId('webchatListTemplateRoot')
+
+// Auto-focus first focusable element on mount
+onMounted(() => {
+  if (!config?.settings?.widgetSettings?.enableAutoFocus) return
+
+  const chatHistory = document.getElementById('webchatChatHistoryWrapperLiveLogPanel')
+  if (!chatHistory?.contains(document.activeElement)) return
+
+  setTimeout(() => {
+    const listTemplateRoot = document.getElementById(listTemplateId)
+    // Get the first focusable element within the list and add focus
+    const focusable = listTemplateRoot?.querySelectorAll(
+      'button, [href], [tabindex]:not([tabindex="-1"])'
+    )
+    const firstFocusable = focusable?.[0] as HTMLElement
+    firstFocusable?.focus()
+  }, 200)
+})
+</script>
+
+<style module>
+.wrapper {
+  max-width: 295px;
+  border-radius: var(--cc-bubble-border-radius, 15px);
+  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  background-color: var(--cc-white, #ffffff);
+}
+
+.wrapper .listItemRoot {
+  border-top-right-radius: var(--cc-bubble-border-radius, 15px);
+  border-top-left-radius: var(--cc-bubble-border-radius, 15px);
+}
+
+.list {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: 0;
+}
+
+.list .listItemRoot {
+  list-style: none;
+}
+
+.mainButtonWrapper {
+  padding: 16px;
+}
+</style>

package/src/components/messages/ListItem.vue

@@ -0,0 +1,344 @@
+<template>
+  <component
+    :is="componentTag"
+    :class="[isHeaderElement && $style.headerRoot, $style.listItemRoot]"
+    :style="{ backgroundImage: isHeaderElement && element.image_url ? backgroundImage : undefined }"
+    :data-testid="isHeaderElement ? 'header-image' : 'list-item'"
+    :id="id"
+  >
+    <!-- Divider before item -->
+    <div v-if="!isHeaderElement && dividerBefore" :class="$style.divider" />
+
+    <!-- Item content wrapper -->
+    <div
+      :class="contentClasses"
+      :role="defaultActionUrl ? 'link' : undefined"
+      :aria-label="defaultActionUrl ? `${titleHtml}. ${opensInNewTabLabel}` : undefined"
+      :aria-describedby="element.subtitle ? subtitleId : undefined"
+      :tabindex="defaultActionUrl ? 0 : -1"
+      :style="defaultActionUrl && !shouldBeDisabled ? { cursor: 'pointer' } : {}"
+      @click="handleClick"
+      @keydown="handleKeyDown"
+    >
+      <!-- Header element content -->
+      <div
+        v-if="isHeaderElement"
+        :class="['webchat-list-template-header-content', $style.headerContent, button && $style.headerContentWithButton]"
+      >
+        <!-- Title and subtitle -->
+        <Typography
+          v-if="titleHtml"
+          :variant="isHeaderElement ? 'h2-semibold' : 'title1-semibold'"
+          :component="headingLevel"
+          :class="[
+            isHeaderElement ? 'webchat-list-template-header-title' : 'webchat-list-template-element-title',
+            subtitleHtml ? $style.itemTitleWithSubtitle : $style.itemTitle
+          ]"
+          :id="isHeaderElement ? `listHeader-${id}` : `listItemHeader-${id}`"
+          v-html="titleHtml"
+        />
+
+        <Typography
+          v-if="subtitleHtml"
+          variant="body-regular"
+          :class="[
+            isHeaderElement ? 'webchat-list-template-header-subtitle' : 'webchat-list-template-element-subtitle',
+            $style.itemSubtitle
+          ]"
+          :id="subtitleId"
+          v-html="subtitleHtml"
+        />
+      </div>
+
+      <!-- Regular list item content -->
+      <div
+        v-else
+        :class="['webchat-list-template-element-content', $style.listItemContent]"
+      >
+        <div :class="$style.listItemText">
+          <!-- Title and subtitle -->
+          <Typography
+            v-if="titleHtml"
+            variant="title1-semibold"
+            :component="headingLevel"
+            :class="[
+              'webchat-list-template-element-title',
+              subtitleHtml ? $style.itemTitleWithSubtitle : $style.itemTitle
+            ]"
+            :id="`listItemHeader-${id}`"
+            v-html="titleHtml"
+          />
+
+          <Typography
+            v-if="subtitleHtml"
+            variant="body-regular"
+            :class="['webchat-list-template-element-subtitle', $style.itemSubtitle]"
+            :id="subtitleId"
+            v-html="subtitleHtml"
+          />
+        </div>
+
+        <!-- Image thumbnail for regular items -->
+        <div
+          v-if="element.image_url"
+          :class="$style.listItemImage"
+          :style="{ backgroundImage }"
+          data-testid="regular-image"
+        >
+          <span role="img" :aria-label="element.image_alt_text || ''" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Button for item -->
+    <ActionButtons
+      v-if="button"
+      :payload="[button]"
+      :action="shouldBeDisabled ? undefined : action"
+      :buttonClassName="isHeaderElement ? 'webchat-list-template-header-button' : 'webchat-list-template-element-button'"
+      :containerClassName="isHeaderElement ? $style.listHeaderButtonWrapper : $style.listItemButtonWrapper"
+      :config="config"
+      :dataMessageId="dataMessageId"
+      :onEmitAnalytics="onEmitAnalytics"
+      size="large"
+    />
+
+    <!-- Divider after item -->
+    <div v-if="!isHeaderElement && dividerAfter" :class="$style.divider" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue'
+import Typography from '../common/Typography.vue'
+import ActionButtons from '../common/ActionButtons.vue'
+import { useMessageContext } from '../../composables/useMessageContext'
+import { useSanitize } from '../../composables/useSanitize'
+import { getRandomId, getBackgroundImage } from '../../utils/helpers'
+import { sanitizeUrl } from '@braintree/sanitize-url'
+import type { IWebchatAttachmentElement } from '../../types'
+
+interface Props {
+  element: IWebchatAttachmentElement
+  isHeaderElement?: boolean
+  headingLevel?: 'h4' | 'h5'
+  id: string
+  dividerBefore?: boolean
+  dividerAfter?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isHeaderElement: false,
+  headingLevel: 'h4',
+  dividerBefore: false,
+  dividerAfter: false,
+})
+
+const $style = useCssModule()
+
+// Context
+const { action, config, onEmitAnalytics } = useMessageContext()
+const dataMessageId = window.__TEST_MESSAGE_ID__ // For testing
+
+// Sanitize HTML
+const { processHTML } = useSanitize()
+const titleHtml = computed(() => processHTML(props.element.title || ''))
+const subtitleHtml = computed(() => processHTML(props.element.subtitle || ''))
+
+// IDs for accessibility
+const subtitleId = getRandomId('webchatListTemplateHeaderSubtitle')
+
+// Background image
+const backgroundImage = computed(() => {
+  if (!props.element.image_url) return undefined
+  return getBackgroundImage(props.element.image_url)
+})
+
+// Button (only first button is used)
+const button = computed(() => {
+  return props.element.buttons?.[0]
+})
+
+// Default action URL (clickable item)
+const defaultActionUrl = computed(() => {
+  return props.element.default_action?.url
+})
+
+// Should buttons be disabled
+const shouldBeDisabled = computed(() => {
+  // TODO: Add conversation ended check when messageParams available
+  return false
+})
+
+// Translations
+const opensInNewTabLabel = computed(() => {
+  return config?.settings?.customTranslations?.ariaLabels?.opensInNewTab || 'Opens in new tab'
+})
+
+// Component tag (div for header, li for regular items)
+const componentTag = computed(() => {
+  return props.isHeaderElement ? 'div' : 'li'
+})
+
+// Content classes
+const contentClasses = computed(() => {
+  return props.isHeaderElement
+    ? ['webchat-list-template-header', $style.headerContentWrapper]
+    : ['webchat-list-template-element', $style.listItemWrapper]
+})
+
+// Handle item click (default action)
+const handleClick = () => {
+  if (shouldBeDisabled.value || !defaultActionUrl.value) return
+
+  const url = config?.settings?.layout?.disableUrlButtonSanitization
+    ? defaultActionUrl.value
+    : sanitizeUrl(defaultActionUrl.value)
+
+  // Prevent no-ops from sending you to a blank page
+  if (url === 'about:blank') return
+
+  window.open(url)
+}
+
+// Handle keyboard navigation
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (defaultActionUrl.value && event.key === 'Enter') {
+    handleClick()
+  }
+}
+</script>
+
+<style module>
+.listItemRoot {
+  list-style: none;
+}
+
+.divider {
+  border-top: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+}
+
+/* Header element styles */
+.headerRoot {
+  aspect-ratio: 16/9;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-top-right-radius: var(--cc-bubble-border-radius, 15px);
+  border-top-left-radius: var(--cc-bubble-border-radius, 15px);
+}
+
+.headerRoot::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: hsla(0, 0%, 0%, 0.4); /* image overlay */
+  border-radius: inherit;
+}
+
+.headerRoot:focus {
+  opacity: 0.6;
+}
+
+.headerContentWrapper {
+  border-radius: inherit;
+  position: relative;
+  flex-grow: 1;
+  align-content: flex-end;
+}
+
+.headerContentWrapper:focus-visible {
+  outline: 2px solid var(--cc-primary-color-focus, #1976d2);
+  box-shadow: inset 0 0 0 2px var(--cc-white, #ffffff);
+}
+
+.headerContent {
+  padding: 16px 16px 12px 16px;
+  color: var(--cc-white, #ffffff);
+}
+
+.headerContent > * {
+  color: var(--cc-white, #ffffff);
+}
+
+.headerContentWithButton {
+  padding-bottom: 72px; /* 12px headerContent bottom padding + 44px button height + 16px button bottom padding */
+}
+
+/* Title and subtitle styles */
+.itemTitle {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.itemTitleWithSubtitle {
+  margin-top: 0px;
+  margin-bottom: 8px;
+}
+
+.itemSubtitle {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+/* Regular list item styles */
+.listItemWrapper {
+  position: relative;
+  display: flex;
+}
+
+.listItemWrapper:focus {
+  outline: none;
+}
+
+.listItemWrapper:focus-visible {
+  outline: 2px solid var(--cc-primary-color-focus, #1976d2);
+  outline-offset: -10px;
+}
+
+.listItemContent {
+  padding: 16px 16px 12px 16px;
+  overflow-wrap: break-word;
+  display: flex;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  color: var(--cc-black-20, rgba(0, 0, 0, 0.2));
+}
+
+.listItemText {
+  width: 100%;
+}
+
+.listItemText > * {
+  color: var(--cc-black-20, rgba(0, 0, 0, 0.2));
+}
+
+.listItemImage {
+  background-size: cover;
+  background-position: center center;
+  border-radius: 10px;
+  width: 86px;
+  height: 102px;
+  flex-shrink: 0;
+}
+
+/* Button container styles */
+.listHeaderButtonWrapper {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  left: 16px;
+}
+
+.listItemButtonWrapper {
+  padding: 0 16px 16px 16px;
+}
+</style>

package/src/components/messages/TextMessage.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue'
+import { useMessageContext } from '../../composables/useMessageContext'
+import { useSanitize } from '../../composables/useSanitize'
+import ChatBubble from '../common/ChatBubble.vue'
+import { replaceUrlsWithHTMLanchorElem } from '../../utils/helpers'
+import MarkdownIt from 'markdown-it'
+
+interface Props {
+  content?: string | string[]
+  className?: string
+  markdownClassName?: string
+  id?: string
+  ignoreLiveRegion?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  content: undefined,
+  className: '',
+  markdownClassName: '',
+  id: undefined,
+  ignoreLiveRegion: false,
+})
+
+const styles = useCssModule()
+const { message, config } = useMessageContext()
+const { processHTML } = useSanitize()
+
+// Initialize markdown-it with HTML support and GFM tables
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  breaks: true,
+})
+
+// Get text content
+const text = computed(() => message?.text)
+const source = computed(() => message?.source)
+
+// Use prop content or message text
+const content = computed(() => {
+  const contentValue = props.content || text.value || ''
+  return Array.isArray(contentValue) ? contentValue.join('') : contentValue
+})
+
+// Determine if markdown should be rendered
+const renderMarkdown = computed(() => {
+  return config?.settings?.behavior?.renderMarkdown &&
+    (source.value === 'bot' || source.value === 'engagement')
+})
+
+// Optionally transform URL strings into clickable links
+const enhancedURLsText = computed(() => {
+  if (config?.settings?.widgetSettings?.disableRenderURLsAsLinks) {
+    return content.value
+  }
+  return replaceUrlsWithHTMLanchorElem(content.value)
+})
+
+// Determine if sanitization should be ignored
+const ignoreSanitization = computed(() => {
+  return source.value === 'user' && config?.settings?.widgetSettings?.disableTextInputSanitization
+})
+
+// Process content: sanitize HTML if needed
+const processedContent = computed(() => {
+  if (ignoreSanitization.value) {
+    return enhancedURLsText.value
+  }
+  return processHTML(enhancedURLsText.value)
+})
+
+// Render markdown if enabled
+const markdownContent = computed(() => {
+  if (!renderMarkdown.value) return ''
+
+  // Render markdown to HTML
+  let html = md.render(processedContent.value || content.value)
+
+  // Make all links open in new tab
+  html = html.replace(/<a /g, '<a target="_blank" rel="noreferrer" ')
+
+  return html
+})
+
+// Compute CSS classes
+const textClasses = computed(() => {
+  const classes = [props.className]
+  if (!renderMarkdown.value) {
+    classes.push(styles.text)
+  }
+  return classes.filter(Boolean)
+})
+
+const markdownClasses = computed(() => {
+  const classes = [styles.markdown, props.markdownClassName]
+  return classes.filter(Boolean)
+})
+</script>
+
+<template>
+  <ChatBubble>
+    <div
+      v-if="renderMarkdown"
+      :class="markdownClasses"
+      v-html="markdownContent"
+    />
+    <p
+      v-else
+      :id="id"
+      :class="textClasses"
+      v-html="processedContent"
+    />
+  </ChatBubble>
+</template>
+
+<style module>
+.text {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  display: inline;
+}
+
+.text a:focus-visible {
+  outline: 2px solid var(--cc-primary-color-focus);
+  outline-offset: 2px;
+}
+
+.text img {
+  max-width: 100%;
+}
+
+.markdown {
+  display: inline;
+  white-space: normal;
+}
+
+.markdown > p:only-child {
+  margin: 0;
+}
+
+.markdown *:first-child {
+  margin-top: 0;
+}
+
+.markdown *:last-child {
+  margin-bottom: 0;
+}
+
+.markdown p:last-child {
+  display: inline;
+}
+
+.markdown table {
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-bottom: 4px;
+  margin-top: 4px;
+}
+
+.markdown th {
+  text-align: left;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-right-width: 0px;
+  background-color: var(--cc-black-90);
+  border-style: solid;
+  border-color: var(--cc-black-80);
+  padding: 4px 12px;
+}
+
+.markdown th:first-child {
+  border-top-left-radius: 6px;
+}
+
+.markdown th:last-child {
+  border-top-right-radius: 6px;
+  border-right-width: 1px;
+}
+
+.markdown td {
+  border-style: solid;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-top-width: 0px;
+  border-right-width: 0px;
+  border-color: var(--cc-black-80);
+  padding: 4px 12px;
+}
+
+.markdown td:last-child {
+  border-right-width: 1px;
+}
+
+.markdown tbody tr:last-child td:first-child {
+  border-bottom-left-radius: 6px;
+}
+
+.markdown tbody tr:last-child td:last-child {
+  border-bottom-right-radius: 6px;
+}
+</style>