Update app.py

app.py

@@ -113,44 +113,50 @@ if user_input:
     messages_response = client.beta.threads.messages.list(thread_id=thread_id)
     latest_response = sorted(messages_response.data, key=lambda x: x.created_at)[-1]
     assistant_message = latest_response.content[0].text.value
-save_message("assistant", assistant_message)
-
-# 👇 Voice controls (after displaying the message)
-st.components.v1.html(f"""
-<div id="voice-controls" style="margin: 10px 0;">
-    <button id="speak-btn" style="margin-right:10px;">🔊 Speak</button>
-    <button id="mute-btn">🔇 Mute</button>
-</div>
-<script>
-var utterance;
-var isSpeaking = false;
-var synth = window.speechSynthesis;
-var text = `{assistant_message.replace("`", "\\`")}`;
-var voices = [];
-function getFemaleVoice() {{
-    voices = synth.getVoices();
-    let female = voices.find(v => v.name.includes("Female") || (v.name.includes("en") && v.gender !== "male"));
-    return female || voices.find(v => v.lang.startsWith('en') && v.name.toLowerCase().includes('female')) || voices[0];
-}}
-
-document.getElementById('speak-btn').onclick = function() {{
-    if (isSpeaking) return;
-    utterance = new SpeechSynthesisUtterance(text);
-    utterance.voice = getFemaleVoice();
-    utterance.rate = 1;
-    utterance.pitch = 1.1;
-    synth.speak(utterance);
-    isSpeaking = true;
-    utterance.onend = function() {{ isSpeaking = false; }};
-}};
-
-document.getElementById('mute-btn').onclick = function() {{
-    synth.cancel();
-    isSpeaking = false;
-}};
-</script>
-""", height=60)
-
-time.sleep(0.5)
-st.rerun()
+    save_message("assistant", assistant_message)
 
+    # Prepare the message for JavaScript safely
+    safe_message = assistant_message.replace("\\", "\\\\").replace("`", "\\`").replace("\n", "\\n").replace("'", "\\'")
+
+    # 👇 Voice controls (auto-speak enabled)
+    st.components.v1.html(f"""
+    <div id="voice-controls" style="margin: 10px 0;">
+        <button id="speak-btn" style="margin-right:10px;">🔊 Speak</button>
+        <button id="mute-btn">🔇 Mute</button>
+    </div>
+    <script>
+    var utterance;
+    var isSpeaking = false;
+    var synth = window.speechSynthesis;
+    var text = `{safe_message}`;
+    var voices = [];
+    function getFemaleVoice() {{
+        voices = synth.getVoices();
+        let female = voices.find(v => (v.name && v.name.toLowerCase().includes("female")) || (v.lang && v.lang.startsWith("en") && v.gender !== "male"));
+        // Fallback: any en female, then any en, then first
+        return female || voices.find(v => v.lang && v.lang.startsWith('en') && v.name && v.name.toLowerCase().includes('female')) || voices.find(v => v.lang && v.lang.startsWith('en')) || voices[0];
+    }}
+    function speakText() {{
+        if (isSpeaking) return;
+        utterance = new SpeechSynthesisUtterance(text);
+        utterance.voice = getFemaleVoice();
+        utterance.rate = 1;
+        utterance.pitch = 1.1;
+        synth.speak(utterance);
+        isSpeaking = true;
+        utterance.onend = function() {{ isSpeaking = false; }};
+    }}
+    document.getElementById('speak-btn').onclick = function() {{
+        speakText();
+    }};
+    document.getElementById('mute-btn').onclick = function() {{
+        synth.cancel();
+        isSpeaking = false;
+    }};
+    // Auto-speak on load
+    setTimeout(speakText, 500);
+    </script>
+    """, height=80)
+
+    time.sleep(0.5)
+    st.rerun()