Added header controls and client-side chat histor. Assistant messages now render as markdown

assets/app.js

@@ -1,7 +1,16 @@
 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+import { marked } from "https://cdn.jsdelivr.net/npm/marked@15.0.7/lib/marked.esm.js";
+import DOMPurify from "https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.es.min.js";
 
 const client = await Client.connect(window.location.origin);
 
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+});
+
+const CHAT_SESSIONS_KEY = "borderless-chat-sessions";
+
 const REQUIRED_FIELDS = [
   "current-country",
   "residence-status",
@@ -22,8 +31,9 @@ function unwrapResult(result) {
 }
 
 const state = {
+  sessionId: crypto.randomUUID(),
   history: [],
-  globeState: { version: 0, markers: [], highlights: [], fly_to: null },
+  globeState: emptyGlobeState(),
   choices: null,
   busy: false,
   view: "form",
@@ -42,8 +52,17 @@ const els = {
   personaList: document.getElementById("persona-list"),
   authLogin: document.getElementById("auth-login"),
   authLogout: document.getElementById("auth-logout"),
+  newChat: document.getElementById("new-chat"),
+  historyOpen: document.getElementById("history-open"),
+  historyDialog: document.getElementById("history-dialog"),
+  historyClose: document.getElementById("history-close"),
+  historyList: document.getElementById("history-list"),
 };
 
+function emptyGlobeState() {
+  return { version: 0, markers: [], highlights: [], fly_to: null };
+}
+
 function authRedirectTarget() {
   return encodeURIComponent(window.location.pathname + window.location.search);
 }
@@ -104,6 +123,164 @@ function showChatView() {
   setStatus("");
 }
 
+function showFormView() {
+  state.view = "form";
+  els.chatView.classList.remove("is-active");
+  els.formView.classList.add("is-active");
+  setStatus("");
+}
+
+function resetForm() {
+  for (const id of REQUIRED_FIELDS) {
+    const element = document.getElementById(id);
+    if (element.tagName === "TEXTAREA") {
+      element.value = "";
+    } else {
+      element.value = "";
+    }
+    setFieldInvalid(id, false);
+  }
+}
+
+function sessionTitle(history) {
+  const firstUserMessage = history.find(
+    (message) => message.role === "user" && message.content,
+  );
+  if (!firstUserMessage) {
+    return "Untitled chat";
+  }
+  const text = String(firstUserMessage.content).trim().replace(/\s+/g, " ");
+  return text.length > 72 ? `${text.slice(0, 69)}...` : text;
+}
+
+function formatSessionDate(timestamp) {
+  return new Date(timestamp).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+function loadSessions() {
+  try {
+    const sessions = JSON.parse(localStorage.getItem(CHAT_SESSIONS_KEY) || "[]");
+    return Array.isArray(sessions) ? sessions : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveSessions(sessions) {
+  localStorage.setItem(CHAT_SESSIONS_KEY, JSON.stringify(sessions));
+}
+
+function persistActiveSession() {
+  if (!state.history.length) {
+    return;
+  }
+
+  const sessions = loadSessions();
+  const now = Date.now();
+  const payload = {
+    id: state.sessionId,
+    title: sessionTitle(state.history),
+    updatedAt: now,
+    history: state.history,
+    globeState: state.globeState,
+  };
+
+  const index = sessions.findIndex((session) => session.id === state.sessionId);
+  if (index >= 0) {
+    sessions[index] = { ...sessions[index], ...payload };
+  } else {
+    sessions.unshift({ ...payload, createdAt: now });
+  }
+
+  sessions.sort((left, right) => right.updatedAt - left.updatedAt);
+  saveSessions(sessions);
+}
+
+function openHistoryDialog() {
+  renderHistoryList();
+  els.historyDialog.hidden = false;
+}
+
+function closeHistoryDialog() {
+  els.historyDialog.hidden = true;
+}
+
+function renderHistoryList() {
+  const sessions = loadSessions();
+  els.historyList.innerHTML = "";
+
+  if (!sessions.length) {
+    const empty = document.createElement("p");
+    empty.className = "history-list-empty";
+    empty.textContent = "No saved chats yet.";
+    els.historyList.appendChild(empty);
+    return;
+  }
+
+  for (const session of sessions) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "history-item";
+    if (session.id === state.sessionId) {
+      button.classList.add("is-active");
+    }
+
+    const title = document.createElement("span");
+    title.className = "history-item-title";
+    title.textContent = session.title || "Untitled chat";
+
+    const meta = document.createElement("span");
+    meta.className = "history-item-meta";
+    meta.textContent = formatSessionDate(session.updatedAt || session.createdAt);
+
+    button.appendChild(title);
+    button.appendChild(meta);
+    button.addEventListener("click", () => loadSession(session.id));
+    els.historyList.appendChild(button);
+  }
+}
+
+function loadSession(sessionId) {
+  const session = loadSessions().find((entry) => entry.id === sessionId);
+  if (!session) {
+    return;
+  }
+
+  if (state.history.length && state.sessionId !== sessionId) {
+    persistActiveSession();
+  }
+
+  state.sessionId = session.id;
+  state.history = session.history || [];
+  state.globeState = session.globeState || emptyGlobeState();
+  els.chatInput.value = "";
+  renderMessages();
+  applyGlobeState(state.globeState);
+  showChatView();
+  closeHistoryDialog();
+}
+
+function startNewChat() {
+  if (state.history.length) {
+    persistActiveSession();
+  }
+
+  state.sessionId = crypto.randomUUID();
+  state.history = [];
+  state.globeState = emptyGlobeState();
+  resetForm();
+  els.chatInput.value = "";
+  renderMessages();
+  applyGlobeState(state.globeState);
+  showFormView();
+  closeHistoryDialog();
+}
+
 function setBusy(busy) {
   state.busy = busy;
   els.chatSend.disabled = busy;
@@ -205,6 +382,31 @@ function clearFieldValidation() {
   }
 }
 
+function shouldRenderMarkdown(message, isTool) {
+  return message.role === "assistant" && !isTool;
+}
+
+function renderMessageBody(body, message, isTool) {
+  const content = message.content || "";
+  body.className = "chat-message-body";
+
+  if (!shouldRenderMarkdown(message, isTool)) {
+    body.textContent = content;
+    return;
+  }
+
+  body.classList.add("markdown-body");
+  const html = marked.parse(content);
+  body.innerHTML = DOMPurify.sanitize(html, {
+    USE_PROFILES: { html: true },
+  });
+
+  for (const link of body.querySelectorAll("a")) {
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+  }
+}
+
 function renderMessages() {
   els.chatMessages.innerHTML = "";
   for (const message of state.history) {
@@ -222,7 +424,7 @@ function renderMessages() {
       node.appendChild(title);
     }
     const body = document.createElement("div");
-    body.textContent = message.content || "";
+    renderMessageBody(body, message, isTool);
     node.appendChild(body);
     els.chatMessages.appendChild(node);
   }
@@ -284,6 +486,7 @@ async function runChat(message) {
   if (payload.globe_state) {
     applyGlobeState(payload.globe_state);
   }
+  persistActiveSession();
 }
 
 async function sendChatMessage(message) {
@@ -349,6 +552,17 @@ for (const id of REQUIRED_FIELDS) {
 
 els.intakeForm.addEventListener("submit", submitForm);
 els.chatSend.addEventListener("click", sendChat);
+els.newChat.addEventListener("click", startNewChat);
+els.historyOpen.addEventListener("click", openHistoryDialog);
+els.historyClose.addEventListener("click", closeHistoryDialog);
+els.historyDialog
+  .querySelector("[data-history-close]")
+  .addEventListener("click", closeHistoryDialog);
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && !els.historyDialog.hidden) {
+    closeHistoryDialog();
+  }
+});
 els.chatInput.addEventListener("keydown", (event) => {
   if (event.key === "Enter" && !event.shiftKey) {
     event.preventDefault();

assets/index.html

@@ -20,11 +20,17 @@
             Describe your background once. The agent researches official sources, and suggests countries to migrate to.
           </p>
         </div>
-        <div class="auth-actions">
-          <a id="auth-login" class="auth-button" href="/login/huggingface" hidden>
+        <div class="header-actions">
+          <button type="button" id="history-open" class="header-button">
+            History
+          </button>
+          <button type="button" id="new-chat" class="header-button">
+            New chat
+          </button>
+          <a id="auth-login" class="header-button" href="/login/huggingface" hidden>
             Log in with Hugging Face
           </a>
-          <a id="auth-logout" class="auth-button" href="/logout" hidden>
+          <a id="auth-logout" class="header-button" href="/logout" hidden>
             Log out
           </a>
         </div>
@@ -125,6 +131,29 @@
       </main>
     </div>
 
+    <div id="history-dialog" class="history-dialog" hidden>
+      <div class="history-dialog-backdrop" data-history-close></div>
+      <div
+        class="history-dialog-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="history-dialog-title"
+      >
+        <div class="history-dialog-header">
+          <h3 id="history-dialog-title">Chat history</h3>
+          <button
+            type="button"
+            id="history-close"
+            class="history-dialog-close"
+            aria-label="Close"
+          >
+            Close
+          </button>
+        </div>
+        <div id="history-list" class="history-list"></div>
+      </div>
+    </div>
+
     <script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
     <script src="/assets/globe.js"></script>
     <script type="module" src="/assets/app.js"></script>

assets/server.css

@@ -40,17 +40,20 @@ a {
   font-size: 1.1rem;
 }
 
-.auth-actions {
+.header-actions {
   display: flex;
   gap: 8px;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
-.auth-actions [hidden] {
+.header-actions [hidden] {
   display: none !important;
 }
 
-.auth-actions a,
+.header-actions a,
+.header-actions button,
 button {
   border-radius: 8px;
   border: 1px solid rgba(148, 163, 184, 0.25);
@@ -226,9 +229,16 @@ button:disabled {
   border-radius: 10px;
   padding: 10px 12px;
   line-height: 1.45;
+}
+
+.chat-message-body {
   white-space: pre-wrap;
 }
 
+.chat-message.assistant .chat-message-body.markdown-body {
+  white-space: normal;
+}
+
 .chat-message.user {
   background: rgba(59, 130, 246, 0.15);
   align-self: flex-end;
@@ -256,6 +266,105 @@ button:disabled {
   margin-bottom: 4px;
 }
 
+.markdown-body > :first-child {
+  margin-top: 0;
+}
+
+.markdown-body > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body p,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body pre,
+.markdown-body blockquote,
+.markdown-body table {
+  margin: 0.65em 0;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4 {
+  margin: 0.9em 0 0.45em;
+  line-height: 1.3;
+  color: #f9fafb;
+}
+
+.markdown-body h1 {
+  font-size: 1.2rem;
+}
+
+.markdown-body h2 {
+  font-size: 1.1rem;
+}
+
+.markdown-body h3,
+.markdown-body h4 {
+  font-size: 1rem;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.25rem;
+}
+
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
+
+.markdown-body a {
+  color: #fbbf24;
+  text-decoration: underline;
+}
+
+.markdown-body code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.9em;
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+}
+
+.markdown-body pre {
+  overflow-x: auto;
+  background: rgba(15, 23, 42, 0.9);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.markdown-body pre code {
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+.markdown-body blockquote {
+  border-left: 3px solid rgba(245, 158, 11, 0.45);
+  padding-left: 12px;
+  color: #d1d5db;
+}
+
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.92rem;
+}
+
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  padding: 6px 8px;
+  text-align: left;
+}
+
+.markdown-body th {
+  background: rgba(15, 23, 42, 0.7);
+}
+
 .chat-input-row {
   display: flex;
   gap: 8px;
@@ -287,6 +396,96 @@ button:disabled {
   display: block;
 }
 
+.history-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.history-dialog[hidden] {
+  display: none !important;
+}
+
+.history-dialog-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(2, 6, 23, 0.72);
+}
+
+.history-dialog-panel {
+  position: relative;
+  width: min(480px, 100%);
+  max-height: min(70vh, 560px);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  background: #111827;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
+  padding: 16px;
+}
+
+.history-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.history-dialog-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.history-dialog-close {
+  font-size: 0.85rem;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.history-list-empty {
+  margin: 0;
+  padding: 12px 0;
+  color: #9ca3af;
+  font-size: 0.9rem;
+}
+
+.history-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+}
+
+.history-item.is-active {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.08);
+}
+
+.history-item-title {
+  font-weight: 600;
+  color: #f9fafb;
+}
+
+.history-item-meta {
+  font-size: 0.8rem;
+  color: #9ca3af;
+}
+
 @media (max-width: 900px) {
   .app-shell {
     height: auto;