@makemore/agent-frontend 1.4.0 → 1.6.0

package/README.md

@@ -131,6 +131,9 @@ See `django-tts-example.py` for the complete Django backend implementation.
       anonymousSession: '/api/auth/session/',
       runs: '/api/chat/runs/',
       runEvents: '/api/chat/runs/{runId}/events/',
+      simulateCustomer: '/api/chat/simulate-customer/',
+      ttsVoices: '/api/tts/voices/',           // For voice settings UI (proxy mode)
+      ttsSetVoice: '/api/tts/set-voice/',      // For voice settings UI (proxy mode)
     },
   });
 </script>
@@ -165,6 +168,12 @@ See `django-tts-example.py` for the complete Django backend implementation.
 | `ttsVoices` | object | `{ assistant: null, user: null }` | Voice IDs (only if not using proxy) |
 | `ttsModel` | string | `'eleven_turbo_v2_5'` | ElevenLabs model (only if not using proxy) |
 | `ttsSettings` | object | See below | ElevenLabs voice settings (only if not using proxy) |
+| `availableVoices` | array | `[]` | List of available voices (auto-populated from ElevenLabs API) |
+| `showClearButton` | boolean | `true` | Show clear conversation button in header |
+| `showDebugButton` | boolean | `true` | Show debug mode toggle button in header |
+| `showTTSButton` | boolean | `true` | Show TTS toggle button in header |
+| `showVoiceSettings` | boolean | `true` | Show voice settings button in header (works with proxy and direct API) |
+| `showExpandButton` | boolean | `true` | Show expand/minimize button in header |
 
 ### Text-to-Speech (ElevenLabs)
 
@@ -195,8 +204,66 @@ ELEVENLABS_VOICES = {
     'user': 'pNInz6obpgDQGcFmaJgB',       # Adam
 }
 ```
-3. Add view from `django-tts-example.py` to your Django app
-4. Add URL route: `path('api/tts/speak/', views.text_to_speech)`
+3. Add views from `django-tts-example.py` to your Django app
+4. Add URL routes:
+```python
+path('api/tts/speak/', views.text_to_speech),
+path('api/tts/voices/', views.get_voices),      # For voice settings UI
+path('api/tts/set-voice/', views.set_voice),    # For voice settings UI
+```
+
+**Voice Settings Support:**
+
+The widget now supports voice settings UI in proxy mode! Add these endpoints to enable the voice picker:
+
+```python
+# Get available voices
+@api_view(['GET'])
+def get_voices(request):
+    """Fetch available voices from ElevenLabs"""
+    try:
+        response = requests.get(
+            'https://api.elevenlabs.io/v1/voices',
+            headers={'xi-api-key': settings.ELEVENLABS_API_KEY}
+        )
+        return JsonResponse(response.json())
+    except Exception as e:
+        return JsonResponse({'error': str(e)}, status=500)
+
+# Set voice for user session
+@api_view(['POST'])
+def set_voice(request):
+    """Update voice preference for user's session"""
+    role = request.data.get('role')  # 'assistant' or 'user'
+    voice_id = request.data.get('voice_id')
+
+    # Store in session or database
+    if not hasattr(request, 'session'):
+        return JsonResponse({'error': 'Session not available'}, status=400)
+
+    if role not in ['assistant', 'user']:
+        return JsonResponse({'error': 'Invalid role'}, status=400)
+
+    # Store voice preference in session
+    if 'tts_voices' not in request.session:
+        request.session['tts_voices'] = {}
+    request.session['tts_voices'][role] = voice_id
+    request.session.modified = True
+
+    return JsonResponse({'success': True, 'role': role, 'voice_id': voice_id})
+
+# Update text_to_speech view to use session voices
+@api_view(['POST'])
+def text_to_speech(request):
+    text = request.data.get('text', '')
+    role = request.data.get('role', 'assistant')
+
+    # Get voice from session or fall back to settings
+    session_voices = request.session.get('tts_voices', {})
+    voice_id = session_voices.get(role) or settings.ELEVENLABS_VOICES.get(role)
+
+    # ... rest of TTS implementation
+```
 
 #### Option 2: Direct API (Client-Side)
 
@@ -237,6 +304,28 @@ ChatWidget.init({
 ```javascript
 ChatWidget.toggleTTS();  // Toggle on/off
 ChatWidget.stopSpeech(); // Stop current speech and clear queue
