ttp-agent-sdk 2.5.8 → 2.13.0

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

@@ -392,18 +392,19 @@
               <option value="rounded">Rounded</option>
             </select>
           </label>
-          <label>Button Color
+          <label>Button Color (Widget default: #FFFFFF)
             <div style="display: flex; gap: 8px; align-items: center;">
-              <input id="buttonBgColor" type="color" value="#7C3AED" />
-              <div id="buttonBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #7C3AED; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
-              <span id="buttonBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#7C3AED</span>
+              <input id="buttonBgColor" type="color" value="#FFFFFF" />
+              <div id="buttonBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #FFFFFF; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
+              <span id="buttonBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#FFFFFF</span>
             </div>
           </label>
-          <label>Button Hover Color
+          <label>Button Hover Color (Optional - leave as default for no hover color change)
             <div style="display: flex; gap: 8px; align-items: center;">
-              <input id="buttonHoverColor" type="color" value="#059669" />
-              <div id="buttonHoverColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #059669; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
-              <span id="buttonHoverColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#059669</span>
+              <input id="buttonHoverColor" type="color" value="#F5F5F5" />
+              <div id="buttonHoverColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #F5F5F5; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
+              <span id="buttonHoverColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#F5F5F5</span>
+              <button type="button" onclick="clearHoverColor()" style="padding: 4px 8px; font-size: 12px; background: #E5E7EB; border: 1px solid #D1D5DB; border-radius: 4px; cursor: pointer;">Clear</button>
             </div>
           </label>
           
@@ -728,8 +729,8 @@
     </div>
   </div>
 
-  <!-- Load the SDK from dist folder -->
-  <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>
+  <!-- Load the SDK from CDN -->
+  <script src="https://cdn.talktopc.com/agent-widget.js" data-agent-id="agent_87c4a55a1" data-app-id="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" onload="console.log('SDK script loaded successfully, TTPAgentSDK:', typeof window.TTPAgentSDK)" onerror="console.error('Failed to load SDK script')"></script>
   
   <script>
     // Language selection only affects widget, not page UI
@@ -803,6 +804,18 @@
         
         // Add event listener to update value when color changes
         input.addEventListener('input', updateDisplay);
+        
+        // Special handling for hover color - clear the "cleared" flag when user changes it
+        if (input.id === 'buttonHoverColor') {
+          input.addEventListener('change', function() {
+            // User changed the color, so enable hover color again
+            delete input.dataset.cleared;
+            const valueSpan = document.getElementById('buttonHoverColorValue');
+            if (valueSpan && valueSpan.textContent.includes('(disabled)')) {
+              valueSpan.textContent = input.value.toUpperCase();
+            }
+          });
+        }
       });
     }
     
@@ -836,6 +849,24 @@
       initializeUI();
     }
     
+    // Clear hover color (set to empty to test no hover color behavior)
+    function clearHoverColor() {
+      const hoverColorInput = document.getElementById('buttonHoverColor');
+      const colorBox = document.getElementById('buttonHoverColorColorBox');
+      const valueSpan = document.getElementById('buttonHoverColorValue');
+      
+      // Set a special flag to indicate it's cleared
+      hoverColorInput.dataset.cleared = 'true';
+      hoverColorInput.value = '#F5F5F5'; // Reset to default for display
+      if (colorBox) colorBox.style.background = '#F5F5F5';
+      if (valueSpan) valueSpan.textContent = '#F5F5F5 (disabled)';
+      
+      // Apply changes to widget
+      if (window.testWidget) {
+        applyChanges();
+      }
+    }
+    
     // Toggle section collapse
     function toggleSection(sectionId) {
       const content = document.getElementById(sectionId + '-content');
@@ -866,6 +897,10 @@
         window.testWidget.destroy();
       }
       
