@cognigy/chat-components-vue 0.3.1 → 0.4.0

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.1",
+  "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/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>
@@ -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,8 +128,8 @@
       "
       :config="config"
       :dataMessageId="dataMessageId"
-      :openXAppOverlay="openXAppOverlay"
-      :onEmitAnalytics="onEmitAnalytics"
+      :open-x-app-overlay="openXAppOverlay"
+      :on-emit-analytics="onEmitAnalytics"
       size="large"
       :variant="isHeaderElement ? 'primary' : 'secondary'"
     />
@@ -315,8 +315,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .itemSubtitle {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin: 0;
   color: rgba(0, 0, 0, 0.54);
   white-space: pre-line;
 }
@@ -337,7 +336,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .listItemContent {
-  padding: 16px 16px 12px 16px;
+  padding: 10px;
   overflow-wrap: break-word;
   display: flex;
   -webkit-box-pack: justify;

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 }
+}