fix: pause retains position, Ask pauses play, auto-start mic, hide Q&A during play

- Play hides Q&A panel/resume btn when playing
- Ask button cancels play_event and auto-starts microphone via JS
- stop_recording auto-submits question
- Error yield uses current para_idx (not 0)
- Fix para_idx computed before error check to avoid NameError

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app.py

@@ -529,8 +529,9 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                     with gr.Group(visible=False) as qa_input_group:
                         question_audio = gr.Audio(
                             sources=["microphone"], type="filepath",
-                            label="🎤 Ask your question (recording auto-submits when you stop)",
+                            label="🎤 Ask your question (auto-submits when you stop)",
                             show_label=True, streaming=False,
+                            elem_id="qa_audio_input",
                         )
                         question_text = gr.Textbox(
                             placeholder="Or type your question here...",
@@ -852,7 +853,8 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                    "<div style='text-align:center;font-size:10px;color:#64748b;font-family:monospace;margin-top:8px;'>No content loaded</div>",
                    gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
                    gr.Slider(value=0), render_story_text(paras, 0) if paras else "",
-                   gr.HTML(visible=False))
+                   gr.HTML(visible=False),
+                   gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
             return
 
         n = len(tts_chunks)
@@ -860,15 +862,18 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>Generating chunk 1 / {n}…</div>",
                gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=False),
                gr.Slider(value=0), render_story_text(paras, 0) if paras else "",
-               gr.HTML(visible=False))
+               gr.HTML(visible=False),
+               gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
 
         for sample_rate, wav, i, total, err in generate_audio_stream(tts_chunks, voice_profile_id=profile_id):
+            # Map chunk index to paragraph index
+            para_idx = min(int(i * n_paras / total), n_paras - 1) if total > 0 else 0
             if err:
                 yield (gr.update(), f"<div style='color:#ef4444;font-size:11px;'>Error on chunk {i+1}: {err}</div>", "",
                        gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
-                       gr.Slider(value=0), gr.update(), gr.HTML(visible=False))
+                       gr.Slider(value=para_idx), gr.update(), gr.HTML(visible=False),
+                       gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
                 return
-            # Map chunk index to paragraph index (approximate: chunks ≈ sentences, paragraphs ≈ groups)
             para_idx = min(int(i * n_paras / total), n_paras - 1) if total > 0 else 0
             next_label = f"chunk {i+2} / {total}" if i + 1 < total else "last chunk"
             chunk_html = f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>▶ Playing chunk {i+1} / {total} — generating {next_label}</div>"
@@ -876,19 +881,22 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
             yield ((sample_rate, wav), _status_playing, chunk_html,
                    gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=True),
                    gr.Slider(value=para_idx), render_story_text(paras, para_idx),
-                   gr.HTML(visible=is_last))
+                   gr.HTML(visible=is_last),
+                   gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
 
         done_html = f"<div style='text-align:center;font-size:10px;color:#94a3b8;font-family:monospace;margin-top:8px;'>✅ {n} chunks complete</div>"
         yield (gr.update(), _status_done, done_html,
                gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
                gr.Slider(value=max(n_paras - 1, 0)), render_story_text(paras, max(n_paras - 1, 0)),
-               gr.HTML(visible=True))
+               gr.HTML(visible=True),
+               gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
 
     play_event = play_btn.click(
         stream_tts,
         inputs=[tts_chunks_state, paragraphs_state, voice_profile_state],
         outputs=[player_audio_control, player_status_bar, chunk_status, play_btn, pause_btn, ask_btn,
-                 timeline_slider, story_text_display, story_finished_panel]
+                 timeline_slider, story_text_display, story_finished_panel,
+                 qa_panel, qa_input_group, resume_btn]
     )
 
     # 6. Pause button — PAUSED state
@@ -948,7 +956,23 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
         enter_asking_state,
         inputs=[],
         outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio],
-        cancels=[play_event]
+        cancels=[play_event],
+        js="""() => {
+            // Auto-start microphone recording after a brief delay for UI to render
+            setTimeout(() => {
+                const recordBtn = document.querySelector('#qa_audio_input button[aria-label="Record"], #qa_audio_input button.record-button, .qa-audio-group button[aria-label="Record"]');
+                if (recordBtn) { recordBtn.click(); }
+                else {
+                    // Fallback: find any record button inside the audio component
+                    const btns = document.querySelectorAll('button');
+                    for (const b of btns) {
+                        if (b.getAttribute('aria-label') === 'Record' || b.textContent.includes('Record')) {
+                            b.click(); break;
+                        }
+                    }
+                }
+            }, 500);
+        }"""
     )
 
     # 9. Submit question
@@ -1032,18 +1056,10 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
         outputs=[answer_display, answer_audio]
     )
 
-    # Auto-submit when voice recording completes
-    # Use .change() instead of .stop_recording() — .change() fires after audio value is committed
-    def auto_submit_on_recording(audio_path, question_txt, paragraphs, slider_val, profile_id):
-        """Auto-submit only when a new recording is available (not on clear)."""
-        if not audio_path:
-            # Audio was cleared, don't submit
-            return gr.update(), gr.update()
-        return handle_question_submit(question_txt, audio_path, paragraphs, slider_val, profile_id)
-
-    question_audio.change(
-        auto_submit_on_recording,
-        inputs=[question_audio, question_text, paragraphs_state, timeline_slider, voice_profile_state],
+    # Auto-submit when voice recording stops
+    question_audio.stop_recording(
+        handle_question_submit,
+        inputs=[question_text, question_audio, paragraphs_state, timeline_slider, voice_profile_state],
         outputs=[answer_display, answer_audio]
     )