@aivue/chatbot v2.0.1

@aivue/chatbot

🚀 Next-Generation AI Chat Components for Vue.js

Enterprise-grade conversational AI with advanced features including database storage, voice integration, multi-model support, analytics, and collaborative capabilities. Built for production applications with backward compatibility.

🎯 What's New in v2.0.0

🚀 Major Release: Enhanced AI Chatbot

This is a major release that introduces comprehensive advanced features while maintaining 100% backward compatibility.

graph TD
    A[Basic Chat v1.x] --> B[Enhanced Chat v2.0]
    B --> C[🗄️ Database Storage]
    B --> D[🎤 Voice Integration]
    B --> E[🤖 Multi-Model AI]
    B --> F[📊 Analytics & Insights]
    B --> G[🧵 Conversation Threading]
    B --> H[📎 File Attachments]
    B --> I[👥 Collaborative Features]
    B --> J[🔒 Privacy & Security]

✨ New Enterprise Features

📺 Live Demo • 📚 Documentation • � Report Bug

✨ Overview

@aivue/chatbot provides ready-to-use chat components for Vue.js applications, powered by AI. Create engaging conversational interfaces with minimal setup, supporting multiple AI providers.

✨ Core Features

🎯 Essential Features

• 💬 Ready-to-use Chat UI: Beautiful, responsive chat interface with minimal setup
• 🔄 Real-time Streaming: See AI responses as they're generated, token by token
• 📱 Mobile-friendly: Responsive design works on all devices and screen sizes
• 🎨 Customizable: Easily style to match your application with CSS variables
• 🧠 Multiple AI Providers: Works with OpenAI, Claude, Gemini, HuggingFace, and more
• 📝 Markdown Support: Rich text formatting in messages with code highlighting
• 🔧 Fully Typed: Complete TypeScript support with comprehensive type definitions
• 🔌 Vue Plugin: Easy global registration of components with Vue plugin
• 🚀 Composition API: First-class support for Vue 3 Composition API

🚀 Enhanced Features (v2.0+)

🗄️ Database Storage & Persistence

• Multiple Storage Providers: localStorage, Supabase, Firebase, MongoDB, PostgreSQL
• Auto-Save Conversations: Automatic conversation persistence with configurable intervals
• Search & Organization: Find conversations by content, date, or custom tags
• Conversation Threading: Organize chats by topics with automatic categorization
• Data Export: Export conversations in JSON, CSV, or PDF formats
• Encryption Support: End-to-end encryption for sensitive conversations

🎤 Voice Integration

• Speech-to-Text: Click microphone to speak your message (50+ languages)
• Text-to-Speech: AI responses can be read aloud with natural voices
• Voice Commands: Special voice-activated commands and shortcuts
• Multi-Language Support: Automatic language detection and switching

🤖 Multi-Model AI Support

• Provider Switching: OpenAI, Anthropic, Ollama, Google Gemini, HuggingFace
• Auto-Selection: Intelligent model selection based on content complexity
• Load Balancing: Distribute requests across multiple models for reliability
• Performance Optimization: Track and optimize model performance metrics

📊 Analytics & Insights

• Usage Metrics: Track messages, response times, user engagement
• Sentiment Analysis: Analyze conversation sentiment and emotional tone
• Performance Monitoring: Monitor AI model performance and response quality
• Custom Reports: Generate detailed reports with export capabilities

🧵 Advanced Chat Features

• Message Reactions: React to messages with emojis and custom reactions
• File Attachments: Upload and analyze PDFs, documents, images, audio files
• Quick Actions: Pre-defined prompts and custom workflow automation
• Typing Indicators: Show when AI is thinking or generating responses
• Message Threading: Reply to specific messages with threaded conversations

👥 Collaborative Features

• Shared Conversations: Share chats with team members or collaborators
• Real-time Collaboration: Multiple users in the same conversation
• Team Workspaces: Organize conversations by teams or projects
• Permission Management: Fine-grained access control and permissions

🔒 Privacy & Security

• Local Storage Options: Keep all data on the user's device
• End-to-End Encryption: Secure sensitive conversations with encryption
• Data Portability: Export and import data in standard formats
• Privacy Controls: Granular privacy settings and data retention policies

📦 Installation

npm

npm install @aivue/chatbot @aivue/core

yarn

yarn add @aivue/chatbot @aivue/core

pnpm

pnpm add @aivue/chatbot @aivue/core

Don't forget to import the CSS:

