Merge pull request #2787 from SillyTavern/more-autofit Implement more smart textarea autosizes

a6e50241225174e7b70714c69602675e4d07cbe4

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed
Parents: 5e0a61bab2ada59c22276bea6f16db6c5a2509e9 2f5e40691c9d39be97a9fbbde71b78f2d84e7998
6 files changed, +28 -12Showing whitespace changes
public/index.html+3 -3
@@ -1820,12 +1820,12 @@
18201820 <span id="claude_assistant_prefill_text" data-i18n="Assistant Prefill">Assistant Prefill</span>
18211821 <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>
18221822 </div>
18231823 <textarea id="claude_assistant_prefill" class="text_pole textarea_compact autoSetHeight" name="assistant_prefill" rows="62" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
18241824 <div class="flex-container alignItemsCenter">
18251825 <span id="claude_assistant_impersonation_text" data-i18n="Assistant Impersonation Prefill">Assistant Impersonation Prefill</span>
18261826 <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>
18271827 </div>
18281828 <textarea id="claude_assistant_impersonation" class="text_pole textarea_compact autoSetHeight" name="assistant_impersonation" rows="62" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
18291829 </div>
18301830 <label for="claude_use_sysprompt" class="checkbox_label widthFreeExpand">
18311831 <input id="claude_use_sysprompt" type="checkbox" />
@@ -1845,7 +1845,7 @@
18451845 <div class="fa-solid fa-clock-rotate-left"></div>
18461846 </div>
18471847 </div>
18481848 <textarea id="claude_human_sysprompt_textarea" class="text_pole textarea_compact autoSetHeight" rows="42" 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>
18491849 </div>
18501850 </div>
18511851 </div>
public/scripts/extensions/stable-diffusion/index.js+11 -5
@@ -724,7 +724,7 @@ function onChatChanged() {
724724}
725725
726726async function adjustElementScrollHeight() {
727727 if (CSS.supports('field-sizing', 'content') || !$('.sd_settings').is(':visible')) {
728728 return;
729729 }
730730
@@ -737,17 +737,19 @@ async function adjustElementScrollHeight() {
737737async function onCharacterPromptInput() {
738738 const key = getCharaFilename(this_chid);
739739 extension_settings.sd.character_prompts[key] = $('#sd_character_prompt').val();
740- await resetScrollHeight($(this));
741740 saveSettingsDebounced();
742741 writePromptFieldsDebounced(this_chid);
742+ if (CSS.supports('field-sizing', 'content')) return;
743+ await resetScrollHeight($(this));
743744}
744745
745746async function onCharacterNegativePromptInput() {
746747 const key = getCharaFilename(this_chid);
747748 extension_settings.sd.character_negative_prompts[key] = $('#sd_character_negative_prompt').val();
748- await resetScrollHeight($(this));
749749 saveSettingsDebounced();
750750 writePromptFieldsDebounced(this_chid);
751+ if (CSS.supports('field-sizing', 'content')) return;
752+ await resetScrollHeight($(this));
751753}
752754
753755function getCharacterPrefix() {
@@ -856,14 +858,16 @@ function onStepsInput() {
856858
857859async function onPromptPrefixInput() {
858860 extension_settings.sd.prompt_prefix = $('#sd_prompt_prefix').val();
859- await resetScrollHeight($(this));
860861 saveSettingsDebounced();
862+ if (CSS.supports('field-sizing', 'content')) return;
863+ await resetScrollHeight($(this));
861864}
862865
863866async function onNegativePromptInput() {
864867 extension_settings.sd.negative_prompt = $('#sd_negative_prompt').val();
865- await resetScrollHeight($(this));
866868 saveSettingsDebounced();
869+ if (CSS.supports('field-sizing', 'content')) return;
870+ await resetScrollHeight($(this));
867871}
868872
869873function onSamplerChange() {
@@ -3911,12 +3915,14 @@ jQuery(async () => {
39113915 $('#sd_stability_style_preset').on('change', onStabilityStylePresetChange);
39123916 $('#sd_huggingface_model_id').on('input', onHFModelInput);
39133917
3918+ if (!CSS.supports('field-sizing', 'content')) {
39143919 $('.sd_settings .inline-drawer-toggle').on('click', function () {
39153920 initScrollHeight($('#sd_prompt_prefix'));
39163921 initScrollHeight($('#sd_negative_prompt'));
39173922 initScrollHeight($('#sd_character_prompt'));
39183923 initScrollHeight($('#sd_character_negative_prompt'));
39193924 });
3925+ }
39203926
39213927 for (const [key, value] of Object.entries(resolutionOptions)) {
39223928 const option = document.createElement('option');
public/scripts/extensions/stable-diffusion/settings.html+4 -4
@@ -408,16 +408,16 @@
408408 </div>
409409 </div>
410410 <label for="sd_prompt_prefix" data-i18n="Common prompt prefix">Common prompt prefix</label>
411411 <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>
412412 <label for="sd_negative_prompt" data-i18n="Negative common prompt prefix">Negative common prompt prefix</label>
413413 <textarea id="sd_negative_prompt" class="text_pole textarea_compact autoSetHeight"></textarea>
414414 <div id="sd_character_prompt_block">
415415 <label for="sd_character_prompt" data-i18n="Character-specific prompt prefix">Character-specific prompt prefix</label>
416416 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
417417 <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>
418418 <label for="sd_character_negative_prompt" data-i18n="Character-specific negative prompt prefix">Character-specific negative prompt prefix</label>
419419 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
420420 <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>
421421 <label for="sd_character_prompt_share" class="checkbox_label flexWrap marginTop5">
422422 <input id="sd_character_prompt_share" type="checkbox" />
423423 <span data-i18n="Shareable">
public/scripts/extensions/token-counter/index.js+2 -0
@@ -59,8 +59,10 @@ async function doTokenCounter() {
5959 $('#tokenized_chunks_display').text('—');
6060 }
6161
62+ if (!CSS.supports('field-sizing', 'content')) {
6263 await resetScrollHeight($('#token_counter_textarea'));
6364 await resetScrollHeight($('#token_counter_ids'));
65+ }
6466 }, debounce_timeout.relaxed);
6567 dialog.find('#token_counter_textarea').on('input', () => countDebounced());
6668
public/scripts/extensions/token-counter/style.css+5 -0
@@ -4,3 +4,8 @@
44 padding: 2px;
55 display: inline-block;
66}
7+
8+#token_counter_textarea,
9+#token_counter_ids {
10+ field-sizing: content;
11+}
public/scripts/group-chats.js+3 -0
@@ -1414,9 +1414,12 @@ function toggleHiddenControls(group, generationMode = null) {
14141414 const isJoin = [group_generation_mode.APPEND, group_generation_mode.APPEND_DISABLED].includes(generationMode ?? group?.generation_mode);
14151415 $('#rm_group_generation_mode_join_prefix').parent().toggle(isJoin);
14161416 $('#rm_group_generation_mode_join_suffix').parent().toggle(isJoin);
1417+
1418+ if (!CSS.supports('field-sizing', 'content')) {
14171419 initScrollHeight($('#rm_group_generation_mode_join_prefix'));
14181420 initScrollHeight($('#rm_group_generation_mode_join_suffix'));
14191421 }
1422+}
14201423
14211424function select_group_chats(groupId, skipAnimation) {
14221425 openGroupId = groupId;