From 04a645141cd91f661323bfb952930e8fbfa3b30d Mon Sep 17 00:00:00 2001
From: Cohee <titan0599@gmail.com>
Date: Sun, 18 Jun 2023 20:32:51 +0300
Subject: [PATCH] Set scenario override for characters

---
 public/index.html             | 22 ++++++++++++----------
 public/script.js              | 31 ++++++++++++++++++++++++++++++-
 public/scripts/group-chats.js | 26 ++------------------------
 public/style.css              |  3 ++-
 4 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/public/index.html b/public/index.html
index 60ad41306..4374ede3d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1625,7 +1625,7 @@
                                 <input id="custom_chat_separator" class="text_pole textarea_compact" type="text" placeholder="&lt;START&gt;" maxlength="100" />
                             </div>
                         </div>
-                        <!--                         
+                        <!--
                         <div>
                             <h4 data-i18n="Non-markdown strings">
                                 Non-markdown strings
@@ -2364,7 +2364,7 @@
                                 <input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
                             </div>
 
-                            <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween">
+                            <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5">
                                 <div id="avatar_div_div" class="avatar">
                                     <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                 </div>
@@ -2379,6 +2379,7 @@
                                         <input type="hidden" id="fav_checkbox" name="fav" />
                                         <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
                                         <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div>
+                                        <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div>
                                         <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character"></div>
                                         <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
                                             <input type="submit" id="create_button" name="create_button">
@@ -2764,19 +2765,20 @@
         </div>
     </div>
 
-    <div id="group_scenario_template" class="template_element">
-        <div class="group_scenario range-block flexFlowColumn flex-container">
+    <div id="scenario_override_template" class="template_element">
+        <div class="scenario_override range-block flexFlowColumn flex-container">
             <div class="range-block-title title_restorable">
-                <h3><span data-i18n="Group Chat Scenario Override">Group Chat Scenario Override</span></h3>
+                <h3><span data-i18n="Chat Scenario Override">Chat Scenario Override</span></h3>
                 <div title="Remove" class="menu_button fa-solid fa-trash-can remove_scenario_override"></div>
             </div>
             <div class="range-block-counter justifyLeft flex-container flexFlowColumn">
-                <strong>Unique to this chat.</strong> All group members will use the following scenario text instead of
-                what is specified in their character cards.
-                Bookmarks inherit the scenario from their parent, and can be changed individually after that.
+                <strong>Unique to this chat.</strong>
+                <span data-group="true">All group members will use the following scenario text instead of what is specified in their character cards.</span>
+                <span data-character="true">The following scenario text will be used instead of the value set in the character card.</span>
+                Bookmarks inherit the scenario override from their parent, and can be changed individually after that.
             </div>
             <div class="range-block-range wide100p">
-                <textarea class="wide100p group_chat_scenario" class="text_pole" rows="15" placeholder="Type here..."></textarea>
+                <textarea class="wide100p chat_scenario" class="text_pole" rows="15" placeholder="Type here..."></textarea>
             </div>
         </div>
     </div>
@@ -3265,4 +3267,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/script.js b/public/script.js
index c88284a62..e8620610f 100644
--- a/public/script.js
+++ b/public/script.js
@@ -130,7 +130,7 @@ import {
     isDataURL,
 } from "./scripts/utils.js";
 
