@mooncompany/uplink-chat 0.5.0

package/public/js/tts-settings.js

@@ -0,0 +1,575 @@
+// ============================================
+// TTS SETTINGS MODULE
+// Text-to-Speech configuration and voice selection
+// ============================================
+
+// DOM elements
+let ttsProviderSelect, ttsProviderDesc;
+let audioToggle;
+let elevenLabsKeyInput, elevenLabsSaveBtn, elevenLabsKeyStatus;
+let elevenLabsVoiceRow, elevenLabsVoiceSelect;
+let openaiKeyInput, openaiKeySaveBtn, openaiKeyStatus;
+let openaiTtsVoiceSelect, openaiTtsModelSelect;
+let edgeTtsVoiceSelect;
+let localTtsUrlInput, localTtsSaveBtn;
+
+function init() {
+  ttsProviderSelect = document.getElementById('ttsProviderSelect');
+  ttsProviderDesc = document.getElementById('ttsProviderDesc');
+  audioToggle = document.getElementById('audioToggle');
+  elevenLabsKeyInput = document.getElementById('elevenLabsKeyInput');
+  elevenLabsSaveBtn = document.getElementById('elevenLabsSaveBtn');
+  elevenLabsKeyStatus = document.getElementById('elevenLabsKeyStatus');
+  elevenLabsVoiceRow = document.getElementById('elevenLabsVoiceRow');
+  elevenLabsVoiceSelect = document.getElementById('elevenLabsVoiceSelect');
+  openaiKeyInput = document.getElementById('openaiKeyInput');
+  openaiKeySaveBtn = document.getElementById('openaiKeySaveBtn');
+  openaiKeyStatus = document.getElementById('openaiKeyStatus');
+  openaiTtsVoiceSelect = document.getElementById('openaiTtsVoiceSelect');
+  openaiTtsModelSelect = document.getElementById('openaiTtsModelSelect');
+  edgeTtsVoiceSelect = document.getElementById('edgeTtsVoiceSelect');
+  localTtsUrlInput = document.getElementById('localTtsUrlInput');
+  localTtsSaveBtn = document.getElementById('localTtsSaveBtn');
+
+  setupEvents();
+}
+
+function setupEvents() {
+  // Audio toggle
+  audioToggle?.addEventListener('click', () => {
+    const core = window.UplinkCore;
+    if (core) {
+      core.audioResponses = !core.audioResponses;
+      audioToggle.classList.toggle('on', core.audioResponses);
+      audioToggle.setAttribute('aria-checked', core.audioResponses ? 'true' : 'false');
+    }
+  });
+
+  // Audio toggle keyboard handler
+  audioToggle?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      audioToggle.click();
+    }
+  });
+
+  // TTS Provider change
+  ttsProviderSelect?.addEventListener('change', async () => {
+    const newProvider = ttsProviderSelect.value;
+    
+    try {
+      const response = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ttsProvider: newProvider })
+      });
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      
+      // Update description based on provider
+      if (ttsProviderDesc) {
+        const descriptions = {
+          'none': 'Voice synthesis disabled',
+          'elevenlabs': 'High-quality cloud TTS (requires API key)',
+          'openai': 'Cloud TTS (uses your OpenAI API key)',
+          'local': 'GPU-accelerated local TTS (custom voice)',
+          'edge': 'Free Microsoft TTS (no API key needed)',
+          'piper': 'Fast local TTS (requires piper install)',
+        };
+        ttsProviderDesc.textContent = descriptions[newProvider] || 'Voice synthesis service';
+      }
+      
+      // Show config panel for the selected provider
+      updateProviderConfigVisibility(newProvider);
+      
+      showToast('TTS provider updated', 'success');
+    } catch (error) {
+      console.error('Failed to update TTS provider:', error);
+      showToast('Failed to update TTS provider', 'error');
+      // Revert selection
+      fetchServerConfig();
+    }
+  });
+
+  // ElevenLabs API key save
+  elevenLabsSaveBtn?.addEventListener('click', saveElevenLabsKey);
+  elevenLabsKeyInput?.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') saveElevenLabsKey();
+  });
+
+  // ElevenLabs voice selection
+  elevenLabsVoiceSelect?.addEventListener('change', async () => {
+    const voiceId = elevenLabsVoiceSelect.value;
+    const voiceName = elevenLabsVoiceSelect.options[elevenLabsVoiceSelect.selectedIndex]?.text;
+    
+    if (!voiceId) return;
+    
+    try {
+      const response = await fetch('/api/config/elevenlabs-voice', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ voiceId, voiceName })
+      });
+      
+      if (response.ok) {
+        showToast(`Voice set to ${voiceName}`, 'success');
+      } else {
+        throw new Error('Failed to save voice');
+      }
+    } catch (error) {
+      console.error('Failed to set voice:', error);
+      showToast('Failed to set voice', 'error');
+    }
+  });
+
+  // OpenAI API key save
+  openaiKeySaveBtn?.addEventListener('click', saveOpenAIKey);
+  openaiKeyInput?.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') saveOpenAIKey();
+  });
+
+  // OpenAI TTS voice/model change
+  openaiTtsVoiceSelect?.addEventListener('change', async () => {
+    try {
+      const response = await fetch('/api/config/openai-tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ voice: openaiTtsVoiceSelect.value })
+      });
+      if (response.ok) {
+        showToast(`OpenAI voice set to ${openaiTtsVoiceSelect.value}`, 'success');
+      } else {
+        const err = await response.json();
+        showToast(err.error || 'Failed to save', 'error');
+      }
+    } catch (e) {
+      showToast('Failed to save OpenAI voice', 'error');
+    }
+  });
+
+  openaiTtsModelSelect?.addEventListener('change', async () => {
+    try {
+      const response = await fetch('/api/config/openai-tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model: openaiTtsModelSelect.value })
+      });
+      if (response.ok) {
+        const labels = { 'tts-1': 'Standard', 'tts-1-hd': 'HD', 'gpt-4o-mini-tts': 'GPT-4o Mini' };
+        showToast(`OpenAI model set to ${labels[openaiTtsModelSelect.value] || openaiTtsModelSelect.value}`, 'success');
+      } else {
+        const err = await response.json();
+        showToast(err.error || 'Failed to save', 'error');
+      }
+    } catch (e) {
+      showToast('Failed to save OpenAI model', 'error');
+    }
+  });
+
+  // Edge TTS voice change
+  edgeTtsVoiceSelect?.addEventListener('change', async () => {
+    const voice = edgeTtsVoiceSelect.value;
+    if (!voice) return;
+    
+    try {
+      const response = await fetch('/api/config/edge-voice', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ voice })
+      });
+      if (response.ok) {
+        showToast(`Edge voice set to ${edgeTtsVoiceSelect.options[edgeTtsVoiceSelect.selectedIndex]?.text || voice}`, 'success');
+      } else {
+        showToast('Failed to save Edge voice', 'error');
+      }
+    } catch (e) {
+      showToast('Failed to save Edge voice', 'error');
+    }
+  });
+
+  // XTTS URL save
+  localTtsSaveBtn?.addEventListener('click', async () => {
+    const url = localTtsUrlInput?.value.trim();
+    
+    try {
+      const response = await fetch('/api/config/local-tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: url || '' })
+      });
+      if (response.ok) {
+        showToast(url ? 'XTTS server URL saved' : 'XTTS URL cleared', 'success');
+      } else {
+        const err = await response.json();
+        showToast(err.error || 'Failed to save', 'error');
+      }
+    } catch (e) {
+      showToast('Failed to save XTTS URL', 'error');
+    }
+  });
+}
+
+/**
+ * Show config panel for the active provider, hide all others
+ */
+function updateProviderConfigVisibility(provider) {
+  const settingsPanel = document.getElementById('settingsPanel');
+  
+  // Hide all provider config panels
+  const allConfigs = settingsPanel?.querySelectorAll('.tts-provider-config') || [];
+  allConfigs.forEach(el => { el.style.display = 'none'; });
+
+  // Show the active provider's config
+  const activeConfig = document.getElementById(`ttsConfig-${provider}`);
+  if (activeConfig) {
+    activeConfig.style.display = 'block';
+  }
+
+  // Provider-specific init
+  if (provider === 'elevenlabs') {
+    loadElevenLabsVoices();
+  } else if (provider === 'edge') {
+    loadEdgeTTSVoices();
+  } else if (provider === 'openai') {
+    loadOpenAITTSStatus();
+  } else if (provider === 'piper') {
+    loadPiperStatus();
+  } else if (provider === 'local') {
+    loadXTTSStatus();
+  }
+}
+
+async function saveElevenLabsKey() {
+  const apiKey = elevenLabsKeyInput?.value.trim();
+  
+  if (!apiKey) {
+    if (elevenLabsKeyStatus) {
+      elevenLabsKeyStatus.textContent = 'Please enter an API key';
+      elevenLabsKeyStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+    return;
+  }
+  
+  if (elevenLabsKeyStatus) {
+    elevenLabsKeyStatus.textContent = 'Validating...';
+    elevenLabsKeyStatus.style.color = 'var(--text-muted)';
+  }
+  
+  try {
+    const response = await fetch('/api/config/elevenlabs-key', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ apiKey })
+    });
+    
+    const data = await response.json();
+    
+    if (data.valid) {
+      if (elevenLabsKeyStatus) {
+        elevenLabsKeyStatus.textContent = `✓ Key saved (${data.subscription} tier)`;
+        elevenLabsKeyStatus.style.color = 'var(--success-color, #4ade80)';
+      }
+      if (elevenLabsKeyInput) {
+        elevenLabsKeyInput.value = ''; // Clear input after save
+        elevenLabsKeyInput.placeholder = '••••••••••••••••';
+      }
+      showToast('ElevenLabs API key saved', 'success');
+      
+      // Load available voices
+      loadElevenLabsVoices();
+    } else {
+      if (elevenLabsKeyStatus) {
+        elevenLabsKeyStatus.textContent = data.error || 'Invalid API key';
+        elevenLabsKeyStatus.style.color = 'var(--error-color, #ef4444)';
+      }
+      showToast('Invalid API key', 'error');
+    }
+  } catch (error) {
+    console.error('Failed to save ElevenLabs key:', error);
+    if (elevenLabsKeyStatus) {
+      elevenLabsKeyStatus.textContent = 'Failed to validate key';
+      elevenLabsKeyStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+    showToast('Failed to save API key', 'error');
+  }
+}
+
+async function loadElevenLabsVoices() {
+  if (!elevenLabsVoiceSelect) return;
+  
+  elevenLabsVoiceSelect.innerHTML = '<option value="">Loading voices...</option>';
+  
+  try {
+    const response = await fetch('/api/config/elevenlabs-voices');
+    const data = await response.json();
+    
+    if (data.error || !data.voices?.length) {
+      elevenLabsVoiceSelect.innerHTML = '<option value="">No voices available</option>';
+      if (elevenLabsVoiceRow) elevenLabsVoiceRow.style.display = 'none';
+      return;
+    }
+    
+    // Get current voice from config
+    const configRes = await fetch('/api/config');
+    const config = await configRes.json();
+    const currentVoiceId = config.elevenLabsVoiceId;
+    
+    // Build options
+    elevenLabsVoiceSelect.innerHTML = data.voices.map(v => 
+      `<option value="${v.id}" ${v.id === currentVoiceId ? 'selected' : ''}>${v.name}</option>`
+    ).join('');
+    
+    if (elevenLabsVoiceRow) elevenLabsVoiceRow.style.display = 'flex';
+  } catch (error) {
+    console.error('Failed to load voices:', error);
+    elevenLabsVoiceSelect.innerHTML = '<option value="">Failed to load voices</option>';
+  }
+}
+
+async function loadOpenAITTSStatus() {
+  try {
+    const res = await fetch('/api/config/tts-status');
+    const data = await res.json();
+    const info = data.openai;
+    
+    if (info?.hasKey) {
+      if (openaiKeyStatus) {
+        openaiKeyStatus.textContent = '✓ API key configured';
+        openaiKeyStatus.style.color = 'var(--success-color, #4ade80)';
+      }
+      if (openaiKeyInput) openaiKeyInput.placeholder = '••••••••••••••••';
+    } else {
+      if (openaiKeyStatus) {
+        openaiKeyStatus.textContent = 'Enter your OpenAI API key';
+        openaiKeyStatus.style.color = '';
+      }
+    }
+    
+    // Sync dropdowns with current config
+    if (openaiTtsVoiceSelect && info?.voice) {
+      openaiTtsVoiceSelect.value = info.voice;
+    }
+    if (openaiTtsModelSelect && info?.model) {
+      openaiTtsModelSelect.value = info.model;
+    }
+  } catch (e) {
+    console.error('Failed to load OpenAI TTS status:', e);
+    if (openaiKeyStatus) {
+      openaiKeyStatus.textContent = 'Failed to check status';
+      openaiKeyStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+  }
+}
+
+async function saveOpenAIKey() {
+  const apiKey = openaiKeyInput?.value.trim();
+  
+  if (!apiKey) {
+    if (openaiKeyStatus) {
+      openaiKeyStatus.textContent = 'Please enter an API key';
+      openaiKeyStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+    return;
+  }
+  
+  if (openaiKeyStatus) {
+    openaiKeyStatus.textContent = 'Validating...';
+    openaiKeyStatus.style.color = 'var(--text-muted)';
+  }
+  
+  try {
+    const response = await fetch('/api/config/openai-key', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ apiKey })
+    });
+    
+    const data = await response.json();
+    
+    if (data.valid) {
+      if (openaiKeyStatus) {
+        openaiKeyStatus.textContent = '✓ API key saved';
+        openaiKeyStatus.style.color = 'var(--success-color, #4ade80)';
+      }
+      if (openaiKeyInput) {
+        openaiKeyInput.value = '';
+        openaiKeyInput.placeholder = '••••••••••••••••';
+      }
+      showToast('OpenAI API key saved', 'success');
+    } else {
+      if (openaiKeyStatus) {
+        openaiKeyStatus.textContent = data.error || 'Invalid API key';
+        openaiKeyStatus.style.color = 'var(--error-color, #ef4444)';
+      }
+      showToast('Invalid API key', 'error');
+    }
+  } catch (error) {
+    console.error('Failed to save OpenAI key:', error);
+    if (openaiKeyStatus) {
+      openaiKeyStatus.textContent = 'Failed to validate key';
+      openaiKeyStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+    showToast('Failed to save API key', 'error');
+  }
+}
+
+async function loadEdgeTTSVoices() {
+  const statusDesc = document.getElementById('edgeTtsStatusDesc');
+  const statusDot = document.getElementById('edgeTtsStatusDot');
+  const voiceRow = document.getElementById('edgeTtsVoiceRow');
+  
+  try {
+    const res = await fetch('/api/config/tts-status');
+    const data = await res.json();
+    const info = data.edge;
+    
+    if (!info?.installed) {
+      if (statusDesc) statusDesc.textContent = 'Not installed — run: npm install node-edge-tts';
+      if (statusDot) statusDot.className = 'status-indicator disconnected';
+      if (voiceRow) voiceRow.style.display = 'none';
+      return;
+    }
+    
+    if (statusDesc) statusDesc.textContent = 'Installed — free, no API key needed';
+    if (statusDot) statusDot.className = 'status-indicator connected';
+    
+    // Load voice list
+    if (edgeTtsVoiceSelect) {
+      edgeTtsVoiceSelect.innerHTML = '<option value="">Loading voices...</option>';
+      
+      const voicesRes = await fetch('/api/config/edge-voices');
+      const voicesData = await voicesRes.json();
+      
+      if (voicesData.voices?.length) {
+        edgeTtsVoiceSelect.innerHTML = voicesData.voices.map(v =>
+          `<option value="${v.shortName}" ${v.shortName === info.voice ? 'selected' : ''}>${v.name} (${v.gender})</option>`
+        ).join('');
+        if (voiceRow) voiceRow.style.display = 'flex';
+      } else {
+        edgeTtsVoiceSelect.innerHTML = '<option value="">No voices available</option>';
+      }
+    }
+  } catch (e) {
+    console.error('Failed to load Edge TTS voices:', e);
+    if (statusDesc) statusDesc.textContent = 'Failed to check status';
+    if (statusDot) statusDot.className = 'status-indicator disconnected';
+  }
+}
+
+async function loadPiperStatus() {
+  const statusDesc = document.getElementById('piperStatusDesc');
+  const statusDot = document.getElementById('piperStatusDot');
+  
+  try {
+    const res = await fetch('/api/config/tts-status');
+    const data = await res.json();
+    const info = data.piper;
+    
+    if (info?.configured) {
+      if (statusDesc) statusDesc.textContent = 'Configured via environment (PIPER_MODEL)';
+      if (statusDot) statusDot.className = 'status-indicator connected';
+    } else {
+      if (statusDesc) statusDesc.textContent = 'Not configured — set PIPER_MODEL in .env';
+      if (statusDot) statusDot.className = 'status-indicator disconnected';
+    }
+  } catch (e) {
+    console.error('Failed to load Piper status:', e);
+  }
+}
+
+async function loadXTTSStatus() {
+  try {
+    const res = await fetch('/api/config/tts-status');
+    const data = await res.json();
+    const info = data.local;
+    
+    if (localTtsUrlInput && info?.url) {
+      localTtsUrlInput.value = info.url;
+    }
+  } catch (e) {
+    console.error('Failed to load XTTS status:', e);
+  }
+}
+
+async function fetchServerConfig() {
+  try {
+    const response = await fetch('/api/config');
+    if (!response.ok) return;
+    
+    const config = await response.json();
+    
+    if (ttsProviderSelect && config.ttsProvider) {
+      ttsProviderSelect.value = config.ttsProvider;
+      
+      // Enable/disable Edge TTS based on availability
+      const edgeOption = document.getElementById('edgeTtsOption');
+      if (edgeOption) {
+        if (config.edgeTtsAvailable) {
+          edgeOption.disabled = false;
+          edgeOption.textContent = 'Edge TTS (Free)';
+        } else {
+          edgeOption.disabled = true;
+          edgeOption.textContent = 'Edge TTS (not installed)';
+        }
+      }
+      
+      // Update description
+      if (ttsProviderDesc) {
+        const descriptions = {
+          'none': 'Voice synthesis disabled',
+          'elevenlabs': 'High-quality cloud TTS (requires API key)',
+          'openai': 'OpenAI TTS (requires API key)',
+          'local': 'GPU-accelerated local TTS (custom voice)',
+          'edge': 'Free Microsoft TTS (user-installed)',
+          'piper': 'Fast local TTS (user-installed)'
+        };
+        ttsProviderDesc.textContent = descriptions[config.ttsProvider] || 'Voice synthesis service';
+      }
+      
+      // Show config panel for active provider
+      updateProviderConfigVisibility(config.ttsProvider);
+      
+      // Update ElevenLabs key status
+      if (config.hasElevenLabsKey && elevenLabsKeyStatus) {
+        elevenLabsKeyStatus.textContent = '✓ API key configured';
+        elevenLabsKeyStatus.style.color = 'var(--success-color, #4ade80)';
+        if (elevenLabsKeyInput) elevenLabsKeyInput.placeholder = '••••••••••••••••';
+      }
+    }
+  } catch (error) {
+    console.warn('TTS Settings: Failed to fetch server config', error);
+  }
+}
+
+function showToast(message, type = 'success') {
+  if (window.UplinkSettings?.showToast) {
+    window.UplinkSettings.showToast(message, type);
+  }
+}
+
+function applyState() {
+  const core = window.UplinkCore;
+  if (!core) return;
+
+  if (audioToggle) {
+    audioToggle.classList.toggle('on', core.audioResponses);
+    audioToggle.setAttribute('aria-checked', core.audioResponses ? 'true' : 'false');
+  }
+
+  fetchServerConfig();
+}
+
+// Expose API
+export const UplinkTTSSettings = {
+  init,
+  applyState,
+  fetchServerConfig,
+  updateProviderConfigVisibility
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkTTSSettings = UplinkTTSSettings;