ttp-agent-sdk 2.1.12 → 2.2.0

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

@@ -84,6 +84,117 @@
       font-size: 12px;
       overflow-x: auto;
       margin: 20px 0;
+      white-space: pre;
+    }
+    
+    .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;
+    }
+
+    .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;
     }
   </style>
 </head>
@@ -105,7 +216,7 @@
       <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 microphone to start (will request mic permission)</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>
       </ol>
@@ -122,28 +233,245 @@
     </div>
 
     <h2>Implementation Code:</h2>
-    <div class="code-block">
-const widget = new TTPAgentSDK.AgentWidget({
+    <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',
   
-  // Direct connection without signed link
-  getSessionUrl: async ({ agentId, appId, variables }) => {
-    // Direct WebSocket URL construction with demo flag
-    const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-    return wsUrl;
+  // 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: {
+  //   autoOpen: false, // Automatically open panel on load
+  //   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'
-  },
-  
-  primaryColor: '#10B981',
-  position: 'bottom-right'
-});
+  }
+});</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>
@@ -185,6 +513,368 @@ const widget = new TTPAgentSDK.AgentWidget({
       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...');
@@ -200,34 +890,16 @@ const widget = new TTPAgentSDK.AgentWidget({
       }
       
       // 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',
         
-        // Direct connection without signed link
-        getSessionUrl: async ({ agentId, appId, variables }) => {
-          console.log('Creating direct session URL for agent:', agentId);
-          console.log('App ID:', appId);
-          console.log('Variables:', variables);
-          
-          updateStatus('Creating direct session URL...', 'info');
-          
-          try {
-            // Direct WebSocket URL construction with demo flag
-            const wsUrl = `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&appId=${appId}&demo=true`;
-            
-            console.log('Generated direct session URL:', wsUrl);
-            updateStatus('Direct session URL created ✓', 'success');
-            
-            return wsUrl;
-          } catch (error) {
-            console.error('Failed to create direct session URL:', error);
-            updateStatus('Failed to create direct session URL ✗', 'error');
-            throw error;
-          }
-        },
+        // 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 }) => { ... }
         
-        // Pass some test variables
+        // Optional: Pass variables for your agent/backend
         variables: {
           testMode: true,
           userName: 'Test User',
@@ -235,14 +907,82 @@ const widget = new TTPAgentSDK.AgentWidget({
           connectionType: 'direct'
         },
         
-        // Customize appearance
+        // Customize appearance (using simple config - backward compatible)
         primaryColor: '#10B981',
-        position: 'bottom-right'
+        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
+        },
+        
+        // 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');
@@ -294,6 +1034,7 @@ const widget = new TTPAgentSDK.AgentWidget({
         alert('Microphone access DENIED! Please allow microphone in browser settings.');
       }
     }
+
   </script>
 </body>
 </html>