// Import the CSS from the chatbot package
import '@aivue/chatbot/style.css'

🔄 Vue Compatibility

• ✅ Vue 2: Compatible with Vue 2.6.0 and higher
• ✅ Vue 3: Compatible with all Vue 3.x versions

The package automatically detects which version of Vue you're using and provides the appropriate compatibility layer. This means you can use the same package regardless of whether your project is using Vue 2 or Vue 3.

🚀 Quick Start

1. Set up the AI Client

First, create an AI client using @aivue/core:

// ai-client.js
import { AIClient } from '@aivue/core';

export const aiClient = new AIClient({
  provider: 'openai', // or 'claude', 'gemini', 'huggingface', 'ollama', 'deepseek'
  apiKey: import.meta.env.VITE_OPENAI_API_KEY, // Use environment variables for API keys
  model: 'gpt-4o' // Specify the model to use
});

2. Use the AiChatWindow Component

Import and use the component in your Vue application:

<template>
  <div class="chat-container">
    <AiChatWindow
      :client="aiClient"
      title="AI Assistant"
      placeholder="Ask me anything..."
      :show-avatars="true"
      theme="light"
    />
  </div>
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';
import '@aivue/chatbot/style.css'; // Import the CSS
import { aiClient } from './ai-client.js';
</script>

