Update static/script.js

static/script.js

@@ -1,5 +1,3 @@
-// static/script.js
-
 const chatForm = document.getElementById("chat-form");
 const userInput = document.getElementById("user-input");
 const chatBox = document.getElementById("chat-box");
@@ -10,203 +8,90 @@ const negativeBox = document.getElementById("negative-box");
 
 let sentimentChart = null;
 
-// ---------- Helpers ----------
-
-// Escape HTML to avoid XSS when inserting text from the server
-function escapeHtml(str) {
-    return String(str || "").replace(/[&<>"'`=\/]/g, function (s) {
-        return {
-            "&": "&amp;",
-            "<": "&lt;",
-            ">": "&gt;",
-            '"': "&quot;",
-            "'": "&#39;",
-            "/": "&#x2F;",
-            "`": "&#x60;",
-            "=": "&#x3D;"
-        }[s];
-    });
-}
-
-// robustFetch: avoids "Unexpected token '<'" when server returns HTML instead of JSON
-async function robustFetch(url, opts = {}) {
-    const res = await fetch(url, Object.assign({ credentials: "same-origin" }, opts));
-
-    if (!res.ok) {
-        const ct = res.headers.get("content-type") || "";
-        const body = await res.text().catch(() => "");
-        const err = new Error(`HTTP ${res.status} ${res.statusText}`);
-        err.status = res.status;
-        err.contentType = ct;
-        err.body = body;
-        throw err;
-    }
-
-    const contentType = res.headers.get("content-type") || "";
-    if (!contentType.includes("application/json")) {
-        const text = await res.text();
-        const err = new Error("Expected JSON response but got: " + contentType);
-        err.body = text;
-        throw err;
-    }
-
-    return res.json();
-}
-
-// ---------- Chat UI helpers ----------
-
 // 🧠 Append User Message
 function appendUser(text) {
-    chatBox.innerHTML += `<p class="user-msg">🧑 You: ${escapeHtml(text)}</p>`;
+    chatBox.innerHTML += `<p class="user-msg">🧑 You: ${text}</p>`;
     chatBox.scrollTop = chatBox.scrollHeight;
 }
 
 // 🤖 Append Bot Message
 function appendBot(text) {
-    chatBox.innerHTML += `<p class="bot-msg">🤖 Bot: ${escapeHtml(text)}</p>`;
+    chatBox.innerHTML += `<p class="bot-msg">🤖 Bot: ${text}</p>`;
     chatBox.scrollTop = chatBox.scrollHeight;
 }
 
