npm - ttp-agent-sdk - Versions diffs - 2.1.8 → 2.1.10 - Mend

ttp-agent-sdk 2.1.8 → 2.1.10

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 (18) hide show

package/dist/agent-widget.js +1 -1
package/dist/agent-widget.js.map +1 -1
package/dist/audio-processor.js +1 -0
package/{examples/test.html → dist/examples/test-agent-app.html} +111 -45
package/dist/examples/test-signed-link.html +453 -0
package/{dist/examples/test.html → examples/test-agent-app.html} +111 -45
package/examples/test-signed-link.html +453 -0
package/package.json +1 -1
package/dist/examples/enhanced-widget-examples.html +0 -471
package/dist/examples/multi-platform-examples.html +0 -1119
package/dist/examples/react-example.html +0 -774
package/dist/examples/react-example.jsx +0 -307
package/dist/examples/vanilla-example.html +0 -464
package/examples/enhanced-widget-examples.html +0 -471
package/examples/multi-platform-examples.html +0 -1119
package/examples/react-example.html +0 -774
package/examples/react-example.jsx +0 -307
package/examples/vanilla-example.html +0 -464

package/dist/examples/react-example.html DELETED Viewed

@@ -1,774 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>React VoiceSDK Example - TTP Agent SDK</title>
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-      background: #f8fafc;
-      color: #1e293b;
-      line-height: 1.6;
-    }
-    .container {
-      background: white;
-      padding: 40px;
-      border-radius: 16px;
-      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-      margin-bottom: 30px;
-    }
-    h1 {
-      color: #1e293b;
-      margin-top: 0;
-      font-size: 2.5rem;
-      font-weight: 700;
-      margin-bottom: 10px;
-    }
-    .subtitle {
-      color: #64748b;
-      font-size: 1.2rem;
-      margin-bottom: 30px;
-    }
-    .back-link {
-      display: inline-flex;
-      align-items: center;
-      background: #4f46e5;
-      color: white;
-      padding: 12px 24px;
-      text-decoration: none;
-      border-radius: 8px;
-      font-weight: 600;
-      margin-bottom: 30px;
-      transition: all 0.2s;
-    }
-    .back-link:hover {
-      background: #4338ca;
-      transform: translateY(-1px);
-    }
-    .info {
-      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-      border-left: 4px solid #3b82f6;
-      padding: 20px;
-      margin: 30px 0;
-      border-radius: 8px;
-    }
-    .info strong {
-      color: #1e40af;
-    }
-    .section {
-      margin: 40px 0;
-    }
-    .section h2 {
-      color: #4f46e5;
-      font-size: 1.8rem;
-      margin-bottom: 20px;
-      border-bottom: 2px solid #e2e8f0;
-      padding-bottom: 10px;
-    }
-    .code-container {
-      position: relative;
-      background: #1e293b;
-      border-radius: 12px;
-      overflow: hidden;
-      margin: 20px 0;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    }
-    .code-header {
-      background: #334155;
-      padding: 12px 20px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid #475569;
-    }
-    .code-title {
-      color: #e2e8f0;
-      font-weight: 600;
-      font-size: 14px;
-    }
-    .copy-button {
-      background: #4f46e5;
-      color: white;
-      border: none;
-      padding: 8px 16px;
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .copy-button:hover {
-      background: #4338ca;
-      transform: translateY(-1px);
-    }
-    .copy-button.copied {
-      background: #10b981;
-    }
-    .code-block {
-      background: #1e293b;
-      color: #e2e8f0;
-      padding: 30px;
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-      font-size: 14px;
-      line-height: 1.6;
-      overflow-x: auto;
-      white-space: pre;
-    }
-    .note {
-      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-      border-left: 4px solid #f59e0b;
-      padding: 20px;
-      margin: 30px 0;
-      border-radius: 8px;
-    }
-    .note strong {
-      color: #92400e;
-    }
-    .feature-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 20px;
-      margin: 30px 0;
-    }
-    .feature-card {
-      background: #f8fafc;
-      padding: 24px;
-      border-radius: 12px;
-      border: 1px solid #e2e8f0;
-      transition: all 0.2s;
-    }
-    .feature-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-    }
-    .feature-card h3 {
-      color: #4f46e5;
-      margin-top: 0;
-      font-size: 1.2rem;
-    }
-    .step {
-      background: #f1f5f9;
-      padding: 20px;
-      border-radius: 8px;
-      margin: 20px 0;
-      border-left: 4px solid #4f46e5;
-    }
-    .step-number {
-      background: #4f46e5;
-      color: white;
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: bold;
-      margin-right: 12px;
-    }
-  </style>
-</head>
-<body>
-  <a href="../index.html" class="back-link">
-    ← Back to SDK Home
-  </a>
-  <div class="container">
-    <h1>⚛️ React VoiceSDK Integration</h1>
-    <p class="subtitle">Clean, readable examples for integrating TTP Agent SDK with React</p>
-    <div class="info">
-      <strong>📋 Prerequisites:</strong> This guide assumes you have a React development environment set up.
-      Copy the code examples below and customize them for your application.
-    </div>
-    <div class="section">
-      <h2>🚀 Quick Start</h2>
-      <div class="step">
-        <span class="step-number">1</span>
-        <strong>Install the SDK:</strong>
-        <div class="code-container">
-          <div class="code-header">
-            <span class="code-title">Terminal</span>
-            <button class="copy-button" onclick="copyToClipboard('install-command')">
-              📋 Copy
-            </button>
-          </div>
-          <div class="code-block" id="install-command">npm install ttp-agent-sdk react react-dom</div>
-        </div>
-      </div>
-      <div class="step">
-        <span class="step-number">2</span>
-        <strong>Choose your integration method:</strong>
-      </div>
-    </div>
-    <div class="section">
-      <h2>🎯 Method 1: Basic VoiceSDK Integration</h2>
-      <div class="code-container">
-        <div class="code-header">
-          <span class="code-title">VoiceChat.jsx</span>
-          <button class="copy-button" onclick="copyToClipboard('basic-example')">
-            📋 Copy to LLM
-          </button>
-        </div>
-        <div class="code-block" id="basic-example">import React, { useState, useEffect, useRef } from 'react';
-import { VoiceSDK } from 'ttp-agent-sdk';
-function VoiceChat() {
-  const [isConnected, setIsConnected] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const voiceSDKRef = useRef(null);
-  useEffect(() => {
-    const voiceSDK = new VoiceSDK({
-      websocketUrl: 'wss://speech.talktopc.com/ws/conv',
-      agentId: 'your_agent_id',
-      appId: 'your_app_id'
-    });
-    // Event handlers
-    voiceSDK.on('connected', () => setIsConnected(true));
-    voiceSDK.on('disconnected', () => setIsConnected(false));
-    voiceSDK.on('recordingStarted', () => setIsRecording(true));
-    voiceSDK.on('recordingStopped', () => setIsRecording(false));
-    voiceSDK.on('message', (message) => {
-      if (message.type === 'agent_response') {
-        setMessages(prev => [...prev, {
-          type: 'agent',
-          text: message.agent_response
-        }]);
-      }
-    });
-    voiceSDKRef.current = voiceSDK;
-    return () => voiceSDK.destroy();
-  }, []);
-  const handleConnect = async () => {
-    await voiceSDKRef.current.connect();
-  };
-  const handleToggleRecording = async () => {
-    if (isRecording) {
-      await voiceSDKRef.current.stopRecording();
-    } else {
-      await voiceSDKRef.current.startRecording();
-    }
-  };
-  return (
-    <div>
-      <button onClick={handleConnect} disabled={isConnected}>
-        {isConnected ? 'Connected' : 'Connect'}
-      </button>
-      <button onClick={handleToggleRecording} disabled={!isConnected}>
-        {isRecording ? 'Stop Recording' : 'Start Recording'}
-      </button>
-      <div>
-        {messages.map((msg, i) => (
-          <div key={i}>
-            <strong>{msg.type}:</strong> {msg.text}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-export default VoiceChat;</div>
-      </div>
-    </div>
-    <div class="section">
-      <h2>🎨 Method 2: Using VoiceButton Component</h2>
-      <div class="code-container">
-        <div class="code-header">
-          <span class="code-title">App.jsx</span>
-          <button class="copy-button" onclick="copyToClipboard('voicebutton-example')">
-            📋 Copy to LLM
-          </button>
-        </div>
-        <div class="code-block" id="voicebutton-example">import React from 'react';
-import { VoiceButton } from 'ttp-agent-sdk';
-function App() {
-  return (
-    <div>
-      <h1>My Voice App</h1>
-      <VoiceButton
-        websocketUrl="wss://speech.talktopc.com/ws/conv"
-        agentId="your_agent_id"
-        appId="your_app_id"
-        onConnected={() => console.log('Connected!')}
-        onRecordingStarted={() => console.log('Recording...')}
-        onPlaybackStarted={() => console.log('Playing audio...')}
-      />
-    </div>
-  );
-}
-export default App;</div>
-      </div>
-    </div>
-    <div class="section">
-      <h2>🔧 Method 3: Enhanced AgentWidget (Recommended)</h2>
-      <div class="code-container">
-        <div class="code-header">
-          <span class="code-title">VoiceWidget.jsx</span>
-          <button class="copy-button" onclick="copyToClipboard('enhanced-example')">
-            📋 Copy to LLM
-          </button>
-        </div>
-        <div class="code-block" id="enhanced-example">import React, { useEffect, useRef } from 'react';
-import { EnhancedAgentWidget } from 'ttp-agent-sdk';
-function VoiceWidget() {
-  const widgetRef = useRef(null);
-  useEffect(() => {
-    if (widgetRef.current) return;
-    widgetRef.current = new EnhancedAgentWidget({
-      agentId: 'your_agent_id',
-      // Get signed URL from your backend
-      getSessionUrl: async ({ agentId, variables }) => {
-        const response = await fetch('/api/get-voice-session', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
-          },
-          body: JSON.stringify({ agentId, variables })
-        });
-        const data = await response.json();
-        return data.signedUrl;
-      },
-      // Customize the widget
-      icon: {
-        type: 'custom',
-        customImage: '/your-logo.png',
-        size: 'large'
-      },
-      button: {
-        primaryColor: '#4f46e5',
-        hoverColor: '#4338ca',
-        size: 'large'
-      },
-      position: {
-        vertical: 'bottom',
-        horizontal: 'right',
-        offset: { x: 30, y: 30 }
-      },
-      variables: {
-        userId: localStorage.getItem('userId'),
-        page: 'homepage'
-      }
-    });
-    return () => {
-      if (widgetRef.current) {
-        widgetRef.current.destroy();
-        widgetRef.current = null;
-      }
-    };
-  }, []);
-  return null; // Widget renders itself
-}
-export default VoiceWidget;</div>
-      </div>
-    </div>
-    <div class="section">
-      <h2>🏗️ Complete App Example</h2>
-      <div class="code-container">
-        <div class="code-header">
-          <span class="code-title">CompleteVoiceApp.jsx</span>
-          <button class="copy-button" onclick="copyToClipboard('complete-example')">
-            📋 Copy to LLM
-          </button>
-        </div>
-        <div class="code-block" id="complete-example">import React, { useState, useEffect, useRef } from 'react';
-import { VoiceSDK } from 'ttp-agent-sdk';
-function CompleteVoiceApp() {
-  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);
-  useEffect(() => {
-    const voiceSDK = new VoiceSDK({
-      websocketUrl: 'wss://speech.talktopc.com/ws/conv',
-      agentId: 'your_agent_id',
-      appId: 'your_app_id',
-      voice: 'default',
-      language: 'en',
-      autoReconnect: true
-    });
-    // Comprehensive 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;
-    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' }}>
-      <h1>🎤 Voice Chat App</h1>
-      {/* Status Indicator */}
-      <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>
-      {/* Control Buttons */}
-      <div style={{ display: 'flex', gap: '12px', marginBottom: '20px' }}>
-        <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>
-      {/* Messages Area */}
-      <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 CompleteVoiceApp;</div>
-      </div>
-    </div>
-    <div class="feature-grid">
-      <div class="feature-card">
-        <h3>🎯 Method 1: Basic VoiceSDK</h3>
-        <p>Direct integration with VoiceSDK class. Full control over events and state management.</p>
-      </div>
-      <div class="feature-card">
-        <h3>🎨 Method 2: VoiceButton</h3>
-        <p>Pre-built React component. Quick integration with minimal code.</p>
-      </div>
-      <div class="feature-card">
-        <h3>🔧 Method 3: Enhanced Widget</h3>
-        <p>Advanced customizable widget with signed link authentication. Production-ready.</p>
-      </div>
-    </div>
-    <div class="note">
-      <strong>💡 Pro Tip:</strong> For production applications, use Method 3 (Enhanced AgentWidget) with signed link authentication.
-      It provides the best security, customization options, and user experience.
-    </div>
-  </div>
-  <script>
-    function copyToClipboard(elementId) {
-      const element = document.getElementById(elementId);
-      const text = element.textContent;
-      navigator.clipboard.writeText(text).then(() => {
-        const button = element.parentElement.querySelector('.copy-button');
-        const originalText = button.textContent;
-        button.textContent = '✅ Copied!';
-        button.classList.add('copied');
-        setTimeout(() => {
-          button.textContent = originalText;
-          button.classList.remove('copied');
-        }, 2000);
-      }).catch(err => {
-        console.error('Failed to copy: ', err);
-        alert('Failed to copy to clipboard');
-      });
-    }
-  </script>
-</body>
-</html>