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

c6267002261555737eceff3b6b40c9d6c476bf20

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

Signed

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	$('#chat').scrollTop(newHeight - prevHeight);	1921	$('#chat').scrollTop(newHeight - prevHeight);
1921	}	1922	}
1922		1923
		1924	applyStylePins();
1923	await eventSource.emit(event_types.MORE_MESSAGES_LOADED);	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+53 -0 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');
     });

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: '';