@bubblav/ai-chatbot-vue 1.0.0

package/README.md

@@ -0,0 +1,186 @@
+# @bubblav/ai-chatbot-vue
+
+Vue component for embedding the BubblaV AI chatbot widget in your Vue application.
+
+## Installation
+
+```bash
+npm install @bubblav/ai-chatbot-vue
+# or
+yarn add @bubblav/ai-chatbot-vue
+# or
+pnpm add @bubblav/ai-chatbot-vue
+```
+
+## Usage
+
+### Basic Usage
+
+```vue
+<script setup>
+import { BubblaVWidget } from '@bubblav/ai-chatbot-vue';
+</script>
+
+<template>
+  <BubblaVWidget
+    website-id="your-website-id"
+  />
+</template>
+```
+
+### With Custom Styling
+
+```vue
+<script setup>
+import { BubblaVWidget } from '@bubblav/ai-chatbot-vue';
+</script>
+
+<template>
+  <BubblaVWidget
+    website-id="your-website-id"
+    bubble-color="#3b82f6"
+    bubble-icon-color="#ffffff"
+    desktop-position="bottom-right"
+    mobile-position="bottom-right"
+  />
+</template>
+```
+
+### With Template Ref for SDK Access
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { BubblaVWidget } from '@bubblav/ai-chatbot-vue';
+
+const widgetRef = ref(null);
+
+const openWidget = () => {
+  widgetRef.value?.open();
+};
+</script>
+
+<template>
+  <button @click="openWidget">Open Chat</button>
+  <BubblaVWidget
+    ref="widgetRef"
+    website-id="your-website-id"
+  />
+</template>
+```
+
+### Using Composables
+
+```vue
+<script setup>
+import { useBubblaVWidget } from '@bubblav/ai-chatbot-vue';
+
+const widget = useBubblaVWidget();
+
+const handleClick = () => {
+  widget.value?.sendMessage('Hello, I need help!');
+};
+</script>
+
+<template>
+  <button @click="handleClick">Send Message</button>
+</template>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `website-id` | `string` | Yes | - | Your website ID from the BubblaV dashboard |
+| `api-url` | `string` | No | Production API | Custom API URL (for self-hosted deployments) |
+| `bubble-color` | `string` | No | - | Bubble button color (hex) |
+| `bubble-icon-color` | `string` | No | - | Bubble icon color (hex) |
+| `desktop-position` | `'bottom-left' \| 'bottom-right'` | No | `'bottom-right'` | Desktop position |
+| `mobile-position` | `'bottom-left' \| 'bottom-right'` | No | `'bottom-right'` | Mobile position |
+| `powered-by-visible` | `boolean` | No | `true` | Show/hide powered by branding |
+| `bot-name` | `string` | No | `'Bot'` | Custom bot name |
+| `greeting-message` | `string` | No | - | Greeting message when widget opens |
+| `textbox-placeholder` | `string` | No | - | Input placeholder text |
+| `show-action-buttons` | `boolean` | No | `true` | Show/hide action buttons |
+
+## SDK Methods (via Ref)
+
+| Method | Description |
+|--------|-------------|
+| `open()` | Open the widget |
+| `close()` | Close the widget |
+| `toggle()` | Toggle widget open/close |
+| `isOpen()` | Check if widget is open |
+| `sendMessage(text, conversationId?)` | Send a message programmatically |
+| `showGreeting(message?)` | Show greeting message |
+| `hideGreeting()` | Hide greeting message |
+| `getConfig()` | Get current widget configuration |
+| `setDebug(enabled)` | Enable/disable debug mode |
+
+## Composables
+
+### `useBubblaVWidget()`
+
+Returns a ref containing the BubblaV SDK instance when ready, or `null` while loading.
+
+```vue
+<script setup>
+import { useBubblaVWidget } from '@bubblav/ai-chatbot-vue';
+
+const widget = useBubblaVWidget();
+</script>
+```
+
+### `useBubblaVEvent(eventName, callback)`
+
+Listen to widget events.
+
+```vue
+<script setup>
+import { useBubblaVEvent } from '@bubblav/ai-chatbot-vue';
+
+useBubblaVEvent('widget_opened', () => {
+  console.log('Widget opened!');
+});
+</script>
+```
+
+### `useBubblaVWidgetState()`
+
+Get the current open/closed state of the widget as a ref.
+
+```vue
+<script setup>
+import { useBubblaVWidgetState } from '@bubblav/ai-chatbot-vue';
+
+const isOpen = useBubblaVWidgetState();
+</script>
+
+<template>
+  <div v-if="isOpen">Widget is open</div>
+</template>
+```
+
+## Getting Your Website ID
+
+1. Go to [bubblav.com/dashboard](https://www.bubblav.com/dashboard)
+2. Select your website
+3. Go to **Installation**
+4. Copy your website ID
+
+## Server-Side Rendering (SSR)
+
+This component is SSR-safe. The widget script only loads in the browser.
+
+## TypeScript
+
+This package is written in TypeScript and includes full type definitions.
+
+## License
+
+MIT
+
+## Support
+
+- Documentation: [docs.bubblav.com](https://docs.bubblav.com)
+- Issues: [GitHub Issues](https://github.com/tonnguyen/botcanchat/issues)

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),b="https://www.bubblav.com/widget.js";function g(t){const o={};for(const[n,i]of Object.entries(t)){if(i==null)continue;const a="data-"+n.replace(/([A-Z])/g,"-$1").toLowerCase();o[a]=String(i)}return o}function w(t){if(t&&typeof window<"u")try{return new URL(t,window.location.origin).origin+"/widget.js"}catch{return b}return b}function p(t){return typeof t=="string"&&t.length>0&&t.length<100}function v(t){const{websiteId:o,...n}=t;return n}function s(){return typeof window<"u"&&typeof document<"u"}function B(t){if(!s())return!1;const o=document.getElementsByTagName("script");for(let n=0;n<o.length;n++)if(o[n].src===t)return!0;return!1}const I=u.defineComponent({__name:"BubblaVWidget",props:{websiteId:{},apiUrl:{default:void 0},bubbleColor:{default:void 0},bubbleIconColor:{default:void 0},desktopPosition:{default:void 0},mobilePosition:{default:void 0},poweredByVisible:{type:Boolean,default:void 0},botName:{default:void 0},greetingMessage:{default:void 0},textboxPlaceholder:{default:void 0},showActionButtons:{type:Boolean,default:void 0}},setup(t,{expose:o}){const n=t,i=u.ref(!1);let a=null;const r=u.ref(null);function c(){if(!s()||i.value)return;if(!p(n.websiteId)){console.warn(`[BubblaV] Invalid website ID format: "${n.websiteId}". Please check your website ID in the BubblaV dashboard.`);return}const e=w(n.apiUrl);if(B(e)){console.warn("[BubblaV] Widget script already loaded. Only one widget instance should be active."),window.BubblaV&&(r.value=window.BubblaV);return}i.value=!0;const l=document.createElement("script");l.src=e,l.async=!0,l.defer=!0,l.setAttribute("data-site-id",n.websiteId);const m=v(n),V=g(m);for(const[h,y]of Object.entries(V))l.setAttribute(h,y);l.onload=()=>{window.BubblaV&&(r.value=window.BubblaV)},l.onerror=()=>{console.error(`[BubblaV] Failed to load widget script from ${e}. Please check your network connection and ensure the URL is correct.`),i.value=!1},document.body.appendChild(l),a=l}function f(){a&&a.parentNode&&a.parentNode.removeChild(a),a=null,r.value=null,i.value=!1}return o({get open(){var e;return((e=r.value)==null?void 0:e.open)??(()=>!1)},get close(){var e;return((e=r.value)==null?void 0:e.close)??(()=>!1)},get toggle(){var e;return((e=r.value)==null?void 0:e.toggle)??(()=>!1)},get isOpen(){var e;return((e=r.value)==null?void 0:e.isOpen)??(()=>!1)},get sendMessage(){var e;return((e=r.value)==null?void 0:e.sendMessage)??(()=>{})},get showGreeting(){var e;return((e=r.value)==null?void 0:e.showGreeting)??(()=>{})},get hideGreeting(){var e;return((e=r.value)==null?void 0:e.hideGreeting)??(()=>{})},get getConfig(){var e;return((e=r.value)==null?void 0:e.getConfig)??(()=>({}))},get setDebug(){var e;return((e=r.value)==null?void 0:e.setDebug)??(()=>{})}}),u.onMounted(()=>{c()}),u.onUnmounted(()=>{f()}),u.watch(()=>n.websiteId,()=>{f(),c()}),(e,l)=>null}});function W(){const t=u.ref(()=>s()&&window.BubblaV?window.BubblaV:null);let o=null,n=null;return u.onMounted(()=>{t.value||(o=setInterval(()=>{s()&&window.BubblaV&&(t.value=window.BubblaV,o&&clearInterval(o))},100),n=setTimeout(()=>{o&&clearInterval(o)},5e3))}),u.onUnmounted(()=>{o&&clearInterval(o),n&&clearTimeout(n)}),t}function d(t,o){const n=o;u.onMounted(()=>{const i=s()?window.BubblaV:null;i&&i.on(t,n)}),u.onUnmounted(()=>{const i=s()?window.BubblaV:null;i&&i.off(t,n)})}function C(){const t=u.ref(!1);return d("widget_opened",()=>{t.value=!0}),d("widget_closed",()=>{t.value=!1}),t}exports.BubblaVWidget=I;exports.getConfigProps=v;exports.getWidgetScriptUrl=w;exports.isBrowser=s;exports.isScriptLoaded=B;exports.propsToDataAttributes=g;exports.useBubblaVEvent=d;exports.useBubblaVWidget=W;exports.useBubblaVWidgetState=C;exports.validateWebsiteId=p;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/utils.ts","../src/BubblaVWidget.vue","../src/composables.ts"],"sourcesContent":["/**\n * Utility functions for @bubblav/ai-chatbot-vue\n */\n\nimport type { BubblaVWidgetProps } from './types';\n\nconst WIDGET_SCRIPT_URL = 'https://www.bubblav.com/widget.js';\n\n/**\n * Convert camelCase props to data-* attribute names\n */\nexport function propsToDataAttributes(props: Record<string, unknown>): Record<string, string> {\n  const dataAttrs: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (value === undefined || value === null) continue;\n\n    // Convert camelCase to kebab-case for data attributes\n    const dataKey = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();\n    dataAttrs[dataKey] = String(value);\n  }\n\n  return dataAttrs;\n}\n\n/**\n * Get the widget script URL\n */\nexport function getWidgetScriptUrl(apiUrl?: string): string {\n  // If custom API URL provided, derive widget URL from it\n  if (apiUrl && typeof window !== 'undefined') {\n    try {\n      const url = new URL(apiUrl, window.location.origin);\n      // Replace /api/chat with /widget.js\n      return url.origin + '/widget.js';\n    } catch {\n      return WIDGET_SCRIPT_URL;\n    }\n  }\n\n  return WIDGET_SCRIPT_URL;\n}\n\n/**\n * Validate website ID format\n */\nexport function validateWebsiteId(websiteId: string): boolean {\n  // Basic validation: should be a non-empty string\n  // Format varies, so we just check it's a reasonable string\n  return typeof websiteId === 'string' && websiteId.length > 0 && websiteId.length < 100;\n}\n\n/**\n * Filter props to only include widget config (exclude websiteId)\n */\nexport function getConfigProps(props: BubblaVWidgetProps): Omit<BubblaVWidgetProps, 'websiteId'> {\n  const { websiteId: _websiteId, ...configProps } = props;\n  return configProps;\n}\n\n/**\n * Check if we're in a browser environment\n */\nexport function isBrowser(): boolean {\n  return typeof window !== 'undefined' && typeof document !== 'undefined';\n}\n\n/**\n * Check if a widget script is already loaded\n */\nexport function isScriptLoaded(url: string): boolean {\n  if (!isBrowser()) return false;\n\n  const scripts = document.getElementsByTagName('script');\n  for (let i = 0; i < scripts.length; i++) {\n    if (scripts[i].src === url) {\n      return true;\n    }\n  }\n  return false;\n}\n","<script setup lang=\"ts\">\n/**\n * BubblaVWidget Vue Component\n */\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\nimport type { BubblaVWidgetSDK } from './types';\nimport {\n  propsToDataAttributes,\n  getWidgetScriptUrl,\n  validateWebsiteId,\n  getConfigProps,\n  isBrowser,\n  isScriptLoaded,\n} from './utils';\n\n// Props definition\ninterface Props {\n  /** Required: Your website ID from the BubblaV dashboard */\n  websiteId: string;\n\n  /** Optional: Custom API URL (defaults to production) */\n  apiUrl?: string;\n\n  /** Optional: Bubble button color (hex) */\n  bubbleColor?: string;\n\n  /** Optional: Bubble icon color (hex) */\n  bubbleIconColor?: string;\n\n  /** Optional: Desktop position */\n  desktopPosition?: 'bottom-left' | 'bottom-right';\n\n  /** Optional: Mobile position */\n  mobilePosition?: 'bottom-left' | 'bottom-right';\n\n  /** Optional: Show/hide powered by branding */\n  poweredByVisible?: boolean;\n\n  /** Optional: Custom bot name */\n  botName?: string;\n\n  /** Optional: Greeting message shown when widget opens */\n  greetingMessage?: string;\n\n  /** Optional: Placeholder text for input field */\n  textboxPlaceholder?: string;\n\n  /** Optional: Whether to show action buttons */\n  showActionButtons?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  apiUrl: undefined,\n  bubbleColor: undefined,\n  bubbleIconColor: undefined,\n  desktopPosition: undefined,\n  mobilePosition: undefined,\n  poweredByVisible: undefined,\n  botName: undefined,\n  greetingMessage: undefined,\n  textboxPlaceholder: undefined,\n  showActionButtons: undefined,\n});\n\n// Internal state\nconst isInitialized = ref(false);\nlet scriptElement: HTMLScriptElement | null = null;\nconst sdk = ref<BubblaVWidgetSDK | null>(null);\n\n// Initialize widget\nfunction initWidget() {\n  // Skip if not in browser (SSR)\n  if (!isBrowser()) {\n    return;\n  }\n\n  // Prevent double initialization\n  if (isInitialized.value) {\n    return;\n  }\n\n  // Validate website ID\n  if (!validateWebsiteId(props.websiteId)) {\n    console.warn(\n      `[BubblaV] Invalid website ID format: \"${props.websiteId}\". ` +\n      `Please check your website ID in the BubblaV dashboard.`\n    );\n    return;\n  }\n\n  // Get script URL\n  const scriptUrl = getWidgetScriptUrl(props.apiUrl);\n\n  // Check if script is already loaded\n  if (isScriptLoaded(scriptUrl)) {\n    console.warn(\n      `[BubblaV] Widget script already loaded. ` +\n      `Only one widget instance should be active.`\n    );\n    // Use existing SDK\n    if (window.BubblaV) {\n      sdk.value = window.BubblaV;\n    }\n    return;\n  }\n\n  // Mark as initialized\n  isInitialized.value = true;\n\n  // Create script element\n  const script = document.createElement('script');\n  script.src = scriptUrl;\n  script.async = true;\n  script.defer = true;\n\n  // Set data attributes\n  script.setAttribute('data-site-id', props.websiteId);\n\n  // Set optional config as data attributes\n  const config = getConfigProps(props);\n  const dataAttrs = propsToDataAttributes(config);\n  for (const [key, value] of Object.entries(dataAttrs)) {\n    script.setAttribute(key, value);\n  }\n\n  // Handle load event\n  script.onload = () => {\n    // SDK should be available now\n    if (window.BubblaV) {\n      sdk.value = window.BubblaV;\n    }\n  };\n\n  // Handle error event\n  script.onerror = () => {\n    console.error(\n      `[BubblaV] Failed to load widget script from ${scriptUrl}. ` +\n      `Please check your network connection and ensure the URL is correct.`\n    );\n    isInitialized.value = false;\n  };\n\n  // Add script to document\n  document.body.appendChild(script);\n  scriptElement = script;\n}\n\n// Cleanup widget\nfunction cleanupWidget() {\n  if (scriptElement && scriptElement.parentNode) {\n    scriptElement.parentNode.removeChild(scriptElement);\n  }\n  scriptElement = null;\n  sdk.value = null;\n  isInitialized.value = false;\n}\n\n// Expose SDK methods\ndefineExpose({\n  get open() {\n    return sdk.value?.open ?? (() => false);\n  },\n  get close() {\n    return sdk.value?.close ?? (() => false);\n  },\n  get toggle() {\n    return sdk.value?.toggle ?? (() => false);\n  },\n  get isOpen() {\n    return sdk.value?.isOpen ?? (() => false);\n  },\n  get sendMessage() {\n    return sdk.value?.sendMessage ?? (() => {});\n  },\n  get showGreeting() {\n    return sdk.value?.showGreeting ?? (() => {});\n  },\n  get hideGreeting() {\n    return sdk.value?.hideGreeting ?? (() => {});\n  },\n  get getConfig() {\n    return sdk.value?.getConfig ?? (() => ({}));\n  },\n  get setDebug() {\n    return sdk.value?.setDebug ?? (() => {});\n  },\n});\n\n// Initialize on mount\nonMounted(() => {\n  initWidget();\n});\n\n// Cleanup on unmount\nonUnmounted(() => {\n  cleanupWidget();\n});\n\n// Watch for websiteId changes (re-init if changes)\nwatch(() => props.websiteId, () => {\n  cleanupWidget();\n  initWidget();\n});\n</script>\n\n<template>\n  <!-- Component renders nothing (script-only widget) -->\n</template>\n","/**\n * Vue composables for @bubblav/ai-chatbot-vue\n */\n\nimport { ref, onMounted, onUnmounted, type Ref } from 'vue';\nimport type { BubblaVSDK } from './types';\nimport { isBrowser } from './utils';\n\n/**\n * Composable to access the BubblaV SDK programmatically\n * Returns null until the widget is ready\n */\nexport function useBubblaVWidget(): Ref<BubblaVSDK | null> {\n  const sdk = ref<BubblaVSDK | null>(() => {\n    // Check if SDK is already available\n    if (isBrowser() && window.BubblaV) {\n      return window.BubblaV;\n    }\n    return null;\n  });\n\n  let interval: ReturnType<typeof setInterval> | null = null;\n  let timeout: ReturnType<typeof setTimeout> | null = null;\n\n  onMounted(() => {\n    // If SDK already available, no need to set up listener\n    if (sdk.value) return;\n\n    // Poll for SDK availability\n    interval = setInterval(() => {\n      if (isBrowser() && window.BubblaV) {\n        sdk.value = window.BubblaV;\n        if (interval) clearInterval(interval);\n      }\n    }, 100);\n\n    // Cleanup interval after 5 seconds\n    timeout = setTimeout(() => {\n      if (interval) clearInterval(interval);\n    }, 5000);\n  });\n\n  onUnmounted(() => {\n    if (interval) clearInterval(interval);\n    if (timeout) clearTimeout(timeout);\n  });\n\n  return sdk;\n}\n\n/**\n * Composable to listen to widget events\n *\n * @example\n * ```vue\n * <script setup>\n * import { useBubblaVEvent } from '@bubblav/ai-chatbot-vue';\n *\n * useBubblaVEvent('widget_opened', () => {\n *   console.log('Widget opened!');\n * });\n * </script>\n * ```\n */\nexport function useBubblaVEvent(\n  eventName: string,\n  callback: (...args: unknown[]) => void\n): void {\n  const listener = callback;\n\n  onMounted(() => {\n    const sdk = isBrowser() ? window.BubblaV : null;\n    if (!sdk) return;\n\n    sdk.on(eventName, listener);\n  });\n\n  onUnmounted(() => {\n    const sdk = isBrowser() ? window.BubblaV : null;\n    if (!sdk) return;\n\n    sdk.off(eventName, listener);\n  });\n}\n\n/**\n * Composable to get widget open/closed state\n */\nexport function useBubblaVWidgetState(): Ref<boolean> {\n  const isOpen = ref(false);\n\n  useBubblaVEvent('widget_opened', () => {\n    isOpen.value = true;\n  });\n\n  useBubblaVEvent('widget_closed', () => {\n    isOpen.value = false;\n  });\n\n  return isOpen;\n}\n"],"names":["WIDGET_SCRIPT_URL","propsToDataAttributes","props","dataAttrs","key","value","dataKey","getWidgetScriptUrl","apiUrl","validateWebsiteId","websiteId","getConfigProps","_websiteId","configProps","isBrowser","isScriptLoaded","url","scripts","i","__props","isInitialized","ref","scriptElement","sdk","initWidget","scriptUrl","script","config","cleanupWidget","__expose","_a","onMounted","onUnmounted","watch","useBubblaVWidget","interval","timeout","useBubblaVEvent","eventName","callback","listener","useBubblaVWidgetState","isOpen"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,186 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+
+/**
+ * Global window.BubblaV SDK interface
+ */
+export declare interface BubblaVSDK extends BubblaVWidgetSDK {
+    /** Register event listener */
+    on: (event: string, callback: (...args: unknown[]) => void) => void;
+    /** Unregister event listener */
+    off: (event: string, callback: (...args: unknown[]) => void) => void;
+    /** Emit event */
+    emit: (event: string, data?: unknown) => void;
+    /** Ready callback for widget loaded */
+    ready: (callback: () => void) => void;
+    /** Track analytics event */
+    track: (eventName: string, properties?: Record<string, unknown>) => void;
+}
+
+export declare const BubblaVWidget: DefineComponent<Props, {
+open: () => void;
+close: () => void;
+toggle: () => void;
+isOpen: () => boolean;
+sendMessage: (text: string, conversationId?: string) => void;
+showGreeting: (message?: string) => void;
+hideGreeting: () => void;
+getConfig: () => {};
+setDebug: (enabled: boolean) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+apiUrl: string;
+bubbleColor: string;
+bubbleIconColor: string;
+desktopPosition: "bottom-left" | "bottom-right";
+mobilePosition: "bottom-left" | "bottom-right";
+poweredByVisible: boolean;
+botName: string;
+greetingMessage: string;
+textboxPlaceholder: string;
+showActionButtons: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+/**
+ * Props for the BubblaVWidget component
+ */
+export declare interface BubblaVWidgetProps {
+    /** Required: Your website ID from the BubblaV dashboard */
+    websiteId: string;
+    /** Optional: Custom API URL (defaults to production) */
+    apiUrl?: string;
+    /** Optional: Bubble button color (hex) */
+    bubbleColor?: string;
+    /** Optional: Bubble icon color (hex) */
+    bubbleIconColor?: string;
+    /** Optional: Desktop position */
+    desktopPosition?: WidgetPosition;
+    /** Optional: Mobile position */
+    mobilePosition?: WidgetPosition;
+    /** Optional: Show/hide powered by branding */
+    poweredByVisible?: boolean;
+    /** Optional: Custom bot name */
+    botName?: string;
+    /** Optional: Greeting message shown when widget opens */
+    greetingMessage?: string;
+    /** Optional: Placeholder text for input field */
+    textboxPlaceholder?: string;
+    /** Optional: Whether to show action buttons */
+    showActionButtons?: boolean;
+}
+
+/**
+ * SDK methods available via expose
+ */
+export declare interface BubblaVWidgetSDK {
+    /** Open the widget */
+    open: () => void;
+    /** Close the widget */
+    close: () => void;
+    /** Toggle widget open/close state */
+    toggle: () => void;
+    /** Check if widget is currently open */
+    isOpen: () => boolean;
+    /** Send a message programmatically */
+    sendMessage: (text: string, conversationId?: string) => void;
+    /** Show greeting message */
+    showGreeting: (message?: string) => void;
+    /** Hide greeting message */
+    hideGreeting: () => void;
+    /** Get current widget configuration */
+    getConfig: () => Record<string, unknown>;
+    /** Enable or disable debug mode */
+    setDebug: (enabled: boolean) => void;
+}
+
+/**
+ * Filter props to only include widget config (exclude websiteId)
+ */
+export declare function getConfigProps(props: BubblaVWidgetProps): Omit<BubblaVWidgetProps, 'websiteId'>;
+
+/**
+ * Get the widget script URL
+ */
+export declare function getWidgetScriptUrl(apiUrl?: string): string;
+
+/**
+ * Check if we're in a browser environment
+ */
+export declare function isBrowser(): boolean;
+
+/**
+ * Check if a widget script is already loaded
+ */
+export declare function isScriptLoaded(url: string): boolean;
+
+declare interface Props {
+    /** Required: Your website ID from the BubblaV dashboard */
+    websiteId: string;
+    /** Optional: Custom API URL (defaults to production) */
+    apiUrl?: string;
+    /** Optional: Bubble button color (hex) */
+    bubbleColor?: string;
+    /** Optional: Bubble icon color (hex) */
+    bubbleIconColor?: string;
+    /** Optional: Desktop position */
+    desktopPosition?: 'bottom-left' | 'bottom-right';
+    /** Optional: Mobile position */
+    mobilePosition?: 'bottom-left' | 'bottom-right';
+    /** Optional: Show/hide powered by branding */
+    poweredByVisible?: boolean;
+    /** Optional: Custom bot name */
+    botName?: string;
+    /** Optional: Greeting message shown when widget opens */
+    greetingMessage?: string;
+    /** Optional: Placeholder text for input field */
+    textboxPlaceholder?: string;
+    /** Optional: Whether to show action buttons */
+    showActionButtons?: boolean;
+}
+
+/**
+ * Convert camelCase props to data-* attribute names
+ */
+export declare function propsToDataAttributes(props: Record<string, unknown>): Record<string, string>;
+
+/**
+ * Composable to listen to widget events
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useBubblaVEvent } from '@bubblav/ai-chatbot-vue';
+ *
+ * useBubblaVEvent('widget_opened', () => {
+ *   console.log('Widget opened!');
+ * });
+ * </script>
+ * ```
+ */
+export declare function useBubblaVEvent(eventName: string, callback: (...args: unknown[]) => void): void;
+
+/**
+ * Composable to access the BubblaV SDK programmatically
+ * Returns null until the widget is ready
+ */
+export declare function useBubblaVWidget(): Ref<BubblaVSDK | null>;
+
+/**
+ * Composable to get widget open/closed state
+ */
+export declare function useBubblaVWidgetState(): Ref<boolean>;
+
+/**
+ * Validate website ID format
+ */
+export declare function validateWebsiteId(websiteId: string): boolean;
+
+/**
+ * Type definitions for @bubblav/ai-chatbot-vue
+ */
+/** Widget position options */
+declare type WidgetPosition = 'bottom-left' | 'bottom-right';
+
+export { }

package/dist/index.js

@@ -0,0 +1,184 @@
+import { defineComponent as h, ref as s, onMounted as d, onUnmounted as c, watch as V } from "vue";
+const g = "https://www.bubblav.com/widget.js";
+function y(t) {
+  const o = {};
+  for (const [n, i] of Object.entries(t)) {
+    if (i == null) continue;
+    const u = "data-" + n.replace(/([A-Z])/g, "-$1").toLowerCase();
+    o[u] = String(i);
+  }
+  return o;
+}
+function I(t) {
+  if (t && typeof window < "u")
+    try {
+      return new URL(t, window.location.origin).origin + "/widget.js";
+    } catch {
+      return g;
+    }
+  return g;
+}
+function _(t) {
+  return typeof t == "string" && t.length > 0 && t.length < 100;
+}
+function k(t) {
+  const { websiteId: o, ...n } = t;
+  return n;
+}
+function a() {
+  return typeof window < "u" && typeof document < "u";
+}
+function C(t) {
+  if (!a()) return !1;
+  const o = document.getElementsByTagName("script");
+  for (let n = 0; n < o.length; n++)
+    if (o[n].src === t)
+      return !0;
+  return !1;
+}
+const P = /* @__PURE__ */ h({
+  __name: "BubblaVWidget",
+  props: {
+    websiteId: {},
+    apiUrl: { default: void 0 },
+    bubbleColor: { default: void 0 },
+    bubbleIconColor: { default: void 0 },
+    desktopPosition: { default: void 0 },
+    mobilePosition: { default: void 0 },
+    poweredByVisible: { type: Boolean, default: void 0 },
+    botName: { default: void 0 },
+    greetingMessage: { default: void 0 },
+    textboxPlaceholder: { default: void 0 },
+    showActionButtons: { type: Boolean, default: void 0 }
+  },
+  setup(t, { expose: o }) {
+    const n = t, i = s(!1);
+    let u = null;
+    const r = s(null);
+    function f() {
+      if (!a() || i.value)
+        return;
+      if (!_(n.websiteId)) {
+        console.warn(
+          `[BubblaV] Invalid website ID format: "${n.websiteId}". Please check your website ID in the BubblaV dashboard.`
+        );
+        return;
+      }
+      const e = I(n.apiUrl);
+      if (C(e)) {
+        console.warn(
+          "[BubblaV] Widget script already loaded. Only one widget instance should be active."
+        ), window.BubblaV && (r.value = window.BubblaV);
+        return;
+      }
+      i.value = !0;
+      const l = document.createElement("script");
+      l.src = e, l.async = !0, l.defer = !0, l.setAttribute("data-site-id", n.websiteId);
+      const p = k(n), v = y(p);
+      for (const [B, m] of Object.entries(v))
+        l.setAttribute(B, m);
+      l.onload = () => {
+        window.BubblaV && (r.value = window.BubblaV);
+      }, l.onerror = () => {
+        console.error(
+          `[BubblaV] Failed to load widget script from ${e}. Please check your network connection and ensure the URL is correct.`
+        ), i.value = !1;
+      }, document.body.appendChild(l), u = l;
+    }
+    function b() {
+      u && u.parentNode && u.parentNode.removeChild(u), u = null, r.value = null, i.value = !1;
+    }
+    return o({
+      get open() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.open) ?? (() => !1);
+      },
+      get close() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.close) ?? (() => !1);
+      },
+      get toggle() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.toggle) ?? (() => !1);
+      },
+      get isOpen() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.isOpen) ?? (() => !1);
+      },
+      get sendMessage() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.sendMessage) ?? (() => {
+        });
+      },
+      get showGreeting() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.showGreeting) ?? (() => {
+        });
+      },
+      get hideGreeting() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.hideGreeting) ?? (() => {
+        });
+      },
+      get getConfig() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.getConfig) ?? (() => ({}));
+      },
+      get setDebug() {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.setDebug) ?? (() => {
+        });
+      }
+    }), d(() => {
+      f();
+    }), c(() => {
+      b();
+    }), V(() => n.websiteId, () => {
+      b(), f();
+    }), (e, l) => null;
+  }
+});
+function A() {
+  const t = s(() => a() && window.BubblaV ? window.BubblaV : null);
+  let o = null, n = null;
+  return d(() => {
+    t.value || (o = setInterval(() => {
+      a() && window.BubblaV && (t.value = window.BubblaV, o && clearInterval(o));
+    }, 100), n = setTimeout(() => {
+      o && clearInterval(o);
+    }, 5e3));
+  }), c(() => {
+    o && clearInterval(o), n && clearTimeout(n);
+  }), t;
+}
+function w(t, o) {
+  const n = o;
+  d(() => {
+    const i = a() ? window.BubblaV : null;
+    i && i.on(t, n);
+  }), c(() => {
+    const i = a() ? window.BubblaV : null;
+    i && i.off(t, n);
+  });
+}
+function U() {
+  const t = s(!1);
+  return w("widget_opened", () => {
+    t.value = !0;
+  }), w("widget_closed", () => {
+    t.value = !1;
+  }), t;
+}
+export {
+  P as BubblaVWidget,
+  k as getConfigProps,
+  I as getWidgetScriptUrl,
+  a as isBrowser,
+  C as isScriptLoaded,
+  y as propsToDataAttributes,
+  w as useBubblaVEvent,
+  A as useBubblaVWidget,
+  U as useBubblaVWidgetState,
+  _ as validateWebsiteId
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/utils.ts","../src/BubblaVWidget.vue","../src/composables.ts"],"sourcesContent":["/**\n * Utility functions for @bubblav/ai-chatbot-vue\n */\n\nimport type { BubblaVWidgetProps } from './types';\n\nconst WIDGET_SCRIPT_URL = 'https://www.bubblav.com/widget.js';\n\n/**\n * Convert camelCase props to data-* attribute names\n */\nexport function propsToDataAttributes(props: Record<string, unknown>): Record<string, string> {\n  const dataAttrs: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (value === undefined || value === null) continue;\n\n    // Convert camelCase to kebab-case for data attributes\n    const dataKey = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();\n    dataAttrs[dataKey] = String(value);\n  }\n\n  return dataAttrs;\n}\n\n/**\n * Get the widget script URL\n */\nexport function getWidgetScriptUrl(apiUrl?: string): string {\n  // If custom API URL provided, derive widget URL from it\n  if (apiUrl && typeof window !== 'undefined') {\n    try {\n      const url = new URL(apiUrl, window.location.origin);\n      // Replace /api/chat with /widget.js\n      return url.origin + '/widget.js';\n    } catch {\n      return WIDGET_SCRIPT_URL;\n    }\n  }\n\n  return WIDGET_SCRIPT_URL;\n}\n\n/**\n * Validate website ID format\n */\nexport function validateWebsiteId(websiteId: string): boolean {\n  // Basic validation: should be a non-empty string\n  // Format varies, so we just check it's a reasonable string\n  return typeof websiteId === 'string' && websiteId.length > 0 && websiteId.length < 100;\n}\n\n/**\n * Filter props to only include widget config (exclude websiteId)\n */\nexport function getConfigProps(props: BubblaVWidgetProps): Omit<BubblaVWidgetProps, 'websiteId'> {\n  const { websiteId: _websiteId, ...configProps } = props;\n  return configProps;\n}\n\n/**\n * Check if we're in a browser environment\n */\nexport function isBrowser(): boolean {\n  return typeof window !== 'undefined' && typeof document !== 'undefined';\n}\n\n/**\n * Check if a widget script is already loaded\n */\nexport function isScriptLoaded(url: string): boolean {\n  if (!isBrowser()) return false;\n\n  const scripts = document.getElementsByTagName('script');\n  for (let i = 0; i < scripts.length; i++) {\n    if (scripts[i].src === url) {\n      return true;\n    }\n  }\n  return false;\n}\n","<script setup lang=\"ts\">\n/**\n * BubblaVWidget Vue Component\n */\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\nimport type { BubblaVWidgetSDK } from './types';\nimport {\n  propsToDataAttributes,\n  getWidgetScriptUrl,\n  validateWebsiteId,\n  getConfigProps,\n  isBrowser,\n  isScriptLoaded,\n} from './utils';\n\n// Props definition\ninterface Props {\n  /** Required: Your website ID from the BubblaV dashboard */\n  websiteId: string;\n\n  /** Optional: Custom API URL (defaults to production) */\n  apiUrl?: string;\n\n  /** Optional: Bubble button color (hex) */\n  bubbleColor?: string;\n\n  /** Optional: Bubble icon color (hex) */\n  bubbleIconColor?: string;\n\n  /** Optional: Desktop position */\n  desktopPosition?: 'bottom-left' | 'bottom-right';\n\n  /** Optional: Mobile position */\n  mobilePosition?: 'bottom-left' | 'bottom-right';\n\n  /** Optional: Show/hide powered by branding */\n  poweredByVisible?: boolean;\n\n  /** Optional: Custom bot name */\n  botName?: string;\n\n  /** Optional: Greeting message shown when widget opens */\n  greetingMessage?: string;\n\n  /** Optional: Placeholder text for input field */\n  textboxPlaceholder?: string;\n\n  /** Optional: Whether to show action buttons */\n  showActionButtons?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  apiUrl: undefined,\n  bubbleColor: undefined,\n  bubbleIconColor: undefined,\n  desktopPosition: undefined,\n  mobilePosition: undefined,\n  poweredByVisible: undefined,\n  botName: undefined,\n  greetingMessage: undefined,\n  textboxPlaceholder: undefined,\n  showActionButtons: undefined,\n});\n\n// Internal state\nconst isInitialized = ref(false);\nlet scriptElement: HTMLScriptElement | null = null;\nconst sdk = ref<BubblaVWidgetSDK | null>(null);\n\n// Initialize widget\nfunction initWidget() {\n  // Skip if not in browser (SSR)\n  if (!isBrowser()) {\n    return;\n  }\n\n  // Prevent double initialization\n  if (isInitialized.value) {\n    return;\n  }\n\n  // Validate website ID\n  if (!validateWebsiteId(props.websiteId)) {\n    console.warn(\n      `[BubblaV] Invalid website ID format: \"${props.websiteId}\". ` +\n      `Please check your website ID in the BubblaV dashboard.`\n    );\n    return;\n  }\n\n  // Get script URL\n  const scriptUrl = getWidgetScriptUrl(props.apiUrl);\n\n  // Check if script is already loaded\n  if (isScriptLoaded(scriptUrl)) {\n    console.warn(\n      `[BubblaV] Widget script already loaded. ` +\n      `Only one widget instance should be active.`\n    );\n    // Use existing SDK\n    if (window.BubblaV) {\n      sdk.value = window.BubblaV;\n    }\n    return;\n  }\n\n  // Mark as initialized\n  isInitialized.value = true;\n\n  // Create script element\n  const script = document.createElement('script');\n  script.src = scriptUrl;\n  script.async = true;\n  script.defer = true;\n\n  // Set data attributes\n  script.setAttribute('data-site-id', props.websiteId);\n\n  // Set optional config as data attributes\n  const config = getConfigProps(props);\n  const dataAttrs = propsToDataAttributes(config);\n  for (const [key, value] of Object.entries(dataAttrs)) {\n    script.setAttribute(key, value);\n  }\n\n  // Handle load event\n  script.onload = () => {\n    // SDK should be available now\n    if (window.BubblaV) {\n      sdk.value = window.BubblaV;\n    }\n  };\n\n  // Handle error event\n  script.onerror = () => {\n    console.error(\n      `[BubblaV] Failed to load widget script from ${scriptUrl}. ` +\n      `Please check your network connection and ensure the URL is correct.`\n    );\n    isInitialized.value = false;\n  };\n\n  // Add script to document\n  document.body.appendChild(script);\n  scriptElement = script;\n}\n\n// Cleanup widget\nfunction cleanupWidget() {\n  if (scriptElement && scriptElement.parentNode) {\n    scriptElement.parentNode.removeChild(scriptElement);\n  }\n  scriptElement = null;\n  sdk.value = null;\n  isInitialized.value = false;\n}\n\n// Expose SDK methods\ndefineExpose({\n  get open() {\n    return sdk.value?.open ?? (() => false);\n  },\n  get close() {\n    return sdk.value?.close ?? (() => false);\n  },\n  get toggle() {\n    return sdk.value?.toggle ?? (() => false);\n  },\n  get isOpen() {\n    return sdk.value?.isOpen ?? (() => false);\n  },\n  get sendMessage() {\n    return sdk.value?.sendMessage ?? (() => {});\n  },\n  get showGreeting() {\n    return sdk.value?.showGreeting ?? (() => {});\n  },\n  get hideGreeting() {\n    return sdk.value?.hideGreeting ?? (() => {});\n  },\n  get getConfig() {\n    return sdk.value?.getConfig ?? (() => ({}));\n  },\n  get setDebug() {\n    return sdk.value?.setDebug ?? (() => {});\n  },\n});\n\n// Initialize on mount\nonMounted(() => {\n  initWidget();\n});\n\n// Cleanup on unmount\nonUnmounted(() => {\n  cleanupWidget();\n});\n\n// Watch for websiteId changes (re-init if changes)\nwatch(() => props.websiteId, () => {\n  cleanupWidget();\n  initWidget();\n});\n</script>\n\n<template>\n  <!-- Component renders nothing (script-only widget) -->\n</template>\n","/**\n * Vue composables for @bubblav/ai-chatbot-vue\n */\n\nimport { ref, onMounted, onUnmounted, type Ref } from 'vue';\nimport type { BubblaVSDK } from './types';\nimport { isBrowser } from './utils';\n\n/**\n * Composable to access the BubblaV SDK programmatically\n * Returns null until the widget is ready\n */\nexport function useBubblaVWidget(): Ref<BubblaVSDK | null> {\n  const sdk = ref<BubblaVSDK | null>(() => {\n    // Check if SDK is already available\n    if (isBrowser() && window.BubblaV) {\n      return window.BubblaV;\n    }\n    return null;\n  });\n\n  let interval: ReturnType<typeof setInterval> | null = null;\n  let timeout: ReturnType<typeof setTimeout> | null = null;\n\n  onMounted(() => {\n    // If SDK already available, no need to set up listener\n    if (sdk.value) return;\n\n    // Poll for SDK availability\n    interval = setInterval(() => {\n      if (isBrowser() && window.BubblaV) {\n        sdk.value = window.BubblaV;\n        if (interval) clearInterval(interval);\n      }\n    }, 100);\n\n    // Cleanup interval after 5 seconds\n    timeout = setTimeout(() => {\n      if (interval) clearInterval(interval);\n    }, 5000);\n  });\n\n  onUnmounted(() => {\n    if (interval) clearInterval(interval);\n    if (timeout) clearTimeout(timeout);\n  });\n\n  return sdk;\n}\n\n/**\n * Composable to listen to widget events\n *\n * @example\n * ```vue\n * <script setup>\n * import { useBubblaVEvent } from '@bubblav/ai-chatbot-vue';\n *\n * useBubblaVEvent('widget_opened', () => {\n *   console.log('Widget opened!');\n * });\n * </script>\n * ```\n */\nexport function useBubblaVEvent(\n  eventName: string,\n  callback: (...args: unknown[]) => void\n): void {\n  const listener = callback;\n\n  onMounted(() => {\n    const sdk = isBrowser() ? window.BubblaV : null;\n    if (!sdk) return;\n\n    sdk.on(eventName, listener);\n  });\n\n  onUnmounted(() => {\n    const sdk = isBrowser() ? window.BubblaV : null;\n    if (!sdk) return;\n\n    sdk.off(eventName, listener);\n  });\n}\n\n/**\n * Composable to get widget open/closed state\n */\nexport function useBubblaVWidgetState(): Ref<boolean> {\n  const isOpen = ref(false);\n\n  useBubblaVEvent('widget_opened', () => {\n    isOpen.value = true;\n  });\n\n  useBubblaVEvent('widget_closed', () => {\n    isOpen.value = false;\n  });\n\n  return isOpen;\n}\n"],"names":["WIDGET_SCRIPT_URL","propsToDataAttributes","props","dataAttrs","key","value","dataKey","getWidgetScriptUrl","apiUrl","validateWebsiteId","websiteId","getConfigProps","_websiteId","configProps","isBrowser","isScriptLoaded","url","scripts","i","__props","isInitialized","ref","scriptElement","sdk","initWidget","scriptUrl","script","config","cleanupWidget","__expose","_a","onMounted","onUnmounted","watch","useBubblaVWidget","interval","timeout","useBubblaVEvent","eventName","callback","listener","useBubblaVWidgetState","isOpen"],"mappings":"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"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@bubblav/ai-chatbot-vue",
+  "version": "1.0.0",
+  "description": "Vue component for embedding the BubblaV AI chatbot widget",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "dev": "vite build --watch",
+    "prepublishOnly": "npm run build",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "keywords": [
+    "bubblav",
+    "chatbot",
+    "ai",
+    "widget",
+    "vue",
+    "vue3",
+    "vue-component"
+  ],
+  "author": "BubblaV",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tonnguyen/botcanchat.git",
+    "directory": "packages/ai-chatbot-vue"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/compiler-sfc": "^3.5.13",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}