@veluai/velu 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {

package/runtime/velu-ui/base.css

@@ -243,16 +243,20 @@
   margin-block-start: var(--s5);
 }
 
-/* Sidebars / TOC scroll container: discreet thin scrollbar with a
-   tokenised colour in every state.
+/* Discreet thin scrollbar with a tokenised colour in every state — applied
+   GLOBALLY (the `*` selector) so every scrollable element inherits it by
+   default: the chatbot, dialogs, and any future component, with no
+   per-component opt-in. Component-specific scrollbar rules win via
+   specificity (e.g. the nav/TOC reveal-on-hover overrides below).
+   `.velu-hide-scrollbar` stays as an explicit alias for existing markup.
 
-   No transitions: Firefox doesn't honour CSS transitions on
-   `scrollbar-color` consistently, and the in-between interpolation +
-   Firefox's auto-derived hover/active colours can flash a yellow/amber
-   accent (it picks an OS / system accent when interpolating). Hard
-   switches avoid that. Same reason every WebKit thumb pseudo-state is
-   set explicitly — otherwise Chromium can fall back to the Windows 11
-   system accent on hover. */
+   No transitions: Firefox doesn't honour CSS transitions on `scrollbar-color`
+   consistently, and the in-between interpolation + its auto-derived
+   hover/active colours can flash a yellow/amber accent (an OS / system accent
+   when interpolating). Hard switches avoid that. Same reason every WebKit
+   thumb pseudo-state is set explicitly — otherwise Chromium can fall back to
+   the Windows 11 system accent on hover. */
+*,
 .velu-hide-scrollbar {
   scrollbar-width: thin;
   /* Single colour both at rest and on hover. Firefox auto-darkens on
@@ -260,17 +264,22 @@
      derived shade in the same family (no yellow flash). */
   scrollbar-color: var(--border-color) transparent;
 }
+*::-webkit-scrollbar,
 .velu-hide-scrollbar::-webkit-scrollbar {
   inline-size: 6px;
   block-size: 6px;
 }
+*::-webkit-scrollbar-track,
 .velu-hide-scrollbar::-webkit-scrollbar-track {
   background: transparent;
 }
+*::-webkit-scrollbar-thumb,
 .velu-hide-scrollbar::-webkit-scrollbar-thumb {
   background: var(--border-color);
   border-radius: 999px;
 }
