Character settings overrides UI (#4707) * + Implemented support for overrides of system prompt and example messages from chat metadata. This is needed for BYAF import parity. No UI for modifying these yet, but they're easily changeable in the chat files already. These metadata settings are already supported by BYAF import as of the last commit so this just enables them. * + Updated scenario overrides popup to now be a character settings overrides popup. + Updated the template to have a new section for example messages and system prompts + Updated the logic to handle all three overrides + Updated logic to only save when the popup is closed, instead of on every character input. * Preserve import, allow scrolling * Add confirmation on override removal. Always save pending changes. * Update dialog layout, add editor expand buttons * Fix mes examples override in group chats with Join mode * Update group chat button title * Specify that Prefer Char. Prompt is a requirement * Fix group join mode not replacing macros in overrides --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

47f744dfdfc075deee7d4c587f7bb6897d9223d4

docfail <4965997+docfail@users.noreply.github.com>

Signed

Parents: 6757a0375b726f751ca9f1a6141355a4db4326f2

public/index.html+4 -4 Viewed

                                                 <div class="chat_lorebook_button menu_button fa-solid fa-passport" title="Chat Lore&#10;Alt+Click to open the lorebook" data-i18n="[title]Chat Lore Alt+Click to open the lorebook"></div>
                                                 <div id="char_connections_button" class="menu_button fa-solid fa-face-smile" title="Connected Personas" data-i18n="[title]Connected Personas"></div>
                                                 <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download" data-i18n="[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="set_chat_character_settings" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
                                                 <!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->
                                                 <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character" data-i18n="[title]Duplicate Character"></div>
                                                 <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">

                                                     <option id="import_character_info" data-i18n="Import Card Lore">
                                                         Import Card Lore
                                                     </option>
-                                                    <option id="set_chat_scenario" data-i18n="Scenario Override">
+                                                    <option id="set_chat_character_settings" data-i18n="Character Settings Overrides">
-                                                        Scenario Override
+                                                        Character Settings Overrides
                                                     </option>
                                                     <option id="convert_to_persona" data-i18n="Convert to Persona">
                                                         Convert to Persona

                                         </div>
                                         <div id="GroupFavDelOkBack" class="flex-container flexGap5 spaceEvenly flex1">
                                             <div id="rm_button_back_from_group" class="heightFitContent margin0 menu_button fa-solid fa-fw fa-left-long"></div>
-                                            <div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-fw fa-scroll" title="Set a group chat scenario" data-i18n="[title]Set a group chat scenario"></div>
+                                            <div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-fw fa-scroll" title="Set group chat character settings overrides" data-i18n="[title]Set group chat character settings overrides"></div>
                                             <div id="group_favorite_button" class="heightFitContent margin0 menu_button fa-solid fa-fw fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
                                             <input id="rm_group_fav" type="hidden" />
                                             <div id="group_open_media_overrides" class="heightFitContent margin0 menu_button menu_button_icon open_media_overrides" title="Click to allow/forbid the use of external media for this group." data-i18n="[title]Click to allow/forbid the use of external media for this group.">

public/script.js+58 -22 Viewed

     getSystemMessageByType,
     event_types,
     eventSource,
+    setCharacterSettingsOverrides as setScenarioOverride,
 };
 /**

+    }
     const scenarioText = chat_metadata['scenario'] || character.scenario || '';
+    const exampleDialog = chat_metadata['mes_example'] || character.mes_example || '';
+    const systemPrompt = chat_metadata['system_prompt'] || character.data?.system_prompt || '';
     result.description = baseChatReplace(character.description?.trim(), name1, name2);
     result.personality = baseChatReplace(character.personality?.trim(), name1, name2);
     result.scenario = baseChatReplace(scenarioText.trim(), name1, name2);
-    result.mesExamples = baseChatReplace(character.mes_example?.trim(), name1, name2);
+    result.mesExamples = baseChatReplace(exampleDialog.trim(), name1, name2);
-    result.system = power_user.prefer_character_prompt ? baseChatReplace(character.data?.system_prompt?.trim(), name1, name2) : '';
+    result.system = power_user.prefer_character_prompt ? baseChatReplace(systemPrompt.trim(), name1, name2) : '';
     result.jailbreak = power_user.prefer_character_jailbreak ? baseChatReplace(character.data?.post_history_instructions?.trim(), name1, name2) : '';
     result.version = character.data?.character_version ?? '';
     result.charDepthPrompt = baseChatReplace(character.data?.extensions?.depth_prompt?.prompt?.trim(), name1, name2);

     $('#char_connections_button').show();
     // Hide the chat scenario button if we're peeking the group member defs
-    $('#set_chat_scenario').toggle(!selected_group);
+    $('#set_chat_character_settings').toggle(!selected_group);
     // Don't update the navbar name if we're peeking the group member defs
     if (!selected_group) {

     switchMenu && selectRightMenuWithAnimation('rm_ch_create_block');
-    $('#set_chat_scenario').hide();
+    $('#set_chat_character_settings').hide();
     $('#delete_button_div').css('display', 'none');
     $('#delete_button').css('display', 'none');
     $('#export_button').css('display', 'none');

     $('#favorite_button').toggleClass('fav_off', !state);
+}
-export async function setScenarioOverride() {
+export async function setCharacterSettingsOverrides() {
     if (!selected_group && (this_chid === undefined || !characters[this_chid])) {
-        console.warn('setScenarioOverride() -- no selected group or character');
+        console.warn('setCharacterSettingsOverrides() -- no selected group or character');
         return;
+    }
-    const metadataValue = chat_metadata['scenario'] || '';
+    const scenarioOverrideValue = chat_metadata['scenario'] || '';
+    const exampleMessagesValue = chat_metadata['mes_example'] || '';
+    const systemPromptValue = chat_metadata['system_prompt'] || '';
     const isGroup = !!selected_group;
     const $template = $(await renderTemplateAsync('scenarioOverride'));
     $template.find('[data-group="true"]').toggle(isGroup);
     $template.find('[data-character="true"]').toggle(!isGroup);
-    // TODO: Why does this save on every character input? Save on popup close
+    const pendingChanges = {
-    $template.find('.chat_scenario').val(metadataValue).on('input', onScenarioOverrideInput);
+        scenario: scenarioOverrideValue,
-    $template.find('.remove_scenario_override').on('click', onScenarioOverrideRemoveClick);
+        examples: exampleMessagesValue,
+        system_prompt: systemPromptValue,
+    };
-    await callGenericPopup($template, POPUP_TYPE.TEXT, '');
+    // Keep edits local until the popup is closed/confirmed
-}
+    const $scenario = $template.find('.chat_scenario');
+    $scenario.val(scenarioOverrideValue).on('input', function () {
+        pendingChanges.scenario = String($(this).val());
+    });
+    const $examples = $template.find('.chat_examples');
+    $examples.val(exampleMessagesValue).on('input', function () {
+        pendingChanges.examples = String($(this).val());
+    });
+    const $systemPrompt = $template.find('.chat_system_prompt');
+    $systemPrompt.val(systemPromptValue).on('input', function () {
+        pendingChanges.system_prompt = String($(this).val());
+    });
-function onScenarioOverrideInput() {
+    $template.find('.remove_scenario_override').on('click', async function () {
-    const value = String($(this).val());
+        const confirm = await Popup.show.confirm(t`Are you sure you want to remove all overrides?`, t`This action cannot be undone.`);
-    chat_metadata['scenario'] = value;
+        if (!confirm) {
-    saveMetadataDebounced();
+            return;
-}
+        }
+        $scenario.val('');
+        pendingChanges.scenario = '';
+        $examples.val('');
+        pendingChanges.examples = '';
+        $systemPrompt.val('');
+        pendingChanges.system_prompt = '';
+    });
-function onScenarioOverrideRemoveClick() {
+    // Wait for popup close/confirm.
-    $(this).closest('.scenario_override').find('.chat_scenario').val('').trigger('input');
+    await callGenericPopup($template, POPUP_TYPE.TEXT, '', {
+        wide: true,
+        large: true,
+        allowVerticalScrolling: true,
+    });
+    chat_metadata['scenario'] = pendingChanges.scenario;
+    chat_metadata['mes_example'] = pendingChanges.examples;
+    chat_metadata['system_prompt'] = pendingChanges.system_prompt;
+    saveMetadataDebounced();
+}
 /**

         if (!isMouseOverButtonOrMenu()) { hideMenu(); }
     });
-    /* $('#set_chat_scenario').on('click', setScenarioOverride); */
+    /* $('#set_chat_character_settings').on('click', setScenarioOverride); */
     ///////////// OPTIMIZED LISTENERS FOR LEFT SIDE OPTIONS POPUP MENU //////////////////////
     $('#options [id]').on('click', async function (event, customData) {

             case 'set_character_world':
                 await openCharacterWorldPopup();
                 break;
-            case 'set_chat_scenario':
+            case 'set_chat_character_settings':
-                await setScenarioOverride();
+                await setCharacterSettingsOverrides();
                 break;
             case 'renameCharButton':
                 await renameCharacter();

public/scripts/group-chats.js+7 -5 Viewed

     setEditedMessageId,
     is_send_press,
     name1,
+    name2,
     resetChatState,
     setSendButtonState,
     getCharacters,

     eventSource,
     event_types,
     getCurrentChatId,
-    setScenarioOverride,
+    setCharacterSettingsOverrides,
     system_avatar,
     isChatSaving,
     setExternalAbortController,

         return `${prefix}${value}${suffix}`;
+    }
-    const scenarioOverride = chat_metadata['scenario'];
+    const scenarioOverride = String(chat_metadata['scenario'] || '');
+    const mesExamplesOverride = String(chat_metadata['mes_example'] || '');
     let descriptions = [];
     let personalities = [];

     const description = descriptions.filter(x => x.length).join('\n');
     const personality = personalities.filter(x => x.length).join('\n');
-    const scenario = scenarioOverride?.trim() || scenarios.filter(x => x.length).join('\n');
+    const scenario = baseChatReplace(scenarioOverride?.trim(), name1, name2) || scenarios.filter(x => x.length).join('\n');
-    const mesExamples = mesExamplesArray.filter(x => x.length).join('\n');
+    const mesExamples = baseChatReplace(mesExamplesOverride?.trim(), name1, name2) || mesExamplesArray.filter(x => x.length).join('\n');
     return { description, personality, scenario, mesExamples };
+}

     });
     $('#rm_group_filter').on('input', filterGroupMembers);
     $('#rm_group_submit').on('click', createGroup);
