Add slash command autocomplete popup

Typing / in the chat composer now shows a filtered popup listing all
available commands with their description. Arrow keys or Tab to select,
Enter/Tab to insert, Esc to close, click also works.

- New module: static/js/slashAutocomplete.js
  Reads the existing COMMANDS registry (and LEGACY_ALIASES) from
  slashCommands.js — no command logic added here, just discovery UI.
  Excludes easter-egg commands (flip, roll, 8ball, fortune, odyssey,
  ascii). Promotes short legacy aliases (/new, /clear, /web, /compact,
  /research, etc.) as first-class rows so users don't have to know the
  full /session new form.

- slashCommands.js: export COMMANDS and LEGACY_ALIASES so the new
  module can read the registry.

- chat.js: lazy-import slashAutocomplete on init, wire to #message
  textarea.

- style.css: popup + row styles using existing CSS variables.
This commit is contained in:
Sirsyorrz
2026-06-01 21:33:46 +10:00
parent 5c390d6b3e
commit 6a2f0d5904
4 changed files with 339 additions and 2 deletions
+7
View File
@@ -156,6 +156,13 @@ import createResearchSynapse from './researchSynapse.js';
initSlashCommands({ apiBase, isStreaming: () => isStreaming });
// Initialize email inbox
emailInbox.init(documentModule);
// Wire the slash-command autocomplete popup on the chat composer. The
// dispatcher already handles the typed command — this just surfaces the
// registry as a discoverable menu when the user starts a message with /.
import('./slashAutocomplete.js').then(mod => {
const ta = document.getElementById('message');
if (ta && mod.initSlashAutocomplete) mod.initSlashAutocomplete(ta);
}).catch(() => {});
}
// addMessage, createMsgFooter, displayMetrics, hideWelcomeScreen, showWelcomeScreen