From a58b386cc56ded9352fe1c16c352f15091276bd8 Mon Sep 17 00:00:00 2001
From: Lukas Wallrich <lukas.wallrich@gmail.com>
Date: Wed, 10 Jun 2026 17:26:48 +0100
Subject: [PATCH] JUST-OS chat: merge refs into copy, add localStorage history
 (#786)

- References now render inside the answer box as a collapsible list,
  and the copy button copies the answer together with its references
  (full authors, title, URL).
- Persist conversations in localStorage (was sessionStorage) with a
  multi-chat History panel: list, open, and delete past chats. Shared
  between the floating widget and the full-page chat; capped at 50.
- Use the Inter webfont for the chat UI (the site body is Domine).
- Keep initializing the standalone chat page even when the floating
  widget was dismissed earlier in the session.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 layouts/partials/chatbot.html        | 139 +++++++++++++-
 layouts/shortcodes/just_os_chat.html |   6 +-
 static/js/just-os-chat.js            | 276 +++++++++++++++++++++++----
 3 files changed, 377 insertions(+), 44 deletions(-)

diff --git a/layouts/partials/chatbot.html b/layouts/partials/chatbot.html
index b68819afc9d..4ccb09be895 100644
--- a/layouts/partials/chatbot.html
+++ b/layouts/partials/chatbot.html
@@ -7,6 +7,11 @@
   {{ end }}
 {{ end }}
 
+{{/* Load Inter for the JUST-OS chat UI (the site's body font is Domine). */}}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
+
 <style>
   #just-os-widget {
     position: fixed;
@@ -18,7 +23,13 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    font-family: sans-serif;
+    font-family: "Inter", "Open Sans", "Lexend", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  /* Standalone full-page chat: positioning context + Inter font */
+  .just-os-fullpage {
+    position: relative;
+    font-family: "Inter", "Open Sans", "Lexend", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   }
 
   #just-os-btn {
@@ -429,8 +440,9 @@
     cursor: not-allowed;
   }
 