<style>
.chat-container {
  height: 600px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>

3. That's it!

You now have a fully functional AI chat interface in your Vue application. The component handles all the complexity of managing the chat state, sending messages to the AI provider, and displaying the responses.

See the live demo →

Register Components Globally (Optional)

If you prefer to register components globally, you can use the provided Vue plugin:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { AiChatPlugin } from '@aivue/chatbot';

const app = createApp(App);
app.use(AiChatPlugin); // Register all components globally
app.mount('#app');

Or register individual components manually:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { AiChatWindow } from '@aivue/chatbot';

const app = createApp(App);
app.component('AiChatWindow', AiChatWindow); // Register with PascalCase
app.mount('#app');

Then use it in your templates with either PascalCase or kebab-case:

<!-- Both of these work -->
<AiChatWindow :client="aiClient" />
<ai-chat-window :client="aiClient" />

Using the Chat Engine Composable

The useChatEngine composable provides a simple way to integrate AI chat functionality into any Vue component:

Using with an AIClient instance

<script setup>
import { ref } from 'vue';
import { useChatEngine } from '@aivue/chatbot';
import { aiClient } from './ai-client.js';

const {
  messages,
  isLoading,
  error,
  sendMessage,
  clearMessages
} = useChatEngine({
  client: aiClient,
  initialMessages: [
    { role: 'assistant', content: 'Hello! How can I help you today?' }
  ],
  systemPrompt: 'You are a helpful assistant.',
  streaming: true,
  persistenceKey: 'my-chat-history'
});
</script>

Direct provider configuration (new)

You can now configure the provider directly without creating an AIClient instance:

<script setup>
import { ref } from 'vue';
import { useChatEngine } from '@aivue/chatbot';

const {
  messages,
  isLoading,
  error,
  sendMessage,
  clearMessages,
  resetError,
  updateConfig
} = useChatEngine({
  // Provider configuration
  provider: 'openai',
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  model: 'gpt-3.5-turbo',

  // API security
  useProxy: true,
  proxyUrl: '/api/chat',

  // Chat behavior
  initialMessages: [
    { role: 'assistant', content: 'Hello! How can I help you today?' }
  ],
  systemPrompt: 'You are a helpful assistant.',
  streaming: true,
  persistenceKey: 'my-chat-history',

  // Callbacks
  onError: (err) => console.error('Chat error:', err),
  onMessageSent: (msg) => console.log('Message sent:', msg),
  onResponseReceived: (msg) => console.log('Response received:', msg)
});

// You can dynamically update the configuration
function switchToGpt4() {
  updateConfig({ model: 'gpt-4o' });
}

const userInput = ref('');

function handleSend() {
  if (userInput.value.trim()) {
    sendMessage(userInput.value);
    userInput.value = '';
  }
}
</script>

<template>
  <div class="chat-container">
    <div class="messages">
      <div v-for="(message, index) in messages" :key="message.id || index" class="message">
        <strong>{{ message.role }}:</strong> {{ message.content }}
      </div>
    </div>

    <div class="input-area">
      <input v-model="userInput" @keyup.enter="handleSend" :disabled="isLoading" />
      <button @click="handleSend" :disabled="isLoading">Send</button>
      <button @click="clearMessages">Clear</button>
      <button @click="switchToGpt4">Switch to GPT-4</button>
    </div>

    <div v-if="error" class="error">{{ error.message }}</div>
  </div>
</template>

Note that all values returned from useChatEngine are Vue reactive refs, so you can use them directly in your templates without .value.

Customizing the Chat Window

Using with AIClient

<template>
  <AiChatWindow
    :client="aiClient"
    title="AI Assistant"
    placeholder="Ask me anything about Vue..."
    :initial-messages="initialMessages"
    system-prompt="You are a Vue.js expert who provides clear, concise answers."
    :streaming="true"
    :show-avatars="true"
    :user-avatar="userAvatar"
    :assistant-avatar="assistantAvatar"
    theme="dark"
    height="700px"
    width="100%"
    max-width="800px"
    :show-timestamps="true"
    :show-copy-button="true"
    persistence-key="vue-chat-history"
    @message-sent="handleMessageSent"
    @response-received="handleResponseReceived"
    @error="handleError"
  />
</template>

<script setup>
import { ref } from 'vue';
import { AiChatWindow } from '@aivue/chatbot';
import { aiClient } from './ai-client.js';

const userAvatar = ref('/path/to/user-avatar.png');
const assistantAvatar = ref('/path/to/assistant-avatar.png');
const initialMessages = ref([
  { role: 'assistant', content: 'Hello! I can help you with Vue.js questions.' }
]);

function handleMessageSent(event) {
  console.log('Message sent:', event.message);
}

function handleResponseReceived(event) {
  console.log('Response received:', event.message);
}

function handleError(event) {
  console.error('Error:', event.error);
}
</script>

Direct Provider Configuration (New)

You can now configure the provider directly without creating an AIClient instance:

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    model="gpt-3.5-turbo"
    :use-proxy="true"
    proxy-url="/api/chat"
    title="AI Assistant"
    placeholder="Ask me anything about Vue..."
    :initial-messages="initialMessages"
    system-prompt="You are a Vue.js expert who provides clear, concise answers."
    :streaming="true"
    theme="dark"
    :show-timestamps="true"
    @message-sent="handleMessageSent"
    @response-received="handleResponseReceived"
    @error="handleError"
  />
</template>

<script setup>
import { ref } from 'vue';
import { AiChatWindow } from '@aivue/chatbot';

const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
const initialMessages = ref([
  { role: 'assistant', content: 'Hello! I can help you with Vue.js questions.' }
]);

function handleMessageSent(event) {
  console.log('Message sent:', event.message);
}

function handleResponseReceived(event) {
  console.log('Response received:', event.message);
}

function handleError(event) {
  console.error('Error:', event.error);
}
</script>

Demo Mode (No API Key Required)

You can use the chatbot in demo mode without an API key:

<template>
  <AiChatWindow
    provider="openai"
    :demoMode="true"
    :demoResponses="{
      'hello': 'Hello! I\'m a demo AI assistant.',
      'help': 'I can help you with various tasks. Just ask me a question!',
      'features': 'This chatbot supports markdown, code highlighting, and more!'
    }"
  />
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';
</script>

This is useful for:

• Showcasing the chatbot functionality without requiring an API key
• Creating demos and examples
• Testing the UI without making actual API calls
• Fallback when API keys are not available

🗄️ Database Storage & Persistence

The enhanced chatbot supports multiple storage providers for persistent conversations, search capabilities, and conversation management.

Storage Providers

graph LR
    A[Chat Engine] --> B[Storage Provider]
    B --> C[localStorage]
    B --> D[Supabase]
    B --> E[Firebase]
    B --> F[MongoDB]
    B --> G[PostgreSQL]

    C --> H[Browser Storage]
    D --> I[Real-time DB]
    E --> J[Google Cloud]
    F --> K[Document DB]
    G --> L[SQL Database]

localStorage (Browser Storage)

Perfect for client-side applications with privacy-focused storage:

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    :storage="{
      provider: 'localStorage',
      userId: 'user-123',
      autoSave: true,
      encryption: true
    }"
    @conversation-saved="handleConversationSaved"
  />
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';

const apiKey = import.meta.env.VITE_OPENAI_API_KEY;

function handleConversationSaved(conversationId) {
  console.log('Conversation saved:', conversationId);
}
</script>

Supabase (Real-time Database)

