Make quick edit fields static

public/index.html

@@ -1436,9 +1436,22 @@
                                             <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                         </div>
                                         <div class="inline-drawer-content">
-                                            <div id="quick-edit-container">
+                                            <div class="range-block m-t-1">
-                                                <div class="range-block">
+                                                <div class="justifyLeft" data-i18n="Main">Main</div>
-                                                    <span data-i18n="Select a character to show quick edit options.">Select a character to show quick edit options.</span>
+                                                <div class="wide100p">
+                                                    <textarea id="main_prompt_quick_edit_textarea" class="text_pole textarea_compact" rows="6" placeholder="" data-pm-prompt="main"></textarea>
+                                                </div>
+                                            </div>
+                                            <div class="range-block m-t-1">
+                                                <div class="justifyLeft" data-i18n="NSFW">NSFW</div>
+                                                <div class="wide100p">
+                                                    <textarea id="nsfw_prompt_quick_edit_textarea" class="text_pole textarea_compact" rows="6" placeholder="" data-pm-prompt="nsfw"></textarea>
+                                                </div>
+                                            </div>
+                                            <div class="range-block m-t-1">
+                                                <div class="justifyLeft" data-i18n="Jailbreak">Jailbreak</div>
+                                                <div class="wide100p">
+                                                    <textarea id="jailbreak_prompt_quick_edit_textarea" class="text_pole textarea_compact" rows="6" placeholder="" data-pm-prompt="jailbreak"></textarea>
                                                 </div>
                                             </div>
                                             <div id="claude_assistant_prefill_block" data-source="claude" class="range-block">

public/scripts/PromptManager.js

@@ -513,14 +513,69 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
             });
     }
 
+    // Fill quick edit fields for the first time
+    if ('global' === this.configuration.promptOrder.strategy) {
+        const handleQuickEditSave = (event) => {
+            const promptId = event.target.dataset.pmPrompt;
+            const prompt = this.getPromptById(promptId);
+
+            prompt.content = event.target.value;
+
+            // Update edit form if present
+            // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+            const popupEditFormPrompt = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_prompt');
+            if (popupEditFormPrompt.offsetParent) {
+                popupEditFormPrompt.value = prompt.content;
+            }
+
+            this.log('Saved prompt: ' + promptId);
+            this.saveServiceSettings().then(() => this.render());
+        };
+
+        const mainPrompt = this.getPromptById('main');
+        const mainElementId = this.updateQuickEdit('main', mainPrompt);
+        document.getElementById(mainElementId).addEventListener('blur', handleQuickEditSave);
+
+        const nsfwPrompt = this.getPromptById('nsfw');
+        const nsfwElementId = this.updateQuickEdit('nsfw', nsfwPrompt);
+        document.getElementById(nsfwElementId).addEventListener('blur', handleQuickEditSave);
+
+        const jailbreakPrompt = this.getPromptById('jailbreak');
+        const jailbreakElementId = this.updateQuickEdit('jailbreak', jailbreakPrompt);
+        document.getElementById(jailbreakElementId).addEventListener('blur', handleQuickEditSave);
+    }
+
     // Re-render when chat history changes.
     eventSource.on(event_types.MESSAGE_DELETED, () => this.renderDebounced());
     eventSource.on(event_types.MESSAGE_EDITED, () => this.renderDebounced());
     eventSource.on(event_types.MESSAGE_RECEIVED, () => this.renderDebounced());
 
     // Re-render when chatcompletion settings change
-    eventSource.on(event_types.CHATCOMPLETION_SOURCE_CHANGED, () => this.renderDebounced());
+    eventSource.on(event_types.CHATCOMPLETION_SOURCE_CHANGED, () => {
-    eventSource.on(event_types.CHATCOMPLETION_MODEL_CHANGED, () => this.renderDebounced());
+        this.renderDebounced();
+
+        const mainPrompt = this.getPromptById('main');
+        this.updateQuickEdit('main', mainPrompt);
+
+        const nsfwPrompt = this.getPromptById('nsfw');
+        this.updateQuickEdit('nsfw', nsfwPrompt);
+
+        const jailbreakPrompt = this.getPromptById('jailbreak');
+        this.updateQuickEdit('jailbreak', jailbreakPrompt);
+    });
+
+    eventSource.on(event_types.CHATCOMPLETION_MODEL_CHANGED, () => {
+        this.renderDebounced();
+
+        const mainPrompt = this.getPromptById('main');
+        this.updateQuickEdit('main', mainPrompt);
+
+        const nsfwPrompt = this.getPromptById('nsfw');
+        this.updateQuickEdit('nsfw', nsfwPrompt);
+
+        const jailbreakPrompt = this.getPromptById('jailbreak');
+        this.updateQuickEdit('jailbreak', jailbreakPrompt);
+    });
 
     // Re-render when the character changes.
     eventSource.on('chatLoaded', (event) => {
@@ -1016,8 +1071,11 @@ PromptManagerModule.prototype.createQuickEdit = function (identifier, title) {
 }
 
 PromptManagerModule.prototype.updateQuickEdit = function (identifier, prompt) {
-    const textarea = document.getElementById(`${identifier}_prompt_quick_edit_textarea`);
+    const elementId = `${identifier}_prompt_quick_edit_textarea`;
+    const textarea = document.getElementById(elementId);
     textarea.value = prompt.content;
+
+    return elementId;
 }
 
 /**
@@ -1312,48 +1370,9 @@ PromptManagerModule.prototype.renderPromptManager = function () {
         footerDiv.querySelector('#prompt-manager-export').addEventListener('click', showExportSelection);
         rangeBlockDiv.querySelector('.export-promptmanager-prompts-full').addEventListener('click', this.handleFullExport);
         rangeBlockDiv.querySelector('.export-promptmanager-prompts-character')?.addEventListener('click', this.handleCharacterExport);
-
-        const quickEditContainer = document.getElementById('quick-edit-container');
-        const heights = this.saveTextAreaHeights(quickEditContainer);
-        quickEditContainer.innerHTML = '';
-
-        this.createQuickEdit('jailbreak', 'Jailbreak');
-        this.createQuickEdit('nsfw', 'NSFW');
-        this.createQuickEdit('main', 'Main');
-
-        this.restoreTextAreaHeights(quickEditContainer, heights);
     }
 };
 
-/**
- * Restores the height of each textarea in the container
- * @param container The container to search for textareas
- * @param heights An object with textarea ids as keys and heights as values
- */
-PromptManagerModule.prototype.restoreTextAreaHeights = function(container, heights) {
-    if (Object.keys(heights).length === 0) return;
-
-    $(container).find('textarea').each(function () {
-        const height = heights[this.id];
-        if (height > 0) $(this).height(height);
-    });
-}
-
-/**
- * Saves the current height of each textarea in the container
- * @param container The container to search for textareas
- * @returns {{}} An object with textarea ids as keys and heights as values
- */
-PromptManagerModule.prototype.saveTextAreaHeights = function(container) {
-    const heights = {};
-
-    $(container).find('textarea').each(function () {
-        heights[this.id] = $(this).height();
-    });
-
-    return heights;
-}
-
 /**
  * Empties, then re-assembles the prompt list
  */