Update script.js

script.js

@@ -1,66 +1,69 @@
-const form = document.querySelector("form");
-const input = document.querySelector("input");
-const chatbox = document.getElementById("chatbox");
-const avatar = document.getElementById("avatar");
+const form = document.getElementById('chat-form');
+const input = form.querySelector('input');
+const chatbox = document.getElementById('chatbox');
+const avatar = document.getElementById('avatar');
+const overlay = document.getElementById('overlay');
 
-function appendBubble(text, sender) {
-    const bubble = document.createElement("div");
-    bubble.classList.add("bubble", sender);
-    bubble.textContent = text;
-    chatbox.appendChild(bubble);
-    chatbox.scrollTop = chatbox.scrollHeight;
+function addBubble(text, sender = 'user') {
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble ' + sender;
+  bubble.innerText = text;
+  chatbox.appendChild(bubble);
+  chatbox.scrollTop = chatbox.scrollHeight;
 }
 
-function streamText(element, text) {
-    element.textContent = "";
-    let i = 0;
-    const interval = setInterval(() => {
-        element.textContent += text[i];
-        i++;
-        if (i >= text.length) clearInterval(interval);
-        chatbox.scrollTop = chatbox.scrollHeight;
-    }, 25);
+function streamText(text, onDone) {
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble ai';
+  chatbox.appendChild(bubble);
+  chatbox.scrollTop = chatbox.scrollHeight;
+
+  let i = 0;
+  function stream() {
+    if (i < text.length) {
+      bubble.innerText += text[i++];
+      chatbox.scrollTop = chatbox.scrollHeight;
+      setTimeout(stream, 20);
+    } else {
+      onDone && onDone();
+    }
+  }
+  stream();
 }
 
-form.addEventListener("submit", async (e) => {
-    e.preventDefault();
-    const message = input.value.trim();
-    if (!message) return;
+function playAudio(url) {
+  avatar.classList.add('speaking');
+  const audio = new Audio(url);
+  audio.play();
 
-    // User message
-    appendBubble(message, "user");
-    input.value = "";
+  audio.onended = () => {
+    avatar.classList.remove('speaking');
+    fetch(`/delete_audio?path=${encodeURIComponent(url)}`);
+  };
+}
 
-    // Placeholder AI message
-    const aiBubble = document.createElement("div");
-    aiBubble.classList.add("bubble", "ai");
-    aiBubble.textContent = "⏳ SHODAN is thinking...";
-    chatbox.appendChild(aiBubble);
-    chatbox.scrollTop = chatbox.scrollHeight;
+form.onsubmit = async (e) => {
+  e.preventDefault();
+  const msg = input.value.trim();
+  if (!msg) return;
 
-    // Send to backend
-    try {
-        const res = await fetch("/api/chat", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ message })
-        });
+  addBubble(msg, 'user');
+  input.value = '';
 
-        const data = await res.json();
+  try {
+    const response = await fetch('/ask', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: msg })
+    });
+    const { text, audio_url } = await response.json();
 
-        if (data.reply) {
-            streamText(aiBubble, data.reply);
+    streamText(text, () => {
+      if (audio_url) playAudio(audio_url);
+    });
+  } catch (err) {
+    streamText("❌ SHODAN encountered an error.", null);
+    console.error(err);
+  }
+};
 
-            // Audio playback if available
-            if (data.audio) {
-                const audio = new Audio(data.audio);
-                audio.play();
-            }
-        } else {
-            aiBubble.textContent = "⚠️ SHODAN is silent. Something went wrong.";
-        }
-    } catch (err) {
-        aiBubble.textContent = "❌ ERROR contacting SHODAN backend.";
-        console.error(err);
-    }
-});