ttp-agent-sdk 2.1.8 → 2.1.10

package/dist/audio-processor.js

@@ -0,0 +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);

package/{examples/test.html → dist/examples/test-agent-app.html}

@@ -1,15 +1,9 @@
-<!-- 
-============================================
-FILE: examples/test.html
-Test page for the widget
-============================================
--->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Voice Agent Widget - Test Page</title>
+  <title>Voice Agent Widget - Agent ID + App ID Test</title>
   <style>
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -39,6 +33,14 @@ Test page for the widget
       border-radius: 4px;
     }
     
+    .config-info {
+      background: #F0FDF4;
+      border-left: 4px solid #10B981;
+      padding: 16px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+    
     .status {
       margin: 20px 0;
       padding: 12px;
@@ -72,20 +74,39 @@ Test page for the widget
     button:hover {
       background: #4338CA;
     }
+
+    .code-block {
+      background: #1F2937;
+      color: #F9FAFB;
+      padding: 16px;
+      border-radius: 6px;
+      font-family: monospace;
+      font-size: 12px;
+      overflow-x: auto;
+      margin: 20px 0;
+    }
   </style>
 </head>
 <body>
   <div class="container">
-    <h1>🎤 Voice Agent Widget - Test Page</h1>
+    <h1>🎤 Voice Agent Widget - Agent ID + App ID Test</h1>
+    
+    <div class="config-info">
+      <strong>📝 Configuration:</strong>
+      <ul style="margin: 10px 0 0 20px; line-height: 1.8;">
+        <li><strong>Agent ID:</strong> agent_87c4a55a1</li>
+        <li><strong>App ID:</strong> app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC</li>
+        <li><strong>Method:</strong> Direct connection (no signed link)</li>
+      </ul>
+    </div>
     
     <div class="info">
       <strong>📝 Testing Instructions:</strong>
       <ol style="margin: 10px 0 0 20px; line-height: 1.8;">
-        <li><strong>No backend required!</strong> This demo uses a mock session URL</li>
         <li>Look for the floating voice button in the bottom-right corner</li>
         <li>Click the button to open the widget</li>
         <li>Click the microphone to start (will request mic permission)</li>
-        <li>Widget will connect to production backend at speech.talktopc.com</li>
+        <li>Widget will connect directly using agent ID + app ID</li>
         <li>Check the status updates below</li>
       </ol>
     </div>
@@ -100,13 +121,39 @@ Test page for the widget
       Console messages will appear here...
     </div>
 
+    <h2>Implementation Code:</h2>
+    <div class="code-block">
+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;
+  },
+  
+  variables: {
+    testMode: true,
+    userName: 'Test User',
+    page: 'test-agent-app.html'
+  },
+  
+  primaryColor: '#10B981',
+  position: 'bottom-right'
+});
+    </div>
+
     <h2>Manual Tests:</h2>
-    <button onclick="testConnection()">Test Backend Connection</button>
+    <button onclick="testMicButton()">Test Mic Button Click</button>
+    <button onclick="testToggleVoice()">Test ToggleVoice Method</button>
+    <button onclick="checkWidgetState()">Check Widget State</button>
     <button onclick="testMicrophone()">Test Microphone Access</button>
   </div>
 
   <!-- Load the widget -->
-  <script src="../agent-widget.js" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
+  <script src="../agent-widget.js?v=24" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
   
   <script>
     // Override console.log to show in page
@@ -140,7 +187,7 @@ Test page for the widget
 
     // Initialize the widget
     try {
-      console.log('Initializing widget...');
+      console.log('Initializing widget with agent ID + app ID...');
       console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
       console.log('TTPAgentSDK.AgentWidget available:', typeof TTPAgentSDK?.AgentWidget);
       
@@ -152,31 +199,32 @@ Test page for the widget
         throw new Error('TTPAgentSDK.AgentWidget is not defined. Check the SDK build.');
       }
       
-      // Create a new AgentWidget instance
+      // 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
       const widget = new TTPAgentSDK.AgentWidget({
-        agentId: 'agent_test_123',
+        agentId: 'agent_87c4a55a1',
+        appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
         
-        // Mock backend for local testing (no real backend needed!)
-        getSessionUrl: async ({ agentId, variables }) => {
-          console.log('Requesting session URL for agent:', agentId);
+        // 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 mock session URL...', 'info');
+          updateStatus('Creating direct session URL...', 'info');
           
           try {
-            // Simulate a small delay like a real backend
-            await new Promise(resolve => setTimeout(resolve, 500));
+            // Direct WebSocket URL construction with demo flag
+            const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
             
-            // Create a mock WebSocket URL for testing
-            const mockSignedUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=test_app_123`;
+            console.log('Generated direct session URL:', wsUrl);
+            updateStatus('Direct session URL created ✓', 'success');
             
-            console.log('Generated mock session URL:', mockSignedUrl);
-            updateStatus('Mock session URL created ✓', 'success');
-            
-            return mockSignedUrl;
+            return wsUrl;
           } catch (error) {
-            console.error('Failed to create mock session URL:', error);
-            updateStatus('Failed to create mock session URL ✗', 'error');
+            console.error('Failed to create direct session URL:', error);
+            updateStatus('Failed to create direct session URL ✗', 'error');
             throw error;
           }
         },
@@ -185,7 +233,8 @@ Test page for the widget
         variables: {
           testMode: true,
           userName: 'Test User',
-          page: 'test.html'
+          page: 'test-agent-app.html',
+          connectionType: 'direct'
         },
         
         // Customize appearance
@@ -193,7 +242,12 @@ Test page for the widget
         position: 'bottom-right'
       });
       
-      console.log('Widget initialized successfully!');
+      // Store widget reference for testing (like the working implementation)
+      window.testWidget = widget;
+      
+      console.log('Widget initialized successfully with agent ID + app ID!');
+      console.log('Widget instance:', widget);
+      console.log('Test methods available at window.testWidget');
       updateStatus('Widget loaded and ready ✓', 'success');
       
     } catch (error) {
@@ -201,23 +255,35 @@ Test page for the widget
       updateStatus('Widget failed to load ✗', 'error');
     }
 
-    // Manual test functions
-    async function testConnection() {
-      console.log('Testing backend connection...');
-      try {
-        const response = await fetch('http://localhost:3000/health');
-        if (response.ok) {
-          console.log('Backend is reachable ✓');
-          alert('Backend connection OK!');
-        } else {
-          throw new Error('Backend returned error');
-        }
-      } catch (error) {
-        console.error('Cannot reach backend:', error);
-        alert('Widget initialization FAILED! Check console for details.');
+    // Test functions (matching the working implementation)
+    function testMicButton() {
+      console.log('🎤 Testing mic button manually...');
+      const micButton = document.getElementById('agent-mic-button');
+      if (micButton) {
+        console.log('🎤 Found mic button, clicking...');
+        micButton.click();
+      } else {
+        console.log('🎤 Mic button not found');
+      }
+    }
+
+    function testToggleVoice() {
+      console.log('🎤 Testing toggleVoice method...');
+      if (window.testWidget && window.testWidget.toggleVoice) {
+        window.testWidget.toggleVoice();
+      } else {
+        console.log('🎤 toggleVoice method not available');
       }
     }
 
+    function checkWidgetState() {
+      console.log('🎤 Widget state:', {
+        isActive: window.testWidget?.isActive,
+        isOpen: window.testWidget?.isOpen,
+        sdk: window.testWidget?.sdk
+      });
+    }
+
     async function testMicrophone() {
       console.log('Testing microphone access...');
       try {