@cognigy/chat-components-vue 0.1.0 → 0.3.0

package/src/components/messages/List.vue

@@ -16,7 +16,9 @@
 
     <!-- Regular list items -->
     <ul
-      :aria-labelledby="headerElement ? `listHeader-header-${listTemplateId}` : undefined"
+      :aria-labelledby="
+        headerElement ? `listHeader-header-${listTemplateId}` : undefined
+      "
       :class="$style.list"
     >
       <ListItem
@@ -26,7 +28,9 @@
         :headingLevel="headerElement ? 'h5' : 'h4'"
         :id="`${listTemplateId}-${index}`"
         :dividerBefore="index > 0"
-        :dividerAfter="Boolean(globalButton && index === regularElements.length - 1)"
+        :dividerAfter="
+          Boolean(globalButton && index === regularElements.length - 1)
+        "
       />
     </ul>
 
@@ -39,6 +43,7 @@
       :containerClassName="$style.mainButtonWrapper"
       :config="config"
       :dataMessageId="dataMessageId"
+      :openXAppOverlay="openXAppOverlay"
       :onEmitAnalytics="onEmitAnalytics"
       size="large"
     />
@@ -46,86 +51,94 @@
 </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'
+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()
+const $style = useCssModule();
 
 // Message context
-const { message, config, action, onEmitAnalytics } = useMessageContext()
-const dataMessageId = window.__TEST_MESSAGE_ID__ // For testing
+const { message, config, action, onEmitAnalytics, messageParams, openXAppOverlay } = 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)
+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 || []
-})
+  return attachment.value?.payload?.elements || [];
+});
 
 const topElementStyle = computed(() => {
-  return attachment.value?.payload?.top_element_style
-})
+  return attachment.value?.payload?.top_element_style;
+});
 
 const showTopElementLarge = computed(() => {
-  return topElementStyle.value === 'large' || topElementStyle.value === true
-})
+  return topElementStyle.value === "large" || topElementStyle.value === true;
+});
 
 // Split elements into header and regular items
 const headerElement = computed(() => {
-  return showTopElementLarge.value ? elements.value[0] : null
-})
+  return showTopElementLarge.value ? elements.value[0] : null;
+});
 
 const regularElements = computed(() => {
-  return showTopElementLarge.value ? elements.value.slice(1) : elements.value
-})
+  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]
-})
+  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
+  return messageParams?.isConversationEnded ?? false
 })
 
 // Generate unique ID for list
-const listTemplateId = getRandomId('webchatListTemplateRoot')
+const listTemplateId = getRandomId("webchatListTemplateRoot");
 
 // Auto-focus first focusable element on mount
 onMounted(() => {
-  if (!config?.settings?.widgetSettings?.enableAutoFocus) return
+  if (!config?.settings?.widgetSettings?.enableAutoFocus) return;
 
-  const chatHistory = document.getElementById('webchatChatHistoryWrapperLiveLogPanel')
-  if (!chatHistory?.contains(document.activeElement)) return
+  const chatHistory = document.getElementById(
+    "webchatChatHistoryWrapperLiveLogPanel"
+  );
+  if (!chatHistory?.contains(document.activeElement)) return;
 
   setTimeout(() => {
-    const listTemplateRoot = document.getElementById(listTemplateId)
+    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)
-})
+    );
+    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));
+  max-width: 250px;
+  border-radius: var(--cc-bubble-border-radius, 16px);
+  overflow: hidden;
   background-color: var(--cc-white, #ffffff);
+  color: rgba(0, 0, 0, 0.8);
+  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);
 }
 
 .wrapper .listItemRoot {
@@ -137,6 +150,7 @@ onMounted(() => {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
+  margin-left: 0;
 }
 
 .list .listItemRoot {

package/src/components/messages/ListItem.vue

@@ -2,7 +2,10 @@
   <component
     :is="componentTag"
     :class="[isHeaderElement && $style.headerRoot, $style.listItemRoot]"
-    :style="{ backgroundImage: isHeaderElement && element.image_url ? backgroundImage : undefined }"
+    :style="{
+      backgroundImage:
+        isHeaderElement && element.image_url ? backgroundImage : undefined,
+    }"
     :data-testid="isHeaderElement ? 'header-image' : 'list-item'"
     :id="id"
   >
@@ -13,17 +16,25 @@
     <div
       :class="contentClasses"
       :role="defaultActionUrl ? 'link' : undefined"
-      :aria-label="defaultActionUrl ? `${titleHtml}. ${opensInNewTabLabel}` : undefined"
+      :aria-label="
+        defaultActionUrl ? `${titleHtml}. ${opensInNewTabLabel}` : undefined
+      "
       :aria-describedby="element.subtitle ? subtitleId : undefined"
       :tabindex="defaultActionUrl ? 0 : -1"
-      :style="defaultActionUrl && !shouldBeDisabled ? { cursor: 'pointer' } : {}"
+      :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]"
+        :class="[
+          'webchat-list-template-header-content',
+          $style.headerContent,
+          button && $style.headerContentWithButton,
+        ]"
       >
         <!-- Title and subtitle -->
         <Typography
