From dca81aef3d746d0643f3f552110266ef83dbb877 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmx.de>
Date: Wed, 19 Jun 2024 01:40:22 +0200
Subject: [PATCH] Small fixes to /popup, /buttons and QR popup

- FIx /popup and /buttons commands to use the new popups
- Change /buttons to utilize data results
- Fix "hide while executing" option from QR editor
- Fix QR editor throwing an error on execution
---
 .../extensions/quick-reply/src/QuickReply.js  |  5 ++--
 .../scripts/extensions/quick-reply/style.css  |  4 ++++
 public/scripts/slash-commands.js              | 24 +++++++++++++------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/public/scripts/extensions/quick-reply/src/QuickReply.js b/public/scripts/extensions/quick-reply/src/QuickReply.js
index f4a09906f..ceccfef31 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReply.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReply.js
@@ -557,7 +557,7 @@ export class QuickReply {
         this.editorExecuteErrors.innerHTML = '';
         this.editorExecuteResult.innerHTML = '';
         if (this.editorExecuteHide.checked) {
-            this.editorPopup.dom.classList.add('qr--hide');
+            this.editorPopup.dlg.classList.add('qr--hide');
         }
         try {
             this.editorExecutePromise = this.execute({}, true);
@@ -585,10 +585,11 @@ export class QuickReply {
                     <div>${ex.message}</div>
                 `;
             }
+            const t = toastr.success('b');
         }
         this.editorExecutePromise = null;
         this.editorExecuteBtn.classList.remove('qr--busy');
-        this.editorPopup.dom.classList.remove('qr--hide');
+        this.editorPopup.dlg.classList.remove('qr--hide');
     }
 
     updateEditorProgress(done, total) {
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index dfab049d8..28dd44fba 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -485,6 +485,10 @@
     background-color: var(--progFlashColor);
   }
 }
+
 .popup.qr--hide {
   opacity: 0 !important;
 }
+.popup.qr--hide::backdrop {
+  opacity: 0 !important;
+}
diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js
index 019ab0d45..3672a954d 100644
--- a/public/scripts/slash-commands.js
+++ b/public/scripts/slash-commands.js
@@ -62,6 +62,7 @@ import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { SlashCommandAbortController } from './slash-commands/SlashCommandAbortController.js';
 import { SlashCommandNamedArgumentAssignment } from './slash-commands/SlashCommandNamedArgumentAssignment.js';
 import { SlashCommandEnumValue } from './slash-commands/SlashCommandEnumValue.js';
+import { POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
 export {
     executeSlashCommands, executeSlashCommandsWithOptions, getSlashCommandsHelp, registerSlashCommand,
 };
@@ -1449,6 +1450,7 @@ async function trimTokensCallback(arg, value) {
 
 async function buttonsCallback(args, text) {
     try {
+        /** @type {string[]} */
         const buttons = JSON.parse(resolveVariable(args?.labels));
 
         if (!Array.isArray(buttons) || !buttons.length) {
@@ -1456,18 +1458,24 @@ async function buttonsCallback(args, text) {
             return '';
         }
 
+        // Map custom buttons to results. Start at 2 because 1 and 0 are reserved for ok and cancel
+        const resultToButtonMap = new Map(buttons.map((button, index) => [index + 2, button]));
+
         return new Promise(async (resolve) => {
             const safeValue = DOMPurify.sanitize(text || '');
 
+            /** @type {Popup} */
+            let popup;
+
             const buttonContainer = document.createElement('div');
             buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p', 'm-t-1');
 
-            for (const button of buttons) {
+            for (const [result, button] of resultToButtonMap) {
                 const buttonElement = document.createElement('div');
-                buttonElement.classList.add('menu_button', 'wide100p');
+                buttonElement.classList.add('menu_button', 'result-control', 'wide100p');
+                buttonElement.dataset.result = String(result);
                 buttonElement.addEventListener('click', () => {
-                    resolve(button);
-                    $('#dialogue_popup_ok').trigger('click');
+                    popup?.complete(result);
                 });
                 buttonElement.innerText = button;
                 buttonContainer.appendChild(buttonElement);
@@ -1476,8 +1484,10 @@ async function buttonsCallback(args, text) {
             const popupContainer = document.createElement('div');
             popupContainer.innerHTML = safeValue;
             popupContainer.appendChild(buttonContainer);
-            callPopup(popupContainer, 'text', '', { okButton: 'Cancel' })
-                .then(() => resolve(''))
+
+            popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel' });
+            popup.show()
+                .then((result => resolve(typeof result === 'number' ? resultToButtonMap.get(result) ?? '' : '')))
                 .catch(() => resolve(''));
         });
     } catch {
@@ -1493,7 +1503,7 @@ async function popupCallback(args, value) {
         okButton: args?.okButton !== undefined && typeof args?.okButton === 'string' ? args.okButton : 'Ok',
     };
     await delay(1);
-    await callPopup(safeValue, 'text', '', popupOptions);
+    await callGenericPopup(safeValue, POPUP_TYPE.TEXT, '', popupOptions);
     await delay(1);
     return value;
 }