[WIP] Add UI for auto-select instruct

public/index.html

@@ -2061,14 +2061,14 @@
                                 </select>
                             </div>
                             <div>
-                                <label for="context_story_string" data-i18n="Story String">
+                                <label for="context_story_string">
-                                    Story String
+                                    <small data-i18n="Story String">Story String</small>
                                 </label>
                                 <textarea id="context_story_string" class="text_pole textarea_compact" rows="3"></textarea>
                                 <div class="flex-container">
                                     <div class="flex1">
                                         <label for="context_example_separator">
-                                            <span data-i18n="Example Separator">Example Separator</span>
+                                            <small data-i18n="Example Separator">Example Separator</small>
                                         </label>
                                         <div>
                                             <textarea id="context_example_separator" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea>
@@ -2076,7 +2076,7 @@
                                     </div>
                                     <div class="flex1">
                                         <label for="context_chat_start">
-                                            <span data-i18n="Chat Start">Chat Start</span>
+                                            <small data-i18n="Chat Start">Chat Start</small>
                                         </label>
                                         <div>
                                             <textarea id="context_chat_start" class="text_pole textarea_compact" maxlength="500" rows="1"></textarea>
@@ -2116,9 +2116,23 @@
                             <label for="instruct_presets">
                                 <span data-i18n="Presets">Presets</span>
                             </label>
-                            <select id="instruct_presets"></select>
+                            <div class="flex-container">
+                                <select id="instruct_presets" class="flex1 margin0"></select>
+                                <div id="instruct_set_default" class="menu_button menu_button_icon margin0">
+                                    <i class="fa-solid fa-xs fa-fw fa-heart"></i>
+                                    <span data-i18n="Default">Default</span>
+                                </div>
+                            </div>
                             <label>
-                                <span data-i18n="System Prompt">System Prompt</span>
+                                <small data-i18n="Activation Regex">
+                                    Activation Regex
+                                </small>
+                            </label>
+                            <div>
+                                <textarea id="instruct_activation_regex" class="text_pole textarea_compact" maxlength="5000" rows="1"></textarea>
+                            </div>
+                            <label>
+                                <small data-i18n="System Prompt">System Prompt</small>
                             </label>
                             <div class="prompt_overridden">
                                 Overridden by the Character Definitions.
@@ -2270,7 +2284,7 @@
                                 </div>
                             </h4>
                             <div>
-                                <textarea id="custom_stopping_strings" rows="2" class="text_pole textarea_compact" placeholder="[&quot;Ford&quot;, &quot;BMW&quot;, &quot;Fiat&quot;]"></textarea>
+                                <textarea id="custom_stopping_strings" rows="2" class="text_pole textarea_compact monospace" placeholder="[&quot;Ford&quot;, &quot;BMW&quot;, &quot;Fiat&quot;]"></textarea>
                             </div>
                             <label class="checkbox_label" for="custom_stopping_strings_macro">
                                 <input id="custom_stopping_strings_macro" type="checkbox" checked>

public/scripts/power-user.js

@@ -163,6 +163,7 @@ let power_user = {
     trim_spaces: true,
     relaxed_api_urls: false,
 
+    default_instruct: '',
     instruct: {
         enabled: false,
         wrap: true,
@@ -177,6 +178,7 @@ let power_user = {
         separator_sequence: '',
         macro: false,
         names_force_groups: true,
+        activation_regex: '',
     },
 
     context: {
@@ -938,6 +940,7 @@ function loadInstructMode() {
         { id: "instruct_macro", property: "macro", isCheckbox: true },
         { id: "instruct_names_force_groups", property: "names_force_groups", isCheckbox: true },
         { id: "instruct_last_output_sequence", property: "last_output_sequence", isCheckbox: false },
+        { id: "instruct_activation_regex", property: "activation_regex", isCheckbox: false },
     ];
 
     if (power_user.instruct.names_force_groups === undefined) {
@@ -968,6 +971,19 @@ function loadInstructMode() {
         $('#instruct_presets').append(option);
     });
 
+    function highlightDefaultPreset() {
+        $('#instruct_set_default').toggleClass('default', power_user.default_instruct === power_user.instruct.preset);
+    }
+
+    $('#instruct_set_default').on('click', function () {
+        power_user.default_instruct = power_user.instruct.preset;
+        $(this).addClass('default');
+        toastr.success(`Default instruct preset set to ${power_user.default_instruct}`);
+        saveSettingsDebounced();
+    });
+
+    highlightDefaultPreset();
+
     $('#instruct_presets').on('change', function () {
         const name = $(this).find(':selected').val();
         const preset = instruct_presets.find(x => x.name === name);
@@ -989,6 +1005,8 @@ function loadInstructMode() {
                 }
             }
         });
+
+        highlightDefaultPreset();
     });
 }
 

public/style.css

@@ -1351,7 +1351,8 @@ body.charListGrid #rm_print_characters_block .tags_inline {
     overflow-y: auto;
 }
 
-#floatingPrompt, #cfgConfig {
+#floatingPrompt,
+#cfgConfig {
     overflow-y: auto;
     max-width: 90svw;
     max-height: 90svh;
@@ -1471,6 +1472,14 @@ select option:not(:checked) {
     color: #4b9c00 !important;
 }
 
+#instruct_set_default {
+    font-size: smaller;
+}
+
+#instruct_set_default.default {
+    color: #f44336 !important;
+}
+
 .displayBlock {
     display: block !important;
 }
@@ -4342,7 +4351,7 @@ input.extension_missing[type="checkbox"] {
 }
 
 .fillLeft .scrollableInner {
-   padding: 0.5em 1em 0.5em 0.5em
+    padding: 0.5em 1em 0.5em 0.5em
 }
 
 .width100p {
@@ -4653,6 +4662,7 @@ toolcool-color-picker {
     color: var(--SmartThemeQuoteColor);
     font-weight: bold;
     font-style: italic;
+    font-size: 0.8em;
 }
 
 .openai_restorable .right_menu_button img {
@@ -5663,10 +5673,13 @@ body.waifuMode .zoomed_avatar {
     border: none;
     outline: none;
     color: white;
-    display: inline-block;  /* Change display to inline-block */
+    display: inline-block;
-    vertical-align: middle; /* Align to middle if there's a height discrepancy */
+    /* Change display to inline-block */
+    vertical-align: middle;
+    /* Align to middle if there's a height discrepancy */
     width: 200px;
     font-size: 16px;
     z-index: 10;
-    margin-left: 10px; /* Give some space between the button and search box */
+    margin-left: 10px;
+    /* Give some space between the button and search box */
 }