STscript Parser Rewrite (#1965)

* set isForced to true on input

* make floating auto-complete follow horizontal scrolling

* add callable closure vars

* changes to /let and /var for callable closures

* fix error message

* fix scope for closure arguments

* if should return the pipe result from closures

* use /run to call closures and no arguments on immediate closures

* throw exception from QRs window-function if no match

* when to show autocomplete vs info only

* autocomplete positioning

* autocomplete styling

* add theming to autocomplete (theme, dark, light)

* improve autocomplete show/hide logic and editor selection

* use blur tint color instead of chat tint color and use blur setting

* cleanup and docs

* use scope macros for QR args

* add enter to select autocomplete

* fix no executor found

* cleanup and comment

* fix alias list in help string

* fallback to empty string piped value if null or undefined

* fix typo

* blur textarea on ctrl+enter execute (and refocus after)

* stop executeSlashCommand if parser throws

* move /let and /var callbacks into functions

* switch textarea to monospace when value starts with slash

* add double pipe a pipe breaker

* fix /? slash

* remove some logging

* add "/:name" as shorthand for "/run name" after all

* move shit around

* fix error message

* use testRunShorthandEnd

* use parseQuotedValue and parseValue to determine name for "/:"

QR labels and set names can include spaces

* add some adjustments to make autocomplete work properly

some hint in there about "/:" would still be nice

* add autocomplete style  selector

* only strip quotes from subcommand if they are at both ends

* fix JSDoc

* escaping

* allow open quotes on dry run

* throwing shit at the wall for /: autocomplete

* escapes only for symbols

* clean up autocomplete

* improve performance

* fix scope macros

* remove unescaping of pipes

* fix macros in scope copy

* fix "/? slash"

* don't run parser for getNameAt if text has not changed

* fix options filter

* re-enable blur listener

* restore selection on non-replace select

* fix for escaping first character of value

* add support for {{pipe}} and {{var::}} closures

* add index support to var macro

* add scoped var macro to macro help

* more escape fixes

* reduce autocomplete render debounce

* cleanup

* restore old escape handling and parser flag for strict escaping

* fix "no match" autocomplete message

* add dummy commands for comments and parser flag

* fix type annotations

* somewhat safer macro replacements

* fix autocomplete select on blank / "no match"

* fix cutting off handled part in substitution

* add parser flag REPLACE_GETVAR

Replaces all {{getvar::}} and {{getglobalvar::}} macros with {{var::}}.
Inserts a series of command executors before the command with the macros that:
- save {{pipe}} to a var
- call /getvar or /getglobalvar to get the variable used in the macro
- call /let to save the retrieved variable
- return the saved {{pipe}} value

This helps to avoid double-substitutions when the var values contain text that could be interpreted as macros.

* remove old parser

* fix send on enter when no match

* deal with pipes in quoted values (loose escaping)

* add default parser flags to user settings

* allow quoted values in unnamed argument

* set parser flag without explicit state to "on"

* add click hint on parser error toast

* dirty more detailed cmd defs

* remove name from unnamed arg

* move autocomplete into class and floating with details

* replace jQuery's trigger('input') on #send_textarea with native events because jQuery does not dispatch the native event

* fix ctrl+space

* fix arrow navigation

* add comments

* fix pointer block

* add static fromProps

* fix up dummy commands

* migrate all commands to addCommandObject

* remove commented comment command

* fix alias in details

* add range as argument type

* switch to addCommandObject

* switch to addCommandObject

* fix height

* fix floating details position on left

* re-enable blur event

* use auto width for full details on floating autocomplete

* auto-size floating full details

* fix typo

* re-enable blur listener

* don't prevent enter when selected item is fully typed out

* add autocomplete details tooltips

* add language to slash command examples

* move makeItem into option and command and fix click select

* use autocomplete parts in /? slash

* fix alias formatting

* add language to slash command examples

* fix details position on initial input history

* small screen styles

* replace registerSlashCommand with detailed declarations

* put name on first line

* add missing returns

* fix missing comma

* fix alias display in autocomplete list

* remove args from help string

* move parser settings to its own section

* jsdoc

* hljs stscript lang

* add hljs to autocomplete help examples

* add missing import

* apply autocomplete colors to stscript codeblocks (hljs)

* add fromProps

* cache autocomplete elements

* towards generic autocomplete

* remove unused imports

* fix blanks

* add return types

* re-enable blur

* fix blank check

* Caption messages by id

* add aborting command execution

* fix return type

* fix chat input font reset

* add slash command progress indicator

* add missing return

* mark registerSlashCommand deprecated

* why??

* separate abort logic for commands

* remove parsing of quoted values from unnamed arg

* add adjustable autocomplete width

* revert stop button pulse

* add progress and pause/abort to QR editor

* add resize event on autocomplete width change

* add key= argument to all get vars

* refactoring

* introduce NamedArgumentAsignment

* add TODOs

* refactoring

* record start and end of named arg assignment

* refactoring

* prevent duplicate calls to show

* refactoring

* remove macro ac

* add secondary autocomplete and enum descriptions

* add syntax highlighting to QR editor

* add enum descriptions to /while

* add /let key=... to scope variable names

* add unnamed argument assignment class and unnamed argument splitting

* fix QR editor style

* remove dash before autocomplete help text

* add autocomplete for unnamed enums

* fix remaining dom after holding backslash

* fix for unnamed enums

* fix autocomplete for /parser-flag

* add parser-flag enum help

* fix type annotations

* fix autocomplete result for /:

* add colored autocomplete type icons

* collapse second line autocomplete help if empty

* mark optional named args in autocomplete

* fix when what

* remove duplicate debug buttons

* dispatch input on autocomplete select

* prevent grow from editor syntax layer

* add auto-adjust qr editor caret color

* remove text-shadow from autocomplete

* join value strings in /let and /var

* add /abort syntax highlight

* fix attempting secondary result when there is none

* rename settings headers and split autocomplete / stscript

* add parser flag tooltips

* add tooltips to chat width stops

* fix typo

* return clone of help item

* fix enum string

* don't make optional notice for autocomplete arguments smaller

* avoid scrollbar in chat input

* add rudimentary macro autocomplete

* strip macro from helptext

* finally remove closure delimiters around root

* cleanup

* fix index stuff for removed closure delimiters

* fix type hint

* add child commands to progress indicator

* include sub-separator in macro autocomplete

* remove all mentions of interruptsGeneration and purge

* remove unused imports

* fix syntax highlight with newline at end of input

* cleanup select pointer events

* coalesce onProgress call

* add regex to STscript syntax highlighting

* fix closure end

* fix autocomplete type icon alignment

* adjustments for small screens

* fix removing wrong element

* add missing "at=" arg to /sys, /comment, /sendas

* add font scale setting for autocomplete

* add target=_blank for parser flag links

* fix for searching enums

* remove REGEXP_MODE from hljs
just causes trouble

* fix autocomplete in closures

* fix typo

* fix type hint

* Get rid of scroll bar on load

* Add type hint for /send name argument. Fix 'at' types

* Add 'negative' arg hint to /sd command

* reenable blur event

* Allow /summarize to process any text

* Compact layout of script toggles

* Expand CSS by default

* fix double ranger indicator and adjust to narrow container

* make custom css input fill available vertical space

* reduce scroll lag

* use default cursor on scrollbar

* Clean-up module loading in index.html

* fix tab indent with hljs

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/extensions/attachments/index.js

@@ -1,9 +1,15 @@
 import { renderExtensionTemplateAsync } from '../../extensions.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 
 jQuery(async () => {
     const buttons = await renderExtensionTemplateAsync('attachments', 'buttons', {});
     $('#extensionsMenu').prepend(buttons);
 
-    registerSlashCommand('db', () => document.getElementById('manageAttachments')?.click(), ['databank', 'data-bank'], '– open the data bank', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'db',
+        callback: () => document.getElementById('manageAttachments')?.click(),
+        aliases: ['databank', 'data-bank'],
+        helpString: 'Open the data bank',
+    }));
+
 });

public/scripts/extensions/caption/index.js

@@ -5,7 +5,9 @@ import { getMessageTimeStamp } from '../../RossAscends-mods.js';
 import { SECRET_KEYS, secret_state } from '../../secrets.js';
 import { getMultimodalCaption } from '../shared.js';
 import { textgen_types, textgenerationwebui_settings } from '../../textgen-settings.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'caption';
@@ -254,6 +256,19 @@ async function onSelectImage(e, prompt, quiet) {
         return '';
     }
 
