@cognigy/chat-components-vue

Vue 3 chat message components for building conversational interfaces. A Vue port of @cognigy/chat-components.

Features

• Data-driven rendering - Single Message component handles all message types automatically
• Rich message types - Text, images, video, audio, galleries, lists, buttons, and more
• Plugin system - Extend with custom message types
• TypeScript - Full type safety with exported types
• Accessible - ARIA attributes and keyboard navigation
• Themeable - CSS variables for customization

Installation

npm install @cognigy/chat-components-vue

Quick Start

<template>
  <div class="chat-container">
    <Message
      v-for="msg in messages"
      :key="msg.traceId"
      :message="msg"
      :config="chatConfig"
      :action="handleAction"
    />
    <TypingIndicator v-if="isTyping" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  Message,
  TypingIndicator,
  type IMessage,
  type ChatConfig
} from '@cognigy/chat-components-vue'

// Import styles
import '@cognigy/chat-components-vue/style.css'

const messages = ref<IMessage[]>([])
const isTyping = ref(false)

const chatConfig: ChatConfig = {
  settings: {
    layout: {
      botOutputMaxWidthPercentage: 80,
    },
  },
}

const handleAction = (text: string, data: Record<string, any> | null) => {
  console.log('User action:', text, data)
}
</script>

Components

Message Renderer

| Component | Description | |-----------|-------------| | Message | Main renderer - automatically routes to correct message type |

Message Types

| Component | Description | |-----------|-------------| | TextMessage | Plain text with HTML/Markdown support | | ImageMessage | Images with lightbox | | VideoMessage | Video player (direct, YouTube, Vimeo) | | AudioMessage | Audio player | | TextWithButtons | Text with action buttons or quick replies | | Gallery | Horizontal carousel of cards | | List | Vertical list with items and actions | | FileMessage | File attachments with download | | DatePicker | Date selection display | | AdaptiveCard | Microsoft Adaptive Cards |

UI Components

| Component | Description | |-----------|-------------| | TypingIndicator | Animated typing dots | | ChatBubble | Message bubble wrapper | | ActionButtons | Button group for actions | | ChatEvent | System event notifications | | Typography | Text with style variants |

Custom Message Types

Extend with your own message types using plugins:

<script setup lang="ts">
import { Message, type MessagePlugin } from '@cognigy/chat-components-vue'
import CustomCard from './CustomCard.vue'

const plugins: MessagePlugin[] = [
  {
    name: 'CustomCard',
    match: (message) => message.data?.customType === 'card',
    component: CustomCard,
  }
]
</script>

<template>
  <Message :message="msg" :plugins="plugins" :action="handleAction" />
</template>

Theming

Customize colors via the config.settings.colors object:

const chatConfig: ChatConfig = {
  settings: {
    colors: {
      // Primary colors (buttons, links, focus states)
      primaryColor: '#1976d2',
      primaryColorHover: '#1565c0',
      primaryColorFocus: '#1976d2',
      primaryContrastColor: '#ffffff',

      // Message bubble backgrounds
      botMessageColor: '#f5f5f5',
      userMessageColor: '#1976d2',
      agentMessageColor: '#e8f4fd',

      // Message text colors
      botMessageContrastColor: '#1a1a1a',
      userMessageContrastColor: '#ffffff',
      agentMessageContrastColor: '#1a1a1a',

      // Message bubble borders
      borderBotMessage: 'transparent',
      borderUserMessage: 'transparent',
      borderAgentMessage: 'transparent',

      // Link color
      textLinkColor: '#1976d2',
    },
  },
}

All color properties are optional and have sensible defaults.

Documentation

• Component API Reference - Props, events, and usage
• Message Data Structures - Backend integration guide
• Consumer Guide - Installation and CI/CD setup

Requirements

• Vue 3.4+
• Node.js 22.12+

License

MIT