@cognigy/chat-components-vue 0.3.0 → 0.4.0

package/dist/components/common/ActionButton.vue.d.ts

@@ -24,6 +24,7 @@ interface Props {
     dataMessageId?: string;
     onEmitAnalytics?: AnalyticsEventCallback;
     size?: 'small' | 'large';
+    variant?: 'primary' | 'secondary';
     id?: string;
     className?: string;
     openXAppOverlay?: (url: string | undefined) => void;
@@ -44,6 +45,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     disabled: boolean;
     config: ChatConfig;
     className: string;
+    variant: "primary" | "secondary";
     customIcon: CustomIcon;
     showUrlIcon: boolean;
     dataMessageId: string;

package/dist/components/common/ActionButtons.vue.d.ts

@@ -14,6 +14,7 @@ interface Props {
     dataMessageId?: string;
     onEmitAnalytics?: AnalyticsEventCallback;
     size?: 'small' | 'large';
+    variant?: 'primary' | 'secondary';
     templateTextId?: string;
     openXAppOverlay?: (url: string | undefined) => void;
 }
@@ -22,6 +23,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     action: MessageSender;
     config: ChatConfig;
     className: string;
+    variant: "primary" | "secondary";
     customIcon: CustomIcon;
     showUrlIcon: boolean;
     dataMessageId: string;

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export { useLiveRegion } from './composables/useLiveRegion';
 export { DownloadIcon, CloseIcon, VideoPlayIcon, AudioPlayIcon, AudioPauseIcon, ArrowBackIcon, LinkIcon } from './assets/svg';
 export { match, getChannelPayload } from './utils/matcher';
 export { sanitizeHTMLWithConfig, sanitizeContent } from './utils/sanitize';
-export { configColorsToCssVariables, themeFontToCssVariable } from './utils/theme';
+export { configColorsToCssVariables, themeFontToCssVariable, themeFontSizeToCssVariable } from './utils/theme';
 export { getWebchatButtonLabel, interpolateString, getRandomId, moveFocusToMessageFocusTarget, replaceUrlsWithHTMLanchorElem, getBackgroundImage, getFileName, getFileExtension, getSizeLabel, isImageAttachment, VALID_IMAGE_MIME_TYPES } from './utils/helpers';
 export type { ChatConfig, ChatSettings, ChatTheme, MessageProps, MessageSender, MessagePlugin, MessagePluginOptions, MessageContext, MessageParams, IMessage, IStreamingMessage, IWebchatButton, IWebchatQuickReply, IWebchatTemplateAttachment, IWebchatAttachmentElement, IWebchatAudioAttachment, IWebchatImageAttachment, IWebchatVideoAttachment, IUploadFileAttachmentData, IDatePickerData, IWebchatChannelPayload, } from './types';
 export type { TagVariant } from './components/common/Typography.vue';

package/dist/types/index.d.ts

@@ -189,6 +189,8 @@ export interface ChatTheme {
     textDark?: string;
     textLight?: string;
     fontFamily?: string;
+    /** Base font size for text scaling. All text sizes scale proportionally from this value. Default: '14px' */
+    fontSize?: string;
 }
 /**
  * Message sender callback type.

package/dist/utils/theme.d.ts

@@ -27,3 +27,15 @@ export declare function configColorsToCssVariables(colors?: ChatSettings['colors
  * @returns A record with the --cc-font-family CSS variable, or empty object
  */
 export declare function themeFontToCssVariable(theme?: ChatTheme): Record<string, string>;
+/**
+ * Maps a ChatTheme's fontSize to the --cc-font-size CSS variable.
+ * Consumers can set this to scale all text proportionally.
+ *
+ * Components should reference font-size as:
+ *   font-size: var(--cc-font-size, 14px);                    (for 14px base)
+ *   font-size: calc(var(--cc-font-size, 14px) * 1.2857);     (for 18px base)
+ *
+ * @param theme - The ChatTheme object
+ * @returns A record with the --cc-font-size CSS variable, or empty object
+ */
+export declare function themeFontSizeToCssVariable(theme?: ChatTheme): Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognigy/chat-components-vue",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Vue 3 version of @cognigy/chat-components",
   "license": "MIT",

package/src/components/Message.vue

@@ -30,7 +30,7 @@ import {
   type Component,
 } from "vue";
 import { match } from "../utils/matcher";
-import {configColorsToCssVariables, themeFontToCssVariable} from "../utils/theme";
+import {configColorsToCssVariables, themeFontToCssVariable, themeFontSizeToCssVariable} from "../utils/theme";
 import { provideMessageContext } from "../composables/useMessageContext";
 import { getMessageId, isMessagePlugin } from "../types";
 import type { MessageProps, MessageContext } from "../types";
@@ -157,6 +157,7 @@ const cssVariableStyle = computed(() => {
   return {
     ...configColorsToCssVariables(props.config?.settings?.colors),
     ...themeFontToCssVariable(props.theme),
+    ...themeFontSizeToCssVariable(props.theme),
   }
 });
 </script>

package/src/components/common/ActionButton.vue

@@ -33,6 +33,7 @@ interface Props {
   dataMessageId?: string
   onEmitAnalytics?: AnalyticsEventCallback
   size?: 'small' | 'large'
+  variant?: 'primary' | 'secondary'
   id?: string
   className?: string
   openXAppOverlay?: (url: string | undefined) => void
@@ -47,6 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
   dataMessageId: undefined,
   onEmitAnalytics: undefined,
   size: 'small',
+  variant: 'primary',
   id: undefined,
   className: '',
   openXAppOverlay: undefined,
@@ -158,6 +160,7 @@ const target = computed(() => {
 // CSS classes
 const buttonClasses = computed(() => {
   const classes = [styles.button]
+  if (props.variant === 'secondary') classes.push(styles.secondary)
   if (isWebURL.value) classes.push(styles.url)
   if (props.className) classes.push(props.className)
   if (props.disabled) {
@@ -336,6 +339,40 @@ a.button.disabled:focus {
   pointer-events: none;
 }
 
+/* Secondary variant: outlined style */
+button.button.secondary,
+a.button.secondary {
+  background: transparent;
+  color: var(--cc-primary-color);
+  border: 1px solid var(--cc-primary-color);
+}
+
+button.button.secondary:hover,
+a.button.secondary:hover,
+button.button.secondary:focus,
+a.button.secondary:focus {
+  background: color-mix(in srgb, var(--cc-primary-color) 10%, transparent);
+}
+
+button.button.secondary:disabled,
+button.button.secondary:disabled:hover,
+a.button.secondary.disabled,
+a.button.secondary.disabled:hover {
+  background: transparent;
+  color: var(--cc-primary-color-disabled, color-mix(in srgb, var(--cc-primary-color) 40%, #999));
+  border-color: var(--cc-primary-color-disabled, color-mix(in srgb, var(--cc-primary-color) 40%, #999));
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Focus-visible for secondary */
+:where(button.button.secondary):focus-visible,
+:where(a.button.secondary):focus-visible {
+  outline: 2px solid var(--cc-primary-color-focus, var(--cc-primary-color));
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--cc-primary-contrast-color, #ffffff);
+}
+
 .buttonLabelWithImage {
   margin-left: 40px;
 }

package/src/components/common/ActionButtons.vue

@@ -18,6 +18,7 @@ interface Props {
   dataMessageId?: string
   onEmitAnalytics?: AnalyticsEventCallback
   size?: 'small' | 'large'
+  variant?: 'primary' | 'secondary'
   templateTextId?: string
   openXAppOverlay?: (url: string | undefined) => void
 }
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   dataMessageId: undefined,
   onEmitAnalytics: undefined,
   size: 'small',
+  variant: 'primary',
   templateTextId: undefined,
   openXAppOverlay: undefined,
 })
@@ -118,6 +120,7 @@ const containerClasses = computed(() => {
           :config="config"
           :on-emit-analytics="onEmitAnalytics"
           :size="size"
+          :variant="variant"
           :data-message-id="dataMessageId"
           :class-name="buttonClassName"
           :open-x-app-overlay="openXAppOverlay"
@@ -140,6 +143,7 @@ const containerClasses = computed(() => {
         :config="config"
         :on-emit-analytics="onEmitAnalytics"
         :size="size"
+        :variant="variant"
         :data-message-id="dataMessageId"
         :class-name="buttonClassName"
         :open-x-app-overlay="openXAppOverlay"

package/src/components/common/ChatBubble.vue

@@ -72,6 +72,7 @@ const bubbleStyle = computed((): CSSProperties => {
   margin-block-end: 12px;
   word-break: break-word;
   white-space: pre-wrap;
+  font-size: var(--cc-font-size, 14px);
   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);

package/src/components/common/ChatEvent.vue

@@ -6,15 +6,16 @@
     aria-live="assertive"
   >
     <div :class="styles.eventPillTextWrapper">
-      <div :class="styles.eventText">
+      <Typography variant="title2-semibold" component="div">
         {{ text }}
-      </div>
+      </Typography>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, useCssModule } from 'vue'
+import Typography from './Typography.vue'
 
 /**
  * ChatEvent - Display chat event notifications
@@ -64,6 +65,7 @@ const eventClasses = computed(() => {
   gap: 10px;
   margin-inline: auto;
   margin-block-start: 40px;
+  font-family: var(--cc-font-family, 'Figtree', sans-serif);
 }
 
 .eventPillTextWrapper {
@@ -75,13 +77,4 @@ const eventClasses = computed(() => {
     rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
     rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
-
-.eventText {
-  /* Typography variant: title2-semibold equivalent */
-  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.4;
-  margin: 0;
-}
 </style>

package/src/components/common/Typography.vue

@@ -107,79 +107,79 @@ const componentStyle = computed(() => {
 
 <style module>
 .h1-semibold {
-  font-size: 2.125rem; /* 34px */
+  font-size: calc(var(--cc-font-size, 14px) * 2.4286); /* 34px at 14px base */
   font-style: normal;
   font-weight: 600;
-  line-height: 2.55rem; /* 40.8px */
+  line-height: calc(var(--cc-font-size, 14px) * 2.9143); /* 40.8px at 14px base */
 }
 
 .h2-regular {
-  font-size: 1.125rem; /* 18px */
+  font-size: calc(var(--cc-font-size, 14px) * 1.2857); /* 18px at 14px base */
   font-style: normal;
   font-weight: 400;
-  line-height: 1.4625rem; /* 23.4px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.6714); /* 23.4px at 14px base */
 }
 
 .h2-semibold {
-  font-size: 1.125rem; /* 18px */
+  font-size: calc(var(--cc-font-size, 14px) * 1.2857); /* 18px at 14px base */
   font-style: normal;
   font-weight: 600;
-  line-height: 1.4625rem; /* 23.4px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.6714); /* 23.4px at 14px base */
 }
 
 .title1-regular {
-  font-size: 1rem; /* 16px */
+  font-size: calc(var(--cc-font-size, 14px) * 1.1429); /* 16px at 14px base */
   font-style: normal;
   font-weight: 400;
-  line-height: 1.4rem; /* 22.4px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.6); /* 22.4px at 14px base */
 }
 
 .title1-semibold {
-  font-size: 1rem; /* 16px */
+  font-size: calc(var(--cc-font-size, 14px) * 1.1429); /* 16px at 14px base */
   font-style: normal;
   font-weight: 600;
-  line-height: 1.4rem; /* 22.4px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.6); /* 22.4px at 14px base */
 }
 
 .title2-regular {
-  font-size: 0.75rem; /* 12px */
+  font-size: calc(var(--cc-font-size, 14px) * 0.8571); /* 12px at 14px base */
   font-style: normal;
   font-weight: 400;
-  line-height: 1.05rem; /* 16.8px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.2); /* 16.8px at 14px base */
 }
 
 .title2-semibold {
-  font-size: 0.75rem; /* 12px */
+  font-size: calc(var(--cc-font-size, 14px) * 0.8571); /* 12px at 14px base */
   font-style: normal;
   font-weight: 600;
-  line-height: 0.975rem; /* 15.6px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.1143); /* 15.6px at 14px base */
 }
 
 .body-regular {
-  font-size: 0.875rem; /* 14px */
+  font-size: var(--cc-font-size, 14px); /* 14px base */
   font-style: normal;
   font-weight: 400;
-  line-height: 1.225rem; /* 19.6px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.4); /* 19.6px at 14px base */
 }
 
 .body-semibold {
-  font-size: 0.875rem; /* 14px */
+  font-size: var(--cc-font-size, 14px); /* 14px base */
   font-style: normal;
   font-weight: 600;
-  line-height: 1.1375rem; /* 18.2px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.3); /* 18.2px at 14px base */
 }
 
 .copy-medium {
-  font-size: 0.75rem; /* 12px */
+  font-size: calc(var(--cc-font-size, 14px) * 0.8571); /* 12px at 14px base */
   font-style: normal;
   font-weight: 500;
-  line-height: 1.05rem; /* 16.8px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.2); /* 16.8px at 14px base */
 }
 
 .cta-semibold {
-  font-size: 0.875rem; /* 14px */
+  font-size: var(--cc-font-size, 14px); /* 14px base */
   font-style: normal;
   font-weight: 600;
-  line-height: 1.1375rem; /* 18.2px */
+  line-height: calc(var(--cc-font-size, 14px) * 1.3); /* 18.2px at 14px base */
 }
 </style>

package/src/components/messages/AdaptiveCard.vue

@@ -189,7 +189,7 @@ const isReadonly = computed(() => {
   border: none;
   color: var(--cc-primary-contrast-color, white);
   cursor: pointer;
-  font-size: 14px !important;
+  font-size: var(--cc-font-size, 14px) !important;
   font-weight: 600;
   line-height: 160% !important;
   min-width: 100%;
@@ -213,7 +213,7 @@ const isReadonly = computed(() => {
 /* 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;
+  font-size: calc(var(--cc-font-size, 14px) * 0.8571) !important;
   line-height: 140%;
 }
 
@@ -233,7 +233,7 @@ const isReadonly = computed(() => {
   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;
+  font-size: var(--cc-font-size, 14px) !important;
   gap: 10px;
   line-height: 140%;
   padding: 8px 12px 8px 12px;
@@ -244,7 +244,7 @@ const isReadonly = computed(() => {
   .adaptivecardWrapper :global(input),
   .adaptivecardWrapper :global(textarea),
   .adaptivecardWrapper :global(select) {
-    font-size: 16px !important;
+    font-size: calc(var(--cc-font-size, 14px) * 1.1429) !important;
   }
 }
 

package/src/components/messages/DatePicker.vue

@@ -88,7 +88,7 @@ const selectedDate = computed(() => {
   border-radius: var(--cc-button-border-radius, 8px);
   background-color: var(--cc-primary-color, #1976d2);
   color: var(--cc-white, #ffffff);
-  font-size: 14px;
+  font-size: var(--cc-font-size, 14px);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;

package/src/components/messages/GalleryItem.vue

@@ -52,9 +52,9 @@
         :buttonListItemClassName="$style.buttonListItem"
         :config="config"
         :dataMessageId="dataMessageId"
-        :onEmitAnalytics="onEmitAnalytics"
+        :on-emit-analytics="onEmitAnalytics"
         :templateTextId="slide.title ? titleId : undefined"
-        :openXAppOverlay="openXAppOverlay"
+        :open-x-app-overlay="openXAppOverlay"
       />
     </div>
   </div>

package/src/components/messages/ImageMessage.vue

@@ -341,7 +341,7 @@ onUnmounted(() => {
   margin-left: 15px;
   color: var(--cc-black-10, #1a1a1a);
   font-weight: 700;
-  font-size: 16px;
+  font-size: calc(var(--cc-font-size, 14px) * 1.1429);
 }
 
 .iconsGroup {

package/src/components/messages/List.vue

@@ -43,8 +43,8 @@
       :containerClassName="$style.mainButtonWrapper"
       :config="config"
       :dataMessageId="dataMessageId"
-      :openXAppOverlay="openXAppOverlay"
-      :onEmitAnalytics="onEmitAnalytics"
+      :open-x-app-overlay="openXAppOverlay"
+      :on-emit-analytics="onEmitAnalytics"
       size="large"
     />
   </div>
@@ -131,9 +131,9 @@ onMounted(() => {
 
 <style module>
 .wrapper {
-  max-width: 250px;
-  border-radius: var(--cc-bubble-border-radius, 16px);
-  overflow: hidden;
+  width: 295px;
+  max-width: 295px;
+  border-radius: var(--cc-bubble-border-radius, 15px);
   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,
@@ -160,4 +160,10 @@ onMounted(() => {
 .mainButtonWrapper {
   padding: 16px;
 }
+
+.mainButtonWrapper button,
+.mainButtonWrapper a {
+  width: 100%;
+  box-sizing: border-box;
+}
 </style>

package/src/components/messages/ListItem.vue

@@ -128,9 +128,10 @@
       "
       :config="config"
       :dataMessageId="dataMessageId"
-      :openXAppOverlay="openXAppOverlay"
-      :onEmitAnalytics="onEmitAnalytics"
+      :open-x-app-overlay="openXAppOverlay"
+      :on-emit-analytics="onEmitAnalytics"
       size="large"
+      :variant="isHeaderElement ? 'primary' : 'secondary'"
     />
 
     <!-- Divider after item -->
@@ -309,19 +310,14 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .itemTitleWithSubtitle {
-  margin-top: 2px;
-  margin-bottom: 5px;
-  font-size: 0.9375rem; /* 15px */
-  font-weight: bold;
-  line-height: 1.45em; /* 23.2px */
+  margin-top: 0px;
+  margin-bottom: 8px;
 }
 
 .itemSubtitle {
   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 */

package/src/components/messages/TextWithButtons.vue

@@ -18,9 +18,9 @@
       :containerClassName="containerClassName"
       :containerStyle="containerStyle"
       :config="config"
-      :onEmitAnalytics="onEmitAnalytics"
+      :on-emit-analytics="onEmitAnalytics"
       :templateTextId="webchatButtonTemplateTextId"
-      :openXAppOverlay="openXAppOverlay"
+      :open-x-app-overlay="openXAppOverlay"
       showUrlIcon
     />
   </div>

package/src/components/messages/VideoMessage.vue

@@ -287,7 +287,7 @@ onMounted(() => {
   border-top: none;
   border-radius: 0 0 var(--cc-bubble-border-radius, 15px) var(--cc-bubble-border-radius, 15px);
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--cc-font-size, 14px);
   font-weight: 600;
   transition: background-color 0.2s ease;
 }

package/src/index.ts

@@ -43,7 +43,7 @@ export { DownloadIcon, CloseIcon, VideoPlayIcon, AudioPlayIcon, AudioPauseIcon,
 // Utilities
 export { match, getChannelPayload } from './utils/matcher'
 export { sanitizeHTMLWithConfig, sanitizeContent } from './utils/sanitize'
-export { configColorsToCssVariables, themeFontToCssVariable } from './utils/theme'
+export { configColorsToCssVariables, themeFontToCssVariable, themeFontSizeToCssVariable } from './utils/theme'
 export { getWebchatButtonLabel, interpolateString, getRandomId, moveFocusToMessageFocusTarget, replaceUrlsWithHTMLanchorElem, getBackgroundImage, getFileName, getFileExtension, getSizeLabel, isImageAttachment, VALID_IMAGE_MIME_TYPES } from './utils/helpers'
 
 // Types

package/src/types/index.ts

@@ -251,6 +251,8 @@ export interface ChatTheme {
   textDark?: string
   textLight?: string
   fontFamily?: string
+  /** Base font size for text scaling. All text sizes scale proportionally from this value. Default: '14px' */
+  fontSize?: string
 }
 
 /**

package/src/utils/theme.ts

@@ -97,3 +97,21 @@ export function themeFontToCssVariable(
   if (!theme?.fontFamily) return {}
   return { '--cc-font-family': theme.fontFamily }
 }
+
+/**
+ * Maps a ChatTheme's fontSize to the --cc-font-size CSS variable.
+ * Consumers can set this to scale all text proportionally.
+ *
+ * Components should reference font-size as:
+ *   font-size: var(--cc-font-size, 14px);                    (for 14px base)
+ *   font-size: calc(var(--cc-font-size, 14px) * 1.2857);     (for 18px base)
+ *
+ * @param theme - The ChatTheme object
+ * @returns A record with the --cc-font-size CSS variable, or empty object
+ */
+export function themeFontSizeToCssVariable(
+  theme?: ChatTheme
+): Record<string, string> {
+  if (!theme?.fontSize) return {}
+  return { '--cc-font-size': theme.fontSize }
+}