Add Gradio API integration and refactor app.js. Introduced gradioPredict function for API calls, enhancing chat functionality and session management.

assets/app.js

@@ -1,574 +1,605 @@
-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",
-  "education",
-  "occupation",
-  "experience",
-  "budget",
-  "family",
-  "timeline",
-  "goals",
-];
-
-function unwrapResult(result) {
-  if (result && Array.isArray(result.data)) {
-    return result.data.length === 1 ? result.data[0] : result.data;
-  }
-  return result;
-}
-
-const state = {
-  sessionId: crypto.randomUUID(),
-  history: [],
-  globeState: emptyGlobeState(),
-  choices: null,
-  busy: false,
-  view: "form",
-};
-
-const els = {
-  formView: document.getElementById("form-view"),
-  chatView: document.getElementById("chat-view"),
-  formStatus: document.getElementById("form-status"),
-  statusBanner: document.getElementById("status-banner"),
-  chatMessages: document.getElementById("chat-messages"),
-  chatInput: document.getElementById("chat-input"),
-  chatSend: document.getElementById("chat-send"),
-  intakeForm: document.getElementById("intake-form"),
-  createPrompt: document.getElementById("create-prompt"),
-  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);
-}
-
-function updateAuthUI({ logged_in: loggedIn, username }) {
-  const target = authRedirectTarget();
-  if (loggedIn) {
-    els.authLogin.hidden = true;
-    els.authLogout.hidden = false;
-    els.authLogout.textContent = username ? `Log out (${username})` : "Log out";
-    els.authLogout.href = `/logout?_target_url=${target}`;
-  } else {
-    els.authLogin.hidden = false;
-    els.authLogout.hidden = true;
-    els.authLogin.href = `/login/huggingface?_target_url=${target}`;
-  }
-}
-
-async function loadAuthStatus() {
-  try {
-    const response = await fetch("/api/auth/status", { credentials: "include" });
-    if (!response.ok) {
-      updateAuthUI({ logged_in: false });
-      return;
-    }
-    updateAuthUI(await response.json());
-  } catch {
-    updateAuthUI({ logged_in: false });
-  }
-}
-
-function activeStatusBanner() {
-  return state.view === "form" ? els.formStatus : els.statusBanner;
-}
-
-function setStatus(message) {
-  const banner = activeStatusBanner();
-  const inactive =
-    state.view === "form" ? els.statusBanner : els.formStatus;
-
-  if (!message) {
-    banner.classList.remove("visible");
-    banner.textContent = "";
-    inactive.classList.remove("visible");
-    inactive.textContent = "";
-    return;
-  }
-  banner.textContent = message;
-  banner.classList.add("visible");
-  inactive.classList.remove("visible");
-  inactive.textContent = "";
-}
-
-function showChatView() {
-  state.view = "chat";
-  els.formView.classList.remove("is-active");
-  els.chatView.classList.add("is-active");
-  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;
-  els.createPrompt.disabled = busy;
-}
-
-function fillSelect(select, options, { multiple = false, empty = true } = {}) {
-  select.innerHTML = "";
-  if (empty) {
-    const option = document.createElement("option");
-    option.value = "";
-    option.textContent = multiple ? "Select one or more" : "Select one";
-    select.appendChild(option);
-  }
-  for (const value of options) {
-    const option = document.createElement("option");
-    option.value = value;
-    option.textContent = value;
-    select.appendChild(option);
-  }
-  select.multiple = multiple;
-}
-
-function selectedValues(select) {
-  if (select.multiple) {
-    return Array.from(select.selectedOptions)
-      .map((option) => option.value)
-      .filter(Boolean);
-  }
-  const value = select.value;
-  return value || null;
-}
-
-function setSelectValue(id, value) {
-  const select = document.getElementById(id);
-  const text = String(value || "").trim();
-  if (!text) {
-    select.value = "";
-    return;
-  }
-
-  let option = Array.from(select.options).find((entry) => entry.value === text);
-  if (!option) {
-    option = document.createElement("option");
-    option.value = text;
-    option.textContent = text;
-    select.appendChild(option);
-  }
-  select.value = text;
-  setFieldInvalid(id, false);
-}
-
-function fillPersonaForm(persona) {
-  const profile = persona.profile || {};
-  setSelectValue("current-country", profile.current_country);
-  setSelectValue("residence-status", profile.residence_status);
-  setSelectValue("education", profile.education);
-  setSelectValue("occupation", profile.occupation);
-  setSelectValue("experience", profile.experience);
-  setSelectValue("budget", profile.budget);
-  setSelectValue("family", profile.family);
-  setSelectValue("timeline", profile.timeline);
-  document.getElementById("goals").value = String(profile.goals || "").trim();
-  setFieldInvalid("goals", false);
-  setStatus("");
-}
-
-function fieldValue(id) {
-  const element = document.getElementById(id);
-  if (element.tagName === "TEXTAREA") {
-    return element.value.trim();
-  }
-  return selectedValues(element);
-}
-
-function setFieldInvalid(id, invalid) {
-  const element = document.getElementById(id);
-  element.classList.toggle("invalid", invalid);
-}
-
-function validateForm() {
-  let valid = true;
-  for (const id of REQUIRED_FIELDS) {
-    const empty = !fieldValue(id);
-    setFieldInvalid(id, empty);
-    if (empty) {
-      valid = false;
-    }
-  }
-  if (!valid) {
-    setStatus("Please fill in all required fields before submitting.");
-  }
-  return valid;
-}
-
-function clearFieldValidation() {
-  for (const id of REQUIRED_FIELDS) {
-    setFieldInvalid(id, false);
-  }
-}
-
-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) {
-    const node = document.createElement("div");
-    const metadata = message.metadata || {};
-    const isTool = Boolean(metadata.title || metadata.status);
-    node.className = `chat-message ${message.role}${isTool ? " tool" : ""}`;
-    if (metadata.status === "pending") {
-      node.classList.add("pending");
-    }
-    if (isTool) {
-      const title = document.createElement("div");
-      title.className = "tool-title";
-      title.textContent = metadata.title || "Tool";
-      node.appendChild(title);
-    }
-    const body = document.createElement("div");
-    renderMessageBody(body, message, isTool);
-    node.appendChild(body);
-    els.chatMessages.appendChild(node);
-  }
-  els.chatMessages.scrollTop = els.chatMessages.scrollHeight;
-}
-
-function applyGlobeState(globeState) {
-  state.globeState = globeState;
-  window.BorderlessGlobe?.applyState(globeState);
-}
-
-function formPayload() {
-  return {
-    current_country: selectedValues(document.getElementById("current-country")),
-    residence_status: selectedValues(document.getElementById("residence-status")),
-    education: selectedValues(document.getElementById("education")),
-    occupation: selectedValues(document.getElementById("occupation")),
-    experience: selectedValues(document.getElementById("experience")),
-    budget: selectedValues(document.getElementById("budget")),
-    family: selectedValues(document.getElementById("family")),
-    timeline: selectedValues(document.getElementById("timeline")),
-    goals: document.getElementById("goals").value.trim(),
-  };
-}
-
-async function loadChoices() {
-  const result = await client.predict("/get_intake_choices", {});
-  const choices = unwrapResult(result);
-  state.choices = choices;
-
-  fillSelect(document.getElementById("current-country"), choices.countries);
-  fillSelect(document.getElementById("residence-status"), choices.residence_status);
-  fillSelect(document.getElementById("education"), choices.education);
-  fillSelect(document.getElementById("occupation"), choices.occupation);
-  fillSelect(document.getElementById("experience"), choices.experience);
-  fillSelect(document.getElementById("budget"), choices.budget);
-  fillSelect(document.getElementById("family"), choices.family);
-  fillSelect(document.getElementById("timeline"), choices.timeline);
-
-  els.personaList.innerHTML = "";
-  for (const persona of choices.personas || []) {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.textContent = persona.label;
-    button.addEventListener("click", () => fillPersonaForm(persona));
-    els.personaList.appendChild(button);
-  }
-}
-
-async function runChat(message) {
-  const result = await client.predict("/chat", {
-    message,
-    history: state.history,
-    globe_state: state.globeState,
-  });
-  const payload = unwrapResult(result);
-  state.history = payload.history || state.history;
-  renderMessages();
-  if (payload.globe_state) {
-    applyGlobeState(payload.globe_state);
-  }
-  persistActiveSession();
-}
-
-async function sendChatMessage(message) {
-  setBusy(true);
-  setStatus("Researching pathways...");
-  try {
-    await runChat(message);
-    setStatus("");
-  } catch (error) {
-    setStatus(`Chat failed: ${error.message || error}`);
-    throw error;
-  } finally {
-    setBusy(false);
-  }
-}
-
-async function submitForm(event) {
-  event.preventDefault();
-  if (state.busy || !validateForm()) {
-    return;
-  }
-
-  showChatView();
-  setBusy(true);
-  setStatus("Building research prompt...");
-  try {
-    const result = await client.predict("/build_research_prompt", formPayload());
-    const message = unwrapResult(result) || "";
-    if (!message) {
-      setStatus("Could not build prompt.");
-      return;
-    }
-    clearFieldValidation();
-    setStatus("Researching pathways...");
-    await runChat(message);
-    setStatus("");
-  } catch (error) {
-    setStatus(`Submission failed: ${error.message || error}`);
-  } finally {
-    setBusy(false);
-  }
-}
-
-async function sendChat() {
-  const message = els.chatInput.value.trim();
-  if (!message || state.busy) {
-    return;
-  }
-
-  els.chatInput.value = "";
-  try {
-    await sendChatMessage(message);
-  } catch {
-    els.chatInput.value = message;
-  }
-}
-
-for (const id of REQUIRED_FIELDS) {
-  const element = document.getElementById(id);
-  element.addEventListener("input", () => setFieldInvalid(id, false));
-  element.addEventListener("change", () => setFieldInvalid(id, false));
-}
-
-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();
-    sendChat();
-  }
-});
-
-await Promise.all([loadChoices(), loadAuthStatus()]);
-renderMessages();
+import { gradioPredict } from "/assets/gradio_api.js?v=2";
+
+let markdownTools = null;
+
+async function ensureMarkdownTools() {
+  if (markdownTools) {
+    return markdownTools;
+  }
+  const [{ marked }, { default: DOMPurify }] = await Promise.all([
+    import("https://cdn.jsdelivr.net/npm/marked@15.0.7/lib/marked.esm.js"),
+    import("https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.es.min.js"),
+  ]);
+  marked.setOptions({
+    breaks: true,
+    gfm: true,
+  });
+  markdownTools = { marked, DOMPurify };
+  return markdownTools;
+}
+
+const CHAT_SESSIONS_KEY = "borderless-chat-sessions";
+
+const REQUIRED_FIELDS = [
+  "current-country",
+  "residence-status",
+  "education",
+  "occupation",
+  "experience",
+  "budget",
+  "family",
+  "timeline",
+  "goals",
+];
+
+function unwrapResult(result) {
+  if (result && Array.isArray(result.data)) {
+    return result.data.length === 1 ? result.data[0] : result.data;
+  }
+  return result;
+}
+
+const state = {
+  sessionId: crypto.randomUUID(),
+  history: [],
+  globeState: emptyGlobeState(),
+  choices: null,
+  busy: false,
+  view: "form",
+};
+
+const els = {
+  formView: document.getElementById("form-view"),
+  chatView: document.getElementById("chat-view"),
+  formStatus: document.getElementById("form-status"),
+  statusBanner: document.getElementById("status-banner"),
+  chatMessages: document.getElementById("chat-messages"),
+  chatInput: document.getElementById("chat-input"),
+  chatSend: document.getElementById("chat-send"),
+  intakeForm: document.getElementById("intake-form"),
+  createPrompt: document.getElementById("create-prompt"),
+  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);
+}
+
+function updateAuthUI({ logged_in: loggedIn, username }) {
+  const target = authRedirectTarget();
+  if (loggedIn) {
+    els.authLogin.hidden = true;
+    els.authLogout.hidden = false;
+    els.authLogout.textContent = username ? `Log out (${username})` : "Log out";
+    els.authLogout.href = `/logout?_target_url=${target}`;
+  } else {
+    els.authLogin.hidden = false;
+    els.authLogout.hidden = true;
+    els.authLogin.href = `/login/huggingface?_target_url=${target}`;
+  }
+}
+
+async function loadAuthStatus() {
+  try {
+    const response = await fetch("/api/auth/status", { credentials: "include" });
+    if (!response.ok) {
+      updateAuthUI({ logged_in: false });
+      return;
+    }
+    updateAuthUI(await response.json());
+  } catch {
+    updateAuthUI({ logged_in: false });
+  }
+}
+
+function activeStatusBanner() {
+  return state.view === "form" ? els.formStatus : els.statusBanner;
+}
+
+function setStatus(message) {
+  const banner = activeStatusBanner();
+  const inactive =
+    state.view === "form" ? els.statusBanner : els.formStatus;
+
+  if (!message) {
+    banner.classList.remove("visible");
+    banner.textContent = "";
+    inactive.classList.remove("visible");
+    inactive.textContent = "";
+    return;
+  }
+  banner.textContent = message;
+  banner.classList.add("visible");
+  inactive.classList.remove("visible");
+  inactive.textContent = "";
+}
+
+function showChatView() {
+  state.view = "chat";
+  els.formView.classList.remove("is-active");
+  els.chatView.classList.add("is-active");
+  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;
+  els.createPrompt.disabled = busy;
+}
+
+function fillSelect(select, options, { multiple = false, empty = true } = {}) {
+  select.innerHTML = "";
+  if (empty) {
+    const option = document.createElement("option");
+    option.value = "";
+    option.textContent = multiple ? "Select one or more" : "Select one";
+    select.appendChild(option);
+  }
+  for (const value of options) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = value;
+    select.appendChild(option);
+  }
+  select.multiple = multiple;
+}
+
+function selectedValues(select) {
+  if (select.multiple) {
+    return Array.from(select.selectedOptions)
+      .map((option) => option.value)
+      .filter(Boolean);
+  }
+  const value = select.value;
+  return value || null;
+}
+
+function setSelectValue(id, value) {
+  const select = document.getElementById(id);
+  const text = String(value || "").trim();
+  if (!text) {
+    select.value = "";
+    return;
+  }
+
+  let option = Array.from(select.options).find((entry) => entry.value === text);
+  if (!option) {
+    option = document.createElement("option");
+    option.value = text;
+    option.textContent = text;
+    select.appendChild(option);
+  }
+  select.value = text;
+  setFieldInvalid(id, false);
+}
+
+function fillPersonaForm(persona) {
+  const profile = persona.profile || {};
+  setSelectValue("current-country", profile.current_country);
+  setSelectValue("residence-status", profile.residence_status);
+  setSelectValue("education", profile.education);
+  setSelectValue("occupation", profile.occupation);
+  setSelectValue("experience", profile.experience);
+  setSelectValue("budget", profile.budget);
+  setSelectValue("family", profile.family);
+  setSelectValue("timeline", profile.timeline);
+  document.getElementById("goals").value = String(profile.goals || "").trim();
+  setFieldInvalid("goals", false);
+  setStatus("");
+}
+
+function fieldValue(id) {
+  const element = document.getElementById(id);
+  if (element.tagName === "TEXTAREA") {
+    return element.value.trim();
+  }
+  return selectedValues(element);
+}
+
+function setFieldInvalid(id, invalid) {
+  const element = document.getElementById(id);
+  element.classList.toggle("invalid", invalid);
+}
+
+function validateForm() {
+  let valid = true;
+  for (const id of REQUIRED_FIELDS) {
+    const empty = !fieldValue(id);
+    setFieldInvalid(id, empty);
+    if (empty) {
+      valid = false;
+    }
+  }
+  if (!valid) {
+    setStatus("Please fill in all required fields before submitting.");
+  }
+  return valid;
+}
+
+function clearFieldValidation() {
+  for (const id of REQUIRED_FIELDS) {
+    setFieldInvalid(id, false);
+  }
+}
+
+function shouldRenderMarkdown(message, isTool) {
+  return message.role === "assistant" && !isTool;
+}
+
+async 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");
+  try {
+    const { marked, DOMPurify } = await ensureMarkdownTools();
+    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";
+    }
+  } catch {
+    body.textContent = content;
+  }
+}
+
+async function renderMessages() {
+  els.chatMessages.innerHTML = "";
+  for (const message of state.history) {
+    const node = document.createElement("div");
+    const metadata = message.metadata || {};
+    const isTool = Boolean(metadata.title || metadata.status);
+    node.className = `chat-message ${message.role}${isTool ? " tool" : ""}`;
+    if (metadata.status === "pending") {
+      node.classList.add("pending");
+    }
+    if (isTool) {
+      const title = document.createElement("div");
+      title.className = "tool-title";
+      title.textContent = metadata.title || "Tool";
+      node.appendChild(title);
+    }
+    const body = document.createElement("div");
+    await renderMessageBody(body, message, isTool);
+    node.appendChild(body);
+    els.chatMessages.appendChild(node);
+  }
+  els.chatMessages.scrollTop = els.chatMessages.scrollHeight;
+}
+
+function applyGlobeState(globeState) {
+  state.globeState = globeState;
+  window.BorderlessGlobe?.applyState(globeState);
+}
+
+function formPayload() {
+  return {
+    current_country: selectedValues(document.getElementById("current-country")),
+    residence_status: selectedValues(document.getElementById("residence-status")),
+    education: selectedValues(document.getElementById("education")),
+    occupation: selectedValues(document.getElementById("occupation")),
+    experience: selectedValues(document.getElementById("experience")),
+    budget: selectedValues(document.getElementById("budget")),
+    family: selectedValues(document.getElementById("family")),
+    timeline: selectedValues(document.getElementById("timeline")),
+    goals: document.getElementById("goals").value.trim(),
+  };
+}
+
+async function loadChoices() {
+  let choices = null;
+
+  try {
+    const response = await fetch("/api/intake_choices", { credentials: "include" });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    choices = await response.json();
+  } catch (restError) {
+    const result = await gradioPredict("/get_intake_choices", {});
+    choices = unwrapResult(result);
+  }
+
+  state.choices = choices;
+
+  fillSelect(document.getElementById("current-country"), choices.countries);
+  fillSelect(document.getElementById("residence-status"), choices.residence_status);
+  fillSelect(document.getElementById("education"), choices.education);
+  fillSelect(document.getElementById("occupation"), choices.occupation);
+  fillSelect(document.getElementById("experience"), choices.experience);
+  fillSelect(document.getElementById("budget"), choices.budget);
+  fillSelect(document.getElementById("family"), choices.family);
+  fillSelect(document.getElementById("timeline"), choices.timeline);
+
+  els.personaList.innerHTML = "";
+  for (const persona of choices.personas || []) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = persona.label;
+    button.addEventListener("click", () => fillPersonaForm(persona));
+    els.personaList.appendChild(button);
+  }
+}
+
+async function runChat(message) {
+  const result = await gradioPredict("/chat", {
+    message,
+    history: state.history,
+    globe_state: state.globeState,
+  });
+  const payload = unwrapResult(result);
+  state.history = payload.history || state.history;
+  await renderMessages();
+  if (payload.globe_state) {
+    applyGlobeState(payload.globe_state);
+  }
+  persistActiveSession();
+}
+
+async function sendChatMessage(message) {
+  setBusy(true);
+  setStatus("Researching pathways...");
+  try {
+    await runChat(message);
+    setStatus("");
+  } catch (error) {
+    setStatus(`Chat failed: ${error.message || error}`);
+    throw error;
+  } finally {
+    setBusy(false);
+  }
+}
+
+async function submitForm(event) {
+  event.preventDefault();
+  if (state.busy || !validateForm()) {
+    return;
+  }
+
+  showChatView();
+  setBusy(true);
+  setStatus("Building research prompt...");
+  try {
+    const result = await gradioPredict("/build_research_prompt", formPayload());
+    const message = unwrapResult(result) || "";
+    if (!message) {
+      setStatus("Could not build prompt.");
+      return;
+    }
+    clearFieldValidation();
+    setStatus("Researching pathways...");
+    await runChat(message);
+    setStatus("");
+  } catch (error) {
+    setStatus(`Submission failed: ${error.message || error}`);
+  } finally {
+    setBusy(false);
+  }
+}
+
+async function sendChat() {
+  const message = els.chatInput.value.trim();
+  if (!message || state.busy) {
+    return;
+  }
+
+  els.chatInput.value = "";
+  try {
+    await sendChatMessage(message);
+  } catch {
+    els.chatInput.value = message;
+  }
+}
+
+for (const id of REQUIRED_FIELDS) {
+  const element = document.getElementById(id);
+  element.addEventListener("input", () => setFieldInvalid(id, false));
+  element.addEventListener("change", () => setFieldInvalid(id, false));
+}
+
+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();
+    sendChat();
+  }
+});
+
+await loadAuthStatus();
+
+try {
+  await loadChoices();
+} catch (error) {
+  setStatus(`Could not load form options: ${error.message || error}`);
+}
+
+await renderMessages();

