Add fully offline RAG for local mode

Extends RAG mode to work with zero network calls when combined with
local (in-browser WebLLM) mode — documents are chunked, embedded, and
retrieved entirely on-device, so a visitor can do private document
Q&A with no internet connection and nothing ever leaving the browser.

- Embeddings: WebLLM (already used for local chat) doesn't do
embeddings, so this pulls in a second, much smaller model via
Transformers.js (Xenova/all-MiniLM-L6-v2, ~23MB quantized) — lazy-
loaded the same way the local chat model already is.
- Storage: IndexedDB instead of the server's KV — persists
indefinitely (unlike the server's 24h TTL, since this is the
visitor's own device with no server cost to bound), cleaned up only
when a saved conversation is deleted outright.
- Retrieval: the exact same chunking/cosine-similarity logic as the
server path, ported as plain dependency-free JS, injected into the
local model's prompt for that turn only (never persisted into
history).
- Local mode's existing document decline now only applies to Chat
mode's one-shot analysis (still genuinely unsupported by the tiny
local model) — RAG-mode documents are fully supported offline.

index.html

@@ -346,7 +346,7 @@
       <div class="cap-title">🖥️ Local AI mode — <span class="info-term" id="localLimitedTerm" tabindex="0" role="button" aria-expanded="false" aria-describedby="localLimitedTooltip">limited<div class="tooltip-bubble" id="localLimitedTooltip" role="tooltip">
         <ol>
           <li><strong>Smaller model</strong> — it's a 1B-parameter model, chosen specifically to run smoothly on phones and slower devices (WebGPU memory is often tight on mobile). A real capability gap versus the server's best ("Smart", 8B), but a much smaller, faster download than a bigger model would be.</li>
-          <li><strong>No images</strong> — it's text-only. Attaching a photo/document in local mode gets declined with a message telling you to switch back to the server.</li>
+          <li><strong>No images, no one-off documents</strong> — it's text-only, and can't analyze a document in a single pass. Switch to RAG mode to work with a document offline instead — that's fully supported, indexed and searched entirely on your device.</li>
           <li><strong>No live data</strong> — the server injects real-time weather, news, currency rates, holidays, and general web facts into its answers. Local mode has none of that — it's just the raw model guessing from its own training, so it'll be wrong or evasive on anything time-sensitive ("what's the weather," "who won yesterday," etc.).</li>
           <li><strong>No date awareness</strong> — the server also tells the model today's actual date; local mode doesn't get that either, so it may not know what day it is.</li>
           <li><strong>Speed/quality depend on your device</strong> — no server-grade GPU behind it, just whatever's in your laptop/phone.</li>