@@ -31,8 +42,10 @@
           :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
+            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"
@@ -42,8 +55,10 @@
           v-if="subtitleHtml"
           variant="body-regular"
           :class="[
-            isHeaderElement ? 'webchat-list-template-header-subtitle' : 'webchat-list-template-element-subtitle',
-            $style.itemSubtitle
+            isHeaderElement
+              ? 'webchat-list-template-header-subtitle'
+              : 'webchat-list-template-element-subtitle',
+            $style.itemSubtitle,
           ]"
           :id="subtitleId"
           v-html="subtitleHtml"
@@ -53,7 +68,10 @@
       <!-- Regular list item content -->
       <div
         v-else
-        :class="['webchat-list-template-element-content', $style.listItemContent]"
+        :class="[
+          'webchat-list-template-element-content',
+          $style.listItemContent,
+        ]"
       >
         <div :class="$style.listItemText">
           <!-- Title and subtitle -->
@@ -63,7 +81,7 @@
             :component="headingLevel"
             :class="[
               'webchat-list-template-element-title',
-              subtitleHtml ? $style.itemTitleWithSubtitle : $style.itemTitle
+              subtitleHtml ? $style.itemTitleWithSubtitle : $style.itemTitle,
             ]"
             :id="`listItemHeader-${id}`"
             v-html="titleHtml"
@@ -72,7 +90,10 @@
           <Typography
             v-if="subtitleHtml"
             variant="body-regular"
-            :class="['webchat-list-template-element-subtitle', $style.itemSubtitle]"
+            :class="[
+              'webchat-list-template-element-subtitle',
+              $style.itemSubtitle,
+            ]"
             :id="subtitleId"
             v-html="subtitleHtml"
           />
@@ -95,10 +116,19 @@
       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"
+      :buttonClassName="
+        isHeaderElement
+          ? 'webchat-list-template-header-button'
+          : 'webchat-list-template-element-button'
+      "
+      :containerClassName="
+        isHeaderElement
+          ? $style.listHeaderButtonWrapper
+          : $style.listItemButtonWrapper
+      "
       :config="config"
       :dataMessageId="dataMessageId"
+      :openXAppOverlay="openXAppOverlay"
       :onEmitAnalytics="onEmitAnalytics"
       size="large"
     />
@@ -109,104 +139,106 @@
 </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'
+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
+  element: IWebchatAttachmentElement;
+  isHeaderElement?: boolean;
+  headingLevel?: "h4" | "h5";
+  id: string;
+  dividerBefore?: boolean;
+  dividerAfter?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isHeaderElement: false,
-  headingLevel: 'h4',
+  headingLevel: "h4",
   dividerBefore: false,
   dividerAfter: false,
-})
+});
 
-const $style = useCssModule()
+const $style = useCssModule();
 
 // Context
