Implement more smart textarea autosizes

This commit is contained in:
Cohee 2024-09-05 20:55:06 +03:00
parent 758c90be00
commit 2f5e40691c
6 changed files with 38 additions and 22 deletions

View File

@ -1820,12 +1820,12 @@
<span id="claude_assistant_prefill_text" data-i18n="Assistant Prefill">Assistant Prefill</span>
<i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="claude_assistant_prefill" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
</div>
<textarea id="claude_assistant_prefill" class="text_pole textarea_compact" name="assistant_prefill" rows="6" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
<textarea id="claude_assistant_prefill" class="text_pole textarea_compact autoSetHeight" name="assistant_prefill" rows="2" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
<div class="flex-container alignItemsCenter">
<span id="claude_assistant_impersonation_text" data-i18n="Assistant Impersonation Prefill">Assistant Impersonation Prefill</span>
<i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="claude_assistant_impersonation" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
</div>
<textarea id="claude_assistant_impersonation" class="text_pole textarea_compact" name="assistant_impersonation" rows="6" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
<textarea id="claude_assistant_impersonation" class="text_pole textarea_compact autoSetHeight" name="assistant_impersonation" rows="2" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
</div>
<label for="claude_use_sysprompt" class="checkbox_label widthFreeExpand">
<input id="claude_use_sysprompt" type="checkbox" />
@ -1845,7 +1845,7 @@
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<textarea id="claude_human_sysprompt_textarea" class="text_pole textarea_compact" rows="4" data-i18n="[placeholder]Human message" placeholder="Human message, instruction, etc.&#10;Adds nothing when empty, i.e. requires a new prompt with the role 'user'."></textarea>
<textarea id="claude_human_sysprompt_textarea" class="text_pole textarea_compact autoSetHeight" rows="2" data-i18n="[placeholder]Human message" placeholder="Human message, instruction, etc.&#10;Adds nothing when empty, i.e. requires a new prompt with the role 'user'."></textarea>
</div>
</div>
</div>

View File

