Merge pull request #2798 from SillyTavern/popup-command-styles

Expand `/popup` command and refactor a bit
This commit is contained in:
Cohee 2024-09-07 02:28:06 +03:00 committed by GitHub
commit 01b6ddbf8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 67 additions and 20 deletions

View File

@ -92,7 +92,7 @@ const showPopupHelper = {
* @param {string?} header - The header text for the popup. * @param {string?} header - The header text for the popup.
* @param {string?} text - The main text for the popup. * @param {string?} text - The main text for the popup.
* @param {PopupOptions} [popupOptions={}] - Options for the popup. * @param {PopupOptions} [popupOptions={}] - Options for the popup.
* @return {Promise<POPUP_RESULT>} A Promise that resolves with the result of the user's interaction. * @return {Promise<POPUP_RESULT?>} A Promise that resolves with the result of the user's interaction.
*/ */
confirm: async (header, text, popupOptions = {}) => { confirm: async (header, text, popupOptions = {}) => {
const content = PopupUtils.BuildTextWithHeader(header, text); const content = PopupUtils.BuildTextWithHeader(header, text);
@ -107,7 +107,7 @@ const showPopupHelper = {
* @param {string?} header - The header text for the popup. * @param {string?} header - The header text for the popup.
* @param {string?} text - The main text for the popup. * @param {string?} text - The main text for the popup.
* @param {PopupOptions} [popupOptions={}] - Options for the popup. * @param {PopupOptions} [popupOptions={}] - Options for the popup.
* @return {Promise<POPUP_RESULT>} A Promise that resolves with the result of the user's interaction. * @return {Promise<POPUP_RESULT?>} A Promise that resolves with the result of the user's interaction.
*/ */
text: async (header, text, popupOptions = {}) => { text: async (header, text, popupOptions = {}) => {
const content = PopupUtils.BuildTextWithHeader(header, text); const content = PopupUtils.BuildTextWithHeader(header, text);

View File

@ -1267,20 +1267,59 @@ export function initDefaultSlashCommands() {
callback: popupCallback, callback: popupCallback,
returns: 'popup text', returns: 'popup text',
namedArgumentList: [ namedArgumentList: [
new SlashCommandNamedArgument( SlashCommandNamedArgument.fromProps({
'large', 'show large popup', [ARGUMENT_TYPE.BOOLEAN], false, false, null, commonEnumProviders.boolean('onOff')(), name: 'large',
), description: 'show large popup',
new SlashCommandNamedArgument( typeList: [ARGUMENT_TYPE.BOOLEAN],
'wide', 'show wide popup', [ARGUMENT_TYPE.BOOLEAN], false, false, null, commonEnumProviders.boolean('onOff')(), enumList: commonEnumProviders.boolean('trueFalse')(),
), defaultValue: 'false',
new SlashCommandNamedArgument( }),
'okButton', 'text for the OK button', [ARGUMENT_TYPE.STRING], false, SlashCommandNamedArgument.fromProps({
), name: 'wide',
description: 'show wide popup',
typeList: [ARGUMENT_TYPE.BOOLEAN],
enumList: commonEnumProviders.boolean('trueFalse')(),
defaultValue: 'false',
}),
SlashCommandNamedArgument.fromProps({
name: 'wider',
description: 'show wider popup',
typeList: [ARGUMENT_TYPE.BOOLEAN],
enumList: commonEnumProviders.boolean('trueFalse')(),
defaultValue: 'false',
}),
SlashCommandNamedArgument.fromProps({
name: 'transparent',
description: 'show transparent popup',
typeList: [ARGUMENT_TYPE.BOOLEAN],
enumList: commonEnumProviders.boolean('trueFalse')(),
defaultValue: 'false',
}),
SlashCommandNamedArgument.fromProps({
name: 'okButton',
description: 'text for the OK button',
typeList: [ARGUMENT_TYPE.STRING],
defaultValue: 'OK',
}),
SlashCommandNamedArgument.fromProps({
name: 'cancelButton',
description: 'text for the Cancel button',
typeList: [ARGUMENT_TYPE.STRING],
}),
SlashCommandNamedArgument.fromProps({
name: 'result',
description: 'if enabled, returns the popup result (as an integer) instead of the popup text. Resolves to 1 for OK and 0 cancel button, empty string for exiting out.',
typeList: [ARGUMENT_TYPE.BOOLEAN],
enumList: commonEnumProviders.boolean('trueFalse')(),
defaultValue: 'false',
}),
], ],
unnamedArgumentList: [ unnamedArgumentList: [
new SlashCommandArgument( SlashCommandArgument.fromProps({
'text', [ARGUMENT_TYPE.STRING], true, description: 'popup text',
), typeList: [ARGUMENT_TYPE.STRING],
isRequired: true,
}),
], ],
helpString: ` helpString: `
<div> <div>
@ -1291,7 +1330,10 @@ export function initDefaultSlashCommands() {
<strong>Example:</strong> <strong>Example:</strong>
<ul> <ul>
<li> <li>
<pre><code>/popup large=on wide=on okButton="Submit" Enter some text:</code></pre> <pre><code>/popup large=on wide=on okButton="Confirm" Please confirm this action.</code></pre>
</li>
<li>
<pre><code>/popup okButton="Left" cancelButton="Right" result=true Do you want to go left or right? | /echo 0 means right, 1 means left. Choice: {{pipe}}</code></pre>
</li> </li>
</ul> </ul>
</div> </div>
@ -1882,16 +1924,21 @@ async function buttonsCallback(args, text) {
} }
async function popupCallback(args, value) { async function popupCallback(args, value) {
const safeValue = DOMPurify.sanitize(value || ''); const safeBody = DOMPurify.sanitize(value || '');
const safeHeader = args?.header && typeof args?.header === 'string' ? DOMPurify.sanitize(args.header) : null;
const requestedResult = isTrueBoolean(args?.result);
/** @type {import('./popup.js').PopupOptions} */
const popupOptions = { const popupOptions = {
large: isTrueBoolean(args?.large), large: isTrueBoolean(args?.large),
wide: isTrueBoolean(args?.wide), wide: isTrueBoolean(args?.wide),
wider: isTrueBoolean(args?.wider),
transparent: isTrueBoolean(args?.transparent),
okButton: args?.okButton !== undefined && typeof args?.okButton === 'string' ? args.okButton : 'Ok', okButton: args?.okButton !== undefined && typeof args?.okButton === 'string' ? args.okButton : 'Ok',
cancelButton: args?.cancelButton !== undefined && typeof args?.cancelButton === 'string' ? args.cancelButton : null,
}; };
await delay(1); const result = await Popup.show.text(safeHeader, safeBody, popupOptions);
await callGenericPopup(safeValue, POPUP_TYPE.TEXT, '', popupOptions); return String(requestedResult ? result ?? '' : value);
await delay(1);
return String(value);
} }
async function getMessagesCallback(args, value) { async function getMessagesCallback(args, value) {