+      const TTPAgentSDK = window.TTPAgentSDK;
+      if (!TTPAgentSDK || !TTPAgentSDK.TTPChatWidget) {
+        throw new Error('TTPAgentSDK.TTPChatWidget is not available');
+      }
       window.testWidget = new TTPAgentSDK.TTPChatWidget(config);
       widget = window.testWidget;
       
@@ -911,20 +946,19 @@
           connectionType: 'text_chat'
         },
         
-        primaryColor: document.getElementById('buttonBgColor').value || '#7C3AED',
+        primaryColor: document.getElementById('buttonBgColor').value || '#FFFFFF',
         
         icon: {
           type: 'custom',
           customImage: 'https://talktopc.com/logo192.png',
           size: document.getElementById('buttonSize').value,
-          backgroundColor: '#FFFFFF'
+          backgroundColor: document.getElementById('buttonBgColor').value || '#FFFFFF' // Widget default: white
         },
         
         button: {
           size: document.getElementById('buttonSize').value,
           shape: document.getElementById('buttonShape').value,
-          backgroundColor: '#FFFFFF', // Use white to match icon background
-          hoverColor: document.getElementById('buttonHoverColor').value
+          backgroundColor: document.getElementById('buttonBgColor').value || '#FFFFFF' // Widget default: white
         },
         
         panel: {
@@ -1036,6 +1070,14 @@
         }
       };
       
+      // Only include hoverColor if user has set a custom value (not default #7C3AED)
+      // If hoverColor is not included, widget will keep original color on hover
+      const hoverColorInput = document.getElementById('buttonHoverColor');
+      const defaultHoverColor = '#F5F5F5'; // Off-white default
+      if (hoverColorInput && hoverColorInput.value !== defaultHoverColor && hoverColorInput.dataset.cleared !== 'true') {
+        config.button.hoverColor = hoverColorInput.value;
+      }
+      
       // If signed URL is provided, use it directly
       if (signedUrl) {
         config.signedUrl = signedUrl;
@@ -1101,29 +1143,46 @@
       });
     }
     
-    try {
+    // Wait for SDK to load
+    function waitForSDK() {
+      return new Promise((resolve, reject) => {
+        // Check if already loaded
+        if (typeof window.TTPAgentSDK !== 'undefined' && window.TTPAgentSDK?.TTPChatWidget) {
+          resolve(window.TTPAgentSDK);
+          return;
+        }
+        
+        // Wait for script to load
+        let attempts = 0;
+        const maxAttempts = 50; // 5 seconds max wait
+        const checkInterval = setInterval(() => {
+          attempts++;
+          if (typeof window.TTPAgentSDK !== 'undefined' && window.TTPAgentSDK?.TTPChatWidget) {
+            clearInterval(checkInterval);
+            resolve(window.TTPAgentSDK);
+          } else if (attempts >= maxAttempts) {
+            clearInterval(checkInterval);
+            reject(new Error('TTPAgentSDK failed to load after 5 seconds'));
+          }
+        }, 100);
+      });
+    }
+    
+    waitForSDK().then((TTPAgentSDK) => {
       console.log('Initializing TTP Chat Widget...');
       console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
       console.log('TTPAgentSDK.TTPChatWidget available:', typeof TTPAgentSDK?.TTPChatWidget);
       
-      if (typeof TTPAgentSDK === 'undefined') {
-        throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
-      }
-      
-      if (typeof TTPAgentSDK.TTPChatWidget === 'undefined') {
-        throw new Error('TTPAgentSDK.TTPChatWidget is not defined. Check the SDK build.');
-      }
-      
       // Create initial widget
       createWidget(getConfigFromForm());
       
       // Set up event handlers
       document.getElementById('resetBtn').onclick = () => window.location.reload();
       
-    } catch (error) {
+    }).catch((error) => {
       console.error('Failed to initialize widget:', error);
       updateStatus('Widget failed to load: ' + error.message, 'error');
-    }
+    });
   </script>
 </body>
 </html>

