Update static/script.js

static/script.js

@@ -1,3 +1,7 @@
+// static/script.js
+// Full client-side script for chat, analytics, and admin negatives panel.
+
+// Element refs
 const chatForm = document.getElementById("chat-form");
 const userInput = document.getElementById("user-input");
 const chatBox = document.getElementById("chat-box");
@@ -5,93 +9,248 @@ const orderIdEl = document.getElementById("order_id");
 const categoryEl = document.getElementById("category");
 const sentimentEl = document.getElementById("sentiment");
 const negativeBox = document.getElementById("negative-box");
+const sentimentCanvas = document.getElementById("sentimentChart");
 
 let sentimentChart = null;
 
-// 🧠 Append User Message
+// ---------- Helper: robust JSON fetch (handles non-JSON and error pages) ----------
+async function fetchJson(url, options = {}) {
+  const res = await fetch(url, {
+    credentials: "same-origin", // send cookies for session-protected endpoints
+    ...options,
+  });
+
+  // If not OK, read body text for diagnostics and throw
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    const err = new Error(`HTTP ${res.status} ${res.statusText}`);
+    err.status = res.status;
+    err.body = text;
+    throw err;
+  }
+
+  // Ensure response is JSON
+  const contentType = res.headers.get("content-type") || "";
+  if (!contentType.includes("application/json")) {
+    const text = await res.text().catch(() => "");
+    const err = new Error(`Expected JSON but got ${contentType}`);
+    err.status = res.status;
+    err.body = text;
+    throw err;
+  }
+
+  return res.json();
+}
+
+// ---------- UI helpers ----------
 function appendUser(text) {
-    chatBox.innerHTML += `<p class="user-msg">🧑 You: ${text}</p>`;
-    chatBox.scrollTop = chatBox.scrollHeight;
+  if (!chatBox) return;
+  const p = document.createElement("p");
+  p.className = "user-msg";
+  p.innerHTML = `🧑 You: ${escapeHtml(text)}`;
+  chatBox.appendChild(p);
+  chatBox.scrollTop = chatBox.scrollHeight;
 }
 
-// 🤖 Append Bot Message
 function appendBot(text) {
-    chatBox.innerHTML += `<p class="bot-msg">🤖 Bot: ${text}</p>`;
-    chatBox.scrollTop = chatBox.scrollHeight;
+  if (!chatBox) return;
+  const p = document.createElement("p");
+  p.className = "bot-msg";
+  p.innerHTML = `🤖 Bot: ${escapeHtml(text)}`;
+  chatBox.appendChild(p);
+  chatBox.scrollTop = chatBox.scrollHeight;
 }
 
-// ⭐ Send chat message
-chatForm.addEventListener("submit", async (e) => {
+// ---------- Chat submit handler ----------
+if (chatForm) {
+  chatForm.addEventListener("submit", async (e) => {
     e.preventDefault();
+    const text = (userInput && userInput.value || "").trim();
+    const order_id = (orderIdEl && orderIdEl.value) ? orderIdEl.value.trim() : "";
 
-    const text = userInput.value.trim();
-    const order_id = orderIdEl.value.trim();
     if (!text) return;
 
     appendUser(text);
-    userInput.value = "";
+    if (userInput) userInput.value = "";
 
     try {
-        const res = await fetch("/chat", {
-            method: "POST",
-            headers: { "Content-Type": "application/x-www-form-urlencoded" },
-            body: new URLSearchParams({ user_input: text, order_id })
-        });
+      // send form-encoded request (matches Flask form handlers)
+      const data = await fetchJson("/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({ user_input: text, order_id }).toString(),
+      });
 
-        const data = await res.json();
+      if (data.error) {
+        appendBot(data.message || "Sorry, could not process your message.");
+        return;
+      }
 
-        if (data.error) {
-            appendBot("Sorry, could not process your message.");
-            return;
-        }
+      appendBot(data.reply || "No reply.");
 
-        appendBot(data.reply);
+      if (categoryEl) categoryEl.textContent = data.category || "—";
+      if (sentimentEl) sentimentEl.textContent = `${data.sentiment || "—"} (${data.confidence || 0}%)`;
 
-        categoryEl.textContent = data.category || "—";
-        sentimentEl.textContent = `${data.sentiment || "—"} (${data.confidence || 0}%)`;
-
-        await updateAnalytics();
-        await updateNegatives();
+      // update analytics + negatives after successful chat
+      await updateAnalytics();
+      await updateNegatives();
     } catch (err) {
-        console.error(err);
-        appendBot("Network error — try again.");
+      console.error("Chat submit error:", err);
+      appendBot("Network or server error — try again.");
     }
-});
+  });
+}
 
