Create app.js

app.js

@@ -0,0 +1,121 @@
+const CHAT_URL = "/api/chat";
+const MODEL = "llama3:latest";
+
+const BASE_SYSTEM = "You are helpful.";
+
+const chatEl = document.getElementById("chat");
+const formEl = document.getElementById("form");
+const promptEl = document.getElementById("prompt");
+const searchBtn = document.getElementById("searchBtn");
+const sendBtn = document.getElementById("sendBtn");
+
+const statusDot = document.getElementById("statusDot");
+const statusText = document.getElementById("statusText");
+const heroEl = document.getElementById("hero");
+
+let searchMode = false;
+
+function addMessage(role, text, { highlight = false } = {}) {
+  const msg = document.createElement("div");
+  msg.className = `msg ${role}${highlight ? " highlight" : ""}`;
+
+  const bubble = document.createElement("div");
+  bubble.className = "bubble";
+  bubble.textContent = text;
+
+  msg.appendChild(bubble);
+  chatEl.appendChild(msg);
+  chatEl.scrollTop = chatEl.scrollHeight;
+
+  if (heroEl) heroEl.style.display = "none";
+  return msg;
+}
+
+function setConnected(ok) {
+  statusDot.classList.toggle("on", ok);
+  statusText.textContent = ok ? "Connected" : "Disconnected";
+}
+
+async function pingProxy() {
+  try {
+    const r = await fetch("/health");
+    setConnected(r.ok);
+  } catch {
+    setConnected(false);
+  }
+}
+
+function autosizeTextarea(el) {
+  el.style.height = "auto";
+  el.style.height = Math.min(el.scrollHeight, 180) + "px";
+}
+
+promptEl.addEventListener("input", () => autosizeTextarea(promptEl));
+
+promptEl.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    formEl.requestSubmit();
+  }
+});
+
+searchBtn.addEventListener("click", () => {
+  searchMode = !searchMode;
+  searchBtn.setAttribute("aria-pressed", String(searchMode));
+});
+
+formEl.addEventListener("submit", async (e) => {
+  e.preventDefault();
+
+  const userText = promptEl.value.trim();
+  if (!userText) return;
+
+  addMessage("user", userText);
+
+  promptEl.value = "";
+  autosizeTextarea(promptEl);
+
+  sendBtn.disabled = true;
+  const placeholder = addMessage("ai", "Thinking…");
+
+  try {
+    const body = {
+      model: MODEL,
+      messages: [
+        { role: "system", content: BASE_SYSTEM },
+        { role: "user", content: userText }
+      ],
+      stream: false
+    };
+
+    const resp = await fetch(CHAT_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+
+    if (!resp.ok) {
+      const err = await resp.text();
+      placeholder.querySelector(".bubble").textContent = `Error (${resp.status}): ${err}`;
+      placeholder.classList.add("highlight");
+      return;
+    }
+
+    const data = await resp.json();
+    const answer = data?.message?.content ?? "(No content)";
+    placeholder.querySelector(".bubble").textContent = answer;
+
+    placeholder.classList.add("highlight");
+    setTimeout(() => placeholder.classList.remove("highlight"), 1200);
+  } catch (err) {
+    placeholder.querySelector(".bubble").textContent = `Request failed: ${err?.message ?? String(err)}`;
+    placeholder.classList.add("highlight");
+  } finally {
+    sendBtn.disabled = false;
+    promptEl.focus();
+    await pingProxy();
+  }
+});
+
+pingProxy();
+setInterval(pingProxy, 5000);