@veluai/velu 0.2.4 → 0.2.5

package/package.json

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

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

@@ -160,8 +160,32 @@ 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;
+}
+
+/* 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 +203,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={src?.title}
             >
               {tk.n}
             </a>
@@ -331,6 +356,7 @@ function AiMsg({
   onFollowup,
   messageId,
   onFeedback,
+  onNavigate,
 }) {
   const thinking = tokens.length === 0;
   const [vote, setVote] = useState(null); // 'up' | 'down' | null
@@ -367,7 +393,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,8 +403,8 @@ 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">
@@ -489,6 +515,7 @@ export default function Chatbot({
   onClose,
   ask,
   onFeedback,
+  onNavigate,
   className = '',
   ...rest
 }) {
@@ -741,6 +768,7 @@ export default function Chatbot({
                   streaming={m.streaming}
                   messageId={m.messageId}
                   onFeedback={onFeedback}
+                  onNavigate={onNavigate}
                   onFollowup={(f) => send(f)}
                 />
               ),

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,7 @@ function DocsPage() {
         onClose={() => setChatOpen(false)}
         ask={assistant?.ask}
         onFeedback={assistant?.sendFeedback}
+        onNavigate={navigate}
       />
     </div>
   );