-  /* New Chat button */
-  .just-os-new-chat-btn {
+  /* New Chat / History buttons */
+  .just-os-new-chat-btn,
+  .just-os-history-btn {
     background: none;
     border: none;
     cursor: pointer;
@@ -440,11 +452,128 @@
     border-radius: 4px;
   }
 
-  .just-os-new-chat-btn:hover {
+  .just-os-new-chat-btn:hover,
+  .just-os-history-btn:hover {
     background: #eee;
     color: #333;
   }
 
+  /* History button pushed to the right in the widget header */
+  .chat-header .just-os-history-btn {
+    margin-left: auto;
+  }
+
+  /* History panel — overlays the chat area */
+  .just-os-history-panel {
+    position: absolute;
+    inset: 0;
+    background: #fff;
+    z-index: 20;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .just-os-history-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 15px;
+    border-bottom: 1px solid #eee;
+    background: #f8f9fa;
+    flex-shrink: 0;
+  }
+
+  .just-os-history-header span {
+    font-weight: bold;
+    color: #0d3c74;
+  }
+
+  .just-os-history-back {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9rem;
+    color: #0d3c74;
+    padding: 4px 6px;
+    border-radius: 4px;
+  }
+
+  .just-os-history-back:hover {
+    background: #eee;
+  }
+
+  .just-os-history-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+    min-height: 0;
+  }
+
+  .just-os-history-empty {
+    color: #888;
+    font-size: 0.85rem;
+    text-align: center;
+    margin: 24px 0;
+  }
+
+  .just-os-history-item {
+    display: flex;
+    align-items: stretch;
+    border-radius: 8px;
+    margin-bottom: 4px;
+  }
+
+  .just-os-history-item:hover {
+    background: #f0f2f5;
+  }
+
+  .just-os-history-item.active {
+    background: #e8eef6;
+  }
+
+  .just-os-history-open {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    padding: 8px 10px;
+    min-width: 0;
+  }
+
+  .just-os-history-title {
+    font-size: 0.88rem;
+    color: #1a1a1a;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .just-os-history-meta {
+    font-size: 0.72rem;
+    color: #999;
+  }
+
+  .just-os-history-delete {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #bbb;
+    font-size: 0.9rem;
+    padding: 0 10px;
+    border-radius: 8px;
+    flex-shrink: 0;
+  }
+
+  .just-os-history-delete:hover {
+    color: #c0392b;
+  }
+
   /* Standalone page offline notice */
   .just-os-offline-page {
     width: 100%;
@@ -527,6 +656,8 @@
     <div class="chat-header">
       <span>JUST-OS</span>
 
+      <button type="button" class="just-os-history-btn" onclick="toggleJustOSHistory()" title="Chat history">History</button>
+
       <button type="button" class="just-os-new-chat-btn" onclick="newJustOSChat()" title="New Chat">New Chat</button>
 
       <button type="button" id="just-os-float-btn" class="close-btn" style="margin-left: auto; font-size: 1.1rem;"
diff --git a/layouts/shortcodes/just_os_chat.html b/layouts/shortcodes/just_os_chat.html
index 97400c75177..f9cbde384db 100644
--- a/layouts/shortcodes/just_os_chat.html
+++ b/layouts/shortcodes/just_os_chat.html
@@ -30,8 +30,12 @@
     gap: 8px;
   ">
     <span style="font-weight: bold; color: #0d3c74;">JUST-OS</span>
-    <button type="button" class="just-os-new-chat-btn" onclick="newJustOSChat()" title="New Chat"
+    <button type="button" class="just-os-history-btn" onclick="toggleJustOSHistory()" title="Chat history"
       style="background: none; border: none; cursor: pointer; font-size: 0.8rem; color: #666; padding: 4px 8px; border-radius: 4px; margin-left: auto;">
+      History
+    </button>
+    <button type="button" class="just-os-new-chat-btn" onclick="newJustOSChat()" title="New Chat"
+      style="background: none; border: none; cursor: pointer; font-size: 0.8rem; color: #666; padding: 4px 8px; border-radius: 4px;">
       New Chat
     </button>
   </div>
diff --git a/static/js/just-os-chat.js b/static/js/just-os-chat.js
index 50f10095337..4a996b09f1b 100644
--- a/static/js/just-os-chat.js
+++ b/static/js/just-os-chat.js
@@ -6,8 +6,10 @@
   'use strict';
 
   const API_URL = 'https://bot.just-os.org/chat';
-  const STORAGE_KEY = 'just-os-chat-state';
-  const WELCOME_MESSAGE = "Hi \u2014 I'm the JUST-OS bot and can help you with questions around open science. What's on your mind?";
+  const HISTORY_KEY = 'just-os-chat-history'; // localStorage: array of saved conversations
+  const ACTIVE_KEY = 'just-os-chat-active';   // localStorage: id of the conversation last viewed
+  const MAX_CHATS = 50;                        // cap stored conversations to avoid unbounded growth
+  const WELCOME_MESSAGE = "Hi — I'm the JUST-OS bot and can help you with questions around open science. What's on your mind?";
 
   const state = {
     chatId: null,
@@ -40,32 +42,85 @@
   }
 
   /* -------------------------------------------------- */
-  /*  State persistence                                  */
+  /*  Chat history (localStorage)                        */
   /* -------------------------------------------------- */
 
-  function saveState() {
+  function loadHistory() {
+    try {
+      const raw = localStorage.getItem(HISTORY_KEY);
+      if (!raw) return [];
+      const arr = JSON.parse(raw);
+      return Array.isArray(arr) ? arr : [];
+    } catch (_) { return []; }
+  }
+
+  function persistHistory(history) {
     try {
-      sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
-        chatId: state.chatId,
-        messages: state.messages,
-      }));
+      localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
     } catch (_) { /* quota exceeded – ignore */ }
   }
 
