@cognigy/chat-components-vue 0.1.0

package/src/components/common/ChatBubble.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, useCssModule, CSSProperties } from 'vue'
+import { useMessageContext } from '../../composables/useMessageContext'
+
+interface Props {
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  className: '',
+})
+
+const styles = useCssModule()
+const { message, config } = useMessageContext()
+
+// Get direction mapping from config
+const directionMapping = computed(() => config?.settings?.widgetSettings?.sourceDirectionMapping)
+const disableBotOutputBorder = computed(() => config?.settings?.layout?.disableBotOutputBorder)
+const botOutputMaxWidthPercentage = computed(() => config?.settings?.layout?.botOutputMaxWidthPercentage)
+
+// Determine message type
+const isUserMessage = computed(() => message.source === 'user')
+const isBotMessage = computed(() => message.source === 'bot')
+const isAgentMessage = computed(() => message.source === 'agent')
+const isEngagementMessage = computed(() => message.source === 'engagement')
+
+// Determine if border should be disabled
+const disableBorder = computed(() =>
+  (isBotMessage.value || isEngagementMessage.value) && disableBotOutputBorder.value
+)
+
+// Get message direction based on source
+const userMessageDirection = computed(() => directionMapping.value?.user || 'outgoing')
+const botMessageDirection = computed(() => directionMapping.value?.bot || 'incoming')
+const agentMessageDirection = computed(() => directionMapping.value?.agent || 'incoming')
+
+// Compute CSS classes
+const bubbleClasses = computed(() => {
+  const classes = [styles.bubble, 'chat-bubble']
+
+  if (props.className) classes.push(props.className)
+  if (isUserMessage.value) classes.push(styles[userMessageDirection.value])
+  if (isBotMessage.value) classes.push(styles[botMessageDirection.value])
+  if (isAgentMessage.value) classes.push(styles[agentMessageDirection.value])
+  if (disableBorder.value) classes.push(styles.disableBorder)
+
+  return classes
+})
+
+// Compute inline style
+const bubbleStyle = computed((): CSSProperties => {
+  if ((isBotMessage.value || isEngagementMessage.value) && botOutputMaxWidthPercentage.value) {
+    return { maxWidth: `${botOutputMaxWidthPercentage.value}%` }
+  }
+  return {}
+})
+</script>
+
+<template>
+  <div :class="bubbleClasses" :style="bubbleStyle">
+    <slot />
+  </div>
+</template>
+
+<style module>
+.bubble {
+  border-radius: 15px;
+  border: 1px solid var(--cc-border-bot-message, transparent);
+  padding: 12px;
+  max-width: 295px;
+  width: max-content;
+  box-sizing: border-box;
+  margin-block-end: 12px;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.bubble.disableBorder {
+  border: none;
+  background: none !important;
+}
+
+article:global(.bot) .bubble {
+  background: var(--cc-background-bot-message, #f5f5f5);
+  color: var(--cc-bot-message-contrast-color, #1a1a1a);
+}
+
+article:global(.agent) .bubble {
+  background: var(--cc-background-agent-message, #e8f4fd);
+  border-color: var(--cc-border-agent-message, transparent);
+  color: var(--cc-agent-message-contrast-color, #1a1a1a);
+}
+
+article:global(.user) .bubble {
+  background: var(--cc-background-user-message, #1976d2);
+  border-color: var(--cc-border-user-message, transparent);
+  color: var(--cc-user-message-contrast-color, #ffffff);
+}
+
+article:not(:global(.user)) .incoming,
+article:global(.user) .incoming {
+  margin-inline-start: none;
+}
+
+article:not(:global(.user)) .outgoing,
+article:global(.user) .outgoing {
+  margin-inline-start: auto;
+}
+</style>

package/src/components/common/ChatEvent.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    :id="id"
+    :class="eventClasses"
+    role="status"
+    aria-live="assertive"
+  >
+    <div :class="styles.eventPillTextWrapper">
+      <div :class="styles.eventText">
+        {{ text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue'
+
+/**
+ * ChatEvent - Display chat event notifications
+ *
+ * Used for system messages like "Conversation started", "Agent joined", etc.
+ * These are informational messages that are not part of the conversation flow.
+ */
+
+interface Props {
+  /** Event text to display */
+  text?: string
+  /** Additional CSS class names */
+  className?: string
+  /** Element ID */
+  id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  className: '',
+  id: undefined,
+})
+
+// Access CSS module classes
+const styles = useCssModule()
+
+/**
+ * Compute combined class names
+ */
+const eventClasses = computed(() => {
+  const classes = [styles.eventPill]
+
+  if (props.className) {
+    classes.push(props.className)
+  }
+
+  return classes
+})
+</script>
+
+<style module>
+.eventPill {
+  display: flex;
+  max-width: 250px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-inline: auto;
+  margin-block-start: 40px;
+}
+
+.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));
+  padding: 8px 12px;
+}
+
+.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/LinkIcon.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// Simple SVG icon component for external links
+</script>
+
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <g clip-path="url(#clip0_1309_801)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.0208 1C14.5731 1 15.0208 1.44772 15.0208 2L15.0208 11C15.0208 11.5523 14.5731 12 14.0208 12C13.4686 12 13.0208 11.5523 13.0208 11L13.0208 4.41421L2.70714 14.7279C2.31661 15.1184 1.68345 15.1184 1.29292 14.7279C0.902399 14.3374 0.902399 13.7042 1.29292 13.3137L11.6066 3L5.02085 3C4.46856 3 4.02085 2.55228 4.02085 2C4.02084 1.44771 4.46856 1 5.02085 1L14.0208 1Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1309_801">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  flex-shrink: 0;
+}
+</style>

package/src/components/common/TypingIndicator.vue

@@ -0,0 +1,202 @@
+<template>
+  <div
+    :class="indicatorClasses"
+    role="status"
+    aria-live="polite"
+    aria-label="Bot is typing"
+  >
+    <div :class="styles.dot"></div>
+    <div :class="styles.dot"></div>
+    <div :class="styles.dot"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue'
+
+/**
+ * TypingIndicator - Animated typing indicator
+ *
+ * Displays three bouncing dots to indicate that bot or agent is typing.
+ * Purely presentational - parent components control visibility via v-if.
+ */
+
+type SourceDirection = 'incoming' | 'outgoing'
+
+interface Props {
+  /** Additional CSS class names */
+  className?: string
+  /** Direction of the indicator (incoming: left-aligned, outgoing: right-aligned) */
+  direction?: SourceDirection
+  /** Remove border styling */
+  disableBorder?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  className: '',
+  direction: 'incoming',
+  disableBorder: false,
+})
+
+// Access CSS module classes
+const styles = useCssModule()
+
+/**
+ * Compute combined class names
+ */
+const indicatorClasses = computed(() => {
+  const classes = [
+    styles.typingIndicator,
+    'webchat-typing-indicator', // Global class for external styling
+  ]
+
+  if (props.className) {
+    classes.push(props.className)
+  }
+
+  if (props.direction) {
+    classes.push(styles[props.direction])
+  }
+
+  if (props.disableBorder) {
+    classes.push(styles.disableBorder)
+  }
+
+  return classes
+})
+</script>
+
+<style module>
+.typingIndicator {
+  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));
+  box-sizing: border-box;
+  display: flex;
+  gap: 6px;
+  height: 44px;
+  justify-content: center;
+  padding-block: 10px;
+  padding-inline: 10px;
+  width: 62px;
+  margin-block: var(--webchat-message-margin-block, 24px);
+  margin-inline: var(--webchat-message-margin-inline, 20px);
+}
+
+.typingIndicator.disableBorder {
+  border: none;
+  background: none !important;
+}
+
+.incoming {
+  margin-inline-start: none;
+}
+
+.outgoing {
+  margin-inline-start: auto;
+}
+
+.dot {
+  background: var(--cc-black-40, rgba(0, 0, 0, 0.4));
+  border-radius: 999px;
+  width: 6px;
+  height: 6px;
+}
+
+.dot:nth-child(1),
+.dot:nth-child(2),
+.dot:nth-child(3) {
+  animation-duration: 1.2s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+  animation-delay: -1000ms;
+}
+
+.dot:nth-child(1) {
+  animation-name: dot1;
+}
+
+.dot:nth-child(2) {
+  animation-name: dot2;
+}
+
+.dot:nth-child(3) {
+  animation-name: dot3;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion) {
+  .dot {
+    animation: none !important;
+  }
+}
+
+/* Animation keyframes for sequential bouncing effect */
+@keyframes dot1 {
+  0% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(-3px);
+  }
+  20% {
+    transform: translateY(-6px);
+  }
+  30% {
+    transform: translateY(-3px);
+  }
+  40% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes dot2 {
+  0% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(-3px);
+  }
+  30% {
+    transform: translateY(-6px);
+  }
+  40% {
+    transform: translateY(-3px);
+  }
+  50% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes dot3 {
+  0% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-3px);
+  }
+  40% {
+    transform: translateY(-6px);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+  65% {
+    transform: translateY(0);
+  }
+}
+</style>

