ttp-agent-sdk 2.18.0 → 2.20.0

package/dist/examples/test-widget.html

@@ -329,9 +329,9 @@
       </div>
 
       <div class="button-group">
-        <button class="btn btn-primary" onclick="initializeWidget()">Initialize Widget</button>
-        <button class="btn btn-secondary" onclick="destroyWidget()">Destroy Widget</button>
-        <button class="btn btn-secondary" onclick="resetConfig()">Reset Config</button>
+        <button class="btn btn-primary" id="initBtn">Initialize Widget</button>
+        <button class="btn btn-secondary" id="destroyBtn">Destroy Widget</button>
+        <button class="btn btn-secondary" id="resetBtn">Reset Config</button>
       </div>
 
       <div id="status" class="status" style="display: none;">
@@ -357,129 +357,228 @@
     </div>
   </div>
 
-  <!-- Load SDK -->
-  <script type="module">
-    import { TTPChatWidget } from '../agent-widget.js';
-
-    window.TTPChatWidget = TTPChatWidget;
-    window.widgetInstance = null;
-
-    console.log('✅ SDK loaded successfully. TTPChatWidget:', TTPChatWidget);
-
-    window.initializeWidget = function() {
-      if (!window.TTPChatWidget) {
-        alert('TTPChatWidget is not available. Check browser console for errors.');
-        console.error('TTPChatWidget is undefined');
+  <!-- Load SDK as UMD library (script tag) -->
+  <script src="../agent-widget.js" onload="console.log('✅ SDK script loaded, TTPAgentSDK:', typeof window.TTPAgentSDK)" onerror="console.error('❌ Failed to load SDK script')"></script>
+  <script>
+    console.log('🔵 Waiting for SDK to load...');
+    
+    // Wait for TTPAgentSDK to be available (UMD library loads as global)
+    function initSDK() {
+      if (typeof window.TTPAgentSDK === 'undefined') {
+        console.log('⏳ TTPAgentSDK not ready yet, waiting...');
+        setTimeout(initSDK, 100);
         return;
       }
-      const agentId = document.getElementById('agentId').value;
-      const appId = document.getElementById('appId').value;
-      const getSessionUrl = document.getElementById('getSessionUrl').value;
-      const websocketUrl = document.getElementById('websocketUrl').value;
-      const position = document.getElementById('position').value;
-      const language = document.getElementById('language').value;
-      const mode = document.getElementById('mode').value;
-      const primaryColor = document.getElementById('primaryColor').value;
-
-      if (!agentId || !appId) {
-        alert('Please provide Agent ID and App ID');
+      
+      console.log('✅ TTPAgentSDK loaded:', window.TTPAgentSDK);
+      console.log('✅ TTPAgentSDK keys:', Object.keys(window.TTPAgentSDK || {}));
+      
+      const TTPChatWidget = window.TTPAgentSDK?.TTPChatWidget;
+      console.log('✅ TTPChatWidget:', TTPChatWidget);
+      console.log('✅ TTPChatWidget type:', typeof TTPChatWidget);
+      
+      if (!TTPChatWidget) {
+        console.error('❌ TTPChatWidget is undefined');
+        console.error('Available in TTPAgentSDK:', Object.keys(window.TTPAgentSDK || {}));
+        alert('TTPChatWidget is not available. Check console for errors.');
         return;
       }
-
-      // Destroy existing widget if any
-      if (window.widgetInstance) {
-        window.destroyWidget();
-      }
-
-      try {
-        const config = {
-          agentId: agentId,
-          appId: appId,
-          language: language,
-          primaryColor: primaryColor,
-          behavior: {
-            mode: mode
-          }
-        };
-
-        // Add optional configs
-        if (getSessionUrl) {
-          config.getSessionUrl = getSessionUrl;
+      
+      window.TTPChatWidget = TTPChatWidget;
+      window.widgetInstance = null;
+      
+      // Define functions after module loads
+      window.initializeWidget = function() {
+        console.log('🔵 ===== initializeWidget CALLED =====');
+        console.log('🔵 TTPChatWidget available:', !!window.TTPChatWidget);
+        console.log('🔵 TTPChatWidget type:', typeof window.TTPChatWidget);
+        
+        if (!window.TTPChatWidget) {
+          alert('TTPChatWidget is not available. Check browser console for errors.');
+          console.error('TTPChatWidget is undefined');
+          return;
+        }
+        const agentId = document.getElementById('agentId').value;
+        const appId = document.getElementById('appId').value;
+        const getSessionUrl = document.getElementById('getSessionUrl').value;
+        const websocketUrl = document.getElementById('websocketUrl').value;
+        const position = document.getElementById('position').value;
+        const language = document.getElementById('language').value;
+        const mode = document.getElementById('mode').value;
+        const primaryColor = document.getElementById('primaryColor').value;
+
+        if (!agentId || !appId) {
+          alert('Please provide Agent ID and App ID');
+          return;
         }
 
-        if (websocketUrl) {
-          config.websocketUrl = websocketUrl;
+        // Destroy existing widget if any
+        if (window.widgetInstance) {
+          window.destroyWidget();
         }
 
-        // Handle position
-        if (position) {
-          const [vertical, horizontal] = position.split('-');
-          config.position = {
-            vertical: vertical,
-            horizontal: horizontal,
-            offset: { x: 20, y: 20 }
+        try {
+          const config = {
+            agentId: agentId,
+            appId: appId,
+            language: language,
+            primaryColor: primaryColor,
+            behavior: {
+              mode: mode
+            }
           };
-        }
 
-        console.log('Initializing widget with config:', config);
-        console.log('TTPChatWidget constructor:', window.TTPChatWidget);
-        window.widgetInstance = new window.TTPChatWidget(config);
-        console.log('Widget instance created:', window.widgetInstance);
-
-        // Update status
-        document.getElementById('status').style.display = 'block';
-        document.getElementById('statusText').textContent = 'Widget initialized';
-        document.getElementById('widgetStatus').textContent = 'Yes';
-
-        console.log('✅ Widget initialized successfully');
-      } catch (error) {
-        console.error('❌ Error initializing widget:', error);
-        alert('Error initializing widget: ' + error.message);
-        document.getElementById('statusText').textContent = 'Error: ' + error.message;
-      }
-    };
+          // Add optional configs
+          if (getSessionUrl) {
+            config.getSessionUrl = getSessionUrl;
+          }
 
-    window.destroyWidget = function() {
-      if (window.widgetInstance) {
-        try {
-          // Widget doesn't have a destroy method, but we can remove it from DOM
-          const widgetButton = document.getElementById('text-chat-button');
-          const widgetPanel = document.getElementById('text-chat-panel');
-          
-          if (widgetButton && widgetButton.parentNode) {
-            widgetButton.parentNode.removeChild(widgetButton);
+          if (websocketUrl) {
+            config.websocketUrl = websocketUrl;
           }
-          if (widgetPanel && widgetPanel.parentNode) {
-            widgetPanel.parentNode.removeChild(widgetPanel);
+
+          // Handle position
+          if (position) {
+            const [vertical, horizontal] = position.split('-');
+            config.position = {
+              vertical: vertical,
+              horizontal: horizontal,
+              offset: { x: 20, y: 20 }
+            };
           }
 
-          window.widgetInstance = null;
-          document.getElementById('statusText').textContent = 'Widget destroyed';
-          document.getElementById('widgetStatus').textContent = 'No';
-          console.log('✅ Widget destroyed');
+          console.log('Initializing widget with config:', config);
+          console.log('TTPChatWidget constructor:', window.TTPChatWidget);
+          window.widgetInstance = new window.TTPChatWidget(config);
+          console.log('Widget instance created:', window.widgetInstance);
+
+          // Update status
+          document.getElementById('status').style.display = 'block';
+          document.getElementById('statusText').textContent = 'Widget initialized';
+          document.getElementById('widgetStatus').textContent = 'Yes';
+
+          console.log('✅ Widget initialized successfully');
         } catch (error) {
-          console.error('❌ Error destroying widget:', error);
+          console.error('❌ Error initializing widget:', error);
+          alert('Error initializing widget: ' + error.message);
+          document.getElementById('statusText').textContent = 'Error: ' + error.message;
+        }
+      };
+
+      window.destroyWidget = function() {
+        if (window.widgetInstance) {
+          try {
+            // Widget doesn't have a destroy method, but we can remove it from DOM
+            const widgetButton = document.getElementById('text-chat-button');
+            const widgetPanel = document.getElementById('text-chat-panel');
+            
+            if (widgetButton && widgetButton.parentNode) {
+              widgetButton.parentNode.removeChild(widgetButton);
+            }
+            if (widgetPanel && widgetPanel.parentNode) {
+              widgetPanel.parentNode.removeChild(widgetPanel);
+            }
+
+            window.widgetInstance = null;
+            document.getElementById('statusText').textContent = 'Widget destroyed';
+            document.getElementById('widgetStatus').textContent = 'No';
+            console.log('✅ Widget destroyed');
+          } catch (error) {
+            console.error('❌ Error destroying widget:', error);
+          }
         }
+      };
+
+      window.resetConfig = function() {
+        document.getElementById('agentId').value = 'agent_e5cf06457';
+        document.getElementById('appId').value = 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC';
+        document.getElementById('getSessionUrl').value = '';
+        document.getElementById('websocketUrl').value = 'wss://speech.talktopc.com/ws/conv';
+        document.getElementById('position').value = 'bottom-right';
+        document.getElementById('language').value = 'en';
+        document.getElementById('mode').value = 'unified';
+        document.getElementById('primaryColor').value = '#7C3AED';
+      };
+
+      // Attach event listeners to buttons after module loads
+      function attachButtonListeners() {
+          const buttons = document.querySelectorAll('.button-group button');
+          console.log('🔵 Setting up button listeners, found buttons:', buttons.length);
+          
+          if (buttons.length === 0) {
+            console.warn('⚠️ No buttons found, retrying in 100ms...');
+            setTimeout(attachButtonListeners, 100);
+            return;
+          }
+          
+          buttons.forEach(btn => {
+            const btnText = btn.textContent.trim();
+            console.log('🔵 Processing button:', btnText);
+            
+            // Remove existing onclick to avoid conflicts
+            const onclickAttr = btn.getAttribute('onclick');
+            if (onclickAttr) {
+              btn.removeAttribute('onclick');
+            }
+            
+            // Remove any existing listeners by cloning
+            const newBtn = btn.cloneNode(true);
+            btn.parentNode.replaceChild(newBtn, btn);
+            
+            // Attach new listener based on button text
+            if (btnText === 'Initialize Widget' || onclickAttr === 'initializeWidget()') {
+              newBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('🔵 Init button clicked!');
+                console.log('window.initializeWidget available:', typeof window.initializeWidget);
+                if (typeof window.initializeWidget === 'function') {
+                  window.initializeWidget();
+                } else {
+                  console.error('❌ initializeWidget is not a function:', typeof window.initializeWidget);
+                  alert('Error: initializeWidget function not available. Check console for details.');
+                }
+              });
+            } else if (btnText === 'Destroy Widget' || onclickAttr === 'destroyWidget()') {
+              newBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (typeof window.destroyWidget === 'function') {
+                  window.destroyWidget();
+                }
+              });
+            } else if (btnText === 'Reset Config' || onclickAttr === 'resetConfig()') {
+              newBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (typeof window.resetConfig === 'function') {
+                  window.resetConfig();
+                }
+              });
+            }
+          });
+          
+        console.log('✅ Button event listeners attached successfully');
+      }
+      
+      // Try to attach immediately (if DOM is ready) or wait for DOMContentLoaded
+      if (document.readyState === 'loading') {
+        window.addEventListener('DOMContentLoaded', attachButtonListeners);
+      } else {
+        // DOM is already loaded
+        setTimeout(attachButtonListeners, 100);
       }
-    };
-
-    window.resetConfig = function() {
-      document.getElementById('agentId').value = 'agent_e5cf06457';
-      document.getElementById('appId').value = 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC';
-      document.getElementById('getSessionUrl').value = '';
-      document.getElementById('websocketUrl').value = 'wss://speech.talktopc.com/ws/conv';
-      document.getElementById('position').value = 'bottom-right';
-      document.getElementById('language').value = 'en';
-      document.getElementById('mode').value = 'unified';
-      document.getElementById('primaryColor').value = '#7C3AED';
-    };
-
-    // Auto-initialize on load (optional)
-    // window.addEventListener('DOMContentLoaded', () => {
-    //   setTimeout(() => {
-    //     window.initializeWidget();
-    //   }, 1000);
-    // });
+      
+      // Also expose functions globally for direct access
+      console.log('✅ Functions exposed to window:', {
+        initializeWidget: typeof window.initializeWidget,
+        destroyWidget: typeof window.destroyWidget,
+        resetConfig: typeof window.resetConfig
+      });
+    }
+    
+    // Start initialization
+    initSDK();
   </script>
 </body>
 </html>