From bcc49144677b6178a1b48b4977a542c2ec53b0c4 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 22 Sep 2024 19:15:24 +0300
Subject: [PATCH] Auto-hide instruct sequences in <details>

---
 public/index.html               | 178 +++++++++++++++++---------------
 public/scripts/instruct-mode.js |   8 ++
 public/style.css                |   9 ++
 3 files changed, 112 insertions(+), 83 deletions(-)

diff --git a/public/index.html b/public/index.html
index 80977d878..6c11b4a87 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3357,100 +3357,112 @@
                                     </span>
                                 </b>
                             </h4>
-                            <div class="flex-container">
-                                <div class="flexAuto" title="Inserted before a System prompt." data-i18n="[title]Inserted before a System prompt.">
-                                    <label for="instruct_system_sequence_prefix">
-                                        <small data-i18n="System Prompt Prefix">System Prompt Prefix</small>
-                                    </label>
-                                    <div>
-                                        <textarea id="instruct_system_sequence_prefix" class="text_pole textarea_compact autoSetHeight"></textarea>
+                            <!-- We keep one auto-open so the user would know what is going on in the picked template -->
+                            <details open>
+                                <summary>User Message Sequences</summary>
+                                <div class="flex-container">
+                                    <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.">
+                                        <small data-i18n="User Prefix">User Message Prefix</small>
+                                        <textarea id="instruct_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                    </div>
+                                    <div class="flexAuto" title="Inserted after a User message." data-i18n="[title]Inserted after a User message.">
+                                        <small data-i18n="User Suffix">User Message Suffix</small>
+                                        <textarea id="instruct_input_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
                                     </div>
                                 </div>
-                                <div class="flexAuto" title="Inserted after a System prompt." data-i18n="[title]Inserted after a System prompt.">
-                                    <label for="instruct_system_sequence_suffix">
-                                        <small data-i18n="System Prompt Suffix">System Prompt Suffix</small>
-                                    </label>
-                                    <div>
-                                        <textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                            </details>
+                            <details>
+                                <summary>Assistant Message Sequences</summary>
+                                <div class="flex-container">
+                                    <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.">
+                                        <small data-i18n="Assistant Prefix">Assistant Message Prefix</small>
+                                        <textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                                    </div>
+                                    <div class="flexAuto" title="Inserted after an Assistant message." data-i18n="[title]Inserted after an Assistant message.">
+                                        <small data-i18n="Assistant Suffix">Assistant Message Suffix</small>
+                                        <textarea id="instruct_output_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="flex-container">
-                                <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.">
-                                    <small data-i18n="User Prefix">User Message Prefix</small>
-                                    <textarea id="instruct_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                            </details>
+                            <details>
+                                <summary>System Message Sequences</summary>
+                                <div class="flex-container">
+                                    <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.">
+                                        <small data-i18n="System Prefix">System Message Prefix</small>
+                                        <textarea id="instruct_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                    </div>
+                                    <div class="flexAuto" id="instruct_system_suffix_block" title="Inserted after a System message." data-i18n="[title]Inserted after a System message.">
+                                        <small data-i18n="System Suffix">System Message Suffix</small>
+                                        <textarea id="instruct_system_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                                    </div>
                                 </div>
-                                <div class="flexAuto" title="Inserted after a User message." data-i18n="[title]Inserted after a User message.">
-                                    <small data-i18n="User Suffix">User Message Suffix</small>
-                                    <textarea id="instruct_input_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                                <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.">
+                                    <label class="checkbox_label" for="instruct_system_same_as_user">
+                                        <input id="instruct_system_same_as_user" type="checkbox" />
+                                        <small data-i18n="System same as User">System same as User</small>
+                                    </label>
                                 </div>
-                            </div>
-                            <div class="flex-container">
-                                <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.">
-                                    <small data-i18n="Assistant Prefix">Assistant Message Prefix</small>
-                                    <textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                            </details>
+                            <details>
+                                <summary>System Prompt Sequences</summary>
+                                <div class="flex-container">
+                                    <div class="flexAuto" title="Inserted before a System prompt." data-i18n="[title]Inserted before a System prompt.">
+                                        <label for="instruct_system_sequence_prefix">
+                                            <small data-i18n="System Prompt Prefix">System Prompt Prefix</small>
+                                        </label>
+                                        <div>
+                                            <textarea id="instruct_system_sequence_prefix" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                        </div>
+                                    </div>
+                                    <div class="flexAuto" title="Inserted after a System prompt." data-i18n="[title]Inserted after a System prompt.">
+                                        <label for="instruct_system_sequence_suffix">
+                                            <small data-i18n="System Prompt Suffix">System Prompt Suffix</small>
+                                        </label>
+                                        <div>
+                                            <textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="flexAuto" title="Inserted after an Assistant message." data-i18n="[title]Inserted after an Assistant message.">
-                                    <small data-i18n="Assistant Suffix">Assistant Message Suffix</small>
-                                    <textarea id="instruct_output_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                            </details>
+                            <details>
+                                <summary data-i18n="Misc. Sequences">Misc. Sequences</summary>
+                                <div class="flex-container">
+                                    <div class="flexAuto" title="Inserted before the first Assistant's message." data-i18n="[title]Inserted before the first Assistant's message.">
+                                        <small data-i18n="First Assistant Prefix">First Assistant Prefix</small>
+                                        <textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                    </div>
+                                    <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">
+                                        <small data-i18n="Last Assistant Prefix">Last Assistant Prefix</small>
+                                        <textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="flex-container">
-                                <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.">
-                                    <small data-i18n="System Prefix">System Message Prefix</small>
-                                    <textarea id="instruct_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                <div class="flex-container">
+                                    <div class="flexAuto" title="Inserted before the first User's message." data-i18n="[title]Inserted before the first User's message.">
+                                        <small data-i18n="First User Prefix">First User Prefix</small>
+                                        <textarea id="instruct_first_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                    </div>
+                                    <div class="flexAuto" title="Inserted before the last User's message." data-i18n="[title]instruct_last_input_sequence">
+                                        <small data-i18n="Last User Prefix">Last User Prefix</small>
+                                        <textarea id="instruct_last_input_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                                    </div>
                                 </div>
