diff --git a/public/css/extensions-panel.css b/public/css/extensions-panel.css index d0c011e73..856503015 100644 --- a/public/css/extensions-panel.css +++ b/public/css/extensions-panel.css @@ -101,3 +101,7 @@ input.extension_missing[type="checkbox"] { .extension_container { display: contents; } + +#extensionsMenu>div.extension_container:empty { + display: none; +} diff --git a/public/scripts/extensions.js b/public/scripts/extensions.js index 62fc6e9d9..7ff293aef 100644 --- a/public/scripts/extensions.js +++ b/public/scripts/extensions.js @@ -347,13 +347,11 @@ function autoConnectInputHandler() { saveSettingsDebounced(); } -function addExtensionsButtonAndMenu() { - const buttonHTML = - ''; - const extensionsMenuHTML = ''; +async function addExtensionsButtonAndMenu() { + const buttonHTML = await renderTemplateAsync('wandButton'); + const extensionsMenuHTML = await renderTemplateAsync('wandMenu'); $(document.body).append(extensionsMenuHTML); - $('#leftSendForm').append(buttonHTML); const button = $('#extensionsMenuButton'); @@ -961,8 +959,8 @@ export async function writeExtensionField(characterId, key, value) { } } -jQuery(function () { - addExtensionsButtonAndMenu(); +jQuery(async function () { + await addExtensionsButtonAndMenu(); $('#extensionsMenuButton').css('display', 'flex'); $('#extensions_connect').on('click', connectClickHandler); diff --git a/public/scripts/extensions/attachments/attach-button.html b/public/scripts/extensions/attachments/attach-button.html new file mode 100644 index 000000000..8db0fa953 --- /dev/null +++ b/public/scripts/extensions/attachments/attach-button.html @@ -0,0 +1,4 @@ +
+
+ Attach a File +
diff --git a/public/scripts/extensions/attachments/index.js b/public/scripts/extensions/attachments/index.js index ca7ef7ba6..3ae36e46f 100644 --- a/public/scripts/extensions/attachments/index.js +++ b/public/scripts/extensions/attachments/index.js @@ -197,8 +197,10 @@ async function enableDataBankAttachment(args, value) { } jQuery(async () => { - const buttons = await renderExtensionTemplateAsync('attachments', 'buttons', {}); - $('#extensionsMenu').prepend(buttons); + const manageButton = await renderExtensionTemplateAsync('attachments', 'manage-button', {}); + const attachButton = await renderExtensionTemplateAsync('attachments', 'attach-button', {}); + $('#data_bank_wand_container').append(manageButton); + $('#attach_file_wand_container').append(attachButton); /** A collection of local enum providers for this context of data bank */ const localEnumProviders = { diff --git a/public/scripts/extensions/attachments/buttons.html b/public/scripts/extensions/attachments/manage-button.html similarity index 51% rename from public/scripts/extensions/attachments/buttons.html rename to public/scripts/extensions/attachments/manage-button.html index 0e9adde85..f051e2aa8 100644 --- a/public/scripts/extensions/attachments/buttons.html +++ b/public/scripts/extensions/attachments/manage-button.html @@ -1,7 +1,4 @@ -
-
- Attach a File -
+
diff --git a/public/scripts/extensions/caption/index.js b/public/scripts/extensions/caption/index.js index 68119f08f..e06449f88 100644 --- a/public/scripts/extensions/caption/index.js +++ b/public/scripts/extensions/caption/index.js @@ -344,7 +344,7 @@ jQuery(async function () { Generate Caption
`); - $('#extensionsMenu').prepend(sendButton); + $('#caption_wand_container').append(sendButton); $(sendButton).on('click', () => { const hasCaptionModule = (modules.includes('caption') && extension_settings.caption.source === 'extras') || diff --git a/public/scripts/extensions/stable-diffusion/index.js b/public/scripts/extensions/stable-diffusion/index.js index f429cdd49..0ec751bec 100644 --- a/public/scripts/extensions/stable-diffusion/index.js +++ b/public/scripts/extensions/stable-diffusion/index.js @@ -3158,7 +3158,7 @@ async function addSDGenButtons() { const buttonHtml = await renderExtensionTemplateAsync('stable-diffusion', 'button'); const dropdownHtml = await renderExtensionTemplateAsync('stable-diffusion', 'dropdown'); - $('#extensionsMenu').prepend(buttonHtml); + $('#sd_wand_container').append(buttonHtml); $(document.body).append(dropdownHtml); const messageButton = $('.sd_message_gen'); diff --git a/public/scripts/extensions/token-counter/index.js b/public/scripts/extensions/token-counter/index.js index b7f0adeb2..7b2bd36a8 100644 --- a/public/scripts/extensions/token-counter/index.js +++ b/public/scripts/extensions/token-counter/index.js @@ -132,7 +132,7 @@ jQuery(() => {
Token Counter `; - $('#extensionsMenu').prepend(buttonHtml); + $('#token_counter_wand_container').append(buttonHtml); $('#token_counter').on('click', doTokenCounter); SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'count', callback: async () => String(await doCount()), diff --git a/public/scripts/extensions/translate/index.js b/public/scripts/extensions/translate/index.js index c599565a9..c6baadd04 100644 --- a/public/scripts/extensions/translate/index.js +++ b/public/scripts/extensions/translate/index.js @@ -476,6 +476,7 @@ async function onTranslateInputMessageClick() { const toast = toastr.info('Input Message is translating', 'Please wait...'); const translatedText = await translate(textarea.value, extension_settings.translate.internal_language); textarea.value = translatedText; + textarea.dispatchEvent(new Event('input', { bubbles: true })); toastr.clear(toast); } @@ -569,9 +570,9 @@ window['translate'] = translate; jQuery(async () => { const html = await renderExtensionTemplateAsync('translate', 'index'); - const buttonHtml = await renderExtensionTemplateAsync('translate', 'buttons'); - $('#extensionsMenu').append(buttonHtml); + + $('#translate_wand_container').append(buttonHtml); $('#translation_container').append(html); $('#translate_chat').on('click', onTranslateChatClick); $('#translate_input_message').on('click', onTranslateInputMessageClick); diff --git a/public/scripts/extensions/tts/index.js b/public/scripts/extensions/tts/index.js index 2bde3f0de..747c640dc 100644 --- a/public/scripts/extensions/tts/index.js +++ b/public/scripts/extensions/tts/index.js @@ -345,7 +345,7 @@ function onAudioControlClicked() { function addAudioControl() { - $('#extensionsMenu').prepend(` + $('#tts_wand_container').append(`
TTS Playback diff --git a/public/scripts/templates/wandButton.html b/public/scripts/templates/wandButton.html new file mode 100644 index 000000000..c20e0bb71 --- /dev/null +++ b/public/scripts/templates/wandButton.html @@ -0,0 +1 @@ + diff --git a/public/scripts/templates/wandMenu.html b/public/scripts/templates/wandMenu.html new file mode 100644 index 000000000..fe06b5319 --- /dev/null +++ b/public/scripts/templates/wandMenu.html @@ -0,0 +1,16 @@ + diff --git a/public/style.css b/public/style.css index 5ecea7c67..c7bc6023c 100644 --- a/public/style.css +++ b/public/style.css @@ -885,7 +885,8 @@ body .panelControlBar { } .options-content a, -#extensionsMenu>div, +#extensionsMenu>.extension_container>div, +#extensionsMenu>div:not(.extension_container), .list-group>div, .list-group .list-group-item, #sd_dropdown .list-group span { @@ -899,13 +900,15 @@ body .panelControlBar { align-items: baseline; } -#extensionsMenu>div, +#extensionsMenu>.extension_container>div, +#extensionsMenu>div:not(.extension_container), .options-content a, .list-group-item { opacity: 0.5; } -#extensionsMenu>div:hover, +#extensionsMenu>.extension_container>div:hover, +#extensionsMenu>div:not(.extension_container):hover, .options-content a:hover, .list-group-item:hover { opacity: 1;