npm - ttp-agent-sdk - Versions diffs - 2.0.0 - Mend

ttp-agent-sdk 2.0.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 (27) hide show

package/GETTING_STARTED.md +429 -0
package/README.md +303 -0
package/dist/agent-widget.js +3 -0
package/dist/agent-widget.js.LICENSE.txt +21 -0
package/dist/agent-widget.js.map +1 -0
package/dist/examples/react-example.html +455 -0
package/dist/examples/react-example.jsx +307 -0
package/dist/examples/test.html +235 -0
package/dist/examples/vanilla-example.html +464 -0
package/dist/index.html +224 -0
package/examples/react-example.html +455 -0
package/examples/react-example.jsx +307 -0
package/examples/test.html +235 -0
package/examples/vanilla-example.html +464 -0
package/package.json +63 -0
package/src/core/AudioPlayer.js +185 -0
package/src/core/AudioRecorder.js +128 -0
package/src/core/ConnectionManager.js +86 -0
package/src/core/EventEmitter.js +53 -0
package/src/core/VoiceSDK.js +390 -0
package/src/core/WebSocketManager.js +218 -0
package/src/core/WebSocketManagerV2.js +211 -0
package/src/core/WebSocketSingleton.js +171 -0
package/src/index.js +64 -0
package/src/legacy/AgentSDK.js +462 -0
package/src/react/VoiceButton.jsx +163 -0
package/src/vanilla/VoiceButton.js +190 -0

package/dist/examples/vanilla-example.html ADDED Viewed

