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 @@
1820 <span id="claude_assistant_prefill_text" data-i18n="Assistant Prefill">Assistant Prefill</span>1820 <span id="claude_assistant_prefill_text" data-i18n="Assistant Prefill">Assistant Prefill</span>
1821 <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>1821 <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>
1822 </div>1822 </div>
1823 <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>1823 <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>
1824 <div class="flex-container alignItemsCenter">1824 <div class="flex-container alignItemsCenter">
1825 <span id="claude_assistant_impersonation_text" data-i18n="Assistant Impersonation Prefill">Assistant Impersonation Prefill</span>1825 <span id="claude_assistant_impersonation_text" data-i18n="Assistant Impersonation Prefill">Assistant Impersonation Prefill</span>
1826 <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>1826 <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>
1827 </div>1827 </div>
1828 <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>1828 <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>
1829 </div>1829 </div>
1830 <label for="claude_use_sysprompt" class="checkbox_label widthFreeExpand">1830 <label for="claude_use_sysprompt" class="checkbox_label widthFreeExpand">
1831 <input id="claude_use_sysprompt" type="checkbox" />1831 <input id="claude_use_sysprompt" type="checkbox" />
@@ -1845,7 +1845,7 @@
1845 <div class="fa-solid fa-clock-rotate-left"></div>1845 <div class="fa-solid fa-clock-rotate-left"></div>
1846 </div>1846 </div>
1847 </div>1847 </div>
1848 <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>1848 <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>
1849 </div>1849 </div>
1850 </div>1850 </div>
1851 </div>1851 </div>
public/scripts/extensions/stable-diffusion/index.js+11 -5
@@ -724,7 +724,7 @@ function onChatChanged() {
724}724}
725725
726async function adjustElementScrollHeight() {726async function adjustElementScrollHeight() {
727 if (!$('.sd_settings').is(':visible')) {727 if (CSS.supports('field-sizing', 'content') || !$('.sd_settings').is(':visible')) {
728 return;728 return;
729 }729 }
730730
@@ -737,17 +737,19 @@ async function adjustElementScrollHeight() {
737async function onCharacterPromptInput() {737async function onCharacterPromptInput() {
738 const key = getCharaFilename(this_chid);738 const key = getCharaFilename(this_chid);
739 extension_settings.sd.character_prompts[key] = $('#sd_character_prompt').val();739 extension_settings.sd.character_prompts[key] = $('#sd_character_prompt').val();
740 await resetScrollHeight($(this));
741 saveSettingsDebounced();740 saveSettingsDebounced();
742 writePromptFieldsDebounced(this_chid);741 writePromptFieldsDebounced(this_chid);
742 if (CSS.supports('field-sizing', 'content')) return;
743 await resetScrollHeight($(this));
743}744}
744745
745async function onCharacterNegativePromptInput() {746async function onCharacterNegativePromptInput() {
746 const key = getCharaFilename(this_chid);747 const key = getCharaFilename(this_chid);
747 extension_settings.sd.character_negative_prompts[key] = $('#sd_character_negative_prompt').val();748 extension_settings.sd.character_negative_prompts[key] = $('#sd_character_negative_prompt').val();
748 await resetScrollHeight($(this));
749 saveSettingsDebounced();749 saveSettingsDebounced();
750 writePromptFieldsDebounced(this_chid);750 writePromptFieldsDebounced(this_chid);
751 if (CSS.supports('field-sizing', 'content')) return;
752 await resetScrollHeight($(this));
751}753}
752754
753function getCharacterPrefix() {755function getCharacterPrefix() {
@@ -856,14 +858,16 @@ function onStepsInput() {
856858
857async function onPromptPrefixInput() {859async function onPromptPrefixInput() {
858 extension_settings.sd.prompt_prefix = $('#sd_prompt_prefix').val();860 extension_settings.sd.prompt_prefix = $('#sd_prompt_prefix').val();
859 await resetScrollHeight($(this));
860 saveSettingsDebounced();861 saveSettingsDebounced();
862 if (CSS.supports('field-sizing', 'content')) return;
863 await resetScrollHeight($(this));
861}864}
862865
863async function onNegativePromptInput() {866async function onNegativePromptInput() {
864 extension_settings.sd.negative_prompt = $('#sd_negative_prompt').val();867 extension_settings.sd.negative_prompt = $('#sd_negative_prompt').val();
865 await resetScrollHeight($(this));
866 saveSettingsDebounced();868 saveSettingsDebounced();
869 if (CSS.supports('field-sizing', 'content')) return;
870 await resetScrollHeight($(this));
867}871}
868872
869function onSamplerChange() {873function onSamplerChange() {
@@ -3911,12 +3915,14 @@ jQuery(async () => {
3911 $('#sd_stability_style_preset').on('change', onStabilityStylePresetChange);3915 $('#sd_stability_style_preset').on('change', onStabilityStylePresetChange);
3912 $('#sd_huggingface_model_id').on('input', onHFModelInput);3916 $('#sd_huggingface_model_id').on('input', onHFModelInput);
39133917
3918 if (!CSS.supports('field-sizing', 'content')) {
3914 $('.sd_settings .inline-drawer-toggle').on('click', function () {3919 $('.sd_settings .inline-drawer-toggle').on('click', function () {
3915 initScrollHeight($('#sd_prompt_prefix'));3920 initScrollHeight($('#sd_prompt_prefix'));
3916 initScrollHeight($('#sd_negative_prompt'));3921 initScrollHeight($('#sd_negative_prompt'));
3917 initScrollHeight($('#sd_character_prompt'));3922 initScrollHeight($('#sd_character_prompt'));
3918 initScrollHeight($('#sd_character_negative_prompt'));3923 initScrollHeight($('#sd_character_negative_prompt'));
3919 });3924 });
3925 }
39203926
3921 for (const [key, value] of Object.entries(resolutionOptions)) {3927 for (const [key, value] of Object.entries(resolutionOptions)) {
3922 const option = document.createElement('option');3928 const option = document.createElement('option');
public/scripts/extensions/stable-diffusion/settings.html+4 -4
@@ -408,16 +408,16 @@
408 </div>408 </div>
409 </div>409 </div>
410 <label for="sd_prompt_prefix" data-i18n="Common prompt prefix">Common prompt prefix</label>410 <label for="sd_prompt_prefix" data-i18n="Common prompt prefix">Common prompt prefix</label>
411 <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>411 <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>
412 <label for="sd_negative_prompt" data-i18n="Negative common prompt prefix">Negative common prompt prefix</label>412 <label for="sd_negative_prompt" data-i18n="Negative common prompt prefix">Negative common prompt prefix</label>
413 <textarea id="sd_negative_prompt" class="text_pole textarea_compact"></textarea>413 <textarea id="sd_negative_prompt" class="text_pole textarea_compact autoSetHeight"></textarea>
414 <div id="sd_character_prompt_block">414 <div id="sd_character_prompt_block">
415 <label for="sd_character_prompt" data-i18n="Character-specific prompt prefix">Character-specific prompt prefix</label>415 <label for="sd_character_prompt" data-i18n="Character-specific prompt prefix">Character-specific prompt prefix</label>
416 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>416 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
417 <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>417 <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>
418 <label for="sd_character_negative_prompt" data-i18n="Character-specific negative prompt prefix">Character-specific negative prompt prefix</label>418 <label for="sd_character_negative_prompt" data-i18n="Character-specific negative prompt prefix">Character-specific negative prompt prefix</label>
419 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>419 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
420 <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>420 <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>
421 <label for="sd_character_prompt_share" class="checkbox_label flexWrap marginTop5">421 <label for="sd_character_prompt_share" class="checkbox_label flexWrap marginTop5">
422 <input id="sd_character_prompt_share" type="checkbox" />422 <input id="sd_character_prompt_share" type="checkbox" />
423 <span data-i18n="Shareable">423 <span data-i18n="Shareable">
public/scripts/extensions/token-counter/index.js+2 -0
@@ -59,8 +59,10 @@ async function doTokenCounter() {
59 $('#tokenized_chunks_display').text('—');59 $('#tokenized_chunks_display').text('—');
60 }60 }
6161
62 if (!CSS.supports('field-sizing', 'content')) {
62 await resetScrollHeight($('#token_counter_textarea'));63 await resetScrollHeight($('#token_counter_textarea'));
63 await resetScrollHeight($('#token_counter_ids'));64 await resetScrollHeight($('#token_counter_ids'));
65 }
64 }, debounce_timeout.relaxed);66 }, debounce_timeout.relaxed);
65 dialog.find('#token_counter_textarea').on('input', () => countDebounced());67 dialog.find('#token_counter_textarea').on('input', () => countDebounced());
6668
public/scripts/extensions/token-counter/style.css+5 -0
@@ -4,3 +4,8 @@
4 padding: 2px;4 padding: 2px;
5 display: inline-block;5 display: inline-block;
6}6}
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) {
1414 const isJoin = [group_generation_mode.APPEND, group_generation_mode.APPEND_DISABLED].includes(generationMode ?? group?.generation_mode);1414 const isJoin = [group_generation_mode.APPEND, group_generation_mode.APPEND_DISABLED].includes(generationMode ?? group?.generation_mode);
1415 $('#rm_group_generation_mode_join_prefix').parent().toggle(isJoin);1415 $('#rm_group_generation_mode_join_prefix').parent().toggle(isJoin);
1416 $('#rm_group_generation_mode_join_suffix').parent().toggle(isJoin);1416 $('#rm_group_generation_mode_join_suffix').parent().toggle(isJoin);
1417
1418 if (!CSS.supports('field-sizing', 'content')) {
1417 initScrollHeight($('#rm_group_generation_mode_join_prefix'));1419 initScrollHeight($('#rm_group_generation_mode_join_prefix'));
1418 initScrollHeight($('#rm_group_generation_mode_join_suffix'));1420 initScrollHeight($('#rm_group_generation_mode_join_suffix'));
1419 }1421 }
1422}
14201423
1421function select_group_chats(groupId, skipAnimation) {1424function select_group_chats(groupId, skipAnimation) {
1422 openGroupId = groupId;1425 openGroupId = groupId;