@cognigy/chat-components-vue 0.2.0 → 0.3.1

package/src/components/common/ChatEvent.vue

@@ -68,9 +68,12 @@ const eventClasses = computed(() => {
 
 .eventPillTextWrapper {
   border-radius: 15px;
-  background: var(--cc-black-80, rgba(0, 0, 0, 0.8));
-  color: var(--cc-black-20, rgba(0, 0, 0, 0.2));
+  background: var(--cc-chat-event-background, rgba(0, 0, 0, 0.8));
+  color: var(--cc-chat-event-text-color, #ffffff);
   padding: 8px 12px;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .eventText {

package/src/components/common/TypingIndicator.vue

@@ -71,7 +71,7 @@ const indicatorClasses = computed(() => {
   align-items: center;
   background-color: var(--cc-white, #ffffff);
   border-radius: 15px;
-  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
   box-sizing: border-box;
   display: flex;
   gap: 6px;
@@ -82,6 +82,9 @@ const indicatorClasses = computed(() => {
   width: 62px;
   margin-block: var(--webchat-message-margin-block, 24px);
   margin-inline: var(--webchat-message-margin-inline, 20px);
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .typingIndicator.disableBorder {

package/src/components/common/Typography.vue

@@ -1,94 +1,94 @@
 <script setup lang="ts">
-import { computed, useCssModule, useAttrs, CSSProperties } from 'vue'
+import { computed, useCssModule, useAttrs, CSSProperties } from "vue";
 
 export type TagVariant =
-  | 'h1-semibold'
-  | 'h2-regular'
-  | 'h2-semibold'
-  | 'title1-semibold'
-  | 'title1-regular'
-  | 'title2-semibold'
-  | 'title2-regular'
-  | 'body-regular'
-  | 'body-semibold'
-  | 'copy-medium'
-  | 'cta-semibold'
-
-type ColorVariant = 'primary' | 'secondary'
+  | "h1-semibold"
+  | "h2-regular"
+  | "h2-semibold"
+  | "title1-semibold"
+  | "title1-regular"
+  | "title2-semibold"
+  | "title2-regular"
+  | "body-regular"
+  | "body-semibold"
+  | "copy-medium"
+  | "cta-semibold";
+
+type ColorVariant = "primary" | "secondary";
 
 interface Props {
-  variant?: TagVariant
-  component?: string
-  className?: string
-  style?: CSSProperties
-  color?: string
-  id?: string
-  ariaHidden?: boolean
-  tabIndex?: number
+  variant?: TagVariant;
+  component?: string;
+  className?: string;
+  style?: CSSProperties;
+  color?: string;
+  id?: string;
+  ariaHidden?: boolean;
+  tabIndex?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'body-regular',
+  variant: "body-regular",
   component: undefined,
-  className: '',
+  className: "",
   style: undefined,
   color: undefined,
   id: undefined,
   ariaHidden: undefined,
   tabIndex: undefined,
-})
+});
 
-const attrs = useAttrs()
-const styles = useCssModule()
+const attrs = useAttrs();
+const styles = useCssModule();
 
 // Mapping between variants and default HTML tags
 const variantsMapping: Record<TagVariant, string> = {
-  'h1-semibold': 'h1',
-  'h2-regular': 'h2',
-  'h2-semibold': 'h2',
-  'title1-semibold': 'h3',
-  'title1-regular': 'h4',
-  'title2-semibold': 'h5',
-  'title2-regular': 'h6',
-  'body-semibold': 'p',
-  'body-regular': 'p',
-  'copy-medium': 'p',
-  'cta-semibold': 'p',
-}
+  "h1-semibold": "h1",
+  "h2-regular": "h2",
+  "h2-semibold": "h2",
+  "title1-semibold": "h3",
+  "title1-regular": "h4",
+  "title2-semibold": "h5",
+  "title2-regular": "h6",
+  "body-semibold": "p",
+  "body-regular": "p",
+  "copy-medium": "p",
+  "cta-semibold": "p",
+};
 
 // Color mapping for predefined colors
 const colorsMapping: Record<ColorVariant, string> = {
-  primary: 'var(--cc-primary-color)',
-  secondary: 'var(--cc-secondary-color)',
-}
+  primary: "var(--cc-primary-color)",
+  secondary: "var(--cc-secondary-color)",
+};
 
 // Determine which HTML element to render
 const componentTag = computed(() => {
-  return props.component ?? variantsMapping[props.variant]
-})
+  return props.component ?? variantsMapping[props.variant];
+});
 
 // Compute the color value
 const typographyColor = computed(() => {
-  if (!props.color) return undefined
-  return colorsMapping[props.color as ColorVariant] ?? props.color
-})
+  if (!props.color) return undefined;
+  return colorsMapping[props.color as ColorVariant] ?? props.color;
+});
 
 // Compute CSS classes
 const componentClasses = computed(() => {
-  const classes = [styles[props.variant]]
-  if (props.className) classes.push(props.className)
-  if (props.color) classes.push(props.color)
-  return classes.filter(Boolean).join(' ')
-})
+  const classes = [styles[props.variant]];
+  if (props.className) classes.push(props.className);
+  if (props.color) classes.push(props.color);
+  return classes.filter(Boolean).join(" ");
+});
 
 // Compute merged styles
 const componentStyle = computed(() => {
-  const mergedStyle: CSSProperties = { ...props.style }
+  const mergedStyle: CSSProperties = { ...props.style };
   if (typographyColor.value) {
-    mergedStyle.color = typographyColor.value
+    mergedStyle.color = typographyColor.value;
   }
-  return mergedStyle
-})
+  return mergedStyle;
+});
 </script>
 
 <template>
