https://worldshs.com/html-files/assets/js/chatbox.js

1/* =========================
2   BIBLEBOT CHATBOX — CLEAN
3   ========================= */
4
5document.addEventListener("DOMContentLoaded", () => {
6  const sendBtn = document.getElementById("chatbox-send");
7  const input = document.getElementById("chatbox-text");
8  const messages = document.getElementById("chatbox-messages");
9
10  if (!sendBtn || !input || !messages) {
11    console.warn("Chatbox elements missing");
12    return;
13  }
14
15  function addMessage(text, type) {
16    const msg = document.createElement("div");
17    msg.className = `chat-msg ${type}`;
18
19    const bubble = document.createElement("span");
20    bubble.textContent = text;
21
22    msg.appendChild(bubble);
23    messages.appendChild(msg);
24    messages.scrollTop = messages.scrollHeight;
25  }
26
27  async function sendMessage() {
28    const text = input.value.trim();
29    if (!text) return;
30
31    addMessage(text, "user");
32    input.value = "";
33
34    addMessage("Typing…", "bot");
35    const typingBubble = messages.lastChild;
36
37    try {
38      const res = await fetch("/html-files/api/chat.php", {
39        method: "POST",
40        headers: { "Content-Type": "application/json" },
41        body: JSON.stringify({ message: text })
42      });
43
44      const data = await res.json();
45
46      typingBubble.remove();
47      addMessage(data.reply || "No reply.", "bot");
48
49    } catch (err) {
50      typingBubble.remove();
51      addMessage("Connection error.", "bot");
52      console.error(err);
53    }
54  }
55
56  sendBtn.addEventListener("click", sendMessage);
57
58  input.addEventListener("keypress", e => {
59    if (e.key === "Enter") sendMessage();
60  });
61});