Improved Advanced Formatting UI

This commit is contained in:
Stefan Daniel Schwarz 2023-08-25 21:04:06 +02:00
parent be3ebcda0d
commit ca37ac679e
4 changed files with 101 additions and 74 deletions

View File

@ -2097,14 +2097,14 @@
<label for="context_story_string"> <label for="context_story_string">
<small data-i18n="Story String">Story String</small> <small data-i18n="Story String">Story String</small>
</label> </label>
<textarea id="context_story_string" class="text_pole textarea_compact" rows="3"></textarea> <textarea id="context_story_string" class="text_pole textarea_compact autoSetHeight" rows="1"></textarea>
<div class="flex-container"> <div class="flex-container">
<div class="flex1"> <div class="flex1">
<label for="context_example_separator"> <label for="context_example_separator">
<small data-i18n="Example Separator">Example Separator</small> <small data-i18n="Example Separator">Example Separator</small>
</label> </label>
<div> <div>
<textarea id="context_example_separator" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea> <textarea id="context_example_separator" class="text_pole textarea_compact autoSetHeight" maxlength="500" rows="1"></textarea>
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
@ -2112,7 +2112,7 @@
<small data-i18n="Chat Start">Chat Start</small> <small data-i18n="Chat Start">Chat Start</small>
</label> </label>
<div> <div>
<textarea id="context_chat_start" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea> <textarea id="context_chat_start" class="text_pole textarea_compact autoSetHeight" maxlength="500" rows="1"></textarea>
</div> </div>
</div> </div>
</div> </div>
@ -2150,7 +2150,7 @@
</small> </small>
</label> </label>
<div> <div>
<textarea id="instruct_activation_regex" class="text_pole textarea_compact" maxlength="5000" rows="1"></textarea> <textarea id="instruct_activation_regex" class="text_pole textarea_compact autoSetHeight" maxlength="5000" rows="1"></textarea>
</div> </div>
<div> <div>
<label for="instruct_wrap" class="checkbox_label"> <label for="instruct_wrap" class="checkbox_label">
@ -2175,79 +2175,89 @@
<div class="prompt_overridden"> <div class="prompt_overridden">
Overridden by the Character Definitions. Overridden by the Character Definitions.
</div> </div>
<textarea id="instruct_system_prompt" class="text_pole textarea_compact" rows="4"></textarea> <textarea id="instruct_system_prompt" class="text_pole textarea_compact autoSetHeight" rows="1"></textarea>
<div class="flex-container">
<div class="flex1"> <div class="inline-drawer wide100p flexFlowColumn">
<label for="instruct_input_sequence"> <div class="inline-drawer-toggle inline-drawer-header">
<small data-i18n="Input Sequence">Input Sequence</small> <b><span data-i18n="Instruct Mode Sequences">Instruct Mode Sequences</span></b>
</label> <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
<div>
<textarea id="instruct_input_sequence" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea>
</div>
</div> </div>
<div class="flex1"> <div class="inline-drawer-content">
<label for="instruct_output_sequence"> <div class="flex-container">
<small data-i18n="Output Sequence">Output Sequence</small> <div class="flex1">
</label> <label for="instruct_input_sequence">
<div> <small data-i18n="Input Sequence">Input Sequence</small>
<textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact" maxlength="500" rows="1"></textarea> </label>
</div> <div>
</div> <textarea id="instruct_input_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div> </div>
<div class="flex-container"> </div>
<div class="flex1"> <div class="flex1">
<label for="instruct_first_output_sequence"> <label for="instruct_output_sequence">
<small data-i18n="First Output Sequence">First Output Sequence</small> <small data-i18n="Output Sequence">Output Sequence</small>
</label> </label>
<div> <div>
<textarea id="instruct_first_output_sequence" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea> <textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div> </div>
</div> </div>
<div class="flex1"> </div>
<label for="instruct_last_output_sequence"> <div class="flex-container">
<small data-i18n="Last Output Sequence">Last Output Sequence</small> <div class="flex1">
</label> <label for="instruct_first_output_sequence">
<div> <small data-i18n="First Output Sequence">First Output Sequence</small>
<textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact" maxlength="500" rows="1"></textarea> </label>
</div> <div>
</div> <textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div> </div>
<div class="flex-container"> </div>
<div class="flex1"> <div class="flex1">
<label for="instruct_system_sequence"> <label for="instruct_last_output_sequence">
<small data-i18n="System Sequence Prefix">System Sequence Prefix</small> <small data-i18n="Last Output Sequence">Last Output Sequence</small>
</label> </label>
<div> <div>
<textarea id="instruct_system_sequence" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea> <textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div> </div>
</div> </div>
<div class="flex1"> </div>
<label for="instruct_system_sequence_suffix"> <div class="flex-container">
<small data-i18n="System Sequence Suffix">System Sequence Suffix</small> <div class="flex1">
</label> <label for="instruct_system_sequence">
<div> <small data-i18n="System Sequence Prefix">System Sequence Prefix</small>
<textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact" maxlength="500" rows="1"></textarea> </label>
</div> <div>
</div> <textarea id="instruct_system_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div> </div>
<div class="flex-container"> </div>
<div class="flex1"> <div class="flex1">
<label for="instruct_stop_sequence"> <label for="instruct_system_sequence_suffix">
<small data-i18n="Stop Sequence">Stop Sequence</small> <small data-i18n="System Sequence Suffix">System Sequence Suffix</small>
</label> </label>
<div> <div>
<textarea id="instruct_stop_sequence" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea> <textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div> </div>
</div> </div>
<div class="flex1"> </div>
<label for="instruct_separator_sequence"> <div class="flex-container">
<small data-i18n="Separator">Separator</small> <div class="flex1">
</label> <label for="instruct_stop_sequence">
<div> <small data-i18n="Stop Sequence">Stop Sequence</small>
<textarea id="instruct_separator_sequence" class="text_pole wide100p textarea_compact" maxlength="500" rows="1"></textarea> </label>
<div>
<textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
<div class="flex1">
<label for="instruct_separator_sequence">
<small data-i18n="Separator">Separator</small>
</label>
<div>
<textarea id="instruct_separator_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="500" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div name="ContextFormatting" class="flex1"> <div name="ContextFormatting" class="flex1">

