ttp-agent-sdk 2.34.13 → 2.35.0

package/examples/test-text-chat.html

@@ -315,10 +315,6 @@
           <span class="section-toggle" id="common-toggle">▼</span>
         </div>
         <div class="section-content" id="common-content">
-          <label id="labelSignedUrl" style="grid-column: 1/-1;">🔐 Signed URL (Optional - overrides Agent ID/App ID)
-            <input id="signedUrlInput" type="text" value="" placeholder="wss://speech.talktopc.com/ws/conv?signed_token=..." style="width: 100%; font-size: 12px;" />
-            <small style="color: #6B7280; font-size: 12px; margin-top: 4px; display: block;">If provided, this will be used for authentication instead of Agent ID/App ID</small>
-          </label>
           <label id="labelAgentId">Agent ID
             <input id="agentIdInput" type="text" value="agent_87c4a55a1" placeholder="agent_xxxxx" />
           </label>
@@ -914,23 +910,8 @@
     }
     
     function getConfigFromForm() {
-      const signedUrl = document.getElementById('signedUrlInput').value.trim();
-      
-      // Extract agentId and appId from signed URL if present
-      let agentId = document.getElementById('agentIdInput').value || 'agent_87c4a55a1';
-      let appId = document.getElementById('appIdInput').value || 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC';
-      
-      if (signedUrl) {
-        try {
-          const url = new URL(signedUrl);
-          const urlAgentId = url.searchParams.get('agentId');
-          const urlAppId = url.searchParams.get('appId');
-          if (urlAgentId) agentId = urlAgentId;
-          if (urlAppId) appId = urlAppId;
-        } catch (e) {
-          console.warn('Could not parse signed URL:', e);
-        }
-      }
+      const agentId = document.getElementById('agentIdInput').value || 'agent_87c4a55a1';
+      const appId = document.getElementById('appIdInput').value || 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC';
       
       const config = {
         agentId: agentId,
@@ -1078,11 +1059,6 @@
         config.button.hoverColor = hoverColorInput.value;
       }
       
-      // If signed URL is provided, use it directly
-      if (signedUrl) {
-        config.signedUrl = signedUrl;
-      }
-      
       return config;
     }
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttp-agent-sdk",
-  "version": "2.34.13",
+  "version": "2.35.0",
   "description": "Comprehensive Voice Agent SDK with Customizable Widget - Real-time audio, WebSocket communication, React components, and extensive customization options",
   "main": "dist/agent-widget.js",
   "module": "dist/agent-widget.esm.js",
@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "build": "npm run build:umd && npm run build:esm && npm run build:dev",
-    "deploy": "npm run build && npx wrangler pages deploy dist --project-name=ttp-sdk-front",
+    "deploy": "npm run build && npx wrangler pages deploy dist --project-name=ttp-sdk-front --branch=main --commit-dirty=true",
     "deploy:prod": "./deploy-production.sh",
     "build:prod": "webpack --config webpack.config.js",
     "build:dev": "webpack --config webpack.dev.config.js",

package/SIGNED_LINK_GUIDE.md

