diff --git a/src/ui.js b/src/ui.js index 8a6d79f..6ddd025 100644 --- a/src/ui.js +++ b/src/ui.js @@ -1379,6 +1379,112 @@ Keep it conversational, helpful, and specific to this page context. Use a friend introMsg.innerHTML = marked.parse(response); } + // Add TTS and delete buttons to intro message + const messageActions = document.createElement("div"); + messageActions.style.cssText = ` + margin-top: 8px; + display: flex; + gap: 8px; + opacity: 0.7; + `; + + const ttsBtn = document.createElement("button"); + ttsBtn.textContent = "πŸ”Š"; + ttsBtn.title = "Read aloud"; + ttsBtn.style.cssText = ` + background: none; + border: 1px solid #dee2e6; + border-radius: 4px; + padding: 4px 8px; + cursor: pointer; + font-size: 12px; + transition: all 0.2s; + `; + + // Store audio for pause/resume functionality + let introAudio = null; + + ttsBtn.onclick = async () => { + const modalVoiceSelect = document.getElementById('hermes-voice-select'); + const selectedVoice = modalVoiceSelect?.value || 'alloy'; + + // If audio is already playing, pause it + if (introAudio && !introAudio.paused) { + introAudio.pause(); + ttsBtn.textContent = "πŸ”Š"; + console.log("πŸ”Š INTRO TTS: Paused"); + return; + } + + // If audio exists and is paused, resume it + if (introAudio && introAudio.paused && introAudio.currentTime > 0) { + introAudio.play(); + ttsBtn.textContent = "⏸️"; + console.log("πŸ”Š INTRO TTS: Resumed"); + return; + } + + // Generate new audio + console.log("πŸ”Š INTRO TTS: Generating new audio"); + const originalText = ttsBtn.textContent; + ttsBtn.textContent = "⏳"; + ttsBtn.disabled = true; + + try { + const result = await speakChatText(response, selectedVoice, 1.0); + introAudio = result.audio; + + // Set up audio event handlers + introAudio.onplay = () => { + ttsBtn.textContent = "⏸️"; + }; + + introAudio.onpause = () => { + ttsBtn.textContent = "πŸ”Š"; + }; + + introAudio.onended = () => { + ttsBtn.textContent = "πŸ”Š"; + introAudio = null; + }; + + // Auto-play the generated audio + try { + await introAudio.play(); + console.log("πŸ”Š INTRO TTS: Playing new audio"); + } catch (playError) { + console.log("πŸ”Š INTRO TTS: Auto-play blocked:", playError.message); + ttsBtn.textContent = "πŸ”Š"; + } + } catch (error) { + console.error("πŸ”Š INTRO TTS: Failed with error:", error); + alert("Intro TTS failed: " + error.message); + ttsBtn.textContent = originalText; + } finally { + ttsBtn.disabled = false; + } + }; + + const deleteBtn = document.createElement("button"); + deleteBtn.textContent = "πŸ—‘οΈ"; + deleteBtn.title = "Delete message"; + deleteBtn.style.cssText = ` + background: none; + border: 1px solid #dee2e6; + border-radius: 4px; + padding: 4px 8px; + cursor: pointer; + font-size: 12px; + transition: all 0.2s; + `; + deleteBtn.onclick = () => { + introMsg.remove(); + }; + + messageActions.appendChild(ttsBtn); + messageActions.appendChild(deleteBtn); + introMsg.appendChild(messageActions); + // Save this intro as part of the conversation saveConversationHistory(chatHistory);