+  function setActiveId(id) {
+    try { localStorage.setItem(ACTIVE_KEY, id); } catch (_) { /* ignore */ }
+  }
+
+  function deriveTitle(messages) {
+    const firstUser = messages.find(function (m) { return m.role === 'user'; });
+    if (!firstUser) return 'New conversation';
+    const t = firstUser.content.trim().replace(/\s+/g, ' ');
+    return t.length > 40 ? t.slice(0, 40) + '…' : t;
+  }
+
+  // Persist the current conversation into the history list (newest first).
+  function saveState() {
+    const hasUser = state.messages.some(function (m) { return m.role === 'user'; });
+    if (!hasUser) return; // don't store empty / welcome-only conversations
+
+    const history = loadHistory();
+    const now = Date.now();
+    const idx = history.findIndex(function (c) { return c.id === state.chatId; });
+    const entry = {
+      id: state.chatId,
+      title: deriveTitle(state.messages),
+      messages: state.messages,
+      createdAt: idx >= 0 ? history[idx].createdAt : now,
+      updatedAt: now,
+    };
+    if (idx >= 0) history[idx] = entry;
+    else history.push(entry);
+
+    history.sort(function (a, b) { return b.updatedAt - a.updatedAt; });
+    if (history.length > MAX_CHATS) history.length = MAX_CHATS;
+
+    persistHistory(history);
+    setActiveId(state.chatId);
+  }
+
   function restoreState() {
     try {
-      const raw = sessionStorage.getItem(STORAGE_KEY);
-      if (!raw) return false;
-      const saved = JSON.parse(raw);
-      if (saved.chatId) {
-        state.chatId = saved.chatId;
-        state.messages = saved.messages || [];
+      const activeId = localStorage.getItem(ACTIVE_KEY);
+      if (!activeId) return false;
+      const chat = loadHistory().find(function (c) { return c.id === activeId; });
+      if (chat) {
+        state.chatId = chat.id;
+        state.messages = chat.messages || [];
         return true;
       }
     } catch (_) { /* corrupt – ignore */ }
     return false;
   }
 
+  function relativeTime(ts) {
+    if (!ts) return '';
+    const diff = Date.now() - ts;
+    const min = 60000, hr = 3600000, day = 86400000;
+    if (diff < min) return 'just now';
+    if (diff < hr) return Math.floor(diff / min) + 'm ago';
+    if (diff < day) return Math.floor(diff / hr) + 'h ago';
+    if (diff < 7 * day) return Math.floor(diff / day) + 'd ago';
+    return new Date(ts).toLocaleDateString();
+  }
+
   /* -------------------------------------------------- */
   /*  Rendering                                          */
   /* -------------------------------------------------- */
@@ -85,24 +140,26 @@
       bubble.textContent = msg.content;
     } else {
       bubble.innerHTML = msg.content;
-
       wrapper.appendChild(bubble);
 
-      // Copy button below bubble
+      // Capture the answer text before references are merged into the box.
+      const answerText = bubble.innerText.trim();
+
+      // Merge references into the answer box as a collapsible list.
+      const refs = extractReferences(bubble);
+      if (refs.length) bubble.appendChild(buildReferenceDetails(refs));
+
+      // Copy button below the box — copies the answer together with its references.
       const copyBtn = document.createElement('button');
       copyBtn.className = 'just-os-copy-btn';
       copyBtn.type = 'button';
       copyBtn.title = 'Copy response';
       copyBtn.innerHTML = '\u{1F4CB}';
       copyBtn.addEventListener('click', function () {
-        copyResponse(copyBtn, bubble);
+        copyResponse(copyBtn, answerText, refs);
       });
       wrapper.appendChild(copyBtn);
 
-      // Extract references and render as a list below
-      const refList = buildReferenceList(bubble);
-      if (refList) wrapper.appendChild(refList);
-
       return wrapper;
     }
 
@@ -294,17 +351,20 @@
   }
 
   /* -------------------------------------------------- */
