Auto-hide instruct sequences in <details>

bcc49144677b6178a1b48b4977a542c2ec53b0c4

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

Parents: 9d0ffc2d0df141623390561b819900a5dd6b0806
3 files changed, +112 -83Ignore whitespace
public/index.html+95 -83
@@ -3357,100 +3357,112 @@
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>
3363+ <div class="flex-container">
3364- </label>
3364+ <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.">
3365- <div>
3365+ <small data-i18n="User Prefix">User Message Prefix</small>
33663366 <textarea id="instruct_system_sequence_prefixinstruct_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
33673367 </div>
3368- </div>
3368+ <div class="flexAuto" title="Inserted after a User message." data-i18n="[title]Inserted after a User message.">
3369- <div class="flexAuto" title="Inserted after a System prompt." data-i18n="[title]Inserted after a System prompt.">
3369+ <small data-i18n="User Suffix">User Message Suffix</small>
3370- <label for="instruct_system_sequence_suffix">
3370+ <textarea id="instruct_input_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
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>
33753371 </div>
33763372 </div>
33773373 </divdetails>
3378- <div class="flex-container">
3374+ <details>
3379- <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.">
3375+ <summary>Assistant Message Sequences</summary>
3380- <small data-i18n="User Prefix">User Message Prefix</small>
3376+ <div class="flex-container">
3381- <textarea id="instruct_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3377+ <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.">
3382- </div>
3378+ <small data-i18n="Assistant Prefix">Assistant Message Prefix</small>
3383- <div class="flexAuto" title="Inserted after a User message." data-i18n="[title]Inserted after a User message.">
3379+ <textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3384- <small data-i18n="User Suffix">User Message Suffix</small>
3380+ </div>
3385- <textarea id="instruct_input_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3381+ <div class="flexAuto" title="Inserted after an Assistant message." data-i18n="[title]Inserted after an Assistant message.">
3386- </div>
3382+ <small data-i18n="Assistant Suffix">Assistant Message Suffix</small>
3387- </div>
3383+ <textarea id="instruct_output_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3388- <div class="flex-container">
3384+ </div>
3389- <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.">
3390- <small data-i18n="Assistant Prefix">Assistant Message Prefix</small>
3391- <textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3392- </div>
3393- <div class="flexAuto" title="Inserted after an Assistant message." data-i18n="[title]Inserted after an Assistant message.">
3394- <small data-i18n="Assistant Suffix">Assistant Message Suffix</small>
3395- <textarea id="instruct_output_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3396- </div>
3397- </div>
3398- <div class="flex-container">
3399- <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.">
3400- <small data-i18n="System Prefix">System Message Prefix</small>
3401- <textarea id="instruct_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3402- </div>
3403- <div class="flexAuto" id="instruct_system_suffix_block" title="Inserted after a System message." data-i18n="[title]Inserted after a System message.">
3404- <small data-i18n="System Suffix">System Message Suffix</small>
3405- <textarea id="instruct_system_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
34063385 </div>
34073386 </divdetails>
3408- <div class="flexBasis100p" title="If enabled, System Sequences will be the same as User Sequences." data-i18n="[title]If enabled, System Sequences will be the same as User Sequences.">
3387+ <details>
3409- <label class="checkbox_label" for="instruct_system_same_as_user">
3388+ <summary>System Message Sequences</summary>
3410- <input id="instruct_system_same_as_user" type="checkbox" />
3389+ <div class="flex-container">
3411- <small data-i18n="System same as User">System same as User</small>
3390+ <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.">
3412- </label>
3391+ <small data-i18n="System Prefix">System Message Prefix</small>
3413- </div>
3392+ <textarea id="instruct_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3414-
3393+ </div>
3415- <h5 class="textAlignCenter" data-i18n="Misc. Sequences">
3394+ <div class="flexAuto" id="instruct_system_suffix_block" title="Inserted after a System message." data-i18n="[title]Inserted after a System message.">
3416- Misc. Sequences
3395+ <small data-i18n="System Suffix">System Message Suffix</small>
3417- </h5>
3396+ <textarea id="instruct_system_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3418- <div class="flex-container">
3397+ </div>
3419- <div class="flexAuto" title="Inserted before the first Assistant's message." data-i18n="[title]Inserted before the first Assistant's message.">
3420- <small data-i18n="First Assistant Prefix">First Assistant Prefix</small>
3421- <textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
34223398 </div>
3423- <div class="flexAuto" title="Inserted before the last Assistant's message or as a last prompt line when generating an AI reply (except a neutral/system role)." data-i18n="[title]instruct_last_output_sequence">
3399+ <div class="flexBasis100p" title="If enabled, System Sequences will be the same as User Sequences." data-i18n="[title]If enabled, System Sequences will be the same as User Sequences.">
3424- <small data-i18n="Last Assistant Prefix">Last Assistant Prefix</small>
3400+ <label class="checkbox_label" for="instruct_system_same_as_user">
34253401 <textareainput id="instruct_last_output_sequenceinstruct_system_same_as_user" classtype="text_pole wide100p textarea_compact autoSetHeightcheckbox">< /textarea>
3402+ <small data-i18n="System same as User">System same as User</small>
3403+ </label>
34263404 </div>
34273405 </divdetails>
3428- <div class="flex-container">
3406+ <details>
3429- <div class="flexAuto" title="Inserted before the first User's message." data-i18n="[title]Inserted before the first User's message.">
3407+ <summary>System Prompt Sequences</summary>
3430- <small data-i18n="First User Prefix">First User Prefix</small>
3408+ <div class="flex-container">
3431- <textarea id="instruct_first_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
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>
34323425 </div>
3433- <div class="flexAuto" title="Inserted before the last User's message." data-i18n="[title]instruct_last_input_sequence">
3426+ </details>
3434- <small data-i18n="Last User Prefix">Last User Prefix</small>
3427+ <details>
3435- <textarea id="instruct_last_input_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3428+ <summary data-i18n="Misc. Sequences">Misc. Sequences</summary>
3429+ <div class="flex-container">
3430+ <div class="flexAuto" title="Inserted before the first Assistant's message." data-i18n="[title]Inserted before the first Assistant's message.">
3431+ <small data-i18n="First Assistant Prefix">First Assistant Prefix</small>
3432+ <textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3433+ </div>
3434+ <div class="flexAuto" title="Inserted before the last Assistant's message or as a last prompt line when generating an AI reply (except a neutral/system role)." data-i18n="[title]instruct_last_output_sequence">
3435+ <small data-i18n="Last Assistant Prefix">Last Assistant Prefix</small>
3436+ <textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3437+ </div>
34363438 </div>
3437- </div>
3439+ <div class="flex-container">
3438- <div class="flex-container">
3440+ <div class="flexAuto" title="Inserted before the first User's message." data-i18n="[title]Inserted before the first User's message.">
3439- <div class="flexAuto" title="Will be inserted as a last prompt line when using system/neutral generation." data-i18n="[title]Will be inserted as a last prompt line when using system/neutral generation.">
3441+ <small data-i18n="First User Prefix">First User Prefix</small>
3440- <small data-i18n="System Instruction Prefix">System Instruction Prefix</small>
3442+ <textarea id="instruct_first_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3441- <textarea id="instruct_last_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3443+ </div>
3444+ <div class="flexAuto" title="Inserted before the last User's message." data-i18n="[title]instruct_last_input_sequence">
3445+ <small data-i18n="Last User Prefix">Last User Prefix</small>
3446+ <textarea id="instruct_last_input_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
3447+ </div>
34423448 </div>
3443- <div class="flexAuto" title="If a stop sequence is generated, everything past it will be removed from the output (inclusive)." data-i18n="[title]If a stop sequence is generated, everything past it will be removed from the output (inclusive).">
3449+ <div class="flex-container">
3444- <small data-i18n="Stop Sequence">Stop Sequence</small>
3450+ <div class="flexAuto" title="Will be inserted as a last prompt line when using system/neutral generation." data-i18n="[title]Will be inserted as a last prompt line when using system/neutral generation.">
3445- <textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3451+ <small data-i18n="System Instruction Prefix">System Instruction Prefix</small>
3452+ <textarea id="instruct_last_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3453+ </div>
3454+ <div class="flexAuto" title="If a stop sequence is generated, everything past it will be removed from the output (inclusive)." data-i18n="[title]If a stop sequence is generated, everything past it will be removed from the output (inclusive).">
3455+ <small data-i18n="Stop Sequence">Stop Sequence</small>
3456+ <textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
3457+ </div>
34463458 </div>
3447- </div>
3459+ <div class="flex-container">
3448- <div class="flex-container">
3460+ <div class="flexAuto" title="Will be inserted at the start of the chat history if it doesn't start with a User message." data-i18n="[title]Will be inserted at the start of the chat history if it doesn't start with a User message.">
3449- <div class="flexAuto" title="Will be inserted at the start of the chat history if it doesn't start with a User message." data-i18n="[title]Will be inserted at the start of the chat history if it doesn't start with a User message.">
3461+ <small data-i18n="User Filler Message">User Filler Message</small>
3450- <small data-i18n="User Filler Message">User Filler Message</small>
3462+ <textarea id="instruct_user_alignment_message" class="text_pole textarea_compact autoSetHeight"></textarea>
3451- <textarea id="instruct_user_alignment_message" class="text_pole textarea_compact autoSetHeight"></textarea>
3463+ </div>
34523464 </div>
34533465 </divdetails>
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+}