@buni.ai/chatbot-vue

Vue 3 components and composables for seamless BuniAI chat widget integration.

🚀 Quick Start

Installation

npm install @buni.ai/chatbot-vue

Basic Usage

Option 1: Using the Composable (Recommended)

<template>
  <div>
    <h1>My Vue App</h1>
    <button @click="toggle">
      {{ isOpen ? 'Close Chat' : 'Open Chat' }}
    </button>
    
    <button @click="setCustomer">
      Set Customer Data
    </button>
    
    <p>Unread messages: {{ unreadCount }}</p>
  </div>
</template>

<script setup>
import { useBuniChat } from '@buni.ai/chatbot-vue';

const { 
  isOpen, 
  unreadCount, 
  toggle, 
  setCustomerData,
  initialize 
} = useBuniChat();

// Initialize the widget
await initialize({
  token: 'your-widget-token',
  config: {
    position: 'bottom-right',
    theme: 'light',
    primaryColor: '#007bff'
  },
  onReady: () => {
    console.log('✅ BuniAI widget loaded!');
  },
  onNewMessage: (data) => {
    console.log('💬 New message:', data);
  }
});

const setCustomer = () => {
  setCustomerData({
    name: 'John Doe',
    email: '[email protected]',
    userId: '12345'
  });
};
</script>

Option 2: Using the Vue Component

<template>
  <div>
    <h1>My Vue App</h1>
    <BuniChatWidget 
      token="your-widget-token"
      :config="{
        position: 'bottom-right',
        theme: 'light'
      }"
      @ready="onReady"
      @new-message="onNewMessage"
    />
  </div>
</template>

<script setup>
import { BuniChatWidget } from '@buni.ai/chatbot-vue';

const onReady = () => {
  console.log('Widget is ready!');
};

const onNewMessage = (data) => {
  console.log('New message received:', data);
};
</script>

Option 3: Using as a Vue Plugin

// main.js
import { createApp } from 'vue';
import { BuniChatPlugin } from '@buni.ai/chatbot-vue';
import App from './App.vue';

const app = createApp(App);
app.use(BuniChatPlugin);
app.mount('#app');

<!-- Now you can use the component globally -->
<template>
  <div>
    <BuniChatWidget token="your-widget-token" />
  </div>
</template>

📖 API Reference

useBuniChat(options?)

A Vue 3 composable for managing the BuniAI chat widget.

Parameters

| Parameter | Type | Description | |-----------|------|-------------| | options | BuniChatOptions | Optional initialization options |

Returns

{
  // Reactive state
  state: BuniChatState,
  isOpen: Ref<boolean>,
  isLoaded: Ref<boolean>,
  isMinimized: Ref<boolean>,
  unreadCount: Ref<number>,
  
  // Methods
  initialize: (options: BuniChatOptions) => Promise<void>,
  show: () => void,
  hide: () => void,
  toggle: () => void,
  minimize: () => void,
  maximize: () => void,
  destroy: () => void,
  
  // Data management
  setCustomerData: (data: CustomerData) => void,
  getCustomerData: () => CustomerData | null,
  setSessionVariables: (variables: SessionVariables) => void,
  getSessionVariables: () => SessionVariables | null,
  
  // Chat actions
  sendMessage: (message: string) => void,
  clearChat: () => void
}

<BuniChatWidget>

Vue component for rendering the chat widget.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | token | string | - | Your BuniAI widget token (required) | | config | object | {} | Widget configuration options | | onReady | function | - | Callback when widget is ready | | onNewMessage | function | - | Callback for new messages | | onVisibilityChanged | function | - | Callback for visibility changes | | onError | function | - | Callback for errors |

Configuration Options

interface BuniChatOptions {
  token: string;
  config?: {
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    theme?: 'light' | 'dark' | 'auto';
    primaryColor?: string;
    welcomeMessage?: string;
    placeholder?: string;
    showBranding?: boolean;
  };
  onReady?: (data: any) => void;
  onNewMessage?: (data: any) => void;
  onVisibilityChanged?: (data: any) => void;
  onError?: (error: Error) => void;
}

🎯 Advanced Examples

Custom Customer Data Management

<script setup>
import { useBuniChat } from '@buni.ai/chatbot-vue';
import { ref, watch } from 'vue';

const user = ref({
  name: '',
  email: '',
  plan: 'free'
});

const { initialize, setCustomerData } = useBuniChat();

// Initialize widget
await initialize({
  token: 'your-token',
  config: { position: 'bottom-right' }
});

// Watch for user changes and update widget
watch(user, (newUser) => {
  setCustomerData({
    name: newUser.name,
    email: newUser.email,
    customFields: {
      plan: newUser.plan,
      lastLogin: new Date().toISOString()
    }
  });
}, { deep: true });
</script>

Event Handling

<script setup>
import { useBuniChat } from '@buni.ai/chatbot-vue';
import { ref } from 'vue';

const chatHistory = ref([]);
const notifications = ref([]);

const { initialize } = useBuniChat();

await initialize({
  token: 'your-token',
  onNewMessage: (data) => {
    chatHistory.value.push(data);
    
    if (data.isFromBot) {
      notifications.value.push({
        message: `New message: ${data.message}`,
        timestamp: Date.now()
      });
    }
  },
  onVisibilityChanged: (data) => {
    console.log('Chat visibility:', data.visibility);
  }
});
</script>

Integration with Pinia Store

// stores/chat.js
import { defineStore } from 'pinia';
import { useBuniChat } from '@buni.ai/chatbot-vue';

export const useChatStore = defineStore('chat', () => {
  const { 
    isOpen, 
    unreadCount, 
    initialize, 
    toggle,
    setCustomerData 
  } = useBuniChat();

  const initializeWidget = async (token) => {
    await initialize({
      token,
      onNewMessage: (data) => {
        // Handle new messages in store
        console.log('Store received message:', data);
      }
    });
  };

  return {
    isOpen,
    unreadCount,
    initializeWidget,
    toggle,
    setCustomerData
  };
});

🔧 TypeScript Support

Full TypeScript support is included:

import type { 
  BuniChatOptions, 
  CustomerData, 
  SessionVariables 
} from '@buni.ai/chatbot-vue';

const options: BuniChatOptions = {
  token: 'your-token',
  config: {
    position: 'bottom-right',
    theme: 'light'
  }
};

const customerData: CustomerData = {
  name: 'John Doe',
  email: '[email protected]',
  userId: '12345'
};

🤝 Requirements

• Vue 3.0+
• Modern browser with ES2020 support

📝 License

MIT © BuniAI

🔗 Links

• Documentation
• GitHub Repository
• NPM Package
• BuniAI Platform

🆘 Support

• GitHub Issues
• Discord Community
• Documentation