assets/gradio_api.js

@@ -0,0 +1,52 @@
+export async function gradioPredict(apiName, payload = {}) {
+  const route = apiName.replace(/^\//, "");
+  const start = await fetch(`/gradio_api/call/v2/${route}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+    credentials: "include",
+  });
+  if (!start.ok) {
+    throw new Error(`Gradio API failed to start (${start.status})`);
+  }
+
+  const { event_id: eventId } = await start.json();
+  if (!eventId) {
+    throw new Error("Gradio API did not return an event id");
+  }
+
+  const stream = await fetch(`/gradio_api/call/${route}/${eventId}`, {
+    credentials: "include",
+  });
+  if (!stream.ok) {
+    throw new Error(`Gradio API stream failed (${stream.status})`);
+  }
+
+  const body = await stream.text();
+  let resultData = null;
+  let errorMessage = null;
+
+  for (const line of body.split("\n")) {
+    if (line.startsWith("event: error")) {
+      errorMessage = "Gradio API returned an error";
+      continue;
+    }
+    if (!line.startsWith("data: ")) {
+      continue;
+    }
+    try {
+      resultData = JSON.parse(line.slice(6));
+    } catch {
+      // Ignore malformed SSE chunks and keep the last valid payload.
+    }
+  }
+
+  if (errorMessage) {
+    throw new Error(errorMessage);
+  }
+  if (resultData === null) {
+    throw new Error("Gradio API returned no data");
+  }
+
+  return { data: resultData };
+}