@veluai/velu 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "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

@@ -169,6 +169,16 @@ function sourceHref(s) {
   return null;
 }
 
+/* A readable label for a source: the section heading if present, else a title
+   derived from the route (e.g. "/essentials/settings" → "Settings"). */
+function citeTitle(s) {
+  if (s?.title) return s.title;
+  const path = (s?.path || '').replace(/[#?].*$/, '');
+  const seg = path.split('/').filter(Boolean).pop();
+  if (!seg) return 'Documentation';
+  return seg.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
 /* Source click: SPA-navigate same-origin targets via onNavigate (keeps the chat
    panel open + scrolls to the heading); otherwise let the <a href> navigate. */
 function onSourceClick(e, s, onNavigate) {
@@ -210,7 +220,7 @@ function renderStream(tokens, sources, onNavigate) {
               className="velu-chatbot__cite"
               href={sourceHref(src) || '#'}
               onClick={(e) => onSourceClick(e, src, onNavigate)}
-              title={src?.title}
+              title={citeTitle(src)}
             >
               {tk.n}
             </a>
@@ -408,7 +418,7 @@ function AiMsg({
                 >
                   <span className="velu-chatbot__source-num">{s.num}</span>
                   <span className="velu-chatbot__source-meta">
-                    <span className="velu-chatbot__source-title">{s.title}</span>
+                    <span className="velu-chatbot__source-title">{citeTitle(s)}</span>
                     <span className="velu-chatbot__source-path">{s.path}</span>
                   </span>
                 </a>

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

@@ -61,6 +61,31 @@ function mapCitations(cits) {
   }));
 }
 
+// Renumber cited sources 1,2,3… in order of first appearance and rewrite the
+// [n] markers in the text to match. The backend keeps the raw RAG ranks (the
+// LLM may cite [1] and [5]); this makes them sequential and drops uncited ones.
+function renumberCitations(content, citations) {
+  const text = content || '';
+  const order = [];
+  const re = /\[(\d+)\]/g;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    const n = Number(m[1]);
+    if (!order.includes(n)) order.push(n);
+  }
+  if (!order.length) return { content: text, citations: [] };
+  const remap = new Map(order.map((old, i) => [old, i + 1]));
+  const newContent = text.replace(/\[(\d+)\]/g, (full, d) =>
+    remap.has(Number(d)) ? `[${remap.get(Number(d))}]` : full,
+  );
+  const byNum = new Map((citations || []).map((c) => [c.num, c]));
+  const newCitations = order
+    .map((old) => byNum.get(old))
+    .filter(Boolean)
+    .map((c, i) => ({ ...c, num: i + 1 }));
+  return { content: newContent, citations: newCitations };
+}
+
 export function createDocsAssistant({ apiBase, host } = {}) {
   const base = trimSlash(apiBase);
   if (!base) return null;
@@ -130,9 +155,10 @@ export function createDocsAssistant({ apiBase, host } = {}) {
           }
           if (event === 'assistant.completed') {
             const m = data?.message || {};
+            const renum = renumberCitations(m.content || '', mapCitations(m.citations));
             yield {
-              delta: m.content || '',
-              citations: mapCitations(m.citations),
+              delta: renum.content,
+              citations: renum.citations,
               messageId: m.id,
               conversationId: convId,
             };

package/src/runtime/App.jsx

@@ -1623,7 +1623,21 @@ function DocsPage() {
         onClose={() => setChatOpen(false)}
         ask={assistant?.ask}
         onFeedback={assistant?.sendFeedback}
-        onNavigate={navigate}
+        onNavigate={(to) => {
+          navigate(to);
+          // After the destination page mounts, scroll to the cited section
+          // (its heading id) — or the top of the page when there's no anchor.
+          const hash = to.includes('#') ? to.slice(to.indexOf('#') + 1) : '';
+          let tries = 0;
+          const go = () => {
+            if (hash) {
+              if (document.getElementById(hash)) { scrollTo(hash); return; }
+              if (tries++ < 10) { setTimeout(go, 60); return; }
+            }
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          };
+          setTimeout(go, 50);
+        }}
       />
     </div>
   );