@mooncompany/uplink-chat 0.5.0

package/public/js/streaming-handler.js

@@ -0,0 +1,324 @@
+// ============================================
+// STREAMING HANDLER MODULE
+// Shared SSE streaming, chunk processing, and dedup
+// Used by both chat.js and split-chat.js
+// ============================================
+
+import { UplinkMarkdown } from './markdown.js';
+import { UplinkMessageRenderer } from './message-renderer.js';
+
+/**
+ * Create a new StreamingHandler instance.
+ * Each chat pane gets its own instance with independent state.
+ */
+export function createStreamingHandler(options) {
+  const {
+    container,
+    formatMessage,
+    agentId = null,
+    onStreamStart,
+    onStreamEnd,
+    getIsNearBottom,
+    showAvatar = false
+  } = options;
+
+  // ============================================
+  // INSTANCE STATE
+  // ============================================
+
+  let isStreaming = false;
+  let streamingDiv = null;
+  let streamContent = '';
+  let isProcessingRequest = false;
+  const seenMessageIds = new Set();
+  const MAX_SEEN_IDS = 200;
+  let streamRenderTimer = null;
+  let streamRenderPending = null;
+  const STREAM_RENDER_INTERVAL_MS = 120;
+
+  // ============================================
+  // STREAMING MESSAGE MANAGEMENT
+  // ============================================
+
+  function createStreamingMessage() {
+    isStreaming = true;
+    streamContent = '';
+
+    const div = document.createElement('div');
+    div.className = 'message assistant streaming';
+    div.dataset.time = Date.now();
+
+    if (showAvatar) {
+      const avatar = UplinkMessageRenderer.buildAgentAvatar(agentId);
+      if (avatar) {
+        div.prepend(avatar);
+      }
+    }
+
+    const textSpan = document.createElement('span');
+    textSpan.className = 'message-text';
+    div.appendChild(textSpan);
+
+    if (container) {
+      container.appendChild(div);
+      container.scrollTop = container.scrollHeight;
+    }
+
+    streamingDiv = div;
+
+    if (onStreamStart) {
+      onStreamStart();
+    }
+
+    return div;
+  }
+
+  function updateStreamingContent(content) {
+    if (!streamingDiv) return;
+
+    const textSpan = streamingDiv.querySelector('.message-text');
+    if (!textSpan) return;
+
+    streamRenderPending = { textSpan, content };
+
+    if (!streamRenderTimer) {
+      flushStreamRender();
+      streamRenderTimer = setInterval(() => {
+        if (streamRenderPending) {
+          flushStreamRender();
+        } else {
+          clearStreamRenderTimer();
+        }
+      }, STREAM_RENDER_INTERVAL_MS);
+    }
+
+    if (container && (getIsNearBottom ? getIsNearBottom() : true)) {
+      container.scrollTop = container.scrollHeight;
+    }
+  }
+
+  function flushStreamRender() {
+    if (!streamRenderPending) return;
+    const { textSpan, content } = streamRenderPending;
+    streamRenderPending = null;
+
+    if (UplinkMarkdown?.render) {
+      textSpan.innerHTML = UplinkMarkdown.render(content);
+      if (UplinkMarkdown.highlightCode) {
+        UplinkMarkdown.highlightCode(textSpan);
+      }
+    } else if (formatMessage) {
+      textSpan.innerHTML = formatMessage(content);
+    } else {
+      textSpan.textContent = content;
+    }
+  }
+
+  function clearStreamRenderTimer() {
+    if (streamRenderTimer) {
+      clearInterval(streamRenderTimer);
+      streamRenderTimer = null;
+    }
+    streamRenderPending = null;
+  }
+
+  function finalizeStreamingMessage(finalContent) {
+    clearStreamRenderTimer();
+
+    const div = streamingDiv;
+    const content = finalContent || streamContent;
+
+    if (div) {
+      div.classList.remove('streaming');
+      div.dataset.originalText = content;
+
+      const textSpan = div.querySelector('.message-text');
+      if (textSpan && content) {
+        if (formatMessage) {
+          textSpan.innerHTML = formatMessage(content);
+        }
+        if (UplinkMarkdown?.highlightCode) {
+          UplinkMarkdown.highlightCode(textSpan);
+        }
+      }
+
+      if (container && (getIsNearBottom ? getIsNearBottom() : true)) {
+        container.scrollTop = container.scrollHeight;
+      }
+    }
+
+    streamingDiv = null;
+    streamContent = '';
+    isStreaming = false;
+
+    // Track finalization time for sync dedup (split-chat checks this)
+    instance._lastFinalizedAt = Date.now();
+
+    if (onStreamEnd) {
+      onStreamEnd();
+    }
+
+    return { div, content };
+  }
+
+  // ============================================
+  // SSE STREAM PROCESSING
+  // ============================================
+
+  function processChunk(parsed, callbacks = {}) {
+    if (parsed.status === 'thinking') {
+      if (!streamingDiv) {
+        createStreamingMessage();
+      }
+      updateStreamingContent('🧠 Thinking...');
+      if (callbacks.onThinking) callbacks.onThinking(parsed);
+      return;
+    }
+
+    if (parsed.tool) {
+      if (!streamingDiv) {
+        createStreamingMessage();
+      }
+      updateStreamingContent(`🔧 Using ${parsed.tool}...`);
+      if (callbacks.onTool) callbacks.onTool(parsed.tool);
+      return;
+    }
+
+    if (parsed.content) {
+      if (!streamingDiv) {
+        createStreamingMessage();
+      }
+      streamContent += parsed.content;
+      updateStreamingContent(streamContent);
+    }
+
+    if (parsed.done) {
+      const result = finalizeStreamingMessage();
+      if (callbacks.onDone) {
+        callbacks.onDone({
+          div: result.div,
+          fullResponse: result.content,
+          parsed
+        });
+      }
+    }
+
+    if (parsed.error) {
+      if (callbacks.onError) callbacks.onError(parsed.error || parsed.message || 'An error occurred');
+    }
+  }
+
+  async function processSSEStream(reader, callbacks = {}) {
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+
+        const data = line.slice(6);
+        if (data === '[DONE]' || data.startsWith(':')) continue;
+
+        try {
+          const parsed = JSON.parse(data);
+          processChunk(parsed, callbacks);
+          await new Promise(r => setTimeout(r, 0));
+        } catch {
+          // Skip unparseable chunks
+        }
+      }
+    }
+
+    return {
+      fullResponse: streamContent,
+      streamingDiv
+    };
+  }
+
+  // ============================================
+  // MESSAGE DEDUP
+  // ============================================
+
+  function isDuplicate(messageId) {
+    if (!messageId) return false;
+    if (seenMessageIds.has(messageId)) return true;
+
+    seenMessageIds.add(messageId);
+    if (seenMessageIds.size > MAX_SEEN_IDS) {
+      const first = seenMessageIds.values().next().value;
+      seenMessageIds.delete(first);
+    }
+    return false;
+  }
+
+  function markSeen(messageId) {
+    if (!messageId) return;
+    seenMessageIds.add(messageId);
+    if (seenMessageIds.size > MAX_SEEN_IDS) {
+      const first = seenMessageIds.values().next().value;
+      seenMessageIds.delete(first);
+    }
+  }
+
+  // ============================================
+  // STATE ACCESSORS
+  // ============================================
+
+  function reset() {
+    clearStreamRenderTimer();
+    if (streamingDiv) {
+      finalizeStreamingMessage();
+    }
+    streamingDiv = null;
+    streamContent = '';
+    isStreaming = false;
+    isProcessingRequest = false;
+  }
+
+  // ============================================
+  // INSTANCE API
+  // ============================================
+
+  const instance = {
+    _lastFinalizedAt: 0,
+    createStreamingMessage,
+    updateStreamingContent,
+    finalizeStreamingMessage,
+    processChunk,
+    processSSEStream,
+    isDuplicate,
+    markSeen,
+    getIsStreaming: () => isStreaming,
+    getStreamingDiv: () => streamingDiv,
+    getStreamContent: () => streamContent,
+    setStreamContent: (c) => { streamContent = c; },
+    getIsProcessingRequest: () => isProcessingRequest,
+    setIsProcessingRequest: (v) => { isProcessingRequest = v; },
+    reset,
+    clearStreamRenderTimer
+  };
+
+  return instance;
+}
+
+// ============================================
+// PUBLIC API
+// ============================================
+
+export const UplinkStreamingHandler = {
+  create: createStreamingHandler
+};
+
+// Backward compat: assign to window
+window.UplinkStreamingHandler = UplinkStreamingHandler;
+
+if (typeof logger !== 'undefined') {
+  logger.debug('StreamingHandler: Module loaded');
+}