-const { action, config, onEmitAnalytics } = useMessageContext()
-const dataMessageId = window.__TEST_MESSAGE_ID__ // For testing
+const { action, config, onEmitAnalytics, messageParams, openXAppOverlay } = 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 || ''))
+const { processHTML } = useSanitize();
+const titleHtml = computed(() => processHTML(props.element.title || ""));
+const subtitleHtml = computed(() => processHTML(props.element.subtitle || ""));
 
 // IDs for accessibility
-const subtitleId = getRandomId('webchatListTemplateHeaderSubtitle')
+const subtitleId = getRandomId("webchatListTemplateHeaderSubtitle");
 
 // Background image
 const backgroundImage = computed(() => {
-  if (!props.element.image_url) return undefined
-  return getBackgroundImage(props.element.image_url)
-})
+  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]
-})
+  return props.element.buttons?.[0];
+});
 
 // Default action URL (clickable item)
 const defaultActionUrl = computed(() => {
-  return props.element.default_action?.url
-})
+  return props.element.default_action?.url;
+});
 
 // Should buttons be disabled
 const shouldBeDisabled = computed(() => {
-  // TODO: Add conversation ended check when messageParams available
-  return false
+  return messageParams?.isConversationEnded ?? false
 })
 
 // Translations
 const opensInNewTabLabel = computed(() => {
-  return config?.settings?.customTranslations?.ariaLabels?.opensInNewTab || 'Opens in new tab'
-})
+  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'
-})
+  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]
-})
+    ? ["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
+  if (shouldBeDisabled.value || !defaultActionUrl.value) return;
 
   const url = config?.settings?.layout?.disableUrlButtonSanitization
     ? defaultActionUrl.value
-    : sanitizeUrl(defaultActionUrl.value)
+    : sanitizeUrl(defaultActionUrl.value);
 
   // Prevent no-ops from sending you to a blank page
-  if (url === 'about:blank') return
+  if (url === "about:blank") return;
 
-  window.open(url)
-}
+  window.open(url);
+};
 
 // Handle keyboard navigation
 const handleKeyDown = (event: KeyboardEvent) => {
-  if (defaultActionUrl.value && event.key === 'Enter') {
-    handleClick()
+  if (defaultActionUrl.value && event.key === "Enter") {
+    handleClick();
   }
-}
+};
 </script>
 
 <style module>
@@ -215,7 +247,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .divider {
-  border-top: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border-bottom: 1px solid var(--cc-list-divider-color, var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8))));
 }
 
 /* Header element styles */
@@ -277,13 +309,19 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .itemTitleWithSubtitle {
-  margin-top: 0px;
-  margin-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 5px;
+  font-size: 0.9375rem; /* 15px */
+  font-weight: bold;
+  line-height: 1.45em; /* 23.2px */
 }
 
 .itemSubtitle {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin: 0;
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 0.8125rem; /* 13px */
+  white-space: pre-line;
+  line-height: 1.45em; /* 14.5px */
 }
 
 /* Regular list item styles */
