ttp-agent-sdk 2.0.0

package/dist/examples/react-example.jsx

@@ -0,0 +1,307 @@
+/**
+ * React Example - VoiceSDK Integration
+ * 
+ * This example shows how to use the VoiceSDK with React components
+ * for a modern web application.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { VoiceSDK, VoiceButton } from 'ttp-agent-sdk';
+
+function VoiceChatApp() {
+  const [isConnected, setIsConnected] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [connectionStatus, setConnectionStatus] = useState('Disconnected');
+  
+  const voiceSDKRef = useRef(null);
+
+  // Initialize VoiceSDK
+  useEffect(() => {
+    const voiceSDK = new 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', () => {
+      setIsConnected(true);
+      setConnectionStatus('Connected');
+      addMessage('system', 'Connected to voice agent');
+    });
+
+    voiceSDK.on('disconnected', () => {
+      setIsConnected(false);
+      setIsRecording(false);
+      setIsPlaying(false);
+      setConnectionStatus('Disconnected');
+      addMessage('system', 'Disconnected from voice agent');
+    });
+
+    voiceSDK.on('recordingStarted', () => {
+      setIsRecording(true);
+      addMessage('user', '🎤 Recording...');
+    });
+
+    voiceSDK.on('recordingStopped', () => {
+      setIsRecording(false);
+      addMessage('user', '⏹️ Recording stopped');
+    });
+
+    voiceSDK.on('playbackStarted', () => {
+      setIsPlaying(true);
+      addMessage('agent', '🔊 Agent is speaking...');
+    });
+
+    voiceSDK.on('playbackStopped', () => {
+      setIsPlaying(false);
+    });
+
+    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}`);
+    });
+
+    voiceSDKRef.current = voiceSDK;
+
+    // Cleanup on unmount
+    return () => {
+      if (voiceSDKRef.current) {
+        voiceSDKRef.current.destroy();
+      }
+    };
+  }, []);
+
+  const addMessage = (type, text) => {
+    setMessages(prev => [...prev, { type, text, timestamp: new Date() }]);
+  };
+
+  const handleConnect = async () => {
+    if (voiceSDKRef.current) {
+      try {
+        setConnectionStatus('Connecting...');
+        await voiceSDKRef.current.connect();
+      } catch (error) {
+        console.error('Connection failed:', error);
+        setConnectionStatus('Connection failed');
+      }
+    }
+  };
+
+  const handleDisconnect = () => {
+    if (voiceSDKRef.current) {
+      voiceSDKRef.current.disconnect();
+    }
+  };
+
+  const handleToggleRecording = async () => {
+    if (voiceSDKRef.current) {
+      try {
+        if (isRecording) {
+          await voiceSDKRef.current.stopRecording();
+        } else {
+          await voiceSDKRef.current.startRecording();
+        }
+      } catch (error) {
+        console.error('Recording toggle failed:', error);
+      }
+    }
+  };
+
+  return (
+    <div style={{ 
+      maxWidth: '800px', 
+      margin: '0 auto', 
+      padding: '20px',
+      fontFamily: 'system-ui, -apple-system, sans-serif'
+    }}>
+      <h1>🎤 Voice Chat App</h1>
+      
+      {/* Connection Status */}
+      <div style={{
+        padding: '12px',
+        borderRadius: '8px',
+        marginBottom: '20px',
+        backgroundColor: isConnected ? '#D1FAE5' : '#FEE2E2',
+        color: isConnected ? '#065F46' : '#991B1B',
+        border: `1px solid ${isConnected ? '#10B981' : '#EF4444'}`
+      }}>
+        <strong>Status:</strong> {connectionStatus}
+      </div>
+
+      {/* Controls */}
+      <div style={{ 
+        display: 'flex', 
+        gap: '12px', 
+        marginBottom: '20px',
+        flexWrap: 'wrap'
+      }}>
+        <button
+          onClick={handleConnect}
+          disabled={isConnected}
+          style={{
+            padding: '12px 24px',
+            backgroundColor: isConnected ? '#9CA3AF' : '#4F46E5',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: isConnected ? 'not-allowed' : 'pointer'
+          }}
+        >
+          Connect
+        </button>
+        
+        <button
+          onClick={handleDisconnect}
+          disabled={!isConnected}
+          style={{
+            padding: '12px 24px',
+            backgroundColor: !isConnected ? '#9CA3AF' : '#EF4444',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: !isConnected ? 'not-allowed' : 'pointer'
+          }}
+        >
+          Disconnect
+        </button>
+        
+        <button
+          onClick={handleToggleRecording}
+          disabled={!isConnected}
+          style={{
+            padding: '12px 24px',
+            backgroundColor: !isConnected ? '#9CA3AF' : (isRecording ? '#EF4444' : '#10B981'),
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: !isConnected ? 'not-allowed' : 'pointer'
+          }}
+        >
+          {isRecording ? 'Stop Recording' : 'Start Recording'}
+        </button>
+      </div>
+
+      {/* Voice Button Component */}
+      <div style={{ marginBottom: '20px' }}>
+        <h3>Voice Button Component:</h3>
+        <VoiceButton
+          websocketUrl="wss://speech.bidme.co.il/ws/conv"
+          agentId="demo_agent_123"
+          appId="demo_app_456"
+          onConnected={() => console.log('VoiceButton connected')}
+          onRecordingStarted={() => console.log('VoiceButton recording started')}
+          onPlaybackStarted={() => console.log('VoiceButton playback started')}
+        />
+      </div>
+
+      {/* Messages */}
+      <div style={{
+        border: '1px solid #E5E7EB',
+        borderRadius: '8px',
+        height: '400px',
+        overflowY: 'auto',
+        padding: '16px',
+        backgroundColor: '#F9FAFB'
+      }}>
+        <h3>Messages:</h3>
+        {messages.length === 0 ? (
+          <p style={{ color: '#6B7280', fontStyle: 'italic' }}>
+            No messages yet. Connect and start recording to begin the conversation.
+          </p>
+        ) : (
+          messages.map((message, index) => (
+            <div
+              key={index}
+              style={{
+                marginBottom: '12px',
+                padding: '8px 12px',
+                borderRadius: '6px',
+                backgroundColor: message.type === 'user' ? '#E5E7EB' : 
+                                message.type === 'agent' ? '#F3F4F6' :
+                                message.type === 'error' ? '#FEE2E2' : '#EFF6FF',
+                color: message.type === 'error' ? '#991B1B' : '#111827',
+                alignSelf: message.type === 'user' ? 'flex-end' : 'flex-start',
+                maxWidth: '80%',
+                marginLeft: message.type === 'user' ? 'auto' : '0',
+                marginRight: message.type === 'user' ? '0' : 'auto'
+              }}
+            >
+              <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
+                {message.type === 'user' ? '👤 You' :
+                 message.type === 'agent' ? '🤖 Agent' :
+                 message.type === 'error' ? '❌ Error' : 'ℹ️ System'}
+              </div>
+              <div>{message.text}</div>
+              <div style={{ 
+                fontSize: '12px', 
+                color: '#6B7280', 
+                marginTop: '4px' 
+              }}>
+                {message.timestamp.toLocaleTimeString()}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Status Indicators */}
+      <div style={{ 
+        display: 'flex', 
+        gap: '20px', 
+        marginTop: '20px',
+        fontSize: '14px',
+        color: '#6B7280'
+      }}>
+        <div>
+          <span style={{ 
+            display: 'inline-block', 
+            width: '8px', 
+            height: '8px', 
+            borderRadius: '50%',
+            backgroundColor: isConnected ? '#10B981' : '#EF4444',
+            marginRight: '8px'
+          }}></span>
+          Connection
+        </div>
+        <div>
+          <span style={{ 
+            display: 'inline-block', 
+            width: '8px', 
+            height: '8px', 
+            borderRadius: '50%',
+            backgroundColor: isRecording ? '#EF4444' : '#9CA3AF',
+            marginRight: '8px'
+          }}></span>
+          Recording
+        </div>
+        <div>
+          <span style={{ 
+            display: 'inline-block', 
+            width: '8px', 
+            height: '8px', 
+            borderRadius: '50%',
+            backgroundColor: isPlaying ? '#10B981' : '#9CA3AF',
+            marginRight: '8px'
+          }}></span>
+          Playing
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default VoiceChatApp;

package/dist/examples/test.html

@@ -0,0 +1,235 @@
+<!-- 
+============================================
+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>
+  <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;
+    }
+    
+    .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;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🎤 Voice Agent Widget - Test Page</h1>
+    
+    <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.bidme.co.il</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>Manual Tests:</h2>
+    <button onclick="testConnection()">Test Backend Connection</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>
+    // 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;
+    }
+
+    // Initialize the widget
+    try {
+      console.log('Initializing widget...');
+      console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
+      console.log('TTPAgentSDK.AgentWidget available:', typeof TTPAgentSDK?.AgentWidget);
+      
+      if (typeof TTPAgentSDK === 'undefined') {
+        throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
+      }
+      
+      if (typeof TTPAgentSDK.AgentWidget === 'undefined') {
+        throw new Error('TTPAgentSDK.AgentWidget is not defined. Check the SDK build.');
+      }
+      
+      // Create a new AgentWidget instance
+      const widget = new TTPAgentSDK.AgentWidget({
+        agentId: 'agent_test_123',
+        
+        // Mock backend for local testing (no real backend needed!)
+        getSessionUrl: async ({ agentId, variables }) => {
+          console.log('Requesting session URL for agent:', agentId);
+          console.log('Variables:', variables);
+          
+          updateStatus('Creating mock session URL...', 'info');
+          
+          try {
+            // Simulate a small delay like a real backend
+            await new Promise(resolve => setTimeout(resolve, 500));
+            
+            // Create a mock WebSocket URL for testing
+            const mockSignedUrl = `wss://speech.bidme.co.il/ws/conv?agentId=${agentId}&appId=test_app_123`;
+            
+            console.log('Generated mock session URL:', mockSignedUrl);
+            updateStatus('Mock session URL created ✓', 'success');
+            
+            return mockSignedUrl;
+          } catch (error) {
+            console.error('Failed to create mock session URL:', error);
+            updateStatus('Failed to create mock session URL ✗', 'error');
+            throw error;
+          }
+        },
+        
+        // Pass some test variables
+        variables: {
+          testMode: true,
+          userName: 'Test User',
+          page: 'test.html'
+        },
+        
+        // Customize appearance
+        primaryColor: '#10B981',
+        position: 'bottom-right'
+      });
+      
+      console.log('Widget initialized successfully!');
+      updateStatus('Widget loaded and ready ✓', 'success');
+      
+    } catch (error) {
+      console.error('Failed to initialize widget:', error);
+      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.');
+      }
+    }
+
+    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>