-import { extension_settings, loadExtensionSettings, runGenerationInterceptors } from "./scripts/extensions.js";
+import { extension_settings, loadExtensionSettings, runGenerationInterceptors, saveMetadataDebounced } from "./scripts/extensions.js";
 import { executeSlashCommands, getSlashCommandsHelp, registerSlashCommand } from "./scripts/slash-commands.js";
 import {
     tag_map,
@@ -4871,6 +4871,33 @@ function updateFavButtonState(state) {
     $("#favorite_button").toggleClass('fav_off', !fav_ch_checked);
 }
 
+export function setScenarioOverride() {
+    if (!selected_group && !this_chid) {
+        console.warn('setScenarioOverride() -- no selected group or character');
+        return;
+    }
+
+    const template = $('#scenario_override_template .scenario_override').clone();
+    const metadataValue = chat_metadata['scenario'] || '';
+    const isGroup = !!selected_group;
+    template.find('[data-group="true"]').toggle(isGroup);
+    template.find('[data-character="true"]').toggle(!isGroup);
+    template.find('.chat_scenario').text(metadataValue).on('input', onScenarioOverrideInput);
+    template.find('.remove_scenario_override').on('click', onScenarioOverrideRemoveClick);
+    callPopup(template, 'text');
+}
+
+function onScenarioOverrideInput() {
+    const value = $(this).val();
+    const metadata = { scenario: value, };
+    updateChatMetadata(metadata, false);
+    saveMetadataDebounced();
+}
+
+function onScenarioOverrideRemoveClick() {
+    $(this).closest('.scenario_override').find('.chat_scenario').val('').trigger('input');
+}
+
 function callPopup(text, type, inputValue = '') {
     if (type) {
         popup_type = type;
@@ -6554,6 +6581,8 @@ $(document).ready(function () {
         if (!isMouseOverButtonOrMenu() && menu.is(':visible')) { hideMenu(); }
     });
 
+    $('#set_chat_scenario').on('click', setScenarioOverride);
+
     ///////////// OPTIMIZED LISTENERS FOR LEFT SIDE OPTIONS POPUP MENU //////////////////////
 
     $("#options [id]").on("click", function () {
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index 11e9aad7b..fd8d18554 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -56,6 +56,7 @@ import {
     eventSource,
     event_types,
     getCurrentChatId,
+    setScenarioOverride,
 } from "../script.js";
 import { appendTagToList, createTagMapFromList, getTagsList, applyTagsOnCharacterSelect, tag_map } from './tags.js';
 
@@ -1397,27 +1398,6 @@ export async function saveGroupBookmarkChat(groupId, name, metadata) {
     });
 }
 
-function setGroupScenario() {
-    if (!selected_group) {
-        return;
-    }
-
-    const template = $('#group_scenario_template .group_scenario').clone();
-    const metadataValue = chat_metadata['scenario'] || '';
-    template.find('.group_chat_scenario').text(metadataValue);
-    callPopup(template.get(0).outerHTML, 'text');
-}
-
-function onGroupScenarioInput() {
-    const value = $(this).val();
-    const metadata = { scenario: value, };
-    updateChatMetadata(metadata, false);
-}
-
-function onGroupScenarioRemoveClick() {
-    $(this).closest('.group_scenario').find('.group_chat_scenario').val('').trigger('input');
-}
-
 function onSendTextareaInput() {
     if (is_group_automode_enabled) {
         // Wait for current automode generation to finish
@@ -1437,12 +1417,10 @@ function stopAutoModeGeneration() {
 
 jQuery(() => {
     $(document).on("click", ".group_select", selectGroup);
-    $(document).on("input", ".group_chat_scenario", onGroupScenarioInput);
-    $(document).on("click", ".remove_scenario_override", onGroupScenarioRemoveClick);
     $("#rm_group_filter").on("input", filterGroupMembers);
     $("#group_fav_filter").on("click", toggleFilterByFavorites);
     $("#rm_group_submit").on("click", createGroup);
-    $("#rm_group_scenario").on("click", setGroupScenario);
+    $("#rm_group_scenario").on("click", setScenarioOverride);
     $("#rm_group_automode").on("input", function () {
         const value = $(this).prop("checked");
         is_group_automode_enabled = value;
diff --git a/public/style.css b/public/style.css
index 0b3d84f84..693ba179a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1590,6 +1590,7 @@ grammarly-extension {
     display: flex;
     justify-content: center;
     align-items: center;
+    align-self: center !important;
 }
 
 #first_message_div {
@@ -4645,4 +4646,4 @@ body.waifuMode #avatar_zoom_popup {
     #horde_model {
         height: unset;
     }
-}
\ No newline at end of file
+}