ttp-agent-sdk 2.39.0 → 2.40.0

package/dist/demos/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/dist/demos/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',
           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/dist/demos/test-tour.html

@@ -0,0 +1,376 @@
+<!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 Tour 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 Tour Flavor Test</h1>
+
+    <div class="info">
+      <strong>How it works:</strong>
+      <ul>
+        <li>Uses <code>TTPChatWidget</code> with <code>flavor: { type: 'tours', partnerId: 'mock-tour' }</code></li>
+        <li>The backend injects tour tools (<code>search_tours</code>, <code>book_tour</code>, <code>get_tour_booking</code>, <code>show_media</code>)</li>
+        <li>Tour cards display when the agent sends <code>show_items</code> messages</li>
+        <li>Booking summary updates on <code>cart_updated</code> messages</li>
+        <li>Gallery (<code>show_media</code>) opens fullscreen for tour photos, highlights, 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_b8f001773" 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 Tour Items</h3>
+      <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
+        Injects a <code>show_items</code> message with mock tour packages.
+      </p>
+      <button id="showToursBtn" class="success">Show Tour 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 with tour photos.
+      </p>
+      <button id="showGalleryBtn" class="success">Show Gallery</button>
+    </div>
+
+    <div class="test-section">
+      <h3>Booking Updated</h3>
+      <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
+        Injects a <code>cart_updated</code> message to test the booking summary bar.
+      </p>
+      <button id="bookingBtn" class="success">Simulate Booking</button>
+      <button id="clearBookingBtn" class="secondary">Clear Booking</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: 'TOUR-001', name: 'Old City Walking Tour', category: 'Walking Tours', price: 49.99, currency: 'USD', imageUrl: '...', available: true, tags: ['walking', 'history'], description: '3-hour guided walking tour' }
+  ],
+  title: 'Available Tours'
+});</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: 'tours',
+          partnerId: 'mock-tour'
+        },
+        icon: {
+          type: 'custom',
+          customImage: 'https://talktopc.com/logo192.png',
+          size: 'medium',
+          backgroundColor: '#FFFFFF'
+        },
+        whatsapp: {
+          number: '+972508665824',
+          text: 'היי, אשמח אם תוכלי לעזור לי במשהו....'
+        }
+      });
+
+      window.testWidget = chatWidget;
+      updateStatus('TTPChatWidget created — tours flavor (mock-tour)', 'success');
+    }
+
+    document.getElementById('createBtn').onclick = createWidget;
+
+    document.getElementById('destroyBtn').onclick = () => {
+      if (chatWidget) {
+        chatWidget.destroy();
+        chatWidget = null;
+        updateStatus('Widget destroyed', '');
+      }
+    };
+
+    document.getElementById('showToursBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['show_items']({
+        t: 'show_items',
+        items: [
+          { id: 'TOUR-001', name: 'Old City Walking Tour', category: 'Walking Tours', price: 49.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1467269204594-9661b134dd2b?w=300&h=300&fit=crop', available: true, tags: ['walking', 'history', 'culture'], description: '3-hour guided tour through ancient streets and landmarks' },
+          { id: 'TOUR-002', name: 'Sunset Kayak Adventure', category: 'Water Activities', price: 79.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1472745942893-4b9f730c7668?w=300&h=300&fit=crop', available: true, tags: ['water', 'adventure', 'sunset'], description: '2-hour kayaking experience with stunning sunset views' },
+          { id: 'TOUR-003', name: 'Mountain Hiking Expedition', category: 'Hiking', price: 89.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1551632811-561732d1e306?w=300&h=300&fit=crop', available: true, tags: ['hiking', 'nature', 'mountain'], description: 'Full-day guided hike through scenic mountain trails' },
+          { id: 'TOUR-004', name: 'Food & Wine Tasting Tour', category: 'Food Tours', price: 64.99, currency: 'USD', imageUrl: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=300&h=300&fit=crop', available: true, tags: ['food', 'wine', 'tasting'], description: 'Sample local cuisine and wines at 5 curated stops' }
+        ],
+        title: '4 tours found'
+      });
+      updateStatus('show_items injected with 4 tour packages', '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-1469854523086-cc02fe5d8800?w=800', caption: 'Scenic road trip through the countryside' },
+          { url: 'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=800', caption: 'Crystal clear lake adventure' },
+          { url: 'https://images.unsplash.com/photo-1530789253388-582c481c54b0?w=800', caption: 'Historic architecture tour' },
+          { url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800', caption: 'Breathtaking mountain viewpoint' }
+        ],
+        title: 'Tour Highlights'
+      });
+      updateStatus('show_media injected with 4 images (fullscreen gallery)', 'success');
+    };
+
+    document.getElementById('bookingBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['cart_updated']({
+        t: 'cart_updated',
+        cartItemCount: 2,
+        cartTotal: 129.98,
+        action: 'added',
+        product: { id: 'TOUR-001', name: 'Old City Walking Tour', price: 49.99 }
+      });
+      updateStatus('cart_updated injected (2 tours, $129.98)', 'success');
+    };
+
+    document.getElementById('clearBookingBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['cart_updated']({
+        t: 'cart_updated',
+        cartItemCount: 0,
+        cartTotal: 0,
+        action: 'refreshed'
+      });
+      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);
+      });
+    }
+
+    waitForSDK().then(() => {
+      updateStatus('SDK loaded — creating widget...', '');
+      createWidget();
+    }).catch(e => {
+      updateStatus('SDK load failed: ' + e.message, 'error');
+    });
+  </script>
+</body>
+</html>