Add style pin feature for greeting messages

public/index.html

@@ -4778,6 +4778,10 @@
                                     <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

@@ -97,6 +97,7 @@ import {
     forceCharacterEditorTokenize,
     applyPowerUserSettings,
     generatedTextFiltered,
+    applyStylePins,
 } from './scripts/power-user.js';
 
 import {
@@ -1920,6 +1921,7 @@ export async function showMoreMessages(messagesToLoad = null) {
         $('#chat').scrollTop(newHeight - prevHeight);
     }
 
+    applyStylePins();
     await eventSource.emit(event_types.MORE_MESSAGES_LOADED);
 }
 
@@ -1957,6 +1959,7 @@ export async function printMessages() {
     hideSwipeButtons();
     showSwipeButtons();
     scrollChatToBottom();
+    applyStylePins();
 
     function incrementAndCheck() {
         imagesLoaded++;

public/scripts/power-user.js

@@ -25,6 +25,7 @@ import {
     setActiveCharacter,
     entitiesFilter,
     doNewChat,
+    messageFormatting,
 } from '../script.js';
 import { isMobile, initMovingUI, favsToHotswap } from './RossAscends-mods.js';
 import {
@@ -318,6 +319,7 @@ let power_user = {
     forbid_external_media: true,
     external_media_allowed_overrides: [],
     external_media_forbidden_overrides: [],
+    pin_styles: true,
 };
 
 let themes = [];
@@ -1390,6 +1392,50 @@ function applyPowerUserSettings() {
     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';
@@ -1600,6 +1646,7 @@ async function loadPowerUserSettings(settings, data) {
     $('#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');
@@ -3876,6 +3923,12 @@ $(document).ready(() => {
         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');
     });
@@ -4227,7 +4280,7 @@ $(document).ready(() => {
                 enumList: commonEnumProviders.boolean('trueFalse')(),
             }),
         ],
-        unnamedArgumentList:[
+        unnamedArgumentList: [
             SlashCommandArgument.fromProps({
                 description: 'value',
                 typeList: [ARGUMENT_TYPE.STRING],

public/style.css

@@ -1205,6 +1205,17 @@ body .panelControlBar {
     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: '';