For real-time collaboration and cloud storage:

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    :storage="{
      provider: 'supabase',
      connectionString: supabaseUrl,
      apiKey: supabaseKey,
      userId: user.id,
      autoSave: true,
      realTimeSync: true
    }"
    :user="{
      id: user.id,
      name: user.name,
      avatar: user.avatar
    }"
  />
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';

const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

const user = {
  id: 'user-123',
  name: 'John Doe',
  avatar: 'https://example.com/avatar.jpg'
};
</script>

Firebase (Google Cloud)

For Google ecosystem integration:

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    :storage="{
      provider: 'firebase',
      projectId: firebaseProjectId,
      apiKey: firebaseApiKey,
      userId: user.id,
      autoSave: true,
      offlineSupport: true
    }"
  />
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';

const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
const firebaseProjectId = import.meta.env.VITE_FIREBASE_PROJECT_ID;
const firebaseApiKey = import.meta.env.VITE_FIREBASE_API_KEY;

const user = {
  id: 'user-123',
  name: 'John Doe'
};
</script>

MongoDB (Document Database)

For flexible document-based storage:

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    :storage="{
      provider: 'mongodb',
      connectionString: mongoConnectionString,
      database: 'chatbot',
      collection: 'conversations',
      userId: user.id,
      autoSave: true
    }"
  />
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';

const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
const mongoConnectionString = import.meta.env.VITE_MONGODB_CONNECTION_STRING;

const user = {
  id: 'user-123',
  name: 'John Doe'
};
</script>

Storage Methods with useChatEngine

Access advanced storage methods using the chat engine composable:

<script setup>
import { useChatEngine } from '@aivue/chatbot';

const {
  messages,
  isLoading,
  sendMessage,
  // Storage methods
  saveConversation,
  loadConversation,
  searchConversations,
  deleteConversation,
  getConversationList,
  exportConversation
} = useChatEngine({
  provider: 'openai',
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  storage: {
    provider: 'localStorage',
    userId: 'user-123',
    autoSave: true
  }
});

// Save current conversation
async function saveCurrentChat() {
  const conversationId = await saveConversation('My Important Chat');
  console.log('Saved conversation:', conversationId);
}

// Load a specific conversation
async function loadChat(conversationId) {
  await loadConversation(conversationId);
}

// Search conversations
async function searchChats(query) {
  const results = await searchConversations(query);
  console.log('Search results:', results);
}

// Get all conversations
async function getAllChats() {
  const conversations = await getConversationList();
  console.log('All conversations:', conversations);
}

// Export conversation
async function exportChat(conversationId, format = 'json') {
  const exportData = await exportConversation(conversationId, format);
  // Download or process the exported data
}

// Delete conversation
async function deleteChat(conversationId) {
  await deleteConversation(conversationId);
}
</script>

🎤 Voice Integration

Add speech-to-text input and text-to-speech responses to your chatbot for a more natural conversation experience.

Basic Voice Setup

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    :voice="{
      speechToText: true,
      textToSpeech: true,
      language: 'en-US',
      autoSpeak: false
    }"
    @voice-started="handleVoiceStarted"
    @voice-ended="handleVoiceEnded"
    @speech-recognized="handleSpeechRecognized"
  />
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';

const apiKey = import.meta.env.VITE_OPENAI_API_KEY;

function handleVoiceStarted() {
  console.log('Voice recording started');
}

function handleVoiceEnded() {
  console.log('Voice recording ended');
}

function handleSpeechRecognized(text) {
  console.log('Speech recognized:', text);
}
</script>

Advanced Voice Configuration

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    :voice="{
      speechToText: true,
      textToSpeech: true,
      language: 'en-US',
      autoSpeak: true,
      voiceCommands: true,
      speechProvider: 'browser', // 'browser' or 'openai-whisper'
      ttsProvider: 'browser', // 'browser' or 'openai-tts'
      voice: 'alloy', // OpenAI TTS voice
      speed: 1.0,
      pitch: 1.0
    }"
  />
</template>

Voice Methods with useChatEngine

<script setup>
import { useChatEngine } from '@aivue/chatbot';

const {
  messages,
  sendMessage,
  // Voice methods
  startListening,
  stopListening,
  speak,
  stopSpeaking,
  isListening,
  isSpeaking
} = useChatEngine({
  provider: 'openai',
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  voice: {
    speechToText: true,
    textToSpeech: true,
    language: 'en-US'
  }
});

