Widget v0.1.0

Author: shivam-singhal

bun.lock

@@ -25,5 +25,8 @@
   "author": "Structured Labs",
   "devDependencies": {
     "vite": "^7.0.3"
+  },
+  "dependencies": {
+    "@vapi-ai/web": "^2.3.8"
   }
 }

dist/widget.iife.js

@@ -1,61 +1,17 @@
+import Vapi from '@vapi-ai/web';
+
 export class VapiClient {
   constructor(config) {
     this.config = config;
     this.vapi = null;
     this.isCallActive = false;
     this.eventListeners = new Map();
-    
-    this.loadVapiSDK();
+    this.initVapi();
   }
 
-  async loadVapiSDK() {
-    try {
-      // Load Vapi Web SDK if not already loaded
-      if (typeof window.vapiSDK === 'undefined') {
-        await this.loadScript('https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js');
-      }
-      
-      // Verify Vapi SDK is available
-      if (typeof window.vapiSDK === 'undefined') {
-        throw new Error('Failed to load Vapi SDK');
-      }
-      
-      // Initialize Vapi client
-      this.vapi = window.vapiSDK.run({
-        apiKey: this.config.apiKey,
-        assistant: this.config.assistant, // We'll need to add this to config
-        config: {}
-      });
-
-      this.setupEventListeners();
-    } catch (error) {
-      console.error('Failed to load Vapi SDK:', error);
-      throw new Error('Voice service unavailable. Please try again later.');
-    }
-  }
-
-  loadScript(src) {
-    return new Promise((resolve, reject) => {
-      // Check if script is already loaded
-      const existingScript = document.querySelector(`script[src="${src}"]`);
-      if (existingScript) {
-        resolve();
-        return;
-      }
-
-      const script = document.createElement('script');
-      script.src = src;
-      script.onload = resolve;
-      script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
-      script.ontimeout = () => reject(new Error(`Script load timeout: ${src}`));
-      
-      // Add timeout
-      setTimeout(() => {
-        reject(new Error(`Script load timeout: ${src}`));
-      }, 10000);
-      
-      document.head.appendChild(script);
-    });
+  initVapi() {
+    this.vapi = new Vapi(this.config.apiKey);
+    this.setupEventListeners();
   }
 
   setupEventListeners() {
@@ -112,8 +68,8 @@ export class VapiClient {
     }
 
     try {
-      // Start call using Vapi SDK
-      await this.vapi.start();
+      // Start call using Vapi SDK with assistant ID
+      await this.vapi.start(this.config.assistant);
     } catch (error) {
       console.error('Failed to start Vapi call:', error);
       throw error;
@@ -141,7 +97,6 @@ export class VapiClient {
 
   off(event, callback) {
     if (!this.eventListeners.has(event)) return;
-    
     const listeners = this.eventListeners.get(event);
     const index = listeners.indexOf(callback);
     if (index > -1) {
@@ -151,7 +106,6 @@ export class VapiClient {
 
   emit(event, data) {
     if (!this.eventListeners.has(event)) return;
-    
     this.eventListeners.get(event).forEach(callback => {
       try {
         callback(data);

package.json

@@ -3,14 +3,12 @@ import { VapiClient } from './vapi.js';
 export class BuzzwaldWidget {
   constructor(config = {}) {
     this.config = {
-      apiKey: '',
       vapiKey: '',
-      assistant: '', // Vapi assistant ID
+      assistant: '',
       phoneNumber: '',
       position: 'bottom-right',
       backgroundColor: '#FFFF00',
       iconColor: '#000000',
-      mockMode: false, // Set to true for testing without backend
       ...config
     };
 
@@ -266,6 +264,14 @@ export class BuzzwaldWidget {
           left: 15px;
         }
       }
+
+      /* Hide Vapi's default button */
+      .vapi-support-btn,
+      #vapi-support-btn,
+      [id*="vapi"],
+      [class*="vapi"] {
+        display: none !important;
+      }
     `;
     document.head.appendChild(style);
   }
@@ -287,6 +293,37 @@ export class BuzzwaldWidget {
     // Add widget to DOM
     this.widgetElement.appendChild(this.buttonElement);
     document.body.appendChild(this.widgetElement);
+
+    // Hide any Vapi buttons that might appear
+    this.hideVapiButtons();
+  }
+
+  hideVapiButtons() {
+    // Function to hide Vapi buttons
+    const hideButtons = () => {
+      const vapiButtons = document.querySelectorAll('.vapi-support-btn, #vapi-support-btn, [id*="vapi"], [class*="vapi"]:not([class*="buzzwald"])');
+      vapiButtons.forEach(button => {
+        if (button && !button.closest('.buzzwald-widget')) {
+          button.style.display = 'none';
+        }
+      });
+    };
+
+    // Hide immediately
+    hideButtons();
+
+    // Keep checking for new Vapi buttons
+    const observer = new MutationObserver(() => {
+      hideButtons();
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+
+    // Store observer for cleanup
+    this.vapiButtonObserver = observer;
   }
 
   getPhoneIcon() {
@@ -394,15 +431,11 @@ export class BuzzwaldWidget {
   }
 
   initializeVapi() {
-    if (this.config.mockMode) {
-      this.vapi = this.createMockVapiClient();
-    } else {
-      this.vapi = new VapiClient({
-        apiKey: this.config.vapiKey,
-        assistant: this.config.assistant,
-        phoneNumber: this.config.phoneNumber
-      });
-    }
+    this.vapi = new VapiClient({
+      apiKey: this.config.vapiKey,
+      assistant: this.config.assistant,
+      phoneNumber: this.config.phoneNumber
+    });
 
     // Listen to call state changes
     this.vapi.on('call-start', () => this.updateCallState('connecting'));
@@ -418,62 +451,6 @@ export class BuzzwaldWidget {
     });
   }
 
-  createMockVapiClient() {
-    return {
-      eventListeners: new Map(),
-      
-      async start() {
-        console.log('🎭 Mock: Starting Vapi call');
-        this.emit('call-start');
-        
-        // Simulate call progression
-        setTimeout(() => this.emit('speech-start'), 2000);
-        
-        // Auto-end call after 10 seconds for demo
-        setTimeout(() => {
-          console.log('🎭 Mock: Auto-ending call');
-          this.emit('call-end');
-        }, 10000);
-      },
-
-      stop() {
-        console.log('🎭 Mock: Stopping call');
-        this.emit('call-end');
-      },
-
-      on(event, callback) {
-        if (!this.eventListeners.has(event)) {
-          this.eventListeners.set(event, []);
-        }
-        this.eventListeners.get(event).push(callback);
-      },
-
-      off(event, callback) {
-        if (!this.eventListeners.has(event)) return;
-        const listeners = this.eventListeners.get(event);
-        const index = listeners.indexOf(callback);
-        if (index > -1) {
-          listeners.splice(index, 1);
-        }
-      },
-
-      emit(event, data) {
-        if (!this.eventListeners.has(event)) return;
-        this.eventListeners.get(event).forEach(callback => {
-          try {
-            callback(data);
-          } catch (error) {
-            console.error(`Error in event listener for ${event}:`, error);
-          }
-        });
-      },
-
-      destroy() {
-        this.eventListeners.clear();
-      }
-    };
-  }
-
   updateCallState(state) {
     this.currentCallState = state;
 
@@ -529,6 +506,12 @@ export class BuzzwaldWidget {
         this.retryTimeout = null;
       }
 
+      // Clean up mutation observer
+      if (this.vapiButtonObserver) {
+        this.vapiButtonObserver.disconnect();
+        this.vapiButtonObserver = null;
+      }
+
       this.isInitialized = false;
     } catch (error) {
       console.error('Buzzwald: Error during widget destruction', error);

src/vapi.js

@@ -124,16 +124,15 @@ <h3>Call States:</h3>
         </div>
     </div>
 
+    <!-- Widget script is loaded in dev mode below -->
     <script>
         // Configuration for the widget
         window.BuzzwaldConfig = {
-            vapiKey: 'your-vapi-key-here', // Add your Vapi API key
-            assistant: 'your-assistant-id-here', // Add your Vapi assistant ID
-            phoneNumber: '+1234567890',
+            vapiKey: '', // Add your Vapi API key
+            assistant: '',
             position: 'bottom-right',
             backgroundColor: '#FFFF00',
             iconColor: '#000000',
-            mockMode: true // Enable mock mode for testing without Vapi key
         };
 
         // Display configuration

src/widget.js

@@ -75,15 +75,15 @@ <h2>Testing Instructions</h2>
     <!-- Buzzwald Widget Configuration -->
     <script>
         window.BuzzwaldConfig = {
-            apiKey: 'customer-api-key-here',
-            vapiKey: 'd6a96be9-4c92-46f4-a3ce-df34cdf017e2',
+            vapiKey: '',
+            assistant: '',
             position: 'bottom-right', // optional
             backgroundColor: '#FFFF00', // optional
             iconColor: '#000000' // optional
         };
     </script>
 
-    <!-- Buzzwald Widget Script -->
+    <!-- Buzzwald Widget Script (now includes Vapi SDK, no separate Vapi script needed) -->
     <script src="https://cdn.jsdelivr.net/gh/StructuredLabs/buzzwald-client@latest/dist/widget.iife.js"></script>
 </body>
 </html>