npm - ttp-agent-sdk - Versions diffs - 2.48.18 → 2.48.21 - Mend

ttp-agent-sdk 2.48.18 → 2.48.21

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 (8) hide show

package/dist/agent-widget.dev.js +748 -165
package/dist/agent-widget.esm.js +1 -1
package/dist/agent-widget.js +1 -1
package/package.json +2 -1
package/dist/examples/pet-store.html +0 -494
package/dist/examples/seabreeze-hotel.html +0 -403
package/examples/pet-store.html +0 -494
package/examples/seabreeze-hotel.html +0 -403

package/examples/seabreeze-hotel.html DELETED Viewed

@@ -1,403 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Seabreeze Hotel — Concierge</title>
-  <style>
-    :root {
-      --ink: #14202b;
-      --sand: #f4efe6;
-      --sea: #1c4e6b;
-      --foam: #e8f2f6;
-      --gold: #c4a46a;
-    }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
-      color: var(--ink);
-      background: var(--sand);
-      min-height: 100vh;
-    }
-    header {
-      background: linear-gradient(160deg, #0d2c3d 0%, #1c4e6b 55%, #3a7a8c 100%);
-      color: #f7f3ea;
-      padding: 56px 24px 88px;
-    }
-    .wrap { max-width: 920px; margin: 0 auto; }
-    .header-top {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 20px;
-      flex-wrap: wrap;
-    }
-    nav {
-      display: flex;
-      gap: 8px;
-      font-family: system-ui, sans-serif;
-    }
-    nav a {
-      color: #f7f3ea;
-      text-decoration: none;
-      font-size: 13px;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      padding: 8px 14px;
-      border: 1px solid rgba(247, 243, 234, 0.28);
-      border-radius: 999px;
-    }
-    nav a.active, nav a:hover {
-      background: rgba(247, 243, 234, 0.14);
-      border-color: var(--gold);
-      color: #fff;
-    }
-    .eyebrow {
-      letter-spacing: 0.22em;
-      text-transform: uppercase;
-      font-size: 12px;
-      color: var(--gold);
-      margin-bottom: 12px;
-    }
-    h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; line-height: 1.15; }
-    h2 { font-size: 1.55rem; font-weight: 500; }
-    .lead { margin-top: 16px; max-width: 36rem; font-size: 1.15rem; line-height: 1.55; opacity: 0.92; }
-    main { margin-top: -40px; padding: 0 24px 80px; }
-    .card {
-      background: #fff;
-      border-radius: 18px;
-      padding: 28px;
-      box-shadow: 0 18px 40px rgba(20, 32, 43, 0.08);
-    }
-    .rooms { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 20px; }
-    .room { background: var(--foam); border-radius: 12px; padding: 16px; }
-    .room h3 { font-size: 1.05rem; margin-bottom: 6px; }
-    .room p { font-size: 0.95rem; line-height: 1.45; color: #3d4d5a; }
-    .hint {
-      margin-top: 22px;
-      padding: 14px 16px;
-      border-left: 3px solid var(--gold);
-      background: #fbf7ef;
-      font-family: system-ui, sans-serif;
-      font-size: 14px;
-      line-height: 1.45;
-    }
-    .status { margin-top: 12px; font-family: ui-monospace, monospace; font-size: 12px; color: #4b5d6b; }
-    .status.ok { color: #1b6b45; }
-    .status.err { color: #9b1c1c; }
-    form.booking {
-      display: grid;
-      gap: 16px;
-      margin-top: 20px;
-      font-family: system-ui, sans-serif;
-    }
-    .field {
-      display: grid;
-      gap: 6px;
-    }
-    .field label {
-      font-size: 13px;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      color: #4b5d6b;
-    }
-    .field input, .field select {
-      font: inherit;
-      padding: 12px 14px;
-      border: 1px solid #d5dde3;
-      border-radius: 10px;
-      background: #fff;
-      color: var(--ink);
-    }
-    .field input:focus, .field select:focus {
-      outline: 2px solid #1c4e6b;
-      outline-offset: 1px;
-    }
-    .field.just-filled input, .field.just-filled select {
-      border-color: #c4a46a;
-      background: #fff8ea;
-      box-shadow: 0 0 0 3px rgba(196, 164, 106, 0.28);
-    }
-    .actions {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-    button[type="submit"] {
-      font: inherit;
-      background: var(--sea);
-      color: #f7f3ea;
-      border: 0;
-      border-radius: 999px;
-      padding: 12px 20px;
-      cursor: pointer;
-    }
-    .confirm {
-      display: none;
-      margin-top: 18px;
-      padding: 16px;
-      border-radius: 12px;
-      background: #eef7f1;
-      color: #1b6b45;
-      font-family: system-ui, sans-serif;
-      line-height: 1.45;
-    }
-    .confirm.show { display: block; }
-  </style>
-</head>
-<body>
-  <header>
-    <div class="wrap">
-      <div class="header-top">
-        <p class="eyebrow">Praia do Guincho · Cascais</p>
-        <nav>
-          <a href="#home" data-nav="home">Rooms</a>
-          <a href="#booking" data-nav="booking">Request a stay</a>
-        </nav>
-      </div>
-      <h1>Seabreeze Hotel</h1>
-      <p class="lead">A 42-room boutique stay above the Atlantic. Ask Mila about rooms, or say you want to book — she will open the form and fill each field as you speak.</p>
-    </div>
-  </header>
-  <main>
-    <div id="view-home" class="wrap card">
-      <p class="eyebrow">Stay</p>
-      <h2>Rooms overlooking the cliff</h2>
-      <div class="rooms">
-        <div class="room">
-          <h3>Garden Room</h3>
-          <p>24 m², garden view, queen bed. Quiet and close to the path down to the beach.</p>
-        </div>
-        <div class="room">
-          <h3>Ocean Room</h3>
-          <p>30 m², balcony with a full Atlantic view, king bed.</p>
-        </div>
-        <div class="room">
-          <h3>Cliff Suite</h3>
-          <p>48 m², living room, soaking tub, and a large terrace.</p>
-        </div>
-        <div class="room">
-          <h3>Lighthouse Penthouse</h3>
-          <p>70 m², private rooftop plunge pool, sleeps four.</p>
-        </div>
-      </div>
-      <p class="hint">Tap TalkToPC and speak with <strong>Mila</strong>. Say you want to book a stay — she opens this page’s form and fills one field at a time from what you say.</p>
-      <p id="status" class="status">Loading widget…</p>
-    </div>
-    <div id="view-booking" class="wrap card" hidden>
-      <p class="eyebrow">Request</p>
-      <h2>Tell Mila each detail</h2>
-      <p class="hint">Stay on this page and speak. After each answer she writes it into the matching field. Required: check-in, nights, guests, room, name, and email or phone.</p>
-      <form id="booking-form" class="booking">
-        <div class="field" data-field="check_in">
-          <label for="field-check_in">Check-in date</label>
-          <input id="field-check_in" name="check_in" type="text" autocomplete="off" placeholder="For example 12 September">
-        </div>
-        <div class="field" data-field="nights">
-          <label for="field-nights">Nights</label>
-          <input id="field-nights" name="nights" type="text" inputmode="numeric" placeholder="Number of nights">
-        </div>
-        <div class="field" data-field="guests">
-          <label for="field-guests">Guests</label>
-          <input id="field-guests" name="guests" type="text" inputmode="numeric" placeholder="Number of guests">
-        </div>
-        <div class="field" data-field="room_type">
-          <label for="field-room_type">Room type</label>
-          <select id="field-room_type" name="room_type">
-            <option value="">Choose a room</option>
-            <option value="Garden Room">Garden Room</option>
-            <option value="Ocean Room">Ocean Room</option>
-            <option value="Cliff Suite">Cliff Suite</option>
-            <option value="Lighthouse Penthouse">Lighthouse Penthouse</option>
-          </select>
-        </div>
-        <div class="field" data-field="full_name">
-          <label for="field-full_name">Full name</label>
-          <input id="field-full_name" name="full_name" type="text" autocomplete="name" placeholder="Guest name">
-        </div>
-        <div class="field" data-field="contact">
-          <label for="field-contact">Email or phone</label>
-          <input id="field-contact" name="contact" type="text" autocomplete="off" placeholder="Email or phone number">
-        </div>
-        <div class="actions">
-          <button type="submit">Send request</button>
-        </div>
-      </form>
-      <div id="booking-confirm" class="confirm" role="status"></div>
-      <p id="status-booking" class="status"></p>
-    </div>
-  </main>
-  <script src="demo-sdk-loader.js"></script>
-  <script>
-    const AGENT_ID = 'agent_3160ec419';
-    const APP_ID = 'app_wNGQKiMUfUT5JdVIaxzXOJfdcgBegxGY5hZo';
-    const FIELDS = ['check_in', 'nights', 'guests', 'room_type', 'full_name', 'contact'];
-    const ROOM_ALIASES = {
-      'garden': 'Garden Room',
-      'garden room': 'Garden Room',
-      'ocean': 'Ocean Room',
-      'ocean room': 'Ocean Room',
-      'cliff': 'Cliff Suite',
-      'cliff suite': 'Cliff Suite',
-      'suite': 'Cliff Suite',
-      'lighthouse': 'Lighthouse Penthouse',
-      'penthouse': 'Lighthouse Penthouse',
-      'lighthouse penthouse': 'Lighthouse Penthouse'
-    };
-    function setStatus(msg, kind) {
-      const el = document.getElementById('status');
-      if (el) {
-        el.textContent = msg;
-        el.className = 'status' + (kind ? ' ' + kind : '');
-      }
-      const booking = document.getElementById('status-booking');
-      if (booking) {
-        booking.textContent = msg;
-        booking.className = 'status' + (kind ? ' ' + kind : '');
-      }
-    }
-    function currentPage() {
-      return document.getElementById('view-booking').hidden ? 'home' : 'booking';
-    }
-    function showPage(page) {
-      const next = page === 'booking' ? 'booking' : 'home';
-      document.getElementById('view-home').hidden = next !== 'home';
-      document.getElementById('view-booking').hidden = next !== 'booking';
-      document.querySelectorAll('nav [data-nav]').forEach((link) => {
-        link.classList.toggle('active', link.getAttribute('data-nav') === next);
-      });
-      if (location.hash !== '#' + next) {
-        history.replaceState(null, '', '#' + next);
-      }
-      return next;
-    }
-    function formValues() {
-      const values = {};
-      FIELDS.forEach((name) => {
-        const el = document.getElementById('field-' + name);
-        values[name] = el ? String(el.value || '').trim() : '';
-      });
-      return values;
-    }
-    function formSnapshot() {
-      const values = formValues();
-      const filled = FIELDS.filter((name) => values[name]);
-      const missing = FIELDS.filter((name) => !values[name]);
-      return { values, filled, missing };
-    }
-    function normalizeRoom(value) {
-      const raw = String(value || '').trim();
-      const key = raw.toLowerCase();
-      return ROOM_ALIASES[key] || raw;
-    }
-    function fillBookingField(field, value) {
-      if (!FIELDS.includes(field)) {
-        return { ok: false, error: 'Unknown field', field, allowed: FIELDS };
-      }
-      showPage('booking');
-      const wrap = document.querySelector('[data-field="' + field + '"]');
-      const el = document.getElementById('field-' + field);
-      const nextValue = field === 'room_type' ? normalizeRoom(value) : String(value || '').trim();
-      if (!el) {
-        return { ok: false, error: 'Field is missing from the page', field };
-      }
-      el.value = nextValue;
-      if (wrap) {
-        wrap.classList.add('just-filled');
-        setTimeout(() => wrap.classList.remove('just-filled'), 1600);
-      }
-      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      const snap = formSnapshot();
-      return { ok: true, field, value: nextValue, filled: snap.filled, missing: snap.missing };
-    }
-    function submitBooking() {
-      showPage('booking');
-      const snap = formSnapshot();
-      if (snap.missing.length) {
-        return { ok: false, error: 'Form is incomplete', missing: snap.missing, filled: snap.filled };
-      }
-      const box = document.getElementById('booking-confirm');
-      box.textContent = 'Request received for ' + snap.values.full_name + '. The front desk will email a confirmation shortly. This demo does not create a real reservation.';
-      box.classList.add('show');
-      return { ok: true, submitted: true, values: snap.values };
-    }
-    function registerSiteTools(widget) {
-      widget.registerToolHandler('navigate_page', async (params) => {
-        const page = showPage(params && params.page);
-        return { ok: true, page };
-      });
-      widget.registerToolHandler('fill_booking_field', async (params) => {
-        const field = params && (params.field || params.name);
-        const value = params && (params.value != null ? params.value : params.text);
-        return fillBookingField(field, value);
-      });
-      widget.registerToolHandler('submit_booking', async () => submitBooking());
-    }
-    function startWidget() {
-      const TTPChatWidget = window.TTPAgentSDK && window.TTPAgentSDK.TTPChatWidget;
-      if (!TTPChatWidget) {
-        setStatus('SDK loaded but TTPChatWidget is missing.', 'err');
-        return;
-      }
-      if (window.widgetInstance) {
-        try { window.widgetInstance.destroy(); } catch (_) {}
-      }
-      const config = window.TTPDemoSdkLoader.applyWebSocketUrl({
-        agentId: AGENT_ID,
-        appId: APP_ID,
-        language: 'en',
-        agentName: 'Mila',
-        agentRole: 'Seabreeze Concierge',
-        headline: 'Welcome to Seabreeze',
-        subline: 'Ask about rooms, or say you want to book a stay.',
-        behavior: { mode: 'unified', startOpen: true },
-        flavor: { type: 'hotels', partnerId: 'mock-hotel', callView: 'minimized' },
-        icon: { type: 'custom', size: 'medium', backgroundColor: '#FFFFFF' }
-      });
-      window.widgetInstance = new TTPChatWidget(config);
-      registerSiteTools(window.widgetInstance);
-      setStatus('Mila is ready. Say you want to book, then speak one field at a time.', 'ok');
-    }
-    document.querySelectorAll('nav [data-nav]').forEach((link) => {
-      link.addEventListener('click', (event) => {
-        event.preventDefault();
-        showPage(link.getAttribute('data-nav'));
-      });
-    });
-    document.getElementById('booking-form').addEventListener('submit', (event) => {
-      event.preventDefault();
-      const result = submitBooking();
-      if (!result.ok) {
-        setStatus('Still missing: ' + result.missing.join(', '), 'err');
-      }
-    });
-    window.addEventListener('hashchange', () => {
-      showPage(location.hash.replace('#', '') || 'home');
-    });
-    showPage(location.hash.replace('#', '') || 'home');
-    window.TTPDemoSdkLoader.waitForReady()
-      .then(startWidget)
-      .catch((err) => setStatus(String(err && err.message || err), 'err'));
-    window.addEventListener('ttp-demo-sdk-ready', startWidget);
-  </script>
-</body>
-</html>