ttp-agent-sdk 2.1.11 → 2.1.13

package/dist/audio-processor.js

@@ -1 +1 @@
-class AudioProcessor extends AudioWorkletProcessor{constructor(e){super(),this.config=e.processorOptions||{},this.sampleRate=this.config.sampleRate||16e3,this.bufferSize=128,this.buffer=new Float32Array(this.bufferSize),this.bufferIndex=0,this.silenceThreshold=.005,this.minVoiceDuration=100,this.pauseThreshold=3e3,this.isVoiceActive=!1,this.voiceStartTime=0,this.lastVoiceTime=0,this.consecutiveSilenceFrames=0,this.silenceFramesThreshold=5,this.frameCount=0,this.lastLogTime=0,this.continuousMode=!0,this.forceContinuous=!0,this.isCurrentlyStreaming=!1,this.sendBuffer=null,this.sendBufferBytes=0,console.log("🎤 AudioProcessor: Initialized with sample rate:",this.sampleRate),console.log("🎤 AudioProcessor: Buffer size:",this.bufferSize),console.log("🎤 AudioProcessor: Force continuous mode:",this.forceContinuous),this.port.onmessage=e=>{const{type:s,data:t}=e.data;switch(console.log("🎤 AudioProcessor: Received message:",s,t),s){case"start":this.isProcessing=!0,this.isCurrentlyStreaming=!0,console.log("🎤 AudioProcessor: Started processing");break;case"stop":this.isProcessing=!1,this.isCurrentlyStreaming=!1,this.isVoiceActive=!1,this.forceContinuous=!1,this.flushBuffer(),console.log("🎤 AudioProcessor: Stopped processing and flushed buffer");break;case"setForceContinuous":this.forceContinuous=t.enabled,this.isProcessing=!0,this.isCurrentlyStreaming=!0,console.log("🎤 AudioProcessor: Enabled continuous mode");break;case"flush":this.flushBuffer(),console.log("🎤 AudioProcessor: Flushing buffer");break;case"config":Object.assign(this.config,t),console.log("🎤 AudioProcessor: Updated config:",this.config)}}}process(e,s,t){const i=e[0],o=s[0];return i.length>0&&o.length>0&&o[0].set(i[0]),i.length>0&&i[0].length>0&&this.processAudioData(i[0]),!0}processAudioData(e){this.frameCount++;for(let s=0;s<e.length;s+=this.bufferSize){const t=Math.min(this.bufferSize,e.length-s);for(let i=0;i<t;i++)this.buffer[i]=e[s+i];for(let e=t;e<this.bufferSize;e++)this.buffer[e]=0;let i=0;for(let e=0;e<this.bufferSize;e++)i+=this.buffer[e]*this.buffer[e];const o=Math.sqrt(i/this.bufferSize);let r=0,n=0;for(let e=1;e<this.bufferSize;e++){const s=Math.abs(this.buffer[e]-this.buffer[e-1]);r+=s,s>.1&&n++}r/=this.bufferSize,this.bufferSize;const h=Date.now();let c=o>this.silenceThreshold;if(h-this.lastLogTime>2e3){const e=c?"VOICE":"SILENCE";console.log(`🎤 AudioProcessor: RMS: ${o.toFixed(4)}, Threshold: ${this.silenceThreshold}, Status: ${e}, Streaming: ${this.isCurrentlyStreaming}, ForceContinuous: ${this.forceContinuous}, VoiceActive: ${this.isVoiceActive}`),this.lastLogTime=h}const f=h-this.lastVoiceTime;this.forceContinuous||c?(this.consecutiveSilenceFrames=0,this.isVoiceActive||(this.isVoiceActive=!0,this.voiceStartTime=h,this.isCurrentlyStreaming=!0,console.log(`🗣️ Voice detected (RMS: ${o.toFixed(4)})`)),this.lastVoiceTime=h):this.consecutiveSilenceFrames++,!this.forceContinuous&&!c&&this.isVoiceActive&&f>=200&&(this.isVoiceActive=!1,this.isCurrentlyStreaming=!1,console.log(`⏸️ AudioProcessor: Silence detected, stopping streaming (${f.toFixed(0)}ms silence)`),this.voiceStartTime=0,this.lastVoiceTime=0,this.consecutiveSilenceFrames=0),this.isCurrentlyStreaming&&this.isProcessing&&this.sendPCMAudioData(this.buffer)}}sendPCMAudioData(e){const s=new Int16Array(e.length);for(let t=0;t<e.length;t++){const i=Math.max(-1,Math.min(1,e[t]));s[t]=Math.round(32767*i)}for(this.sendBuffer||(this.sendBuffer=[],this.sendBufferBytes=0),this.sendBuffer.push(s),this.sendBufferBytes+=s.byteLength;this.sendBufferBytes>=4096;){let e=0,s=0;for(let t=0;t<this.sendBuffer.length;t++){const i=this.sendBuffer[t].byteLength;if(!(s+i<=4096))break;e++,s+=i}const t=this.sendBuffer.slice(0,e),i=t.reduce((e,s)=>e+s.length,0),o=new Int16Array(i);let r=0;for(const e of t)o.set(e,r),r+=e.length;Math.random()<.01&&console.log(`🎤 AudioProcessor: Sending PCM batch - ${o.byteLength} bytes (${e} chunks)`),this.port.postMessage({type:"pcm_audio_data",data:o,sampleRate:this.sampleRate,channelCount:1,frameCount:this.frameCount,batchSize:e,totalBytes:o.byteLength}),this.sendBuffer=this.sendBuffer.slice(e),this.sendBufferBytes-=s}}flushBuffer(){if(this.sendBuffer&&this.sendBuffer.length>0){const e=this.sendBuffer.reduce((e,s)=>e+s.length,0),s=new Int16Array(e);let t=0;for(const e of this.sendBuffer)s.set(e,t),t+=e.length;this.port.postMessage({type:"pcm_audio_data",data:s,sampleRate:this.sampleRate,channelCount:1,frameCount:this.frameCount,batchSize:this.sendBuffer.length,totalBytes:s.byteLength,isFlush:!0}),this.sendBuffer=[],this.sendBufferBytes=0}}}registerProcessor("audio-processor",AudioProcessor);
+class AudioProcessor extends AudioWorkletProcessor{constructor(e){super(),this.config=e.processorOptions||{},this.sampleRate=this.config.sampleRate||16e3,this.bufferSize=128,this.buffer=new Float32Array(this.bufferSize),this.bufferIndex=0,this.silenceThreshold=.01,this.minVoiceDuration=100,this.pauseThreshold=3e3,this.isVoiceActive=!1,this.voiceStartTime=0,this.lastVoiceTime=0,this.consecutiveSilenceFrames=0,this.silenceFramesThreshold=5,this.frameCount=0,this.lastLogTime=0,this.continuousMode=!0,this.forceContinuous=!0,this.isCurrentlyStreaming=!1,this.sendBuffer=null,this.sendBufferBytes=0,this.port.onmessage=e=>{const{type:t,data:s}=e.data;switch(t){case"start":this.isProcessing=!0,this.isCurrentlyStreaming=!0;break;case"stop":this.isProcessing=!1,this.isCurrentlyStreaming=!1,this.isVoiceActive=!1,this.forceContinuous=!1,this.flushBuffer();break;case"setForceContinuous":this.forceContinuous=s.enabled,this.isProcessing=!0,this.isCurrentlyStreaming=!0;break;case"flush":this.flushBuffer();break;case"config":Object.assign(this.config,s)}}}process(e,t,s){const i=e[0],r=t[0];return i.length>0&&r.length>0&&r[0].set(i[0]),i.length>0&&i[0].length>0&&this.processAudioData(i[0]),!0}processAudioData(e){this.frameCount++;for(let t=0;t<e.length;t+=this.bufferSize){const s=Math.min(this.bufferSize,e.length-t);for(let i=0;i<s;i++)this.buffer[i]=e[t+i];for(let e=s;e<this.bufferSize;e++)this.buffer[e]=0;let i=0;for(let e=0;e<this.bufferSize;e++)i+=this.buffer[e]*this.buffer[e];const r=Math.sqrt(i/this.bufferSize);let h=0,n=0;for(let e=1;e<this.bufferSize;e++){const t=Math.abs(this.buffer[e]-this.buffer[e-1]);h+=t,t>.1&&n++}h/=this.bufferSize,this.bufferSize;const o=Date.now();let f=r>this.silenceThreshold;const a=o-this.lastVoiceTime;if(f)this.consecutiveSilenceFrames=0,this.isVoiceActive||(this.isVoiceActive=!0,this.voiceStartTime=o,this.isCurrentlyStreaming=!0),this.lastVoiceTime=o;else{this.consecutiveSilenceFrames++;const e=this.forceContinuous?1500:200;!f&&this.isVoiceActive&&a>=e&&(this.isVoiceActive=!1,this.isCurrentlyStreaming=!1,this.voiceStartTime=0,this.lastVoiceTime=0,this.consecutiveSilenceFrames=0)}this.isCurrentlyStreaming&&this.isProcessing&&this.sendPCMAudioData(this.buffer)}}sendPCMAudioData(e){const t=new Int16Array(e.length);for(let s=0;s<e.length;s++){const i=Math.max(-1,Math.min(1,e[s]));t[s]=Math.round(32767*i)}for(this.sendBuffer||(this.sendBuffer=[],this.sendBufferBytes=0),this.sendBuffer.push(t),this.sendBufferBytes+=t.byteLength;this.sendBufferBytes>=4096;){let e=0,t=0;for(let s=0;s<this.sendBuffer.length;s++){const i=this.sendBuffer[s].byteLength;if(!(t+i<=4096))break;e++,t+=i}const s=this.sendBuffer.slice(0,e),i=s.reduce((e,t)=>e+t.length,0),r=new Int16Array(i);let h=0;for(const e of s)r.set(e,h),h+=e.length;this.port.postMessage({type:"pcm_audio_data",data:r,sampleRate:this.sampleRate,channelCount:1,frameCount:this.frameCount,batchSize:e,totalBytes:r.byteLength}),this.sendBuffer=this.sendBuffer.slice(e),this.sendBufferBytes-=t}}flushBuffer(){if(this.sendBuffer&&this.sendBuffer.length>0){const e=this.sendBuffer.reduce((e,t)=>e+t.length,0),t=new Int16Array(e);let s=0;for(const e of this.sendBuffer)t.set(e,s),s+=e.length;this.port.postMessage({type:"pcm_audio_data",data:t,sampleRate:this.sampleRate,channelCount:1,frameCount:this.frameCount,batchSize:this.sendBuffer.length,totalBytes:t.byteLength,isFlush:!0}),this.sendBuffer=[],this.sendBufferBytes=0}}}registerProcessor("audio-processor",AudioProcessor);

