npm - ttp-agent-sdk - Versions diffs - 2.38.4 → 2.40.0 - Mend

ttp-agent-sdk 2.38.4 → 2.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/agent-widget.dev.js +6526 -1483
package/dist/agent-widget.dev.js.map +1 -1
package/dist/agent-widget.esm.js +1 -1
package/dist/agent-widget.esm.js.map +1 -1
package/dist/agent-widget.js +1 -1
package/dist/agent-widget.js.map +1 -1
package/dist/demos/index.html +45 -0
package/dist/demos/test-ecommerce.html +143 -160
package/dist/demos/test-tour.html +376 -0
package/dist/demos/widget-customization.html +1685 -604
package/dist/examples/test-ecommerce.html +143 -160
package/dist/examples/test-index.html +45 -0
package/dist/examples/test-restaurant.html +372 -0
package/dist/examples/test-tour.html +376 -0
package/dist/examples/widget-customization.html +1685 -604
package/examples/test-ecommerce.html +143 -160
package/examples/test-index.html +45 -0
package/examples/test-restaurant.html +372 -0
package/examples/test-tour.html +376 -0
package/examples/widget-customization.html +1685 -604
package/package.json +1 -1

package/dist/examples/test-ecommerce.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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 E-Commerce Widget - Test</title>
+  <title>TTP Hotels Flavor - Test</title>
   <style>
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -43,7 +43,7 @@
     .status.error { background: #FEE2E2; color: #991B1B; }
     button {
-      background: #4F46E5;
+      background: #2563EB;
       color: white;
       border: none;
       padding: 12px 24px;
@@ -52,13 +52,11 @@
       font-size: 16px;
       margin: 10px 10px 10px 0;
     }
-    button:hover { background: #4338CA; }
+    button:hover { background: #1D4ED8; }
     button.secondary { background: #6B7280; }
     button.secondary:hover { background: #4B5563; }
     button.success { background: #059669; }
     button.success:hover { background: #047857; }
-    button.warning { background: #D97706; }
-    button.warning:hover { background: #B45309; }
     label {
       display: flex;
@@ -68,7 +66,7 @@
       color: #374151;
     }
-    select, input[type="text"], input[type="number"] {
+    select, input[type="text"] {
       padding: 8px 12px;
       border: 1px solid #D1D5DB;
       border-radius: 6px;
@@ -110,21 +108,6 @@
       color: #111827;
     }
-    .cart-display {
-      background: #F0FDF4;
-      border: 1px solid #BBF7D0;
-      border-radius: 8px;
-      padding: 16px;
-      margin: 16px 0;
-      font-family: monospace;
-      font-size: 13px;
-    }
-    .cart-display pre {
-      margin: 0;
-      white-space: pre-wrap;
-    }
     @media (max-width: 768px) {
       body { margin: 0; padding: 10px; }
       .container { padding: 16px; border-radius: 8px; }
@@ -136,16 +119,16 @@
 </head>
 <body>
   <div class="container">
-    <h1>🛒 TTP E-Commerce Widget Test</h1>
+    <h1>TTP Hotels Flavor Test</h1>
     <div class="info">
-      <strong>What is TTPEcommerceWidget?</strong>
+      <strong>How it works:</strong>
       <ul>
-        <li>Wraps the standard TTPChatWidget with an e-commerce layer</li>
-        <li>Displays product cards when the agent sends <code>show_products</code> messages</li>
-        <li>Manages a local cart with toast notifications and cart summary</li>
-        <li>Supports partner integration via <code>addToCartFn</code> / <code>getCartFn</code> callbacks</li>
-        <li>Test API available at <code>window.__TTP_ECOMMERCE__</code></li>
+        <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>
       </ul>
     </div>
@@ -155,9 +138,11 @@
     <div class="settings-grid">
       <label>Agent
         <select id="agentSelect" onchange="handleAgentChange()">
-          <option value="agent_e165840eb|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|en|ltr">e-commerce_english (agent_e165840eb)</option>
-          <option value="agent_ed18369b3|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|he|rtl">e-commerce_hebrew (agent_ed18369b3)</option>
-          <option value="agent_d119003d8|app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo|es|ltr">ecommerce_spanish (agent_d119003d8)</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>
@@ -179,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>
@@ -199,66 +186,54 @@
       <button id="destroyBtn" class="secondary">Destroy Widget</button>
     </div>
-    <h2>E-Commerce Test Actions</h2>
+    <h2>Test Actions (Simulated Messages)</h2>
     <div class="test-section">
-      <h3>Show Products (simulated)</h3>
+      <h3>Show Rooms</h3>
       <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
-        Injects a <code>show_products</code> message into the ecommerce layer — no voice call needed.
+        Injects a <code>show_items</code> message with mock hotel rooms — no voice call needed.
       </p>
-      <div class="settings-grid">
-        <label>Search Query
-          <input id="productQuery" type="text" value="milk" />
-        </label>
-        <label>Layout
-          <select id="productLayout">
-            <option value="auto">Auto (cards &le;4, list 5+)</option>
-            <option value="cards">Cards</option>
-            <option value="list">List</option>
-          </select>
-        </label>
-      </div>
-      <button id="showProductsBtn" class="success">Show Products</button>
+      <button id="showRoomsBtn" class="success">Show Rooms</button>
     </div>
     <div class="test-section">
-      <h3>Cart Updated (simulated)</h3>
+      <h3>Show Gallery</h3>
       <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
-        Injects a <code>cart_updated</code> message to test toast and summary UI.
+        Injects a <code>show_media</code> message to test fullscreen gallery.
       </p>
-      <button id="cartAddBtn" class="success">Simulate: Product Added</button>
-      <button id="cartClearBtn" class="secondary">Clear Cart</button>
+      <button id="showGalleryBtn" class="success">Show Gallery</button>
     </div>
     <div class="test-section">
-      <h3>Cart State</h3>
-      <div id="cartDisplay" class="cart-display">
-        <pre>No widget created yet</pre>
-      </div>
-      <button id="refreshCartBtn" class="secondary">Refresh Cart State</button>
+      <h3>Booking Updated</h3>
+      <p style="color: #6B7280; font-size: 14px; margin-bottom: 12px;">
+        Injects a <code>booking_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">// Show products via test API (fetches from mock API)
-window.__TTP_ECOMMERCE__.showProducts('milk');
-window.__TTP_ECOMMERCE__.showProducts('bread', 3);
-// Inject raw messages
-window.__TTP_ECOMMERCE__.handleMessage({
-  t: 'show_products',
-  products: [
-    { id: '1', name: 'Test Product', price: 9.99, image: '' }
+    <div class="code-block">// Access the widget instance
+window.testWidget
+// Inject messages manually via the flavor's messageHandlers
+window.testWidget._flavor.messageHandlers['show_items']({
+  t: 'show_items',
+  items: [
+    { roomId: 'room-1', roomName: 'Test Room', imageUrl: '...', pricePerNight: 150, currency: 'USD', beds: 2, amenities: ['WiFi', 'Pool'] }
   ],
-  title: 'Test Results'
+  title: 'Test Rooms'
 });
-// Cart operations
-window.__TTP_ECOMMERCE__.getCart();
-window.__TTP_ECOMMERCE__.clearCart();</div>
+window.testWidget._flavor.messageHandlers['show_media']({
+  t: 'show_media',
+  images: [{ url: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=800', caption: 'Standard Room' }],
+  title: 'Hotel Photos'
+});</div>
   </div>
   <script>
-    // Load SDK - use fetch with ngrok-skip-browser-warning when on ngrok (fixes iPhone/mobile)
     (function() {
       var isNgrok = window.location.hostname.includes('ngrok');
       if (isNgrok) {
@@ -278,7 +253,7 @@ window.__TTP_ECOMMERCE__.clearCart();</div>
   </script>
   <script>
-    let ecomWidget = null;
+    let chatWidget = null;
     function updateStatus(msg, type = '') {
       const el = document.getElementById('status');
@@ -286,27 +261,11 @@ window.__TTP_ECOMMERCE__.clearCart();</div>
       el.className = 'status ' + type;
     }
-    function refreshCartDisplay() {
-      const el = document.getElementById('cartDisplay');
-      if (!window.__TTP_ECOMMERCE__) {
-        el.innerHTML = '<pre>No widget created yet</pre>';
-        return;
-      }
-      const cart = window.__TTP_ECOMMERCE__.getCart();
-      el.innerHTML = '<pre>' + JSON.stringify(cart, null, 2) + '</pre>';
-    }
     function handleAgentChange() {
       const sel = document.getElementById('agentSelect');
       const isCustom = sel.value === 'custom';
       document.getElementById('customAgentLabel').style.display = isCustom ? '' : 'none';
       document.getElementById('customAppLabel').style.display = isCustom ? '' : 'none';
-      if (!isCustom) {
-        const [, , lang, dir] = sel.value.split('|');
-        document.getElementById('languageSelect').value = lang;
-        document.getElementById('dirSelect').value = dir;
-      }
     }
     function getAgentConfig() {
@@ -314,132 +273,156 @@ window.__TTP_ECOMMERCE__.clearCart();</div>
       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() {
-      if (ecomWidget) {
-        ecomWidget.destroy();
-        ecomWidget = null;
+      if (chatWidget) {
+        chatWidget.destroy();
+        chatWidget = null;
       }
       const TTPAgentSDK = window.TTPAgentSDK;
-      if (!TTPAgentSDK || !TTPAgentSDK.TTPEcommerceWidget) {
-        updateStatus('TTPEcommerceWidget not available in SDK', 'error');
+      if (!TTPAgentSDK || !TTPAgentSDK.TTPChatWidget) {
+        updateStatus('TTPChatWidget not available in SDK', 'error');
         return;
       }
       const agent = getAgentConfig();
-      ecomWidget = new TTPAgentSDK.TTPEcommerceWidget({
+      chatWidget = new TTPAgentSDK.TTPChatWidget({
         agentId: agent.agentId,
         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: agent.flavorType,
+          partnerId: agent.partnerId
+        },
         icon: {
           type: 'custom',
           customImage: 'https://talktopc.com/logo192.png',
           size: 'medium',
           backgroundColor: '#FFFFFF'
         },
-        partner: { name: 'TestStore' },
-        cart: {
-          addToCartFn: async (productId, qty) => {
-            console.log('[TestPage] addToCartFn called:', productId, qty);
-            return { ok: true };
-          },
-          getCartFn: async () => {
-            console.log('[TestPage] getCartFn called');
-            return window.__TTP_ECOMMERCE__?.getCart() || { items: [], total: 0, count: 0 };
-          }
+        whatsapp: {
+          number: '+972508665824',
+          text: 'היי, אשמח אם תוכלי לעזור לי '
         }
       });
-      window.testWidget = ecomWidget;
-      updateStatus('TTPEcommerceWidget created successfully', 'success');
-      refreshCartDisplay();
+      window.testWidget = chatWidget;
+      const sttLabel = document.getElementById('sttSelect').selectedOptions[0].text;
+      updateStatus('TTPChatWidget created — ' + agent.flavorType + ' flavor (' + agent.partnerId + '), STT: ' + sttLabel, 'success');
     }
     // Button handlers
     document.getElementById('createBtn').onclick = createWidget;
     document.getElementById('destroyBtn').onclick = () => {
-      if (ecomWidget) {
-        ecomWidget.destroy();
-        ecomWidget = null;
+      if (chatWidget) {
+        chatWidget.destroy();
+        chatWidget = null;
         updateStatus('Widget destroyed', '');
-        refreshCartDisplay();
       }
     };
-    document.getElementById('showProductsBtn').onclick = async () => {
-      if (!window.__TTP_ECOMMERCE__) {
+    // Show Rooms — inject mock show_items
+    document.getElementById('showRoomsBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
         updateStatus('Create widget first', 'error');
         return;
       }
-      const query = document.getElementById('productQuery').value || 'milk';
-      try {
-        await window.__TTP_ECOMMERCE__.showProducts(query);
-        updateStatus('showProducts("' + query + '") sent', 'success');
-      } catch (e) {
-        updateStatus('showProducts failed: ' + e.message, 'error');
-      }
+      chatWidget._flavor.messageHandlers['show_items']({
+        t: 'show_items',
+        items: [
+          { roomId: 'room-standard', roomName: 'Standard Room', imageUrl: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=400&h=300&fit=crop', pricePerNight: 120, currency: 'USD', beds: 1, amenities: ['WiFi', 'TV', 'Air Conditioning'], available: true },
+          { roomId: 'room-deluxe', roomName: 'Deluxe Room', imageUrl: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=400&h=300&fit=crop', pricePerNight: 200, currency: 'USD', beds: 2, amenities: ['WiFi', 'TV', 'Pool', 'Mini Bar'], available: true },
+          { roomId: 'room-suite', roomName: 'Executive Suite', imageUrl: 'https://images.unsplash.com/photo-1566665797739-1674de7a421a?w=400&h=300&fit=crop', pricePerNight: 350, currency: 'USD', beds: 2, amenities: ['WiFi', 'TV', 'Pool', 'Spa', 'Balcony'], available: true },
+          { roomId: 'room-penthouse', roomName: 'Penthouse Suite', imageUrl: 'https://images.unsplash.com/photo-1578683010236-d716f9a3f461?w=400&h=300&fit=crop', pricePerNight: 600, currency: 'USD', beds: 3, amenities: ['WiFi', 'TV', 'Pool', 'Spa', 'Balcony', 'Butler'], available: true }
+        ],
+        title: '4 rooms available'
+      });
+      updateStatus('show_items injected with 4 rooms', 'success');
     };
-    document.getElementById('cartAddBtn').onclick = async () => {
-      if (!window.__TTP_ECOMMERCE__) {
+    // Show Gallery — inject mock show_media
+    document.getElementById('showGalleryBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
         updateStatus('Create widget first', 'error');
         return;
       }
-      try {
-        const baseUrl = window.__TTP_MOCK_API__ || 'https://backend.talktopc.com';
-        const response = await fetch(`${baseUrl}/api/partner/mock-store/products/search?q=milk&limit=1&sessionId=test`);
-        const data = await response.json();
-        const product = data.products[0];
-        window.__TTP_ECOMMERCE__.handleMessage({
-          t: 'cart_updated',
-          product: product,
-          action: 'added',
-          cartTotal: product.price,
-          cartItemCount: 1
-        });
-        updateStatus('Simulated cart_updated for "' + product.name + '"', 'success');
-        setTimeout(refreshCartDisplay, 200);
-      } catch (e) {
-        updateStatus('Failed to fetch product: ' + e.message, 'error');
-      }
+      chatWidget._flavor.messageHandlers['show_media']({
+        t: 'show_media',
+        images: [
+          { url: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=800', caption: 'Standard Room' },
+          { url: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=800', caption: 'Deluxe Room' },
+          { url: 'https://images.unsplash.com/photo-1566665797739-1674de7a421a?w=800', caption: 'Executive Suite' },
+          { url: 'https://images.unsplash.com/photo-1578683010236-d716f9a3f461?w=800', caption: 'Penthouse Suite' }
+        ],
+        title: 'Hotel Rooms'
+      });
+      updateStatus('show_media injected with 4 images (fullscreen gallery)', 'success');
     };
-    document.getElementById('cartClearBtn').onclick = () => {
-      if (!window.__TTP_ECOMMERCE__) {
+    // Booking Updated — inject mock booking_updated
+    document.getElementById('bookingBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
         updateStatus('Create widget first', 'error');
         return;
       }
-      window.__TTP_ECOMMERCE__.clearCart();
-      updateStatus('Cart cleared', '');
-      refreshCartDisplay();
+      chatWidget._flavor.messageHandlers['booking_updated']({
+        t: 'booking_updated',
+        booking: {
+          roomId: 'room-deluxe',
+          roomName: 'Deluxe Room',
+          nights: 3,
+          guests: 2,
+          pricePerNight: 200,
+          totalPrice: 650,
+          currency: 'USD',
+          extras: [{ extraId: 'breakfast', name: 'Breakfast Buffet', price: 25, quantity: 1 }]
+        }
+      });
+      updateStatus('booking_updated injected (Deluxe Room, 3 nights, breakfast)', 'success');
     };
-    document.getElementById('refreshCartBtn').onclick = refreshCartDisplay;
+    document.getElementById('clearBookingBtn').onclick = () => {
+      if (!chatWidget || !chatWidget._flavor) {
+        updateStatus('Create widget first', 'error');
+        return;
+      }
+      chatWidget._flavor.messageHandlers['booking_updated']({
+        t: 'booking_updated',
+        booking: {}
+      });
+      updateStatus('Booking cleared', '');
+    };
-    // Wait for SDK and auto-create widget
+    // Wait for SDK and auto-create
     function waitForSDK() {
       return new Promise((resolve, reject) => {
-        if (window.TTPAgentSDK?.TTPEcommerceWidget) { resolve(); return; }
+        if (window.TTPAgentSDK?.TTPChatWidget) { resolve(); return; }
         let attempts = 0;
-        const maxAttempts = 150; // 15s - allows for slow mobile/ngrok
         const iv = setInterval(() => {
           attempts++;
-          if (window.TTPAgentSDK?.TTPEcommerceWidget) { clearInterval(iv); resolve(); }
-          else if (attempts >= maxAttempts) { clearInterval(iv); reject(new Error('SDK failed to load')); }
+          if (window.TTPAgentSDK?.TTPChatWidget) { clearInterval(iv); resolve(); }
+          else if (attempts >= 150) { clearInterval(iv); reject(new Error('SDK failed to load')); }
         }, 100);
       });
     }

package/dist/examples/test-index.html CHANGED Viewed

@@ -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>