+*::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:active,
 .velu-hide-scrollbar::-webkit-scrollbar-thumb:hover,
 .velu-hide-scrollbar::-webkit-scrollbar-thumb:active {
   background: var(--muted-color);

package/runtime/velu-ui/components/Chatbot.jsx

@@ -287,7 +287,22 @@ function ChatHeader({ onClose, onNew, onHistory, historyOpen }) {
 }
 
 /* ── History overlay ────────────────────────────────────────────────── */
-function HistoryPanel({ onPick, onClose }) {
+
+/* "Today, 10:24" / "Yesterday" / "Apr 28" for a conversation timestamp. */
+function whenLabel(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '';
+  const startOfDay = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate());
+  const days = Math.round((startOfDay(new Date()) - startOfDay(d)) / 86400000);
+  if (days <= 0) {
+    return `Today, ${d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
+  }
+  if (days === 1) return 'Yesterday';
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+
+function HistoryPanel({ items, loading, onPick, onClose }) {
   return (
     <div className="velu-chatbot__history">
       <Cluster
@@ -307,17 +322,23 @@ function HistoryPanel({ onPick, onClose }) {
         </button>
       </Cluster>
       <Stack as="div" space="var(--s-5)" className="velu-chatbot__history-list">
-        {HISTORY.map((h) => (
-          <button
-            key={h.id}
-            type="button"
-            className="velu-chatbot__history-item"
-            onClick={() => onPick(h)}
-          >
-            <span className="velu-chatbot__history-item-title">{h.title}</span>
-            <span className="velu-chatbot__history-item-when">{h.when}</span>
-          </button>
-        ))}
+        {loading ? (
+          <span className="velu-chatbot__history-empty">Loading…</span>
+        ) : items.length === 0 ? (
+          <span className="velu-chatbot__history-empty">No conversations yet.</span>
+        ) : (
+          items.map((h) => (
+            <button
+              key={h.id}
+              type="button"
+              className="velu-chatbot__history-item"
+              onClick={() => onPick(h)}
+            >
+              <span className="velu-chatbot__history-item-title">{h.title}</span>
+              <span className="velu-chatbot__history-item-when">{h.when}</span>
+            </button>
+          ))
+        )}
       </Stack>
     </div>
   );
@@ -526,12 +547,16 @@ export default function Chatbot({
   ask,
   onFeedback,
   onNavigate,
+  listHistory,
+  loadConversation,
   className = '',
   ...rest
 }) {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState('');
   const [historyOpen, setHistoryOpen] = useState(false);
+  const [history, setHistory] = useState([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
   const bodyRef = useRef(null);
   const streamingRef = useRef(false);
   const lastSeedRef = useRef(undefined);
@@ -567,6 +592,60 @@ export default function Chatbot({
     streamingRef.current = false;
   }, []);
 
+  // Real history: fetch the visitor's conversations when the panel opens.
+  // Without a backend (dev preview) the canned demo entries show instead.
+  useEffect(() => {
+    if (!historyOpen) return;
+    if (!listHistory) {
+      setHistory(HISTORY.map((h) => ({ ...h, demo: true })));
+      return;
+    }
+    let stale = false;
+    setHistoryLoading(true);
+    listHistory()
+      .then((items) => {
+        if (stale) return;
+        setHistory(items.map((c) => ({
+          id: c.conversationId,
+          title: c.title,
+          when: whenLabel(c.updatedAt),
+          conversation: c,
+        })));
+      })
+      .catch(() => { if (!stale) setHistory([]); })
+      .finally(() => { if (!stale) setHistoryLoading(false); });
+    return () => { stale = true; };
+  }, [historyOpen, listHistory]);
+
+  // Resume a past conversation: load its turns into the panel and thread the
+  // conversation id so follow-up asks continue it.
+  const openConversation = useCallback(
+    async (item) => {
+      setHistoryOpen(false);
+      if (!item.conversation || !loadConversation) return; // demo entry
+      cancelInFlight();
+      try {
+        const { conversationId, messages: msgs } = await loadConversation(item.conversation);
+        convoRef.current = conversationId;
+        setMessages(msgs.map((m) =>
+          m.role === 'user'
+            ? { role: 'user', text: m.content }
+            : {
+                role: 'ai',
+                tokens: textToTokens(m.content),
+                sources: m.citations || [],
+                followups: [],
+                streaming: false,
+                messageId: m.messageId,
+              },
+        ));
+      } catch {
+        /* keep the current chat if the load fails */
+      }
+    },
+    [loadConversation, cancelInFlight],
+  );
+
   const send = useCallback(
     async (text) => {
       const prompt = String(text ?? '').trim();
@@ -756,8 +835,10 @@ export default function Chatbot({
 
       {historyOpen && (
         <HistoryPanel
+          items={history}
+          loading={historyLoading}
           onClose={() => setHistoryOpen(false)}
-          onPick={() => setHistoryOpen(false)}
+          onPick={openConversation}
         />
       )}
 

package/runtime/velu-ui/components/chatbot.css

@@ -237,6 +237,11 @@
   font-weight: var(--weight-light);
   color: var(--muted-color);
 }
+.velu-chatbot__history-empty {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+  padding: var(--s-3);
+}
 
 /* ── Body ───────────────────────────────────────────────────────────── */
 .velu-chatbot__body {

package/runtime/velu-ui/lib/docs-assistant.js

@@ -195,7 +195,56 @@ export function createDocsAssistant({ apiBase, host } = {}) {
     });
   }
 
-  return { ask, sendFeedback };
+  // The visitor's recent conversations on this site (the history panel).
+  // Returns [{ conversationId, token, title, updatedAt }], newest first.
+  async function listConversations() {
+    await bootstrap();
+    const res = await fetch(`${root}/conversations`, {
+      credentials: 'include',
+      headers: headers(),
+    });
+    if (!res.ok) throw new Error(`ask-ai: conversations ${res.status}`);
+    const { conversations } = await res.json();
+    return (conversations || []).map((c) => ({
+      conversationId: c.conversation_id,
+      token: c.conversation_token,
+      title: c.title,
+      lastSeq: c.last_seq,
+      updatedAt: c.updated_at,
+    }));
+  }
+
+  // Load a past conversation's messages (to resume it in the panel).
+  // Returns { conversationId, messages: [{ role, content, citations,
+  // messageId }] } with citations already renumbered to the Chatbot's Source
+  // shape. Also records the conversation's last seq so a follow-up `ask` on
+  // it streams from the right offset instead of replaying history.
+  async function loadConversation({ conversationId, token, lastSeq }) {
+    const res = await fetch(`${root}/conversations/${conversationId}`, {
+      credentials: 'include',
+      headers: headers({ Authorization: `Bearer ${token}` }),
+    });
+    if (!res.ok) throw new Error(`ask-ai: conversation ${res.status}`);
+    const data = await res.json();
+    let maxSeq = lastSeq ?? 0;
+    const messages = (data.messages || []).map((m) => {
+      if (m.seq != null) maxSeq = Math.max(maxSeq, m.seq);
+      if (m.role !== 'assistant') {
+        return { role: m.role, content: m.content, messageId: m.id };
+      }
+      const renum = renumberCitations(m.content || '', mapCitations(m.citations));
+      return {
+        role: 'assistant',
+        content: renum.content,
+        citations: renum.citations,
+        messageId: m.id,
+      };
+    });
+    lastSeqByConv.set(conversationId, Math.max(lastSeqByConv.get(conversationId) ?? 0, maxSeq));
+    return { conversationId, messages };
+  }
+
+  return { ask, sendFeedback, listConversations, loadConversation };
 }
 
 export default createDocsAssistant;

package/src/runtime/App.jsx

@@ -1623,6 +1623,8 @@ function DocsPage() {
         onClose={() => setChatOpen(false)}
         ask={assistant?.ask}
         onFeedback={assistant?.sendFeedback}
+        listHistory={assistant?.listConversations}
+        loadConversation={assistant?.loadConversation}
         onNavigate={(to) => {
           navigate(to);
           // After the destination page mounts, scroll to the cited section