Update script.js

script.js

@@ -1,87 +1,66 @@
-const chatlog = document.getElementById("chatlog");
-const thinking = document.getElementById("thinking");
-const form = document.getElementById("chatForm");
-const messageInput = document.getElementById("message");
-const glitchOverlay = document.getElementById("glitchOverlay");
-const resetButton = document.getElementById("reset");
+const form = document.querySelector("form");
+const input = document.querySelector("input");
+const chatbox = document.getElementById("chatbox");
+const avatar = document.getElementById("avatar");
 
-function addMessage(speaker, text) {
-  const div = document.createElement("div");
-  div.className = speaker === "You" ? "bubble-human" : "bubble-shodan";
-  div.innerHTML = `<b>${speaker}:</b> <span class="message-text"></span>`;
-  chatlog.appendChild(div);
-  scrollToBottom();
-
-  const target = div.querySelector(".message-text");
-  streamText(text, target);
-
-  if (speaker === "SHODAN") {
-    if (shouldGlitch(text)) {
-      triggerGlitch();
-    }
-    fetch("/voice", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text })
-    })
-    .then(res => res.json())
-    .then(data => {
-      const audio = new Audio(data.audio_url);
-      audio.play();
-    });
-  }
+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 streamText(text, element) {
-  let i = 0;
-  const interval = setInterval(() => {
-    element.textContent += text[i];
-    i++;
-    if (i >= text.length) clearInterval(interval);
-  }, 20);
+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 scrollToBottom() {
-  window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
-}
+form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const message = input.value.trim();
+    if (!message) return;
 
-function shouldGlitch(text) {
-  const triggers = ["you dare", "interference", "override", "access denied"];
-  return triggers.some(keyword => text.toLowerCase().includes(keyword));
-}
+    // User message
+    appendBubble(message, "user");
+    input.value = "";
 
-function triggerGlitch() {
-  glitchOverlay.style.display = "block";
-  setTimeout(() => {
-    glitchOverlay.style.display = "none";
-  }, 800);
-}
+    // 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.addEventListener("submit", e => {
-  e.preventDefault();
-  const msg = messageInput.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 })
+        });
 
-  addMessage("You", msg);
-  thinking.style.display = "block";
-  messageInput.value = "";
+        const data = await res.json();
 
-  fetch("/chat", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ message: msg })
-  })
-  .then(res => res.json())
-  .then(data => {
-    thinking.style.display = "none";
-    addMessage("SHODAN", data.response);
-  });
-});
+        if (data.reply) {
+            streamText(aiBubble, data.reply);
 
-resetButton.addEventListener("click", () => {
-  fetch("/reset", { method: "POST" })
-    .then(res => res.json())
-    .then(data => {
-      chatlog.innerHTML = `<div class="bubble-shodan"><b>SHODAN:</b> ${data.message}</div>`;
-    });
+            // 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);
+    }
 });