ttp-agent-sdk 2.44.0 → 2.45.1

package/examples/demo-sdk-loader.js

@@ -0,0 +1,249 @@
+/**
+ * Demo pages: toggle Production vs Development SDK bundle.
+ * Persists choice in localStorage; dispatches `ttp-demo-sdk-ready` after each load.
+ */
+(function (global) {
+  const STORAGE_KEY = 'ttp-demo-sdk-mode';
+  const PROD_SRC = '/agent-widget.js';
+  const DEV_SRC = '/agent-widget.dev.js';
+  const PROD_WS_URL = 'wss://speech.talktopc.com/ws/conv';
+  const DEV_WS_URL = 'wss://speech.bidme.co.il/ws/conv';
+
+  let loadPromise = null;
+  let currentMode = null;
+
+  function getMode() {
+    return global.localStorage.getItem(STORAGE_KEY) === 'dev' ? 'dev' : 'prod';
+  }
+
+  function getSrc(mode) {
+    return mode === 'dev' ? DEV_SRC : PROD_SRC;
+  }
+
+  function getLabel(mode) {
+    return mode === 'dev' ? 'Development' : 'Production';
+  }
+
+  /** WebSocket URL for widget config — tied to SDK mode, not user-editable. */
+  function getWebSocketUrl(mode) {
+    return (mode === 'dev' ? DEV_WS_URL : PROD_WS_URL);
+  }
+
+  function applyWebSocketUrl(config, mode) {
+    const next = config && typeof config === 'object' ? config : {};
+    const resolvedMode = mode === 'dev' || mode === 'prod' ? mode : getMode();
+    next.websocketUrl = getWebSocketUrl(resolvedMode);
+    return next;
+  }
+
+  function destroyWidgetInstances() {
+    const destroy = (w) => {
+      try {
+        w?.destroy?.();
+      } catch (e) {
+        console.warn('[TTPDemoSdk] destroy failed', e);
+      }
+    };
+    destroy(global.widgetInstance);
+    destroy(global.chatWidget);
+    destroy(global.testWidget);
+    if (typeof global.actualWidgetInstance !== 'undefined') {
+      destroy(global.actualWidgetInstance);
+      global.actualWidgetInstance = null;
+    }
+    global.widgetInstance = null;
+    global.chatWidget = null;
+    global.testWidget = null;
+  }
+
+  function removeSdkScripts() {
+    document.querySelectorAll('script[src*="agent-widget"]').forEach((s) => s.remove());
+    delete global.TTPAgentSDK;
+    delete global.TTPChatWidget;
+  }
+
+  function loadSdkViaScriptTag(mode) {
+    return new Promise((resolve, reject) => {
+      removeSdkScripts();
+      const script = document.createElement('script');
+      script.src = getSrc(mode) + '?t=' + Date.now();
+      script.onload = () => {
+        currentMode = mode;
+        const detail = { mode, src: script.src, label: getLabel(mode) };
+        global.dispatchEvent(new CustomEvent('ttp-demo-sdk-ready', { detail }));
+        resolve(global.TTPAgentSDK);
+      };
+      script.onerror = () => reject(new Error('Failed to load SDK: ' + script.src));
+      document.head.appendChild(script);
+    });
+  }
+
+  function loadSdkViaNgrokFetch(mode) {
+    return fetch(getSrc(mode), { headers: { 'ngrok-skip-browser-warning': '1' } })
+      .then((r) => {
+        if (!r.ok) throw new Error('SDK fetch HTTP ' + r.status);
+        return r.text();
+      })
+      .then((code) => {
+        removeSdkScripts();
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.textContent = code;
+        document.head.appendChild(script);
+        currentMode = mode;
+        const detail = { mode, src: getSrc(mode), label: getLabel(mode), ngrok: true };
+        global.dispatchEvent(new CustomEvent('ttp-demo-sdk-ready', { detail }));
+        return global.TTPAgentSDK;
+      });
+  }
+
+  function loadSdk(mode) {
+    mode = mode === 'dev' || mode === 'prod' ? mode : getMode();
+    global.localStorage.setItem(STORAGE_KEY, mode);
+    updateToggleUI(mode);
+
+    loadPromise = global.location.hostname.includes('ngrok')
+      ? loadSdkViaNgrokFetch(mode)
+      : loadSdkViaScriptTag(mode);
+
+    return loadPromise.catch((err) => {
+      console.error('[TTPDemoSdk]', err);
+      throw err;
+    });
+  }
+
+  function setMode(mode) {
+    if (mode !== 'dev' && mode !== 'prod') return loadSdk(getMode());
+    destroyWidgetInstances();
+    return loadSdk(mode);
+  }
+
+  function waitForReady() {
+    if (global.TTPAgentSDK?.TTPChatWidget && loadPromise) {
+      return Promise.resolve(global.TTPAgentSDK);
+    }
+    return loadPromise || loadSdk(getMode());
+  }
+
+  function injectStyles() {
+    if (document.getElementById('ttp-demo-sdk-toggle-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'ttp-demo-sdk-toggle-styles';
+    style.textContent = `
+      #ttp-demo-sdk-toggle {
+        position: fixed;
+        top: 12px;
+        right: 12px;
+        z-index: 2147483646;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: #111827;
+        color: #f9fafb;
+        font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        border-radius: 10px;
+        box-shadow: 0 4px 14px rgba(0,0,0,.25);
+      }
+      #ttp-demo-sdk-toggle .ttp-demo-sdk-label { opacity: .85; margin-right: 4px; }
+      #ttp-demo-sdk-toggle button {
+        border: none;
+        cursor: pointer;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 600;
+        background: #374151;
+        color: #e5e7eb;
+      }
+      #ttp-demo-sdk-toggle button:hover { background: #4b5563; }
+      #ttp-demo-sdk-toggle button.active {
+        background: #4f46e5;
+        color: #fff;
+      }
+      #ttp-demo-sdk-toggle button.active-dev {
+        background: #d97706;
+        color: #fff;
+      }
+      #ttp-demo-sdk-toggle .ttp-demo-sdk-file {
+        font-size: 11px;
+        opacity: .7;
+        max-width: 140px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  function updateToggleUI(mode) {
+    const root = document.getElementById('ttp-demo-sdk-toggle');
+    if (!root) return;
+    const prodBtn = root.querySelector('[data-mode="prod"]');
+    const devBtn = root.querySelector('[data-mode="dev"]');
+    const fileEl = root.querySelector('.ttp-demo-sdk-file');
+    if (prodBtn) {
+      prodBtn.classList.toggle('active', mode === 'prod');
+      prodBtn.classList.toggle('active-dev', false);
+    }
+    if (devBtn) {
+      devBtn.classList.toggle('active', mode === 'dev');
+      devBtn.classList.toggle('active-dev', mode === 'dev');
+    }
+    if (fileEl) {
+      fileEl.title = getWebSocketUrl(mode);
+      fileEl.textContent = mode === 'dev' ? 'dev.js · speech.bidme' : 'prod.js · talktopc';
+    }
+  }
+
+  function injectToggle() {
+    if (document.getElementById('ttp-demo-sdk-toggle')) return;
+    injectStyles();
+    const root = document.createElement('div');
+    root.id = 'ttp-demo-sdk-toggle';
+    root.setAttribute('role', 'group');
+    root.setAttribute('aria-label', 'SDK bundle');
+    root.innerHTML =
+      '<span class="ttp-demo-sdk-label">SDK</span>' +
+      '<button type="button" data-mode="prod" title="Production minified bundle">Production</button>' +
+      '<button type="button" data-mode="dev" title="Development bundle with source maps">Development</button>' +
+      '<span class="ttp-demo-sdk-file"></span>';
+    root.querySelector('[data-mode="prod"]').addEventListener('click', () => {
+      if (getMode() !== 'prod') setMode('prod');
+    });
+    root.querySelector('[data-mode="dev"]').addEventListener('click', () => {
+      if (getMode() !== 'dev') setMode('dev');
+    });
+    document.body.appendChild(root);
+    updateToggleUI(getMode());
+  }
+
+  function init() {
+    injectToggle();
+    return loadSdk(getMode());
+  }
+
+  global.TTPDemoSdkLoader = {
+    STORAGE_KEY,
+    PROD_SRC,
+    DEV_SRC,
+    PROD_WS_URL,
+    DEV_WS_URL,
+    getMode,
+    getSrc,
+    getLabel,
+    getWebSocketUrl,
+    applyWebSocketUrl,
+    loadSdk,
+    setMode,
+    waitForReady,
+    destroyWidgetInstances,
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})(window);

package/examples/test-ecommerce.html

@@ -119,16 +119,14 @@
 </head>
 <body>
   <div class="container">
-    <h1>TTP Hotels Flavor Test</h1>
+    <h1>TTP Flavor Test (Ecommerce / Hotels / …)</h1>
 
     <div class="info">
       <strong>How it works:</strong>
       <ul>
-        <li>Uses the standard <code>TTPChatWidget</code> with <code>flavor: { type: 'hotels', partnerId: 'mock-hotel' }</code></li>
-        <li>The backend injects hotel tools (<code>search_rooms</code>, <code>select_room</code>, <code>add_extra</code>, <code>get_booking</code>)</li>
-        <li>Room cards display when the agent sends <code>show_items</code> messages</li>
-        <li>Booking summary updates on <code>booking_updated</code> messages</li>
-        <li>Gallery (<code>show_media</code>) opens fullscreen with widget minimized</li>
+        <li>Pick an <strong>Agent</strong> below — the demo passes <code>flavor: { type, partnerId, callView: 'minimized' }</code> for every vertical.</li>
+        <li>On <strong>desktop</strong> (&gt;768px), <strong><code>callView: 'minimized'</code></strong> uses the bottom voice strip when a call is active (in-panel active call UI is hidden). Mobile keeps the existing minimized bar behavior.</li>
+        <li>Each vertical wires WebSocket handlers (e.g. hotels: <code>show_items</code> rooms, <code>booking_updated</code>, <code>show_media</code>).</li>
       </ul>
     </div>
 
@@ -138,8 +136,8 @@
     <div class="settings-grid">
       <label>Agent
         <select id="agentSelect" onchange="handleAgentChange()">
-          <option value="agent_ed18369b3|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|ecommerce|mock-store">Ecommerce Demo (agent_ed18369b3)</option>
-          <option value="agent_d0774f1af|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|hotels|mock-hotel" selected>Hotels Demo (agent_d0774f1af)</option>
+          <option value="agent_ed18369b3|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|ecommerce|mock-store" selected>Ecommerce Demo (agent_ed18369b3)</option>
+          <option value="agent_d0774f1af|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|hotels|mock-hotel">Hotels Demo (agent_d0774f1af)</option>
           <option value="agent_PHARMA_ID|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|pharma|mock-pharm">Pharma Demo (update agent ID)</option>
           <option value="agent_RESTAURANT_ID|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|restaurants|mock-restaurant">Restaurant Demo (update agent ID)</option>
           <option value="agent_TOUR_ID|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|tours|mock-tour">Tour Demo (update agent ID)</option>
@@ -233,24 +231,7 @@ window.testWidget._flavor.messageHandlers['show_media']({
 });</div>
   </div>
 
-  <script>
-    (function() {
-      var isNgrok = window.location.hostname.includes('ngrok');
-      if (isNgrok) {
-        var s = document.createElement('script');
-        s.type = 'text/javascript';
-        document.head.appendChild(s);
-        fetch('/agent-widget.js', { headers: { 'ngrok-skip-browser-warning': '1' } })
-          .then(function(r) { return r.text(); })
-          .then(function(code) { s.textContent = code; })
-          .catch(function(e) { console.error('SDK fetch failed:', e); });
-      } else {
-        var s = document.createElement('script');
-        s.src = '/agent-widget.js';
-        document.head.appendChild(s);
-      }
-    })();
-  </script>
+  <script src="demo-sdk-loader.js"></script>
 
   <script>
     let chatWidget = null;
@@ -296,7 +277,7 @@ window.testWidget._flavor.messageHandlers['show_media']({
 
       const agent = getAgentConfig();
 
-      chatWidget = new TTPAgentSDK.TTPChatWidget({
+      const widgetConfig = window.TTPDemoSdkLoader.applyWebSocketUrl({
         agentId: agent.agentId,
         appId: agent.appId,
         language: document.getElementById('languageSelect').value,
@@ -313,7 +294,8 @@ window.testWidget._flavor.messageHandlers['show_media']({
         },
         flavor: {
           type: agent.flavorType,
-          partnerId: agent.partnerId
+          partnerId: agent.partnerId,
+          callView: 'minimized',
         },
         icon: {
           type: 'custom',
@@ -326,6 +308,7 @@ window.testWidget._flavor.messageHandlers['show_media']({
           text: 'היי, אשמח אם תוכלי לעזור לי '
         }
       });
+      chatWidget = new TTPAgentSDK.TTPChatWidget(widgetConfig);
 
       window.testWidget = chatWidget;
       const sttLabel = document.getElementById('sttSelect').selectedOptions[0].text;
@@ -416,22 +399,20 @@ window.testWidget._flavor.messageHandlers['show_media']({
     };
 
     // Wait for SDK and auto-create
-    function waitForSDK() {
-      return new Promise((resolve, reject) => {
-        if (window.TTPAgentSDK?.TTPChatWidget) { resolve(); return; }
-        let attempts = 0;
-        const iv = setInterval(() => {
-          attempts++;
-          if (window.TTPAgentSDK?.TTPChatWidget) { clearInterval(iv); resolve(); }
-          else if (attempts >= 150) { clearInterval(iv); reject(new Error('SDK failed to load')); }
-        }, 100);
-      });
+    function boot() {
+      const mode = window.TTPDemoSdkLoader?.getMode?.() || 'prod';
+      updateStatus('SDK loaded (' + mode + ') — click Create Widget or wait...', '');
+      createWidget();
     }
 
-    waitForSDK().then(() => {
-      updateStatus('SDK loaded — creating widget...', '');
-      createWidget();
-    }).catch(e => {
+    window.addEventListener('ttp-demo-sdk-ready', () => {
+      if (chatWidget) {
+        chatWidget.destroy();
+        chatWidget = null;
+      }
+      boot();
+    });
+    window.TTPDemoSdkLoader.waitForReady().then(boot).catch((e) => {
       updateStatus('SDK load failed: ' + e.message, 'error');
     });
   </script>

package/examples/test-tour.html

@@ -202,24 +202,7 @@ window.testWidget._flavor.messageHandlers['show_items']({
 });</div>
   </div>
 
-  <script>
-    (function() {
-      var isNgrok = window.location.hostname.includes('ngrok');
-      if (isNgrok) {
-        var s = document.createElement('script');
-        s.type = 'text/javascript';
-        document.head.appendChild(s);
-        fetch('/agent-widget.js', { headers: { 'ngrok-skip-browser-warning': '1' } })
-          .then(function(r) { return r.text(); })
-          .then(function(code) { s.textContent = code; })
-          .catch(function(e) { console.error('SDK fetch failed:', e); });
-      } else {
-        var s = document.createElement('script');
-        s.src = '/agent-widget.js';
-        document.head.appendChild(s);
-      }
-    })();
-  </script>
+  <script src="demo-sdk-loader.js"></script>
 
   <script>
     let chatWidget = null;
@@ -245,7 +228,7 @@ window.testWidget._flavor.messageHandlers['show_items']({
       const agentId = document.getElementById('agentId').value;
       const appId = document.getElementById('appId').value;
 
-      chatWidget = new TTPAgentSDK.TTPChatWidget({
+      const widgetConfig = window.TTPDemoSdkLoader.applyWebSocketUrl({
         agentId,
         appId,
         language: document.getElementById('languageSelect').value,
@@ -274,6 +257,7 @@ window.testWidget._flavor.messageHandlers['show_items']({
           text: 'היי, אשמח אם תוכלי לעזור לי במשהו....'
         }
       });
+      chatWidget = new TTPAgentSDK.TTPChatWidget(widgetConfig);
 
       window.testWidget = chatWidget;
       updateStatus('TTPChatWidget created — tours flavor (mock-tour)', 'success');
@@ -354,22 +338,20 @@ window.testWidget._flavor.messageHandlers['show_items']({
       updateStatus('Booking cleared', '');
     };
 
-    function waitForSDK() {
-      return new Promise((resolve, reject) => {
-        if (window.TTPAgentSDK?.TTPChatWidget) { resolve(); return; }
-        let attempts = 0;
-        const iv = setInterval(() => {
-          attempts++;
-          if (window.TTPAgentSDK?.TTPChatWidget) { clearInterval(iv); resolve(); }
-          else if (attempts >= 150) { clearInterval(iv); reject(new Error('SDK failed to load')); }
-        }, 100);
-      });
+    function boot() {
+      const mode = window.TTPDemoSdkLoader?.getMode?.() || 'prod';
+      updateStatus('SDK loaded (' + mode + ') — creating widget...', '');
+      createWidget();
     }
 
-    waitForSDK().then(() => {
-      updateStatus('SDK loaded — creating widget...', '');
-      createWidget();
-    }).catch(e => {
+    window.addEventListener('ttp-demo-sdk-ready', () => {
+      if (chatWidget) {
+        chatWidget.destroy();
+        chatWidget = null;
+      }
+      boot();
+    });
+    window.TTPDemoSdkLoader.waitForReady().then(boot).catch((e) => {
       updateStatus('SDK load failed: ' + e.message, 'error');
     });
   </script>

package/examples/test-widget.html

@@ -285,9 +285,11 @@
           <input type="text" id="getSessionUrl" value="" placeholder="https://your-api.com/get-session">
         </div>
 
-        <div class="config-group">
-          <label for="websocketUrl">WebSocket URL</label>
-          <input type="text" id="websocketUrl" value="wss://speech.talktopc.com/ws/conv" placeholder="wss://...">
+        <div class="config-group" style="grid-column: 1 / -1;">
+          <label>WebSocket URL</label>
+          <p id="demoWsUrlDisplay" style="font-size: 13px; color: #4b5563; margin-top: 4px; font-family: monospace;">
+            Set by SDK toggle (top-right): Production → speech.talktopc.com · Development → speech.bidme.co.il
+          </p>
         </div>
 
         <div class="config-group">
@@ -398,16 +400,12 @@
     </div>
   </div>
 
-  <!-- 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 src="demo-sdk-loader.js"></script>
   <script>
-    console.log('🔵 Waiting for SDK to load...');
-    
-    // Wait for TTPAgentSDK to be available (UMD library loads as global)
+    console.log('🔵 Waiting for SDK to load (use top-right toggle for prod/dev)...');
+
     function initSDK() {
       if (typeof window.TTPAgentSDK === 'undefined') {
-        console.log('⏳ TTPAgentSDK not ready yet, waiting...');
-        setTimeout(initSDK, 100);
         return;
       }
       
@@ -427,6 +425,8 @@
       
       window.TTPChatWidget = TTPChatWidget;
       window.widgetInstance = null;
+      const mode = window.TTPDemoSdkLoader?.getMode?.() || '?';
+      console.log('✅ SDK ready:', window.TTPDemoSdkLoader?.getSrc?.(mode), '(' + mode + ')');
       
       // Define functions after module loads
       window.initializeWidget = function() {
@@ -442,7 +442,6 @@
         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;
@@ -477,9 +476,8 @@
             config.getSessionUrl = getSessionUrl;
           }
 
-          if (websocketUrl) {
-            config.websocketUrl = websocketUrl;
-          }
+          window.TTPDemoSdkLoader.applyWebSocketUrl(config);
+          console.log('🔌 websocketUrl:', config.websocketUrl, '(SDK mode:', window.TTPDemoSdkLoader.getMode() + ')');
 
           // Handle position
           if (position) {
@@ -549,7 +547,6 @@
         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';
@@ -638,9 +635,32 @@
         resetConfig: typeof window.resetConfig
       });
     }
-    
-    // Start initialization
-    initSDK();
+
+    function updateWsUrlDisplay() {
+      const el = document.getElementById('demoWsUrlDisplay');
+      if (!el || !window.TTPDemoSdkLoader) return;
+      const mode = window.TTPDemoSdkLoader.getMode();
+      el.textContent = window.TTPDemoSdkLoader.getWebSocketUrl(mode) + ' (' + mode + ')';
+    }
+
+    window.addEventListener('ttp-demo-sdk-ready', () => {
+      updateWsUrlDisplay();
+      if (window.widgetInstance && typeof window.destroyWidget === 'function') {
+        window.destroyWidget();
+      }
+      initSDK();
+      // Re-create widget if user already initialized (so WS URL matches new SDK mode)
+      if (typeof window.initializeWidget === 'function' && document.getElementById('widgetStatus')?.textContent === 'Yes') {
+        window.initializeWidget();
+      }
+    });
+    window.TTPDemoSdkLoader.waitForReady().then(() => {
+      updateWsUrlDisplay();
+      initSDK();
+    }).catch((e) => {
+      console.error('❌ SDK load failed:', e);
+      alert('SDK load failed. Check Network for agent-widget*.js');
+    });
   </script>
 </body>
 </html>

package/examples/widget-customization-dev.html

@@ -1280,10 +1280,11 @@
       }
     }
   </style>
+  <script src="demo-sdk-loader.js"></script>
 </head>
 <body>
   <div class="header">
-    <div class="dev-banner">⚠️ DEV PAGE - Using production SDK (agent-widget.js)</div>
+    <div class="dev-banner">🔧 Use the SDK toggle (top-right) to switch Production ↔ Development bundles</div>
     <a href="test-index.html" class="back-link">← Back to Demos</a>
     <h1>🎨 Widget Live Customization (Dev Page)</h1>
     <div style="margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;">
@@ -4126,6 +4127,10 @@
         }
       };
 
+      if (window.TTPDemoSdkLoader) {
+        window.TTPDemoSdkLoader.applyWebSocketUrl(actualConfig);
+      }
+
       try {
         // Reset manual close tracking when widget is recreated (unless user manually closed it)
         // Don't reset if widget was manually closed and mock panel is also closed
@@ -4348,8 +4353,15 @@
     };
 
     // Start checking for SDK (will also be called when script loads)
-    window.checkAndInitWidget();
-    
+    window.addEventListener('ttp-demo-sdk-ready', () => {
+      if (actualWidgetInstance) {
+        try { actualWidgetInstance.destroy(); } catch (e) { /* ignore */ }
+        actualWidgetInstance = null;
+      }
+      window.checkAndInitWidget();
+    });
+    window.TTPDemoSdkLoader.waitForReady().then(() => window.checkAndInitWidget());
+
     // Debug helper - expose widget instance globally for inspection
     window.debugWidget = function() {
       console.log('=== Widget Debug Info ===');
@@ -4376,8 +4388,5 @@
       };
     };
   </script>
-  
-  <!-- Load the widget SDK (production version) -->
-  <script src="/agent-widget.js?v=2.34.2" onload="if (typeof window.checkAndInitWidget === 'function') setTimeout(window.checkAndInitWidget, 100);" onerror="console.error('❌ Failed to load SDK script from /agent-widget.js'); alert('Failed to load SDK. Check console for details.');"></script>
 </body>
 </html>

package/examples/widget-customization.html

@@ -1793,6 +1793,7 @@
       }
     }
   </style>
+  <script src="demo-sdk-loader.js"></script>
 </head>
 <body>
   <div class="header">
@@ -5017,6 +5018,10 @@
         }
       };
 
+      if (window.TTPDemoSdkLoader) {
+        window.TTPDemoSdkLoader.applyWebSocketUrl(actualConfig);
+      }
+
       try {
         // Reset manual close tracking when widget is recreated (unless user manually closed it)
         // Don't reset if widget was manually closed and mock panel is also closed
@@ -5450,9 +5455,15 @@
       }
     };
 
-    // Start checking for SDK (will also be called when script loads)
-    window.checkAndInitWidget();
-    
+    window.addEventListener('ttp-demo-sdk-ready', () => {
+      if (actualWidgetInstance) {
+        try { actualWidgetInstance.destroy(); } catch (e) { /* ignore */ }
+        actualWidgetInstance = null;
+      }
+      window.checkAndInitWidget();
+    });
+    window.TTPDemoSdkLoader.waitForReady().then(() => window.checkAndInitWidget());
+
     // Debug helper - expose widget instance globally for inspection
     window.debugWidget = function() {
       console.log('=== Widget Debug Info ===');
@@ -5479,8 +5490,5 @@
       };
     };
   </script>
-  
-  <!-- Load the widget SDK -->
-  <script src="/agent-widget.js" onload="if (typeof window.checkAndInitWidget === 'function') setTimeout(window.checkAndInitWidget, 100);" onerror="console.error('❌ Failed to load SDK script from /agent-widget.js'); alert('Failed to load SDK. Check console for details.');"></script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttp-agent-sdk",
-  "version": "2.44.0",
+  "version": "2.45.1",
   "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,6 +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 --branch=master --commit-dirty=true",
+    "deploy:sandbox": "./deploy-sandbox-sdk.sh",
     "deploy:prod": "./deploy-production.sh",
     "build:prod": "webpack --config webpack.config.js",
     "build:dev": "webpack --config webpack.dev.config.js",