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

View File

@@ -34358,3 +34358,68 @@ body.theme-frosted .modal {
background-color: color-mix(in srgb, var(--accent, var(--red)) 10%, transparent);
transform: translateX(1px);
}
/* Slash command autocomplete popup, anchored to the message composer */
.slash-autocomplete-popup {
position: fixed;
z-index: 9000;
background: var(--bg-elev-2, #1a1a1a);
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
font-size: 13px;
color: var(--fg, #e6e6e6);
overflow-y: auto;
padding: 4px 0;
display: none;
}
.slash-ac-cat {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted, #888);
padding: 6px 10px 2px;
opacity: 0.7;
}
.slash-ac-row {
display: flex;
align-items: baseline;
gap: 8px;
padding: 5px 10px;
cursor: pointer;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
}
.slash-ac-row:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.slash-ac-row-sel { background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent); }
.slash-ac-token {
font-family: 'Fira Code', ui-monospace, monospace;
color: var(--accent, var(--red));
font-weight: 600;
flex-shrink: 0;
}
.slash-ac-help {
color: var(--fg);
opacity: 0.85;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.slash-ac-usage {
color: var(--fg-muted, #888);
font-family: 'Fira Code', ui-monospace, monospace;
font-size: 11px;
opacity: 0.55;
flex-shrink: 0;
}
.slash-ac-empty {
padding: 10px;
color: var(--fg-muted, #888);
font-style: italic;
}
.slash-ac-empty code {
font-family: 'Fira Code', ui-monospace, monospace;
color: var(--accent, var(--red));
}