| console.log("script.js loaded");
|
|
|
| document.addEventListener("DOMContentLoaded", () => {
|
| console.log("DOM ready");
|
|
|
| const chatForm = document.getElementById("chat-form");
|
| const userInput = document.getElementById("user-input");
|
| const chatBox = document.getElementById("chat-box");
|
| const orderIdEl = document.getElementById("order_id");
|
| const categoryEl = document.getElementById("category");
|
| const sentimentEl = document.getElementById("sentiment");
|
|
|
| function getCSRFToken() {
|
| const el = document.querySelector('[name=csrfmiddlewaretoken]');
|
| return el ? el.value : "";
|
| }
|
|
|
| function appendUser(text) {
|
| chatBox.innerHTML += `<p class="user-msg">🧑 ${text}</p>`;
|
| chatBox.scrollTop = chatBox.scrollHeight;
|
| }
|
|
|
| function appendBot(text) {
|
| chatBox.innerHTML += `<p class="bot-msg">🤖 ${text}</p>`;
|
| chatBox.scrollTop = chatBox.scrollHeight;
|
| }
|
|
|
|
|
| if (chatForm) {
|
| chatForm.addEventListener("submit", async (e) => {
|
| e.preventDefault();
|
|
|
| const text = userInput.value.trim();
|
| if (!text) return;
|
|
|
| appendUser(text);
|
| userInput.value = "";
|
|
|
| try {
|
| const res = await fetch("/chat/", {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/x-www-form-urlencoded",
|
| "X-CSRFToken": getCSRFToken()
|
| },
|
| body: new URLSearchParams({
|
| user_input: text,
|
| order_id: orderIdEl ? orderIdEl.value : ""
|
| })
|
| });
|
|
|
| const data = await res.json();
|
| console.log("chat response:", data);
|
|
|
| appendBot(data.reply);
|
|
|
| if (categoryEl) categoryEl.textContent = data.category;
|
| if (sentimentEl) {
|
| sentimentEl.textContent =
|
| `${data.sentiment} (${data.confidence}%)`;
|
| }
|
|
|
| updateAnalytics();
|
| updateNegatives();
|
|
|
| } catch (err) {
|
| console.error(err);
|
| appendBot("Network error");
|
| }
|
| });
|
| }
|
| });
|
|
|
|
|
| async function updateAnalytics() {
|
| try {
|
| const res = await fetch("/analytics/");
|
| const data = await res.json();
|
|
|
| console.log("analytics data:", data);
|
|
|
| const canvas = document.getElementById("sentimentChart");
|
| if (!canvas || typeof Chart === "undefined") return;
|
|
|
|
|
| if (window.sentimentChart) {
|
| window.sentimentChart = null;
|
| }
|
|
|
| window.sentimentChart = new Chart(canvas, {
|
| type: "pie",
|
| data: {
|
| labels: data.labels,
|
| datasets: [{
|
| data: data.values,
|
| backgroundColor: ["#2ecc71", "#e74c3c", "#f1c40f"]
|
| }]
|
| }
|
| });
|
|
|
| } catch (err) {
|
| console.error("analytics error:", err);
|
| }
|
| }
|
|
|
|
|
| async function updateNegatives() {
|
| try {
|
| const box = document.getElementById("negative-box");
|
| if (!box) return;
|
|
|
| const res = await fetch("/recent-negatives/");
|
| const data = await res.json();
|
|
|
| box.innerHTML = data.length === 0
|
| ? "<p>No negative messages</p>"
|
| : data.map(n =>
|
| `<p>⚠️ <b>${n.username}</b>: ${n.message}</p>`
|
| ).join("");
|
|
|
| } catch (err) {
|
| console.error("negatives error:", err);
|
| }
|
| }
|
|
|
|
|
| setInterval(() => {
|
| updateAnalytics();
|
| updateNegatives();
|
| }, 5000);
|
|
|