View File

@ -131,6 +131,7 @@ import {
isDigitsOnly, isDigitsOnly,
PAGINATION_TEMPLATE, PAGINATION_TEMPLATE,
waitUntilCondition, waitUntilCondition,
resetScrollHeight,
} from "./scripts/utils.js"; } from "./scripts/utils.js";
import { extension_settings, getContext, loadExtensionSettings, processExtensionHelpers, registerExtensionHelper, runGenerationInterceptors, saveMetadataDebounced } from "./scripts/extensions.js"; import { extension_settings, getContext, loadExtensionSettings, processExtensionHelpers, registerExtensionHelper, runGenerationInterceptors, saveMetadataDebounced } from "./scripts/extensions.js";
@ -8623,6 +8624,10 @@ $(document).ready(function () {
}); });
} }
// Set the height of "autoSetHeight" textareas within the drawer to their scroll height
$(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(function() {
resetScrollHeight($(this));
});
} else if (drawerWasOpenAlready) { //to close manually } else if (drawerWasOpenAlready) { //to close manually
icon.toggleClass('closedIcon openIcon'); icon.toggleClass('closedIcon openIcon');
@ -8689,6 +8694,11 @@ $(document).ready(function () {
icon.toggleClass('down up'); icon.toggleClass('down up');
icon.toggleClass('fa-circle-chevron-down fa-circle-chevron-up'); icon.toggleClass('fa-circle-chevron-down fa-circle-chevron-up');
$(this).closest('.inline-drawer').find('.inline-drawer-content').stop().slideToggle(); $(this).closest('.inline-drawer').find('.inline-drawer-content').stop().slideToggle();
// Set the height of "autoSetHeight" textareas within the inline-drawer to their scroll height
$(this).closest('.inline-drawer').find('.inline-drawer-content textarea.autoSetHeight').each(function() {
resetScrollHeight($(this));
});
}); });
$(document).on('click', '.mes .avatar', function () { $(document).on('click', '.mes .avatar', function () {

View File

@ -6,6 +6,7 @@ import {
power_user, power_user,
context_presets, context_presets,
} from "./power-user.js"; } from "./power-user.js";
import { resetScrollHeight } from "./utils.js";
/** /**
* @type {any[]} Instruct mode presets. * @type {any[]} Instruct mode presets.
@ -55,6 +56,9 @@ export function loadInstructMode(data) {
$element.on('input', function () { $element.on('input', function () {
power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val(); power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val();
saveSettingsDebounced(); saveSettingsDebounced();
if (!control.isCheckbox) {
resetScrollHeight($element);
}
}); });
}); });

View File

@ -29,7 +29,7 @@ import {
import { registerSlashCommand } from "./slash-commands.js"; import { registerSlashCommand } from "./slash-commands.js";
import { tokenizers } from "./tokenizers.js"; import { tokenizers } from "./tokenizers.js";
import { delay } from "./utils.js"; import { delay, resetScrollHeight } from "./utils.js";
export { export {
loadPowerUserSettings, loadPowerUserSettings,
@ -906,6 +906,9 @@ function loadContextSettings() {
$element.on('input', function () { $element.on('input', function () {
power_user.context[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val(); power_user.context[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val();
saveSettingsDebounced(); saveSettingsDebounced();
if (!control.isCheckbox) {
resetScrollHeight($element);
}
}); });
}); });