fix(hermes): add TTS and delete buttons to contextual intro message

- Add play/pause TTS button to the generated intro message - Include delete button for consistency with other AI messages - Full pause/resume functionality for intro message TTS - Intro message now has same interaction capabilities as chat responses - Uses speakChatText for clean audio generation
2025-07-02 08:15:30 -04:00 · 2025-07-02 08:15:30 -04:00 · 3cbcd64e92
commit 3cbcd64e92
parent e8bef319da
1 changed files with 106 additions and 0 deletions
--- 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);