-// 📊 Update Analytics Charts
+// ---------- Analytics (Chart.js) ----------
 async function updateAnalytics() {
-    const res = await fetch("/analytics");
-    const data = await res.json();
+  if (!sentimentCanvas) return;
 
-    const ctx = document.getElementById("sentimentChart");
+  try {
+    const data = await fetchJson("/analytics");
+
+    const labels = Array.isArray(data.labels) ? data.labels : (data.labels || []);
+    const values = Array.isArray(data.values) ? data.values : (data.values || []);
 
     if (sentimentChart) sentimentChart.destroy();
 
-    sentimentChart = new Chart(ctx, {
-        type: "pie",
-        data: {
-            labels: data.labels,
-            datasets: [{
-                data: data.values,
-                backgroundColor: ["#2ecc71", "#e74c3c", "#f1c40f"]
-            }]
-        }
+    sentimentChart = new Chart(sentimentCanvas, {
+      type: "pie",
+      data: {
+        labels: labels,
+        datasets: [{
+          data: values,
+          backgroundColor: ["#2ecc71", "#e74c3c", "#f1c40f"],
+        }],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+      },
     });
+  } catch (err) {
+    console.error("updateAnalytics failed:", err);
+    // silent fail; UI will show previous chart or none
+  }
 }
 
-// ⚠️ Update Negative Messages Box
-async function updateNegatives() {
-    if (!negativeBox) return; // Safety check
+// ---------- Negatives loader (robust) ----------
+async function updateNegatives(page = 1, perPage = 50) {
+  if (!negativeBox) return;
+
+  // loading UI
+  negativeBox.innerHTML = '<p class="loading">Loading recent negatives…</p>';
+
+  try {
+    const res = await fetch(`/admin/negatives-data?page=${page}&per_page=${perPage}`, {
+      credentials: "same-origin",
+      method: "GET",
+    });
+
+    // handle auth errors gracefully
+    if (res.status === 401 || res.status === 403) {
+      const text = await res.text().catch(() => "");
+      let info = null;
+      try { info = JSON.parse(text); } catch (e) { info = null; }
+
+      negativeBox.innerHTML = `
+        <div style="color:salmon">
+          <p><strong>Admin access required</strong></p>
+          <p>${escapeHtml(info && (info.message || info.error) ? (info.message || info.error) : 'Please log in as an admin to view this data.')}</p>
+          <p><a href="/login">Log in</a> and reload the page.</p>
+        </div>
+      `;
+      console.warn("Negatives access denied:", res.status, text);
+      return;
+    }
+
+    if (!res.ok) {
+      const body = await res.text().catch(() => "");
+      negativeBox.innerHTML = `<pre style="color:salmon">Failed to load negatives (status ${res.status}).\n${escapeHtml(body.slice ? body.slice(0,2000) : String(body))}</pre>`;
+      console.error("Negatives non-ok response:", res.status, body);
+      return;
+    }
+
+    const contentType = res.headers.get("content-type") || "";
+    if (!contentType.includes("application/json")) {
+      const body = await res.text().catch(() => "");
+      negativeBox.innerHTML = `<pre style="color:salmon">Expected JSON but server returned ${contentType}:\n${escapeHtml(body.slice ? body.slice(0,2000) : String(body))}</pre>`;
+      console.error("Negatives unexpected content-type:", contentType, body);
+      return;
+    }
 
-    const res = await fetch("/admin/negatives-data");
     const data = await res.json();
 
-    negativeBox.innerHTML = data.length === 0
-        ? "<p>No negative messages yet.</p>"
-        : data.map(msg =>
-            `<p class="neg-item">⚠️ <b>${msg.username}</b>: ${msg.message}</p>`
-        ).join("");
+    // Accept multiple JSON shapes:
+    // - array: [ { username, message, ... }, ... ]
+    // - object: { total, page, results: [ ... ] }
+    // - object error: { error, message }
+    let items = [];
+    if (Array.isArray(data)) {
+      items = data;
+    } else if (data && Array.isArray(data.results)) {
+      items = data.results;
+    } else if (data && data.error) {
+      negativeBox.innerHTML = `<pre style="color:salmon">${escapeHtml(JSON.stringify(data, null, 2))}</pre>`;
+      console.warn("Negatives returned error object:", data);
+      return;
+    } else {
+      negativeBox.innerHTML = `<pre style="color:salmon">Unexpected response shape:\n${escapeHtml(JSON.stringify(data).slice(0,2000))}</pre>`;
+      console.error("Negatives unexpected JSON:", data);
+      return;
+    }
+
+    if (!items.length) {
+      negativeBox.innerHTML = "<p>No negative messages yet.</p>";
+      return;
+    }
+
+    // render items safely (escape HTML)
+    negativeBox.innerHTML = items.map(msg => {
+      const username = escapeHtml(msg.username || "Unknown");
+      const created = escapeHtml(msg.created_at || "");
+      const category = escapeHtml(msg.category || "");
+      const message = escapeHtml(msg.message || "");
+      return `
+        <div class="neg-item">
+          <div class="neg-meta"><strong>${username}</strong> ${created ? `— <small>${created}</small>` : ""} ${category ? `| <em>${category}</em>` : ""}</div>
+          <div class="neg-message">${message}</div>
+        </div>
+      `;
+    }).join("");
+
+  } catch (err) {
+    console.error("updateNegatives error:", err);
+    negativeBox.innerHTML = `<pre style="color:salmon">Error loading negatives: ${escapeHtml(err.message || String(err))}</pre>`;
+  }
 }
 
-// auto-refresh negative messages
-setInterval(updateNegatives, 8000);
+// ---------- Utilities ----------
+function escapeHtml(str) {
+  return String(str || "").replace(/[&<>"'`=\/]/g, function (s) {
+    return {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+      "/": "&#x2F;",
+      "`": "&#x60;",
+      "=": "&#x3D;"
+    }[s];
+  });
+}
+
+// ---------- Startup: initial loads & polling ----------
+document.addEventListener("DOMContentLoaded", () => {
+  // initial analytics load
+  updateAnalytics().catch(() => {});
+
+  // if negativeBox exists, load and set interval
+  if (negativeBox) {
+    updateNegatives().catch(() => {});
+    // poll every 8 seconds
+    setInterval(() => {
+      updateNegatives().catch(() => {});
+    }, 8000);
+  }
+});