ttp-agent-sdk 2.39.0 → 2.43.0

package/examples/test-ecommerce.html

@@ -138,7 +138,11 @@
     <div class="settings-grid">
       <label>Agent
         <select id="agentSelect" onchange="handleAgentChange()">
-          <option value="agent_d0774f1af|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo">Hotels Demo (agent_d0774f1af)</option>
+          <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_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>
           <option value="custom">Custom...</option>
         </select>
       </label>
@@ -160,17 +164,19 @@
           <option value="rtl">RTL</option>
         </select>
       </label>
-      <label>Widget Mode
-        <select id="modeSelect">
-          <option value="unified" selected>Unified (Both)</option>
-          <option value="voice-only">Voice Only</option>
-          <option value="text-only">Text Only</option>
+      <label>STT Provider
+        <select id="sttSelect">
+          <option value="">Default (server)</option>
+          <option value="azure-stt" selected>Azure STT</option>
+          <option value="cartesia-stt">Cartesia (Ink-Whisper)</option>
+          <option value="openai-realtime">OpenAI Realtime</option>
+          <option value="soniox">Soniox</option>
         </select>
       </label>
       <label>Start Open
         <select id="startOpenSelect">
-          <option value="true" selected>Yes</option>
-          <option value="false">No</option>
+          <option value="true">Yes</option>
+          <option value="false" selected>No</option>
         </select>
       </label>
     </div>