+ChatWidget.setVoice('assistant', 'voice_id'); // Change assistant voice
+ChatWidget.setVoice('user', 'voice_id'); // Change user voice
+```
+
+**Voice Settings UI:**
+
+A voice settings button (🎙️) appears in the header when TTS is enabled. Click it to:
+- Select assistant voice from dropdown
+- Select customer voice for demo mode
+- Voices are automatically fetched from your ElevenLabs account (direct API) or Django backend (proxy mode)
+
+**Works with both proxy and direct API modes!** Just implement the `/api/tts/voices/` and `/api/tts/set-voice/` endpoints in your Django backend (see above).
+
+**Customize Header Buttons:**
+```javascript
+ChatWidget.init({
+  showClearButton: true,      // Show/hide clear button
+  showDebugButton: true,       // Show/hide debug button
+  showTTSButton: true,         // Show/hide TTS toggle
+  showVoiceSettings: true,     // Show/hide voice settings (direct API only)
+  showExpandButton: true,      // Show/hide expand button
+});
 ```
 
 ### Demo Flow Control
@@ -335,6 +424,8 @@ ChatWidget.clearMessages();
 // Text-to-speech controls
 ChatWidget.toggleTTS();  // Toggle TTS on/off
 ChatWidget.stopSpeech(); // Stop current speech and clear queue
+ChatWidget.setVoice('assistant', 'voice_id'); // Change assistant voice
+ChatWidget.setVoice('user', 'voice_id'); // Change user voice
 
 // Start a demo flow
 ChatWidget.startDemoFlow('quote');

package/dist/chat-widget.css

@@ -172,6 +172,95 @@
   }
 }
 
+/* Voice Settings */
+.cw-voice-settings {
+  background: var(--cw-bg-muted);
+  border-bottom: 1px solid var(--cw-border);
+  animation: slideDown 0.2s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    max-height: 0;
+    opacity: 0;
+  }
+  to {
+    max-height: 200px;
+    opacity: 1;
+  }
+}
+
+.cw-voice-settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--cw-text);
+  border-bottom: 1px solid var(--cw-border);
+}
+
+.cw-voice-settings-close {
+  all: initial;
+  font-family: inherit;
+  background: none;
+  border: none;
+  color: var(--cw-text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+  line-height: 1;
+  transition: color 0.15s;
+}
+
+.cw-voice-settings-close:hover {
+  color: var(--cw-text);
+}
+
+.cw-voice-settings-content {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cw-voice-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cw-voice-setting label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--cw-text-muted);
+}
+
+.cw-voice-select {
+  all: initial;
+  font-family: inherit;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--cw-border);
+  border-radius: 6px;
+  background: var(--cw-bg);
+  color: var(--cw-text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.cw-voice-select:hover {
+  border-color: var(--cw-primary);
+}
+
+.cw-voice-select:focus {
+  outline: none;
+  border-color: var(--cw-primary);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
 /* Status bar */
 .cw-status-bar {
   display: flex;

package/dist/chat-widget.js

@@ -42,6 +42,8 @@
       runs: '/api/agent-runtime/runs/',
       runEvents: '/api/agent-runtime/runs/{runId}/events/',
       simulateCustomer: '/api/agent-runtime/simulate-customer/',
+      ttsVoices: '/api/tts/voices/', // For fetching available voices (proxy mode)
+      ttsSetVoice: '/api/tts/set-voice/', // For setting voice (proxy mode)
     },
     // Demo flow control
     autoRunDelay: 1000, // Delay in ms before auto-generating next message
@@ -61,6 +63,13 @@
       style: 0.0,
       use_speaker_boost: true,
     },
+    availableVoices: [], // List of available voices for UI dropdown
+    // UI visibility controls
+    showClearButton: true,
+    showDebugButton: true,
+    showTTSButton: true,
+    showVoiceSettings: true,
+    showExpandButton: true,
   };
 
   // State
@@ -82,6 +91,7 @@
     currentAudio: null,
     isSpeaking: false,
     speechQueue: [],
+    voiceSettingsOpen: false,
   };
 
   // DOM elements
@@ -285,6 +295,79 @@
     render();
   }
 
+  function toggleVoiceSettings() {
+    state.voiceSettingsOpen = !state.voiceSettingsOpen;
+    render();
+  }
+
+  async function setVoice(role, voiceId) {
+    config.ttsVoices[role] = voiceId;
+
+    // If using proxy, notify backend of voice change
+    if (config.ttsProxyUrl) {
+      try {
+        const token = await getOrCreateSession();
+        const headers = {
+          'Content-Type': 'application/json',
+        };
+        if (token) {
+          headers[config.anonymousTokenHeader] = token;
+        }
+
+        await fetch(`${config.backendUrl}${config.apiPaths.ttsSetVoice}`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({ role, voice_id: voiceId }),
+        });
+      } catch (err) {
+        console.error('[ChatWidget] Failed to set voice on backend:', err);
+      }
+    }
+
+    render();
+  }
+
+  async function fetchAvailableVoices() {
+    try {
+      let voices = [];
+
+      if (config.ttsProxyUrl) {
+        // Fetch voices from Django backend
+        const token = await getOrCreateSession();
+        const headers = {};
+        if (token) {
+          headers[config.anonymousTokenHeader] = token;
+        }
+
+        const response = await fetch(`${config.backendUrl}${config.apiPaths.ttsVoices}`, {
+          headers,
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          voices = data.voices || [];
+        }
+      } else if (config.elevenLabsApiKey) {
+        // Fetch voices directly from ElevenLabs
+        const response = await fetch('https://api.elevenlabs.io/v1/voices', {
+          headers: {
+            'xi-api-key': config.elevenLabsApiKey,
+          },
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          voices = data.voices || [];
+        }
+      }
+
+      config.availableVoices = voices;
+      render(); // Re-render to update dropdowns
+    } catch (err) {
+      console.error('[ChatWidget] Failed to fetch voices:', err);
+    }
+  }
+
   // ============================================================================
   // Session Management
   // ============================================================================
@@ -694,6 +777,44 @@
     `;
   }
 