package/dist/examples/test-agent-app.html

@@ -84,6 +84,54 @@
       font-size: 12px;
       overflow-x: auto;
       margin: 20px 0;
+      white-space: pre;
+    }
+    
+    .code-block pre {
+      margin: 0;
+      font-family: inherit;
+    }
+    
+    .code-block code {
+      font-family: inherit;
+      white-space: pre;
+    }
+    
+    .tabs {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 15px;
+      border-bottom: 2px solid #E5E7EB;
+    }
+    
+    .tab {
+      background: none;
+      border: none;
+      padding: 12px 24px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      color: #6B7280;
+      border-bottom: 3px solid transparent;
+      transition: all 0.2s;
+      margin-bottom: -2px;
+    }
+    
+    .tab:hover {
+      color: #4F46E5;
+    }
+    
+    .tab.active {
+      color: #4F46E5;
+      border-bottom-color: #4F46E5;
+    }
+    
+    .tab-content {
+      display: none;
+    }
+    
+    .tab-content.active {
+      display: block;
     }
   </style>
 </head>
@@ -122,28 +170,157 @@
     </div>
 
     <h2>Implementation Code:</h2>
-    <div class="code-block">
-const widget = new TTPAgentSDK.AgentWidget({
+    <div class="tabs">
+      <button class="tab active" onclick="switchTab('simple')">Simple</button>
+      <button class="tab" onclick="switchTab('advanced')">All Options</button>
+    </div>
+    
+    <div id="simple-tab" class="tab-content active">
+      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
   agentId: 'agent_87c4a55a1',
   appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
   
-  // Direct connection without signed link
-  getSessionUrl: async ({ agentId, appId, variables }) => {
-    // Direct WebSocket URL construction with demo flag
-    const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-    return wsUrl;
-  },
+  primaryColor: '#10B981',
+  position: 'bottom-right'
+});</code></pre></div>
+    </div>
+    
+    <div id="advanced-tab" class="tab-content">
+      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
+  // Required
+  agentId: 'agent_87c4a55a1',
+  appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
+  
+  // Optional: getSessionUrl - only needed for signed links or custom URL logic
+  // getSessionUrl: async ({ agentId, appId, variables }) => {
+  //   const response = await fetch('https://your-backend.com/api/signed-url', {
+  //     method: 'POST',
+  //     headers: { 'Content-Type': 'application/json' },
+  //     body: JSON.stringify({ agentId, appId, variables })
+  //   });
+  //   const data = await response.json();
+  //   return data.signedUrl;
+  // },
+  
+  // Simple styling (backward compatible)
+  primaryColor: '#10B981',
+  position: 'bottom-right', // or use advanced position object below
+  
+  // Advanced Icon Configuration
+  // icon: {
+  //   type: 'microphone', // 'microphone', 'custom', 'emoji', 'text'
+  //   customImage: 'https://example.com/icon.png', // For type: 'custom'
+  //   emoji: '🎤', // For type: 'emoji'
+  //   text: 'AI', // For type: 'text'
+  //   size: 'medium' // 'small', 'medium', 'large', 'xl'
+  // },
+  
+  // Advanced Positioning
+  // position: {
+  //   vertical: 'bottom', // 'top', 'bottom', 'center'
+  //   horizontal: 'right', // 'left', 'right', 'center'
+  //   offset: { x: 20, y: 20 } // Custom offset in pixels
+  // },
+  
+  // Button Configuration
+  // button: {
+  //   size: 'medium', // 'small', 'medium', 'large', 'xl'
+  //   shape: 'circle', // 'circle', 'square', 'rounded'
+  //   primaryColor: '#10B981',
+  //   hoverColor: '#059669',
+  //   activeColor: '#EF4444',
+  //   shadow: true,
+  //   shadowColor: 'rgba(0,0,0,0.15)'
+  // },
+  
+  // Panel Configuration
+  // panel: {
+  //   width: 350,
+  //   height: 500,
+  //   borderRadius: 12,
+  //   backgroundColor: 'rgba(255,255,255,0.95)',
+  //   backdropFilter: 'blur(10px)', // Glass morphism effect
+  //   border: '1px solid rgba(0,0,0,0.1)'
+  // },
+  
+  // Header Configuration
+  // header: {
+  //   title: 'Voice Assistant',
+  //   showTitle: true,
+  //   backgroundColor: null, // Uses button primaryColor if null
+  //   textColor: '#FFFFFF',
+  //   showCloseButton: true
+  // },
+  
+  // Messages Configuration
+  // messages: {
+  //   userBackgroundColor: '#E5E7EB',
+  //   agentBackgroundColor: '#F3F4F6',
+  //   systemBackgroundColor: '#DCFCE7',
+  //   errorBackgroundColor: '#FEE2E2',
+  //   textColor: '#1F2937',
+  //   fontSize: '14px',
+  //   borderRadius: 8
+  // },
+  
+  // Animation Configuration
+  // animation: {
+  //   enableHover: true,
+  //   enablePulse: true,
+  //   enableSlide: true,
+  //   duration: 0.3
+  // },
+  
+  // Behavior Configuration
+  // behavior: {
+  //   autoOpen: false, // Automatically open panel on load
+  //   autoConnect: false, // Automatically connect on load
+  //   showWelcomeMessage: true,
+  //   welcomeMessage: 'Hello! How can I help you today?'
+  // },
   
