Update frontend/app.js

frontend/app.js

@@ -1,7 +1,7 @@
 // Same-origin API calls
 const API_BASE = "";
 
-// Persist a session_id to let backend track violations
+// Session utilities
 function getSessionId() {
   let sid = localStorage.getItem("session_id");
   if (!sid) {
@@ -11,6 +11,13 @@ function getSessionId() {
   return sid;
 }
 
+function setNewSessionId() {
+  const sid = crypto.randomUUID();
+  localStorage.setItem("session_id", sid);
+  return sid;
+}
+
+// UI helpers
 function addMessage(text, who = "bot") {
   const win = document.getElementById("chat-window");
   const div = document.createElement("div");
@@ -26,12 +33,19 @@ function disableInput(reason = "Input disabled.") {
   document.getElementById("status").textContent = reason;
 }
 
+function enableInput() {
+  document.getElementById("chat-input").disabled = false;
+  document.getElementById("send-btn").disabled = false;
+  document.getElementById("status").textContent = "";
+}
+
 function clearChat() {
   const win = document.getElementById("chat-window");
   win.innerHTML = "";
   document.getElementById("status").textContent = "";
 }
 
+// Backend calls
 async function moderateText(text) {
   const sid = getSessionId();
   const res = await fetch(`${API_BASE}/moderate`, {
@@ -60,12 +74,15 @@ async function sendChat(text) {
   return res.json(); // {reply}
 }
 
+// Flow handlers
 function submitName() {
   const nameInput = document.getElementById("name-input");
   const name = (nameInput.value || "").trim();
   if (!name) return;
   document.getElementById("name-section").classList.add("hidden");
   document.getElementById("chat-section").classList.remove("hidden");
+  clearChat();
+  enableInput();
   addMessage(`Welcome, ${name}!`, "bot");
   addMessage(name, "user"); // immediately show name in chat
 }
@@ -93,7 +110,27 @@ async function submitMessage() {
   }
 }
 
-// Wire up buttons and Enter key
+// Top-bar actions
+function goHome() {
+  // Reload root to show name section by default
+  window.location.href = "/";
+}
+
+function newUser() {
+  // Reset session, show name input again, clear chat, re-enable input
+  setNewSessionId();
+  clearChat();
+  enableInput();
+  document.getElementById("chat-section").classList.add("hidden");
+  document.getElementById("name-section").classList.remove("hidden");
+  document.getElementById("name-input").value = "";
+  document.getElementById("chat-input").value = "";
+}
+
+// Wire up buttons and Enter keys
+document.getElementById("home-btn").addEventListener("click", goHome);
+document.getElementById("new-user-btn").addEventListener("click", newUser);
+
 document.getElementById("name-submit").addEventListener("click", submitName);
 document.getElementById("name-input").addEventListener("keydown", (e) => {
   if (e.key === "Enter") submitName();