@cognigy/chat-components-vue 0.1.0 → 0.3.0

package/src/components/common/ChatBubble.vue

@@ -64,7 +64,6 @@ const bubbleStyle = computed((): CSSProperties => {
 
 <style module>
 .bubble {
-  border-radius: 15px;
   border: 1px solid var(--cc-border-bot-message, transparent);
   padding: 12px;
   max-width: 295px;
@@ -73,6 +72,9 @@ const bubbleStyle = computed((): CSSProperties => {
   margin-block-end: 12px;
   word-break: break-word;
   white-space: pre-wrap;
+  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);
 }
 
 .bubble.disableBorder {
@@ -97,13 +99,13 @@ article:global(.user) .bubble {
   color: var(--cc-user-message-contrast-color, #ffffff);
 }
 
-article:not(:global(.user)) .incoming,
-article:global(.user) .incoming {
-  margin-inline-start: none;
+.incoming {
+  margin-inline-start: 0;
+  border-radius: 15px 15px 15px 0;
 }
 
-article:not(:global(.user)) .outgoing,
-article:global(.user) .outgoing {
+.outgoing {
   margin-inline-start: auto;
+  border-radius: 15px 15px 0 15px;
 }
 </style>

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;