Merge pull request #3955 from SillyTavern/pin-styles Add style pin feature for greeting messages

c6267002261555737eceff3b6b40c9d6c476bf20

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

Signed

Parents: 835c731bcd7a14e06b364cf9238282e198d64c15 fc43ae3891964aceeac35092c7e587b25e5d32c3

public/index.html+4 -0 Viewed

                                     <input id="show_group_chat_queue" type="checkbox" />
                                     <small data-i18n="Show group chat queue">Show group chat queue</small>
                                 </label>
 +                                <label class="checkbox_label" for="pin_styles" title="Always render style tags from greetings, even if the message is unloaded due to lazy loading." data-i18n="[title]Always render style tags from greetings, even if the message is unloaded due to lazy loading.">
 +                                    <input id="pin_styles" type="checkbox" />
 +                                    <small data-i18n="Pin greeting message styles">Pin greeting message styles</small>
 +                                </label>
                                 <div class="inline-drawer wide100p flexFlowColumn">
                                     <div class="inline-drawer-toggle inline-drawer-header userSettingsInnerExpandable" title="Automatically reject and re-generate AI message based on configurable criteria." data-i18n="[title]Automatically reject and re-generate AI message based on configurable criteria">
                                         <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>

public/script.js+3 -0 Viewed

     forceCharacterEditorTokenize,
     applyPowerUserSettings,
     generatedTextFiltered,
 +    applyStylePins,
 } from './scripts/power-user.js';
 import {

@@ -1920,6 +1921,7 @@ export async function showMoreMessages(messagesToLoad = null) {
1920	1921	$('#chat').scrollTop(newHeight - prevHeight);
1921	1922	}
1922	1923
	1924	+ applyStylePins();
1923	1925	await eventSource.emit(event_types.MORE_MESSAGES_LOADED);
1924	1926	}
1925	1927

     hideSwipeButtons();
     showSwipeButtons();
     scrollChatToBottom();
 +    applyStylePins();
     function incrementAndCheck() {
         imagesLoaded++;

public/scripts/power-user.js+54 -1 Viewed

     setActiveCharacter,
     entitiesFilter,
     doNewChat,
 +    messageFormatting,
 } from '../script.js';
 import { isMobile, initMovingUI, favsToHotswap } from './RossAscends-mods.js';
 import {

     forbid_external_media: true,
     external_media_allowed_overrides: [],
     external_media_forbidden_overrides: [],
 +    pin_styles: true,
 };
 let themes = [];

     switchSwipeNumAllMessages();
+}
 +export function applyStylePins() {
 +    try {
 +        const existingPins = document.querySelector('#chat > .style-pins');
 +        if (existingPins) {
 +            existingPins.remove();
 +        }
++
 +        if (!power_user.pin_styles) {
 +            return;
 +        }
++
 +        const firstDisplayed = getFirstDisplayedMessageId();
 +        if (firstDisplayed === 0 || !isFinite(firstDisplayed)) {
 +            return;
 +        }
++
 +        const chatElement = document.getElementById('chat');
 +        if (!chatElement) {
 +            return;
 +        }
++
 +        const firstMessage = chat[0];
 +        if (!firstMessage) {
 +            return;
 +        }
++
 +        const formattedMessage = messageFormatting(firstMessage.mes, firstMessage.name, firstMessage.is_system, firstMessage.is_user, 0, {}, false);
 +        const htmlElement = document.createElement('div');
 +        htmlElement.innerHTML = formattedMessage;
++
 +        const styleTags = htmlElement.querySelectorAll('style');
 +        if (styleTags.length === 0) {
 +            return;
 +        }
++
 +        const pinsElement = document.createElement('div');
 +        pinsElement.classList.add('style-pins');
 +        pinsElement.append(...Array.from(styleTags));
 +        chatElement.prepend(pinsElement);
 +    } catch (error) {
 +        console.error('Error applying style pins:', error);
 +    }
 +}
++
 function getExampleMessagesBehavior() {
     if (power_user.strip_examples) {
         return 'strip';

     $('#auto-connect-checkbox').prop('checked', power_user.auto_connect);
     $('#auto-load-chat-checkbox').prop('checked', power_user.auto_load_chat);
     $('#forbid_external_media').prop('checked', power_user.forbid_external_media);
 +    $('#pin_styles').prop('checked', power_user.pin_styles);
     for (const theme of themes) {
         const option = document.createElement('option');

         reloadCurrentChat();
     });
 +    $('#pin_styles').on('input', function () {
 +        power_user.pin_styles = !!$(this).prop('checked');
 +        saveSettingsDebounced();
 +        applyStylePins();
 +    });
++
     $('#ui_preset_import_button').on('click', function () {
         $('#ui_preset_import_file').trigger('click');
     });

                 enumList: commonEnumProviders.boolean('trueFalse')(),
             }),
         ],
         unnamedArgumentList: [
             SlashCommandArgument.fromProps({
                 description: 'value',
                 typeList: [ARGUMENT_TYPE.STRING],

public/style.css+11 -0 Viewed

     background-color: rgb(102, 0, 0);
+}
 +#chat .style-pins {
 +    visibility: hidden;
 +    position: fixed;
 +    left: -9999px;
 +    top: -9999px;
 +    width: 0;
 +    height: 0;
 +    opacity: 0;
 +    pointer-events: none;
 +}
++
 .mes q:before,
 .mes q:after {
     content: '';