@ -724,7 +724,7 @@ function onChatChanged() {
}
async function adjustElementScrollHeight() {
if (!$('.sd_settings').is(':visible')) {
if (CSS.supports('field-sizing', 'content') || !$('.sd_settings').is(':visible')) {
return;
}
@ -737,17 +737,19 @@ async function adjustElementScrollHeight() {
async function onCharacterPromptInput() {
const key = getCharaFilename(this_chid);
extension_settings.sd.character_prompts[key] = $('#sd_character_prompt').val();
await resetScrollHeight($(this));
saveSettingsDebounced();
writePromptFieldsDebounced(this_chid);
if (CSS.supports('field-sizing', 'content')) return;
await resetScrollHeight($(this));
}
async function onCharacterNegativePromptInput() {
const key = getCharaFilename(this_chid);
extension_settings.sd.character_negative_prompts[key] = $('#sd_character_negative_prompt').val();
await resetScrollHeight($(this));
saveSettingsDebounced();
writePromptFieldsDebounced(this_chid);
if (CSS.supports('field-sizing', 'content')) return;
await resetScrollHeight($(this));
}
function getCharacterPrefix() {
@ -856,14 +858,16 @@ function onStepsInput() {
async function onPromptPrefixInput() {
extension_settings.sd.prompt_prefix = $('#sd_prompt_prefix').val();
await resetScrollHeight($(this));
saveSettingsDebounced();
if (CSS.supports('field-sizing', 'content')) return;
await resetScrollHeight($(this));
}
async function onNegativePromptInput() {
extension_settings.sd.negative_prompt = $('#sd_negative_prompt').val();
await resetScrollHeight($(this));
saveSettingsDebounced();
if (CSS.supports('field-sizing', 'content')) return;
await resetScrollHeight($(this));
}
function onSamplerChange() {
@ -3911,12 +3915,14 @@ jQuery(async () => {
$('#sd_stability_style_preset').on('change', onStabilityStylePresetChange);
$('#sd_huggingface_model_id').on('input', onHFModelInput);
$('.sd_settings .inline-drawer-toggle').on('click', function () {
initScrollHeight($('#sd_prompt_prefix'));
initScrollHeight($('#sd_negative_prompt'));
initScrollHeight($('#sd_character_prompt'));
initScrollHeight($('#sd_character_negative_prompt'));
});
if (!CSS.supports('field-sizing', 'content')) {
$('.sd_settings .inline-drawer-toggle').on('click', function () {
initScrollHeight($('#sd_prompt_prefix'));
initScrollHeight($('#sd_negative_prompt'));
initScrollHeight($('#sd_character_prompt'));
initScrollHeight($('#sd_character_negative_prompt'));
});
}
for (const [key, value] of Object.entries(resolutionOptions)) {
const option = document.createElement('option');

View File

@ -408,16 +408,16 @@
</div>
</div>
<label for="sd_prompt_prefix" data-i18n="Common prompt prefix">Common prompt prefix</label>
<textarea id="sd_prompt_prefix" class="text_pole textarea_compact" data-i18n="[placeholder]sd_prompt_prefix_placeholder" placeholder="Use {prompt} to specify where the generated prompt will be inserted"></textarea>
<textarea id="sd_prompt_prefix" class="text_pole textarea_compact autoSetHeight" data-i18n="[placeholder]sd_prompt_prefix_placeholder" placeholder="Use {prompt} to specify where the generated prompt will be inserted"></textarea>
<label for="sd_negative_prompt" data-i18n="Negative common prompt prefix">Negative common prompt prefix</label>
<textarea id="sd_negative_prompt" class="text_pole textarea_compact"></textarea>
<textarea id="sd_negative_prompt" class="text_pole textarea_compact autoSetHeight"></textarea>
<div id="sd_character_prompt_block">
<label for="sd_character_prompt" data-i18n="Character-specific prompt prefix">Character-specific prompt prefix</label>
<small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
<textarea id="sd_character_prompt" class="text_pole textarea_compact" data-i18n="[placeholder]sd_character_prompt_placeholder" placeholder="Any characteristics that describe the currently selected character. Will be added after a common prompt prefix.&#10;Example: female, green eyes, brown hair, pink shirt"></textarea>
<textarea id="sd_character_prompt" class="text_pole textarea_compact autoSetHeight" data-i18n="[placeholder]sd_character_prompt_placeholder" placeholder="Any characteristics that describe the currently selected character. Will be added after a common prompt prefix.&#10;Example: female, green eyes, brown hair, pink shirt"></textarea>
<label for="sd_character_negative_prompt" data-i18n="Character-specific negative prompt prefix">Character-specific negative prompt prefix</label>
<small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
<textarea id="sd_character_negative_prompt" class="text_pole textarea_compact" data-i18n="[placeholder]sd_character_negative_prompt_placeholder" placeholder="Any characteristics that should not appear for the selected character. Will be added after a negative common prompt prefix.&#10;Example: jewellery, shoes, glasses"></textarea>
<textarea id="sd_character_negative_prompt" class="text_pole textarea_compact autoSetHeight" data-i18n="[placeholder]sd_character_negative_prompt_placeholder" placeholder="Any characteristics that should not appear for the selected character. Will be added after a negative common prompt prefix.&#10;Example: jewellery, shoes, glasses"></textarea>
<label for="sd_character_prompt_share" class="checkbox_label flexWrap marginTop5">
<input id="sd_character_prompt_share" type="checkbox" />
<span data-i18n="Shareable">

View File

@ -59,8 +59,10 @@ async function doTokenCounter() {
$('#tokenized_chunks_display').text('—');
}
await resetScrollHeight($('#token_counter_textarea'));
await resetScrollHeight($('#token_counter_ids'));
if (!CSS.supports('field-sizing', 'content')) {
await resetScrollHeight($('#token_counter_textarea'));
await resetScrollHeight($('#token_counter_ids'));
}
}, debounce_timeout.relaxed);
dialog.find('#token_counter_textarea').on('input', () => countDebounced());

View File

@ -4,3 +4,8 @@
padding: 2px;
display: inline-block;
}
#token_counter_textarea,
#token_counter_ids {
field-sizing: content;
}

View File

@ -1414,8 +1414,11 @@ function toggleHiddenControls(group, generationMode = null) {
const isJoin = [group_generation_mode.APPEND, group_generation_mode.APPEND_DISABLED].includes(generationMode ?? group?.generation_mode);
$('#rm_group_generation_mode_join_prefix').parent().toggle(isJoin);
$('#rm_group_generation_mode_join_suffix').parent().toggle(isJoin);
initScrollHeight($('#rm_group_generation_mode_join_prefix'));
initScrollHeight($('#rm_group_generation_mode_join_suffix'));
if (!CSS.supports('field-sizing', 'content')) {
initScrollHeight($('#rm_group_generation_mode_join_prefix'));
initScrollHeight($('#rm_group_generation_mode_join_suffix'));
}
}
function select_group_chats(groupId, skipAnimation) {