@@ -826,7 +826,10 @@ fileInput.addEventListener('change', async () => {
     } else if (file.type === 'application/pdf' || /\.pdf$/i.test(file.name)) {
       const text = await extractPdfText(file);
       if (attachmentMode === 'rag') {
-        await ingestDocumentForRag(text, file.name);
+        await (localModeActive ? ingestDocumentForOfflineRag(text, file.name) : ingestDocumentForRag(text, file.name));
+      } else if (localModeActive) {
+        alert("Local AI mode can't analyze a one-off document — switch to RAG mode to index it offline, or switch back to the server.");
+        clearAttachment();
       } else {
         pendingOneShotDoc = { text: text.slice(0, MAX_ONE_SHOT_DOC_CHARS), name: file.name };
         showAttachmentPreview(file.name);
@@ -834,7 +837,10 @@ fileInput.addEventListener('change', async () => {
     } else if (file.type.startsWith('text/') || /\.(txt|md|csv|json)$/i.test(file.name)) {
       const text = await fileToText(file);
       if (attachmentMode === 'rag') {
-        await ingestDocumentForRag(text, file.name);
+        await (localModeActive ? ingestDocumentForOfflineRag(text, file.name) : ingestDocumentForRag(text, file.name));
+      } else if (localModeActive) {
+        alert("Local AI mode can't analyze a one-off document — switch to RAG mode to index it offline, or switch back to the server.");
+        clearAttachment();
       } else {
         pendingOneShotDoc = { text: text.slice(0, MAX_ONE_SHOT_DOC_CHARS), name: file.name };
         showAttachmentPreview(file.name);
@@ -1250,6 +1256,7 @@ function deleteConversation(id) {
   const convos = loadConversations();
   delete convos[id];
   saveConversations(convos);
+  deleteOfflineRagChunks(id);
   if (id === activeConvoId) {
     startNewChat();
   } else {
@@ -1826,6 +1833,178 @@ async function loadLocalEngine() {
   return localEngineLoadPromise;
 }
 
+// --- Offline RAG (local mode + RAG attachment mode together) -----------
+// Mirrors the server-side RAG feature (chunk -> embed -> store -> cosine-
+// similarity retrieve -> inject as context) entirely client-side, for
+// visitors who want document Q&A with zero network calls at all. WebLLM
+// (already used for local chat) doesn't do embeddings, so this pulls in
+// a second, much smaller model via Transformers.js — the same lazy,
+// load-once-then-cached pattern as loadLocalEngine() above. Storage uses
+// IndexedDB (not the server's KV) since this needs to work fully
+// offline and never leave the device.
+let localEmbedder = null;
+let localEmbedderLoadPromise = null;
+async function loadLocalEmbedder() {
+  if (localEmbedder) return localEmbedder;
+  if (localEmbedderLoadPromise) return localEmbedderLoadPromise;
+  localEmbedderLoadPromise = (async () => {
+    const { pipeline } = await import('https://esm.run/@huggingface/transformers');
+    // ~23MB quantized — a much smaller one-time download than the chat
+    // model, and WebGPU is already confirmed available by this point
+    // (local mode can't be entered at all without it, see HAS_WEBGPU).
+    const extractor = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', { device: 'webgpu' });
+    localEmbedder = extractor;
+    return extractor;
+  })();
+  return localEmbedderLoadPromise;
+}
+async function embedLocalTexts(texts) {
+  const extractor = await loadLocalEmbedder();
+  const output = await extractor(texts, { pooling: 'mean', normalize: true });
+  return output.tolist();
+}
+
+// Same chunking/similarity logic as the server's chunkText/
+// cosineSimilarity — kept as plain, dependency-free JS specifically so
+// it's trivially portable between the two, not because of any DOM/
+// browser-specific need.
+const OFFLINE_RAG_CHUNK_SIZE = 800;
+const OFFLINE_RAG_CHUNK_OVERLAP = 100;
+const OFFLINE_RAG_TOP_K = 4;
+function chunkTextOffline(text, chunkSize, overlap) {
+  const chunks = [];
+  let start = 0;
+  while (start < text.length) {
+    let end = Math.min(start + chunkSize, text.length);
+    if (end < text.length) {
+      const lastSpace = text.lastIndexOf(' ', end);
+      if (lastSpace > start + chunkSize * 0.5) end = lastSpace;
+    }
+    const piece = text.slice(start, end).trim();
+    if (piece) chunks.push(piece);
+    if (end >= text.length) break;
+    start = Math.max(end - overlap, start + 1);
+  }
+  return chunks;
+}
+function cosineSimilarityOffline(a, b) {
+  let dot = 0, magA = 0, magB = 0;
+  for (let i = 0; i < a.length; i++) {
+    dot += a[i] * b[i];
+    magA += a[i] * a[i];
+    magB += b[i] * b[i];
+  }
+  return dot / (Math.sqrt(magA) * Math.sqrt(magB) || 1);
+}
+
+const OFFLINE_RAG_DB_NAME = 'noxOfflineRag';
+const OFFLINE_RAG_STORE = 'chunks';
+function openOfflineRagDb() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(OFFLINE_RAG_DB_NAME, 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(OFFLINE_RAG_STORE)) {
+        const store = db.createObjectStore(OFFLINE_RAG_STORE, { keyPath: 'id', autoIncrement: true });
+        store.createIndex('convoId', 'convoId', { unique: false });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+async function addOfflineRagChunks(convoId, entries) {
+  const db = await openOfflineRagDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(OFFLINE_RAG_STORE, 'readwrite');
+    const store = tx.objectStore(OFFLINE_RAG_STORE);
+    for (const entry of entries) store.add({ convoId, ...entry });
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+async function getOfflineRagChunks(convoId) {
+  const db = await openOfflineRagDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(OFFLINE_RAG_STORE, 'readonly');
+    const index = tx.objectStore(OFFLINE_RAG_STORE).index('convoId');
+    const req = index.getAll(convoId);
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+// Unlike the server's KV (24h TTL, a shared/costed resource), IndexedDB
+// is the visitor's own device with no server cost — so offline chunks
+// deliberately persist indefinitely, same as saved conversations
+// themselves do, rather than expiring. The one real cleanup needed is
+// when a saved conversation is deleted outright (see deleteConversation),
+// so its documents don't sit there orphaned forever with nothing that
+// can ever reference them again.
+async function deleteOfflineRagChunks(convoId) {
+  try {
+    const db = await openOfflineRagDb();
+    await new Promise((resolve, reject) => {
+      const tx = db.transaction(OFFLINE_RAG_STORE, 'readwrite');
+      const index = tx.objectStore(OFFLINE_RAG_STORE).index('convoId');
+      const req = index.openCursor(convoId);
+      req.onsuccess = () => {
+        const cursor = req.result;
+        if (cursor) { cursor.delete(); cursor.continue(); }
+      };
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  } catch {}
+}
+
+// Mirrors ingestDocumentForRag (the server path) exactly in shape and UX,
+// just routed to IndexedDB + the local embedder instead of a fetch() —
+// this is what the fileInput handler below calls when RAG mode AND
+// local mode are both active at once.
+async function ingestDocumentForOfflineRag(text, name) {
+  if (!activeConvoId) activeConvoId = makeConvoId();
+  attachPreview.style.display = 'flex';
+  attachPreview.innerHTML = `<span>📄 Indexing ${name} (offline)…</span>`;
+  try {
+    const rawChunks = chunkTextOffline(text, OFFLINE_RAG_CHUNK_SIZE, OFFLINE_RAG_CHUNK_OVERLAP);
+    if (!rawChunks.length) throw new Error('empty document');
+    const vectors = await embedLocalTexts(rawChunks);
+    const entries = rawChunks.map((chunkText, i) => ({ text: chunkText, name, vector: vectors[i] }));
+    await addOfflineRagChunks(activeConvoId, entries);
+    ragDocumentNames.push(name);
+    attachPreview.innerHTML = `<span>📄 ${name} (indexed offline)</span><button type="button" id="clearAttach" aria-label="Dismiss">×</button>`;
+    document.getElementById('clearAttach').addEventListener('click', clearAttachment);
+  } catch (err) {
+    console.error(err);
+    alert("Couldn't index that document right now — please try again in a moment.");
+    clearAttachment();
+  }
+}
+
+// Called from requestLocalReply below — same idea as the server's own
+// ragNote injection, just entirely local: nothing here ever touches the
+// network.
+async function retrieveOfflineRagContext(convoId, question) {
+  if (!convoId) return '';
+  let stored;
+  try {
+    stored = await getOfflineRagChunks(convoId);
+  } catch {
+    return '';
+  }
+  if (!stored || !stored.length) return '';
+  try {
+    const [queryVector] = await embedLocalTexts([question]);
+    const scored = stored.map((entry) => ({ ...entry, score: cosineSimilarityOffline(queryVector, entry.vector) }));
+    scored.sort((a, b) => b.score - a.score);
+    const top = scored.slice(0, OFFLINE_RAG_TOP_K);
+    const excerptText = top.map((c, i) => `[Excerpt ${i + 1}, from "${c.name}"]\n${c.text}`).join('\n\n');
+    return `\n\nRELEVANT EXCERPTS FROM THE VISITOR'S UPLOADED DOCUMENT(S) (retrieved just now based on their question — use these to answer if they're actually relevant, and cite the document name; if these excerpts don't actually answer the question, say so honestly rather than guessing or falling back to unrelated training knowledge):\n${excerptText}`;
+  } catch {
+    return '';
+  }
+}
+
 // Which of the banner's three mutually-exclusive views is showing —
 // the outer .cap-banner container itself just handles positioning/padding.
 function showBannerView(view) {
@@ -2280,7 +2459,16 @@ async function requestLocalReply(loadingBubble, userMessageText) {
   }
   try {
     const engine = await loadLocalEngine();
-    const chunks = await engine.chat.completions.create({ messages: history, stream: true });
+    // Injected only into THIS call's messages, never persisted into
+    // `history` itself — same reasoning as the server's own ragNote:
+    // the retrieved excerpts are only ever relevant to the turn that
+    // triggered retrieval, not something to permanently bake into every
+    // future message.
+    const ragContext = await retrieveOfflineRagContext(activeConvoId, userMessageText);
+    const messagesForEngine = ragContext
+      ? [{ ...history[0], content: history[0].content + ragContext }, ...history.slice(1)]
+      : history;
+    const chunks = await engine.chat.completions.create({ messages: messagesForEngine, stream: true });
     let full = '';
     let started = false;
     for await (const chunk of chunks) {
@@ -2321,17 +2509,17 @@ async function requestReply(imageBase64) {
   const userMessageText = [...history].reverse().find((m) => m.role === 'user')?.content || '';
 
   if (localModeActive) {
-    // Local mode runs entirely in the browser via WebLLM, with zero calls
-    // to the server — it has no way to reach the RAG index at all, even
-    // if it wanted to. And a chat-mode one-shot document is folded into
-    // the message content as a "[Attached file: ...]" block with the full
-    // extracted text, which the tiny local model isn't remotely equipped
-    // to process either (real report: it produced total gibberish when
-    // handed a document this way). Both must be declined exactly like
-    // images are, not silently attempted with the document ignored.
-    if (imageBase64 || ragDocumentNames.length > 0 || /\[Attached file:/.test(userMessageText)) {
+    // Local mode still can't handle images or a one-shot document dump
+    // (a chat-mode attachment folded into the message as a "[Attached
+    // file: ...]" block with the full extracted text) — the tiny local
+    // model isn't remotely equipped for that (real report: it produced
+    // total gibberish when handed a document this way). RAG-mode
+    // documents are fine now, though: those get retrieved from the
+    // offline (IndexedDB) index inside requestLocalReply itself, not
+    // stuffed into the message here at all.
+    if (imageBase64 || /\[Attached file:/.test(userMessageText)) {
       loadingBubble.parentElement.classList.remove('loading');
-      loadingBubble.textContent = "Local AI mode can't read images or documents — remove the attachment, or switch back to the server to send it.";
+      loadingBubble.textContent = "Local AI mode can't read images or one-off documents — remove the attachment, switch to RAG mode to index it offline, or switch back to the server.";
       scrollToBottom();
       return;
     }