@cognigy/chat-components-vue 0.3.0 → 0.3.1

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/package.json

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

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/messages/List.vue

@@ -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,

package/src/components/messages/ListItem.vue

@@ -131,6 +131,7 @@
       :openXAppOverlay="openXAppOverlay"
       :onEmitAnalytics="onEmitAnalytics"
       size="large"
+      :variant="isHeaderElement ? 'primary' : 'secondary'"
     />
 
     <!-- Divider after item -->
@@ -309,19 +310,15 @@ 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;
+  margin-top: 0px;
+  margin-bottom: 0px;
   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 */
@@ -340,7 +337,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 .listItemContent {
-  padding: 10px;
+  padding: 16px 16px 12px 16px;
   overflow-wrap: break-word;
   display: flex;
   -webkit-box-pack: justify;