+    const caption = await getCaptionForFile(file, prompt, quiet);
+    form && form.reset();
+    return caption;
+}
+
+/**
+ * Gets a caption for an image file.
+ * @param {File} file Input file
+ * @param {string} prompt Caption prompt
+ * @param {boolean} quiet Suppresses sending a message
+ * @returns {Promise<string>} Generated caption
+ */
+async function getCaptionForFile(file, prompt, quiet) {
     try {
         setSpinnerIcon();
         const context = getContext();
@@ -273,7 +288,6 @@ async function onSelectImage(e, prompt, quiet) {
         return '';
     }
     finally {
-        form && form.reset();
         setImageIcon();
     }
 }
@@ -288,9 +302,26 @@ function onRefineModeInput() {
  * @param {object} args Named parameters
  * @param {string} prompt Caption prompt
  */
-function captionCommandCallback(args, prompt) {
+async function captionCommandCallback(args, prompt) {
+    const quiet = isTrueBoolean(args?.quiet);
+    const id = args?.id;
+
+    if (!isNaN(Number(id))) {
+        const message = getContext().chat[id];
+        if (message?.extra?.image) {
+            try {
+                const fetchResult = await fetch(message.extra.image);
+                const blob = await fetchResult.blob();
+                const file = new File([blob], 'image.jpg', { type: blob.type });
+                return await getCaptionForFile(file, prompt, quiet);
+            } catch (error) {
+                toastr.error('Failed to get image from the message. Make sure the image is accessible.');
+                return '';
+            }
+        }
+    }
+
     return new Promise(resolve => {
-        const quiet = isTrueBoolean(args?.quiet);
         const input = document.createElement('input');
         input.type = 'file';
         input.accept = 'image/*';
@@ -492,5 +523,35 @@ jQuery(function () {
         saveSettingsDebounced();
     });
 
-    registerSlashCommand('caption', captionCommandCallback, [], '<span class="monospace">quiet=true/false [prompt]</span> - caption an image with an optional prompt and passes the caption down the pipe. Only multimodal sources support custom prompts. Set the "quiet" argument to true to suppress sending a captioned message, default: false.', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'caption',
+        callback: captionCommandCallback,
+        returns: 'caption',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'quiet', 'suppress sending a captioned message', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false', ['true', 'false'],
+            ),
+            new SlashCommandNamedArgument(
+                'id', 'get image from a message with this ID', [ARGUMENT_TYPE.NUMBER], false, false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'prompt', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Caption an image with an optional prompt and passes the caption down the pipe.
+            </div>
+            <div>
+                Only multimodal sources support custom prompts.
+            </div>
+            <div>
+                Provide a message ID to get an image from a message instead of uploading one.
+            </div>
+            <div>
+                Set the "quiet" argument to true to suppress sending a captioned message, default: false.
+            </div>
+        `,
+    }));
 });

public/scripts/extensions/expressions/index.js

@@ -2,11 +2,13 @@ import { callPopup, eventSource, event_types, generateQuietPrompt, getRequestHea
 import { dragElement, isMobile } from '../../RossAscends-mods.js';
 import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch, renderExtensionTemplateAsync } from '../../extensions.js';
 import { loadMovingUIState, power_user } from '../../power-user.js';
-import { registerSlashCommand } from '../../slash-commands.js';
 import { onlyUnique, debounce, getCharaFilename, trimToEndSentence, trimToStartSentence } from '../../utils.js';
 import { hideMutedSprites } from '../../group-chats.js';
 import { isJsonSchemaSupported } from '../../textgen-settings.js';
 import { debounce_timeout } from '../../constants.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument } from '../../slash-commands/SlashCommandArgument.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'expressions';
@@ -906,8 +908,10 @@ async function setSpriteSetCommand(_, folder) {
 
     $('#expression_override').val(folder.trim());
     onClickExpressionOverrideButton();
-    removeExpression();
-    moduleWorker();
+    // removeExpression();
+    // moduleWorker();
+    const vnMode = isVisualNovelMode();
+    await sendExpressionCall(folder, lastExpression, true, vnMode);
 }
 
 async function classifyCommand(_, text) {
@@ -1967,9 +1971,61 @@ function migrateSettings() {
     });
     eventSource.on(event_types.MOVABLE_PANELS_RESET, updateVisualNovelModeDebounced);
     eventSource.on(event_types.GROUP_UPDATED, updateVisualNovelModeDebounced);
-    registerSlashCommand('sprite', setSpriteSlashCommand, ['emote'], '<span class="monospace">(spriteId)</span> – force sets the sprite for the current character', true, true);
-    registerSlashCommand('spriteoverride', setSpriteSetCommand, ['costume'], '<span class="monospace">(optional folder)</span> – sets an override sprite folder for the current character. If the name starts with a slash or a backslash, selects a sub-folder in the character-named folder. Empty value to reset to default.', true, true);
-    registerSlashCommand('lastsprite', (_, value) => lastExpression[value.trim()] ?? '', [], '<span class="monospace">(charName)</span> – Returns the last set sprite / expression for the named character.', true, true);
-    registerSlashCommand('th', toggleTalkingHeadCommand, ['talkinghead'], '– Character Expressions: toggles <i>Image Type - talkinghead (extras)</i> on/off.', true, true);
-    registerSlashCommand('classify', classifyCommand, [], '<span class="monospace">(text)</span> – performs an emotion classification of the given text and returns a label.', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sprite',
+        aliases: ['emote'],
+        callback: setSpriteSlashCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'spriteId', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: 'Force sets the sprite for the current character.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'spriteoverride',
+        aliases: ['costume'],
+        callback: setSpriteSetCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'optional folder', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: 'Sets an override sprite folder for the current character. If the name starts with a slash or a backslash, selects a sub-folder in the character-named folder. Empty value to reset to default.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'lastsprite',
+        callback: (_, value) => lastExpression[value.trim()] ?? '',
+        returns: 'sprite',
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'charName', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: 'Returns the last set sprite / expression for the named character.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'th',
+        callback: toggleTalkingHeadCommand,
+        aliases: ['talkinghead'],
+        helpString: 'Character Expressions: toggles <i>Image Type - talkinghead (extras)</i> on/off.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'classify',
+        callback: classifyCommand,
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'text', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        returns: 'emotion classification label for the given text',
+        helpString: `
+            <div>
+                Performs an emotion classification of the given text and returns a label.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/classify I am so happy today!</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
 })();

public/scripts/extensions/gallery/index.js

@@ -8,7 +8,9 @@ import { groups, selected_group } from '../../group-chats.js';
 import { loadFileToDocument, delay } from '../../utils.js';
 import { loadMovingUIState } from '../../power-user.js';
 import { dragElement } from '../../RossAscends-mods.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 
 const extensionName = 'gallery';
 const extensionFolderPath = `scripts/extensions/${extensionName}/`;
@@ -415,8 +417,26 @@ function viewWithDragbox(items) {
 
 
 // Registers a simple command for opening the char gallery.
-registerSlashCommand('show-gallery', showGalleryCommand, ['sg'], '– shows the gallery', true, true);
-registerSlashCommand('list-gallery', listGalleryCommand, ['lg'], '<span class="monospace">[optional char=charName] [optional group=groupName]</span> – list images in the gallery of the current char / group or a specified char / group', true, true);
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'show-gallery',
+    aliases: ['sg'],
+    callback: showGalleryCommand,
+    helpString: 'Shows the gallery.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery',
+    aliases: ['lg'],
+    callback: listGalleryCommand,
+    returns: 'list of images',
+    namedArgumentList: [
+        new SlashCommandNamedArgument(
+            'char', 'character name', [ARGUMENT_TYPE.STRING], false,
+        ),
+        new SlashCommandNamedArgument(
+            'group', 'group name', [ARGUMENT_TYPE.STRING], false,
+        ),
+    ],
+    helpString: 'List images in the gallery of the current char / group or a specified char / group.',
+}));
+
 
 function showGalleryCommand(args) {
     showCharGallery();

public/scripts/extensions/memory/index.js

@@ -16,11 +16,14 @@ import {
     getMaxContextSize,
 } from '../../../script.js';
 import { is_group_generating, selected_group } from '../../group-chats.js';
-import { registerSlashCommand } from '../../slash-commands.js';
 import { loadMovingUIState } from '../../power-user.js';
 import { dragElement } from '../../RossAscends-mods.js';
 import { getTextTokens, getTokenCountAsync, tokenizers } from '../../tokenizers.js';
 import { debounce_timeout } from '../../constants.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { resolveVariable } from '../../variables.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = '1_memory';
@@ -416,7 +419,7 @@ async function forceSummarizeChat() {
     console.log(`Skipping WIAN? ${skipWIAN}`);
     if (!context.chatId) {
         toastr.warning('No chat selected');
-        return;
+        return '';
     }
 
     toastr.info('Summarizing chat...', 'Please wait');
@@ -424,7 +427,42 @@ async function forceSummarizeChat() {
 
     if (!value) {
         toastr.warning('Failed to summarize chat');
-        return;
+        return '';
+    }
+
+    return value;
+}
+
+/**
+ * Callback for the summarize command.
+ * @param {object} args Command arguments
+ * @param {string} text Text to summarize
+ */
+async function summarizeCallback(args, text) {
+    text = text.trim();
+
+    // Using forceSummarizeChat to summarize the current chat
+    if (!text) {
+        return await forceSummarizeChat();
+    }
+
+    const source = args.source || extension_settings.memory.source;
+    const prompt = substituteParams((resolveVariable(args.prompt) || extension_settings.memory.prompt)?.replace(/{{words}}/gi, extension_settings.memory.promptWords));
+
+    try {
+        switch (source) {
+            case summary_sources.extras:
+                return await callExtrasSummarizeAPI(text);
+            case summary_sources.main:
+                return await generateRaw(text, '', false, false, prompt, extension_settings.memory.overrideResponseLength);
+            default:
+                toastr.warning('Invalid summarization source specified');
+                return '';
+        }
+    } catch (error) {
+        toastr.error(String(error), 'Failed to summarize text');
+        console.log(error);
+        return '';
     }
 }
 
@@ -668,37 +706,18 @@ async function summarizeChatExtras(context) {
     // perform the summarization API call
     try {
         inApiCall = true;
-        const url = new URL(getApiUrl());
-        url.pathname = '/api/summarize';
+        const summary = await callExtrasSummarizeAPI(resultingString);
+        const newContext = getContext();
 
-        const apiResult = await doExtrasFetch(url, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Bypass-Tunnel-Reminder': 'bypass',
-            },
-            body: JSON.stringify({
-                text: resultingString,
-                params: {},
-            }),
-        });
-
-        if (apiResult.ok) {
-            const data = await apiResult.json();
-            const summary = data.summary;
-
-            const newContext = getContext();
-
-            // something changed during summarization request
-            if (newContext.groupId !== context.groupId
-                || newContext.chatId !== context.chatId
-                || (!newContext.groupId && (newContext.characterId !== context.characterId))) {
-                console.log('Context changed, summary discarded');
-                return;
-            }
-
-            setMemoryContext(summary, true);
+        // something changed during summarization request
+        if (newContext.groupId !== context.groupId
+            || newContext.chatId !== context.chatId
+            || (!newContext.groupId && (newContext.characterId !== context.characterId))) {
+            console.log('Context changed, summary discarded');
+            return;
         }
+
+        setMemoryContext(summary, true);
     }
     catch (error) {
         console.log(error);
@@ -708,6 +727,40 @@ async function summarizeChatExtras(context) {
     }
 }
 
+/**
+ * Call the Extras API to summarize the provided text.
+ * @param {string} text Text to summarize
+ * @returns {Promise<string>} Summarized text
+ */
+async function callExtrasSummarizeAPI(text) {
+    if (!modules.includes('summarize')) {
+        throw new Error('Summarize module is not enabled in Extras API');
+    }
+
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/summarize';
+
+    const apiResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Bypass-Tunnel-Reminder': 'bypass',
+        },
+        body: JSON.stringify({
+            text: text,
+            params: {},
+        }),
+    });
+
+    if (apiResult.ok) {
+        const data = await apiResult.json();
+        const summary = data.summary;
+        return summary;
+    }
+
+    throw new Error('Extras API call failed');
+}
+
 function onMemoryRestoreClick() {
     const context = getContext();
     const content = $('#memory_contents').val();
@@ -865,5 +918,16 @@ jQuery(async function () {
     eventSource.on(event_types.MESSAGE_EDITED, onChatEvent);
     eventSource.on(event_types.MESSAGE_SWIPED, onChatEvent);
     eventSource.on(event_types.CHAT_CHANGED, onChatEvent);
-    registerSlashCommand('summarize', forceSummarizeChat, [], '– forces the summarization of the current chat using the Main API', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'summarize',
+        callback: summarizeCallback,
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'API to use for summarization', [ARGUMENT_TYPE.STRING], false, false, '', ['main', 'extras']),
+            new SlashCommandNamedArgument('prompt', 'prompt to use for summarization', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.VARIABLE_NAME], false, false, ''),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument('text to summarize', [ARGUMENT_TYPE.STRING], false, false, ''),
+        ],
+        helpString: 'Summarizes the given text. If no text is provided, the current chat will be summarized. Can specify the source and the prompt to use.',
+    }));
 });