package/examples/test-text-chat.html

@@ -392,18 +392,19 @@
               <option value="rounded">Rounded</option>
             </select>
           </label>
-          <label>Button Color
+          <label>Button Color (Widget default: #FFFFFF)
             <div style="display: flex; gap: 8px; align-items: center;">
-              <input id="buttonBgColor" type="color" value="#7C3AED" />
-              <div id="buttonBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #7C3AED; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
-              <span id="buttonBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#7C3AED</span>
+              <input id="buttonBgColor" type="color" value="#FFFFFF" />
+              <div id="buttonBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #FFFFFF; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
+              <span id="buttonBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#FFFFFF</span>
             </div>
           </label>
-          <label>Button Hover Color
+          <label>Button Hover Color (Optional - leave as default for no hover color change)
             <div style="display: flex; gap: 8px; align-items: center;">
-              <input id="buttonHoverColor" type="color" value="#059669" />
-              <div id="buttonHoverColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #059669; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
-              <span id="buttonHoverColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#059669</span>
+              <input id="buttonHoverColor" type="color" value="#F5F5F5" />
+              <div id="buttonHoverColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #F5F5F5; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
+              <span id="buttonHoverColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#F5F5F5</span>
+              <button type="button" onclick="clearHoverColor()" style="padding: 4px 8px; font-size: 12px; background: #E5E7EB; border: 1px solid #D1D5DB; border-radius: 4px; cursor: pointer;">Clear</button>
             </div>
           </label>
           
@@ -728,8 +729,8 @@
     </div>
   </div>
 
-  <!-- Load the SDK from dist folder -->
-  <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>
+  <!-- Load the SDK from CDN -->
+  <script src="https://cdn.talktopc.com/agent-widget.js" data-agent-id="agent_87c4a55a1" data-app-id="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" onload="console.log('SDK script loaded successfully, TTPAgentSDK:', typeof window.TTPAgentSDK)" onerror="console.error('Failed to load SDK script')"></script>
   
   <script>
     // Language selection only affects widget, not page UI
@@ -803,6 +804,18 @@
         
         // Add event listener to update value when color changes
         input.addEventListener('input', updateDisplay);
+        
+        // Special handling for hover color - clear the "cleared" flag when user changes it
+        if (input.id === 'buttonHoverColor') {
+          input.addEventListener('change', function() {
+            // User changed the color, so enable hover color again
+            delete input.dataset.cleared;
+            const valueSpan = document.getElementById('buttonHoverColorValue');
+            if (valueSpan && valueSpan.textContent.includes('(disabled)')) {
+              valueSpan.textContent = input.value.toUpperCase();
+            }
+          });
+        }
       });
     }
     
@@ -836,6 +849,24 @@
       initializeUI();
     }
     
+    // Clear hover color (set to empty to test no hover color behavior)
+    function clearHoverColor() {
+      const hoverColorInput = document.getElementById('buttonHoverColor');
+      const colorBox = document.getElementById('buttonHoverColorColorBox');
+      const valueSpan = document.getElementById('buttonHoverColorValue');
+      
+      // Set a special flag to indicate it's cleared
+      hoverColorInput.dataset.cleared = 'true';
+      hoverColorInput.value = '#F5F5F5'; // Reset to default for display
+      if (colorBox) colorBox.style.background = '#F5F5F5';
+      if (valueSpan) valueSpan.textContent = '#F5F5F5 (disabled)';
+      
+      // Apply changes to widget
+      if (window.testWidget) {
+        applyChanges();
+      }
+    }
+    
     // Toggle section collapse
     function toggleSection(sectionId) {
       const content = document.getElementById(sectionId + '-content');
@@ -866,6 +897,10 @@
         window.testWidget.destroy();
       }
       
