Unblock textarea send during edit (#4714)

60a8b519512f81f5418de378a09b3ee3b7c65ce1

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/script.js+7 -5 Viewed

 import { initAccessibility } from './scripts/a11y.js';
 import { applyStreamFadeIn } from './scripts/util/stream-fadein.js';
 import { initDomHandlers } from './scripts/dom-handlers.js';
 +import { SimpleMutex } from './scripts/util/SimpleMutex.js';
 // API OBJECT FOR EXTERNAL WIRING
 globalThis.SillyTavern = {

 export async function sendTextareaMessage() {
     if (is_send_press) return;
     if (isExecutingCommandsFromChatInput) return;
 -    if (this_edit_mes_id >= 0) return; // don't proceed if editing a message
     let generateType = 'normal';
     // "Continue on send" is activated when the user hits "send" (or presses enter) on an empty chat box, and the last
     // message was sent from a character (not the user or the system).
     const textareaText = String($('#send_textarea').val());

@@ -1581,7 +1581,7 @@ export async function sendTextareaMessage() {
1581	1581	await newAssistantChat({ temporary: false });
1582	1582	}
1583	1583
1584	1584	return await Generate(generateType);
1585	1585	}
1586	1586
1587	1587	/**

@@ -2190,6 +2190,7 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
2190	2190	}
2191	2191
2192	2192	applyCharacterTagsToMessageDivs({ mesIds: newMessageId });
	2193	+ updateEditArrowClasses();
2193	2194	}
2194	2195
2195	2196	/**

         $('#option_continue').trigger('click');
     });
 -    $('#send_but').on('click', function () {
 +    const userInputGenerateMutex = new SimpleMutex(sendTextareaMessage);
 -        sendTextareaMessage();
 +    $('#send_but').on('click', async function () {
 +        await userInputGenerateMutex.update();
     });
     //menu buttons setup

public/scripts/extensions.js+2 -25 Viewed

 import { addLocaleData, getCurrentLocale, t } from './i18n.js';
 import { debounce_timeout } from './constants.js';
 import { accountStorage } from './util/AccountStorage.js';
 +import { SimpleMutex } from './util/SimpleMutex.js';
 export {
     getContext,
     getApiUrl,
 +    SimpleMutex as ModuleWorkerWrapper,
 };
 /** @type {string[]} */

     return renderTemplateAsync(`scripts/extensions/${extensionName}/${templateId}.html`, templateData, sanitize, localize, true);
+}
 -// Disables parallel updates
 -export class ModuleWorkerWrapper {
 -    constructor(callback) {
 -        this.isBusy = false;
 -        this.callback = callback;
 -    }
+-
 -    // Called by the extension
 -    async update(...args) {
 -        // Don't touch me I'm busy...
 -        if (this.isBusy) {
 -            return;
 -        }
+-
 -        // I'm free. Let's update!
 -        try {
 -            this.isBusy = true;
 -            await this.callback(...args);
 -        }
 -        finally {
 -            this.isBusy = false;
 -        }
 -    }
 -}
+-
 export const extension_settings = {
     apiUrl: defaultUrl,
     apiKey: '',

public/scripts/util/SimpleMutex.js+44 -0 Viewed

 +/**
 + * A simple mutex class to prevent concurrent updates.
 + */
 +export class SimpleMutex {
 +    /**
 +     * @type {boolean}
 +     */
 +    isBusy = false;
++
 +    /**
 +     * @type {Function}
 +     */
 +    callback = () => {};
++
 +    /**
 +     * Constructs a SimpleMutex.
 +     * @param {Function} callback Callback function.
 +     */
 +    constructor(callback) {
 +        this.isBusy = false;
 +        this.callback = callback;
 +    }
++
 +    /**
 +     * Updates the mutex by calling the callback if not busy.
 +     * @param  {...any} args Callback args
 +     * @returns {Promise<void>}
 +     */
 +    async update(...args) {
 +        // Don't touch me I'm busy...
 +        if (this.isBusy) {
 +            return;
 +        }
++
 +        // I'm free. Let's update!
 +        try {
 +            this.isBusy = true;
 +            await this.callback(...args);
 +        }
 +        finally {
 +            this.isBusy = false;
 +        }
 +    }
 +}