ttp-agent-sdk 2.1.12 → 2.1.13

package/dist/examples/test-agent-app.html

@@ -84,6 +84,54 @@
       font-size: 12px;
       overflow-x: auto;
       margin: 20px 0;
+      white-space: pre;
+    }
+    
+    .code-block pre {
+      margin: 0;
+      font-family: inherit;
+    }
+    
+    .code-block code {
+      font-family: inherit;
+      white-space: pre;
+    }
+    
+    .tabs {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 15px;
+      border-bottom: 2px solid #E5E7EB;
+    }
+    
+    .tab {
+      background: none;
+      border: none;
+      padding: 12px 24px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      color: #6B7280;
+      border-bottom: 3px solid transparent;
+      transition: all 0.2s;
+      margin-bottom: -2px;
+    }
+    
+    .tab:hover {
+      color: #4F46E5;
+    }
+    
+    .tab.active {
+      color: #4F46E5;
+      border-bottom-color: #4F46E5;
+    }
+    
+    .tab-content {
+      display: none;
+    }
+    
+    .tab-content.active {
+      display: block;
     }
   </style>
 </head>
@@ -122,28 +170,157 @@
     </div>
 
     <h2>Implementation Code:</h2>
-    <div class="code-block">
-const widget = new TTPAgentSDK.AgentWidget({
+    <div class="tabs">
+      <button class="tab active" onclick="switchTab('simple')">Simple</button>
+      <button class="tab" onclick="switchTab('advanced')">All Options</button>
+    </div>
+    
+    <div id="simple-tab" class="tab-content active">
+      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
   agentId: 'agent_87c4a55a1',
   appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
   
-  // Direct connection without signed link
-  getSessionUrl: async ({ agentId, appId, variables }) => {
-    // Direct WebSocket URL construction with demo flag
-    const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-    return wsUrl;
-  },
+  primaryColor: '#10B981',
+  position: 'bottom-right'
+});</code></pre></div>
+    </div>
+    
+    <div id="advanced-tab" class="tab-content">
+      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
+  // Required
+  agentId: 'agent_87c4a55a1',
+  appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
+  
+  // Optional: getSessionUrl - only needed for signed links or custom URL logic
+  // getSessionUrl: async ({ agentId, appId, variables }) => {
+  //   const response = await fetch('https://your-backend.com/api/signed-url', {
+  //     method: 'POST',
+  //     headers: { 'Content-Type': 'application/json' },
+  //     body: JSON.stringify({ agentId, appId, variables })
+  //   });
+  //   const data = await response.json();
+  //   return data.signedUrl;
+  // },
+  
+  // Simple styling (backward compatible)
+  primaryColor: '#10B981',
+  position: 'bottom-right', // or use advanced position object below
+  
+  // Advanced Icon Configuration
+  // icon: {
+  //   type: 'microphone', // 'microphone', 'custom', 'emoji', 'text'
+  //   customImage: 'https://example.com/icon.png', // For type: 'custom'
+  //   emoji: '🎤', // For type: 'emoji'
+  //   text: 'AI', // For type: 'text'
+  //   size: 'medium' // 'small', 'medium', 'large', 'xl'
+  // },
+  
+  // Advanced Positioning
+  // position: {
+  //   vertical: 'bottom', // 'top', 'bottom', 'center'
+  //   horizontal: 'right', // 'left', 'right', 'center'
+  //   offset: { x: 20, y: 20 } // Custom offset in pixels
+  // },
+  
+  // Button Configuration
+  // button: {
+  //   size: 'medium', // 'small', 'medium', 'large', 'xl'
+  //   shape: 'circle', // 'circle', 'square', 'rounded'
+  //   primaryColor: '#10B981',
+  //   hoverColor: '#059669',
+  //   activeColor: '#EF4444',
+  //   shadow: true,
+  //   shadowColor: 'rgba(0,0,0,0.15)'
+  // },
+  
+  // Panel Configuration
+  // panel: {
+  //   width: 350,
+  //   height: 500,
+  //   borderRadius: 12,
+  //   backgroundColor: 'rgba(255,255,255,0.95)',
+  //   backdropFilter: 'blur(10px)', // Glass morphism effect
+  //   border: '1px solid rgba(0,0,0,0.1)'
+  // },
+  
+  // Header Configuration
+  // header: {
+  //   title: 'Voice Assistant',
+  //   showTitle: true,
+  //   backgroundColor: null, // Uses button primaryColor if null
+  //   textColor: '#FFFFFF',
+  //   showCloseButton: true
+  // },
+  
+  // Messages Configuration
+  // messages: {
+  //   userBackgroundColor: '#E5E7EB',
+  //   agentBackgroundColor: '#F3F4F6',
+  //   systemBackgroundColor: '#DCFCE7',
+  //   errorBackgroundColor: '#FEE2E2',
+  //   textColor: '#1F2937',
+  //   fontSize: '14px',
+  //   borderRadius: 8
+  // },
+  
+  // Animation Configuration
+  // animation: {
+  //   enableHover: true,
+  //   enablePulse: true,
+  //   enableSlide: true,
+  //   duration: 0.3
+  // },
+  
+  // Behavior Configuration
+  // behavior: {
+  //   autoOpen: false, // Automatically open panel on load
+  //   autoConnect: false, // Automatically connect on load
+  //   showWelcomeMessage: true,
+  //   welcomeMessage: 'Hello! How can I help you today?'
+  // },
   
