@fraziym/axoniz 0.1.0

package/dist/web/static/js/slashAutocomplete.js

@@ -0,0 +1,267 @@
+// static/js/slashAutocomplete.js
+// Lightweight popup that surfaces the existing /command registry as users
+// type. Reads COMMANDS from slashCommands.js — no command logic lives here.
+
+import { COMMANDS, LEGACY_ALIASES } from './slashCommands.js';
+
+const POPUP_ID = 'slash-autocomplete';
+const MAX_VISIBLE = 12;
+
+// Flatten the registry into a searchable list of leaf entries. Each entry is
+// either a top-level command or a "cmd sub" pair (so subcommands get their
+// own row when relevant — /toggle web, /chats new, etc).
+// Commands intentionally excluded from the autocomplete popup (pure easter
+// eggs with no productivity value, or internal machinery).
+const EXCLUDED = new Set(['flip','roll','8ball','fortune','odyssey','ascii']);
+
+// Important legacy aliases to promote to their own rows in the popup. These
+// are the short forms people will actually type (/new, /clear, /web, etc.)
+// rather than the full /chats new, /toggle web equivalents.
+const PROMOTED_ALIASES = new Set([
+  'new','clear','rename','fork','export','archive','favorite','unfavorite',
+  'web','bash','research','doc',
+  'memories','forget',
+]);
+
+function _flatten() {
+  const out = [];
+  const seen = new Set();
+
+  // 1. Top-level commands and their subcommands from COMMANDS
+  for (const [name, def] of Object.entries(COMMANDS)) {
+    if (EXCLUDED.has(name)) continue;
+    if (def.hidden) continue;
+    if (def.handler) {
+      seen.add(`/${name}`);
+      out.push({
+        token: `/${name}`,
+        aliases: (def.alias || []).map(a => `/${a}`),
+        category: def.category || '',
+        help: def.help || '',
+        usage: def.usage || '',
+      });
+    }
+    if (def.subs) {
+      for (const [sub, sdef] of Object.entries(def.subs)) {
+        if (sub.startsWith('_')) continue;
+        if (sdef.hidden) continue;
+        const tok = `/${name} ${sub}`;
+        seen.add(tok);
+        out.push({
+          token: tok,
+          aliases: (sdef.alias || []).map(a => `/${name} ${a}`),
+          category: def.category || '',
+          help: sdef.help || '',
+          usage: sdef.usage || '',
+        });
+      }
+    }
+  }
+
+  // 2. Promoted legacy aliases (/new, /clear, /web …) as convenient short rows
+  if (LEGACY_ALIASES) {
+    for (const [alias, { parent, sub }] of Object.entries(LEGACY_ALIASES)) {
+      if (!PROMOTED_ALIASES.has(alias)) continue;
+      const tok = `/${alias}`;
+      if (seen.has(tok)) continue;
+      const parentDef = COMMANDS[parent];
+      const subDef = parentDef?.subs?.[sub];
+      if (!subDef) continue;
+      seen.add(tok);
+      out.push({
+        token: tok,
+        aliases: [],
+        category: parentDef.category || '',
+        help: subDef.help || '',
+        usage: tok,
+      });
+    }
+  }
+
+  return out;
+}
+
+function _scoreMatch(entry, query) {
+  // query already starts with "/". Match against token + aliases. Prefix wins
+  // over substring; alias match scores slightly lower than token match.
+  const q = query.toLowerCase();
+  const t = entry.token.toLowerCase();
+  if (t === q) return 1000;
+  if (t.startsWith(q)) return 500 + (50 - Math.min(50, t.length - q.length));
+  for (const a of entry.aliases) {
+    const al = a.toLowerCase();
+    if (al === q) return 900;
+    if (al.startsWith(q)) return 400;
+  }
+  if (t.includes(q)) return 100;
+  if (entry.help.toLowerCase().includes(q.slice(1))) return 25;  // help text
+  return 0;
+}
+
+function _ensurePopup(textarea) {
+  let el = document.getElementById(POPUP_ID);
+  if (el) return el;
+  el = document.createElement('div');
+  el.id = POPUP_ID;
+  el.className = 'slash-autocomplete-popup';
+  el.setAttribute('role', 'listbox');
+  el.setAttribute('aria-label', 'Slash commands');
+  document.body.appendChild(el);
+  return el;
+}
+
+function _position(popup, textarea) {
+  const r = textarea.getBoundingClientRect();
+  const maxH = Math.min(window.innerHeight * 0.5, 360);
+  popup.style.maxHeight = maxH + 'px';
+  // Anchor above the textarea, left-aligned with it
+  popup.style.left = Math.round(r.left) + 'px';
+  popup.style.width = Math.max(280, Math.round(Math.min(r.width, 520))) + 'px';
+  // Place above when there's enough room, otherwise below.
+  const aboveSpace = r.top;
+  if (aboveSpace > maxH + 20) {
+    popup.style.bottom = (window.innerHeight - r.top + 6) + 'px';
+    popup.style.top = '';
+  } else {
+    popup.style.top = (r.bottom + 6) + 'px';
+    popup.style.bottom = '';
+  }
+}
+
+function _render(popup, items, selectedIdx, query) {
+  if (!items.length) {
+    popup.innerHTML = `<div class="slash-ac-empty">No commands match <code>${_esc(query)}</code></div>`;
+    return;
+  }
+  // Group by category for the headers
+  let html = '';
+  let lastCat = null;
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i];
+    if (it.category !== lastCat) {
+      html += `<div class="slash-ac-cat">${_esc(it.category || 'Other')}</div>`;
+      lastCat = it.category;
+    }
+    const sel = i === selectedIdx ? ' slash-ac-row-sel' : '';
+    const usage = it.usage && it.usage !== it.token ? ` <span class="slash-ac-usage">${_esc(it.usage)}</span>` : '';
+    html += `<div class="slash-ac-row${sel}" role="option" data-idx="${i}" data-token="${_esc(it.token)}">`
+         +    `<span class="slash-ac-token">${_esc(it.token)}</span>`
+         +    `<span class="slash-ac-help">${_esc(it.help)}</span>`
+         +    usage
+         + `</div>`;
+  }
+  popup.innerHTML = html;
+  // Scroll selected into view
+  const selEl = popup.querySelector('.slash-ac-row-sel');
+  if (selEl) selEl.scrollIntoView({ block: 'nearest' });
+}
+
+function _esc(s) {
+  return String(s).replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;' }[c]));
+}
+
+export function initSlashAutocomplete(textarea) {
+  if (!textarea || textarea._slashAcWired) return;
+  textarea._slashAcWired = true;
+
+  const all = _flatten();
+  let popup = null;
+  let visible = false;
+  let items = [];
+  let selectedIdx = 0;
+
+  const hide = () => {
+    if (!visible) return;
+    visible = false;
+    if (popup) popup.style.display = 'none';
+  };
+
+  const show = () => {
+    if (!popup) popup = _ensurePopup(textarea);
+    visible = true;
+    popup.style.display = 'block';
+    _position(popup, textarea);
+  };
+
+  const refresh = () => {
+    const v = textarea.value;
+    // Only trigger when the message starts with "/" (no leading space) and
+    // contains at most one space after the command (so subcommands work).
+    // If the user has moved past the slash command (newline, longer prose),
+    // the menu hides — we don't autocomplete mid-sentence.
+    if (!v.startsWith('/') || v.includes('\n')) { hide(); return; }
+    const query = v.trim();
+    items = all
+      .map(e => ({ e, s: _scoreMatch(e, query) }))
+      .filter(x => x.s > 0)
+      .sort((a, b) => b.s - a.s)
+      .slice(0, MAX_VISIBLE)
+      .map(x => x.e);
+    if (!items.length && query.length > 1) { hide(); return; }
+    if (!items.length) {
+      // Just "/" with no matches — fall back to showing everything up to MAX_VISIBLE
+      items = all.slice(0, MAX_VISIBLE);
+    }
+    selectedIdx = 0;
+    show();
+    _render(popup, items, selectedIdx, query);
+  };
+
+  const insert = (token) => {
+    textarea.value = token + ' ';
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    textarea.focus();
+    const len = textarea.value.length;
+    textarea.setSelectionRange(len, len);
+    hide();
+  };
+
+  textarea.addEventListener('input', refresh);
+  textarea.addEventListener('focus', () => { if (textarea.value.startsWith('/')) refresh(); });
+  textarea.addEventListener('blur', () => { setTimeout(hide, 120); });  // delay so click works
+
+  textarea.addEventListener('keydown', (e) => {
+    if (!visible || !items.length) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      selectedIdx = (selectedIdx + 1) % items.length;
+      _render(popup, items, selectedIdx, textarea.value);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      selectedIdx = (selectedIdx - 1 + items.length) % items.length;
+      _render(popup, items, selectedIdx, textarea.value);
+    } else if (e.key === 'Tab' || (e.key === 'Enter' && !e.shiftKey)) {
+      // Tab always inserts. Enter inserts only when the user hasn't already
+      // typed a full command + args — i.e. the popup is still in completion
+      // mode, not in "ready to submit a typed-out command" mode.
+      const v = textarea.value.trim();
+      const exactHit = items.find(it => it.token === v || it.aliases.includes(v));
+      if (e.key === 'Enter' && exactHit) {
+        // User typed the whole command — let the normal submit path handle it
+        hide();
+        return;
+      }
+      e.preventDefault();
+      insert(items[selectedIdx].token);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      hide();
+    }
+  });
+
+  // Re-position on window resize / scroll
+  window.addEventListener('resize', () => { if (visible) _position(popup, textarea); });
+
+  // Click handler on the popup (delegated)
+  document.addEventListener('mousedown', (e) => {
+    if (!visible || !popup) return;
+    const row = e.target.closest?.('.slash-ac-row');
+    if (row && popup.contains(row)) {
+      e.preventDefault();
+      const tok = row.dataset.token;
+      if (tok) insert(tok);
+    }
+  });
+}
+
+export default { initSlashAutocomplete };