-  /*  New Chat                                           */
+  /*  New Chat / open / delete                           */
   /* -------------------------------------------------- */
 
   function newChat() {
+    // The previous conversation is already persisted (saved after each turn),
+    // so starting a new chat simply leaves it in the history list.
     state.chatId = generateId();
     state.messages = [];
     state.streaming = false;
-    sessionStorage.removeItem(STORAGE_KEY);
+    setActiveId(state.chatId);
     renderAllMessages();
     const container = getContainer();
     if (container) {
+      closeHistoryPanel(container);
       showWelcome(container);
       updateInputState(container);
       const input = getInputEl(container);
@@ -312,12 +372,130 @@
     }
   }
 
+  function openChat(id) {
+    const chat = loadHistory().find(function (c) { return c.id === id; });
+    if (!chat) return;
+    state.chatId = chat.id;
+    state.messages = chat.messages || [];
+    state.streaming = false;
+    setActiveId(chat.id);
+    renderAllMessages();
+    const container = getContainer();
+    if (container) {
+      closeHistoryPanel(container);
+      updateInputState(container);
+      const input = getInputEl(container);
+      if (input) input.focus();
+    }
+  }
+
+  function deleteChat(id) {
+    persistHistory(loadHistory().filter(function (c) { return c.id !== id; }));
+    if (id === state.chatId) {
+      newChat();
+    } else {
+      const container = getContainer();
+      if (container) renderHistoryList(container);
+    }
+  }
+
+  /* -------------------------------------------------- */
+  /*  History panel                                      */
+  /* -------------------------------------------------- */
+
+  function getHistoryPanel(container) {
+    let panel = container.querySelector('.just-os-history-panel');
+    if (panel) return panel;
+
+    panel = document.createElement('div');
+    panel.className = 'just-os-history-panel';
+    panel.style.display = 'none';
+
+    const header = document.createElement('div');
+    header.className = 'just-os-history-header';
+    const back = document.createElement('button');
+    back.type = 'button';
+    back.className = 'just-os-history-back';
+    back.innerHTML = '‹ Back';
+    back.addEventListener('click', function () { closeHistoryPanel(container); });
+    const title = document.createElement('span');
+    title.textContent = 'Chat history';
+    header.appendChild(back);
+    header.appendChild(title);
+    panel.appendChild(header);
+
+    const list = document.createElement('div');
+    list.className = 'just-os-history-list';
+    panel.appendChild(list);
+
+    container.appendChild(panel);
+    return panel;
+  }
+
+  function renderHistoryList(container) {
+    const panel = getHistoryPanel(container);
+    const list = panel.querySelector('.just-os-history-list');
+    list.innerHTML = '';
+
+    const history = loadHistory().sort(function (a, b) { return (b.updatedAt || 0) - (a.updatedAt || 0); });
+    if (!history.length) {
+      const empty = document.createElement('p');
+      empty.className = 'just-os-history-empty';
+      empty.textContent = 'No saved conversations yet.';
+      list.appendChild(empty);
+      return;
+    }
+
+    history.forEach(function (chat) {
+      const item = document.createElement('div');
+      item.className = 'just-os-history-item' + (chat.id === state.chatId ? ' active' : '');
+
+      const open = document.createElement('button');
+      open.type = 'button';
+      open.className = 'just-os-history-open';
+      const t = document.createElement('span');
+      t.className = 'just-os-history-title';
+      t.textContent = chat.title || 'Conversation';
+      const meta = document.createElement('span');
+      meta.className = 'just-os-history-meta';
+      meta.textContent = relativeTime(chat.updatedAt);
+      open.appendChild(t);
+      open.appendChild(meta);
+      open.addEventListener('click', function () { openChat(chat.id); });
+
+      const del = document.createElement('button');
+      del.type = 'button';
+      del.className = 'just-os-history-delete';
+      del.title = 'Delete conversation';
+      del.setAttribute('aria-label', 'Delete conversation');
+      del.innerHTML = '\u{1F5D1}';
+      del.addEventListener('click', function (e) { e.stopPropagation(); deleteChat(chat.id); });
+
+      item.appendChild(open);
+      item.appendChild(del);
+      list.appendChild(item);
+    });
+  }
+
+  function openHistoryPanel(container) {
+    renderHistoryList(container);
+    getHistoryPanel(container).style.display = 'flex';
+  }
+
+  function closeHistoryPanel(container) {
+    const panel = container.querySelector('.just-os-history-panel');
+    if (panel) panel.style.display = 'none';
+  }
+
   /* -------------------------------------------------- */
   /*  Copy response                                      */
   /* -------------------------------------------------- */
 