@@ -267,11 +273,13 @@ window.testWidget._flavor.messageHandlers['show_media']({
       if (sel.value === 'custom') {
         return {
           agentId: document.getElementById('customAgentId').value,
-          appId: document.getElementById('customAppId').value
+          appId: document.getElementById('customAppId').value,
+          flavorType: 'ecommerce',
+          partnerId: 'mock-store'
         };
       }
-      const [agentId, appId] = sel.value.split('|');
-      return { agentId, appId };
+      const [agentId, appId, flavorType, partnerId] = sel.value.split('|');
+      return { agentId, appId, flavorType, partnerId };
     }
 
     function createWidget() {
@@ -293,24 +301,34 @@ window.testWidget._flavor.messageHandlers['show_media']({
         appId: agent.appId,
         language: document.getElementById('languageSelect').value,
         direction: document.getElementById('dirSelect').value,
+        agentSettingsOverride: (() => {
+          const override = {};
+          const stt = document.getElementById('sttSelect').value;
+          if (stt) override.sttProvider = stt;
+          return override;
+        })(),
         behavior: {
-          mode: document.getElementById('modeSelect').value,
           startOpen: document.getElementById('startOpenSelect').value === 'true'
         },
         flavor: {
-          type: 'hotels',
-          partnerId: 'mock-hotel'
+          type: agent.flavorType,
+          partnerId: agent.partnerId
         },
         icon: {
           type: 'custom',
-          customImage: 'https://talktopc.com/logo192.png',
+          /* Omit customImage — SDK shows animated waveform (same as mobile), not the old default logo */
           size: 'medium',
           backgroundColor: '#FFFFFF'
+        },
+        whatsapp: {
+          number: '+972508665824',
+          text: 'היי, אשמח אם תוכלי לעזור לי '
         }
       });
 
       window.testWidget = chatWidget;
-      updateStatus('TTPChatWidget created with hotels flavor (partnerId: mock-hotel)', 'success');
+      const sttLabel = document.getElementById('sttSelect').selectedOptions[0].text;
+      updateStatus('TTPChatWidget created — ' + agent.flavorType + ' flavor (' + agent.partnerId + '), STT: ' + sttLabel, 'success');
     }
 
     // Button handlers

package/examples/test-index.html

@@ -316,6 +316,51 @@
             <span class="badge badge--new">E-Commerce</span>
           </div>
         </a>
+
+        <a href="../examples/test-pharma.html" class="test-card">
+          <span class="test-card__icon">💊</span>
+          <h3 class="test-card__title">Pharma Widget Test</h3>
+          <p class="test-card__description">
+            Test the pharmacy flavor — medication search, prescription management, 
+            and medication cards with Rx/OTC badges. Simulate show_items and 
+            prescription_updated messages without a live voice call.
+          </p>
+          <div class="test-card__badges">
+            <span class="badge badge--widget">Widget</span>
+            <span class="badge badge--voice">Voice</span>
+            <span class="badge badge--new">Pharma</span>
+          </div>
+        </a>
+
+        <a href="../examples/test-restaurant.html" class="test-card">
+          <span class="test-card__icon">🍽️</span>
+          <h3 class="test-card__title">Restaurant Widget Test</h3>
+          <p class="test-card__description">
+            Test the restaurant flavor — menu search, order management, menu item cards 
+            with allergen/dietary tags, and photo gallery. Simulate show_items, 
+            order_updated, and show_media messages without a live voice call.
+          </p>
+          <div class="test-card__badges">
+            <span class="badge badge--widget">Widget</span>
+            <span class="badge badge--voice">Voice</span>
+            <span class="badge badge--new">Restaurant</span>
+          </div>
+        </a>
+
+        <a href="../examples/test-tour.html" class="test-card">
+          <span class="test-card__icon">🗺️</span>
+          <h3 class="test-card__title">Tour Widget Test</h3>
+          <p class="test-card__description">
+            Test the tours flavor — tour search, booking management, tour cards 
+            with activity tags, and photo gallery. Simulate show_items, 
+            cart_updated, and show_media messages without a live voice call.
+          </p>
+          <div class="test-card__badges">
+            <span class="badge badge--widget">Widget</span>
+            <span class="badge badge--voice">Voice</span>
+            <span class="badge badge--new">Tours</span>
+          </div>
+        </a>
       </div>
     </div>
 

package/examples/test-restaurant.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>TTP Restaurant Flavor - Test</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      max-width: 1200px;
+      margin: 40px auto;
+      padding: 20px;
+      background: #F9FAFB;
+    }
+
+    .container {
+      background: white;
+      padding: 30px;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+
+    h1 { color: #111827; margin-top: 0; }
+    h2 { color: #374151; border-bottom: 2px solid #E5E7EB; padding-bottom: 8px; margin-top: 30px; }
+
+    .info {
+      background: #EFF6FF;
+      border-left: 4px solid #3B82F6;
+      padding: 16px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+
+    .status {
+      margin: 20px 0;
+      padding: 12px;
+      background: #F3F4F6;
+      border-radius: 6px;
+      font-family: monospace;
+      font-size: 14px;
+    }
+    .status.success { background: #D1FAE5; color: #065F46; }
+    .status.error { background: #FEE2E2; color: #991B1B; }
+
+    button {
+      background: #2563EB;
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 16px;
+      margin: 10px 10px 10px 0;
+    }
+    button:hover { background: #1D4ED8; }
+    button.secondary { background: #6B7280; }
+    button.secondary:hover { background: #4B5563; }
+    button.success { background: #059669; }
+    button.success:hover { background: #047857; }
+
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      font-size: 14px;
+      color: #374151;
+    }
+
+    select, input[type="text"] {
+      padding: 8px 12px;
+      border: 1px solid #D1D5DB;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: inherit;
+      background: white;
+      color: #111827;
+    }
+
+    .settings-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      margin: 16px 0;
+    }
+
+    .test-section {
+      border: 1px solid #E5E7EB;
+      border-radius: 8px;
+      padding: 20px;
+      margin: 16px 0;
+      background: #F9FAFB;
+    }
+
+    .test-section h3 {
+      margin: 0 0 12px 0;
+      color: #111827;
+    }
+
+    .code-block {
+      background: #1F2937;
+      color: #F9FAFB;
+      padding: 16px;
+      border-radius: 6px;
+      font-family: monospace;
+      font-size: 12px;
+      overflow-x: auto;
+      margin: 20px 0;
+      white-space: pre-wrap;
+    }
+
+    @media (max-width: 768px) {
+      body { margin: 0; padding: 10px; }
+      .container { padding: 16px; border-radius: 8px; }
+      h1 { font-size: 24px; }
+      button { width: 100%; margin: 8px 0; }
+      .settings-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>TTP Restaurant Flavor Test</h1>
+
+    <div class="info">
+      <strong>How it works:</strong>
+      <ul>
+        <li>Uses <code>TTPChatWidget</code> with <code>flavor: { type: 'restaurants', partnerId: 'mock-restaurant' }</code></li>
+        <li>The backend injects restaurant tools (<code>search_menu</code>, <code>add_to_order</code>, <code>get_order</code>, <code>show_media</code>)</li>
+        <li>Menu item cards display when the agent sends <code>show_items</code> messages</li>
+        <li>Order summary updates on <code>cart_updated</code> messages (same universal shape as ecommerce: <code>product</code>, <code>cartTotal</code>, <code>cartItemCount</code>)</li>
+        <li>Gallery (<code>show_media</code>) opens fullscreen for dish photos, ambiance, etc.</li>
+      </ul>
+    </div>
+
+    <div id="status" class="status">Loading SDK...</div>
+
+    <h2>Widget Configuration</h2>
+    <div class="settings-grid">
+      <label>Agent ID
+        <input id="agentId" type="text" value="agent_e165840eb" placeholder="agent_..." />
+      </label>
+      <label>App ID
+        <input id="appId" type="text" value="app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo" placeholder="app_..." />
+      </label>
+      <label>Language
+        <select id="languageSelect">
+          <option value="en" selected>English</option>
+        </select>
+      </label>
+      <label>STT Provider
+        <select id="sttSelect">
+          <option value="">Default (server)</option>
+          <option value="azure-stt" selected>Azure STT</option>
+        </select>
+      </label>
+    </div>
+
+    <div style="margin-top: 16px;">
+      <button id="createBtn">Create Widget</button>
+      <button id="destroyBtn" class="secondary">Destroy Widget</button>
+    </div>
+
+    <h2>Test Actions (Simulated Messages)</h2>
+
+    <div class="test-section">
+      <h3>Show Menu Items</h3>
+      <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
+        Injects a <code>show_items</code> message with mock menu items.
+      </p>
+      <button id="showMenuBtn" class="success">Show Menu Items</button>
+    </div>
+
+    <div class="test-section">
+      <h3>Show Gallery</h3>
+      <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
+        Injects a <code>show_media</code> message to test fullscreen gallery.
+      </p>
+      <button id="showGalleryBtn" class="success">Show Gallery</button>
+    </div>
+
+    <div class="test-section">
+      <h3>Order Updated</h3>
+      <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
+        Injects an <code>order_updated</code> message to test the order summary bar.
+      </p>
+      <button id="orderBtn" class="success">Simulate Order</button>
+      <button id="clearOrderBtn" class="secondary">Clear Order</button>
+    </div>
+
+    <h2>Console Commands</h2>
+    <div class="code-block">// Access the widget instance
+window.testWidget
+
+// Inject messages manually
+window.testWidget._flavor.messageHandlers['show_items']({
+  t: 'show_items',
+  items: [
+    { id: 'MAIN-001', name: 'Grilled Salmon', category: 'Mains', price: 24.99, currency: 'USD', imageUrl: '...', available: true, tags: ['seafood', 'healthy'], allergens: ['fish'] }
+  ],
+  title: 'Test Menu'
+});</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>
+    let chatWidget = null;
+
+    function updateStatus(msg, type = '') {
+      const el = document.getElementById('status');
+      el.textContent = msg;
+      el.className = 'status ' + type;
+    }
+
+    function createWidget() {
+      if (chatWidget) {
+        chatWidget.destroy();
+        chatWidget = null;
+      }
+
+      const TTPAgentSDK = window.TTPAgentSDK;
+      if (!TTPAgentSDK || !TTPAgentSDK.TTPChatWidget) {
+        updateStatus('TTPChatWidget not available in SDK', 'error');
+        return;
+      }
+
+      const agentId = document.getElementById('agentId').value;
+      const appId = document.getElementById('appId').value;
+
+      chatWidget = new TTPAgentSDK.TTPChatWidget({
+        agentId,
+        appId,
+        language: document.getElementById('languageSelect').value,
+        agentSettingsOverride: (() => {
+          const override = {};
+          const stt = document.getElementById('sttSelect').value;
+          if (stt) override.sttProvider = stt;
+          return override;
+        })(),
+        behavior: {
+          mode: 'unified',
+          startOpen: true
+        },
+        flavor: {
+          type: 'restaurants',
+          partnerId: 'mock-restaurant'
+        },
+        icon: {
+          type: 'custom',
+          size: 'medium',
+          backgroundColor: '#FFFFFF'
+        }
+      });
+
+      window.testWidget = chatWidget;
+      updateStatus('TTPChatWidget created — restaurants flavor (mock-restaurant)', 'success');
+    }
+
+    document.getElementById('createBtn').onclick = createWidget;
+
+    document.getElementById('destroyBtn').onclick = () => {
+      if (chatWidget) {
+        chatWidget.destroy();
+        chatWidget = null;
+        updateStatus('Widget destroyed', '');
+      }
+    };
+
+    document.getElementById('showMenuBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['show_items']({
+        t: 'show_items',
+        items: [
+          { id: 'APP-001', name: 'Bruschetta', category: 'Appetizers', price: 9.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1572695157366-5e585ab2b69f?w=300&h=300&fit=crop', available: true, tags: ['appetizer', 'italian', 'vegetarian'], allergens: ['gluten', 'dairy'], description: 'Toasted bread with fresh tomatoes and basil' },
+          { id: 'MAIN-001', name: 'Grilled Salmon', category: 'Mains', price: 24.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=300&h=300&fit=crop', available: true, tags: ['seafood', 'healthy', 'grilled'], allergens: ['fish'], description: 'Atlantic salmon with seasonal vegetables' },
+          { id: 'MAIN-002', name: 'Ribeye Steak', category: 'Mains', price: 32.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1600891964092-4316c288032e?w=300&h=300&fit=crop', available: true, tags: ['steak', 'beef', 'grilled'], allergens: [], description: '12oz USDA choice ribeye, char-grilled' },
+          { id: 'DES-001', name: 'Tiramisu', category: 'Desserts', price: 10.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=300&h=300&fit=crop', available: true, tags: ['dessert', 'italian', 'coffee'], allergens: ['gluten', 'dairy', 'eggs'], description: 'Classic Italian dessert with mascarpone' }
+        ],
+        title: '4 menu items found'
+      });
+      updateStatus('show_items injected with 4 menu items', 'success');
+    };
+
+    document.getElementById('showGalleryBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['show_media']({
+        t: 'show_media',
+        images: [
+          { url: 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800', caption: 'Main dining room' },
+          { url: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=800', caption: 'Candlelit evening ambiance' },
+          { url: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=800', caption: "Chef's signature plating" },
+          { url: 'https://images.unsplash.com/photo-1514933651103-005eec06c04b?w=800', caption: 'Our craft cocktail bar' }
+        ],
+        title: 'Restaurant Gallery'
+      });
+      updateStatus('show_media injected with 4 images (fullscreen gallery)', 'success');
+    };
+
+    document.getElementById('orderBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['cart_updated']({
+        t: 'cart_updated',
+        cartItemCount: 3,
+        cartTotal: 67.97,
+        currency: 'USD',
+        action: 'added',
+        product: { id: 'MAIN-001', name: 'Grilled Salmon', price: 24.99 }
+      });
+      updateStatus('cart_updated injected (3 items, $67.97)', 'success');
+    };
+
+    document.getElementById('clearOrderBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['cart_updated']({
+        t: 'cart_updated',
+        cartItemCount: 0,
+        cartTotal: 0,
+        currency: 'USD',
+        action: 'refreshed'
+      });
+      updateStatus('Order 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);
+      });
+    }
+
+    waitForSDK().then(() => {
+      updateStatus('SDK loaded — creating widget...', '');
+      createWidget();
+    }).catch(e => {
+      updateStatus('SDK load failed: ' + e.message, 'error');
+    });
+  </script>
+</body>
+</html>

package/examples/test-text-chat.html

@@ -94,11 +94,15 @@
         font-size: 13px;
       }
       
-      select, input[type="text"], input[type="number"], input[type="color"] {
+      select, input[type="text"], input[type="number"], input[type="color"], textarea {
         font-size: 16px; /* Prevents iOS zoom on focus */
         padding: 10px 12px;
         min-height: 44px;
       }
+
+      textarea {
+        min-height: 100px;
+      }
       
       input[type="color"] {
         min-width: 50px;
@@ -188,7 +192,8 @@
       background: #4B5563;
     }
 
-    label {
+    /* Scope form labels — global `label { flex-direction: column }` can break in-widget flex rows when useShadowDOM is false */
+    .customization-container label {
       display: flex;
       flex-direction: column;
       gap: 4px;
@@ -196,7 +201,7 @@
       color: #374151;
     }
 
-    select, input[type="text"], input[type="number"], input[type="color"] {
+    select, input[type="text"], input[type="number"], input[type="color"], textarea {
       padding: 8px 12px;
       border: 1px solid #D1D5DB;
       border-radius: 6px;
@@ -206,7 +211,12 @@
       color: #111827;
     }
 
-    select:focus, input:focus {
+    textarea {
+      resize: vertical;
+      min-height: 80px;
+    }
+
+    select:focus, input:focus, textarea:focus {
       outline: none;
       border-color: #667eea;
       box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
@@ -844,7 +854,7 @@
     } else {
       initializeUI();
     }
-    
+
     // Clear hover color (set to empty to test no hover color behavior)
     function clearHoverColor() {
       const hoverColorInput = document.getElementById('buttonHoverColor');
@@ -931,7 +941,6 @@
         
         icon: {
           type: 'custom',
-          customImage: 'https://talktopc.com/logo192.png',
           size: document.getElementById('buttonSize').value,
           backgroundColor: document.getElementById('buttonBgColor').value || '#FFFFFF' // Widget default: white
         },
@@ -1050,7 +1059,7 @@
           textCardIcon: document.getElementById('landingTextIcon').value
         }
       };
-      
+
       // 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');
@@ -1098,8 +1107,8 @@
         // Skip if already has listener
         if (elementsWithListeners.has(element)) return;
         
-        // For text inputs - apply on every keystroke (input event) with debounce
-        if (element.type === 'text' || element.tagName === 'TEXTAREA') {
+        // For text inputs and textareas - apply on every keystroke (input event) with debounce
+        if (element.type === 'text' || element.type === 'textarea' || element.tagName === 'TEXTAREA') {
           let timeout;
           element.addEventListener('input', function() {
             // Debounce for text inputs to avoid too many updates