+  // Accessibility Configuration
+  // accessibility: {
+  //   ariaLabel: 'Voice Assistant',
+  //   ariaDescription: 'Click to open voice assistant',
+  //   keyboardNavigation: true // ESC key to close
+  // },
+  
+  // Custom CSS
+  // customStyles: `
+  //   #agent-widget {
+  //     /* Your custom CSS here */
+  //   }
+  // `,
+  
+  // Variables for your agent/backend
   variables: {
     testMode: true,
     userName: 'Test User',
     page: 'test-agent-app.html'
-  },
-  
-  primaryColor: '#10B981',
-  position: 'bottom-right'
-});
+  }
+});</code></pre></div>
     </div>
+    
+    <script>
+      function switchTab(tabName) {
+        // Hide all tab contents
+        document.querySelectorAll('.tab-content').forEach(content => {
+          content.classList.remove('active');
+        });
+        
+        // Remove active class from all tabs
+        document.querySelectorAll('.tab').forEach(tab => {
+          tab.classList.remove('active');
+        });
+        
+        // Show selected tab content
+        document.getElementById(tabName + '-tab').classList.add('active');
+        
+        // Add active class to clicked tab
+        event.target.classList.add('active');
+      }
+    </script>
 
     <h2>Manual Tests:</h2>
     <button onclick="testMicButton()">Test Mic Button Click</button>
