Auto-hide instruct sequences in <details>

bcc49144677b6178a1b48b4977a542c2ec53b0c4

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

Parents: 9d0ffc2d0df141623390561b819900a5dd6b0806
3 files changed, +51 -22Showing whitespace changes
public/index.html+34 -22
@@ -3357,24 +3357,9 @@
33573357 </span>
33583358 </b>
33593359 </h4>
3360- <div class="flex-container">
3360+ <!-- We keep one auto-open so the user would know what is going on in the picked template -->
3361- <div class="flexAuto" title="Inserted before a System prompt." data-i18n="[title]Inserted before a System prompt.">
3361+ <details open>
3362- <label for="instruct_system_sequence_prefix">
3362+ <summary>User Message Sequences</summary>
3363- <small data-i18n="System Prompt Prefix">System Prompt Prefix</small>
3364- </label>
3365- <div>
3366- <textarea id="instruct_system_sequence_prefix" class="text_pole textarea_compact autoSetHeight"></textarea>
3367- </div>
3368- </div>
3369- <div class="flexAuto" title="Inserted after a System prompt." data-i18n="[title]Inserted after a System prompt.">
3370- <label for="instruct_system_sequence_suffix">
3371- <small data-i18n="System Prompt Suffix">System Prompt Suffix</small>
3372- </label>
3373- <div>
3374- <textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3375- </div>
3376- </div>
3377- </div>
33783363 <div class="flex-container">
33793364 <div class="flexAuto" title="Inserted before a User message and as a last prompt line when impersonating." data-i18n="[title]Inserted before a User message and as a last prompt line when impersonating.">
33803365 <small data-i18n="User Prefix">User Message Prefix</small>
@@ -3385,6 +3370,9 @@
33853370 <textarea id="instruct_input_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
33863371 </div>
33873372 </div>
3373+ </details>
3374+ <details>
3375+ <summary>Assistant Message Sequences</summary>
33883376 <div class="flex-container">
33893377 <div class="flexAuto" title="Inserted before an Assistant message and as a last prompt line when generating an AI reply." data-i18n="[title]Inserted before an Assistant message and as a last prompt line when generating an AI reply.">
33903378 <small data-i18n="Assistant Prefix">Assistant Message Prefix</small>
@@ -3395,6 +3383,9 @@
33953383 <textarea id="instruct_output_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
33963384 </div>
33973385 </div>
3386+ </details>
3387+ <details>
3388+ <summary>System Message Sequences</summary>
33983389 <div class="flex-container">
33993390 <div class="flexAuto" id="instruct_system_sequence_block" title="Inserted before a System (added by slash commands or extensions) message." data-i18n="[title]Inserted before a System (added by slash commands or extensions) message.">
34003391 <small data-i18n="System Prefix">System Message Prefix</small>
@@ -3411,10 +3402,30 @@
34113402 <small data-i18n="System same as User">System same as User</small>
34123403 </label>
34133404 </div>
3414-
3405+ </details>
3415- <h5 class="textAlignCenter" data-i18n="Misc. Sequences">
3406+ <details>
3416- Misc. Sequences
3407+ <summary>System Prompt Sequences</summary>
3417- </h5>
3408+ <div class="flex-container">
3409+ <div class="flexAuto" title="Inserted before a System prompt." data-i18n="[title]Inserted before a System prompt.">
3410+ <label for="instruct_system_sequence_prefix">
3411+ <small data-i18n="System Prompt Prefix">System Prompt Prefix</small>
3412+ </label>
3413+ <div>
3414+ <textarea id="instruct_system_sequence_prefix" class="text_pole textarea_compact autoSetHeight"></textarea>
3415+ </div>
3416+ </div>
3417+ <div class="flexAuto" title="Inserted after a System prompt." data-i18n="[title]Inserted after a System prompt.">
3418+ <label for="instruct_system_sequence_suffix">
3419+ <small data-i18n="System Prompt Suffix">System Prompt Suffix</small>
3420+ </label>
3421+ <div>
3422+ <textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3423+ </div>
3424+ </div>
3425+ </div>
3426+ </details>
3427+ <details>
3428+ <summary data-i18n="Misc. Sequences">Misc. Sequences</summary>
34183429 <div class="flex-container">
34193430 <div class="flexAuto" title="Inserted before the first Assistant's message." data-i18n="[title]Inserted before the first Assistant's message.">
34203431 <small data-i18n="First Assistant Prefix">First Assistant Prefix</small>
@@ -3451,6 +3462,7 @@
34513462 <textarea id="instruct_user_alignment_message" class="text_pole textarea_compact autoSetHeight"></textarea>
34523463 </div>
34533464 </div>
3465+ </details>
34543466 </div>
34553467 </div>
34563468 <div id="SystemPromptColumn" class="flex-container flexNoGap flexFlowColumn flex1">
public/scripts/instruct-mode.js+8 -0
@@ -682,4 +682,12 @@ jQuery(() => {
682682 selectMatchingContextTemplate(name);
683683 }
684684 });
685+
686+ if (!CSS.supports('field-sizing', 'content')) {
687+ $('#InstructSequencesColumn details').on('toggle', function () {
688+ if ($(this).prop('open')) {
689+ resetScrollHeight($(this).find('textarea'));
690+ }
691+ });
692+ }
685693});
public/style.css+9 -0
@@ -5469,3 +5469,12 @@ body:not(.movingUI) .drawer-content.maximized {
54695469#AdvancedFormatting .autoSetHeight {
54705470 overflow-wrap: anywhere;
54715471}
5472+
5473+#InstructSequencesColumn summary {
5474+ font-size: 0.95em;
5475+ cursor: pointer;
5476+}
5477+
5478+#InstructSequencesColumn details:not(:last-of-type) {
5479+ margin-bottom: 5px;
5480+}