public/scripts/extensions/quick-reply/html/qrEditor.html

@@ -30,7 +30,10 @@
 					<span>Ctrl+Enter to execute</span>
 				</label>
 			</div>
-			<textarea class="monospace" id="qr--modal-message"></textarea>
+			<div id="qr--modal-messageHolder">
+				<pre id="qr--modal-messageSyntax"><code id="qr--modal-messageSyntaxInner" class="hljs language-stscript"></code></pre>
+				<textarea class="monospace" id="qr--modal-message" spellcheck="false"></textarea>
+			</div>
 		</div>
 	</div>
 
@@ -94,14 +97,27 @@
 
 
 		<h3>Testing</h3>
-		<div id="qr--modal-execute" class="menu_button" title="Execute the quick reply now">
-			<i class="fa-solid fa-play"></i>
-			Execute
+		<div id="qr--modal-executeButtons">
+			<div id="qr--modal-execute" class="qr--modal-executeButton menu_button" title="Execute the quick reply now">
+				<i class="fa-solid fa-play"></i>
+				Execute
+			</div>
+			<div id="qr--modal-pause" class="qr--modal-executeButton menu_button" title="Pause / continue execution">
+				<span class="qr--modal-executeComboIcon">
+					<i class="fa-solid fa-play"></i>
+					<i class="fa-solid fa-pause"></i>
+				</span>
+			</div>
+			<div id="qr--modal-stop" class="qr--modal-executeButton menu_button" title="Abort execution">
+				<i class="fa-solid fa-stop"></i>
+			</div>
 		</div>
+		<div id="qr--modal-executeProgress"></div>
 		<label class="checkbox_label">
 			<input type="checkbox" id="qr--modal-executeHide">
 			<span> Hide editor while executing</span>
 		</label>
 		<div id="qr--modal-executeErrors"></div>
+		<div id="qr--modal-executeResult"></div>
 	</div>
 </div>

public/scripts/extensions/quick-reply/index.js

@@ -183,14 +183,16 @@ const init = async () => {
             ;
         if (!qr) {
             let [setName, ...qrName] = name.split('.');
-            name = qrName.join('.');
+            qrName = qrName.join('.');
             let qrs = QuickReplySet.get(setName);
             if (qrs) {
-                qr = qrs.qrList.find(it=>it.label == name);
+                qr = qrs.qrList.find(it=>it.label == qrName);
             }
         }
         if (qr && qr.onExecute) {
-            return await qr.execute(args);
+            return await qr.execute(args, false, true);
+        } else {
+            throw new Error(`No Quick Reply found for "${name}".`);
         }
     };
 

public/scripts/extensions/quick-reply/src/QuickReply.js

@@ -1,5 +1,9 @@
 import { POPUP_TYPE, Popup } from '../../../popup.js';
-import { getSortableDelay } from '../../../utils.js';
+import { setSlashCommandAutoComplete } from '../../../slash-commands.js';
+import { SlashCommandAbortController } from '../../../slash-commands/SlashCommandAbortController.js';
+import { SlashCommandParserError } from '../../../slash-commands/SlashCommandParserError.js';
+import { SlashCommandScope } from '../../../slash-commands/SlashCommandScope.js';
+import { debounce, getSortableDelay } from '../../../utils.js';
 import { log, warn } from '../index.js';
 import { QuickReplyContextLink } from './QuickReplyContextLink.js';
 import { QuickReplySet } from './QuickReplySet.js';