@@ -1,249 +0,0 @@
-# TTP Agent SDK - Signed Link Authentication Guide
-
-## 🔐 Understanding Signed Links
-
-Signed links provide **secure, production-ready authentication** for your voice agents. Your **UI backend** generates secure, time-limited URLs that the widget uses to connect to the **conversation backend**.
-
-## 🏗️ Architecture Overview
-
-```
-User's Frontend → User's Backend → TTP UI Backend → TTP Conversation Backend
-      ↓               ↓               ↓                    ↓
-   Requests        Requests        Generates           Handles
-   signed URL      signed URL      signed URL          conversation
-      ↑               ↑               ↑                    ↑
-   Receives        Receives        Returns             Validates
-   signed URL      signed URL      signed URL          signed token
-```
-
-**The complete flow:**
-1. **User's Frontend** → requests signed URL from **User's Backend**
-2. **User's Backend** → requests signed URL from **TTP UI Backend** (`/api/public/agents`)
-3. **TTP UI Backend** → generates signed URL and returns to **User's Backend**
-4. **User's Backend** → returns signed URL to **User's Frontend**
-5. **User's Frontend** → connects directly to **TTP Conversation Backend** using signed URL
-
-## 🎯 Why Use Signed Links?
-
-### ❌ **Direct Agent ID (Insecure)**
-```javascript
-// DON'T DO THIS IN PRODUCTION
-new TTPChatWidget({
-  agentId: 'agent_12345', // ❌ Visible in network traffic
-  websocketUrl: 'wss://speech.talktopc.com/ws/conv'
-});
-```
-
-**Problems:**
-- Agent ID exposed in browser network tab
-- No cost control
-- No user-specific permissions
-- Security risk
-
-### ✅ **Signed Link (Secure)**
-```javascript
-// PRODUCTION-READY APPROACH - Option 1: Direct signed URL
-new TTPChatWidget({
-  agentId: 'agent_12345', // Still needed for widget initialization
-  signedUrl: 'wss://speech.talktopc.com/ws/conv?signed_token=eyJ...' // ✅ Direct signed URL
-});
-```
-
-```javascript
-// PRODUCTION-READY APPROACH - Option 2: Get signed URL from backend
-new TTPChatWidget({
-  agentId: 'your_agent_id',
-  signedUrl: async () => {
-    // User's Frontend calls User's Backend
-    const response = await fetch('/api/get-voice-session', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ agentId: 'your_agent_id' })
-    });
-    const data = await response.json();
-    return data.signedUrl; // ✅ Secure, time-limited URL from TTP
-  }
-});
-```
-
-**Benefits:**
-- ✅ Secure authentication
-- ✅ Cost control per user
-- ✅ User-specific permissions
-- ✅ Time-limited access
-- ✅ Production-ready
-
-## 🏗️ Implementation Guide
-
-### Step 1: User's Backend Implementation
-
-Your user's backend should have an endpoint that requests signed URLs from TTP:
-
-```javascript
-// User's Backend (Node.js example)
-app.post('/api/get-voice-session', async (req, res) => {
-  try {
-    const { agentId, variables } = req.body;
-    
-    // Validate user authentication
-    const user = await validateUser(req.headers.authorization);
-    if (!user) {
-      return res.status(401).json({ error: 'Unauthorized' });
-    }
-    
-    // Request signed URL from TTP UI Backend
-    const ttpResponse = await fetch('https://backend.talktopc.com/api/public/agents', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${process.env.TTP_API_KEY}` // Your TTP API key
-      },
-      body: JSON.stringify({
-        agentId,
-        variables: {
-          ...variables,
-          userId: user.id,
-          userEmail: user.email
-        }
-      })
-    });
-    
-    if (!ttpResponse.ok) {
-      throw new Error(`TTP API error: ${ttpResponse.status}`);
-    }
-    
-    const ttpData = await ttpResponse.json();
-    
-    // Return signed URL to user's frontend
-    res.json({
-      signedUrl: ttpData.signedUrl
-    });
-    
-  } catch (error) {
-    console.error('Failed to get signed URL from TTP:', error);
-    res.status(500).json({ error: 'Failed to get voice session' });
-  }
-});
-```
-
-### Step 2: User's Frontend Integration
-
-**Option 1: Direct Signed URL (Simplest)**
-
-```javascript
-import { TTPChatWidget } from 'ttp-agent-sdk';
-
-// Get signed URL from your backend first
-const response = await fetch('/api/get-voice-session', {
-  method: 'POST',
-  headers: {
-    'Content-Type': 'application/json',
-    'Authorization': `Bearer ${getAuthToken()}`
-  },
-  body: JSON.stringify({
-    agentId: 'your_agent_id',
-    variables: {
-      page: 'homepage',
-      userType: 'customer'
-    }
-  })
-});
-
-const data = await response.json();
-
-// Use the signed URL directly
-new TTPChatWidget({
-  agentId: 'your_agent_id', // Still needed for widget initialization
-  signedUrl: data.signedUrl // ✅ Direct signed URL
-});
-```
-
-**Option 2: Function that Returns Signed URL**
-
-```javascript
-import { TTPChatWidget } from 'ttp-agent-sdk';
-
-new TTPChatWidget({
-  agentId: 'your_agent_id',
-  
-  // Function that fetches and returns signed URL
-  signedUrl: async () => {
-    const response = await fetch('/api/get-voice-session', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${getAuthToken()}`
-      },
-      body: JSON.stringify({
-        agentId: 'your_agent_id',
-        variables: {
-          page: 'homepage',
-          userType: 'customer'
-        }
-      })
-    });
-
-    if (!response.ok) {
-      throw new Error(`Your backend responded with ${response.status}`);
-    }
-
-    const data = await response.json();
-    return data.signedUrl; // This connects directly to TTP Conversation Backend
-  }
-});
-```
-
-## 🔧 Your Current Implementation
-
-Based on your setup, you can use signed URLs like this:
-
-```javascript
-// Get signed URL from your backend
-const response = await fetch(buildApiUrl('/api/landing/signed-url'), {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    agentId: 'your_agent_id',
-    variables: {
-      page: 'landing',
-      userType: 'visitor'
-    }
-  })
-});
-
-const data = await response.json();
-
-// Use the signed URL directly
-new TTPChatWidget({
-  agentId: 'your_agent_id',
-  signedUrl: data.signedUrl // ✅ Direct signed URL
-});
-```
-
-## 🎯 Key Points
-
-1. **UI Backend** (`/api/landing/signed-url`):
-   - Handles authentication
-   - Generates signed URLs
-   - Manages user permissions
-   - Controls costs
-
-2. **Conversation Backend** (`wss://speech.talktopc.com/ws/conv`):
-   - Validates signed tokens
-   - Handles voice conversations
-   - Processes audio streams
-
-3. **Frontend Widget**:
-   - Requests signed URL from UI backend
-   - Connects to conversation backend using signed URL
-   - Never exposes agent IDs directly
-
-## 🚀 Production Benefits
-
-- **Security**: Agent IDs never exposed in frontend
-- **Separation**: UI logic separate from conversation logic
-- **Scalability**: Each backend can scale independently
-- **Control**: UI backend controls access and permissions
-- **Monitoring**: Track usage and costs at UI backend level
-
-This architecture ensures your voice agents are secure, scalable, and production-ready! 🎤✨