@veluai/velu 0.2.4 → 0.2.6

package/package.json

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

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

@@ -160,8 +160,42 @@ function tokenizeAnswer(answer) {
   return tokens;
 }
 
+/* A citation's in-site target. Real backend sources carry a `url` (and `path`
+   is a route like "/essentials/code"); the demo's `path` is a fake file path,
+   so those stay inert. */
+function sourceHref(s) {
+  if (s?.url) return s.url;
+  if (s?.path && s.path.startsWith('/')) return s.path;
+  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) {
+  const href = sourceHref(s);
+  if (!href) { e.preventDefault(); return; }
+  if (!onNavigate) return; // no SPA hook → let the browser follow the href
+  try {
+    const u = new URL(href, window.location.origin);
+    if (u.origin === window.location.origin) {
+      e.preventDefault();
+      onNavigate(u.pathname + u.search + u.hash);
+    }
+  } catch { /* malformed — fall back to href */ }
+}
+
 /* Render partial tokens as paragraphs (split on \n\n, single \n → <br>). */
-function renderStream(tokens, sources) {
+function renderStream(tokens, sources, onNavigate) {
   const paragraphs = [[]];
   for (const tk of tokens) {
     if (tk.kind === 't' && tk.v.includes('\n\n')) {
@@ -179,13 +213,14 @@ function renderStream(tokens, sources) {
     <p key={pi}>
       {para.map((tk, i) => {
         if (tk.kind === 'cite') {
+          const src = sources?.find((s) => s.num === tk.n);
           return (
             <a
               key={i}
               className="velu-chatbot__cite"
-              href="#"
-              onClick={(e) => e.preventDefault()}
-              title={sources?.find((s) => s.num === tk.n)?.title}
+              href={sourceHref(src) || '#'}
+              onClick={(e) => onSourceClick(e, src, onNavigate)}
+              title={citeTitle(src)}
             >
               {tk.n}
             </a>
@@ -331,6 +366,7 @@ function AiMsg({
   onFollowup,
   messageId,
   onFeedback,
+  onNavigate,
 }) {
   const thinking = tokens.length === 0;
   const [vote, setVote] = useState(null); // 'up' | 'down' | null
@@ -367,7 +403,7 @@ function AiMsg({
 
       {!thinking && (
         <div className="velu-chatbot__answer">
-          {renderStream(tokens, sources)}
+          {renderStream(tokens, sources, onNavigate)}
           {streaming && <span className="velu-chatbot__caret" />}
 
           {!streaming && sources?.length > 0 && (
@@ -377,12 +413,12 @@ function AiMsg({
                 <a
                   key={s.num}
                   className="velu-chatbot__source"
-                  href="#"
-                  onClick={(e) => e.preventDefault()}
+                  href={sourceHref(s) || '#'}
+                  onClick={(e) => onSourceClick(e, s, onNavigate)}
                 >
                   <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>
@@ -489,6 +525,7 @@ export default function Chatbot({
   onClose,
   ask,
   onFeedback,
+  onNavigate,
   className = '',
   ...rest
 }) {
@@ -741,6 +778,7 @@ export default function Chatbot({
                   streaming={m.streaming}
                   messageId={m.messageId}
                   onFeedback={onFeedback}
+                  onNavigate={onNavigate}
                   onFollowup={(f) => send(f)}
                 />
               ),

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

@@ -1558,7 +1558,7 @@ function DocsPage() {
               approaches (see IntersectionObserver above). */}
           {/* Ask-a-question bar — opens the AI chatbot, which runs on the
               deployed site. Hidden in the local dev preview. */}
-          {!IS_DEV_PREVIEW && (
+          {!IS_DEV_PREVIEW && !chatOpen && (
             <AskBar
               onSubmit={askAI}
               style={{
@@ -1623,6 +1623,21 @@ function DocsPage() {
         onClose={() => setChatOpen(false)}
         ask={assistant?.ask}
         onFeedback={assistant?.sendFeedback}
+        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>
   );