@@ -47,9 +51,14 @@ export class QuickReply {
     /**@type {Popup}*/ editorPopup;
 
     /**@type {HTMLElement}*/ editorExecuteBtn;
+    /**@type {HTMLElement}*/ editorExecuteBtnPause;
+    /**@type {HTMLElement}*/ editorExecuteBtnStop;
+    /**@type {HTMLElement}*/ editorExecuteProgress;
     /**@type {HTMLElement}*/ editorExecuteErrors;
+    /**@type {HTMLElement}*/ editorExecuteResult;
     /**@type {HTMLInputElement}*/ editorExecuteHide;
     /**@type {Promise}*/ editorExecutePromise;
+    /**@type {SlashCommandAbortController}*/ abortController;
 
 
     get hasContext() {
@@ -225,15 +234,43 @@ export class QuickReply {
             const updateWrap = () => {
                 if (wrap.checked) {
                     message.style.whiteSpace = 'pre-wrap';
+                    messageSyntaxInner.style.whiteSpace = 'pre-wrap';
                 } else {
                     message.style.whiteSpace = 'pre';
+                    messageSyntaxInner.style.whiteSpace = 'pre';
                 }
+                updateScrollDebounced();
+            };
+            const updateScroll = (evt) => {
+                let left = message.scrollLeft;
+                let top = message.scrollTop;
+                if (evt) {
+                    evt.preventDefault();
+                    left = message.scrollLeft + evt.deltaX;
+                    top = message.scrollTop + evt.deltaY;
+                    message.scrollTo({
+                        behavior: 'instant',
+                        left,
+                        top,
+                    });
+                }
+                messageSyntaxInner.scrollTo({
+                    behavior: 'instant',
+                    left,
+                    top,
+                });
+            };
+            const updateScrollDebounced = updateScroll;
+            const updateSyntax = ()=>{
+                messageSyntaxInner.innerHTML = hljs.highlight(`${message.value}${message.value.slice(-1) == '\n' ? ' ' : ''}`, { language:'stscript', ignoreIllegals:true })?.value;
             };
             /**@type {HTMLInputElement}*/
             const tabSize = dom.querySelector('#qr--modal-tabSize');
             tabSize.value = JSON.parse(localStorage.getItem('qr--tabSize') ?? '4');
             const updateTabSize = () => {
                 message.style.tabSize = tabSize.value;
+                messageSyntaxInner.style.tabSize = tabSize.value;
+                updateScrollDebounced();
             };
             tabSize.addEventListener('change', () => {
                 localStorage.setItem('qr--tabSize', JSON.stringify(Number(tabSize.value)));
@@ -247,14 +284,15 @@ export class QuickReply {
             });
             /**@type {HTMLTextAreaElement}*/
             const message = dom.querySelector('#qr--modal-message');
-            updateWrap();
-            updateTabSize();
             message.value = this.message;
             message.addEventListener('input', () => {
+                updateSyntax();
                 this.updateMessage(message.value);
+                updateScrollDebounced();
             });
+            setSlashCommandAutoComplete(message, true);
             //TODO move tab support for textarea into its own helper(?) and use for both this and .editor_maximize
-            message.addEventListener('keydown', (evt) => {
+            message.addEventListener('keydown', async(evt) => {
                 if (evt.key == 'Tab' && !evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
                     evt.preventDefault();
                     const start = message.selectionStart;
@@ -265,12 +303,12 @@ export class QuickReply {
                         message.value = `${message.value.substring(0, lineStart)}${message.value.substring(lineStart, end).replace(/\n/g, '\n\t')}${message.value.substring(end)}`;
                         message.selectionStart = start + 1;
                         message.selectionEnd = end + count;
-                        this.updateMessage(message.value);
+                        updateSyntax();
                     } else {
                         message.value = `${message.value.substring(0, start)}\t${message.value.substring(end)}`;
                         message.selectionStart = start + 1;
                         message.selectionEnd = end + 1;
-                        this.updateMessage(message.value);
+                        updateSyntax();
                     }
                 } else if (evt.key == 'Tab' && evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
                     evt.preventDefault();
@@ -281,15 +319,37 @@ export class QuickReply {
                     message.value = `${message.value.substring(0, lineStart)}${message.value.substring(lineStart, end).replace(/\n\t/g, '\n')}${message.value.substring(end)}`;
                     message.selectionStart = start - 1;
                     message.selectionEnd = end - count;
-                    this.updateMessage(message.value);
+                    updateSyntax();
                 } else if (evt.key == 'Enter' && evt.ctrlKey && !evt.shiftKey && !evt.altKey) {
                     evt.stopPropagation();
                     evt.preventDefault();
                     if (executeShortcut.checked) {
-                        this.executeFromEditor();
+                        const selectionStart = message.selectionStart;
+                        const selectionEnd = message.selectionEnd;
+                        message.blur();
+                        await this.executeFromEditor();
+                        if (document.activeElement != message) {
+                            message.focus();
+                            message.selectionStart = selectionStart;
+                            message.selectionEnd = selectionEnd;
+                        }
                     }
                 }
             });
+            message.addEventListener('wheel', (evt)=>{
+                updateScrollDebounced(evt);
+            });
+            message.addEventListener('scroll', (evt)=>{
+                updateScrollDebounced();
+            });
+            message.style.color = 'transparent';
+            message.style.background = 'transparent';
+            message.style.setProperty('text-shadow', 'none', 'important');
+            /**@type {HTMLElement}*/
+            const messageSyntaxInner = dom.querySelector('#qr--modal-messageSyntaxInner');
+            updateSyntax();
+            updateWrap();
+            updateTabSize();
 
             // context menu
             /**@type {HTMLTemplateElement}*/
@@ -414,9 +474,15 @@ export class QuickReply {
                 this.updateContext();
             });
 
+            /**@type {HTMLElement}*/
+            const executeProgress = dom.querySelector('#qr--modal-executeProgress');
+            this.editorExecuteProgress = executeProgress;
             /**@type {HTMLElement}*/
             const executeErrors = dom.querySelector('#qr--modal-executeErrors');
             this.editorExecuteErrors = executeErrors;
+            /**@type {HTMLElement}*/
+            const executeResult = dom.querySelector('#qr--modal-executeResult');
+            this.editorExecuteResult = executeResult;
             /**@type {HTMLInputElement}*/
             const executeHide = dom.querySelector('#qr--modal-executeHide');
             this.editorExecuteHide = executeHide;
@@ -426,6 +492,26 @@ export class QuickReply {
             executeBtn.addEventListener('click', async()=>{
                 await this.executeFromEditor();
             });
+            /**@type {HTMLElement}*/
+            const executeBtnPause = dom.querySelector('#qr--modal-pause');
+            this.editorExecuteBtnPause = executeBtnPause;
+            executeBtnPause.addEventListener('click', async()=>{
+                if (this.abortController) {
+                    if (this.abortController.signal.paused) {
+                        this.abortController.continue('Continue button clicked');
+                        this.editorExecuteProgress.classList.remove('qr--paused');
+                    } else {
+                        this.abortController.pause('Pause button clicked');
+                        this.editorExecuteProgress.classList.add('qr--paused');
+                    }
+                }
+            });
+            /**@type {HTMLElement}*/
+            const executeBtnStop = dom.querySelector('#qr--modal-stop');
+            this.editorExecuteBtnStop = executeBtnStop;
+            executeBtnStop.addEventListener('click', async()=>{
+                this.abortController?.abort('Stop button clicked');
+            });
 
             await popupResult;
         } else {
@@ -436,21 +522,54 @@ export class QuickReply {
     async executeFromEditor() {
         if (this.editorExecutePromise) return;
         this.editorExecuteBtn.classList.add('qr--busy');
+        this.editorExecuteProgress.style.setProperty('--prog', '0');
+        this.editorExecuteErrors.classList.remove('qr--hasErrors');
+        this.editorExecuteResult.classList.remove('qr--hasResult');
+        this.editorExecuteProgress.classList.remove('qr--error');
+        this.editorExecuteProgress.classList.remove('qr--success');
+        this.editorExecuteProgress.classList.remove('qr--paused');
+        this.editorExecuteProgress.classList.remove('qr--aborted');
         this.editorExecuteErrors.innerHTML = '';
+        this.editorExecuteResult.innerHTML = '';
         if (this.editorExecuteHide.checked) {
             this.editorPopup.dom.classList.add('qr--hide');
         }
         try {
-            this.editorExecutePromise = this.execute();
-            await this.editorExecutePromise;
+            this.editorExecutePromise = this.execute({}, true);
+            const result = await this.editorExecutePromise;
+            if (this.abortController?.signal?.aborted) {
+                this.editorExecuteProgress.classList.add('qr--aborted');
+            } else {
+                this.editorExecuteResult.textContent = result?.toString();
+                this.editorExecuteResult.classList.add('qr--hasResult');
+                this.editorExecuteProgress.classList.add('qr--success');
+            }
+            this.editorExecuteProgress.classList.remove('qr--paused');
         } catch (ex) {
-            this.editorExecuteErrors.textContent = ex.message;
+            this.editorExecuteErrors.classList.add('qr--hasErrors');
+            this.editorExecuteProgress.classList.add('qr--error');
+            this.editorExecuteProgress.classList.remove('qr--paused');
+            if (ex instanceof SlashCommandParserError) {
+                this.editorExecuteErrors.innerHTML = `
+                    <div>${ex.message}</div>
+                    <div>Line: ${ex.line} Column: ${ex.column}</div>
+                    <pre style="text-align:left;">${ex.hint}</pre>
+                `;
+            } else {
+                this.editorExecuteErrors.innerHTML = `
+                    <div>${ex.message}</div>
+                `;
+            }
         }
         this.editorExecutePromise = null;
         this.editorExecuteBtn.classList.remove('qr--busy');
         this.editorPopup.dom.classList.remove('qr--hide');
     }
 
+    updateEditorProgress(done, total) {
+        this.editorExecuteProgress.style.setProperty('--prog', `${done / total * 100}`);
+    }
+
 
 
 
@@ -526,12 +645,22 @@ export class QuickReply {
     }
 
 
-    async execute(args = {}) {
+    async execute(args = {}, isEditor = false, isRun = false) {
         if (this.message?.length > 0 && this.onExecute) {
-            const message = this.message.replace(/\{\{arg::([^}]+)\}\}/g, (_, key) => {
-                return args[key] ?? '';
+            const scope = new SlashCommandScope();
+            for (const key of Object.keys(args)) {
+                scope.setMacro(`arg::${key}`, args[key]);
+            }
+            if (isEditor) {
+                this.abortController = new SlashCommandAbortController();
+            }
+            return await this.onExecute(this, {
+                message:this.message,
+                isAutoExecute: args.isAutoExecute ?? false,
+                isEditor,
+                isRun,
+                scope,
             });
-            return await this.onExecute(this, message, args.isAutoExecute ?? false);
         }
     }
 

public/scripts/extensions/quick-reply/src/QuickReplySet.js

@@ -1,5 +1,6 @@
 import { getRequestHeaders, substituteParams } from '../../../../script.js';
-import { executeSlashCommands } from '../../../slash-commands.js';
+import { executeSlashCommands, executeSlashCommandsOnChatInput, executeSlashCommandsWithOptions } from '../../../slash-commands.js';
+import { SlashCommandScope } from '../../../slash-commands/SlashCommandScope.js';
 import { debounceAsync, warn } from '../index.js';
 import { QuickReply } from './QuickReply.js';
 
@@ -100,15 +101,29 @@ export class QuickReplySet {
 
 
     /**
-     * @param {QuickReply} qr
-     * @param {String} [message] - optional altered message to be used
+     *
+     * @param {QuickReply} qr The QR to execute.
+     * @param {object} options
+     * @param {string} [options.message] (null) altered message to be used
+     * @param {boolean} [options.isAutoExecute] (false) whether the execution is triggered by auto execute
+     * @param {boolean} [options.isEditor] (false) whether the execution is triggered by the QR editor
+     * @param {boolean} [options.isRun] (false) whether the execution is triggered by /run or /: (window.executeQuickReplyByName)
+     * @param {SlashCommandScope} [options.scope] (null) scope to be used when running the command
+     * @returns
      */
-    async execute(qr, message = null, isAutoExecute = false) {
+    async executeWithOptions(qr, options = {}) {
+        options = Object.assign({
+            message:null,
+            isAutoExecute:false,
+            isEditor:false,
+            isRun:false,
+            scope:null,
+        }, options);
         /**@type {HTMLTextAreaElement}*/
         const ta = document.querySelector('#send_textarea');
-        const finalMessage = message ?? qr.message;
+        const finalMessage = options.message ?? qr.message;
         let input = ta.value;
-        if (!isAutoExecute && this.injectInput && input.length > 0) {
+        if (!options.isAutoExecute && !options.isEditor && !options.isRun && this.injectInput && input.length > 0) {
             if (this.placeBeforeInput) {
                 input = `${finalMessage} ${input}`;
             } else {
@@ -119,7 +134,24 @@ export class QuickReplySet {
         }
 
         if (input[0] == '/' && !this.disableSend) {
-            const result = await executeSlashCommands(input);
+            let result;
+            if (options.isAutoExecute || options.isRun) {
+                result = await executeSlashCommandsWithOptions(input, {
+                    handleParserErrors: true,
+                    scope: options.scope,
+                });
+            } else if (options.isEditor) {
+                result = await executeSlashCommandsWithOptions(input, {
+                    handleParserErrors: false,
+                    scope: options.scope,
+                    abortController: qr.abortController,
+                    onProgress: (done, total) => qr.updateEditorProgress(done, total),
+                });
+            } else {
+                result = await executeSlashCommandsOnChatInput(input, {
+                    scope: options.scope,
+                });
+            }
             return typeof result === 'object' ? result?.pipe : '';
         }
 
@@ -131,6 +163,18 @@ export class QuickReplySet {
             document.querySelector('#send_but').click();
         }
     }
+    /**
+     * @param {QuickReply} qr
+     * @param {String} [message] - optional altered message to be used
+     * @param {SlashCommandScope} [scope] - optional scope to be used when running the command
+     */
+    async execute(qr, message = null, isAutoExecute = false, scope = null) {
+        return this.executeWithOptions(qr, {
+            message,
+            isAutoExecute,
+            scope,
+        });
+    }
 
 
 
@@ -152,7 +196,7 @@ export class QuickReplySet {
     }
 
     hookQuickReply(qr) {
-        qr.onExecute = (_, message, isAutoExecute)=>this.execute(qr, message, isAutoExecute);
+        qr.onExecute = (_, options)=>this.executeWithOptions(qr, options);
         qr.onDelete = ()=>this.removeQuickReply(qr);
         qr.onUpdate = ()=>this.save();
     }

public/scripts/extensions/quick-reply/src/SlashCommandHandler.js

@@ -1,4 +1,6 @@
-import { registerSlashCommand } from '../../../slash-commands.js';
+import { SlashCommand } from '../../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../../slash-commands/SlashCommandArgument.js';
+import { SlashCommandParser } from '../../../slash-commands/SlashCommandParser.js';
 import { isTrueBoolean } from '../../../utils.js';
 // eslint-disable-next-line no-unused-vars
 import { QuickReplyApi } from '../api/QuickReplyApi.js';
@@ -17,46 +19,331 @@ export class SlashCommandHandler {
 
 
     init() {
-        registerSlashCommand('qr', (_, value) => this.executeQuickReplyByIndex(Number(value)), [], '<span class="monospace">(number)</span> – activates the specified Quick Reply', true, true);
-        registerSlashCommand('qrset', ()=>toastr.warning('The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.'), [], '<strong>DEPRECATED</strong> – The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.', true, true);
-        registerSlashCommand('qr-set', (args, value)=>this.toggleGlobalSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – toggle global QR set', true, true);
-        registerSlashCommand('qr-set-on', (args, value)=>this.addGlobalSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – activate global QR set', true, true);
-        registerSlashCommand('qr-set-off', (_, value)=>this.removeGlobalSet(value), [], '<span class="monospace">(number)</span> – deactivate global QR set', true, true);
-        registerSlashCommand('qr-chat-set', (args, value)=>this.toggleChatSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – toggle chat QR set', true, true);
-        registerSlashCommand('qr-chat-set-on', (args, value)=>this.addChatSet(value, args), [], '<span class="monospace">[visible=true] (number)</span> – activate chat QR set', true, true);
-        registerSlashCommand('qr-chat-set-off', (_, value)=>this.removeChatSet(value), [], '<span class="monospace">(number)</span> – deactivate chat QR set', true, true);
-        registerSlashCommand('qr-set-list', (_, value)=>this.listSets(value ?? 'all'), [], '(all|global|chat) – gets a list of the names of all quick reply sets', true, true);
-        registerSlashCommand('qr-list', (_, value)=>this.listQuickReplies(value), [], '(set name) – gets a list of the names of all quick replies in this quick reply set', true, true);
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr',
+            callback: (_, value) => this.executeQuickReplyByIndex(Number(value)),
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'number', [ARGUMENT_TYPE.NUMBER], true,
+                ),
+            ],
+            helpString: 'Activates the specified Quick Reply',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qrset',
+            callback: () => toastr.warning('The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.'),
+            helpString: '<strong>DEPRECATED</strong> – The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set',
+            callback: (args, value) => this.toggleGlobalSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Toggle global QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-on',
+            callback: (args, value) => this.addGlobalSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Activate global QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-off',
+            callback: (_, value) => this.removeGlobalSet(value),
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Deactivate global QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set',
+            callback: (args, value) => this.toggleChatSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Toggle chat QR set',
+        }));
 
-        const qrArgs = `
-        label    - string - text on the button, e.g., label=MyButton
-        set      - string - name of the QR set, e.g., set=PresetName1
-        hidden   - bool   - whether the button should be hidden, e.g., hidden=true
-        startup  - bool   - auto execute on app startup, e.g., startup=true
-        user     - bool   - auto execute on user message, e.g., user=true
-        bot      - bool   - auto execute on AI message, e.g., bot=true
-        load     - bool   - auto execute on chat load, e.g., load=true
-        group    - bool   - auto execute on group member selection, e.g., group=true
-        title    - string - title / tooltip to be shown on button, e.g., title="My Fancy Button"
-        `.trim();
-        const qrUpdateArgs = `
-        newlabel - string - new text for the button, e.g. newlabel=MyRenamedButton
-        ${qrArgs}
-        `.trim();
-        registerSlashCommand('qr-create', (args, message)=>this.createQuickReply(args, message), [], `<span class="monospace" style="white-space:pre-line;">[arguments] (message)\n  arguments:\n    ${qrArgs}</span> – creates a new Quick Reply, example: <tt>/qr-create set=MyPreset label=MyButton /echo 123</tt>`, true, true);
-        registerSlashCommand('qr-update', (args, message)=>this.updateQuickReply(args, message), [], `<span class="monospace" style="white-space:pre-line;">[arguments] (message)\n  arguments:\n    ${qrUpdateArgs}</span> – updates Quick Reply, example: <tt>/qr-update set=MyPreset label=MyButton newlabel=MyRenamedButton /echo 123</tt>`, true, true);
-        registerSlashCommand('qr-delete', (args, name)=>this.deleteQuickReply(args, name), [], '<span class="monospace">set=string [label]</span> – deletes Quick Reply', true, true);
-        registerSlashCommand('qr-contextadd', (args, name)=>this.createContextItem(args, name), [], '<span class="monospace">set=string label=string [chain=false] (preset name)</span> – add context menu preset to a QR, example: <tt>/qr-contextadd set=MyPreset label=MyButton chain=true MyOtherPreset</tt>', true, true);
-        registerSlashCommand('qr-contextdel', (args, name)=>this.deleteContextItem(args, name), [], '<span class="monospace">set=string label=string (preset name)</span> – remove context menu preset from a QR, example: <tt>/qr-contextdel set=MyPreset label=MyButton MyOtherPreset</tt>', true, true);
-        registerSlashCommand('qr-contextclear', (args, label)=>this.clearContextMenu(args, label), [], '<span class="monospace">set=string (label)</span> – remove all context menu presets from a QR, example: <tt>/qr-contextclear set=MyPreset MyButton</tt>', true, true);
-        const presetArgs = `
-        nosend  - bool - disable send / insert in user input (invalid for slash commands)
-        before  - bool - place QR before user input
-        inject  - bool - inject user input automatically (if disabled use {{input}})
-        `.trim();
-        registerSlashCommand('qr-set-create', (args, name)=>this.createSet(name, args), ['qr-presetadd'], `<span class="monospace" style="white-space:pre-line;">[arguments] (name)\n  arguments:\n    ${presetArgs}</span> – create a new preset (overrides existing ones), example: <tt>/qr-set-add MyNewPreset</tt>`, true, true);
-        registerSlashCommand('qr-set-update', (args, name)=>this.updateSet(name, args), ['qr-presetupdate'], `<span class="monospace" style="white-space:pre-line;">[arguments] (name)\n  arguments:\n    ${presetArgs}</span> – update an existing preset, example: <tt>/qr-set-update enabled=false MyPreset</tt>`, true, true);
-        registerSlashCommand('qr-set-delete', (args, name)=>this.deleteSet(name), ['qr-presetdelete'], `<span class="monospace" style="white-space:pre-line;">(name)\n  arguments:\n    ${presetArgs}</span> – delete an existing preset, example: <tt>/qr-set-delete MyPreset</tt>`, true, true);
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set-on',
+            callback: (args, value) => this.addChatSet(value, args),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'visible', 'whether the QR set should be visible', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true', ['true', 'false'],
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Activate chat QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set-off',
+            callback: (_, value) => this.removeChatSet(value),
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Deactivate chat QR set',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-list',
+            callback: (_, value) => this.listSets(value ?? 'all'),
+            returns: 'list of QR sets',
+            namedArgumentList: [],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'set type', [ARGUMENT_TYPE.STRING], false, false, null, ['all', 'global', 'chat'],
+                ),
+            ],
+            helpString: 'Gets a list of the names of all quick reply sets.',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-list',
+            callback: (_, value) => this.listQuickReplies(value),
+            returns: 'list of QRs',
+            namedArgumentList: [],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'set name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: 'Gets a list of the names of all quick replies in this quick reply set.',
+        }));
+
+        const qrArgs = [
+            new SlashCommandNamedArgument('label', 'text on the button, e.g., label=MyButton', [ARGUMENT_TYPE.STRING]),
+            new SlashCommandNamedArgument('set', 'name of the QR set, e.g., set=PresetName1', [ARGUMENT_TYPE.STRING]),
+            new SlashCommandNamedArgument('hidden', 'whether the button should be hidden, e.g., hidden=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('startup', 'auto execute on app startup, e.g., startup=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('user', 'auto execute on user message, e.g., user=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('bot', 'auto execute on AI message, e.g., bot=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('load', 'auto execute on chat load, e.g., load=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('group', 'auto execute on group member selection, e.g., group=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
+            new SlashCommandNamedArgument('title', 'title / tooltip to be shown on button, e.g., title="My Fancy Button"', [ARGUMENT_TYPE.STRING], false),
+        ];
+        const qrUpdateArgs = [
+            new SlashCommandNamedArgument('newlabel', 'new text for the button', [ARGUMENT_TYPE.STRING], false),
+        ];
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-create',
+            callback: (args, message) => this.createQuickReply(args, message),
+            namedArgumentList: qrArgs,
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'command', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>Creates a new Quick Reply.</div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-create set=MyPreset label=MyButton /echo 123</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-update',
+            callback: (args, message) => this.updateQuickReply(args, message),
+            returns: 'updated quick reply',
+            namedArgumentList: [...qrUpdateArgs, ...qrArgs],
+            helpString: `
+                <div>
+                    Updates Quick Reply.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-update set=MyPreset label=MyButton newlabel=MyRenamedButton /echo 123</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-delete',
+            callback: (args, name) => this.deleteQuickReply(args, name),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'Quick Reply set', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'label', 'Quick Reply label', [ARGUMENT_TYPE.STRING], false,
+                ),
+            ],
+            helpString: 'Deletes a Quick Reply from the specified set. If no label is provided, the entire set is deleted.',
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextadd',
+            callback: (args, name) => this.createContextItem(args, name),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'label', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'chain', 'boolean', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'preset name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Add context menu preset to a QR.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-contextadd set=MyPreset label=MyButton chain=true MyOtherPreset</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextdel',
+            callback: (args, name) => this.deleteContextItem(args, name),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+                new SlashCommandNamedArgument(
+                    'label', 'string', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'preset name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Remove context menu preset from a QR.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-contextdel set=MyPreset label=MyButton MyOtherPreset</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextclear',
+            callback: (args, label) => this.clearContextMenu(args, label),
+            namedArgumentList: [
+                new SlashCommandNamedArgument(
+                    'set', 'context menu preset name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'label', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Remove all context menu presets from a QR.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-contextclear set=MyPreset MyButton</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+
+        const presetArgs = [
+            new SlashCommandNamedArgument('nosend', 'disable send / insert in user input (invalid for slash commands)', [ARGUMENT_TYPE.BOOLEAN], false),
+            new SlashCommandNamedArgument('before', 'place QR before user input', [ARGUMENT_TYPE.BOOLEAN], false),
+            new SlashCommandNamedArgument('inject', 'inject user input automatically (if disabled use {{input}})', [ARGUMENT_TYPE.BOOLEAN], false),
+        ];
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-create',
+            callback: (args, name) => this.createSet(name, args),
+            aliases: ['qr-presetadd'],
+            namedArgumentList: presetArgs,
+            unnamedArgumentList: [
+                new SlashCommandArgument(
+                    'name', [ARGUMENT_TYPE.STRING], true,
+                ),
+            ],
+            helpString: `
+                <div>
+                    Create a new preset (overrides existing ones).
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <ul>
+                        <li>
+                            <pre><code>/qr-set-add MyNewPreset</code></pre>
+                        </li>
+                    </ul>
+                </div>
+            `,
+        }));
+
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-update',
+            callback: (args, name) => this.updateSet(name, args),
+            aliases: ['qr-presetupdate'],
+            namedArgumentList: presetArgs,
+            unnamedArgumentList: [
+                new SlashCommandArgument('name', [ARGUMENT_TYPE.STRING], true),
+            ],
+            helpString: `
+                <div>
+                    Update an existing preset.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <pre><code>/qr-set-update enabled=false MyPreset</code></pre>
+                </div>
+            `,
+        }));
+        SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-delete',
+            callback: (args, name) => this.deleteSet(name),
+            aliases: ['qr-presetdelete'],
+            unnamedArgumentList: [
+                new SlashCommandArgument('name', [ARGUMENT_TYPE.STRING], true),
+            ],
+            helpString: `
+                <div>
+                    Delete an existing preset.
+                </div>
+                <div>
+                    <strong>Example:</strong>
+                    <pre><code>/qr-set-delete MyPreset</code></pre>
+                </div>
+            `,
+        }));
     }
 
 

public/scripts/extensions/quick-reply/style.css

@@ -238,11 +238,13 @@
   display: flex;
   flex-direction: row;
   gap: 1em;
+  overflow: hidden;
 }
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
   flex: 0 0 auto;
@@ -268,6 +270,7 @@
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
   display: flex;
@@ -283,17 +286,167 @@
 .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
   font-size: inherit;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message {
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
   flex: 1 1 auto;
+  display: grid;
+  text-align: left;
+  overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-execute {
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
+  grid-column: 1;
+  grid-row: 1;
+  padding: 0;
+  margin: 0;
+  border: none;
+  overflow: hidden;
+  min-width: 100%;
+  width: 0;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner {
+  height: 100%;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
+  grid-column: 1;
+  grid-row: 1;
+  caret-color: white;
+  mix-blend-mode: difference;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
+  visibility: hidden;
+  cursor: default;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
+  padding: 0.75em;
+  margin: 0;
+  border: none;
+  resize: none;
+  line-height: 1.2;
+  border: 1px solid var(--SmartThemeBorderColor);
+  border-radius: 5px;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons {
+  display: flex;
+  gap: 1em;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton {
+  border-width: 2px;
+  border-style: solid;
   display: flex;
   flex-direction: row;
   gap: 0.5em;
+  padding: 0.5em 0.75em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-execute.qr--busy {
-  opacity: 0.5;
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon {
+  display: flex;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+  transition: 200ms;
+  filter: grayscale(0);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
   cursor: wait;
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+  border-color: #51a351;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+  cursor: default;
+  opacity: 0.5;
+  filter: grayscale(1);
+  pointer-events: none;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause,
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop {
+  cursor: pointer;
+  opacity: 1;
+  filter: grayscale(0);
+  pointer-events: all;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause {
+  border-color: #92befc;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+  border-color: #d78872;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress {
+  --prog: 0;
+  --progColor: #92befc;
+  --progFlashColor: #d78872;
+  --progSuccessColor: #51a351;
+  --progErrorColor: #bd362f;
+  --progAbortedColor: #d78872;
+  height: 0.5em;
+  background-color: var(--black50a);
+  position: relative;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress:after {
+  content: '';
+  background-color: var(--progColor);
+  position: absolute;
+  inset: 0;
+  right: calc(100% - var(--prog) * 1%);
+  transition: 200ms;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
+  animation-name: qr--progressPulse;
+  animation-duration: 1500ms;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0s;
+  animation-iteration-count: infinite;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after {
+  background-color: var(--progAbortedColor);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--success:after {
+  background-color: var(--progSuccessColor);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--error:after {
+  background-color: var(--progErrorColor);
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors {
+  display: none;
+  text-align: left;
+  font-size: smaller;
+  background-color: #bd362f;
+  color: white;
+  padding: 0.5em;
+  overflow: auto;
+  min-width: 100%;
+  width: 0;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors {
+  display: block;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult {
+  display: none;
+  text-align: left;
+  font-size: smaller;
+  background-color: #51a351;
+  color: white;
+  padding: 0.5em;
+  overflow: auto;
+  min-width: 100%;
+  width: 0;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult.qr--hasResult {
+  display: block;
+}
+.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult:before {
+  content: 'Result: ';
+}
+@keyframes qr--progressPulse {
+  0%,
+  100% {
+    background-color: var(--progColor);
+  }
+  50% {
+    background-color: var(--progFlashColor);
+  }
 }
 .shadow_popup.qr--hide {
   opacity: 0 !important;

public/scripts/extensions/quick-reply/style.less

@@ -264,11 +264,13 @@
 			display: flex;
 			flex-direction: row;
 			gap: 1em;
+			overflow: hidden;
 
 			> #qr--main {
 				flex: 1 1 auto;
 				display: flex;
 				flex-direction: column;
+				overflow: hidden;
 				> .qr--labels {
 					flex: 0 0 auto;
 					display: flex;
@@ -293,6 +295,7 @@
 					flex: 1 1 auto;
 					display: flex;
 					flex-direction: column;
+					overflow: hidden;
 					> .qr--modal-editorSettings {
 						display: flex;
 						flex-direction: row;
@@ -307,24 +310,169 @@
 							}
 						}
 					}
-					> #qr--modal-message {
+					> #qr--modal-messageHolder {
 						flex: 1 1 auto;
+						display: grid;
+						text-align: left;
+						overflow: hidden;
+						> #qr--modal-messageSyntax {
+							grid-column: 1;
+							grid-row: 1;
+							padding: 0;
+							margin: 0;
+							border: none;
+							overflow: hidden;
+							min-width: 100%;
+							width: 0;
+							> #qr--modal-messageSyntaxInner {
+								height: 100%;
+							}
+						}
+						> #qr--modal-message {
+							grid-column: 1;
+							grid-row: 1;
+							caret-color: white;
+							mix-blend-mode: difference;
+							&::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
+								visibility: hidden;
+								cursor: default;
+							}
+						}
+						#qr--modal-message, #qr--modal-messageSyntaxInner {
+							padding: 0.75em;
+							margin: 0;
+							border: none;
+							resize: none;
+							line-height: 1.2;
+							border: 1px solid var(--SmartThemeBorderColor);
+							border-radius: 5px;
+						}
 					}
 				}
 			}
 
-			#qr--modal-execute {
+			#qr--modal-executeButtons {
 				display: flex;
-				flex-direction: row;
-				gap: 0.5em;
-				&.qr--busy {
-					opacity: 0.5;
-					cursor: wait;
+				gap: 1em;
+				.qr--modal-executeButton {
+					border-width: 2px;
+					border-style: solid;
+					display: flex;
+					flex-direction: row;
+					gap: 0.5em;
+					padding: 0.5em 0.75em;
+					.qr--modal-executeComboIcon {
+						display: flex;
+					}
 				}
+				#qr--modal-execute {
+					transition: 200ms;
+					filter: grayscale(0);
+					&.qr--busy {
+						cursor: wait;
+						opacity: 0.5;
+						filter: grayscale(1);
+					}
+				}
+				#qr--modal-execute {
+					border-color: rgb(81, 163, 81);
+				}
+				#qr--modal-pause, #qr--modal-stop {
+					cursor: default;
+					opacity: 0.5;
+					filter: grayscale(1);
+					pointer-events: none;
+				}
+				.qr--busy {
+					~ #qr--modal-pause, ~ #qr--modal-stop {
+						cursor: pointer;
+						opacity: 1;
+						filter: grayscale(0);
+						pointer-events: all;
+					}
+				}
+				#qr--modal-pause {
+					border-color: rgb(146, 190, 252);
+				}
+				#qr--modal-stop {
+					border-color: rgb(215, 136, 114);
+				}
+			}
+			#qr--modal-executeProgress {
+				--prog: 0;
+				--progColor: rgb(146, 190, 252);
+				--progFlashColor: rgb(215, 136, 114);
+				--progSuccessColor: rgb(81, 163, 81);
+				--progErrorColor: rgb(189, 54, 47);
+				--progAbortedColor: rgb(215, 136, 114);
+				height: 0.5em;
+				background-color: var(--black50a);
+				position: relative;
+				&:after {
+					content: '';
+					background-color: var(--progColor);
+					position: absolute;
+					inset: 0;
+					right: calc(100% - var(--prog) * 1%);
+					transition: 200ms;
+				}
+				&.qr--paused:after {
+					animation-name: qr--progressPulse;
+					animation-duration: 1500ms;
+					animation-timing-function: ease-in-out;
+					animation-delay: 0s;
+					animation-iteration-count: infinite;
+				}
+				&.qr--aborted:after {
+					background-color: var(--progAbortedColor);
+				}
+				&.qr--success:after {
+					background-color: var(--progSuccessColor);
+				}
+				&.qr--error:after {
+					background-color: var(--progErrorColor);
+				}
+			}
+			#qr--modal-executeErrors {
+				display: none;
+				&.qr--hasErrors {
+					display: block;
+				}
+				text-align: left;
+				font-size: smaller;
+				background-color: rgb(189, 54, 47);
+				color: white;
+				padding: 0.5em;
+				overflow: auto;
+				min-width: 100%;
+				width: 0;
+			}
+			#qr--modal-executeResult {
+				display: none;
+				&.qr--hasResult {
+					display: block;
+				}
+				&:before { content: 'Result: '; }
+				text-align: left;
+				font-size: smaller;
+				background-color: rgb(81, 163, 81);
+				color: white;
+				padding: 0.5em;
+				overflow: auto;
+				min-width: 100%;
+				width: 0;
 			}
 		}
 	}
 }
+@keyframes qr--progressPulse {
+    0%, 100% {
+        background-color: var(--progColor);
+    }
+    50% {
+        background-color: var(--progFlashColor);
+    }
+}
 
 .shadow_popup.qr--hide {
 	opacity: 0 !important;

public/scripts/extensions/regex/index.js

@@ -1,6 +1,8 @@
 import { callPopup, getCurrentChatId, reloadCurrentChat, saveSettingsDebounced } from '../../../script.js';
 import { extension_settings, renderExtensionTemplateAsync } from '../../extensions.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { download, getFileText, getSortableDelay, uuidv4 } from '../../utils.js';
 import { resolveVariable } from '../../variables.js';
 import { regex_placement, runRegexScript } from './engine.js';
@@ -353,5 +355,20 @@ jQuery(async () => {
     await loadRegexScripts();
     $('#saved_regex_scripts').sortable('enable');
 
-    registerSlashCommand('regex', runRegexCallback, [], '(name=scriptName [input]) – runs a Regex extension script by name on the provided string. The script must be enabled.', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'regex',
+        callback: runRegexCallback,
+        returns: 'replaced text',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'name', 'script name', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'input', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: 'Runs a Regex extension script by name on the provided string. The script must be enabled.',
+    }));
+
 });

public/scripts/extensions/stable-diffusion/index.js

@@ -25,7 +25,9 @@ import { getMessageTimeStamp, humanizedDateTime } from '../../RossAscends-mods.j
 import { SECRET_KEYS, secret_state } from '../../secrets.js';
 import { getNovelUnlimitedImageGeneration, getNovelAnlas, loadNovelSubscriptionData } from '../../nai-settings.js';
 import { getMultimodalCaption } from '../shared.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 import { resolveVariable } from '../../variables.js';
 export { MODULE_NAME };
 
@@ -3055,8 +3057,43 @@ $('#sd_dropdown [id]').on('click', function () {
 });
 
 jQuery(async () => {
-    registerSlashCommand('imagine', generatePicture, ['sd', 'img', 'image'], helpString, true, true);
-    registerSlashCommand('imagine-comfy-workflow', changeComfyWorkflow, ['icw'], '(workflowName) - change the workflow to be used for image generation with ComfyUI, e.g. <tt>/imagine-comfy-workflow MyWorkflow</tt>');
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'imagine',
+        callback: generatePicture,
+        aliases: ['sd', 'img', 'image'],
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'quiet', 'whether to post the generated image to chat', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false', ['false', 'true'],
+            ),
+            new SlashCommandNamedArgument(
+                'negative', 'negative prompt prefix', [ARGUMENT_TYPE.STRING], false, false, '',
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'argument', [ARGUMENT_TYPE.STRING], false, false, null, Object.values(triggerWords).flat(),
+            ),
+        ],
+        helpString: `
+            <div>
+                Requests to generate an image and posts it to chat (unless quiet=true argument is specified). Supported arguments: <code>${Object.values(triggerWords).flat().join(', ')}</code>.
+            </div>
+            <div>
+                Anything else would trigger a "free mode" to make generate whatever you prompted. Example: <code>/imagine apple tree</code> would generate a picture of an apple tree. Returns a link to the generated image.
+            </div>
+        `,
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'imagine-comfy-workflow',
+        callback: changeComfyWorkflow,
+        aliases: ['icw'],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'workflowName', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: '(workflowName) - change the workflow to be used for image generation with ComfyUI, e.g. <pre><code>/imagine-comfy-workflow MyWorkflow</code></pre>',
+    }));
+
 
     const template = await renderExtensionTemplateAsync('stable-diffusion', 'settings', defaultSettings);
     $('#extensions_settings').append(template);

public/scripts/extensions/token-counter/index.js

@@ -1,6 +1,7 @@
 import { callPopup, main_api } from '../../../script.js';
 import { getContext } from '../../extensions.js';
-import { registerSlashCommand } from '../../slash-commands.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { getFriendlyTokenizerName, getTextTokens, getTokenCountAsync, tokenizers } from '../../tokenizers.js';
 import { resetScrollHeight, debounce } from '../../utils.js';
 import { debounce_timeout } from '../../constants.js';
@@ -132,5 +133,10 @@ jQuery(() => {
         </div>`;
     $('#extensionsMenu').prepend(buttonHtml);
     $('#token_counter').on('click', doTokenCounter);
-    registerSlashCommand('count', doCount, [], '– counts the number of tokens in the current chat', true, false);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'count',
+        callback: doCount,
+        returns: 'number of tokens',
+        helpString: 'Counts the number of tokens in the current chat.',
+    }));
+
 });

public/scripts/extensions/tts/index.js

@@ -8,11 +8,13 @@ import { CoquiTtsProvider } from './coqui.js';
 import { SystemTtsProvider } from './system.js';
 import { NovelTtsProvider } from './novel.js';
 import { power_user } from '../../power-user.js';
-import { registerSlashCommand } from '../../slash-commands.js';
 import { OpenAITtsProvider } from './openai.js';
 import { XTTSTtsProvider } from './xtts.js';
 import { AllTalkTtsProvider } from './alltalk.js';
 import { SpeechT5TtsProvider } from './speecht5.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 export { talkingAnimation };
 
 const UPDATE_INTERVAL = 1000;
@@ -1063,6 +1065,36 @@ $(document).ready(function () {
     eventSource.on(event_types.GROUP_UPDATED, onChatChanged);
     eventSource.on(event_types.MESSAGE_SENT, onMessageEvent);
     eventSource.on(event_types.MESSAGE_RECEIVED, onMessageEvent);
-    registerSlashCommand('speak', onNarrateText, ['narrate', 'tts'], '<span class="monospace">(text)</span>  – narrate any text using currently selected character\'s voice. Use voice="Character Name" argument to set other voice from the voice map, example: <tt>/speak voice="Donald Duck" Quack!</tt>', true, true);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'speak',
+        callback: onNarrateText,
+        aliases: ['narrate', 'tts'],
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'voice', 'character voice name', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'text', [ARGUMENT_TYPE.STRING], true,
+            ),
+        ],
+        helpString: `
+            <div>
+                Narrate any text using currently selected character's voice.
+            </div>
+            <div>
+                Use <code>voice="Character Name"</code> argument to set other voice from the voice map.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code>/speak voice="Donald Duck" Quack!</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+
     document.body.appendChild(audioElement);
 });