rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make quick edit fields static

This commit is contained in:
maver 2023-08-22 20:37:37 +02:00
parent 6599717bc5
commit 0e378d93b2
2 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/index.html
View File

@ -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">
<span data-i18n="Select a character to show quick edit options.">Select a character to show quick edit options.</span>
<div class="range-block m-t-1">
<div class="justifyLeft" data-i18n="Main">Main</div>
<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">

103
public/scripts/PromptManager.js
View File

@ -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_MODEL_CHANGED, () => this.renderDebounced());
eventSource.on(event_types.CHATCOMPLETION_SOURCE_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);
});
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
*/