# @buni.ai/chatbot-vue

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

[![npm version](https://badge.fury.io/js/@buni.ai%2Fchatbot-vue.svg)](https://badge.fury.io/js/@buni.ai%2Fchatbot-vue)
[![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D.svg)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6.svg)](https://www.typescriptlang.org/)

## 🚀 Quick Start

### Installation

```bash
npm install @buni.ai/chatbot-vue
```

### Basic Usage

#### Option 1: Using the Composable (Recommended)

```vue
<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: 'john@example.com',
    userId: '12345'
  });
};
</script>
```

#### Option 2: Using the Vue Component

```vue
<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

```javascript
// 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');
```

```vue
<!-- 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

```typescript
{
  // 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

```typescript
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

```vue
<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

```vue
<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

```javascript
// 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:

```typescript
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: 'john@example.com',
  userId: '12345'
};
```

## 🤝 Requirements

- Vue 3.0+
- Modern browser with ES2020 support

## 📝 License

MIT © BuniAI

## 🔗 Links

- [Documentation](https://docs.buni.ai/widgets/vue)
- [GitHub Repository](https://github.com/buni-ai/chatbot-vue)
- [NPM Package](https://www.npmjs.com/package/@buni.ai/chatbot-vue)
- [BuniAI Platform](https://buni.ai)

## 🆘 Support

- [GitHub Issues](https://github.com/buni-ai/chatbot-vue/issues)
- [Discord Community](https://discord.gg/buni-ai)
- [Documentation](https://docs.buni.ai)