package/public/js/stt-settings.js

@@ -0,0 +1,316 @@
+// ============================================
+// STT SETTINGS MODULE
+// Speech-to-Text configuration
+// ============================================
+
+// DOM elements
+let sttProviderSelect, sttProviderDesc;
+let groqKeyInput, groqKeySaveBtn, groqKeyStatus;
+let groqSttModelSelect, openaiSttModelSelect;
+let fasterWhisperUrlInput, fasterWhisperSaveBtn, fasterWhisperStatus;
+let sttTestBtn, sttTestStatus, sttTestRow;
+
+function init() {
+  sttProviderSelect = document.getElementById('sttProviderSelect');
+  sttProviderDesc = document.getElementById('sttProviderDesc');
+  groqKeyInput = document.getElementById('groqKeyInput');
+  groqKeySaveBtn = document.getElementById('groqKeySaveBtn');
+  groqKeyStatus = document.getElementById('groqKeyStatus');
+  groqSttModelSelect = document.getElementById('groqSttModelSelect');
+  openaiSttModelSelect = document.getElementById('openaiSttModelSelect');
+  fasterWhisperUrlInput = document.getElementById('fasterWhisperUrlInput');
+  fasterWhisperSaveBtn = document.getElementById('fasterWhisperSaveBtn');
+  fasterWhisperStatus = document.getElementById('fasterWhisperStatus');
+  sttTestBtn = document.getElementById('sttTestBtn');
+  sttTestStatus = document.getElementById('sttTestStatus');
+  sttTestRow = document.getElementById('sttTestRow');
+
+  setupEvents();
+}
+
+function setupEvents() {
+  // STT Provider change
+  sttProviderSelect?.addEventListener('change', async () => {
+    const newProvider = sttProviderSelect.value;
+
+    try {
+      const response = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sttProvider: newProvider })
+      });
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+      // Update description
+      if (sttProviderDesc) {
+        const sttDescriptions = {
+          'none': 'Speech recognition disabled',
+          'openai': 'OpenAI Whisper (cloud, uses OpenAI API key)',
+          'groq': 'Groq Whisper (cloud, free tier available)',
+          'faster-whisper': 'Faster-Whisper (local server)'
+        };
+        sttProviderDesc.textContent = sttDescriptions[newProvider] || 'Speech recognition service';
+      }
+
+      updateSTTProviderUI(newProvider);
+      showToast('STT provider updated', 'success');
+    } catch (error) {
+      console.error('Failed to update STT provider:', error);
+      showToast('Failed to update STT provider', 'error');
+      fetchServerConfig(); // Revert on error
+    }
+  });
+
+  // Groq API key save
+  groqKeySaveBtn?.addEventListener('click', saveGroqKey);
+  groqKeyInput?.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') saveGroqKey();
+  });
+
+  // Groq STT model change
+  groqSttModelSelect?.addEventListener('change', async () => {
+    try {
+      const response = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ groqSttModel: groqSttModelSelect.value })
+      });
+      if (response.ok) {
+        showToast('Groq STT model updated', 'success');
+      } else {
+        showToast('Failed to save model', 'error');
+      }
+    } catch (e) {
+      showToast('Failed to save Groq model', 'error');
+    }
+  });
+
+  // OpenAI STT model change
+  openaiSttModelSelect?.addEventListener('change', async () => {
+    try {
+      const response = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ openaiSttModel: openaiSttModelSelect.value })
+      });
+      if (response.ok) {
+        showToast('OpenAI STT model updated', 'success');
+      } else {
+        showToast('Failed to save model', 'error');
+      }
+    } catch (e) {
+      showToast('Failed to save OpenAI STT model', 'error');
+    }
+  });
+
+  // Faster-Whisper URL save
+  fasterWhisperSaveBtn?.addEventListener('click', saveFasterWhisperUrl);
+  fasterWhisperUrlInput?.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') saveFasterWhisperUrl();
+  });
+
+  // STT test
+  sttTestBtn?.addEventListener('click', testSTT);
+}
+
+/**
+ * Show config panel for the active STT provider, hide all others
+ */
+function updateSTTProviderUI(provider) {
+  // Hide all stt-provider-config divs
+  document.querySelectorAll('.stt-provider-config').forEach(el => el.style.display = 'none');
+
+  // Show selected provider's config
+  const configEl = document.getElementById(`sttConfig-${provider}`);
+  if (configEl) configEl.style.display = 'block';
+
+  // Show/hide test row
+  if (sttTestRow) sttTestRow.style.display = provider !== 'none' ? 'flex' : 'none';
+}
+
+async function saveGroqKey() {
+  const apiKey = groqKeyInput?.value.trim();
+
+  if (!apiKey) {
+    if (groqKeyStatus) {
+      groqKeyStatus.textContent = 'Please enter an API key';
+      groqKeyStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+    return;
+  }
+
+  if (groqKeyStatus) {
+    groqKeyStatus.textContent = 'Saving...';
+    groqKeyStatus.style.color = 'var(--text-muted)';
+  }
+
+  try {
+    const response = await fetch('/api/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ groqApiKey: apiKey })
+    });
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    if (groqKeyStatus) {
+      groqKeyStatus.textContent = '✓ API key saved';
+      groqKeyStatus.style.color = 'var(--success-color, #4ade80)';
+    }
+    if (groqKeyInput) {
+      groqKeyInput.value = '';
+      groqKeyInput.placeholder = '••••••••••••••••';
+    }
+    showToast('Groq API key saved', 'success');
+  } catch (error) {
+    console.error('Failed to save Groq key:', error);
+    if (groqKeyStatus) {
+      groqKeyStatus.textContent = 'Failed to save key';
+      groqKeyStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+    showToast('Failed to save API key', 'error');
+  }
+}
+
+async function saveFasterWhisperUrl() {
+  const url = fasterWhisperUrlInput?.value.trim();
+
+  try {
+    const response = await fetch('/api/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ fasterWhisperUrl: url || '' })
+    });
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    showToast(url ? 'Faster-Whisper URL saved' : 'Faster-Whisper URL cleared', 'success');
+  } catch (error) {
+    console.error('Failed to save Faster-Whisper URL:', error);
+    showToast('Failed to save URL', 'error');
+  }
+}
+
+async function testSTT() {
+  if (sttTestBtn) sttTestBtn.disabled = true;
+  if (sttTestStatus) {
+    sttTestStatus.textContent = 'Testing...';
+    sttTestStatus.style.color = 'var(--text-muted)';
+  }
+
+  try {
+    const response = await fetch('/api/stt/test', { method: 'POST' });
+    const data = await response.json();
+
+    if (data.success) {
+      if (sttTestStatus) {
+        sttTestStatus.textContent = `✓ ${data.message || 'STT is working'}`;
+        sttTestStatus.style.color = 'var(--success-color, #4ade80)';
+      }
+      showToast('STT test passed', 'success');
+    } else {
+      if (sttTestStatus) {
+        sttTestStatus.textContent = `✗ ${data.error || 'Test failed'}`;
+        sttTestStatus.style.color = 'var(--error-color, #ef4444)';
+      }
+      showToast('STT test failed', 'error');
+    }
+  } catch (error) {
+    console.error('STT test failed:', error);
+    if (sttTestStatus) {
+      sttTestStatus.textContent = 'Failed to run test';
+      sttTestStatus.style.color = 'var(--error-color, #ef4444)';
+    }
+    showToast('STT test failed', 'error');
+  } finally {
+    if (sttTestBtn) sttTestBtn.disabled = false;
+  }
+}
+
+async function fetchServerConfig() {
+  try {
+    const response = await fetch('/api/config');
+    if (!response.ok) return;
+    
+    const config = await response.json();
+
+    // STT Provider
+    if (sttProviderSelect && config.sttProvider) {
+      sttProviderSelect.value = config.sttProvider;
+
+      // Update STT description
+      if (sttProviderDesc) {
+        const sttDescriptions = {
+          'none': 'Speech recognition disabled',
+          'openai': 'OpenAI Whisper (cloud, uses OpenAI API key)',
+          'groq': 'Groq Whisper (cloud, free tier available)',
+          'faster-whisper': 'Faster-Whisper (local server)'
+        };
+        sttProviderDesc.textContent = sttDescriptions[config.sttProvider] || 'Speech recognition service';
+      }
+
+      // Show config for active STT provider
+      updateSTTProviderUI(config.sttProvider);
+    }
+
+    // Populate STT fields
+    if (openaiSttModelSelect && config.openaiSttModel) {
+      openaiSttModelSelect.value = config.openaiSttModel;
+    }
+    if (groqSttModelSelect && config.groqSttModel) {
+      groqSttModelSelect.value = config.groqSttModel;
+    }
+    if (fasterWhisperUrlInput && config.fasterWhisperUrl) {
+      fasterWhisperUrlInput.value = config.fasterWhisperUrl;
+    }
+
+    // Update OpenAI STT key status
+    const openaiSttKeyDesc = document.getElementById('openaiSttKeyDesc');
+    if (openaiSttKeyDesc) {
+      if (config.hasOpenaiKey) {
+        openaiSttKeyDesc.textContent = '✓ Using OpenAI key from TTS settings';
+        openaiSttKeyDesc.style.color = 'var(--success-color, #4ade80)';
+      } else {
+        openaiSttKeyDesc.textContent = 'No OpenAI key configured — add one in TTS settings';
+        openaiSttKeyDesc.style.color = 'var(--error-color, #ef4444)';
+      }
+    }
+
+    // Update Groq key status
+    if (groqKeyStatus && config.hasGroqKey) {
+      groqKeyStatus.textContent = '✓ API key configured';
+      groqKeyStatus.style.color = 'var(--success-color, #4ade80)';
+      if (groqKeyInput) groqKeyInput.placeholder = '••••••••••••••••';
+    }
+
+    // Update Faster-Whisper detection status
+    if (fasterWhisperStatus && config.fasterWhisperDetected) {
+      fasterWhisperStatus.textContent = '✓ Server detected at localhost:8000';
+      fasterWhisperStatus.style.color = 'var(--success-color, #4ade80)';
+    }
+  } catch (error) {
+    console.warn('STT Settings: Failed to fetch server config', error);
+  }
+}
+
+function showToast(message, type = 'success') {
+  if (window.UplinkSettings?.showToast) {
+    window.UplinkSettings.showToast(message, type);
+  }
+}
+
+function applyState() {
+  fetchServerConfig();
+}
+
+// Expose API
+export const UplinkSTTSettings = {
+  init,
+  applyState,
+  fetchServerConfig,
+  updateSTTProviderUI
+};
+
+// Backward compat: assign to window
+window.UplinkSTTSettings = UplinkSTTSettings;