+      const TTPAgentSDK = window.TTPAgentSDK;
+      if (!TTPAgentSDK || !TTPAgentSDK.TTPChatWidget) {
+        throw new Error('TTPAgentSDK.TTPChatWidget is not available');
+      }
       window.testWidget = new TTPAgentSDK.TTPChatWidget(config);
       widget = window.testWidget;
       
@@ -911,20 +946,19 @@
           connectionType: 'text_chat'
         },
         
-        primaryColor: document.getElementById('buttonBgColor').value || '#7C3AED',
+        primaryColor: document.getElementById('buttonBgColor').value || '#FFFFFF',
         
         icon: {
           type: 'custom',
           customImage: 'https://talktopc.com/logo192.png',
           size: document.getElementById('buttonSize').value,
-          backgroundColor: '#FFFFFF'
+          backgroundColor: document.getElementById('buttonBgColor').value || '#FFFFFF' // Widget default: white
         },
         
         button: {
           size: document.getElementById('buttonSize').value,
           shape: document.getElementById('buttonShape').value,
-          backgroundColor: '#FFFFFF', // Use white to match icon background
-          hoverColor: document.getElementById('buttonHoverColor').value
+          backgroundColor: document.getElementById('buttonBgColor').value || '#FFFFFF' // Widget default: white
         },
         
         panel: {
@@ -1036,6 +1070,14 @@
         }
       };
       
+      // Only include hoverColor if user has set a custom value (not default #7C3AED)
+      // If hoverColor is not included, widget will keep original color on hover
+      const hoverColorInput = document.getElementById('buttonHoverColor');
+      const defaultHoverColor = '#F5F5F5'; // Off-white default
+      if (hoverColorInput && hoverColorInput.value !== defaultHoverColor && hoverColorInput.dataset.cleared !== 'true') {
+        config.button.hoverColor = hoverColorInput.value;
+      }
+      
       // If signed URL is provided, use it directly
       if (signedUrl) {
         config.signedUrl = signedUrl;
@@ -1101,29 +1143,46 @@
       });
     }
     
-    try {
+    // Wait for SDK to load
+    function waitForSDK() {
+      return new Promise((resolve, reject) => {
+        // Check if already loaded
+        if (typeof window.TTPAgentSDK !== 'undefined' && window.TTPAgentSDK?.TTPChatWidget) {
+          resolve(window.TTPAgentSDK);
+          return;
+        }
+        
+        // Wait for script to load
+        let attempts = 0;
+        const maxAttempts = 50; // 5 seconds max wait
+        const checkInterval = setInterval(() => {
+          attempts++;
+          if (typeof window.TTPAgentSDK !== 'undefined' && window.TTPAgentSDK?.TTPChatWidget) {
+            clearInterval(checkInterval);
+            resolve(window.TTPAgentSDK);
+          } else if (attempts >= maxAttempts) {
+            clearInterval(checkInterval);
+            reject(new Error('TTPAgentSDK failed to load after 5 seconds'));
+          }
+        }, 100);
+      });
+    }
+    
+    waitForSDK().then((TTPAgentSDK) => {
       console.log('Initializing TTP Chat Widget...');
       console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
       console.log('TTPAgentSDK.TTPChatWidget available:', typeof TTPAgentSDK?.TTPChatWidget);
       
-      if (typeof TTPAgentSDK === 'undefined') {
-        throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
-      }
-      
-      if (typeof TTPAgentSDK.TTPChatWidget === 'undefined') {
-        throw new Error('TTPAgentSDK.TTPChatWidget is not defined. Check the SDK build.');
-      }
-      
       // Create initial widget
       createWidget(getConfigFromForm());
       
       // Set up event handlers
       document.getElementById('resetBtn').onclick = () => window.location.reload();
       
-    } catch (error) {
+    }).catch((error) => {
       console.error('Failed to initialize widget:', error);
       updateStatus('Widget failed to load: ' + error.message, 'error');
-    }
+    });
   </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttp-agent-sdk",
-  "version": "2.5.8",
+  "version": "2.13.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.js",