@buni.ai/chatbot-vue 1.0.0

package/README.md

@@ -0,0 +1,356 @@
+# @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)

package/dist/components/BuniChatWidget.vue.d.ts

@@ -0,0 +1,62 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    token: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    config: {
+        type: null;
+        required: false;
+        default: () => {};
+    };
+    onReady: {
+        type: null;
+        required: false;
+    };
+    onNewMessage: {
+        type: null;
+        required: false;
+    };
+    onVisibilityChanged: {
+        type: null;
+        required: false;
+    };
+    onError: {
+        type: null;
+        required: false;
+    };
+}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    token: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    config: {
+        type: null;
+        required: false;
+        default: () => {};
+    };
+    onReady: {
+        type: null;
+        required: false;
+    };
+    onNewMessage: {
+        type: null;
+        required: false;
+    };
+    onVisibilityChanged: {
+        type: null;
+        required: false;
+    };
+    onError: {
+        type: null;
+        required: false;
+    };
+}>> & Readonly<{}>, {
+    config: any;
+    token: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=BuniChatWidget.vue?vue&type=script&setup=true&lang.d.ts.map

package/dist/components/BuniChatWidget.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuniChatWidget.vue?vue&type=script&setup=true&lang.d.ts","sourceRoot":"","sources":["../../src/components/BuniChatWidget.vue?vue&type=script&setup=true&lang.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;WAoDc,GAAG,UAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjC7B,wBAsCE"}

package/dist/composables/useBuniChat.d.ts

@@ -0,0 +1,27 @@
+import type { BuniChatOptions, CustomerData, SessionVariables } from '@buni.ai/chatbot-core';
+export declare function useBuniChat(options?: BuniChatOptions): {
+    state: {
+        isOpen: boolean;
+        isLoaded: boolean;
+        isMinimized: boolean;
+        unreadCount: number;
+    };
+    isOpen: import("vue").Ref<boolean, boolean>;
+    isLoaded: import("vue").Ref<boolean, boolean>;
+    isMinimized: import("vue").Ref<boolean, boolean>;
+    unreadCount: import("vue").Ref<number, number>;
+    initialize: (initOptions: BuniChatOptions) => Promise<void>;
+    show: () => void | undefined;
+    hide: () => void | undefined;
+    toggle: () => void | undefined;
+    minimize: () => void | undefined;
+    maximize: () => void | undefined;
+    destroy: () => void;
+    setCustomerData: (data: CustomerData) => void | undefined;
+    getCustomerData: () => CustomerData | null | undefined;
+    setSessionVariables: (variables: SessionVariables) => void | undefined;
+    getSessionVariables: () => SessionVariables | null | undefined;
+    sendMessage: (message: string) => void | undefined;
+    clearChat: () => void | undefined;
+};
+//# sourceMappingURL=useBuniChat.d.ts.map

package/dist/composables/useBuniChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBuniChat.d.ts","sourceRoot":"","sources":["../../src/composables/useBuniChat.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EACZ,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,eAAe;;;;;;;;;;;8BAQZ,eAAe;;;;;;;4BAyD5B,YAAY;;qCAEH,gBAAgB;;2BAI1B,MAAM;;EAGhC"}

package/dist/composables.d.ts

@@ -0,0 +1,40 @@
+import { Ref } from 'vue';
+import { BuniChatWidget, BuniChatOptions, CustomerData, SessionVariables } from '@buni.ai/chatbot-core';
+export declare function useBuniChat(options: BuniChatOptions): {
+    isOpen: import("vue").ComputedRef<boolean>;
+    isLoaded: import("vue").ComputedRef<boolean>;
+    isMinimized: import("vue").ComputedRef<boolean>;
+    unreadCount: import("vue").ComputedRef<number>;
+    isReady: Ref<boolean, boolean>;
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+    minimize: () => void;
+    maximize: () => void;
+    setCustomerData: (data: CustomerData) => void;
+    setSessionVariables: (variables: SessionVariables) => void;
+    sendMessage: (message: string) => void;
+    widget: BuniChatWidget;
+};
+export declare function useWidgetEvents(widget: Ref<BuniChatWidget | null>): {
+    on: (event: string, callback: Function) => void;
+    off: (event: string, callback?: Function) => void;
+};
+export declare function useCustomerData(widget: Ref<BuniChatWidget | null>): {
+    customerData: Ref<{
+        name?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        userId?: string | undefined;
+        customAttributes?: Record<string, any> | undefined;
+    } | null, CustomerData | {
+        name?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        userId?: string | undefined;
+        customAttributes?: Record<string, any> | undefined;
+    } | null>;
+    setCustomerData: (data: CustomerData) => void;
+    getCustomerData: () => CustomerData | null;
+};
+//# sourceMappingURL=composables.d.ts.map

package/dist/composables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables.d.ts","sourceRoot":"","sources":["../src/composables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAyC,GAAG,EAAE,MAAM,KAAK,CAAC;AACjE,OAAO,EACL,cAAc,EACd,eAAe,EAEf,YAAY,EACZ,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAG/B,wBAAgB,WAAW,CAAC,OAAO,EAAE,eAAe;;;;;;;;;;;4BAwCnB,YAAY;qCAIH,gBAAgB;2BAI1B,MAAM;;EAyBrC;AAGD,wBAAgB,eAAe,CAAC,MAAM,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC7C,MAAM,YAAY,QAAQ;iBAIzB,MAAM,aAAa,QAAQ;EAKhD;AAGD,wBAAgB,eAAe,CAAC,MAAM,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC;;;;;;;;;;;;;;4BAGjC,YAAY;;EA4B5C"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { useBuniChat } from './composables/useBuniChat';
+export declare const BuniChatWidget: import("vue").DefineComponent<{}, {}, any>;
+import type { App } from 'vue';
+export declare const BuniChatPlugin: {
+    install(app: App): void;
+};
+export type { BuniChatConfig, BuniChatOptions, BuniChatState, CustomerData, SessionVariables, BuniChatAPI, BuniChatEvents } from '@buni.ai/chatbot-core';
+export { BuniChatWidget as BuniChatWidgetCore, createBuniChatWidget } from '@buni.ai/chatbot-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIxD,eAAO,MAAM,cAAc,4CAA0B,CAAC;AAGtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,eAAO,MAAM,cAAc;iBACZ,GAAG;CAGjB,CAAC;AAGF,YAAY,EACV,cAAc,EACd,eAAe,EACf,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,116 @@
+import { reactive, ref, defineComponent, onMounted, onUnmounted, openBlock, createElementBlock } from 'vue';
+import { BuniChatWidget as BuniChatWidget$1 } from '@buni.ai/chatbot-core';
+export { BuniChatWidget as BuniChatWidgetCore, createBuniChatWidget } from '@buni.ai/chatbot-core';
+
+let widgetInstance = null;
+function useBuniChat(options) {
+    const state = reactive({
+        isOpen: false,
+        isLoaded: false,
+        isMinimized: false,
+        unreadCount: 0,
+    });
+    const initialize = async (initOptions) => {
+        if (!widgetInstance) {
+            widgetInstance = new BuniChatWidget$1();
+            // Set up event listeners to update reactive state
+            widgetInstance.on('visibility_changed', (data) => {
+                state.isOpen = data.visibility === 'visible';
+            });
+            widgetInstance.on('ready', () => {
+                state.isLoaded = true;
+            });
+            widgetInstance.on('minimized', () => {
+                state.isMinimized = true;
+            });
+            widgetInstance.on('maximized', () => {
+                state.isMinimized = false;
+            });
+            widgetInstance.on('new_message', (data) => {
+                if (data.isFromBot) {
+                    state.unreadCount++;
+                }
+            });
+        }
+        await widgetInstance.initialize(initOptions);
+    };
+    // Auto-initialize if options provided
+    if (options) {
+        initialize(options);
+    }
+    return {
+        // Reactive state
+        state,
+        isOpen: ref(state.isOpen),
+        isLoaded: ref(state.isLoaded),
+        isMinimized: ref(state.isMinimized),
+        unreadCount: ref(state.unreadCount),
+        // Methods
+        initialize,
+        show: () => widgetInstance?.show(),
+        hide: () => widgetInstance?.hide(),
+        toggle: () => widgetInstance?.toggle(),
+        minimize: () => widgetInstance?.minimize(),
+        maximize: () => widgetInstance?.maximize(),
+        destroy: () => {
+            widgetInstance?.destroy();
+            widgetInstance = null;
+        },
+        // Data management
+        setCustomerData: (data) => widgetInstance?.setCustomerData(data),
+        getCustomerData: () => widgetInstance?.getCustomerData(),
+        setSessionVariables: (variables) => widgetInstance?.setSessionVariables(variables),
+        getSessionVariables: () => widgetInstance?.getSessionVariables(),
+        // Chat actions
+        sendMessage: (message) => widgetInstance?.sendMessage(message),
+        clearChat: () => widgetInstance?.clearChat(),
+    };
+}
+
+const _hoisted_1 = { id: "buni-chat-widget-container" };
+var script = /*@__PURE__*/ defineComponent({
+    __name: 'BuniChatWidget',
+    props: {
+        token: { type: String, required: false, default: '' },
+        config: { type: null, required: false, default: () => ({}) },
+        onReady: { type: null, required: false },
+        onNewMessage: { type: null, required: false },
+        onVisibilityChanged: { type: null, required: false },
+        onError: { type: null, required: false }
+    },
+    setup(__props) {
+        const props = __props;
+        const { initialize, destroy } = useBuniChat();
+        onMounted(async () => {
+            if (props.token) {
+                await initialize({
+                    token: props.token,
+                    config: props.config,
+                    onReady: props.onReady,
+                    onNewMessage: props.onNewMessage,
+                    onVisibilityChanged: props.onVisibilityChanged,
+                    onError: props.onError,
+                });
+            }
+        });
+        onUnmounted(() => {
+            destroy();
+        });
+        return (_ctx, _cache) => {
+            return (openBlock(), createElementBlock("div", _hoisted_1));
+        };
+    }
+});
+
+script.__file = "src/components/BuniChatWidget.vue";
+
+// Main exports for @buni.ai/chatbot-vue
+const BuniChatWidget = script;
+const BuniChatPlugin = {
+    install(app) {
+        app.component('BuniChatWidget', script);
+    }
+};
+
+export { BuniChatPlugin, BuniChatWidget, useBuniChat };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/composables/useBuniChat.ts","../src/components/BuniChatWidget.vue","../src/index.ts"],"sourcesContent":["import { ref, reactive } from 'vue';\nimport { BuniChatWidget } from '@buni.ai/chatbot-core';\nimport type { \n  BuniChatOptions, \n  BuniChatState, \n  CustomerData, \n  SessionVariables \n} from '@buni.ai/chatbot-core';\n\nlet widgetInstance: BuniChatWidget | null = null;\n\nexport function useBuniChat(options?: BuniChatOptions) {\n  const state = reactive<BuniChatState>({\n    isOpen: false,\n    isLoaded: false,\n    isMinimized: false,\n    unreadCount: 0,\n  });\n\n  const initialize = async (initOptions: BuniChatOptions) => {\n    if (!widgetInstance) {\n      widgetInstance = new BuniChatWidget();\n      \n      // Set up event listeners to update reactive state\n      widgetInstance.on('visibility_changed', (data: any) => {\n        state.isOpen = data.visibility === 'visible';\n      });\n      \n      widgetInstance.on('ready', () => {\n        state.isLoaded = true;\n      });\n      \n      widgetInstance.on('minimized', () => {\n        state.isMinimized = true;\n      });\n      \n      widgetInstance.on('maximized', () => {\n        state.isMinimized = false;\n      });\n      \n      widgetInstance.on('new_message', (data: any) => {\n        if (data.isFromBot) {\n          state.unreadCount++;\n        }\n      });\n    }\n    \n    await widgetInstance.initialize(initOptions);\n  };\n\n  // Auto-initialize if options provided\n  if (options) {\n    initialize(options);\n  }\n\n  return {\n    // Reactive state\n    state,\n    isOpen: ref(state.isOpen),\n    isLoaded: ref(state.isLoaded),\n    isMinimized: ref(state.isMinimized),\n    unreadCount: ref(state.unreadCount),\n    \n    // Methods\n    initialize,\n    show: () => widgetInstance?.show(),\n    hide: () => widgetInstance?.hide(),\n    toggle: () => widgetInstance?.toggle(),\n    minimize: () => widgetInstance?.minimize(),\n    maximize: () => widgetInstance?.maximize(),\n    destroy: () => {\n      widgetInstance?.destroy();\n      widgetInstance = null;\n    },\n    \n    // Data management\n    setCustomerData: (data: CustomerData) => widgetInstance?.setCustomerData(data),\n    getCustomerData: () => widgetInstance?.getCustomerData(),\n    setSessionVariables: (variables: SessionVariables) => widgetInstance?.setSessionVariables(variables),\n    getSessionVariables: () => widgetInstance?.getSessionVariables(),\n    \n    // Chat actions\n    sendMessage: (message: string) => widgetInstance?.sendMessage(message),\n    clearChat: () => widgetInstance?.clearChat(),\n  };\n}","<template>\n  <div id=\"buni-chat-widget-container\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue';\nimport { useBuniChat } from '../composables/useBuniChat';\nimport type { BuniChatOptions } from '@buni.ai/chatbot-core';\n\ninterface Props {\n  token?: string;\n  config?: BuniChatOptions['config'];\n  onReady?: BuniChatOptions['onReady'];\n  onNewMessage?: BuniChatOptions['onNewMessage'];\n  onVisibilityChanged?: BuniChatOptions['onVisibilityChanged'];\n  onError?: BuniChatOptions['onError'];\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  token: '',\n  config: () => ({})\n});\n\nconst { initialize, destroy } = useBuniChat();\n\nonMounted(async () => {\n  if (props.token) {\n    await initialize({\n      token: props.token,\n      config: props.config,\n      onReady: props.onReady,\n      onNewMessage: props.onNewMessage,\n      onVisibilityChanged: props.onVisibilityChanged,\n      onError: props.onError,\n    });\n  }\n});\n\nonUnmounted(() => {\n  destroy();\n});\n</script>","// Main exports for @buni.ai/chatbot-vue\n\nexport { useBuniChat } from './composables/useBuniChat';\n\n// Export Vue component\nimport BuniChatWidgetComponent from './components/BuniChatWidget.vue';\nexport const BuniChatWidget = BuniChatWidgetComponent;\n\n// Create a Vue plugin for easy installation\nimport type { App } from 'vue';\n\nexport const BuniChatPlugin = {\n  install(app: App) {\n    app.component('BuniChatWidget', BuniChatWidgetComponent);\n  }\n};\n\n// Re-export core types for convenience\nexport type {\n  BuniChatConfig,\n  BuniChatOptions,\n  BuniChatState,\n  CustomerData,\n  SessionVariables,\n  BuniChatAPI,\n  BuniChatEvents\n} from '@buni.ai/chatbot-core';\n\n// Export core widget class for manual use\nexport { BuniChatWidget as BuniChatWidgetCore, createBuniChatWidget } from '@buni.ai/chatbot-core';\n"],"names":["BuniChatWidget","_openBlock","_createElementBlock","BuniChatWidgetComponent"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var vue = require('vue');
+var chatbotCore = require('@buni.ai/chatbot-core');
+
+let widgetInstance = null;
+function useBuniChat(options) {
+    const state = vue.reactive({
+        isOpen: false,
+        isLoaded: false,
+        isMinimized: false,
+        unreadCount: 0,
+    });
+    const initialize = async (initOptions) => {
+        if (!widgetInstance) {
+            widgetInstance = new chatbotCore.BuniChatWidget();
+            // Set up event listeners to update reactive state
+            widgetInstance.on('visibility_changed', (data) => {
+                state.isOpen = data.visibility === 'visible';
+            });
+            widgetInstance.on('ready', () => {
+                state.isLoaded = true;
+            });
+            widgetInstance.on('minimized', () => {
+                state.isMinimized = true;
+            });
+            widgetInstance.on('maximized', () => {
+                state.isMinimized = false;
+            });
+            widgetInstance.on('new_message', (data) => {
+                if (data.isFromBot) {
+                    state.unreadCount++;
+                }
+            });
+        }
+        await widgetInstance.initialize(initOptions);
+    };
+    // Auto-initialize if options provided
+    if (options) {
+        initialize(options);
+    }
+    return {
+        // Reactive state
+        state,
+        isOpen: vue.ref(state.isOpen),
+        isLoaded: vue.ref(state.isLoaded),
+        isMinimized: vue.ref(state.isMinimized),
+        unreadCount: vue.ref(state.unreadCount),
+        // Methods
+        initialize,
+        show: () => widgetInstance?.show(),
+        hide: () => widgetInstance?.hide(),
+        toggle: () => widgetInstance?.toggle(),
+        minimize: () => widgetInstance?.minimize(),
+        maximize: () => widgetInstance?.maximize(),
+        destroy: () => {
+            widgetInstance?.destroy();
+            widgetInstance = null;
+        },
+        // Data management
+        setCustomerData: (data) => widgetInstance?.setCustomerData(data),
+        getCustomerData: () => widgetInstance?.getCustomerData(),
+        setSessionVariables: (variables) => widgetInstance?.setSessionVariables(variables),
+        getSessionVariables: () => widgetInstance?.getSessionVariables(),
+        // Chat actions
+        sendMessage: (message) => widgetInstance?.sendMessage(message),
+        clearChat: () => widgetInstance?.clearChat(),
+    };
+}
+
+const _hoisted_1 = { id: "buni-chat-widget-container" };
+var script = /*@__PURE__*/ vue.defineComponent({
+    __name: 'BuniChatWidget',
+    props: {
+        token: { type: String, required: false, default: '' },
+        config: { type: null, required: false, default: () => ({}) },
+        onReady: { type: null, required: false },
+        onNewMessage: { type: null, required: false },
+        onVisibilityChanged: { type: null, required: false },
+        onError: { type: null, required: false }
+    },
+    setup(__props) {
+        const props = __props;
+        const { initialize, destroy } = useBuniChat();
+        vue.onMounted(async () => {
+            if (props.token) {
+                await initialize({
+                    token: props.token,
+                    config: props.config,
+                    onReady: props.onReady,
+                    onNewMessage: props.onNewMessage,
+                    onVisibilityChanged: props.onVisibilityChanged,
+                    onError: props.onError,
+                });
+            }
+        });
+        vue.onUnmounted(() => {
+            destroy();
+        });
+        return (_ctx, _cache) => {
+            return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1));
+        };
+    }
+});
+
+script.__file = "src/components/BuniChatWidget.vue";
+
+// Main exports for @buni.ai/chatbot-vue
+const BuniChatWidget = script;
+const BuniChatPlugin = {
+    install(app) {
+        app.component('BuniChatWidget', script);
+    }
+};
+
+Object.defineProperty(exports, 'BuniChatWidgetCore', {
+  enumerable: true,
+  get: function () { return chatbotCore.BuniChatWidget; }
+});
+Object.defineProperty(exports, 'createBuniChatWidget', {
+  enumerable: true,
+  get: function () { return chatbotCore.createBuniChatWidget; }
+});
+exports.BuniChatPlugin = BuniChatPlugin;
+exports.BuniChatWidget = BuniChatWidget;
+exports.useBuniChat = useBuniChat;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/composables/useBuniChat.ts","../src/components/BuniChatWidget.vue","../src/index.ts"],"sourcesContent":["import { ref, reactive } from 'vue';\nimport { BuniChatWidget } from '@buni.ai/chatbot-core';\nimport type { \n  BuniChatOptions, \n  BuniChatState, \n  CustomerData, \n  SessionVariables \n} from '@buni.ai/chatbot-core';\n\nlet widgetInstance: BuniChatWidget | null = null;\n\nexport function useBuniChat(options?: BuniChatOptions) {\n  const state = reactive<BuniChatState>({\n    isOpen: false,\n    isLoaded: false,\n    isMinimized: false,\n    unreadCount: 0,\n  });\n\n  const initialize = async (initOptions: BuniChatOptions) => {\n    if (!widgetInstance) {\n      widgetInstance = new BuniChatWidget();\n      \n      // Set up event listeners to update reactive state\n      widgetInstance.on('visibility_changed', (data: any) => {\n        state.isOpen = data.visibility === 'visible';\n      });\n      \n      widgetInstance.on('ready', () => {\n        state.isLoaded = true;\n      });\n      \n      widgetInstance.on('minimized', () => {\n        state.isMinimized = true;\n      });\n      \n      widgetInstance.on('maximized', () => {\n        state.isMinimized = false;\n      });\n      \n      widgetInstance.on('new_message', (data: any) => {\n        if (data.isFromBot) {\n          state.unreadCount++;\n        }\n      });\n    }\n    \n    await widgetInstance.initialize(initOptions);\n  };\n\n  // Auto-initialize if options provided\n  if (options) {\n    initialize(options);\n  }\n\n  return {\n    // Reactive state\n    state,\n    isOpen: ref(state.isOpen),\n    isLoaded: ref(state.isLoaded),\n    isMinimized: ref(state.isMinimized),\n    unreadCount: ref(state.unreadCount),\n    \n    // Methods\n    initialize,\n    show: () => widgetInstance?.show(),\n    hide: () => widgetInstance?.hide(),\n    toggle: () => widgetInstance?.toggle(),\n    minimize: () => widgetInstance?.minimize(),\n    maximize: () => widgetInstance?.maximize(),\n    destroy: () => {\n      widgetInstance?.destroy();\n      widgetInstance = null;\n    },\n    \n    // Data management\n    setCustomerData: (data: CustomerData) => widgetInstance?.setCustomerData(data),\n    getCustomerData: () => widgetInstance?.getCustomerData(),\n    setSessionVariables: (variables: SessionVariables) => widgetInstance?.setSessionVariables(variables),\n    getSessionVariables: () => widgetInstance?.getSessionVariables(),\n    \n    // Chat actions\n    sendMessage: (message: string) => widgetInstance?.sendMessage(message),\n    clearChat: () => widgetInstance?.clearChat(),\n  };\n}","<template>\n  <div id=\"buni-chat-widget-container\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue';\nimport { useBuniChat } from '../composables/useBuniChat';\nimport type { BuniChatOptions } from '@buni.ai/chatbot-core';\n\ninterface Props {\n  token?: string;\n  config?: BuniChatOptions['config'];\n  onReady?: BuniChatOptions['onReady'];\n  onNewMessage?: BuniChatOptions['onNewMessage'];\n  onVisibilityChanged?: BuniChatOptions['onVisibilityChanged'];\n  onError?: BuniChatOptions['onError'];\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  token: '',\n  config: () => ({})\n});\n\nconst { initialize, destroy } = useBuniChat();\n\nonMounted(async () => {\n  if (props.token) {\n    await initialize({\n      token: props.token,\n      config: props.config,\n      onReady: props.onReady,\n      onNewMessage: props.onNewMessage,\n      onVisibilityChanged: props.onVisibilityChanged,\n      onError: props.onError,\n    });\n  }\n});\n\nonUnmounted(() => {\n  destroy();\n});\n</script>","// Main exports for @buni.ai/chatbot-vue\n\nexport { useBuniChat } from './composables/useBuniChat';\n\n// Export Vue component\nimport BuniChatWidgetComponent from './components/BuniChatWidget.vue';\nexport const BuniChatWidget = BuniChatWidgetComponent;\n\n// Create a Vue plugin for easy installation\nimport type { App } from 'vue';\n\nexport const BuniChatPlugin = {\n  install(app: App) {\n    app.component('BuniChatWidget', BuniChatWidgetComponent);\n  }\n};\n\n// Re-export core types for convenience\nexport type {\n  BuniChatConfig,\n  BuniChatOptions,\n  BuniChatState,\n  CustomerData,\n  SessionVariables,\n  BuniChatAPI,\n  BuniChatEvents\n} from '@buni.ai/chatbot-core';\n\n// Export core widget class for manual use\nexport { BuniChatWidget as BuniChatWidgetCore, createBuniChatWidget } from '@buni.ai/chatbot-core';\n"],"names":["reactive","BuniChatWidget","ref","onMounted","onUnmounted","_openBlock","_createElementBlock","BuniChatWidgetComponent"],"mappings":"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"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@buni.ai/chatbot-vue",
+  "version": "1.0.0",
+  "description": "Vue 3 composables for BuniAI chat widget",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "dev": "rollup -c rollup.config.mjs -w",
+    "test": "vitest",
+    "lint": "eslint src --ext .ts,.vue",
+    "lint:fix": "eslint src --ext .ts,.vue --fix",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "chat",
+    "widget",
+    "buni",
+    "ai",
+    "customer-support",
+    "composable"
+  ],
+  "author": "BuniAI",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "dependencies": {
+    "@buni.ai/chatbot-core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@vue/compiler-sfc": "^3.3.0",
+    "rollup": "^3.20.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.0",
+    "vue": "^3.3.0"
+  }
+}

package/src/components/BuniChatWidget.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="buni-chat-widget-container" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import { useBuniChat } from '../composables/useBuniChat';
+import type { BuniChatOptions } from '@buni.ai/chatbot-core';
+
+interface Props {
+  token?: string;
+  config?: BuniChatOptions['config'];
+  onReady?: BuniChatOptions['onReady'];
+  onNewMessage?: BuniChatOptions['onNewMessage'];
+  onVisibilityChanged?: BuniChatOptions['onVisibilityChanged'];
+  onError?: BuniChatOptions['onError'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  token: '',
+  config: () => ({})
+});
+
+const { initialize, destroy } = useBuniChat();
+
+onMounted(async () => {
+  if (props.token) {
+    await initialize({
+      token: props.token,
+      config: props.config,
+      onReady: props.onReady,
+      onNewMessage: props.onNewMessage,
+      onVisibilityChanged: props.onVisibilityChanged,
+      onError: props.onError,
+    });
+  }
+});
+
+onUnmounted(() => {
+  destroy();
+});
+</script>