ttp-agent-sdk 2.3.21 → 2.3.23

package/dist/examples/demo-v2.html

@@ -524,6 +524,64 @@
 
     }
 
+    
+
+    .variable-item {
+
+      display: grid;
+
+      grid-template-columns: 1fr 1fr auto;
+
+      gap: 10px;
+
+      margin-bottom: 10px;
+
+      align-items: center;
+
+    }
+
+    
+
+    .variable-item input {
+
+      padding: 8px;
+
+      border: 1px solid #ddd;
+
+      border-radius: 6px;
+
+      font-size: 13px;
+
+    }
+
+    
+
+    .variable-item button {
+
+      padding: 8px 12px;
+
+      background: #ef4444;
+
+      color: white;
+
+      border: none;
+
+      border-radius: 6px;
+
+      cursor: pointer;
+
+      font-size: 12px;
+
+    }
+
+    
+
+    .variable-item button:hover {
+
+      background: #dc2626;
+
+    }
+
   </style>
 
 </head>
@@ -543,6 +601,11 @@
     <div class="config-section">
 
       <h2 style="margin-bottom: 15px; font-size: 18px;">⚙️ Configuration</h2>
+      
+      <!-- Mobile Browser Notice -->
+      <div style="background: #fef3c7; border-left: 4px solid #f59e0b; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 13px;">
+        <strong>📱 Mobile Browser Note:</strong> Microphone access requires HTTPS and must be triggered by a direct button tap. If you see permission errors, ensure you're using HTTPS and tap the recording button directly (not from an iframe).
+      </div>
 
       
 
@@ -566,7 +629,7 @@
 
         <label>WebSocket URL</label>
 
-        <input type="text" id="websocketUrl" value="wss://speech.bidme.co.il/ws/conv">
+        <input type="text" id="websocketUrl" value="wss://speech.talktopc.com/ws/conv">
 
       </div>
 
@@ -578,7 +641,7 @@
 
           <label>Agent ID</label>
 
-          <input type="text" id="agentId" value="agent_41eac180c" placeholder="agent-123">
+          <input type="text" id="agentId" value="agent_e5cf06457" placeholder="agent-123">
 
         </div>
 
@@ -594,6 +657,22 @@
 
       
 
+      <!-- Variables Section -->
+      <div class="config-group" style="margin-top: 20px;">
+        <label>Variables (Optional)</label>
+        <div id="variablesContainer" style="background: white; padding: 15px; border-radius: 8px; border: 2px solid #ddd;">
+          <div id="variablesList"></div>
+          <button type="button" id="addVariableBtn" style="margin-top: 10px; padding: 8px 15px; background: #667eea; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 13px;">
+            + Add Variable
+          </button>
+        </div>
+        <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
+          Variables will replace {{VARIABLE_NAME}} placeholders in your agent's prompt
+        </small>
+      </div>
+
+      
+
       <div class="config-row" id="v2OnlyConfig">
 
         <div class="config-group">
@@ -602,9 +681,9 @@
 
           <select id="outputContainer">
 
-            <option value="raw">Raw (No container)</option>
+            <option value="raw" selected>Raw (No container)</option>
 
-            <option value="wav" selected>WAV (With header)</option>
+            <option value="wav">WAV (With header)</option>
 
           </select>
 
@@ -640,13 +719,13 @@
 
             <option value="8000">8 kHz (Telephony)</option>
 
-            <option value="16000" selected>16 kHz (Voice)</option>
+            <option value="16000">16 kHz (Voice)</option>
 
             <option value="22050">22.05 kHz</option>
 
             <option value="24000">24 kHz</option>
 
-            <option value="44100">44.1 kHz (CD Quality)</option>
+            <option value="44100" selected>44.1 kHz (CD Quality)</option>
 
             <option value="48000">48 kHz (Pro)</option>
 
@@ -788,8 +867,8 @@
 
   <!-- Load SDK -->
 
-  <!-- Load SDK as UMD module -->
-  <script src="../agent-widget.js"></script>
+  <!-- Load SDK from local build -->
+  <script src="../dist/agent-widget.js"></script>
 
   <script>
 
@@ -846,6 +925,55 @@
 
     let sdk = null;
 