+  // Accessibility Configuration
+  // accessibility: {
+  //   ariaLabel: 'Voice Assistant',
+  //   ariaDescription: 'Click to open voice assistant',
+  //   keyboardNavigation: true // ESC key to close
+  // },
+  
+  // Custom CSS
+  // customStyles: `
+  //   #agent-widget {
+  //     /* Your custom CSS here */
+  //   }
+  // `,
+  
+  // Variables for your agent/backend
   variables: {
     testMode: true,
     userName: 'Test User',
     page: 'test-agent-app.html'
-  },
-  
-  primaryColor: '#10B981',
-  position: 'bottom-right'
-});
+  }
+});</code></pre></div>
     </div>
+    
+    <script>
+      function switchTab(tabName) {
+        // Hide all tab contents
+        document.querySelectorAll('.tab-content').forEach(content => {
+          content.classList.remove('active');
+        });
+        
+        // Remove active class from all tabs
+        document.querySelectorAll('.tab').forEach(tab => {
+          tab.classList.remove('active');
+        });
+        
+        // Show selected tab content
+        document.getElementById(tabName + '-tab').classList.add('active');
+        
+        // Add active class to clicked tab
+        event.target.classList.add('active');
+      }
+    </script>
 
     <h2>Manual Tests:</h2>
     <button onclick="testMicButton()">Test Mic Button Click</button>
