ttp-agent-sdk 2.40.0 → 2.44.0

package/examples/widget-customization.html

@@ -816,6 +816,33 @@
       line-height: 1;
     }
 
+    /* Match SDK default pill: waveform in frosted circle */
+    .mock-pill-icon.mock-pill-icon--wave {
+      background: rgba(255, 255, 255, 0.15);
+    }
+    .mock-pill-waveform {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      height: 16px;
+    }
+    .mock-pill-waveform .bar {
+      width: 2px;
+      background: #fff;
+      border-radius: 1px;
+      animation: mockPillWaveAnim 0.8s ease-in-out infinite;
+      transform-origin: center bottom;
+    }
+    .mock-pill-waveform .bar:nth-child(1) { height: 5px; animation-delay: 0s; }
+    .mock-pill-waveform .bar:nth-child(2) { height: 10px; animation-delay: 0.1s; }
+    .mock-pill-waveform .bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }
+    .mock-pill-waveform .bar:nth-child(4) { height: 8px; animation-delay: 0.3s; }
+    .mock-pill-waveform .bar:nth-child(5) { height: 12px; animation-delay: 0.4s; }
+    @keyframes mockPillWaveAnim {
+      0%, 100% { transform: scaleY(0.4); }
+      50% { transform: scaleY(1); }
+    }
+
     .mock-pill-text {
       display: flex;
       flex-direction: column;
@@ -1815,8 +1842,10 @@
                 <div class="mock-prompt-bubble" id="mockPromptBubble" style="display: none;"></div>
                 <div class="mock-pulse-rings" id="mockPulseRings" style="display: none;"></div>
                 <button class="mock-pill-launcher" id="mockButton" data-element-type="button">
-                  <div class="mock-pill-icon" id="mockPillIcon">
-                    <img src="https://talktopc.com/logo192.png" alt="" style="width:22px;height:22px;border-radius:50%;object-fit:cover;">
+                  <div class="mock-pill-icon mock-pill-icon--wave" id="mockPillIcon">
+                    <div class="mock-pill-waveform" aria-hidden="true">
+                      <span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span>
+                    </div>
                   </div>
                   <div class="mock-pill-text" id="mockPillText">
                     <span class="mock-pill-title" id="mockPillTitle">Chat Assistant</span>
@@ -1977,7 +2006,6 @@
       },
       icon: {
         type: 'custom',
-        customImage: 'https://talktopc.com/logo192.png',
         size: 'medium',
         backgroundColor: '#FFFFFF'
       },
@@ -2175,17 +2203,23 @@
       const iconConfig = widgetConfig.icon;
       const headerConfig = widgetConfig.header;
 
-      // Update pill icon
+      // Update pill icon (SDK: custom URL → image; else animated waveform like mobile FAB)
       const pillIcon = document.getElementById('mockPillIcon');
       if (pillIcon) {
-        if (iconConfig.type === 'custom' && iconConfig.customImage) {
+        const hasCustomUrl = iconConfig.type === 'custom' && iconConfig.customImage != null && String(iconConfig.customImage).trim() !== '';
+        if (hasCustomUrl) {
+          pillIcon.className = 'mock-pill-icon';
           pillIcon.innerHTML = `<img src="${iconConfig.customImage}" alt="" style="width:22px;height:22px;border-radius:50%;object-fit:cover;">`;
+          pillIcon.style.backgroundColor = iconConfig.backgroundColor || '#ffffff';
         } else if (iconConfig.type === 'emoji') {
+          pillIcon.className = 'mock-pill-icon';
           pillIcon.innerHTML = `<span class="pill-emoji">${iconConfig.emoji || '🤖'}</span>`;
+          pillIcon.style.backgroundColor = iconConfig.backgroundColor || '#ffffff';
         } else {
-          pillIcon.innerHTML = `<img src="${iconConfig.customImage || 'https://talktopc.com/logo192.png'}" alt="" style="width:22px;height:22px;border-radius:50%;object-fit:cover;">`;
+          pillIcon.className = 'mock-pill-icon mock-pill-icon--wave';
+          pillIcon.innerHTML = '<div class="mock-pill-waveform" aria-hidden="true"><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span></div>';
+          pillIcon.style.backgroundColor = '';
         }
-        pillIcon.style.backgroundColor = iconConfig.backgroundColor || '#ffffff';
       }
 
       // Update pill title and status
@@ -3179,7 +3213,7 @@
               </div>
               <div class="control-item" id="iconCustomImageControl" style="display: ${widgetConfig.icon.type === 'custom' ? 'block' : 'none'};">
                 <label>Image URL</label>
-                <input type="text" id="iconCustomImage" value="${widgetConfig.icon.customImage || 'https://talktopc.com/logo192.png'}" placeholder="https://talktopc.com/logo192.png">
+                <input type="text" id="iconCustomImage" value="${widgetConfig.icon.customImage || ''}" placeholder="Optional image URL — leave empty for waveform">
               </div>
               <div class="control-item" id="iconEmojiControl" style="display: ${widgetConfig.icon.type === 'emoji' ? 'block' : 'none'};">
                 <label>Emoji</label>
@@ -4518,7 +4552,6 @@
       },
       icon: {
         type: 'custom',
-        customImage: 'https://talktopc.com/logo192.png',
         size: 'medium',
         backgroundColor: '#FFFFFF'
       },
@@ -5240,7 +5273,6 @@
         },
         icon: {
           type: 'custom',
-          customImage: 'https://talktopc.com/logo192.png',
           size: 'medium',
           backgroundColor: '#FFFFFF'
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttp-agent-sdk",
-  "version": "2.40.0",
+  "version": "2.44.0",
   "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",
@@ -19,7 +19,6 @@
     "README.md",
     "GETTING_STARTED.md",
     "ENHANCED_WIDGET_GUIDE.md",
-    "SIGNED_LINK_GUIDE.md",
     "WORDPRESS_WIX_GUIDE.md"
   ],
   "scripts": {