-// ---------- Chat submit ----------
-
-if (chatForm) {
-    chatForm.addEventListener("submit", async (e) => {
-        e.preventDefault();
-
-        const text = userInput.value.trim();
-        const order_id = orderIdEl ? orderIdEl.value.trim() : "";
-
-        if (!text) return;
-
-        appendUser(text);
-        userInput.value = "";
+// ⭐ Send chat message
+chatForm.addEventListener("submit", async (e) => {
+    e.preventDefault();
 
-        try {
-            const res = await fetch("/chat", {
-                method: "POST",
-                headers: { "Content-Type": "application/x-www-form-urlencoded" },
-                body: new URLSearchParams({ user_input: text, order_id })
-            });
+    const text = userInput.value.trim();
+    const order_id = orderIdEl.value.trim();
+    if (!text) return;
 
-            const data = await res.json();
+    appendUser(text);
+    userInput.value = "";
 
-            if (data.error) {
-                appendBot("Sorry, could not process your message.");
-                return;
-            }
-
-            appendBot(data.reply);
+    try {
+        const res = await fetch("/chat", {
+            method: "POST",
+            headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            body: new URLSearchParams({ user_input: text, order_id })
+        });
 
-            if (categoryEl) {
-                categoryEl.textContent = data.category || "—";
-            }
-            if (sentimentEl) {
-                sentimentEl.textContent = `${data.sentiment || "—"} (${data.confidence || 0}%)`;
-            }
+        const data = await res.json();
 
-            await updateAnalytics();
-            await updateNegatives();
-        } catch (err) {
-            console.error(err);
-            appendBot("Network error — try again.");
+        if (data.error) {
+            appendBot("Sorry, could not process your message.");
+            return;
         }
-    });
-}
 
-// ---------- 📊 Update Analytics Charts ----------
+        appendBot(data.reply);
 
-async function updateAnalytics() {
-    const canvas = document.getElementById("sentimentChart");
-    if (!canvas) return; // If chart not on this page, skip
-
-    try {
-        const res = await fetch("/analytics");
-        const data = await res.json();
+        categoryEl.textContent = data.category || "—";
+        sentimentEl.textContent = `${data.sentiment || "—"} (${data.confidence || 0}%)`;
 
-        if (sentimentChart) sentimentChart.destroy();
-
-        sentimentChart = new Chart(canvas, {
-            type: "pie",
-            data: {
-                labels: data.labels,
-                datasets: [
-                    {
-                        data: data.values,
-                        backgroundColor: ["#2ecc71", "#e74c3c", "#f1c40f"]
-                    }
-                ]
-            }
-        });
+        await updateAnalytics();
+        await updateNegatives();
     } catch (err) {
-        console.error("updateAnalytics failed:", err);
+        console.error(err);
+        appendBot("Network error — try again.");
     }
-}
-
-// ---------- ⚠️ Update Negative Messages Box ----------
-
-async function updateNegatives(page = 1, perPage = 50) {
-    if (!negativeBox) return; // Safety for pages without the box
+});
 
-    try {
-        // If you implemented /admin/negatives-data with pagination:
-        // const url = `/admin/negatives-data?page=${page}&per_page=${perPage}`;
-        // If it's just a simple list endpoint, use this:
-        const url = "/admin/negatives-data";
+// 📊 Update Analytics Charts
+async function updateAnalytics() {
+    const res = await fetch("/analytics");
+    const data = await res.json();
 
-        const data = await robustFetch(url, { method: "GET" });
+    const ctx = document.getElementById("sentimentChart");
 
-        // Support both:
-        // - data = [ ...messages ]
-        // - data = { results: [ ...messages ] }
-        const list = Array.isArray(data) ? data : (data.results || []);
+    if (sentimentChart) sentimentChart.destroy();
 
-        if (!list.length) {
-            negativeBox.innerHTML = "<p>No negative messages yet.</p>";
-            return;
+    sentimentChart = new Chart(ctx, {
+        type: "pie",
+        data: {
+            labels: data.labels,
+            datasets: [{
+                data: data.values,
+                backgroundColor: ["#2ecc71", "#e74c3c", "#f1c40f"]
+            }]
         }
+    });
+}
 
-        negativeBox.innerHTML = list
-            .map((msg) => {
-                const username = escapeHtml(msg.username || "Unknown");
-                const message = escapeHtml(msg.message || "");
-                const createdAt = msg.created_at
-                    ? new Date(msg.created_at).toLocaleString()
-                    : "";
-                const category = escapeHtml(msg.category || "—");
-
-                return `
-                    <div class="neg-item">
-                        <div class="neg-meta">
-                            <span class="neg-user"><b>${username}</b></span>
-                            ${createdAt ? `<span class="neg-time">${createdAt}</span>` : ""}
-                            <span class="neg-cat">${category}</span>
-                        </div>
-                        <div class="neg-text">⚠️ ${message}</div>
-                    </div>
-                `;
-            })
-            .join("");
+// ⚠️ Update Negative Messages Box
+async function updateNegatives() {
+    if (!negativeBox) return; // Safety check
 
-    } catch (err) {
-        console.error("updateNegatives failed:", err);
-
-        const safeBody =
-            err.body && err.body.slice ? err.body.slice(0, 500) : (err.body || "");
-
-        negativeBox.innerHTML = `
-            <p style="color: salmon;">
-                Error loading negatives-data: ${escapeHtml(err.message || "Unknown error")}<br/>
-                Status: ${escapeHtml(String(err.status || "N/A"))}
-            </p>
-            <pre style="white-space: pre-wrap; max-height: 200px; overflow: auto; font-size: 0.8rem;">
-${escapeHtml(safeBody)}
-            </pre>
-        `;
-    }
-}
+    const res = await fetch("/admin/negatives-data");
+    const data = await res.json();
 
-// Auto-refresh negative messages every 8 seconds (only if the element exists)
-if (negativeBox) {
-    updateNegatives();
-    setInterval(updateNegatives, 8000);
+    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("");
 }
+
+// auto-refresh negative messages
+setInterval(updateNegatives, 8000);