npm - ttp-agent-sdk - Versions diffs - 2.34.14 → 2.36.0 - Mend

ttp-agent-sdk 2.34.14 → 2.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/ENHANCED_WIDGET_GUIDE.md +5 -32
package/GETTING_STARTED.md +20 -73
package/README.md +14 -38
package/WORDPRESS_WIX_GUIDE.md +8 -18
package/dist/agent-widget.dev.js +680 -307
package/dist/agent-widget.dev.js.map +1 -1
package/dist/agent-widget.esm.js +1 -1
package/dist/agent-widget.esm.js.map +1 -1
package/dist/agent-widget.js +1 -1
package/dist/agent-widget.js.map +1 -1
package/dist/examples/test-text-chat.html +2 -26
package/dist/index.html +169 -439
package/examples/test-text-chat.html +2 -26
package/package.json +2 -2
package/SIGNED_LINK_GUIDE.md +0 -249
package/dist/examples/test-signed-link.html +0 -503
package/examples/test-signed-link.html +0 -503

package/examples/test-signed-link.html DELETED Viewed

@@ -1,503 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>Voice Agent Widget - Signed Link Test</title>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      max-width: 800px;
-      margin: 40px auto;
-      padding: 20px;
-      background: #F9FAFB;
-    }
-    .container {
-      background: white;
-      padding: 30px;
-      border-radius: 12px;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    h1 {
-      color: #111827;
-      margin-top: 0;
-    }
-    .info {
-      background: #EFF6FF;
-      border-left: 4px solid #3B82F6;
-      padding: 16px;
-      margin: 20px 0;
-      border-radius: 4px;
-    }
-    .config-info {
-      background: #FEF3C7;
-      border-left: 4px solid #F59E0B;
-      padding: 16px;
-      margin: 20px 0;
-      border-radius: 4px;
-    }
-    .status {
-      margin: 20px 0;
-      padding: 12px;
-      background: #F3F4F6;
-      border-radius: 6px;
-      font-family: monospace;
-      font-size: 14px;
-    }
-    .status.success {
-      background: #D1FAE5;
-      color: #065F46;
-    }
-    .status.error {
-      background: #FEE2E2;
-      color: #991B1B;
-    }
-    button {
-      background: #4F46E5;
-      color: white;
-      border: none;
-      padding: 12px 24px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 16px;
-      margin: 10px 10px 10px 0;
-    }
-    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;
-    }
-    .api-info {
-      background: #F0FDF4;
-      border-left: 4px solid #10B981;
-      padding: 16px;
-      margin: 20px 0;
-      border-radius: 4px;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🎤 Voice Agent Widget - Signed Link 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> Signed link via backend API</li>
-      </ul>
-    </div>
-    <div class="api-info">
-      <strong>🔗 Backend API:</strong>
-      <ul style="margin: 10px 0 0 20px; line-height: 1.8;">
-        <li><strong>Endpoint:</strong> https://backend.talktopc.com/api/public/agents/signed-url</li>
-        <li><strong>Method:</strong> POST</li>
-        <li><strong>Purpose:</strong> Generate signed WebSocket URL for secure connection</li>
-      </ul>
-    </div>
-    <div class="info">
-      <strong>📝 Testing Instructions:</strong>
-      <ol style="margin: 10px 0 0 20px; line-height: 1.8;">
-        <li>Look for the floating voice button in the bottom-right corner</li>
-        <li>Click the button to open the widget</li>
-        <li>Widget will request signed URL from backend API</li>
-        <li>Click the microphone to start (will request mic permission)</li>
-        <li>Widget will connect using the signed WebSocket URL</li>
-        <li>Check the status updates below</li>
-      </ol>
-    </div>
-    <h2>Widget Status:</h2>
-    <div id="status" class="status">
-      Waiting for widget to load...
-    </div>
-    <h2>Console Log:</h2>
-    <div id="log" style="background: #1F2937; color: #F9FAFB; padding: 16px; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 300px; overflow-y: auto;">
-      Console messages will appear here...
-    </div>
-    <h2>Implementation Code:</h2>
-    <div class="code-block">
-// Step 1: Get signed URL from backend
-async function initializeWidget() {
-  const response = await fetch('https://backend.talktopc.com/api/public/agents/signed-url', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      agentId: 'agent_87c4a55a1',
-      appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-      variables: {
-        testMode: true,
-        userName: 'Test User',
-        page: 'test-signed-link.html'
-      }
-    })
-  });
-  if (!response.ok) {
-    throw new Error(`Backend API error: ${response.status}`);
-  }
-  const data = await response.json();
-  if (!data.signedUrl) {
-    throw new Error('Backend response must contain "signedUrl" field');
-  }
-  // Step 2: Initialize widget with signedUrl
-  const widget = new TTPAgentSDK.AgentWidget({
-    agentId: 'agent_87c4a55a1',
-    appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-    signedUrl: data.signedUrl,  // Use signed URL from backend
-    variables: {
-      testMode: true,
-      userName: 'Test User',
-      page: 'test-signed-link.html'
-    },
-    primaryColor: '#F59E0B',
-    position: 'bottom-right'
-  });
-  return widget;
-}
-// Initialize when ready
-const widget = await initializeWidget();
-    </div>
-    <h2>Manual Tests:</h2>
-    <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>
-    <button onclick="testBackendAPI()">Test Backend API</button>
-    <button onclick="testSignedUrlGeneration()">Test Signed URL Generation</button>
-  </div>
-  <!-- Load the widget -->
-  <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
-    const originalLog = console.log;
-    const originalError = console.error;
-    const logDiv = document.getElementById('log');
-    function addLog(message, type = 'log') {
-      const time = new Date().toLocaleTimeString();
-      const color = type === 'error' ? '#EF4444' : '#10B981';
-      logDiv.innerHTML += `<div style="color: ${color};">[${time}] ${message}</div>`;
-      logDiv.scrollTop = logDiv.scrollHeight;
-    }
-    console.log = (...args) => {
-      originalLog(...args);
-      addLog(args.join(' '));
-    };
-    console.error = (...args) => {
-      originalError(...args);
-      addLog(args.join(' '), 'error');
-    };
-    // Update status display
-    function updateStatus(message, type = 'info') {
-      const statusDiv = document.getElementById('status');
-      statusDiv.textContent = message;
-      statusDiv.className = 'status ' + type;
-    }
-    // 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;
-      }
-      // 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 (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;
-      }
-      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.');
-        }
-        // Step 1: Get signed URL from backend
-        console.log('Requesting signed URL from backend API...');
-        updateStatus('Requesting signed URL from backend...', 'info');
-        const agentId = 'agent_87c4a55a1';
-        const appId = 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC';
-        const variables = {
-          testMode: true,
-          userName: 'Test User',
-          page: 'test-signed-link.html'
-        };
-        console.log('Agent ID:', agentId);
-        console.log('App ID:', appId);
-        console.log('Variables:', variables);
-        try {
-          const response = await fetch('https://backend.talktopc.com/api/public/agents/signed-url', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              agentId: agentId,
-              appId: appId,
-              variables: variables
-            })
-          });
-          console.log('Backend API response status:', response.status);
-          if (!response.ok) {
-            const errorText = await response.text();
-            throw new Error(`Backend API error: ${response.status} - ${errorText}`);
-          }
-          const data = await response.json();
-          console.log('Backend API response data:', data);
-          // Backend must return signedUrl field
-          if (!data.signedUrl) {
-            throw new Error('Backend response must contain "signedUrl" field');
-          }
-          const signedUrl = data.signedUrl;
-          console.log('Generated signed URL:', signedUrl);
-          updateStatus('Signed URL received from backend ✓', 'success');
-          // Step 2: Create widget with signedUrl
-          const widget = new window.TTPAgentSDK.AgentWidget({
-            agentId: agentId,
-            appId: appId,
-            signedUrl: signedUrl,  // Use signed URL from backend
-            // Pass some test variables
-            variables: variables,
-            // Customize appearance
-            primaryColor: '#F59E0B',
-            position: 'bottom-right'
-          });
-          // Store widget reference for testing
-          window.testWidget = widget;
-          console.log('Widget initialized successfully with signed link!');
-          console.log('Widget instance:', widget);
-          console.log('Test methods available at window.testWidget');
-          updateStatus('Widget loaded and ready ✓', 'success');
-        } catch (error) {
-          console.error('Failed to get signed URL or initialize widget:', error);
-          updateStatus('Failed: ' + error.message, 'error');
-          // Fallback to direct connection if backend fails
-          console.log('Falling back to direct connection...');
-          updateStatus('Using fallback direct connection', 'info');
-          const widget = new window.TTPAgentSDK.AgentWidget({
-            agentId: agentId,
-            appId: appId,
-            variables: variables,
-            primaryColor: '#F59E0B',
-            position: 'bottom-right'
-          });
-          window.testWidget = widget;
-          console.log('Widget initialized with direct connection (fallback)');
-        }
-      } 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() {
-      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 {
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        console.log('Microphone access granted ✓');
-        stream.getTracks().forEach(track => track.stop());
-        alert('Microphone access OK!');
-      } catch (error) {
-        console.error('Microphone access denied:', error);
-        alert('Microphone access DENIED! Please allow microphone in browser settings.');
-      }
-    }
-    // Manual test functions
-    async function testBackendAPI() {
-      console.log('Testing backend API connection...');
-      try {
-        const response = await fetch('https://backend.talktopc.com/api/public/agents/signed-url', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            agentId: 'agent_87c4a55a1',
-            appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-            variables: { testMode: true }
-          })
-        });
-        console.log('Backend API response status:', response.status);
-        if (response.ok) {
-          const data = await response.json();
-          console.log('Backend API response:', data);
-          alert('Backend API connection OK! Check console for response details.');
-        } else {
-          const errorText = await response.text();
-          throw new Error(`Backend returned error: ${response.status} - ${errorText}`);
-        }
-      } catch (error) {
-        console.error('Backend API test failed:', error);
-        alert('Backend API test FAILED! Check console for details.');
-      }
-    }
-    async function testSignedUrlGeneration() {
-      console.log('Testing signed URL generation...');
-      try {
-        const response = await fetch('https://backend.talktopc.com/api/public/agents/signed-url', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            agentId: 'agent_87c4a55a1',
-            appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-            variables: {
-              testMode: true,
-              userName: 'Test User',
-              timestamp: new Date().toISOString()
-            }
-          })
-        });
-        if (response.ok) {
-          const data = await response.json();
-          if (!data.signedUrl) {
-            throw new Error('Backend response must contain "signedUrl" field');
-          }
-          const signedUrl = data.signedUrl;
-          console.log('Generated signed URL:', signedUrl);
-          alert(`Signed URL generated successfully!\n\nURL: ${signedUrl.substring(0, 100)}...\n\nYou can now use this signedUrl when initializing the widget:\n\nconst widget = new TTPAgentSDK.AgentWidget({\n  agentId: 'agent_87c4a55a1',\n  appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',\n  signedUrl: '${signedUrl.substring(0, 50)}...'\n});`);
-        } else {
-          throw new Error(`API error: ${response.status}`);
-        }
-      } catch (error) {
-        console.error('Signed URL generation test failed:', error);
-        alert('Signed URL generation FAILED! Check console for details.');
-      }
-    }
-    async function testMicrophone() {
-      console.log('Testing microphone access...');
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        console.log('Microphone access granted ✓');
-        stream.getTracks().forEach(track => track.stop());
-        alert('Microphone access OK!');
-      } catch (error) {
-        console.error('Microphone access denied:', error);
-        alert('Microphone access DENIED! Please allow microphone in browser settings.');
-      }
-    }
-  </script>
-</body>
-</html>