+    // Variables management
+    let variableCount = 0;
+    const variablesContainer = document.getElementById('variablesContainer');
+    const variablesList = document.getElementById('variablesList');
+    const addVariableBtn = document.getElementById('addVariableBtn');
+
+    function addVariableRow(key = '', value = '') {
+      const id = `var_${variableCount++}`;
+      const row = document.createElement('div');
+      row.className = 'variable-item';
+      row.id = id;
+      row.innerHTML = `
+        <input type="text" placeholder="Variable name (e.g., USER_NAME)" class="var-key" value="${key}" />
+        <input type="text" placeholder="Variable value" class="var-value" value="${value}" />
+        <button type="button" onclick="removeVariable('${id}')">Remove</button>
+      `;
+      variablesList.appendChild(row);
+    }
+
+    window.removeVariable = function(id) {
+      const row = document.getElementById(id);
+      if (row) {
+        row.remove();
+      }
+    };
+
+    function getVariables() {
+      const variables = {};
+      const rows = variablesList.querySelectorAll('.variable-item');
+      rows.forEach(row => {
+        const keyInput = row.querySelector('.var-key');
+        const valueInput = row.querySelector('.var-value');
+        const key = keyInput?.value?.trim();
+        const value = valueInput?.value?.trim();
+        if (key && value) {
+          variables[key] = value;
+        }
+      });
+      return Object.keys(variables).length > 0 ? variables : undefined;
+    }
+
+    // Add initial variable rows
+    addVariableRow('USER_NAME', '');
+    addVariableRow('ACCOUNT_TYPE', '');
+
+    addVariableBtn.addEventListener('click', () => {
+      addVariableRow();
+    });
+
     // Toggle v2-only config visibility
     const sdkVersionSelect = document.getElementById('sdkVersion');
     const v2OnlyConfig = document.getElementById('v2OnlyConfig');
@@ -893,6 +1021,9 @@
         // Get selected SDK version
         const sdkVersion = document.getElementById('sdkVersion').value;
         
+        // Get variables
+        const variables = getVariables();
+        
         // Base config
         const baseConfig = {
           websocketUrl: document.getElementById('websocketUrl').value,
@@ -901,6 +1032,12 @@
           autoReconnect: false
         };
         