-    $('#rm_group_scenario').on('click', setScenarioOverride);
+    $('#rm_group_scenario').on('click', setCharacterSettingsOverrides);
     $('#rm_group_automode').on('input', function () {
         const value = $(this).prop('checked');
         is_group_automode_enabled = value;

public/scripts/templates/scenarioOverride.html+40 -12 Viewed

-<div class="scenario_override range-block flexFlowColumn flex-container">
+<div class="scenario_override flexFlowColumn flex-container justifyLeft">
-    <div class="range-block-title title_restorable">
+    <div class="title_restorable alignItemsBaseline">
-        <h3><span data-i18n="Chat Scenario Override" class="margin0">Chat Scenario Override</span></h3>
+        <h3><span data-i18n="Chat Character Settings Override" class="margin0">Chat Character Settings Override</span></h3>
-        <div title="Remove" data-i18n="[title]Remove"
+        <div class="menu_button menu_button_icon remove_scenario_override">
-            class="menu_button fa-solid fa-trash-can remove_scenario_override"></div>
+            <i class="fa-solid fa-trash-can "></i>
+            <span data-i18n="Remove">Remove</span>
+        </div>
     </div>
-    <div class="range-block-counter justifyLeft flex-container flexFlowColumn">
+    <div>
         <strong data-i18n="Unique to this chat.">Unique to this chat.</strong>
-        <span data-group="true" data-i18n="All group members will use the following scenario text instead of what is specified in their character cards.">All group members will use the following scenario text instead of what is specified in their character cards.</span>
+        <span data-group="true" data-i18n="All group members will use the following values instead of what is specified in their character cards.">All group members will use the following values instead of what is specified in their character cards.</span>
-        <span data-character="true" data-i18n="The following scenario text will be used instead of the value set in the character card.">The following scenario text will be used instead of the value set in the character card.</span>
+        <span data-character="true" data-i18n="The following values will be used instead of the value set in the character card.">The following values will be used instead of the value set in the character card.</span>
-        <span data-i18n="Checkpoints inherit the scenario override from their parent, and can be changed individually after that.">Checkpoints inherit the scenario override from their parent, and can be changed individually after that.</span>
+        <span data-i18n="Checkpoints inherit the overrides from their parent, and can be changed individually after that.">Checkpoints inherit the overrides from their parent, and can be changed individually after that.</span>
     </div>
-    <div class="range-block-range wide100p">
+    <hr>
-        <textarea class="wide100p chat_scenario" class="text_pole" rows="15" data-i18n="[placeholder]Type here..."
+    <div class="wide100p flex-container flexFlowColumn">
-            placeholder="Type here..."></textarea>
+        <h4 class="flex-container alignItemsBaseline">
+            <span data-i18n="Scenario">Scenario</span>
+            <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="chat_scenario_override" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
+        </h4>
+        <div>
+            <textarea id="chat_scenario_override" class="chat_scenario text_pole" rows="6" data-i18n="[placeholder]Type Scenario here..." placeholder="Type Scenario here..."></textarea>
+        </div>
+        <h4 class="flex-container alignItemsBaseline">
+            <span data-i18n="Examples of dialogue">Examples of dialogue</span>
+            <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="chat_examples_override" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
+        </h4>
+        <div>
+            <textarea id="chat_examples_override" class="chat_examples text_pole" rows="6" data-i18n="[placeholder]Type Example Messages here..." placeholder="Type Example Messages here..."></textarea>
+        </div>
+        <h4 class="flex-container alignItemsBaseline">
+            <span data-i18n="Main Prompt">Main Prompt</span>
+            <small>
+                <small>&mdash;</small>
+                <i class="fa-solid fa-user-cog"></i>
+                <b data-i18n="Prefer Char. Prompt">Prefer Char. Prompt</b>
+                <span data-i18n="MUST be enabled!">MUST be enabled!</span>
+            </small>
+            <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="chat_system_prompt_override" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
+        </h4>
+        <div>
+            <textarea id="chat_system_prompt_override" class="chat_system_prompt text_pole" rows="6" data-i18n="[placeholder]Type System Prompt here..." placeholder="Type System Prompt here..."></textarea>
+        </div>
     </div>
 </div>