ttp-agent-sdk 2.40.0 → 2.43.0

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

package/examples/test-tour.html

@@ -264,7 +264,6 @@ window.testWidget._flavor.messageHandlers['show_items']({
         },
         icon: {
           type: 'custom',
-          customImage: 'https://talktopc.com/logo192.png',
           size: 'medium',
           backgroundColor: '#FFFFFF'
         },

package/examples/widget-customization-dev.html

@@ -1366,7 +1366,6 @@
       },
       icon: {
         type: 'custom',
-        customImage: 'https://talktopc.com/logo192.png',
         size: 'medium',
         backgroundColor: '#FFFFFF'
       },
@@ -1538,7 +1537,7 @@
       const iconConfig = widgetConfig.icon;
       button.innerHTML = ''; // Clear previous content
       
-      if (iconConfig.type === 'custom' && iconConfig.customImage) {
+      if (iconConfig.type === 'custom' && iconConfig.customImage != null && String(iconConfig.customImage).trim() !== '') {
         const img = document.createElement('img');
         img.src = iconConfig.customImage;
         img.alt = 'Chat Assistant';
@@ -1559,15 +1558,12 @@
           <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
         </svg>`;
       } else {
-        // Fallback to custom image if type is custom but no image specified
-        const img = document.createElement('img');
-        img.src = 'https://talktopc.com/logo192.png';
-        img.alt = 'Chat Assistant';
-        const iconSize = Math.floor(getSizeValue(config.size) * 0.6);
-        img.style.width = iconSize + 'px';
-        img.style.height = iconSize + 'px';
-        img.style.objectFit = 'contain';
-        button.appendChild(img);
+        /* custom with no URL (or other types): match SDK — default mic icon for circle launcher */
+        const iconSize = Math.floor(getSizeValue(config.size) * 0.5);
+        button.innerHTML = `<svg viewBox="0 0 24 24" style="width: ${iconSize}px; height: ${iconSize}px; fill: #7C3AED;">
+          <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
+          <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+        </svg>`;
       }
 
       // Make button highlightable
@@ -2453,7 +2449,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 (empty = default icon)">
               </div>
               <div class="control-item" id="iconEmojiControl" style="display: ${widgetConfig.icon.type === 'emoji' ? 'block' : 'none'};">
                 <label>Emoji</label>
@@ -3690,7 +3686,6 @@
       },
       icon: {
         type: 'custom',
-        customImage: 'https://talktopc.com/logo192.png',
         size: 'medium',
         backgroundColor: '#FFFFFF'
       },
@@ -4192,7 +4187,6 @@
         },
         icon: {
           type: 'custom',
-          customImage: 'https://talktopc.com/logo192.png',
           size: 'medium',
           backgroundColor: '#FFFFFF'
         },

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.43.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",