-  function copyResponse(btn, bubble) {
-    const text = bubble.innerText;
+  function copyResponse(btn, answerText, refs) {
+    let text = answerText;
+    if (refs && refs.length) {
+      text += '\n\nReferences:\n' + formatReferencesText(refs);
+    }
     navigator.clipboard.writeText(text).then(function () {
       const orig = btn.innerHTML;
       btn.innerHTML = '&#x2705;';
@@ -339,14 +517,12 @@
   }
 
   /* -------------------------------------------------- */
-  /*  Reference list                                     */
+  /*  References                                         */
   /* -------------------------------------------------- */
 
-  function buildReferenceList(bubble) {
+  // Pull the (deduplicated) references embedded in a bot message.
+  function extractReferences(bubble) {
     const links = bubble.querySelectorAll('a[data-reference]');
-    if (!links.length) return null;
-
-    // Deduplicate references by URL
     const seen = new Set();
     const refs = [];
     links.forEach(function (link) {
@@ -357,9 +533,26 @@
         refs.push(ref);
       } catch (_) { /* skip bad JSON */ }
     });
+    return refs;
+  }
 
-    if (!refs.length) return null;
+  // Plain-text reference list for the clipboard (full authors + title + URL).
+  function formatReferencesText(refs) {
+    return refs.map(function (ref, i) {
+      const parts = [];
+      if (ref.authors) parts.push(ref.authors.trim());
+      if (ref.title) parts.push(ref.title.trim());
+      if (ref.url) parts.push(ref.url.trim());
+      // Join with ". " but avoid doubling punctuation when a part already ends in one.
+      const body = parts.reduce(function (acc, p) {
+        if (!acc) return p;
+        return acc + (/[.!?]$/.test(acc) ? ' ' : '. ') + p;
+      }, '');
+      return (i + 1) + '. ' + body;
+    }).join('\n');
+  }
 
+  function buildReferenceDetails(refs) {
     const details = document.createElement('details');
     details.className = 'just-os-references';
     details.open = true;
@@ -371,7 +564,6 @@
     const ol = document.createElement('ol');
     refs.forEach(function (ref) {
       const li = document.createElement('li');
-      const parts = [];
 
       if (ref.authors) {
         const authSpan = document.createElement('span');
@@ -397,12 +589,6 @@
     return details;
   }
 
-  function escapeHtml(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
-  }
-
   /* -------------------------------------------------- */
   /*  Widget toggle functions (global)                   */
   /* -------------------------------------------------- */
@@ -450,6 +636,17 @@
 
   window.newJustOSChat = newChat;
 
+  window.toggleJustOSHistory = function () {
+    const container = getContainer();
+    if (!container) return;
+    const panel = container.querySelector('.just-os-history-panel');
+    if (panel && panel.style.display === 'flex') {
+      closeHistoryPanel(container);
+    } else {
+      openHistoryPanel(container);
+    }
+  };
+
   window.dismissJustOS = function () {
     var widget = document.getElementById('just-os-widget');
     if (widget) widget.style.display = 'none';
@@ -519,7 +716,8 @@
     if (sessionStorage.getItem('just-os-dismissed')) {
       var widget = document.getElementById('just-os-widget');
       if (widget) widget.style.display = 'none';
-      return;
+      // The standalone page has its own container, so keep initializing there.
+      if (!document.getElementById('just-os-fullpage')) return;
     }
 
     const container = getContainer();