@@ -0,0 +1,464 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VoiceSDK - Vanilla JavaScript Example</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 20px;
+      background: #F9FAFB;
+    }
+    .container {
+      background: white;
+      padding: 30px;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      margin-bottom: 20px;
+    }
+    h1 {
+      color: #111827;
+      margin-top: 0;
+    }
+    .status {
+      padding: 12px;
+      border-radius: 6px;
+      margin: 20px 0;
+      font-family: monospace;
+      font-size: 14px;
+    }
+    .status.connected {
+      background: #D1FAE5;
+      color: #065F46;
+      border: 1px solid #10B981;
+    }
+    .status.disconnected {
+      background: #FEE2E2;
+      color: #991B1B;
+      border: 1px solid #EF4444;
+    }
+    .status.connecting {
+      background: #FEF3C7;
+      color: #92400E;
+      border: 1px solid #F59E0B;
+    }
+    .controls {
+      display: flex;
+      gap: 12px;
+      margin: 20px 0;
+      flex-wrap: wrap;
+    }
+    button {
+      background: #4F46E5;
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 16px;
+      transition: background-color 0.2s;
+    }
+    button:hover:not(:disabled) {
+      background: #4338CA;
+    }
+    button:disabled {
+      background: #9CA3AF;
+      cursor: not-allowed;
+    }
+    button.recording {
+      background: #EF4444;
+      animation: pulse 1.5s infinite;
+    }
+    button.recording:hover {
+      background: #DC2626;
+    }
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+    }
+    .messages {
+      border: 1px solid #E5E7EB;
+      border-radius: 8px;
+      height: 300px;
+      overflow-y: auto;
+      padding: 16px;
+      background: #F9FAFB;
+      margin: 20px 0;
+    }
+    .message {
+      margin-bottom: 12px;
+      padding: 8px 12px;
+      border-radius: 6px;
+      max-width: 80%;
+    }
+    .message.user {
+      background: #E5E7EB;
+      margin-left: auto;
+    }
+    .message.agent {
+      background: #F3F4F6;
+    }
+    .message.system {
+      background: #EFF6FF;
+      color: #1E40AF;
+    }
+    .message.error {
+      background: #FEE2E2;
+      color: #991B1B;
+    }
+    .indicators {
+      display: flex;
+      gap: 20px;
+      margin-top: 20px;
+      font-size: 14px;
+      color: #6B7280;
+    }
+    .indicator {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .indicator-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #9CA3AF;
+    }
+    .indicator-dot.active {
+      background: #10B981;
+    }
+    .indicator-dot.recording {
+      background: #EF4444;
+    }
+    .code-block {
+      background: #1F2937;
+      color: #F9FAFB;
+      padding: 16px;
+      border-radius: 6px;
+      font-family: monospace;
+      font-size: 12px;
+      overflow-x: auto;
+      margin: 20px 0;
+    }
+    .voice-button-demo {
+      margin: 20px 0;
+      padding: 20px;
+      border: 2px dashed #D1D5DB;
+      border-radius: 8px;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🎤 VoiceSDK - Vanilla JavaScript Example</h1>
+    <div class="info">
+      <p>This example demonstrates how to use the VoiceSDK with vanilla JavaScript.
+         The SDK provides real-time voice interaction with AI agents using WebSocket communication.</p>
+    </div>
+    <!-- Connection Status -->
+    <div id="status" class="status disconnected">
+      Status: Disconnected
+    </div>
+    <!-- Controls -->
+    <div class="controls">
+      <button id="connectBtn">Connect</button>
+      <button id="disconnectBtn" disabled>Disconnect</button>
+      <button id="recordBtn" disabled>Start Recording</button>
+      <button id="stopBtn" disabled>Stop Recording</button>
+    </div>
+    <!-- Voice Button Demo -->
+    <div class="voice-button-demo">
+      <h3>Voice Button Component Demo:</h3>
+      <p>This is a pre-built voice button component:</p>
+      <div id="voice-button-container"></div>
+    </div>
+    <!-- Messages -->
+    <div class="messages" id="messages">
+      <div class="message system">
+        <strong>System:</strong> Ready to connect. Click "Connect" to start.
+      </div>
+    </div>
+    <!-- Status Indicators -->
+    <div class="indicators">
+      <div class="indicator">
+        <div id="connectionDot" class="indicator-dot"></div>
+        <span>Connection</span>
+      </div>
+      <div class="indicator">
+        <div id="recordingDot" class="indicator-dot"></div>
+        <span>Recording</span>
+      </div>
+      <div class="indicator">
+        <div id="playingDot" class="indicator-dot"></div>
+        <span>Playing</span>
+      </div>
+    </div>
+    <!-- Code Example -->
+    <div class="code-block">
+      <div>// VoiceSDK Usage Example</div>
+      <div>const voiceSDK = new VoiceSDK({</div>
+      <div>  websocketUrl: 'wss://speech.bidme.co.il/ws/conv',</div>
+      <div>  agentId: 'your_agent_id',</div>
+      <div>  appId: 'your_app_id'</div>
+      <div>});</div>
+      <div></div>
+      <div>voiceSDK.on('connected', () => console.log('Connected!'));</div>
+      <div>voiceSDK.on('recordingStarted', () => console.log('Recording...'));</div>
+      <div></div>
+      <div>await voiceSDK.connect();</div>
+      <div>await voiceSDK.startRecording();</div>
+    </div>
+  </div>
+  <!-- Load the SDK -->
+  <script src="../agent-widget.js"></script>
+  <script>
+    // VoiceSDK instance
+    let voiceSDK = null;
+    let isConnected = false;
+    let isRecording = false;
+    let isPlaying = false;
+    // DOM elements
+    const statusDiv = document.getElementById('status');
+    const messagesDiv = document.getElementById('messages');
+    const connectBtn = document.getElementById('connectBtn');
+    const disconnectBtn = document.getElementById('disconnectBtn');
+    const recordBtn = document.getElementById('recordBtn');
+    const stopBtn = document.getElementById('stopBtn');
+    const connectionDot = document.getElementById('connectionDot');
+    const recordingDot = document.getElementById('recordingDot');
+    const playingDot = document.getElementById('playingDot');
+    // Initialize VoiceSDK
+    function initializeVoiceSDK() {
+      voiceSDK = new TTPAgentSDK.VoiceSDK({
+        websocketUrl: 'wss://speech.bidme.co.il/ws/conv',
+        agentId: 'demo_agent_123',
+        appId: 'demo_app_456',
+        voice: 'default',
+        language: 'en',
+        autoReconnect: true
+      });
+      // Set up event handlers
+      voiceSDK.on('connected', () => {
+        isConnected = true;
+        updateStatus('Connected', 'connected');
+        updateIndicators();
+        updateButtons();
+        addMessage('system', 'Connected to voice agent successfully!');
+      });
+      voiceSDK.on('disconnected', () => {
+        isConnected = false;
+        isRecording = false;
+        isPlaying = false;
+        updateStatus('Disconnected', 'disconnected');
+        updateIndicators();
+        updateButtons();
+        addMessage('system', 'Disconnected from voice agent');
+      });
+      voiceSDK.on('recordingStarted', () => {
+        isRecording = true;
+        updateIndicators();
+        updateButtons();
+        addMessage('user', '🎤 Recording started...');
+      });
+      voiceSDK.on('recordingStopped', () => {
+        isRecording = false;
+        updateIndicators();
+        updateButtons();
+        addMessage('user', '⏹️ Recording stopped');
+      });
+      voiceSDK.on('playbackStarted', () => {
+        isPlaying = true;
+        updateIndicators();
+        addMessage('agent', '🔊 Agent is speaking...');
+      });
+      voiceSDK.on('playbackStopped', () => {
+        isPlaying = false;
+        updateIndicators();
+      });
+      voiceSDK.on('message', (message) => {
+        if (message.type === 'agent_response') {
+          addMessage('agent', message.agent_response);
+        } else if (message.type === 'user_transcript') {
+          addMessage('user', message.user_transcription);
+        }
+      });
+      voiceSDK.on('error', (error) => {
+        console.error('VoiceSDK Error:', error);
+        addMessage('error', `Error: ${error.message}`);
+      });
+    }
+    // Update status display
+    function updateStatus(message, type) {
+      statusDiv.textContent = `Status: ${message}`;
+      statusDiv.className = `status ${type}`;
+    }
+    // Update status indicators
+    function updateIndicators() {
+      connectionDot.className = `indicator-dot ${isConnected ? 'active' : ''}`;
+      recordingDot.className = `indicator-dot ${isRecording ? 'recording' : ''}`;
+      playingDot.className = `indicator-dot ${isPlaying ? 'active' : ''}`;
+    }
+    // Update button states
+    function updateButtons() {
+      connectBtn.disabled = isConnected;
+      disconnectBtn.disabled = !isConnected;
+      recordBtn.disabled = !isConnected || isRecording;
+      stopBtn.disabled = !isConnected || !isRecording;
+      if (isRecording) {
+        recordBtn.classList.add('recording');
+      } else {
+        recordBtn.classList.remove('recording');
+      }
+    }
+    // Add message to chat
+    function addMessage(type, text) {
+      const messageDiv = document.createElement('div');
+      messageDiv.className = `message ${type}`;
+      const timestamp = new Date().toLocaleTimeString();
+      const typeLabel = type === 'user' ? '👤 You' :
+                       type === 'agent' ? '🤖 Agent' :
+                       type === 'error' ? '❌ Error' : 'ℹ️ System';
+      messageDiv.innerHTML = `
+        <div style="font-weight: bold; margin-bottom: 4px;">${typeLabel}</div>
+        <div>${text}</div>
+        <div style="font-size: 12px; color: #6B7280; margin-top: 4px;">${timestamp}</div>
+      `;
+      messagesDiv.appendChild(messageDiv);
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+    // Event handlers
+    connectBtn.addEventListener('click', async () => {
+      try {
+        updateStatus('Connecting...', 'connecting');
+        await voiceSDK.connect();
+      } catch (error) {
+        console.error('Connection failed:', error);
+        updateStatus('Connection failed', 'disconnected');
+        addMessage('error', `Connection failed: ${error.message}`);
+      }
+    });
+    disconnectBtn.addEventListener('click', () => {
+      voiceSDK.disconnect();
+    });
+    recordBtn.addEventListener('click', async () => {
+      try {
+        await voiceSDK.startRecording();
+      } catch (error) {
+        console.error('Recording start failed:', error);
+        addMessage('error', `Recording failed: ${error.message}`);
+      }
+    });
+    stopBtn.addEventListener('click', async () => {
+      try {
+        await voiceSDK.stopRecording();
+      } catch (error) {
+        console.error('Recording stop failed:', error);
+        addMessage('error', `Stop recording failed: ${error.message}`);
+      }
+    });
+    // Initialize Voice Button Component
+    function initializeVoiceButton() {
+      const container = document.getElementById('voice-button-container');
+      // Create a simple voice button using the VanillaVoiceButton
+      const voiceButton = new TTPAgentSDK.VanillaVoiceButton({
+        container: container,
+        websocketUrl: 'wss://speech.bidme.co.il/ws/conv',
+        agentId: 'demo_agent_123',
+        appId: 'demo_app_456',
+        onConnected: () => {
+          console.log('Voice Button connected');
+          addMessage('system', 'Voice Button connected');
+        },
+        onRecordingStarted: () => {
+          console.log('Voice Button recording started');
+          addMessage('system', 'Voice Button recording started');
+        },
+        onPlaybackStarted: () => {
+          console.log('Voice Button playback started');
+          addMessage('system', 'Voice Button playback started');
+        }
+      });
+    }
+    // Initialize everything when page loads
+    document.addEventListener('DOMContentLoaded', () => {
+      console.log('Initializing VoiceSDK example...');
+      // Check if SDK is loaded
+      if (typeof TTPAgentSDK === 'undefined') {
+        addMessage('error', 'VoiceSDK not loaded. Make sure the script is included.');
+        return;
+      }
+      initializeVoiceSDK();
+      initializeVoiceButton();
+      addMessage('system', 'VoiceSDK example initialized. Click "Connect" to start.');
+      console.log('VoiceSDK example ready!');
+    });
+  </script>
+</body>
+</html>

package/dist/index.html ADDED Viewed

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TTP Agent SDK - Voice AI Integration</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f8fafc;
+            color: #1e293b;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            padding: 40px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-radius: 12px;
+        }
+        .header h1 {
+            margin: 0 0 10px 0;
+            font-size: 2.5rem;
+        }
+        .header p {
+            margin: 0;
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .content {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        .card {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e2e8f0;
+        }
+        .card h2 {
+            margin-top: 0;
+            color: #4f46e5;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .card p {
+            line-height: 1.6;
+            color: #64748b;
+        }
+        .demo-button {
+            display: inline-block;
+            background: #4f46e5;
+            color: white;
+            padding: 12px 24px;
+            text-decoration: none;
+            border-radius: 8px;
+            font-weight: 600;
+            transition: background-color 0.2s;
+            margin-top: 15px;
+        }
+        .demo-button:hover {
+            background: #4338ca;
+        }
+        .code-block {
+            background: #1e293b;
+            color: #e2e8f0;
+            padding: 20px;
+            border-radius: 8px;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 14px;
+            overflow-x: auto;
+            margin: 20px 0;
+        }
+        .features {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 30px;
+        }
+        .features h2 {
+            margin-top: 0;
+            color: #4f46e5;
+        }
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .feature {
+            padding: 20px;
+            background: #f8fafc;
+            border-radius: 8px;
+            border-left: 4px solid #4f46e5;
+        }
+        .feature h3 {
+            margin: 0 0 10px 0;
+            color: #1e293b;
+        }
+        .feature p {
+            margin: 0;
+            color: #64748b;
+            font-size: 14px;
+        }
+        .footer {
+            text-align: center;
+            padding: 30px;
+            color: #64748b;
+            border-top: 1px solid #e2e8f0;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>🎤 TTP Agent SDK</h1>
+        <p>Comprehensive Voice AI Integration for Web Applications</p>
+    </div>
+    <div class="features">
+        <h2>✨ Key Features</h2>
+        <div class="feature-grid">
+            <div class="feature">
+                <h3>🎤 Real-time Audio</h3>
+                <p>High-quality audio recording and playback with AudioWorklet</p>
+            </div>
+            <div class="feature">
+                <h3>🔄 WebSocket Communication</h3>
+                <p>Real-time bidirectional communication with authentication</p>
+            </div>
+            <div class="feature">
+                <h3>⚛️ React Components</h3>
+                <p>Ready-to-use React components for modern applications</p>
+            </div>
+            <div class="feature">
+                <h3>🌐 Vanilla JavaScript</h3>
+                <p>Works with any JavaScript framework or vanilla JS</p>
+            </div>
+            <div class="feature">
+                <h3>🔒 Multiple Auth Methods</h3>
+                <p>Support for signed links and direct agent access</p>
+            </div>
+            <div class="feature">
+                <h3>📱 Responsive Widget</h3>
+                <p>Pre-built UI widget for quick integration</p>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <div class="card">
+            <h2>🚀 Quick Start</h2>
+            <p>Get started with the pre-built widget in just a few lines of code.</p>
+            <div class="code-block">
+&lt;script src="https://cdn.talktopc.com/agent-widget.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  TTPAgentSDK.AgentWidget.init({
+    agentId: 'your_agent_id',
+    getSessionUrl: 'https://your-backend.com/api/get-session'
+  });
+&lt;/script&gt;
+            </div>
+            <a href="examples/test.html" class="demo-button">Try Widget Demo</a>
+        </div>
+        <div class="card">
+            <h2>⚛️ React Integration</h2>
+            <p>Use the VoiceButton component in your React applications.</p>
+            <div class="code-block">
+import { VoiceButton } from 'ttp-agent-sdk';
+&lt;VoiceButton
+  websocketUrl="wss://speech.bidme.co.il/ws/conv"
+  agentId="your_agent_id"
+  appId="your_app_id"
+/&gt;
+            </div>
+            <a href="examples/react-example.html" class="demo-button">View React Example</a>
+        </div>
+        <div class="card">
+            <h2>🌐 Vanilla JavaScript</h2>
+            <p>Integrate with any JavaScript framework or vanilla JS.</p>
+            <div class="code-block">
+import { VoiceSDK } from 'ttp-agent-sdk';
+const voiceSDK = new VoiceSDK({
+  websocketUrl: 'wss://speech.bidme.co.il/ws/conv',
+  agentId: 'your_agent_id',
+  appId: 'your_app_id'
+});
+await voiceSDK.connect();
+            </div>
+            <a href="examples/vanilla-example.html" class="demo-button">Try Vanilla Demo</a>
+        </div>
+        <div class="card">
+            <h2>📚 Documentation</h2>
+            <p>Complete documentation and API reference for all features.</p>
+            <ul style="color: #64748b; line-height: 1.8;">
+                <li>Installation & Setup</li>
+                <li>Authentication Methods</li>
+                <li>Event Handling</li>
+                <li>API Reference</li>
+                <li>Examples & Tutorials</li>
+            </ul>
+            <a href="README.md" class="demo-button">View Documentation</a>
+        </div>
+    </div>
+    <div class="footer">
+        <p>Built with ❤️ by the TTP Agent Team</p>
+        <p>Version 2.0.0 | <a href="https://github.com/yinon11/ttp-sdk-front" style="color: #4f46e5;">GitHub Repository</a></p>
+    </div>
+</body>
+</html>