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:
@@ -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));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user