@@ -302,7 +340,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .listItemContent {
-  padding: 16px 16px 12px 16px;
+  padding: 10px;
   overflow-wrap: break-word;
   display: flex;
   -webkit-box-pack: justify;
@@ -310,7 +348,6 @@ const handleKeyDown = (event: KeyboardEvent) => {
   align-items: center;
   gap: 16px;
   width: 100%;
-  color: var(--cc-black-20, rgba(0, 0, 0, 0.2));
 }
 
 .listItemText {
@@ -318,7 +355,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .listItemText > * {
-  color: var(--cc-black-20, rgba(0, 0, 0, 0.2));
+  color: inherit;
 }
 
 .listItemImage {

package/src/components/messages/TextMessage.vue

@@ -122,7 +122,7 @@ const markdownClasses = computed(() => {
 }
 
 .text a:focus-visible {
-  outline: 2px solid var(--cc-primary-color-focus);
+  outline: 2px solid var(--cc-primary-color-focus, var(--cc-primary-color));
   outline-offset: 2px;
 }
 

package/src/components/messages/TextWithButtons.vue

@@ -9,9 +9,9 @@
       ignoreLiveRegion
     />
 
-    <!-- Buttons -->
+    <!-- Buttons (hidden while progressive rendering is animating) -->
     <ActionButtons
-      v-if="buttons.length > 0"
+      v-if="buttons.length > 0 && !isStillAnimating"
       :payload="buttons"
       :action="modifiedAction"
       :buttonClassName="buttonClassName"
@@ -20,6 +20,7 @@
       :config="config"
       :onEmitAnalytics="onEmitAnalytics"
       :templateTextId="webchatButtonTemplateTextId"
+      :openXAppOverlay="openXAppOverlay"
       showUrlIcon
     />
   </div>
@@ -32,10 +33,10 @@ import ActionButtons from '../common/ActionButtons.vue'
 import { useMessageContext } from '../../composables/useMessageContext'
 import { getChannelPayload } from '../../utils/matcher'
 import { getRandomId } from '../../utils/helpers'
-import type { IWebchatTemplateAttachment, IWebchatButton, IWebchatQuickReply } from '../../types'
+import type { IWebchatTemplateAttachment, IWebchatButton, IWebchatQuickReply, IStreamingMessage } from '../../types'
 
 // Message context
-const { message, config, action, onEmitAnalytics } = useMessageContext()
+const { message, config, action, onEmitAnalytics, messageParams, openXAppOverlay } = useMessageContext()
 
 const $style = useCssModule()
 
@@ -67,13 +68,12 @@ const classType = computed(() => {
   return isQuickReplies.value ? 'quick-reply' : 'buttons'
 })
 
-// For quick replies, disable if there's already a reply
-// Note: In the React version, this uses messageParams.hasReply
-// For now, we'll just pass the action as-is since we don't have messageParams in Vue yet
+// For quick replies, disable if there's already a reply or the conversation has ended
 const modifiedAction = computed(() => {
-  // TODO: Implement disabling for quick replies when there's a user reply
-  // This would require tracking conversation state
-  return action
+  const shouldBeDisabled =
+    (isQuickReplies.value && messageParams?.hasReply) ||
+    messageParams?.isConversationEnded
+  return shouldBeDisabled ? undefined : action
 })
 
 // Generate unique ID for accessibility
@@ -92,6 +92,15 @@ const containerStyle = computed(() => {
   return {}
 })
 
+// Direction mapping for button alignment
+const directionMapping = config?.settings?.widgetSettings?.sourceDirectionMapping
+const messageDirection = computed(() => {
+  if (message.source === 'user') return directionMapping?.user || 'outgoing'
+  if (message.source === 'bot') return directionMapping?.bot || 'incoming'
+  if (message.source === 'agent') return directionMapping?.agent || 'incoming'
+  return 'incoming'
+})
+
 // Button class name
 const buttonClassName = computed(() => {
   return `${$style.button} webchat-${classType.value}-template-button`
@@ -99,7 +108,14 @@ const buttonClassName = computed(() => {
 
 // Container class name
 const containerClassName = computed(() => {
-  return `${$style.buttons} webchat-${classType.value}-template-replies-container`
+  return `${$style.buttons} ${$style[messageDirection.value]} webchat-${classType.value}-template-replies-container`
+})
+
+// Progressive message rendering — hide buttons while message text is still animating
+const isStillAnimating = computed(() => {
+  if (!config?.settings?.behavior?.progressiveMessageRendering) return false
+  const animState = (message as IStreamingMessage).animationState
+  return animState === 'animating' || animState === 'start'
 })
 </script>
 
@@ -116,4 +132,12 @@ const containerClassName = computed(() => {
 .button {
   /* Button styles are inherited from ActionButton component */
 }
+
+.incoming {
+  justify-content: flex-start;
+}
+
+.outgoing {
+  justify-content: flex-end;
+}
 </style>