@@ -153,7 +330,7 @@ const widget = new TTPAgentSDK.AgentWidget({
   </div>
 
   <!-- Load the widget -->
-  <script src="../agent-widget.js?v=24" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
+  <script src="../agent-widget.js" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
   
   <script>
     // Override console.log to show in page
@@ -200,36 +377,16 @@ const widget = new TTPAgentSDK.AgentWidget({
       }
       
       // Create a new AgentWidget instance with agent ID + app ID
-      // Now supports extensive customization with sensible defaults!
-      // You can customize: icon, button, position, header, messages, animation, behavior, accessibility
+      // getSessionUrl is now OPTIONAL - widget will auto-construct URL from agentId/appId
       const widget = new TTPAgentSDK.AgentWidget({
         agentId: 'agent_87c4a55a1',
         appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
         
-        // Direct connection without signed link
-        getSessionUrl: async ({ agentId, appId, variables }) => {
-          console.log('Creating direct session URL for agent:', agentId);
-          console.log('App ID:', appId);
-          console.log('Variables:', variables);
-          
-          updateStatus('Creating direct session URL...', 'info');
-          
-          try {
-            // Direct WebSocket URL construction with demo flag
-            const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-            
-            console.log('Generated direct session URL:', wsUrl);
-            updateStatus('Direct session URL created ✓', 'success');
-            
-            return wsUrl;
-          } catch (error) {
-            console.error('Failed to create direct session URL:', error);
-            updateStatus('Failed to create direct session URL ✗', 'error');
-            throw error;
-          }
-        },
+        // getSessionUrl is OPTIONAL - omitted here, so widget auto-constructs the WebSocket URL
+        // If you need signed links or custom URL logic, you can provide it:
+        // getSessionUrl: async ({ agentId, appId, variables }) => { ... }
         
-        // Pass some test variables
+        // Optional: Pass variables for your agent/backend
         variables: {
           testMode: true,
           userName: 'Test User',
@@ -237,9 +394,17 @@ const widget = new TTPAgentSDK.AgentWidget({
           connectionType: 'direct'
         },
         
-        // Customize appearance
+        // Customize appearance (using simple config - backward compatible)
         primaryColor: '#10B981',
-        position: 'bottom-right'
+        position: 'bottom-right',
+        
+        // Enhanced features are now available but using defaults
+        // You can optionally add:
+        // icon: { type: 'emoji', emoji: '🎤', size: 'large' },
+        // button: { size: 'large', shape: 'circle' },
+        // panel: { width: 400, height: 600 },
+        // header: { title: 'My Voice Assistant' },
+        // animation: { enableHover: true, enablePulse: true }
       });
       
       // Store widget reference for testing (like the working implementation)

package/dist/examples/test-signed-link.html

@@ -188,7 +188,9 @@ const widget = new TTPAgentSDK.AgentWidget({
   </div>
 
   <!-- Load the widget -->
-  <script src="../dist/agent-widget.js" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
+  <script src="../agent-widget.js" 
+          onload="console.log('Script loaded, checking TTPAgentSDK:', typeof window.TTPAgentSDK);" 
+          onerror="console.error('Failed to load SDK script'); window.sdkLoadError = true;"></script>
   
   <script>
     // Override console.log to show in page
@@ -220,24 +222,52 @@ const widget = new TTPAgentSDK.AgentWidget({
       statusDiv.className = 'status ' + type;
     }
 
-    // Initialize the widget
-    try {
-      console.log('Initializing widget with signed link...');
-      console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
-      console.log('TTPAgentSDK.AgentWidget available:', typeof TTPAgentSDK?.AgentWidget);
+    // Wait for TTPAgentSDK to be available
+    function waitForSDK(callback, maxAttempts = 50) {
+      // Check if there was a load error
+      if (window.sdkLoadError) {
+        console.error('SDK script failed to load (check network tab)');
+        updateStatus('SDK script failed to load - check console for errors', 'error');
+        return;
+      }
       
-      if (typeof TTPAgentSDK === 'undefined') {
-        throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
+      // Check if TTPAgentSDK is available
+      if (typeof window.TTPAgentSDK !== 'undefined' && window.TTPAgentSDK !== null) {
+        console.log('SDK script loaded successfully');
+        console.log('TTPAgentSDK type:', typeof window.TTPAgentSDK);
+        console.log('TTPAgentSDK keys:', Object.keys(window.TTPAgentSDK || {}).slice(0, 5));
+        callback();
+        return;
       }
       
-      if (typeof TTPAgentSDK.AgentWidget === 'undefined') {
-        throw new Error('TTPAgentSDK.AgentWidget is not defined. Check the SDK build.');
+      if (maxAttempts <= 0) {
+        console.error('SDK failed to load after timeout');
+        console.error('window.TTPAgentSDK:', window.TTPAgentSDK);
+        console.error('Check browser console and network tab for errors');
+        updateStatus('SDK failed to load after timeout - check console', 'error');
+        return;
       }
       
-      // Create a new AgentWidget instance with signed link
-      // Now supports extensive customization with sensible defaults!
-      // You can customize: icon, button, position, header, messages, animation, behavior, accessibility
-      const widget = new TTPAgentSDK.AgentWidget({
+      setTimeout(() => waitForSDK(callback, maxAttempts - 1), 100);
+    }
+
+    // Initialize the widget once SDK is loaded
+    waitForSDK(() => {
+      try {
+        console.log('Initializing widget with signed link...');
+        console.log('TTPAgentSDK available:', typeof window.TTPAgentSDK);
+        console.log('TTPAgentSDK.AgentWidget available:', typeof window.TTPAgentSDK?.AgentWidget);
+      
+        if (typeof window.TTPAgentSDK === 'undefined') {
+          throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
+        }
+        
+        if (typeof window.TTPAgentSDK.AgentWidget === 'undefined') {
+          throw new Error('TTPAgentSDK.AgentWidget is not defined. Check the SDK build.');
+        }
+        
+        // Create a new AgentWidget instance with signed link
+        const widget = new window.TTPAgentSDK.AgentWidget({
         agentId: 'agent_87c4a55a1',
         appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
         
@@ -319,10 +349,11 @@ const widget = new TTPAgentSDK.AgentWidget({
       console.log('Test methods available at window.testWidget');
       updateStatus('Widget loaded and ready ✓', 'success');
       
-    } catch (error) {
-      console.error('Failed to initialize widget:', error);
-      updateStatus('Widget failed to load ✗', 'error');
-    }
+      } catch (error) {
+        console.error('Failed to initialize widget:', error);
+        updateStatus('Failed to initialize widget: ' + error.message, 'error');
+      }
+    });
 
     // Test functions (matching the working implementation)
     function testMicButton() {

package/dist/examples/test.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="refresh" content="0; url=test-agent-app.html">
+  <title>Redirecting to Test Page...</title>
+  <script>
+    // Immediate redirect
+    window.location.href = 'test-agent-app.html';
+  </script>
+</head>
+<body>
+  <p>If you are not redirected automatically, <a href="test-agent-app.html">click here</a>.</p>
+</body>
+</html>
+

package/dist/index.html

@@ -167,7 +167,7 @@
   });
 </script>
             </div>
-            <a href="examples/test.html" class="demo-button">Try Widget Demo</a>
+            <a href="examples/test-agent-app.html" class="demo-button">Try Widget Demo</a>
         </div>
 
         <div class="card">