@@ -200,34 +377,16 @@ const widget = new TTPAgentSDK.AgentWidget({
       }
       
       // Create a new AgentWidget instance with agent ID + app ID
+      // getSessionUrl is now OPTIONAL - widget will auto-construct URL from agentId/appId
       const widget = new TTPAgentSDK.AgentWidget({
         agentId: 'agent_87c4a55a1',
         appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
         
-        // Direct connection without signed link
-        getSessionUrl: async ({ agentId, appId, variables }) => {
-          console.log('Creating direct session URL for agent:', agentId);
-          console.log('App ID:', appId);
-          console.log('Variables:', variables);
-          
-          updateStatus('Creating direct session URL...', 'info');
-          
-          try {
-            // Direct WebSocket URL construction with demo flag
-            const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-            
-            console.log('Generated direct session URL:', wsUrl);
-            updateStatus('Direct session URL created ✓', 'success');
-            
-            return wsUrl;
-          } catch (error) {
-            console.error('Failed to create direct session URL:', error);
-            updateStatus('Failed to create direct session URL ✗', 'error');
-            throw error;
-          }
-        },
+        // getSessionUrl is OPTIONAL - omitted here, so widget auto-constructs the WebSocket URL
+        // If you need signed links or custom URL logic, you can provide it:
+        // getSessionUrl: async ({ agentId, appId, variables }) => { ... }
         
-        // Pass some test variables
+        // Optional: Pass variables for your agent/backend
         variables: {
           testMode: true,
           userName: 'Test User',
@@ -235,9 +394,17 @@ const widget = new TTPAgentSDK.AgentWidget({
           connectionType: 'direct'
         },
         
-        // Customize appearance
+        // Customize appearance (using simple config - backward compatible)
         primaryColor: '#10B981',
-        position: 'bottom-right'
+        position: 'bottom-right',
+        
+        // Enhanced features are now available but using defaults
+        // You can optionally add:
+        // icon: { type: 'emoji', emoji: '🎤', size: 'large' },
+        // button: { size: 'large', shape: 'circle' },
+        // panel: { width: 400, height: 600 },
+        // header: { title: 'My Voice Assistant' },
+        // animation: { enableHover: true, enablePulse: true }
       });
       
       // Store widget reference for testing (like the working implementation)

package/dist/examples/test.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="refresh" content="0; url=test-agent-app.html">
+  <title>Redirecting to Test Page...</title>
+  <script>
+    // Immediate redirect
+    window.location.href = 'test-agent-app.html';
+  </script>
+</head>
+<body>
+  <p>If you are not redirected automatically, <a href="test-agent-app.html">click here</a>.</p>
+</body>
+</html>
+

package/dist/index.html

@@ -167,7 +167,7 @@
   });
 </script>
             </div>
-            <a href="examples/test.html" class="demo-button">Try Widget Demo</a>
+            <a href="examples/test-agent-app.html" class="demo-button">Try Widget Demo</a>
         </div>
 
         <div class="card">

package/examples/test-agent-app.html

@@ -84,6 +84,54 @@
       font-size: 12px;
       overflow-x: auto;
       margin: 20px 0;
+      white-space: pre;
+    }
+    
+    .code-block pre {
+      margin: 0;
+      font-family: inherit;
+    }
+    
+    .code-block code {
+      font-family: inherit;
+      white-space: pre;
+    }
+    
+    .tabs {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 15px;
+      border-bottom: 2px solid #E5E7EB;
+    }
+    
+    .tab {
+      background: none;
+      border: none;
+      padding: 12px 24px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      color: #6B7280;
+      border-bottom: 3px solid transparent;
+      transition: all 0.2s;
+      margin-bottom: -2px;
+    }
+    
+    .tab:hover {
+      color: #4F46E5;
+    }
+    
+    .tab.active {
+      color: #4F46E5;
+      border-bottom-color: #4F46E5;
+    }
+    
+    .tab-content {
+      display: none;
+    }
+    
+    .tab-content.active {
+      display: block;
     }
   </style>
 </head>
@@ -122,28 +170,157 @@
     </div>
 
     <h2>Implementation Code:</h2>