+  function renderVoiceSettings() {
+    if (!state.voiceSettingsOpen) return '';
+
+    const voiceOptions = (role) => {
+      if (config.availableVoices.length === 0) {
+        return '<option value="">Loading voices...</option>';
+      }
+      return config.availableVoices.map(voice => `
+        <option value="${voice.voice_id}" ${config.ttsVoices[role] === voice.voice_id ? 'selected' : ''}>
+          ${escapeHtml(voice.name)}
+        </option>
+      `).join('');
+    };
+
+    return `
+      <div class="cw-voice-settings">
+        <div class="cw-voice-settings-header">
+          <span>🎙️ Voice Settings</span>
+          <button class="cw-voice-settings-close" data-action="toggle-voice-settings">✕</button>
+        </div>
+        <div class="cw-voice-settings-content">
+          <div class="cw-voice-setting">
+            <label>Assistant Voice</label>
+            <select class="cw-voice-select" data-role="assistant" onchange="ChatWidget.setVoice('assistant', this.value)">
+              ${voiceOptions('assistant')}
+            </select>
+          </div>
+          <div class="cw-voice-setting">
+            <label>Customer Voice (Demo)</label>
+            <select class="cw-voice-select" data-role="user" onchange="ChatWidget.setVoice('user', this.value)">
+              ${voiceOptions('user')}
+            </select>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   function renderJourneyDropdown() {
     if (!config.enableAutoRun || Object.keys(config.journeyTypes).length === 0) {
       return '';
@@ -824,13 +945,15 @@
         <div class="cw-header" style="background-color: ${config.primaryColor}">
           <span class="cw-title">${escapeHtml(config.title)}</span>
           <div class="cw-header-actions">
-            <button class="cw-header-btn" data-action="clear" title="Clear Conversation" ${state.isLoading || state.messages.length === 0 ? 'disabled' : ''}>
-              <svg class="cw-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="3 6 5 6 21 6"></polyline>
-                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-              </svg>
-            </button>
-            ${config.enableDebugMode ? `
+            ${config.showClearButton ? `
+              <button class="cw-header-btn" data-action="clear" title="Clear Conversation" ${state.isLoading || state.messages.length === 0 ? 'disabled' : ''}>
+                <svg class="cw-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="3 6 5 6 21 6"></polyline>
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+              </button>
+            ` : ''}
+            ${config.showDebugButton && config.enableDebugMode ? `
               <button class="cw-header-btn ${state.debugMode ? 'cw-btn-active' : ''}" data-action="toggle-debug" title="${state.debugMode ? 'Hide Debug Info' : 'Show Debug Info'}">
                 <svg class="cw-icon-sm ${state.debugMode ? 'cw-icon-warning' : ''}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path>
@@ -838,22 +961,30 @@
                 </svg>
               </button>
             ` : ''}
-            ${config.elevenLabsApiKey ? `
+            ${config.showTTSButton && (config.elevenLabsApiKey || config.ttsProxyUrl) ? `
               <button class="cw-header-btn ${config.enableTTS ? 'cw-btn-active' : ''} ${state.isSpeaking ? 'cw-btn-speaking' : ''}"
                       data-action="toggle-tts"
                       title="${config.enableTTS ? (state.isSpeaking ? 'Speaking...' : 'TTS Enabled') : 'TTS Disabled'}">
                 ${state.isSpeaking ? '🔊' : (config.enableTTS ? '🔉' : '🔇')}
               </button>
             ` : ''}
+            ${config.showVoiceSettings && (config.elevenLabsApiKey || config.ttsProxyUrl) ? `
+              <button class="cw-header-btn ${state.voiceSettingsOpen ? 'cw-btn-active' : ''}" data-action="toggle-voice-settings" title="Voice Settings">
+                🎙️
+              </button>
+            ` : ''}
             ${renderJourneyDropdown()}
-            <button class="cw-header-btn" data-action="toggle-expand" title="${state.isExpanded ? 'Minimize' : 'Expand'}">
-              ${state.isExpanded ? '⊖' : '⊕'}
-            </button>
+            ${config.showExpandButton ? `
+              <button class="cw-header-btn" data-action="toggle-expand" title="${state.isExpanded ? 'Minimize' : 'Expand'}">
+                ${state.isExpanded ? '⊖' : '⊕'}
+              </button>
+            ` : ''}
             <button class="cw-header-btn" data-action="close" title="Close">
               ✕
             </button>
           </div>
         </div>
+        ${renderVoiceSettings()}
         ${statusBar}
         <div class="cw-messages" id="cw-messages">
           ${messagesHtml}
@@ -893,6 +1024,7 @@
           case 'toggle-expand': toggleExpand(); break;
           case 'toggle-debug': toggleDebugMode(); break;
           case 'toggle-tts': toggleTTS(); break;
+          case 'toggle-voice-settings': toggleVoiceSettings(); break;
           case 'clear': clearMessages(); break;
           case 'stop-autorun': stopAutoRun(); break;
           case 'continue-autorun': continueAutoRun(); break;
@@ -969,6 +1101,11 @@
     // Initial render
     render();
 
+    // Fetch available voices if TTS is configured
+    if (config.elevenLabsApiKey || config.ttsProxyUrl) {
+      fetchAvailableVoices();
+    }
+
     console.log('[ChatWidget] Initialized with config:', config);
   }
 
@@ -1012,6 +1149,7 @@
     setAutoRunDelay,
     toggleTTS,
     stopSpeech,
+    setVoice,
     getState: () => ({ ...state }),
     getConfig: () => ({ ...config }),
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A standalone, zero-dependency chat widget for AI agents. Embed conversational AI into any website with a single script tag.",
   "main": "dist/chat-widget.js",
   "files": [