Chat: instant answers from the knowledge base, AI download in the background with consent, auto-start when stored, rewrite with AI

app/renderer/knowledge.js

@@ -11,7 +11,7 @@ export const CHAT_SYSTEM_PROMPT = 'You are the Devseis security assistant. You h
 const STOP = new Set('a an and are as at be by can do does for from has have how i if in is it its me my of on or should so that the their them this to was what when where which who why will with you your'.split(' '));
 // Words people use -> words the knowledge base uses.
 const SYNONYMS = {
-  filevault: 'encryption disk', bitlocker: 'encryption disk', luks: 'encryption disk', encrypt: 'encryption', encrypted: 'encryption',
+  filevault: 'encryption', bitlocker: 'encryption', luks: 'encryption', encrypt: 'encryption', encrypted: 'encryption',
   antivirus: 'malware antivirus', virus: 'malware', defender: 'malware antivirus defender', xprotect: 'malware', clamav: 'malware',
   passcode: 'passcode screen lock', pin: 'passcode pin screen lock', autolock: 'auto lock screen timeout', lock: 'lock screen',
   password: 'password', admin: 'administrator', administrator: 'administrator', sudo: 'administrator', root: 'administrator rooted',
@@ -71,6 +71,7 @@ export class Knowledge {
   // Top-k passages (BM25), preferring the OS the question names, else the device's OS.
   search(question, { k = 4, os = null } = {}) {
     const target = osInQuestion(question) || os;
+    const wantsOn = /\b(turn on|switch on|enable|activate|set up|setup)\b/i.test(question);
     const q = tokens(question, true);
     const N = this.docs.length, k1 = 1.4, b = 0.75;
     const scores = this.docs.map((d, i) => {
@@ -82,6 +83,7 @@ export class Knowledge {
       }
       const c = this.chunks[i];
       if (target && c.os) s *= c.os === target ? 1.6 : 0.45;
+      if (wantsOn && c.check && /\.enabled$/.test(c.check)) s *= 1.35;  // "turn on X" -> the X-is-on check
       return { i, s };
     });
     return scores.filter(x => x.s > 0).sort((a, b) => b.s - a.s || a.i - b.i).slice(0, k).map(x => this.chunks[x.i]);

chat/chat.css

@@ -97,3 +97,11 @@ main { flex: 1; overflow-y: auto; padding: 18px 14px 8px; }
 .option.recommended { border: 2px solid var(--accent); }
 .link-btn { border: 0; background: transparent; color: var(--muted); text-decoration: underline; padding: 6px 0; }
 @media (max-width: 560px) { .brand span { display: none; } .audit-btn { padding: 8px 12px; } .hero-sub { font-size: 16px; } }
+
+.ai-chip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 6px 11px; font-size: 13px; white-space: nowrap; }
+.ai-chip[data-state="ready"] { border-color: var(--ok); color: var(--ok); }
+.ai-chip[data-state="loading"] { border-color: var(--accent-border); color: var(--accent); }
+.ai-card { text-align: left; background: var(--panel); border: 2px solid var(--accent-border); border-radius: 16px; padding: 14px 16px; margin: 0 auto 16px; max-width: 600px; font-size: 15px; }
+.ai-card .btn-row { margin-top: 10px; }
+.quick-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
+@media (max-width: 560px) { .ai-chip { padding: 6px 8px; font-size: 12px; } }

chat/chat.js

@@ -22,19 +22,45 @@ function newChat() {
 }
 
 // ---------- model ----------
-async function getEngine() {
-  if (state.engine !== null || state.enginePromise) return state.enginePromise || state.engine;
+// The model never blocks a question: until it is ready, answers come straight from the knowledge base.
+// It downloads in the background after the user agrees once (about 1 GB), and starts by itself when already stored.
+const AI_CONSENT = 'devseis.aiConsent';
+let webllmPromise = null;
+const loadWebllm = () => (webllmPromise ||= import(WEBLLM_URL));
+
+async function modelChoice() {
+  if (!('gpu' in navigator)) throw new Error('This browser has no WebGPU');
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) throw new Error('No WebGPU graphics adapter');
+  const quant = adapter.features.has('shader-f16') ? 'q4f16_1' : 'q4f32_1';
+  const webllm = await loadWebllm();
+  const base = webllm.prebuiltAppConfig.model_list.find(m => m.model_id === `Qwen2.5-1.5B-Instruct-${quant}-MLC`);
+  const v = state.config?.chat?.version;
+  const custom = v ? { ...base, model: `https://huggingface.co/Devseis/endpoint-auditor-1.5b-${quant}-MLC/resolve/${v}/`, model_id: `devseis-assistant-1.5b-${v}-${quant}` } : null;
+  const appConfig = { ...webllm.prebuiltAppConfig, model_list: custom ? [...webllm.prebuiltAppConfig.model_list, custom] : webllm.prebuiltAppConfig.model_list };
+  return { webllm, base, custom, appConfig, v };
+}
+
+// Is the model already stored on this device (no download needed)?
+async function modelCached() {
+  try {
+    const { webllm, base, custom, appConfig } = await modelChoice();
+    return await webllm.hasModelInCache((custom || base).model_id, appConfig);
+  } catch { return false; }
+}
+
+function getEngine() {
+  if (state.engine !== null || state.enginePromise) return state.enginePromise || Promise.resolve(state.engine);
+  state.loading = true; state.progress = 0; aiChip(); render();
   state.enginePromise = (async () => {
-    if (!('gpu' in navigator)) throw new Error('This browser has no WebGPU');
-    const adapter = await navigator.gpu.requestAdapter();
-    if (!adapter) throw new Error('No WebGPU graphics adapter');
-    const quant = adapter.features.has('shader-f16') ? 'q4f16_1' : 'q4f32_1';
-    const webllm = await import(WEBLLM_URL);
-    const base = webllm.prebuiltAppConfig.model_list.find(m => m.model_id === `Qwen2.5-1.5B-Instruct-${quant}-MLC`);
-    const v = state.config?.chat?.version;
-    const custom = v ? { ...base, model: `https://huggingface.co/Devseis/endpoint-auditor-1.5b-${quant}-MLC/resolve/${v}/`, model_id: `devseis-assistant-1.5b-${v}-${quant}` } : null;
-    const appConfig = { ...webllm.prebuiltAppConfig, model_list: custom ? [...webllm.prebuiltAppConfig.model_list, custom] : webllm.prebuiltAppConfig.model_list };
-    const initProgressCallback = r => status(`Getting the AI ready on this device (first time only, about 1 GB): ${Math.round((r.progress || 0) * 100)}%`, r.progress || 0);
+    const { webllm, base, custom, appConfig, v } = await modelChoice();
+    const initProgressCallback = r => {
+      state.progress = r.progress || 0;
+      const mb = /([\d.]+)MB fetched/.exec(r.text || '');
+      status(state.cachedStart ? `Starting the AI assistant… ${Math.round(state.progress * 100)}%`
+        : `Downloading the AI assistant (one time, about 1 GB): ${Math.round(state.progress * 100)}%${mb ? ` · ${Math.round(+mb[1])} MB` : ''} · you can keep chatting meanwhile`, state.progress);
+      aiChip();
+    };
     let engine, label;
     if (custom) {
       try { engine = await webllm.CreateMLCEngine(custom.model_id, { appConfig, initProgressCallback }); label = `Devseis assistant ${v} (1.5B)`; } catch (e) { console.warn('Devseis model failed, using base', e); }
@@ -42,10 +68,38 @@ async function getEngine() {
     if (!engine) { engine = await webllm.CreateMLCEngine(base.model_id, { appConfig, initProgressCallback }); label = 'Qwen2.5 1.5B (base, until the Devseis model loads)'; }
     state.modelLabel = label; $('modelName').textContent = label; status('');
     return engine;
-  })().then(e => (state.engine = e), err => { state.engine = false; state.modelLabel = `Not available: ${err.message}`; $('modelName').textContent = 'Knowledge base only'; status(''); return false; });
+  })().then(e => { state.engine = e; state.loading = false; aiChip(); render(); return e; },
+    err => { state.engine = false; state.loading = false; state.modelLabel = `Not available: ${err.message}`; $('modelName').textContent = 'Knowledge base only'; status(''); aiChip(); render(); return false; });
   return state.enginePromise;
 }
 
+function enableAi() {
+  try { localStorage.setItem(AI_CONSENT, 'yes'); } catch { /* ignore */ }
+  state.consent = true;
+  getEngine();
+}
+
+// Small status chip in the header: what the assistant is running on right now.
+function aiChip() {
+  const chip = $('aiChip');
+  if (!chip) return;
+  if (state.engine) { chip.textContent = '✨ AI ready'; chip.title = state.modelLabel; chip.dataset.state = 'ready'; }
+  else if (state.loading) { chip.textContent = `⬇ AI ${Math.round((state.progress || 0) * 100)}%`; chip.title = 'The AI assistant is getting ready'; chip.dataset.state = 'loading'; }
+  else if (state.engine === false) { chip.textContent = '📚 Knowledge base'; chip.title = state.modelLabel; chip.dataset.state = 'off'; }
+  else { chip.textContent = '⚡ Enable AI'; chip.title = 'Download the AI assistant (about 1 GB, one time)'; chip.dataset.state = 'off'; }
+}
+
+// Instant answer straight from the knowledge base, formatted for reading.
+function quickAnswer(passages) {
+  if (!passages.length) return 'The Devseis knowledge base has nothing on that question. I cover device security, ISO 27001, GDPR and the EU AI Act.';
+  const top = passages[0];
+  const body = top.text.startsWith(top.title) ? top.text.slice(top.title.length).replace(/^[.:]\s*/, '') : top.text;
+  const text = body.replace(/\s\((\d+)\)\s/g, '\n$1. ')
+    .replace(/(^|\s)(How to fix on [A-Za-z]+|How to verify|Related controls|Why it matters|Risk if missing|Requirement|An auditor looks for|On endpoints|Where to look):/g, '\n\n**$2:**')
+    .replace(/^\s+/, '');
+  return `**${top.title}** [1]\n\n${text}`;
+}
+
 function status(text, fraction) {
   $('statusBar').classList.toggle('hidden', !text);
   $('statusText').textContent = text;
@@ -86,6 +140,7 @@ function auditCard(audit) {
 function render() {
   const chat = state.current;
   $('emptyState').classList.toggle('hidden', Boolean(chat && (chat.messages.length || chat.audit)));
+  $('aiCard').classList.toggle('hidden', !state.showAiCard || state.loading || Boolean(state.engine) || state.engine === false);
   const thread = $('thread');
   thread.innerHTML = '';
   if (!chat) return renderSidebar();
@@ -96,7 +151,10 @@ function render() {
     thread.insertAdjacentHTML('beforeend', `<div class="msg bot"><img class="avatar" src="app/build/icon.png" alt=""><div class="bubble" id="m${i}">
       ${m.pending ? '<div class="typing"><span></span><span></span><span></span></div>' : markdown(m.content, m.passages, i)}
       ${!m.pending && sources && !m.noSources ? `<div class="sources"><span class="muted tiny">Sources:</span>${sources}</div>` : ''}
-      ${m.note ? `<div class="note">${esc(m.note)}</div>` : ''}<div class="source-slot"></div></div></div>`);
+      ${m.note ? `<div class="note">${esc(m.note)}</div>` : ''}
+      ${m.quick && !m.pending && !m.writing ? (state.engine ? `<div class="quick-actions"><button type="button" class="primary-btn" data-rewrite="${i}">✨ Rewrite with AI</button></div>`
+        : (!state.loading && state.engine !== false ? `<div class="quick-actions"><button type="button" class="small-btn" data-enable="1">⚡ Enable the AI assistant (about 1 GB, one time)</button></div>` : '')) : ''}
+      <div class="source-slot"></div></div></div>`);
   });
   renderSidebar();
   $('chatMain').scrollTop = $('chatMain').scrollHeight;
@@ -132,40 +190,19 @@ async function ask(question) {
     const passages = searchWithAudit(state.kb, question, chat.audit, { k: 4, os });
     reply.passages = passages;
     const messages = chatMessages(question, passages, auditBrief(chat.audit), history);
-    let engine = await getEngine();
-    let streamed = false;
-    if (engine) {
-      // A GPU can be lost (memory pressure, sleep); restart the model once, then fall back to the knowledge base.
-      for (let attempt = 0; attempt < 2 && engine; attempt++) {
-        try {
-          reply.pending = false; reply.content = '';
-          const stream = await engine.chat.completions.create({ messages, temperature: 0, max_tokens: 700, stream: true });
-          let last = 0;
-          for await (const chunk of stream) {
-            reply.content += chunk.choices[0]?.delta?.content || '';
-            if (Date.now() - last > 120) { last = Date.now(); const el = $(`m${chat.messages.length - 1}`); if (el) el.innerHTML = markdown(clean(reply.content), passages, chat.messages.length - 1); }
-          }
-          streamed = true;
-          break;
-        } catch (error) {
-          if (!/lost|Instance reference|GPUDevice|disposed/i.test(error.message)) throw error;
-          status('The graphics processor was reset; restarting the AI…', 0.5);
-          state.engine = null; state.enginePromise = null;
-          engine = attempt === 0 ? await getEngine() : null;
-        }
-      }
-    }
-    if (streamed) {
-      reply.content = clean(reply.content);
-      reply.noSources = !/\[\d+\]/.test(reply.content) && /can only help|don't have|do not have|not able to|can't answer|cannot answer|sorry/i.test(reply.content);
-      const problems = chatProblems(messages[messages.length - 1].content, reply.content);
-      reply.cited = /\[\d+\]/.test(reply.content);
-      if (problems.length) reply.note = 'Some details in this answer could not be matched to the sources. Check them in the sources below before acting.';
+    reply.question = question; reply.history = history;
+    if (state.engine) {
+      // Show the knowledge-base answer at once; the AI's answer replaces it when its first words arrive.
+      reply.pending = false; reply.content = quickAnswer(passages); reply.cited = true; reply.quick = true; reply.writing = true;
+      reply.note = '✨ The AI is writing a fuller answer…';
+      render();
+      await aiAnswer(chat, reply, messages, passages);
     } else {
-      reply.content = passages.length
-        ? `The AI model isn't available right now, but here is what the Devseis knowledge base says:\n\n${passages.slice(0, 2).map((p, i) => `**${p.title}** [${i + 1}]\n${p.text}`).join('\n\n')}`
-        : 'The AI model isn\'t available right now, and the Devseis knowledge base has nothing on that question. I cover device security, ISO 27001, GDPR and the EU AI Act.';
-      reply.cited = true; reply.note = 'Shown directly from the knowledge base (the AI model is not available on this device right now).';
+      reply.content = quickAnswer(passages);
+      reply.cited = true; reply.quick = true;
+      reply.note = state.loading ? `Quick answer from the knowledge base. The AI assistant is getting ready (${Math.round((state.progress || 0) * 100)}%); you can ask it to rewrite this when it is ready.`
+        : state.engine === false ? 'Quick answer from the knowledge base (the AI is not available in this browser).'
+          : 'Quick answer from the knowledge base. Enable the AI assistant for written answers.';
     }
   } catch (error) {
     reply.content = `Something went wrong: ${error.message}`;
@@ -173,6 +210,47 @@ async function ask(question) {
   reply.pending = false; state.busy = false; saveChats(); updateSend(); render();
 }
 
+// Write (or rewrite) an answer with the model; the GPU can be lost (memory pressure, sleep): restart once, else keep the quick answer.
+async function aiAnswer(chat, reply, messages, passages) {
+  const index = chat.messages.indexOf(reply);
+  let engine = state.engine;
+  for (let attempt = 0; attempt < 2 && engine; attempt++) {
+    try {
+      reply.pending = false;
+      const stream = await engine.chat.completions.create({ messages, temperature: 0, max_tokens: 700, stream: true });
+      let last = 0, started = false;
+      for await (const chunk of stream) {
+        const delta = chunk.choices[0]?.delta?.content || '';
+        if (!started && delta) { started = true; reply.content = ''; reply.quick = false; reply.writing = false; reply.note = ''; }
+        reply.content += delta;
+        if (Date.now() - last > 120) { last = Date.now(); const el = $(`m${index}`); if (el) el.innerHTML = markdown(clean(reply.content), passages, index); }
+      }
+      if (!started) throw new Error('The AI returned no answer');
+      reply.content = clean(reply.content);
+      reply.noSources = !/\[\d+\]/.test(reply.content) && /can only help|don't have|do not have|not able to|can't answer|cannot answer|sorry/i.test(reply.content);
+      reply.cited = /\[\d+\]/.test(reply.content);
+      if (chatProblems(messages[messages.length - 1].content, reply.content).length) reply.note = 'Some details in this answer could not be matched to the sources. Check them in the sources below before acting.';
+      return;
+    } catch (error) {
+      if (!/lost|Instance reference|GPUDevice|disposed/i.test(error.message)) { console.warn('AI answer failed', error); break; }  // keep the quick answer
+      status('The graphics processor was reset; restarting the AI…', 0.5);
+      state.engine = null; state.enginePromise = null;
+      engine = attempt === 0 ? await getEngine() : null;
+    }
+  }
+  reply.content = quickAnswer(passages); reply.cited = true; reply.quick = true; reply.writing = false;
+  reply.note = 'Quick answer from the knowledge base (the AI could not run just now).';
+}
+
+async function rewriteWithAi(index) {
+  const chat = state.current; const reply = chat && chat.messages[index];
+  if (!reply || !state.engine || state.busy) return;
+  state.busy = true; updateSend();
+  const messages = chatMessages(reply.question, reply.passages, auditBrief(chat.audit), reply.history || []);
+  try { await aiAnswer(chat, reply, messages, reply.passages); } catch (error) { reply.note = `The AI could not answer: ${error.message}`; }
+  state.busy = false; saveChats(); updateSend(); render();
+}
+
 // Models sometimes emit HTML entities; show plain characters.
 function clean(text) { return text.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'"); }
 
@@ -216,7 +294,7 @@ async function writeReport() {
   const evidence = chat.audit;
   try {
     const lib = await loadLibrary();
-    const engine = await getEngine();
+    const engine = state.engine || null;
     const generate = engine ? async (system, prompt, task) => (await engine.chat.completions.create({
       messages: [{ role: 'system', content: system }, { role: 'user', content: prompt }], temperature: 0, max_tokens: task === 'ai_classification' ? 1600 : 1200,
       response_format: { type: 'json_object', schema: JSON.stringify(ANSWER_SCHEMAS[task]) } })).choices[0].message.content : null;
@@ -257,6 +335,9 @@ $('input').addEventListener('input', () => { const t = $('input'); t.style.heigh
 $('input').addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); $('composer').requestSubmit(); } });
 document.querySelectorAll('.chip').forEach(c => c.addEventListener('click', () => (c.dataset.action === 'audit' ? openAuditModal() : ask(c.dataset.prompt))));
 $('auditBtn').addEventListener('click', openAuditModal);
+$('aiChip').addEventListener('click', () => { if (!state.engine && !state.loading && state.engine !== false) enableAi(); else if (state.engine) status(`AI assistant ready: ${state.modelLabel}`, 1) || setTimeout(() => status(''), 2500); });
+$('aiCardYes').addEventListener('click', () => { state.showAiCard = false; enableAi(); });
+$('aiCardNo').addEventListener('click', () => { state.showAiCard = false; try { localStorage.setItem(AI_CONSENT, 'later'); } catch { /* ignore */ } render(); });
 $('auditClose').addEventListener('click', () => $('auditModal').classList.add('hidden'));
 $('auditModal').addEventListener('click', e => { if (e.target === $('auditModal')) $('auditModal').classList.add('hidden'); });
 $('attachBtn').addEventListener('click', () => $('fileInput').click());
@@ -269,7 +350,9 @@ $('fileInput').addEventListener('change', async () => {
 });
 $('thread').addEventListener('click', e => {
   const t = e.target.closest('button'); if (!t) return;
-  if (t.dataset.ask) ask(t.dataset.ask);
+  if (t.dataset.rewrite) rewriteWithAi(+t.dataset.rewrite);
+  else if (t.dataset.enable) enableAi();
+  else if (t.dataset.ask) ask(t.dataset.ask);
   else if (t.dataset.report) writeReport();
   else if (t.dataset.msg) showSource(+t.dataset.msg, +t.dataset.n, true);
 });
@@ -304,7 +387,18 @@ async function init() {
     try { const ev = JSON.parse(localStorage.getItem('devseis.lastAudit')); if (ev) { attachAudit(ev); localStorage.removeItem('devseis.lastAudit'); } } catch { /* ignore */ }
     history.replaceState(null, '', location.pathname);
   }
-  render();
-  if (new URLSearchParams(location.search).has('test')) Object.assign(window, { __chat: state, __ask: ask });
+  render(); aiChip();
+  if ('gpu' in navigator) {
+    let consent = null; try { consent = localStorage.getItem(AI_CONSENT); } catch { /* ignore */ }
+    modelCached().then(cached => {
+      if (cached || consent === 'yes') { state.cachedStart = cached; getEngine(); }
+      else if (consent !== 'later') {
+        state.showAiCard = true;
+        if (navigator.connection && navigator.connection.type === 'cellular') $('aiCardText').textContent += ' You seem to be on mobile data: Wi-Fi is recommended.';
+        render();
+      }
+    });
+  } else { state.engine = false; state.modelLabel = 'Not available: this browser has no WebGPU'; $('modelName').textContent = 'Knowledge base only'; aiChip(); }
+  if (new URLSearchParams(location.search).has('test')) Object.assign(window, { __chat: state, __ask: ask, __enable: enableAi, __rewrite: rewriteWithAi });
 }
 init();

index.html

@@ -19,6 +19,7 @@
       <a class="brand" href="index.html"><img src="app/build/icon.png" alt=""><span>Devseis <b>Security Assistant</b></span></a>
     </div>
     <div class="header-actions">
+      <button type="button" id="aiChip" class="ai-chip" data-state="off">⚡ Enable AI</button>
       <button type="button" id="newChat" class="icon-btn" aria-label="New chat" title="New chat">
         <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
       </button>
@@ -33,6 +34,10 @@
       <div class="hero-icon"><img src="app/build/icon.png" alt=""></div>
       <h1>Hi, I'm your Devseis security assistant.</h1>
       <p class="hero-sub">Ask me how to secure your computer or phone, or about ISO 27001, GDPR and the EU AI Act. I can also <b>audit this device</b> for free. I run on your device: nothing you type is uploaded.</p>
+      <div class="ai-card hidden" id="aiCard">
+        <div><b>⚡ Turn on the AI assistant</b><br><span id="aiCardText">One-time download of about 1 GB; it then runs on this device, even offline. Until then I answer instantly from the Devseis knowledge base.</span></div>
+        <div class="btn-row"><button type="button" class="primary-btn" id="aiCardYes">Download now</button><button type="button" class="small-btn" id="aiCardNo">Not now</button></div>
+      </div>
       <div class="chips">
         <button type="button" class="chip" data-prompt="How do I turn on disk encryption on my computer?">🔒 Turn on disk encryption</button>
         <button type="button" class="chip" data-prompt="Is ChatGPT OK to use at work under GDPR?">🤖 Is ChatGPT OK at work?</button>