-    <div class="code-block">
-const widget = new TTPAgentSDK.AgentWidget({
+    <div class="tabs">
+      <button class="tab active" onclick="switchTab('simple')">Simple</button>
+      <button class="tab" onclick="switchTab('advanced')">All Options</button>
+    </div>
+    
+    <div id="simple-tab" class="tab-content active">
+      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
   agentId: 'agent_87c4a55a1',
   appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
   
-  // Direct connection without signed link
-  getSessionUrl: async ({ agentId, appId, variables }) => {
-    // Direct WebSocket URL construction with demo flag
-    const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-    return wsUrl;
-  },
+  primaryColor: '#10B981',
+  position: 'bottom-right'
+});</code></pre></div>
+    </div>
+    
+    <div id="advanced-tab" class="tab-content">
+      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
+  // Required
+  agentId: 'agent_87c4a55a1',
+  appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
+  
+  // Optional: getSessionUrl - only needed for signed links or custom URL logic
+  // getSessionUrl: async ({ agentId, appId, variables }) => {
+  //   const response = await fetch('https://your-backend.com/api/signed-url', {
+  //     method: 'POST',
+  //     headers: { 'Content-Type': 'application/json' },
+  //     body: JSON.stringify({ agentId, appId, variables })
+  //   });
+  //   const data = await response.json();
+  //   return data.signedUrl;
+  // },
+  
+  // Simple styling (backward compatible)
+  primaryColor: '#10B981',
+  position: 'bottom-right', // or use advanced position object below
+  
+  // Advanced Icon Configuration
+  // icon: {
+  //   type: 'microphone', // 'microphone', 'custom', 'emoji', 'text'
+  //   customImage: 'https://example.com/icon.png', // For type: 'custom'
+  //   emoji: '🎤', // For type: 'emoji'
+  //   text: 'AI', // For type: 'text'
+  //   size: 'medium' // 'small', 'medium', 'large', 'xl'
+  // },
+  
+  // Advanced Positioning
+  // position: {
+  //   vertical: 'bottom', // 'top', 'bottom', 'center'
+  //   horizontal: 'right', // 'left', 'right', 'center'
+  //   offset: { x: 20, y: 20 } // Custom offset in pixels
+  // },
+  
+  // Button Configuration
+  // button: {
+  //   size: 'medium', // 'small', 'medium', 'large', 'xl'
+  //   shape: 'circle', // 'circle', 'square', 'rounded'
+  //   primaryColor: '#10B981',
+  //   hoverColor: '#059669',
+  //   activeColor: '#EF4444',
+  //   shadow: true,
+  //   shadowColor: 'rgba(0,0,0,0.15)'
+  // },
+  
+  // Panel Configuration
+  // panel: {
+  //   width: 350,
+  //   height: 500,
+  //   borderRadius: 12,
+  //   backgroundColor: 'rgba(255,255,255,0.95)',
+  //   backdropFilter: 'blur(10px)', // Glass morphism effect
+  //   border: '1px solid rgba(0,0,0,0.1)'
+  // },
+  
+  // Header Configuration
+  // header: {
+  //   title: 'Voice Assistant',
+  //   showTitle: true,
+  //   backgroundColor: null, // Uses button primaryColor if null
+  //   textColor: '#FFFFFF',
+  //   showCloseButton: true
+  // },
+  
+  // Messages Configuration
+  // messages: {
+  //   userBackgroundColor: '#E5E7EB',
+  //   agentBackgroundColor: '#F3F4F6',
+  //   systemBackgroundColor: '#DCFCE7',
+  //   errorBackgroundColor: '#FEE2E2',
+  //   textColor: '#1F2937',
+  //   fontSize: '14px',
+  //   borderRadius: 8
+  // },
+  
+  // Animation Configuration
+  // animation: {
+  //   enableHover: true,
+  //   enablePulse: true,
+  //   enableSlide: true,
+  //   duration: 0.3
+  // },
+  
+  // Behavior Configuration
+  // behavior: {
+  //   autoOpen: false, // Automatically open panel on load
+  //   autoConnect: false, // Automatically connect on load
+  //   showWelcomeMessage: true,
+  //   welcomeMessage: 'Hello! How can I help you today?'
+  // },
   
+  // Accessibility Configuration
+  // accessibility: {
+  //   ariaLabel: 'Voice Assistant',
+  //   ariaDescription: 'Click to open voice assistant',
+  //   keyboardNavigation: true // ESC key to close
+  // },
+  
+  // Custom CSS
+  // customStyles: `
+  //   #agent-widget {
+  //     /* Your custom CSS here */
+  //   }
+  // `,
+  
+  // Variables for your agent/backend
   variables: {
     testMode: true,
     userName: 'Test User',
     page: 'test-agent-app.html'
-  },
-  
-  primaryColor: '#10B981',
-  position: 'bottom-right'
-});
+  }
+});</code></pre></div>
     </div>
