npm - ttp-agent-sdk - Versions diffs - 2.2.9 → 2.2.10 - Mend

ttp-agent-sdk 2.2.9 → 2.2.10

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

package/README.md +1 -1
package/dist/agent-widget.js +1 -1
package/dist/agent-widget.js.map +1 -1
package/dist/examples/test-text-chat.html +7 -7
package/dist/examples/test.html +3 -3
package/dist/examples/translations.json +1 -0
package/dist/index.html +1 -1
package/examples/test-text-chat.html +7 -7
package/examples/test.html +3 -3
package/examples/translations.json +1 -0
package/package.json +1 -1
package/dist/examples/test-agent-app.html +0 -1209
package/examples/test-agent-app.html +0 -1209

package/dist/examples/test-agent-app.html DELETED Viewed

@@ -1,1209 +0,0 @@
-<!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>Voice Agent Widget - Agent ID + App ID Test</title>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      max-width: 800px;
-      margin: 40px auto;
-      padding: 20px;
-      background: #F9FAFB;
-    }
-    @media (max-width: 768px) {
-      body {
-        margin: 0;
-        padding: 10px;
-      }
-    }
-    .container {
-      background: white;
-      padding: 30px;
-      border-radius: 12px;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    @media (max-width: 768px) {
-      .container {
-        padding: 16px;
-        border-radius: 8px;
-      }
-    }
-    h1 {
-      color: #111827;
-      margin-top: 0;
-    }
-    .info {
-      background: #EFF6FF;
-      border-left: 4px solid #3B82F6;
-      padding: 16px;
-      margin: 20px 0;
-      border-radius: 4px;
-    }
-    .config-info {
-      background: #F0FDF4;
-      border-left: 4px solid #10B981;
-      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: #4F46E5;
-      color: white;
-      border: none;
-      padding: 12px 24px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 16px;
-      margin: 10px 10px 10px 0;
-    }
-    button:hover {
-      background: #4338CA;
-    }
-    .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;
-      -webkit-overflow-scrolling: touch;
-    }
-    @media (max-width: 768px) {
-      .code-block {
-        font-size: 11px;
-        padding: 12px;
-        margin: 16px 0;
-      }
-    }
-    .code-block pre {
-      margin: 0;
-      font-family: inherit;
-    }
-    .code-block code {
-      font-family: inherit;
-      white-space: pre;
-    }
-    .tabs {
-      display: flex;
-      gap: 10px;
-      margin-bottom: 15px;
-      border-bottom: 2px solid #E5E7EB;
-    }
-    .tab {
-      background: none;
-      border: none;
-      padding: 12px 24px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 600;
-      color: #6B7280;
-      border-bottom: 3px solid transparent;
-      transition: all 0.2s;
-      margin-bottom: -2px;
-    }
-    .tab:hover {
-      color: #4F46E5;
-    }
-    .tab.active {
-      color: #4F46E5;
-      border-bottom-color: #4F46E5;
-    }
-    .tab-content {
-      display: none;
-    }
-    .tab-content.active {
-      display: block;
-    }
-    .controls-panel {
-      background: white;
-      border: 2px solid #E5E7EB;
-      border-radius: 8px;
-      padding: 20px;
-      margin: 20px 0;
-    }
-    .control-row {
-      display: grid;
-      grid-template-columns: 150px 150px 1fr auto;
-      gap: 12px;
-      align-items: center;
-      margin-bottom: 12px;
-      padding: 12px;
-      background: #F9FAFB;
-      border-radius: 6px;
-    }
-    @media (max-width: 768px) {
-      .control-row {
-        grid-template-columns: 1fr;
-        gap: 8px;
-        padding: 12px;
-      }
-      .control-row > * {
-        width: 100%;
-      }
-      .control-row > div:last-child {
-        display: flex;
-        gap: 8px;
-        margin-top: 8px;
-      }
-      .control-row button {
-        flex: 1;
-        padding: 10px;
-      }
-    }
-    .control-row label {
-      font-weight: 600;
-      color: #374151;
-      font-size: 13px;
-    }
-    .control-row select,
-    .control-row input[type="text"],
-    .control-row input[type="color"] {
-      padding: 8px 12px;
-      border: 1px solid #D1D5DB;
-      border-radius: 4px;
-      font-size: 14px;
-    }
-    .control-row input[type="color"] {
-      width: 60px;
-      height: 40px;
-      cursor: pointer;
-    }
-    .control-row button {
-      padding: 8px 16px;
-      background: #3B82F6;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 13px;
-      margin: 0;
-    }
-    .control-row button:hover {
-      background: #2563EB;
-    }
-    .control-row button.remove {
-      background: #EF4444;
-    }
-    .control-row button.remove:hover {
-      background: #DC2626;
-    }
-    @media (max-width: 768px) {
-      body {
-        font-size: 14px;
-      }
-      h1 {
-        font-size: 24px;
-        margin-top: 0;
-        margin-bottom: 16px;
-      }
-      h2 {
-        font-size: 20px;
-        margin-top: 24px;
-        margin-bottom: 12px;
-      }
-      .info, .config-info {
-        padding: 12px;
-        margin: 16px 0;
-        font-size: 14px;
-      }
-      .info ul, .config-info ul {
-        margin: 8px 0 0 16px;
-        padding-left: 16px;
-        line-height: 1.6;
-      }
-      .info ol {
-        margin: 8px 0 0 16px;
-        padding-left: 16px;
-        line-height: 1.6;
-      }
-      .status {
-        padding: 10px;
-        font-size: 12px;
-        margin: 16px 0;
-      }
-      button {
-        padding: 12px 20px;
-        font-size: 14px;
-        margin: 8px 8px 8px 0;
-        touch-action: manipulation;
-        min-height: 44px;
-      }
-      .tabs {
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-      .tab {
-        padding: 10px 16px;
-        font-size: 13px;
-        min-height: 44px;
-      }
-      .controls-panel {
-        padding: 16px;
-        margin: 16px 0;
-      }
-      .controls-panel button {
-        width: 100%;
-        margin: 8px 0;
-      }
-      .control-row {
-        padding: 12px;
-      }
-      .control-row select,
-      .control-row input[type="text"],
-      .control-row input[type="color"] {
-        font-size: 16px; /* Prevents iOS zoom on focus */
-        min-height: 44px;
-      }
-      .control-row input[type="color"] {
-        min-width: 50px;
-        min-height: 50px;
-        width: 50px;
-        height: 50px;
-      }
-      #log {
-        font-size: 11px;
-        max-height: 200px;
-        padding: 12px;
-      }
-    }
-    @media (max-width: 480px) {
-      button {
-        width: 100%;
-        margin: 8px 0;
-      }
-      .tabs {
-        flex-direction: column;
-      }
-      .tab {
-        width: 100%;
-        text-align: left;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🎤 Voice Agent Widget - Agent ID + App ID Test</h1>
-    <div class="config-info">
-      <strong>📝 Configuration:</strong>
-      <ul style="margin: 10px 0 0 20px; line-height: 1.8;">
-        <li><strong>Agent ID:</strong> agent_87c4a55a1</li>
-        <li><strong>App ID:</strong> app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC</li>
-        <li><strong>Method:</strong> Direct connection (no signed link)</li>
-      </ul>
-    </div>
-    <div class="info">
-      <strong>📝 Testing Instructions:</strong>
-      <ol style="margin: 10px 0 0 20px; line-height: 1.8;">
-        <li>Look for the floating voice button in the bottom-right corner</li>
-        <li>Click the button to open the widget</li>
-        <li>Click the voice button to start (will request microphone permission)</li>
-        <li>Widget will connect directly using agent ID + app ID</li>
-        <li>Check the status updates below</li>
-        <li>Try the interactive customization designer below to customize colors, sizes, text, and more in real-time!</li>
-      </ol>
-    </div>
-    <h2>Widget Status:</h2>
-    <div id="status" class="status">
-      Waiting for widget to load...
-    </div>
-    <h2>Console Log:</h2>
-    <div id="log" style="background: #1F2937; color: #F9FAFB; padding: 16px; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 300px; overflow-y: auto;">
-      Console messages will appear here...
-    </div>
-    <h2>Implementation Code:</h2>
-    <div class="tabs">
-      <button class="tab active" onclick="switchTab('simple')">Simple</button>
-      <button class="tab" onclick="switchTab('advanced')">All Options</button>
-    </div>
-    <div id="simple-tab" class="tab-content active">
-      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
-    agentId: 'agent_87c4a55a1',
-    appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-    primaryColor: '#10B981',
-    position: 'bottom-right',
-    // Icon configuration
-    icon: {
-        type: 'custom',
-        customImage: 'https://talktopc.com/logo192.png',
-        size: 'medium'
-    },
-    // Floating button (main button) colors - WHITE
-    button: {
-        backgroundColor: '#FFFFFF', // White floating button
-        hoverColor: '#E5E7EB' // Gray on hover
-    },
-    // Header (top of panel) colors - LIGHT PURPLE
-    header: {
-        title: 'TTP Support',
-        backgroundColor: '#A78BFA', // Light purple header
-        textColor: '#FFFFFF'
-    },
-    // Mic button (inside panel) colors - GRAY
-    panel: {
-        micButtonColor: '#E5E7EB', // Gray mic button
-        micButtonActiveColor: '#EF4444' // Red when active
-    }
-});</code></pre></div>
-    </div>
-    <h2>🎨 Interactive Customization</h2>
-    <div class="controls-panel">
-      <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB;">
-        <strong style="color: #374151;">Customize widget colors and properties in real-time:</strong>
-      </div>
-      <div id="control-rows">
-        <!-- Control rows will be added dynamically -->
-      </div>
-      <button id="add-control-btn" style="margin-top: 12px; padding: 10px 20px; background: #10B981;">
-        + Add Customization
-      </button>
-      <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #E5E7EB;">
-        <button id="reset-defaults-btn" style="background: #6B7280;">
-          Reset to Defaults
-        </button>
-      </div>
-    </div>
-    <h2>Implementation Code:</h2>
-    <div class="tabs">
-      <button class="tab active" onclick="switchTab('simple')">Simple</button>
-      <button class="tab" onclick="switchTab('advanced')">All Options</button>
-    </div>
-    <div id="advanced-tab" class="tab-content">
-      <div class="code-block"><pre><code>const widget = new TTPAgentSDK.AgentWidget({
-  // Required
-  agentId: 'agent_87c4a55a1',
-  appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-  // Optional: getSessionUrl - only needed for signed links or custom URL logic
-  // getSessionUrl: async ({ agentId, appId, variables }) => {
-  //   const response = await fetch('https://your-backend.com/api/signed-url', {
-  //     method: 'POST',
-  //     headers: { 'Content-Type': 'application/json' },
-  //     body: JSON.stringify({ agentId, appId, variables })
-  //   });
-  //   const data = await response.json();
-  //   return data.signedUrl;
-  // },
-  // Simple styling (backward compatible)
-  primaryColor: '#10B981',
-  position: 'bottom-right', // or use advanced position object below
-  // Icon Configuration
-  icon: {
-    type: 'custom', // 'microphone', 'custom', 'emoji', 'text'
-    customImage: 'https://talktopc.com/logo192.png', // For type: 'custom'
-    size: 'medium' // 'small', 'medium', 'large', 'xl'
-  },
-  // Button Configuration - Floating Button (Main Button) - WHITE
-  button: {
-    size: 'medium', // 'small', 'medium', 'large', 'xl'
-    shape: 'circle', // 'circle', 'square', 'rounded'
-    backgroundColor: '#FFFFFF', // Floating button background color (WHITE)
-    hoverColor: '#E5E7EB', // Floating button hover color (gray)
-    shadow: true,
-    shadowColor: 'rgba(0,0,0,0.15)'
-  },
-  // Header Configuration - Top of Panel - LIGHT PURPLE
-  header: {
-    title: 'TTP Support', // Custom title for the widget header
-    showTitle: true, // Show/hide title
-    backgroundColor: '#A78BFA', // Header background color (LIGHT PURPLE)
-    textColor: '#FFFFFF', // Header text color
-    showCloseButton: true
-  },
-  // Panel Configuration - Includes Mic Button Colors - GRAY
-  panel: {
-    width: 350,
-    height: 500,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255,255,255,0.95)', // Panel background
-    backdropFilter: null,
-    border: '1px solid rgba(0,0,0,0.1)',
-    micButtonColor: '#E5E7EB', // Mic button (inside panel) background color (GRAY)
-    micButtonActiveColor: '#EF4444' // Mic button color when active/recording (RED)
-  },
-  // icon: {
-  //   type: 'microphone',
-  //   emoji: '🎤', // For type: 'emoji'
-  //   text: 'AI', // For type: 'text'
-  //   size: 'medium'
-  // },
-  // Advanced Positioning
-  // position: {
-  //   vertical: 'bottom', // 'top', 'bottom', 'center'
-  //   horizontal: 'right', // 'left', 'right', 'center'
-  //   offset: { x: 20, y: 20 } // Custom offset in pixels
-  // },
-  // Button Configuration
-  // button: {
-  //   size: 'medium', // 'small', 'medium', 'large', 'xl'
-  //   shape: 'circle', // 'circle', 'square', 'rounded'
-  //   primaryColor: '#10B981',
-  //   hoverColor: '#059669',
-  //   activeColor: '#EF4444',
-  //   shadow: true,
-  //   shadowColor: 'rgba(0,0,0,0.15)'
-  // },
-  // Panel Configuration
-  // panel: {
-  //   width: 350,
-  //   height: 500,
-  //   borderRadius: 12,
-  //   backgroundColor: 'rgba(255,255,255,0.95)',
-  //   backdropFilter: 'blur(10px)', // Glass morphism effect
-  //   border: '1px solid rgba(0,0,0,0.1)'
-  // },
-  // Header Configuration
-  // header: {
-  //   title: 'Voice Assistant',
-  //   showTitle: true,
-  //   backgroundColor: null, // Uses button primaryColor if null
-  //   textColor: '#FFFFFF',
-  //   showCloseButton: true
-  // },
-  // Messages Configuration
-  // messages: {
-  //   userBackgroundColor: '#E5E7EB',
-  //   agentBackgroundColor: '#F3F4F6',
-  //   systemBackgroundColor: '#DCFCE7',
-  //   errorBackgroundColor: '#FEE2E2',
-  //   textColor: '#1F2937',
-  //   fontSize: '14px',
-  //   borderRadius: 8
-  // },
-  // Animation Configuration
-  // animation: {
-  //   enableHover: true,
-  //   enablePulse: true,
-  //   enableSlide: true,
-  //   duration: 0.3
-  // },
-  // Behavior Configuration
-  // behavior: {
-  //   startOpen: false, // Start with panel open on page load
-  //   hidden: false,    // Hide the floating button when true
-  //   autoOpen: false,  // Legacy: kept for backward-compatibility
-  //   autoConnect: false, // Automatically connect on load
-  //   showWelcomeMessage: true,
-  //   welcomeMessage: 'Hello! How can I help you today?'
-  // },
-  // Accessibility Configuration
-  // accessibility: {
-  //   ariaLabel: 'Voice Assistant',
-  //   ariaDescription: 'Click to open voice assistant',
-  //   keyboardNavigation: true // ESC key to close
-  // },
-  // Custom CSS
-  // customStyles: `
-  //   #agent-widget {
-  //     /* Your custom CSS here */
-  //   }
-  // `,
-  // Variables for your agent/backend
-  variables: {
-    testMode: true,
-    userName: 'Test User',
-    page: 'test-agent-app.html'
-  }
-});</code></pre></div>
-    </div>
-    <script>
-      function switchTab(tabName) {
-        // Hide all tab contents
-        document.querySelectorAll('.tab-content').forEach(content => {
-          content.classList.remove('active');
-        });
-        // Remove active class from all tabs
-        document.querySelectorAll('.tab').forEach(tab => {
-          tab.classList.remove('active');
-        });
-        // Show selected tab content
-        document.getElementById(tabName + '-tab').classList.add('active');
-        // Add active class to clicked tab
-        event.target.classList.add('active');
-      }
-    </script>
-    <h2>Manual Tests:</h2>
-    <button onclick="testMicButton()">Test Mic Button Click</button>
-    <button onclick="testToggleVoice()">Test ToggleVoice Method</button>
-    <button onclick="checkWidgetState()">Check Widget State</button>
-    <button onclick="testMicrophone()">Test Microphone Access</button>
-  </div>
-  <!-- Load the widget -->
-  <script src="../agent-widget.js" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
-  <script>
-    // Override console.log to show in page
-    const originalLog = console.log;
-    const originalError = console.error;
-    const logDiv = document.getElementById('log');
-    function addLog(message, type = 'log') {
-      const time = new Date().toLocaleTimeString();
-      const color = type === 'error' ? '#EF4444' : '#10B981';
-      logDiv.innerHTML += `<div style="color: ${color};">[${time}] ${message}</div>`;
-      logDiv.scrollTop = logDiv.scrollHeight;
-    }
-    console.log = (...args) => {
-      originalLog(...args);
-      addLog(args.join(' '));
-    };
-    console.error = (...args) => {
-      originalError(...args);
-      addLog(args.join(' '), 'error');
-    };
-    // Update status display
-    function updateStatus(message, type = 'info') {
-      const statusDiv = document.getElementById('status');
-      statusDiv.textContent = message;
-      statusDiv.className = 'status ' + type;
-    }
-    // ============================================
-    // CUSTOMIZATION CONTROLS - Declare early
-    // ============================================
-    // Initialize variable first - MUST be declared before any functions that use it
-    let controlRowCount = 0;
-    const componentOptions = {
-      'button': {
-        label: 'Floating Button',
-        properties: {
-          'backgroundColor': { type: 'color', label: 'Background Color' },
-          'hoverColor': { type: 'color', label: 'Hover Color' },
-          'size': { type: 'select', label: 'Size', options: ['small', 'medium', 'large', 'xl'] },
-          'shape': { type: 'select', label: 'Shape', options: ['circle', 'square', 'rounded'] }
-        }
-      },
-      'header': {
-        label: 'Header',
-        properties: {
-          'backgroundColor': { type: 'color', label: 'Background Color' },
-          'textColor': { type: 'color', label: 'Text Color' },
-          'title': { type: 'text', label: 'Title' }
-        }
-      },
-      'panel': {
-        label: 'Mic Button',
-        properties: {
-          'micButtonColor': { type: 'color', label: 'Background Color' },
-          'micButtonActiveColor': { type: 'color', label: 'Active Color (Recording)' }
-        }
-      },
-      'micButtonHint': {
-        label: 'Mic Button Hint',
-        properties: {
-          'micButtonHint.text': { type: 'text', label: 'Hint Text (empty to hide)' },
-          'micButtonHint.color': { type: 'color', label: 'Text Color' },
-          'micButtonHint.fontSize': { type: 'text', label: 'Font Size (e.g., 12px)' }
-        }
-      },
-      'direction': {
-        label: 'Text Direction',
-        properties: {
-          'direction': { type: 'select', label: 'Direction', options: ['ltr', 'rtl'] }
-        }
-      }
-    };
-    function initializeCustomizationControls() {
-      // Add one initial row
-      addControlRow();
-      // Set up button event listeners
-      const addBtn = document.getElementById('add-control-btn');
-      const resetBtn = document.getElementById('reset-defaults-btn');
-      if (addBtn) {
-        addBtn.addEventListener('click', addControlRow);
-      }
-      if (resetBtn) {
-        resetBtn.addEventListener('click', resetToDefaults);
-      }
-    }
-    function addControlRow() {
-      controlRowCount++;
-      const controlRows = document.getElementById('control-rows');
-      const row = document.createElement('div');
-      row.className = 'control-row';
-      row.id = `control-row-${controlRowCount}`;
-      // Component selector
-      const componentSelect = document.createElement('select');
-      componentSelect.id = `component-${controlRowCount}`;
-      componentSelect.innerHTML = '<option value="">Select Component</option>';
-      Object.keys(componentOptions).forEach(key => {
-        const option = document.createElement('option');
-        option.value = key;
-        option.textContent = componentOptions[key].label;
-        componentSelect.appendChild(option);
-      });
-      componentSelect.onchange = () => updatePropertySelect(controlRowCount);
-      // Property selector (will be populated based on component)
-      const propertySelect = document.createElement('select');
-      propertySelect.id = `property-${controlRowCount}`;
-      propertySelect.innerHTML = '<option value="">Select Property</option>';
-      // Value input (dynamically changes based on property type)
-      const valueContainer = document.createElement('div');
-      valueContainer.id = `value-container-${controlRowCount}`;
-      valueContainer.style.display = 'none';
-      // Action buttons
-      const actionContainer = document.createElement('div');
-      actionContainer.style.display = 'flex';
-      actionContainer.style.gap = '8px';
-      const applyBtn = document.createElement('button');
-      applyBtn.textContent = 'Apply';
-      applyBtn.onclick = () => applyChange(controlRowCount);
-      const removeBtn = document.createElement('button');
-      removeBtn.textContent = 'Remove';
-      removeBtn.className = 'remove';
-      removeBtn.onclick = () => removeControlRow(controlRowCount);
-      actionContainer.appendChild(applyBtn);
-      actionContainer.appendChild(removeBtn);
-      row.appendChild(componentSelect);
-      row.appendChild(propertySelect);
-      row.appendChild(valueContainer);
-      row.appendChild(actionContainer);
-      controlRows.appendChild(row);
-    }
-    function updatePropertySelect(rowId) {
-      const componentSelect = document.getElementById(`component-${rowId}`);
-      const propertySelect = document.getElementById(`property-${rowId}`);
-      const valueContainer = document.getElementById(`value-container-${rowId}`);
-      const component = componentSelect.value;
-      if (!component) {
-        propertySelect.innerHTML = '<option value="">Select Property</option>';
-        valueContainer.style.display = 'none';
-        valueContainer.innerHTML = '';
-        return;
-      }
-      // Populate properties
-      propertySelect.innerHTML = '<option value="">Select Property</option>';
-      const properties = componentOptions[component].properties;
-      Object.keys(properties).forEach(key => {
-        const option = document.createElement('option');
-        option.value = key;
-        option.textContent = properties[key].label;
-        propertySelect.appendChild(option);
-      });
-      propertySelect.onchange = () => updateValueInput(rowId);
-      valueContainer.style.display = 'none';
-      valueContainer.innerHTML = '';
-    }
-    function updateValueInput(rowId) {
-      const componentSelect = document.getElementById(`component-${rowId}`);
-      const propertySelect = document.getElementById(`property-${rowId}`);
-      const valueContainer = document.getElementById(`value-container-${rowId}`);
-      const component = componentSelect.value;
-      const property = propertySelect.value;
-      if (!component || !property) {
-        valueContainer.style.display = 'none';
-        valueContainer.innerHTML = '';
-        return;
-      }
-      const propConfig = componentOptions[component].properties[property];
-      valueContainer.innerHTML = '';
-      if (propConfig.type === 'color') {
-        const input = document.createElement('input');
-        input.type = 'color';
-        input.id = `value-${rowId}`;
-        // Set current value from widget
-        const currentValue = getCurrentValue(component, property);
-        if (currentValue) input.value = rgbToHex(currentValue) || currentValue;
-        valueContainer.appendChild(input);
-      } else if (propConfig.type === 'select') {
-        const select = document.createElement('select');
-        select.id = `value-${rowId}`;
-        propConfig.options.forEach(opt => {
-          const option = document.createElement('option');
-          option.value = opt;
-          option.textContent = opt.charAt(0).toUpperCase() + opt.slice(1);
-          select.appendChild(option);
-        });
-        // Set current value
-        const currentValue = getCurrentValue(component, property);
-        if (currentValue !== null && currentValue !== undefined) {
-          select.value = currentValue.toString();
-        }
-        valueContainer.appendChild(select);
-      } else if (propConfig.type === 'text') {
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.id = `value-${rowId}`;
-        input.placeholder = 'Enter value';
-        // Set current value
-        const currentValue = getCurrentValue(component, property);
-        if (currentValue !== null && currentValue !== undefined) {
-          input.value = currentValue;
-        }
-        valueContainer.appendChild(input);
-      }
-      valueContainer.style.display = 'block';
-    }
-    function getCurrentValue(component, property) {
-      if (!window.testWidget) return null;
-      const config = window.testWidget.config;
-      if (component === 'button' && config.button) {
-        return config.button[property];
-      } else if (component === 'header' && config.header) {
-        return config.header[property];
-      } else if (component === 'panel' && config.panel) {
-        return config.panel[property];
-      } else if (component === 'micButtonHint' && config.panel?.micButtonHint) {
-        // Handle nested micButtonHint properties
-        const hintKey = property.split('.')[1]; // e.g., 'text', 'color', 'fontSize'
-        const value = config.panel.micButtonHint[hintKey];
-        return value;
-      } else if (component === 'direction') {
-        return config.direction;
-      }
-      return null;
-    }
-    function applyChange(rowId) {
-      const componentSelect = document.getElementById(`component-${rowId}`);
-      const propertySelect = document.getElementById(`property-${rowId}`);
-      const valueInput = document.getElementById(`value-${rowId}`);
-      const component = componentSelect.value;
-      const property = propertySelect.value;
-      let value = valueInput.value;
-      if (!component || !property) {
-        alert('Please select component and property');
-        return;
-      }
-      // Allow empty value for text fields (to hide hint)
-      if (value === undefined || value === null) {
-        value = '';
-      }
-      if (!window.testWidget) {
-        alert('Widget not initialized');
-        return;
-      }
-      // Handle boolean values (only for non-empty values)
-      if (value && value !== '') {
-        if (value === 'true') value = true;
-        if (value === 'false') value = false;
-      }
-      // Prepare update config
-      const updateConfig = {};
-      if (component === 'button') {
-        updateConfig.button = { [property]: value };
-      } else if (component === 'header') {
-        updateConfig.header = { [property]: value };
-      } else if (component === 'panel') {
-        updateConfig.panel = { [property]: value };
-      } else if (component === 'micButtonHint') {
-        // Handle nested micButtonHint properties
-        const hintKey = property.split('.')[1]; // e.g., 'text', 'color', 'fontSize', 'show'
-        if (!updateConfig.panel) updateConfig.panel = {};
-        if (!updateConfig.panel.micButtonHint) updateConfig.panel.micButtonHint = {};
-        updateConfig.panel.micButtonHint[hintKey] = value;
-      } else if (component === 'direction') {
-        updateConfig.direction = value;
-      }
-      // Apply update
-      console.log(`Applying change: ${component}.${property} = ${value}`);
-      window.testWidget.updateConfig(updateConfig);
-      // Update the displayed code blocks
-      updateCodeDisplay();
-    }
-    function removeControlRow(rowId) {
-      const row = document.getElementById(`control-row-${rowId}`);
-      if (row) row.remove();
-    }
-    function resetToDefaults() {
-      if (!window.testWidget || !window.defaultConfig) {
-        alert('Widget or defaults not available');
-        return;
-      }
-      if (confirm('Reset widget to default configuration?')) {
-        window.testWidget.updateConfig(window.defaultConfig);
-        updateCodeDisplay();
-        // Clear all control rows
-        const controlRows = document.getElementById('control-rows');
-        controlRows.innerHTML = '';
-        controlRowCount = 0;
-        addControlRow();
-      }
-    }
-    function updateCodeDisplay() {
-      if (!window.testWidget) return;
-      const config = window.testWidget.config;
-      // Helper to safely get position value
-      function getPositionValue() {
-        if (!config.position) return 'bottom-right';
-        if (typeof config.position === 'string') return config.position;
-        // If it's an object, extract the string representation
-        return `${config.position.vertical || 'bottom'}-${config.position.horizontal || 'right'}`;
-      }
-      // Update simple tab
-      const simpleCode = document.querySelector('#simple-tab code');
-      if (simpleCode) {
-        const position = getPositionValue();
-        simpleCode.textContent = `const widget = new TTPAgentSDK.AgentWidget({
-    agentId: 'agent_87c4a55a1',
-    appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-    primaryColor: '${config.primaryColor || '#10B981'}',
-    position: '${position}',
-    icon: {
-        type: '${config.icon?.type || 'custom'}',
-        customImage: '${config.icon?.customImage || 'https://talktopc.com/logo192.png'}',
-        size: '${config.icon?.size || 'medium'}'
-    },
-    button: {
-        backgroundColor: '${config.button?.backgroundColor || '#FFFFFF'}',
-        hoverColor: '${config.button?.hoverColor || '#E5E7EB'}'
-    },
-    header: {
-        title: '${(config.header?.title || 'TTP Support').replace(/'/g, "\\'")}',
-        backgroundColor: '${config.header?.backgroundColor || '#A78BFA'}',
-        textColor: '${config.header?.textColor || '#FFFFFF'}'
-    },
-    panel: {
-        micButtonColor: '${config.panel?.micButtonColor || '#E5E7EB'}',
-        micButtonActiveColor: '${config.panel?.micButtonActiveColor || '#EF4444'}'
-    }
-});`;
-      }
-    }
-    function rgbToHex(rgb) {
-      if (!rgb) return null;
-      if (rgb.startsWith('#')) return rgb;
-      // Try to parse rgb/rgba format
-      const match = rgb.match(/\d+/g);
-      if (match && match.length >= 3) {
-        return '#' + match.slice(0, 3).map(x => {
-          const hex = parseInt(x).toString(16);
-          return hex.length === 1 ? '0' + hex : hex;
-        }).join('');
-      }
-      return null;
-    }
-    // Initialize the widget
-    try {
-      console.log('Initializing widget with agent ID + app ID...');
-      console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
-      console.log('TTPAgentSDK.AgentWidget available:', typeof TTPAgentSDK?.AgentWidget);
-      if (typeof TTPAgentSDK === 'undefined') {
-        throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
-      }
-      if (typeof TTPAgentSDK.AgentWidget === 'undefined') {
-        throw new Error('TTPAgentSDK.AgentWidget is not defined. Check the SDK build.');
-      }
-      // Create a new AgentWidget instance with agent ID + app ID
-      // getSessionUrl is now OPTIONAL - widget will auto-construct URL from agentId/appId
-      const widget = new TTPAgentSDK.AgentWidget({
-        agentId: 'agent_87c4a55a1',
-        appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
-        // getSessionUrl is OPTIONAL - omitted here, so widget auto-constructs the WebSocket URL
-        // If you need signed links or custom URL logic, you can provide it:
-        // getSessionUrl: async ({ agentId, appId, variables }) => { ... }
-        // Optional: Pass variables for your agent/backend
-        variables: {
-          testMode: true,
-          userName: 'Test User',
-          page: 'test-agent-app.html',
-          connectionType: 'direct'
-        },
-        // Customize appearance (using simple config - backward compatible)
-        primaryColor: '#10B981',
-        position: 'bottom-right',
-        // Set TTP icon
-        icon: {
-          type: 'custom',
-          customImage: 'https://talktopc.com/logo192.png',
-          size: 'medium'
-        },
-        // Button colors - Floating button (main button) - WHITE
-        button: {
-          backgroundColor: '#FFFFFF', // White background for floating button
-          hoverColor: '#E5E7EB' // Gray on hover
-        },
-        // Header colors - Top of panel - LIGHT PURPLE
-        header: {
-          title: 'TTP Support',
-          backgroundColor: '#A78BFA', // Light purple header background
-          textColor: '#FFFFFF' // White text
-        },
-        // Panel colors - Mic button inside panel - GRAY
-        panel: {
-          micButtonColor: '#E5E7EB', // Gray mic button
-          micButtonActiveColor: '#EF4444' // Red when active/recording
-        },
-        // Behavior: new options
-        behavior: {
-          startOpen: true, // Start with panel open on page load
-          hidden: false,   // If true, hides the floating button
-          autoConnect: false,
-          showWelcomeMessage: true,
-          welcomeMessage: 'Hello! How can I help you today?'
-        },
-        // Enhanced features are now available but using defaults
-        // You can optionally add:
-        // button: { size: 'large', shape: 'circle' },
-        // panel: { width: 400, height: 600 },
-        // header: { title: 'My Voice Assistant' },
-        // animation: { enableHover: true, enablePulse: true }
-      });
-      // Store widget reference for testing (like the working implementation)
-      window.testWidget = widget;
-      // Store default config for reset functionality (matches initial widget config)
-      window.defaultConfig = JSON.parse(JSON.stringify({
-        primaryColor: '#10B981',
-        position: 'bottom-right',
-        direction: 'ltr',
-        icon: {
-          type: 'custom',
-          customImage: 'https://talktopc.com/logo192.png',
-          size: 'medium'
-        },
-        button: {
-          backgroundColor: '#FFFFFF',
-          hoverColor: '#E5E7EB',
-          size: 'medium',
-          shape: 'circle'
-        },
-        header: {
-          title: 'TTP Support',
-          backgroundColor: '#A78BFA',
-          textColor: '#FFFFFF'
-        },
-        panel: {
-          micButtonColor: '#E5E7EB',
-          micButtonActiveColor: '#EF4444',
-          micButtonHint: {
-            text: 'Click the button to start voice conversation',
-            color: '#6B7280',
-            fontSize: '12px'
-          }
-        }
-      }));
-      // Initialize customization controls
-      initializeCustomizationControls();
-      console.log('Widget initialized successfully with agent ID + app ID!');
-      console.log('Widget instance:', widget);
-      console.log('Test methods available at window.testWidget');
-      updateStatus('Widget loaded and ready ✓', 'success');
-    } catch (error) {
-      console.error('Failed to initialize widget:', error);
-      updateStatus('Widget failed to load ✗', 'error');
-    }
-    // Test functions (matching the working implementation)
-    function testMicButton() {
-      console.log('🎤 Testing mic button manually...');
-      const micButton = document.getElementById('agent-mic-button');
-      if (micButton) {
-        console.log('🎤 Found mic button, clicking...');
-        micButton.click();
-      } else {
-        console.log('🎤 Mic button not found');
-      }
-    }
-    function testToggleVoice() {
-      console.log('🎤 Testing toggleVoice method...');
-      if (window.testWidget && window.testWidget.toggleVoice) {
-        window.testWidget.toggleVoice();
-      } else {
-        console.log('🎤 toggleVoice method not available');
-      }
-    }
-    function checkWidgetState() {
-      console.log('🎤 Widget state:', {
-        isActive: window.testWidget?.isActive,
-        isOpen: window.testWidget?.isOpen,
-        sdk: window.testWidget?.sdk
-      });
-    }
-    async function testMicrophone() {
-      console.log('Testing microphone access...');
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        console.log('Microphone access granted ✓');
-        stream.getTracks().forEach(track => track.stop());
-        alert('Microphone access OK!');
-      } catch (error) {
-        console.error('Microphone access denied:', error);
-        alert('Microphone access DENIED! Please allow microphone in browser settings.');
-      }
-    }
-  </script>
-</body>
-</html>