package/src/components/common/Typography.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+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'
+
+interface Props {
+  variant?: TagVariant
+  component?: string
+  className?: string
+  style?: CSSProperties
+  color?: string
+  id?: string
+  ariaHidden?: boolean
+  tabIndex?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'body-regular',
+  component: undefined,
+  className: '',
+  style: undefined,
+  color: undefined,
+  id: undefined,
+  ariaHidden: undefined,
+  tabIndex: undefined,
+})
+
+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',
+}
+
+// Color mapping for predefined colors
+const colorsMapping: Record<ColorVariant, string> = {
+  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]
+})
+
+// Compute the color value
+const typographyColor = computed(() => {
+  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(' ')
+})
+
+// Compute merged styles
+const componentStyle = computed(() => {
+  const mergedStyle: CSSProperties = { ...props.style }
+  if (typographyColor.value) {
+    mergedStyle.color = typographyColor.value
+  }
+  return mergedStyle
+})
+</script>
+
+<template>
+  <component
+    :is="componentTag"
+    :id="id"
+    :class="componentClasses"
+    :style="componentStyle"
+    :aria-hidden="ariaHidden"
+    :tabIndex="tabIndex"
+    v-bind="attrs"
+  >
+    <slot />
+  </component>
+</template>
+
+<style module>
+.h1-semibold {
+  font-family: Figtree;
+  font-size: 2.125rem; /* 34px */
+  font-style: normal;
+  font-weight: 600;
+  line-height: 2.55rem; /* 40.8px */
+}
+
+.h2-regular {
+  font-family: Figtree;
+  font-size: 1.125rem; /* 18px */
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.4625rem; /* 23.4px */
+}
+
+.h2-semibold {
+  font-family: Figtree;
+  font-size: 1.125rem; /* 18px */
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.4625rem; /* 23.4px */
+}
+
+.title1-regular {
+  font-family: Figtree;
+  font-size: 1rem; /* 16px */
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.4rem; /* 22.4px */
+}
+
+.title1-semibold {
+  font-family: Figtree;
+  font-size: 1rem; /* 16px */
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.4rem; /* 22.4px */
+}
+
+.title2-regular {
+  font-family: Figtree;
+  font-size: 0.75rem; /* 12px */
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.05rem; /* 16.8px */
+}
+
+.title2-semibold {
+  font-family: Figtree;
+  font-size: 0.75rem; /* 12px */
+  font-style: normal;
+  font-weight: 600;
+  line-height: 0.975rem; /* 15.6px */
+}
+
+.body-regular {
+  font-family: Figtree;
+  font-size: 0.875rem; /* 14px */
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.225rem; /* 19.6px */
+}
+
+.body-semibold {
+  font-family: Figtree;
+  font-size: 0.875rem; /* 14px */
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.1375rem; /* 18.2px */
+}
+
+.copy-medium {
+  font-family: Figtree;
+  font-size: 0.75rem; /* 12px */
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.05rem; /* 16.8px */
+}
+
+.cta-semibold {
+  font-family: Figtree;
+  font-size: 0.875rem; /* 14px */
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.1375rem; /* 18.2px */
+}
+</style>