@@ -107,7 +107,6 @@ const componentStyle = computed(() => {
 
 <style module>
 .h1-semibold {
-  font-family: Figtree;
   font-size: 2.125rem; /* 34px */
   font-style: normal;
   font-weight: 600;
@@ -115,7 +114,6 @@ const componentStyle = computed(() => {
 }
 
 .h2-regular {
-  font-family: Figtree;
   font-size: 1.125rem; /* 18px */
   font-style: normal;
   font-weight: 400;
@@ -123,7 +121,6 @@ const componentStyle = computed(() => {
 }
 
 .h2-semibold {
-  font-family: Figtree;
   font-size: 1.125rem; /* 18px */
   font-style: normal;
   font-weight: 600;
@@ -131,7 +128,6 @@ const componentStyle = computed(() => {
 }
 
 .title1-regular {
-  font-family: Figtree;
   font-size: 1rem; /* 16px */
   font-style: normal;
   font-weight: 400;
@@ -139,7 +135,6 @@ const componentStyle = computed(() => {
 }
 
 .title1-semibold {
-  font-family: Figtree;
   font-size: 1rem; /* 16px */
   font-style: normal;
   font-weight: 600;
@@ -147,7 +142,6 @@ const componentStyle = computed(() => {
 }
 
 .title2-regular {
-  font-family: Figtree;
   font-size: 0.75rem; /* 12px */
   font-style: normal;
   font-weight: 400;
@@ -155,7 +149,6 @@ const componentStyle = computed(() => {
 }
 
 .title2-semibold {
-  font-family: Figtree;
   font-size: 0.75rem; /* 12px */
   font-style: normal;
   font-weight: 600;
@@ -163,7 +156,6 @@ const componentStyle = computed(() => {
 }
 
 .body-regular {
-  font-family: Figtree;
   font-size: 0.875rem; /* 14px */
   font-style: normal;
   font-weight: 400;
@@ -171,7 +163,6 @@ const componentStyle = computed(() => {
 }
 
 .body-semibold {
-  font-family: Figtree;
   font-size: 0.875rem; /* 14px */
   font-style: normal;
   font-weight: 600;
@@ -179,7 +170,6 @@ const componentStyle = computed(() => {
 }
 
 .copy-medium {
-  font-family: Figtree;
   font-size: 0.75rem; /* 12px */
   font-style: normal;
   font-weight: 500;
@@ -187,7 +177,6 @@ const componentStyle = computed(() => {
 }
 
 .cta-semibold {
-  font-family: Figtree;
   font-size: 0.875rem; /* 14px */
   font-style: normal;
   font-weight: 600;

package/src/components/messages/AudioMessage.vue

@@ -270,8 +270,11 @@ onMounted(() => {
   gap: 10px;
   background-color: var(--cc-white, #ffffff);
   border-radius: var(--cc-bubble-border-radius, 15px);
-  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
   padding: 0px 12px;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .audioWrapper .controls {

package/src/components/messages/DatePicker.vue

@@ -21,16 +21,6 @@
       </Typography>
     </div>
 
-    <!-- Event name/label (optional) -->
-    <div
-      v-if="eventName"
-      :class="['webchat-date-picker-event', $style.eventName]"
-      data-testid="datepicker-event"
-    >
-      <Typography variant="copy-medium" component="span" :class="$style.eventLabel">
-        {{ eventName }}
-      </Typography>
-    </div>
   </div>
 </template>
 
@@ -59,16 +49,9 @@ const buttonText = computed(() => {
   return datePickerData.value?.openPickerButtonText || 'Pick date'
 })
 
-// Event name/label
-const eventName = computed(() => {
-  return datePickerData.value?.eventName
-})
-
-// Check if button should be disabled (for presentation purposes)
-// In a real implementation, this would check conversation state
+// Disable button when a date has already been selected
 const isDisabled = computed(() => {
-  // Could be extended to check message.data.hasReply or other flags
-  return false
+  return !!selectedDate.value
 })
 
 // Get selected date if available (from message text or reply)
@@ -93,6 +76,9 @@ const selectedDate = computed(() => {
   flex-direction: column;
   gap: 8px;
   align-items: flex-start;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .button {
@@ -124,12 +110,4 @@ const selectedDate = computed(() => {
   border-radius: var(--cc-bubble-border-radius, 15px);
 }
 
-.eventName {
-  padding: 4px 8px;
-}
-
-.eventLabel {
-  color: var(--cc-black-40, rgba(0, 0, 0, 0.4));
-  font-style: italic;
-}
 </style>

package/src/components/messages/FileMessage.vue

@@ -149,6 +149,9 @@ const nonImages = computed(() => {
   object-position: center center;
   animation: webchatImagePreviewPopIn 0.2s ease-out;
   transform-origin: center;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .smallImagePreview {
@@ -159,6 +162,9 @@ const nonImages = computed(() => {
   object-position: center center;
   animation: webchatImagePreviewPopIn 0.2s ease-out;
   transform-origin: center;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .filePreview {
@@ -167,8 +173,11 @@ const nonImages = computed(() => {
   padding: 8px 12px;
   border-radius: var(--cc-bubble-border-radius, 15px);
   height: 33px;
-  background-color: var(--cc-black-95, rgba(0, 0, 0, 0.95));
+  background-color: var(--cc-file-preview-background, rgba(0, 0, 0, 0.95));
   max-width: 295px;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .filePreview .fileNameWrapper {
@@ -176,7 +185,7 @@ const nonImages = computed(() => {
   flex-direction: row;
   align-items: center;
   max-width: 200px;
-  color: var(--cc-black-10, rgba(0, 0, 0, 0.1));
+  color: var(--cc-file-preview-text-color, #ffffff);
 }
 
 .filePreview .fileName {
@@ -190,6 +199,6 @@ const nonImages = computed(() => {
 }
 
 .filePreview .fileSize {
-  color: var(--cc-black-40, rgba(0, 0, 0, 0.4));
+  color: var(--cc-file-preview-secondary-text-color, rgba(255, 255, 255, 0.6));
 }
 </style>

package/src/components/messages/Gallery.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="elements.length > 0">
+  <div v-if="elements.length > 0" :class="$style.galleryRoot">
     <!-- Single card (no carousel) -->
     <div
       v-if="elements.length === 1"
-      :class="['webchat-carousel-template-root', $style.wrapper]"
+      :class="['webchat-carousel-template-root', $style.wrapper, variantClass]"
       data-testid="gallery-message"
     >
       <GalleryItem :slide="elements[0]" :contentId="`${carouselContentId}-0`" />
@@ -21,22 +21,23 @@
       }"
       :pagination="{ clickable: true }"
       :a11y="{ slideLabelMessage }"
-      :class="['webchat-carousel-template-root', $style.wrapper]"
+      :class="swiperClasses"
       data-testid="gallery-message"
+      @slideChange="handleSlideChange"
     >
       <SwiperSlide
         v-for="(element, index) in elements"
         :key="index"
-        style="width: 206px"
+        :style="slideStyle"
       >
         <GalleryItem :slide="element" :contentId="`${carouselContentId}-${index}`" />
       </SwiperSlide>
 
-      <!-- Navigation buttons -->
-      <button class="gallery-button-prev">
+      <!-- Navigation buttons (click.stop prevents event bubbling to parent card) -->
+      <button class="gallery-button-prev" @click.stop>
         <ArrowBackIcon />
       </button>
-      <button class="gallery-button-next">
+      <button class="gallery-button-next" @click.stop>
         <ArrowBackIcon />
       </button>
     </Swiper>
@@ -44,14 +45,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, useCssModule } from 'vue'
+import { computed, onMounted, useCssModule, nextTick } from 'vue'
 import { Swiper, SwiperSlide } from 'swiper/vue'
+import type { Swiper as SwiperType } from 'swiper'
 import { Navigation, Pagination, A11y } from 'swiper/modules'
 import GalleryItem from './GalleryItem.vue'
 import { ArrowBackIcon } from '../../assets/svg'
 import { useMessageContext } from '../../composables/useMessageContext'
 import { getChannelPayload } from '../../utils/matcher'
 import { getRandomId } from '../../utils/helpers'
+import { getMessageId } from '../../types'
 import type { IWebchatTemplateAttachment } from '../../types'
 
 // Import Swiper styles
@@ -66,7 +69,7 @@ const $style = useCssModule()
 const modules = [Navigation, Pagination, A11y]
 
 // Message context
-const { message, config } = useMessageContext()
+const { message, config, onSlideChange } = useMessageContext()
 
 // Get gallery elements from message payload
 const payload = computed(() => getChannelPayload(message, config))
@@ -78,6 +81,40 @@ const elements = computed(() => {
 // Generate unique ID for content
 const carouselContentId = getRandomId('webchatCarouselContentButton')
 
+// Message ID for DOM queries (aria-live removal)
+const dataMessageId = computed(() => getMessageId(message))
+
+// Gallery variant from config
+const variant = computed(() => config?.settings?.layout?.galleryVariant ?? 'default')
+
+const variantClass = computed(() => {
+  if (variant.value === 'compact') return $style.compact
+  if (variant.value === 'copilot') return $style.copilot
+  return undefined
+})
+
+// Swiper classes (includes variant)
+const swiperClasses = computed(() => {
+  return ['webchat-carousel-template-root', $style.wrapper, variantClass.value].filter(Boolean)
+})
+
+// Slide width based on variant
+const slideStyle = computed(() => {
+  if (variant.value === 'compact') return { width: '170px' }
+  if (variant.value === 'copilot') {
+    // Copilot: adaptive sizing based on card count
+    if (elements.value.length === 1) return { width: '260px' }
+    if (elements.value.length === 2) return { width: '220px' }
+    return { width: '190px' }
+  }
+  return { width: '206px' }
+})
+
+// Handle slide change event from Swiper
+const handleSlideChange = (swiper: SwiperType) => {
+  onSlideChange?.(swiper.activeIndex, elements.value.length)
+}
+
 // Slide label for accessibility
 const slideLabelMessage = computed(() => {
   const slide = config?.settings?.customTranslations?.ariaLabels?.slide
@@ -95,8 +132,17 @@ const slideLabelMessage = computed(() => {
   return `${slide}: ${customSlidePosition}`
 })
 
-// Auto-focus first button/card on mount
+// Auto-focus first button/card on mount + remove aria-live from swiper-wrapper
 onMounted(() => {
+  // Remove aria-live from swiper-wrapper (matches React behavior — prevents noisy screen reader announcements)
+  nextTick(() => {
+    const messageEl = document.querySelector(`[data-message-id="${dataMessageId.value}"]`)
+    const swiperWrapper = messageEl?.querySelector('.swiper-wrapper')
+    if (swiperWrapper) {
+      swiperWrapper.removeAttribute('aria-live')
+    }
+  })
+
   if (!config?.settings?.widgetSettings?.enableAutoFocus) return
 
   const chatHistory = document.getElementById('webchatChatHistoryWrapperLiveLogPanel')
@@ -116,6 +162,10 @@ onMounted(() => {
 </script>
 
 <style module>
+.galleryRoot {
+  width: 100%;
+}
+
 .slideItem {
   position: relative;
   width: 206px;
@@ -293,4 +343,40 @@ onMounted(() => {
 :global(article) :global(.swiper).wrapper :global(.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet) {
   margin: 0 4px;
 }
+
+/*
+** GALLERY VARIANT: COMPACT
+** Narrower slides with smaller navigation buttons
+*/
+:global(article) :global(.swiper).compact :global(.gallery-button-prev),
+:global(article) :global(.swiper).compact :global(.gallery-button-next) {
+  width: 24px;
+  height: 24px;
+  top: calc(150px / 2 - 6px);
+}
+
+:global(article) :global(.swiper).compact :global(.gallery-button-prev) svg,
+:global(article) :global(.swiper).compact :global(.gallery-button-next) svg {
+  width: 10px;
+  height: 10px;
+}
+
+/*
+** GALLERY VARIANT: COPILOT
+** Adaptive sizing based on card count with adjusted spacing
+*/
+:global(article) :global(.swiper).copilot {
+  padding-left: 12px;
+  padding-right: 12px;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+
+:global(article) :global(.swiper).copilot :global(.gallery-button-prev) {
+  left: 12px;
+}
+
+:global(article) :global(.swiper).copilot :global(.gallery-button-next) {
+  right: 12px;
+}
 </style>

package/src/components/messages/GalleryItem.vue

@@ -16,8 +16,8 @@
         v-else
         :src="slide.image_url"
         :alt="slide.image_alt_text || ''"
-        :class="$style.slideImage"
         @error="handleImageError"
+        @click="handleImageClick"
       />
     </div>
 
@@ -54,6 +54,7 @@
         :dataMessageId="dataMessageId"
         :onEmitAnalytics="onEmitAnalytics"
         :templateTextId="slide.title ? titleId : undefined"
+        :openXAppOverlay="openXAppOverlay"
       />
     </div>
   </div>
@@ -79,7 +80,7 @@ const props = defineProps<Props>()
 const $style = useCssModule()
 
 // Context and config
-const { action, config, onEmitAnalytics } = useMessageContext()
+const { action, config, onEmitAnalytics, messageParams, openXAppOverlay, onImageClick } = useMessageContext()
 const dataMessageId = window.__TEST_MESSAGE_ID__ // For testing
 
 // Sanitize HTML
@@ -97,6 +98,13 @@ const handleImageError = () => {
   isImageBroken.value = true
 }
 
+// Handle image click — notify consumer via onImageClick callback
+const handleImageClick = () => {
+  if (props.slide.image_url) {
+    onImageClick?.(props.slide.image_url)
+  }
+}
+
 // Check if card has extra info (subtitle or buttons)
 const hasExtraInfo = computed(() => {
   return !!(props.slide.subtitle || (props.slide.buttons && props.slide.buttons.length > 0))
@@ -109,8 +117,7 @@ const defaultActionUrl = computed(() => {
 
 // Should buttons be disabled
 const shouldBeDisabled = computed(() => {
-  // TODO: Add conversation ended check when messageParams available
-  return false
+  return messageParams?.isConversationEnded ?? false
 })
 
 // Translations
@@ -150,6 +157,11 @@ const handleKeyDown = (event: KeyboardEvent) => {
   position: relative;
   width: 206px;
   overflow: hidden;
+  border-radius: var(--cc-bubble-border-radius, 15px);
+  background-color: var(--cc-white, #ffffff);
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .slideItem .top {
@@ -160,7 +172,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 .slideItem .bottom {
   border-bottom-left-radius: var(--cc-bubble-border-radius, 15px);
   border-bottom-right-radius: var(--cc-bubble-border-radius, 15px);
-  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
   background-color: var(--cc-white, #ffffff);
   display: flex;
   flex-direction: column;