fix: Read Page pause functionality and add download button

src/ui.js

@@ -1094,6 +1094,7 @@ async function openUncloseaiEmbeddedModalNew() {
 
 	let readPageAudio = null;
 	let isReadingPage = false;
+	let readPageContainer = null;
 
 	const controlActions = [
 		{ text: "📖 Read Page", action: async (button) => {
@@ -1113,18 +1114,107 @@ async function openUncloseaiEmbeddedModalNew() {
 				return;
 			}
 			
+			// Prevent multiple simultaneous requests
+			if (isReadingPage) return;
+			
 			// Start new reading
 			button.textContent = "⏳ Processing...";
 			button.disabled = true;
+			isReadingPage = true;
 			
 			try {
-				await window.readPageWithHermes();
-				// Note: The actual audio handling would need to be integrated with readPageWithHermes
-				button.textContent = "⏸️ Pause";
-				isReadingPage = true;
+				// Get page content
+				const { extractWebpageContent } = await import('./content.js');
+				const pageContent = extractWebpageContent();
+				
+				// Generate TTS
+				const { speakText } = await import('./tts.js');
+				const result = await speakText(pageContent, 'alloy', 1.0);
+				readPageAudio = result.audio;
+				
+				// Set up audio event handlers
+				readPageAudio.onplay = () => {
+					button.textContent = "⏸️ Pause";
+					isReadingPage = true;
+				};
+				
+				readPageAudio.onpause = () => {
+					button.textContent = "▶️ Resume";
+				};
+				
+				readPageAudio.onended = () => {
+					button.textContent = "📖 Read Page";
+					isReadingPage = false;
+					readPageAudio = null;
+					// Remove download button container if it exists
+					if (readPageContainer) {
+						readPageContainer.remove();
+						readPageContainer = null;
+					}
+				};
+				
+				// Create download button next to the read button
+				if (!readPageContainer) {
+					readPageContainer = document.createElement('div');
+					readPageContainer.style.cssText = `
+						display: inline-flex;
+						gap: 8px;
+						align-items: center;
+					`;
+					
+					// Move the read button into the container
+					const parent = button.parentElement;
+					parent.insertBefore(readPageContainer, button);
+					readPageContainer.appendChild(button);
+					
+					// Add download button
+					const downloadBtn = document.createElement('button');
+					downloadBtn.textContent = '💾';
+					downloadBtn.title = 'Download audio';
+					downloadBtn.style.cssText = `
+						padding: 8px 16px;
+						background: #f8f9fa;
+						border: 1px solid #dee2e6;
+						border-radius: 20px;
+						cursor: pointer;
+						font-size: 14px;
+						white-space: nowrap;
+						transition: all 0.2s;
+					`;
+					downloadBtn.onmouseover = () => {
+						downloadBtn.style.background = '#e9ecef';
+						downloadBtn.style.borderColor = '#adb5bd';
+					};
+					downloadBtn.onmouseout = () => {
+						downloadBtn.style.background = '#f8f9fa';
+						downloadBtn.style.borderColor = '#dee2e6';
+					};
+					downloadBtn.onclick = () => {
+						if (readPageAudio) {
+							const url = readPageAudio.src;
+							const a = document.createElement('a');
+							a.href = url;
+							a.download = 'page-audio.mp3';
+							document.body.appendChild(a);
+							a.click();
+							document.body.removeChild(a);
+						}
+					};
+					
+					readPageContainer.appendChild(downloadBtn);
+				}
+				
+				// Auto-play the generated audio
+				try {
+					await readPageAudio.play();
+				} catch (playError) {
+					button.textContent = "📖 Read Page";
+					isReadingPage = false;
+				}
 			} catch (error) {
 				alert("Failed to read page: " + error.message);
 				button.textContent = "📖 Read Page";
+				isReadingPage = false;
 			} finally {
 				button.disabled = false;
 			}