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/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/package.json ADDED Viewed

@@ -0,0 +1,63 @@
+{
+  "name": "ttp-agent-sdk",
+  "version": "2.0.0",
+  "description": "Comprehensive Voice Agent SDK for web integration with real-time audio, WebSocket communication, and React components",
+  "main": "dist/agent-widget.js",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/",
+    "examples/",
+    "README.md",
+    "GETTING_STARTED.md"
+  ],
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "dev": "webpack serve --mode development",
+    "watch": "webpack --watch --mode development",
+    "start-backend": "node test-server.js",
+    "test": "npm run start-backend",
+    "clean": "rm -rf dist/",
+    "prebuild": "npm run clean"
+  },
+  "keywords": [
+    "voice",
+    "agent",
+    "sdk",
+    "widget",
+    "websocket",
+    "audio",
+    "real-time",
+    "react",
+    "ai",
+    "conversation"
+  ],
+  "author": "TTP Agent Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yinon11/ttp-sdk-front.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yinon11/ttp-sdk-front/issues"
+  },
+  "homepage": "https://github.com/yinon11/ttp-sdk-front#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.0",
+    "babel-loader": "^9.1.0",
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^6.8.0",
+    "style-loader": "^3.3.0",
+    "webpack": "^5.102.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  }
+}

package/src/core/AudioPlayer.js ADDED Viewed

@@ -0,0 +1,185 @@
+/**
+ * AudioPlayer - Handles audio playback with queue system
+ */
+import EventEmitter from './EventEmitter.js';
+export default class AudioPlayer extends EventEmitter {
+  constructor(config) {
+    super();
+    this.config = config;
+    this.audioContext = null;
+    this.audioQueue = [];
+    this.isPlaying = false;
+    this.isProcessingQueue = false;
+    this.currentSource = null;
+  }
+  /**
+   * Add audio data to playback queue
+   */
+  playAudio(audioData) {
+    try {
+      const audioBlob = this.createAudioBlob(audioData);
+      this.audioQueue.push(audioBlob);
+      // Process queue if not already playing or processing
+      if (!this.isPlaying && !this.isProcessingQueue) {
+        setTimeout(() => this.processQueue(), 50);
+      }
+    } catch (error) {
+      this.emit('playbackError', error);
+    }
+  }
+  /**
+   * Create audio blob from ArrayBuffer
+   */
+  createAudioBlob(arrayBuffer) {
+    const uint8Array = new Uint8Array(arrayBuffer);
+    // Detect audio format
+    if (uint8Array.length >= 4) {
+      // WAV header (RIFF)
+      if (uint8Array[0] === 0x52 && uint8Array[1] === 0x49 &&
+          uint8Array[2] === 0x46 && uint8Array[3] === 0x46) {
+        return new Blob([arrayBuffer], { type: 'audio/wav' });
+      }
+      // MP3 header
+      if (uint8Array[0] === 0xFF && (uint8Array[1] & 0xE0) === 0xE0) {
+        return new Blob([arrayBuffer], { type: 'audio/mpeg' });
+      }
+      // OGG header
+      if (uint8Array[0] === 0x4F && uint8Array[1] === 0x67 &&
+          uint8Array[2] === 0x67 && uint8Array[3] === 0x53) {
+        return new Blob([arrayBuffer], { type: 'audio/ogg' });
+      }
+    }
+    // Default to WAV format
+    return new Blob([arrayBuffer], { type: 'audio/wav' });
+  }
+  /**
+   * Process audio queue
+   */
+  async processQueue() {
+    // Prevent multiple simultaneous queue processing
+    if (this.isProcessingQueue || this.isPlaying || this.audioQueue.length === 0) {
+      return;
+    }
+    this.isProcessingQueue = true;
+    const audioBlob = this.audioQueue.shift();
+    if (!audioBlob) {
+      this.isProcessingQueue = false;
+      return;
+    }
+    try {
+      this.isPlaying = true;
+      this.emit('playbackStarted');
+      // Create AudioContext if not exists
+      if (!this.audioContext) {
+        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      }
+      const audioContext = this.audioContext;
+      // Resume AudioContext if suspended
+      if (audioContext.state === 'suspended') {
+        await audioContext.resume();
+      }
+      // Create audio source from blob
+      const arrayBuffer = await audioBlob.arrayBuffer();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      const source = audioContext.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(audioContext.destination);
+      this.currentSource = source;
+      // Handle audio end
+      source.onended = () => {
+        this.isPlaying = false;
+        this.isProcessingQueue = false;
+        this.currentSource = null;
+        this.emit('playbackStopped');
+        // Process next audio in queue if there are more items
+        if (this.audioQueue.length > 0) {
+          setTimeout(() => this.processQueue(), 100);
+        }
+      };
+      // Start playback
+      source.start();
+    } catch (error) {
+      this.isPlaying = false;
+      this.isProcessingQueue = false;
+      this.currentSource = null;
+      this.emit('playbackError', error);
+      // Try to process next audio in queue if there are more items
+      if (this.audioQueue.length > 0) {
+        setTimeout(() => this.processQueue(), 100);
+      }
+    }
+  }
+  /**
+   * Stop current playback and clear queue
+   */
+  stop() {
+    this.stopImmediate();
+  }
+  /**
+   * Stop current playback immediately and clear queue
+   */
+  stopImmediate() {
+    if (this.currentSource) {
+      try {
+        this.currentSource.stop();
+      } catch (error) {
+        // Ignore errors when stopping
+      }
+      this.currentSource = null;
+    }
+    this.isPlaying = false;
+    this.isProcessingQueue = false;
+    this.audioQueue = [];
+    this.emit('playbackStopped');
+  }
+  /**
+   * Get playback status
+   */
+  getStatus() {
+    return {
+      isPlaying: this.isPlaying,
+      isProcessingQueue: this.isProcessingQueue,
+      queueLength: this.audioQueue.length,
+      audioContextState: this.audioContext ? this.audioContext.state : 'closed'
+    };
+  }
+  /**
+   * Cleanup resources
+   */
+  destroy() {
+    this.stop();
+    if (this.audioContext && this.audioContext.state !== 'closed') {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+  }
+}