+    
+    <script>
+      function switchTab(tabName) {
+        // Hide all tab contents
+        document.querySelectorAll('.tab-content').forEach(content => {
+          content.classList.remove('active');
+        });
+        
+        // Remove active class from all tabs
+        document.querySelectorAll('.tab').forEach(tab => {
+          tab.classList.remove('active');
+        });
+        
+        // Show selected tab content
+        document.getElementById(tabName + '-tab').classList.add('active');
+        
+        // Add active class to clicked tab
+        event.target.classList.add('active');
+      }
+    </script>
 
     <h2>Manual Tests:</h2>
     <button onclick="testMicButton()">Test Mic Button Click</button>
@@ -200,34 +377,16 @@ const widget = new TTPAgentSDK.AgentWidget({
       }
       
       // Create a new AgentWidget instance with agent ID + app ID
+      // getSessionUrl is now OPTIONAL - widget will auto-construct URL from agentId/appId
       const widget = new TTPAgentSDK.AgentWidget({
         agentId: 'agent_87c4a55a1',
         appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
         
-        // Direct connection without signed link
-        getSessionUrl: async ({ agentId, appId, variables }) => {
-          console.log('Creating direct session URL for agent:', agentId);
-          console.log('App ID:', appId);
-          console.log('Variables:', variables);
-          
-          updateStatus('Creating direct session URL...', 'info');
-          
-          try {
-            // Direct WebSocket URL construction with demo flag
-            const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-            
-            console.log('Generated direct session URL:', wsUrl);
-            updateStatus('Direct session URL created ✓', 'success');
-            
-            return wsUrl;
-          } catch (error) {
-            console.error('Failed to create direct session URL:', error);
-            updateStatus('Failed to create direct session URL ✗', 'error');
-            throw error;
-          }
-        },
+        // getSessionUrl is OPTIONAL - omitted here, so widget auto-constructs the WebSocket URL
+        // If you need signed links or custom URL logic, you can provide it:
+        // getSessionUrl: async ({ agentId, appId, variables }) => { ... }
         
-        // Pass some test variables
+        // Optional: Pass variables for your agent/backend
         variables: {
           testMode: true,
           userName: 'Test User',
@@ -235,9 +394,17 @@ const widget = new TTPAgentSDK.AgentWidget({
           connectionType: 'direct'
         },
         
-        // Customize appearance
+        // Customize appearance (using simple config - backward compatible)
         primaryColor: '#10B981',
-        position: 'bottom-right'
+        position: 'bottom-right',
+        
+        // Enhanced features are now available but using defaults
+        // You can optionally add:
+        // icon: { type: 'emoji', emoji: '🎤', size: 'large' },
+        // button: { size: 'large', shape: 'circle' },
+        // panel: { width: 400, height: 600 },
+        // header: { title: 'My Voice Assistant' },
+        // animation: { enableHover: true, enablePulse: true }
       });
       
       // Store widget reference for testing (like the working implementation)

package/examples/test.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="refresh" content="0; url=test-agent-app.html">
+  <title>Redirecting to Test Page...</title>
+  <script>
+    // Immediate redirect
+    window.location.href = 'test-agent-app.html';
+  </script>
+</head>
+<body>
+  <p>If you are not redirected automatically, <a href="test-agent-app.html">click here</a>.</p>
+</body>
+</html>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttp-agent-sdk",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "Comprehensive Voice Agent SDK with Enhanced Customizable Widget - Real-time audio, WebSocket communication, React components, and extensive customization options",
   "main": "dist/agent-widget.js",
   "module": "dist/agent-widget.js",