+        // Add variables if provided (v2 only)
+        if (sdkVersion === 'v2' && variables) {
+          baseConfig.variables = variables;
+          log(`📝 Using variables: ${Object.keys(variables).join(', ')}`, 'info');
+        }
+        
         let config;
         
         if (sdkVersion === 'v2') {
@@ -1011,21 +1148,14 @@
     
 
     // Record button
-
+    // SDK now handles mobile browser requirements by requesting permission first
     btnRecord.addEventListener('click', async () => {
-
       try {
-
         log('Starting recording...', 'info');
-
         await sdk.startRecording();
-
       } catch (error) {
-
         log(`Error starting recording: ${error.message}`, 'error');
-
       }
-
     });
 
     

package/dist/examples/test-text-chat.html

@@ -315,6 +315,12 @@
           <span class="section-toggle" id="common-toggle">▼</span>
         </div>
         <div class="section-content" id="common-content">
+          <label id="labelAgentId">Agent ID
+            <input id="agentIdInput" type="text" value="agent_87c4a55a1" placeholder="agent_xxxxx" />
+          </label>
+          <label id="labelAppId">App ID
+            <input id="appIdInput" type="text" value="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" placeholder="app_xxxxx" />
+          </label>
           <label id="labelLanguage">Language
             <select id="languageSelect">
               <option value="en">English</option>
@@ -719,7 +725,7 @@
   </div>
 
   <!-- Load the SDK from dist folder -->
-  <script src="../agent-widget.js" data-agent-id="agent_87c4a55a1" data-app-id="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
+  <script src="/dist/agent-widget.js" data-agent-id="agent_87c4a55a1" data-app-id="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
   
   <script>
     // Language selection only affects widget, not page UI
@@ -870,8 +876,8 @@
     
     function getConfigFromForm() {
       return {
-        agentId: 'agent_87c4a55a1',
-        appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
+        agentId: document.getElementById('agentIdInput').value || 'agent_87c4a55a1',
+        appId: document.getElementById('appIdInput').value || 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
         direction: document.getElementById('dirSelect').value,
         language: document.getElementById('languageSelect').value,
         position: document.getElementById('posSelect').value,

package/dist/index.html

@@ -746,7 +746,7 @@ voiceSDK.on('domainError', (error) => {
               </tr>
               <tr>
                 <td><code>sampleRate</code></td>
-                <td>8000, 16000, 24000, 48000 Hz</td>
+                <td>8000, 16000, 22050, 24000, 44100, 48000 Hz</td>
               </tr>
               <tr>
                 <td><code>bitDepth</code></td>
@@ -2451,7 +2451,7 @@ function App() {
                 <td><code>sampleRate</code></td>
                 <td>number</td>
                 <td>No</td>
-                <td>Input audio sample rate: 8000, 16000, 24000, or 48000 Hz (default: 16000)</td>
+                <td>Input audio sample rate: 8000, 16000, 22050, 24000, 44100, or 48000 Hz (default: 16000)</td>
               </tr>
               <tr>
                 <td><code>channels</code></td>
@@ -2523,7 +2523,7 @@ function App() {
             <strong>📋 Format Support:</strong>
             <ul style="margin-top: 10px;">
               <li><strong>Input Encodings:</strong> PCM, PCMU (μ-law), PCMA (A-law)</li>
-              <li><strong>Input Sample Rates:</strong> 8000, 16000, 24000, 48000 Hz</li>
+              <li><strong>Input Sample Rates:</strong> 8000, 16000, 22050, 24000, 44100, 48000 Hz</li>
               <li><strong>Input Bit Depths:</strong> 8, 16, 24 bits</li>
               <li><strong>Output Containers:</strong> 'raw' (no header) or 'wav' (with header)</li>
               <li><strong>Output Encodings:</strong> PCM, PCMU (μ-law), PCMA (A-law)</li>

package/examples/demo-v2.html

@@ -524,6 +524,64 @@
 
     }
 
+    
+
+    .variable-item {
+
+      display: grid;
+
+      grid-template-columns: 1fr 1fr auto;
+
+      gap: 10px;
+
+      margin-bottom: 10px;
+
+      align-items: center;
+
+    }
+
+    
+
+    .variable-item input {
+
+      padding: 8px;
+
+      border: 1px solid #ddd;
+
+      border-radius: 6px;
+
+      font-size: 13px;
+
+    }
+
+    
+
+    .variable-item button {
+
+      padding: 8px 12px;
+
+      background: #ef4444;
+
+      color: white;
+
+      border: none;
+
+      border-radius: 6px;
+
+      cursor: pointer;
+
+      font-size: 12px;
+
+    }
+
+    
+
+    .variable-item button:hover {
+
+      background: #dc2626;
+
+    }
+
   </style>
 
 </head>
@@ -543,6 +601,11 @@
     <div class="config-section">
 
       <h2 style="margin-bottom: 15px; font-size: 18px;">⚙️ Configuration</h2>
+      
+      <!-- Mobile Browser Notice -->
+      <div style="background: #fef3c7; border-left: 4px solid #f59e0b; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 13px;">
+        <strong>📱 Mobile Browser Note:</strong> Microphone access requires HTTPS and must be triggered by a direct button tap. If you see permission errors, ensure you're using HTTPS and tap the recording button directly (not from an iframe).
+      </div>
 
       
 
@@ -566,7 +629,7 @@
 
         <label>WebSocket URL</label>
 
-        <input type="text" id="websocketUrl" value="wss://speech.bidme.co.il/ws/conv">
+        <input type="text" id="websocketUrl" value="wss://speech.talktopc.com/ws/conv">
 
       </div>
 
@@ -578,7 +641,7 @@
 
           <label>Agent ID</label>
 
-          <input type="text" id="agentId" value="agent_41eac180c" placeholder="agent-123">
+          <input type="text" id="agentId" value="agent_e5cf06457" placeholder="agent-123">
 
         </div>
 
@@ -594,6 +657,22 @@
 
       
 
+      <!-- Variables Section -->
+      <div class="config-group" style="margin-top: 20px;">
+        <label>Variables (Optional)</label>
+        <div id="variablesContainer" style="background: white; padding: 15px; border-radius: 8px; border: 2px solid #ddd;">
+          <div id="variablesList"></div>
+          <button type="button" id="addVariableBtn" style="margin-top: 10px; padding: 8px 15px; background: #667eea; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 13px;">
+            + Add Variable
+          </button>
+        </div>
+        <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
+          Variables will replace {{VARIABLE_NAME}} placeholders in your agent's prompt
+        </small>
+      </div>
+
+      
+
       <div class="config-row" id="v2OnlyConfig">
 
         <div class="config-group">
@@ -602,9 +681,9 @@
 
           <select id="outputContainer">
 
-            <option value="raw">Raw (No container)</option>
+            <option value="raw" selected>Raw (No container)</option>
 
-            <option value="wav" selected>WAV (With header)</option>
+            <option value="wav">WAV (With header)</option>
 
           </select>
 
@@ -640,13 +719,13 @@
 
             <option value="8000">8 kHz (Telephony)</option>
 
-            <option value="16000" selected>16 kHz (Voice)</option>
+            <option value="16000">16 kHz (Voice)</option>
 
             <option value="22050">22.05 kHz</option>
 
             <option value="24000">24 kHz</option>
 
-            <option value="44100">44.1 kHz (CD Quality)</option>
+            <option value="44100" selected>44.1 kHz (CD Quality)</option>
 
             <option value="48000">48 kHz (Pro)</option>
 
@@ -788,8 +867,8 @@
 
   <!-- Load SDK -->
 
-  <!-- Load SDK as UMD module -->
-  <script src="../agent-widget.js"></script>
+  <!-- Load SDK from local build -->
+  <script src="../dist/agent-widget.js"></script>
 
   <script>
 
@@ -846,6 +925,55 @@
 
     let sdk = null;
 
+    // Variables management
+    let variableCount = 0;
+    const variablesContainer = document.getElementById('variablesContainer');
+    const variablesList = document.getElementById('variablesList');
+    const addVariableBtn = document.getElementById('addVariableBtn');
+
+    function addVariableRow(key = '', value = '') {
+      const id = `var_${variableCount++}`;
+      const row = document.createElement('div');
+      row.className = 'variable-item';
+      row.id = id;
+      row.innerHTML = `
+        <input type="text" placeholder="Variable name (e.g., USER_NAME)" class="var-key" value="${key}" />
+        <input type="text" placeholder="Variable value" class="var-value" value="${value}" />
+        <button type="button" onclick="removeVariable('${id}')">Remove</button>
+      `;
+      variablesList.appendChild(row);
+    }
+
+    window.removeVariable = function(id) {
+      const row = document.getElementById(id);
+      if (row) {
+        row.remove();
+      }
+    };
+
+    function getVariables() {
+      const variables = {};
+      const rows = variablesList.querySelectorAll('.variable-item');
+      rows.forEach(row => {
+        const keyInput = row.querySelector('.var-key');
+        const valueInput = row.querySelector('.var-value');
+        const key = keyInput?.value?.trim();
+        const value = valueInput?.value?.trim();
+        if (key && value) {
+          variables[key] = value;
+        }
+      });
+      return Object.keys(variables).length > 0 ? variables : undefined;
+    }
+
+    // Add initial variable rows
+    addVariableRow('USER_NAME', '');
+    addVariableRow('ACCOUNT_TYPE', '');
+
+    addVariableBtn.addEventListener('click', () => {
+      addVariableRow();
+    });
+
     // Toggle v2-only config visibility
     const sdkVersionSelect = document.getElementById('sdkVersion');
     const v2OnlyConfig = document.getElementById('v2OnlyConfig');
@@ -893,6 +1021,9 @@
         // Get selected SDK version
         const sdkVersion = document.getElementById('sdkVersion').value;
         
+        // Get variables
+        const variables = getVariables();
+        
         // Base config
         const baseConfig = {
           websocketUrl: document.getElementById('websocketUrl').value,
@@ -901,6 +1032,12 @@
           autoReconnect: false
         };
         
+        // Add variables if provided (v2 only)
+        if (sdkVersion === 'v2' && variables) {
+          baseConfig.variables = variables;
+          log(`📝 Using variables: ${Object.keys(variables).join(', ')}`, 'info');
+        }
+        
         let config;
         
         if (sdkVersion === 'v2') {
@@ -1011,21 +1148,14 @@
     
 
     // Record button
-
+    // SDK now handles mobile browser requirements by requesting permission first
     btnRecord.addEventListener('click', async () => {
-
       try {
-
         log('Starting recording...', 'info');
-
         await sdk.startRecording();
-
       } catch (error) {
-
         log(`Error starting recording: ${error.message}`, 'error');
-
       }
-
     });
 
     

package/examples/test-text-chat.html

@@ -315,6 +315,12 @@
           <span class="section-toggle" id="common-toggle">▼</span>
         </div>
         <div class="section-content" id="common-content">
+          <label id="labelAgentId">Agent ID
+            <input id="agentIdInput" type="text" value="agent_87c4a55a1" placeholder="agent_xxxxx" />
+          </label>
+          <label id="labelAppId">App ID
+            <input id="appIdInput" type="text" value="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" placeholder="app_xxxxx" />
+          </label>
           <label id="labelLanguage">Language
             <select id="languageSelect">
               <option value="en">English</option>
@@ -719,7 +725,7 @@
   </div>
 
   <!-- Load the SDK from dist folder -->
-  <script src="../agent-widget.js" data-agent-id="agent_87c4a55a1" data-app-id="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
+  <script src="/dist/agent-widget.js" data-agent-id="agent_87c4a55a1" data-app-id="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
   
   <script>
     // Language selection only affects widget, not page UI
@@ -870,8 +876,8 @@
     
     function getConfigFromForm() {
       return {
-        agentId: 'agent_87c4a55a1',
-        appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
+        agentId: document.getElementById('agentIdInput').value || 'agent_87c4a55a1',
+        appId: document.getElementById('appIdInput').value || 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
         direction: document.getElementById('dirSelect').value,
         language: document.getElementById('languageSelect').value,
         position: document.getElementById('posSelect').value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttp-agent-sdk",
-  "version": "2.3.21",
+  "version": "2.3.23",
   "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",