// Manual voice control
async function toggleListening() {
  if (isListening.value) {
    stopListening();
  } else {
    await startListening();
  }
}

// Speak custom text
async function speakText(text) {
  await speak(text);
}

// Stop current speech
function stopCurrentSpeech() {
  stopSpeaking();
}
</script>

Supported Languages

The voice integration supports 50+ languages:

🤖 Multi-Model AI Support

Intelligently switch between different AI providers for optimal performance and cost efficiency.

Basic Multi-Model Setup

<template>
  <AiChatWindow
    provider="openai"
    :api-key="apiKey"
    :multi-model="{
      enabled: true,
      models: [
        {
          name: 'GPT-4',
          provider: 'openai',
          model: 'gpt-4o',
          specialty: 'general',
          apiKey: openaiKey
        },
        {
          name: 'Claude',
          provider: 'anthropic',
          model: 'claude-3-sonnet-20240229',
          specialty: 'analysis',
          apiKey: claudeKey
        },
        {
          name: 'Llama',
          provider: 'ollama',
          model: 'llama3.2',
          specialty: 'coding',
          baseUrl: 'http://localhost:11434'
        }
      ],
      autoSwitch: true,
      loadBalancing: true
    }"
    @model-switched="handleModelSwitch"
  />
</template>

<script setup>
import { AiChatWindow } from '@aivue/chatbot';

const openaiKey = import.meta.env.VITE_OPENAI_API_KEY;
const claudeKey = import.meta.env.VITE_ANTHROPIC_API_KEY;

function handleModelSwitch(modelInfo) {
  console.log('Switched to model:', modelInfo);
}
</script>

Model Selection Logic

graph TD
    A[User Message] --> B{Content Analysis}
    B -->|Code/Technical| C[Llama 3.2]
    B -->|Analysis/Research| D[Claude 3]
    B -->|General/Creative| E[GPT-4]
    B -->|Simple/Fast| F[GPT-3.5]

    C --> G[Performance Tracking]
    D --> G
    E --> G
    F --> G

    G --> H[Model Optimization]
    H --> I[Future Selections]

Multi-Model Methods

<script setup>
import { useChatEngine } from '@aivue/chatbot';

const {
  messages,
  sendMessage,
  // Multi-model methods
  switchModel,
  getAvailableModels,
  getModelPerformance,
  getCurrentModel
} = useChatEngine({
  provider: 'openai',
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  multiModel: {
    enabled: true,
    models: [
      { name: 'GPT-4', provider: 'openai', specialty: 'general' },
      { name: 'Claude', provider: 'anthropic', specialty: 'analysis' }
    ],
    autoSwitch: true
  }
});

// Get available models
const availableModels = getAvailableModels();

// Switch to specific model
async function useGPT4() {
  await switchModel('GPT-4');
}

// Get performance metrics
const performance = getModelPerformance();

// Get current active model
const currentModel = getCurrentModel();
</script>

Using the Intercom-like Chat Toggle

The AiChatToggle component provides an Intercom-like floating chat button that expands into a chat window:

<template>
  <!-- Floating chat button that toggles the chat window -->
  <AiChatToggle
    provider="openai"
    :api-key="apiKey"
    model="gpt-3.5-turbo"
    position="bottom"  <!-- 'bottom' or 'top' -->
    :default-open="false"
    title="Chat with AI"
    theme="light"
  />
</template>

<script setup>
import { AiChatToggle } from '@aivue/chatbot';

const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
</script>

AiChatToggle with Custom Content

You can also use your own custom chat implementation inside the toggle:

<template>
  <AiChatToggle position="bottom" title="Custom Chat">
    <!-- Your custom chat implementation goes here -->
    <div class="custom-chat">
      <div class="messages">
        <div v-for="msg in messages" :key="msg.id" class="message">
          {{ msg.content }}
        </div>
      </div>
      <input v-model="input" @keyup.enter="sendMessage" />
      <button @click="sendMessage">Send</button>
    </div>
  </AiChatToggle>
</template>

<script setup>
import { ref } from 'vue';
import { AiChatToggle } from '@aivue/chatbot';

const messages = ref([]);
const input = ref('');

function sendMessage() {
  if (input.value.trim()) {
    messages.value.push({ id: Date.now(), content: input.value });
    input.value = '';
  }
}
</script>

Advanced Usage: Custom Styling

You can customize the appearance of the chat window using CSS variables:

:root {
  --aivue-chat-bg: #ffffff;
  --aivue-chat-border: #e0e0e0;
  --aivue-chat-text: #333333;
  --aivue-chat-user-bg: #e1f5fe;
  --aivue-chat-assistant-bg: #f5f5f5;
  --aivue-chat-input-bg: #ffffff;
  --aivue-chat-input-border: #e0e0e0;
  --aivue-chat-button-bg: #2196f3;
  --aivue-chat-button-text: #ffffff;
  --aivue-chat-error: #f44336;
  --aivue-chat-loading: #9e9e9e;
  --aivue-chat-border-radius: 8px;
  --aivue-chat-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark theme example */
.dark-theme {
  --aivue-chat-bg: #1e1e1e;
  --aivue-chat-border: #444444;
  --aivue-chat-text: #f0f0f0;
  --aivue-chat-user-bg: #2b5278;
  --aivue-chat-assistant-bg: #383838;
  --aivue-chat-input-bg: #2d2d2d;
  --aivue-chat-input-border: #555555;
  --aivue-chat-button-bg: #4a6da7;
  --aivue-chat-button-text: #ffffff;
}

API Reference

AiChatWindow Props

AiChatWindow Events

AiChatWindow Slots

AiChatToggle Props

AiChatToggle Events

AiChatToggle Slots

useChatEngine Options

useChatEngine Return Values

Troubleshooting

Component Registration Issues

If you encounter issues with component registration, make sure you're using the correct import and registration method:

// Correct import
import { AiChatWindow } from '@aivue/chatbot';

// For local registration in a component
export default {
  components: {
    AiChatWindow
  }
}

// Or with script setup
import { AiChatWindow } from '@aivue/chatbot';

When using the component in templates, you can use either PascalCase or kebab-case:

<!-- Both of these work -->
<AiChatWindow :client="aiClient" />
<ai-chat-window :client="aiClient" />

TypeScript Support

The package includes full TypeScript support. You can import types directly:

import { Message, ChatOptions } from '@aivue/chatbot';

// Use types in your code
const messages: Message[] = [];
const options: ChatOptions = {
  provider: 'openai',
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  systemPrompt: 'You are a helpful assistant.'
};

API Key Security

For security reasons, never hardcode API keys in your code. Use environment variables instead:

// .env file
VITE_OPENAI_API_KEY=your-api-key

// In your code
const apiKey = import.meta.env.VITE_OPENAI_API_KEY;

Or better yet, use the proxy feature:

<script setup>
import { useChatEngine } from '@aivue/chatbot';

const { messages, isLoading, sendMessage } = useChatEngine({
  provider: 'openai',
  useProxy: true,
  proxyUrl: '/api/chat' // Your backend endpoint
});
</script>

Webpack Configuration

If you're using webpack, make sure your configuration properly handles Vue components:

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // ...
    ]
  },
  // ...
}

Vite Configuration

For Vite projects, add the following to your vite.config.js:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['@aivue/chatbot', '@aivue/core']
  }
});

Vue Version Compatibility Issues

If you encounter errors related to missing Vue functions like createElementBlock, normalizeClass, or createElementVNode, it means you're using an older version of Vue 3 (pre-3.2.0). Here's how to fix it:

1. Check your Vue version:

   npm list vue

2. If you're using Vue < 3.2.0: The package includes a compatibility layer that should handle this automatically. If you're still experiencing issues, you can:

   a. Update to Vue 3.2.0 or higher (recommended):

   npm install vue@^3.2.0

   b. Use the compatibility utilities explicitly:

   import {
     compatCreateElementBlock,
     compatCreateElementVNode,
     compatNormalizeClass
   } from '@aivue/chatbot';
   
   // Use these functions instead of the Vue ones

3. For component registration issues: Use the provided compatibility helpers:

   import { registerCompatComponent } from '@aivue/chatbot';
   
   // Instead of app.component('MyComponent', Component)
   registerCompatComponent(app, 'MyComponent', Component);

📺 Live Demo

Interactive Demo

See the chatbot components in action with our interactive demo. Try different AI providers, customize the appearance, and test all the features.

Launch Demo →

📦 Related Packages

🧠 @aivue/core

Core AI functionality for Vue.js components

✨ @aivue/autosuggest

AI-powered suggestion components for Vue.js

📝 @aivue/smartform

AI-powered form validation for Vue.js

🖼️ @aivue/image-caption

AI-powered image captioning with OpenAI Vision models

📄 License

MIT © Bharatkumar Subramanian