-                                <div class="flexAuto" id="instruct_system_suffix_block" title="Inserted after a System message." data-i18n="[title]Inserted after a System message.">
-                                    <small data-i18n="System Suffix">System Message Suffix</small>
-                                    <textarea id="instruct_system_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
+                                <div class="flex-container">
+                                    <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.">
+                                        <small data-i18n="System Instruction Prefix">System Instruction Prefix</small>
+                                        <textarea id="instruct_last_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                    </div>
+                                    <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).">
+                                        <small data-i18n="Stop Sequence">Stop Sequence</small>
+                                        <textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                    </div>
                                 </div>
-                            </div>
-                            <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.">
-                                <label class="checkbox_label" for="instruct_system_same_as_user">
-                                    <input id="instruct_system_same_as_user" type="checkbox" />
-                                    <small data-i18n="System same as User">System same as User</small>
-                                </label>
-                            </div>
-
-                            <h5 class="textAlignCenter" data-i18n="Misc. Sequences">
-                                Misc. Sequences
-                            </h5>
-                            <div class="flex-container">
-                                <div class="flexAuto" title="Inserted before the first Assistant's message." data-i18n="[title]Inserted before the first Assistant's message.">
-                                    <small data-i18n="First Assistant Prefix">First Assistant Prefix</small>
-                                    <textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                <div class="flex-container">
+                                    <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.">
+                                        <small data-i18n="User Filler Message">User Filler Message</small>
+                                        <textarea id="instruct_user_alignment_message" class="text_pole textarea_compact autoSetHeight"></textarea>
+                                    </div>
                                 </div>
-                                <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">
-                                    <small data-i18n="Last Assistant Prefix">Last Assistant Prefix</small>
-                                    <textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
-                                </div>
-                            </div>
-                            <div class="flex-container">
-                                <div class="flexAuto" title="Inserted before the first User's message." data-i18n="[title]Inserted before the first User's message.">
-                                    <small data-i18n="First User Prefix">First User Prefix</small>
-                                    <textarea id="instruct_first_input_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
-                                </div>
-                                <div class="flexAuto" title="Inserted before the last User's message." data-i18n="[title]instruct_last_input_sequence">
-                                    <small data-i18n="Last User Prefix">Last User Prefix</small>
-                                    <textarea id="instruct_last_input_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></textarea>
-                                </div>
-                            </div>
-                            <div class="flex-container">
-                                <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.">
-                                    <small data-i18n="System Instruction Prefix">System Instruction Prefix</small>
-                                    <textarea id="instruct_last_system_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
-                                </div>
-                                <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).">
-                                    <small data-i18n="Stop Sequence">Stop Sequence</small>
-                                    <textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight"></textarea>
-                                </div>
-                            </div>
-                            <div class="flex-container">
-                                <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.">
-                                    <small data-i18n="User Filler Message">User Filler Message</small>
-                                    <textarea id="instruct_user_alignment_message" class="text_pole textarea_compact autoSetHeight"></textarea>
-                                </div>
-                            </div>
+                            </details>
                         </div>
                     </div>
                     <div id="SystemPromptColumn" class="flex-container flexNoGap flexFlowColumn flex1">
diff --git a/public/scripts/instruct-mode.js b/public/scripts/instruct-mode.js
index 30badcc31..033f5c3e8 100644
--- a/public/scripts/instruct-mode.js
+++ b/public/scripts/instruct-mode.js
@@ -682,4 +682,12 @@ jQuery(() => {
             selectMatchingContextTemplate(name);
         }
     });
+
+    if (!CSS.supports('field-sizing', 'content')) {
+        $('#InstructSequencesColumn details').on('toggle', function () {
+            if ($(this).prop('open')) {
+                resetScrollHeight($(this).find('textarea'));
+            }
+        });
+    }
 });
diff --git a/public/style.css b/public/style.css
index a7fb7d5cd..8cfd7e508 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5469,3 +5469,12 @@ body:not(.movingUI) .drawer-content.maximized {
 #AdvancedFormatting .autoSetHeight {
     overflow-wrap: anywhere;
 }
+
+#InstructSequencesColumn summary {
+    font-size: 0.95em;
+    cursor: pointer;
+}
+
+#InstructSequencesColumn details:not(:last-of-type) {
+    margin-bottom: 5px;
+}