Merge branch 'dev' of https://github.com/BlipRanger/SillyTavern into feature/stats

public/scripts/power-user.js

@@ -28,6 +28,8 @@ import {
 
 import { registerSlashCommand } from "./slash-commands.js";
 
+import { delay, debounce } from "./utils.js";
+
 export {
     loadPowerUserSettings,
     loadMovingUIState,
@@ -50,9 +52,10 @@ const avatar_styles = {
     RECTANGULAR: 1,
 }
 
-const chat_styles = {
+export const chat_styles = {
     DEFAULT: 0,
     BUBBLES: 1,
+    DOCUMENT: 2,
 }
 
 const sheld_width = {
@@ -102,11 +105,14 @@ let power_user = {
     trim_sentences: false,
     include_newline: false,
     always_force_name2: false,
+    user_prompt_bias: '',
+    show_user_prompt_bias: true,
     multigen: false,
     multigen_first_chunk: 50,
     multigen_next_chunks: 30,
     custom_chat_separator: '',
     markdown_escape_strings: '',
+
     fast_ui_mode: true,
     avatar_style: avatar_styles.ROUND,
     chat_display: chat_styles.DEFAULT,
@@ -116,6 +122,8 @@ let power_user = {
     play_message_sound: false,
     play_sound_unfocused: true,
     auto_save_msg_edits: false,
+    confirm_message_delete: true,
+
     sort_field: 'name',
     sort_order: 'asc',
     sort_rule: null,
@@ -126,7 +134,6 @@ let power_user = {
     main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
     italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
     quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`,
-    //fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`,
     blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
     user_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeUserMesBlurTintColor').trim()}`,
     bot_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBotMesBlurTintColor').trim()}`,
@@ -153,9 +160,12 @@ let power_user = {
     hotswap_enabled: true,
     timer_enabled: true,
     timestamps_enabled: true,
+    mesIDDisplay_enabled: false,
     max_context_unlocked: false,
     prefer_character_prompt: true,
     prefer_character_jailbreak: true,
+    continue_on_send: false,
+    trim_spaces: true,
 
     instruct: {
         enabled: false,
@@ -177,6 +187,8 @@ let power_user = {
 
     persona_description: '',
     persona_description_position: persona_description_positions.BEFORE_CHAR,
+
+    custom_stopping_strings: '',
 };
 
 let themes = [];
@@ -192,7 +204,6 @@ const storage_keys = {
     main_text_color: "TavernAI_main_text_color",
     italics_text_color: "TavernAI_italics_text_color",
     quote_text_color: "TavernAI_quote_text_color",
-    //fastui_bg_color: "TavernAI_fastui_bg_color",
     blur_tint_color: "TavernAI_blur_tint_color",
     user_mes_blur_tint_color: "TavernAI_user_mes_blur_tint_color",
     bot_mes_blur_tint_color: "TavernAI_bot_mes_blur_tint_color",
@@ -207,6 +218,7 @@ const storage_keys = {
     hotswap_enabled: 'HotswapEnabled',
     timer_enabled: 'TimerEnabled',
     timestamps_enabled: 'TimestampsEnabled',
+    mesIDDisplay_enabled: 'mesIDDisplayEnabled',
 };
 
 let browser_has_focus = true;
@@ -284,6 +296,13 @@ function switchTimestamps() {
     $("#messageTimestampsEnabled").prop("checked", power_user.timestamps_enabled);
 }
 
+function switchMesIDDisplay() {
+    const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
+    power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
+    $("body").toggleClass("no-mesIDDisplay", !power_user.mesIDDisplay_enabled);
+    $("#MesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
+}
+
 function switchUiMode() {
     const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
@@ -298,16 +317,35 @@ function toggleWaifu() {
 function switchWaifuMode() {
     $("body").toggleClass("waifuMode", power_user.waifuMode);
     $("#waifuMode").prop("checked", power_user.waifuMode);
-    /*     if (isMobile() && !$('body').hasClass('waifuMode')) {
-            console.debug('saw mobile regular mode, removing ZoomedAvatars');
-            if ($('.zoomed_avatar[forChar]').length) {
-                $('.zoomed_avatar[forChar]').remove();
-            }
-            return;
-        } */
     scrollChatToBottom();
 }
 
+function switchSpoilerMode() {
+    if (power_user.spoiler_free_mode) {
+        $("#description_div").hide();
+        $("#description_textarea").hide();
+        $("#firstmessage_textarea").hide();
+        $("#first_message_div").hide();
+        $("#spoiler_free_desc").show();
+    }
+    else {
+        $("#description_div").show();
+        $("#description_textarea").show();
+        $("#firstmessage_textarea").show();
+        $("#first_message_div").show();
+        $("#spoiler_free_desc").hide();
+    }
+}
+
+function peekSpoilerMode() {
+    $("#description_div").toggle();
+    $("#description_textarea").toggle();
+    $("#firstmessage_textarea").toggle();
+    $("#first_message_div").toggle();
+
+}
+
+
 function switchMovingUI() {
     const movingUI = localStorage.getItem(storage_keys.movingUI);
     power_user.movingUI = movingUI === null ? false : movingUI == "true";
@@ -318,7 +356,6 @@ function switchMovingUI() {
             loadMovingUIState();
         }
     };
-    //scrollChatToBottom();
 }
 
 function noShadows() {
@@ -337,10 +374,35 @@ function applyAvatarStyle() {
 }
 
 function applyChatDisplay() {
-    power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
-    $("body").toggleClass("bubblechat", power_user.chat_display === chat_styles.BUBBLES);
-    $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
 
+    if (!power_user.chat_display === (null || undefined)) {
+        console.debug('applyChatDisplay: saw no chat display type defined')
+        return
+    }
+    console.debug(`applyChatDisplay: applying ${power_user.chat_display}`)
+
+    $(`#chat_display option[value=${power_user.chat_display}]`).attr("selected", true)
+
+    switch (power_user.chat_display) {
+        case 0: {
+            console.log('applying default chat')
+            $("body").removeClass("bubblechat");
+            $("body").removeClass("documentstyle");
+            break
+        }
+        case 1: {
+            console.log('applying bubblechat')
+            $("body").addClass("bubblechat");
+            $("body").removeClass("documentstyle");
+            break
+        }
+        case 2: {
+            console.log('applying document style')
+            $("body").removeClass("bubblechat");
+            $("body").addClass("documentstyle");
+            break
+        }
+    }
 }
 
 function applySheldWidth() {
@@ -416,7 +478,6 @@ async function applyTheme(name) {
         { key: 'main_text_color', selector: '#main-text-color-picker', type: 'main' },
         { key: 'italics_text_color', selector: '#italics-color-picker', type: 'italics' },
         { key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' },
-        //{ key: 'fastui_bg_color', selector: '#fastui-bg-color-picker', type: 'fastUIBG' },
         { key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' },
         { key: 'user_mes_blur_tint_color', selector: '#user-mes-blur-tint-color-picker', type: 'userMesBlurTint' },
         { key: 'bot_mes_blur_tint_color', selector: '#bot-mes-blur-tint-color-picker', type: 'botMesBlurTint' },
@@ -498,6 +559,13 @@ async function applyTheme(name) {
                 switchTimestamps();
             }
         },
+        {
+            key: 'mesIDDisplay_enabled',
+            action: async () => {
+                localStorage.setItem(storage_keys.mesIDDisplay_enabled, power_user.mesIDDisplay_enabled);
+                switchMesIDDisplay();
+            }
+        },
         {
             key: 'hotswap_enabled',
             action: async () => {
@@ -530,12 +598,12 @@ applySheldWidth();
 applyAvatarStyle();
 applyBlurStrength();
 applyShadowWidth();
-applyChatDisplay();
 switchMovingUI();
 noShadows();
 switchHotswap();
 switchTimer();
 switchTimestamps();
+switchMesIDDisplay();
 
 function loadPowerUserSettings(settings, data) {
     // Load from settings.json
@@ -558,22 +626,35 @@ function loadPowerUserSettings(settings, data) {
     const hotswap = localStorage.getItem(storage_keys.hotswap_enabled);
     const timer = localStorage.getItem(storage_keys.timer_enabled);
     const timestamps = localStorage.getItem(storage_keys.timestamps_enabled);
+    const mesIDDisplay = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
     power_user.movingUI = movingUI === null ? false : movingUI == "true";
     power_user.noShadows = noShadows === null ? false : noShadows == "true";
     power_user.hotswap_enabled = hotswap === null ? true : hotswap == "true";
     power_user.timer_enabled = timer === null ? true : timer == "true";
     power_user.timestamps_enabled = timestamps === null ? true : timestamps == "true";
+    power_user.mesIDDisplay_enabled = mesIDDisplay === null ? true : mesIDDisplay == "true";
     power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
-    power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
+    //power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
     power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
     power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
     power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 10);
 
+    if (power_user.chat_display === '') {
+        power_user.chat_display = chat_styles.DEFAULT;
+    }
+
+    if (power_user.waifuMode === '') {
+        power_user.waifuMode = false;
+    }
+
+    $('#trim_spaces').prop("checked", power_user.trim_spaces);
+    $('#continue_on_send').prop("checked", power_user.continue_on_send);
     $('#auto_swipe').prop("checked", power_user.auto_swipe);
     $('#auto_swipe_minimum_length').val(power_user.auto_swipe_minimum_length);
     $('#auto_swipe_blacklist').val(power_user.auto_swipe_blacklist.join(", "));
     $('#auto_swipe_blacklist_threshold').val(power_user.auto_swipe_blacklist_threshold);
+    $('#custom_stopping_strings').val(power_user.custom_stopping_strings);
 
     $("#console_log_prompts").prop("checked", power_user.console_log_prompts);
     $('#auto_fix_generated_markdown').prop("checked", power_user.auto_fix_generated_markdown);
@@ -582,6 +663,8 @@ function loadPowerUserSettings(settings, data) {
     $(`#pygmalion_formatting option[value=${power_user.pygmalion_formatting}]`).attr("selected", true);
     $(`#send_on_enter option[value=${power_user.send_on_enter}]`).attr("selected", true);
     $("#import_card_tags").prop("checked", power_user.import_card_tags);
+    $("#confirm_message_delete").prop("checked", power_user.confirm_message_delete !== undefined ? !!power_user.confirm_message_delete : true);
+    $("#spoiler_free_mode").prop("checked", power_user.spoiler_free_mode);
     $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
     $("#pin-examples-checkbox").prop("checked", power_user.pin_examples);
     $("#disable-description-formatting-checkbox").prop("checked", power_user.disable_description_formatting);
@@ -599,6 +682,8 @@ function loadPowerUserSettings(settings, data) {
     $("#waifuMode").prop("checked", power_user.waifuMode);
     $("#movingUImode").prop("checked", power_user.movingUI);
     $("#noShadowsmode").prop("checked", power_user.noShadows);
+    $("#start_reply_with").val(power_user.user_prompt_bias);
+    $("#chat-show-reply-prefix-checkbox").prop("checked", power_user.show_user_prompt_bias);
     $("#multigen").prop("checked", power_user.multigen);
     $("#multigen_first_chunk").val(power_user.multigen_first_chunk);
     $("#multigen_next_chunks").val(power_user.multigen_next_chunks);
@@ -613,10 +698,11 @@ function loadPowerUserSettings(settings, data) {
     $("#hotswapEnabled").prop("checked", power_user.hotswap_enabled);
     $("#messageTimerEnabled").prop("checked", power_user.timer_enabled);
     $("#messageTimestampsEnabled").prop("checked", power_user.timestamps_enabled);
+    $("#mesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
     $("#prefer_character_prompt").prop("checked", power_user.prefer_character_prompt);
     $("#prefer_character_jailbreak").prop("checked", power_user.prefer_character_jailbreak);
     $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
-    $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
+    $(`#chat_display option[value=${power_user.chat_display}]`).attr("selected", true).trigger('change');
     $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
     $("#token_padding").val(power_user.token_padding);
 
@@ -652,6 +738,7 @@ function loadPowerUserSettings(settings, data) {
     loadInstructMode();
     loadMaxContextUnlocked();
     switchWaifuMode();
+    switchSpoilerMode();
     loadMovingUIState();
 
 }
@@ -897,6 +984,7 @@ async function saveTheme() {
         sheld_width: power_user.sheld_width,
         timer_enabled: power_user.timer_enabled,
         timestamps_enabled: power_user.timestamps_enabled,
+        mesIDDisplay_enabled: power_user.mesIDDisplay_enabled,
         hotswap_enabled: power_user.hotswap_enabled,
 
     };
@@ -928,7 +1016,7 @@ async function saveTheme() {
     }
 }
 
-function resetMovablePanels() {
+async function resetMovablePanels(type) {
     const panelIds = [
         'sheld',
         'left-nav-panel',
@@ -944,28 +1032,38 @@ function resetMovablePanels() {
         const panel = document.getElementById(id);
 
         if (panel) {
+            $(panel).addClass('resizing');
             panelStyles.forEach((style) => {
                 panel.style[style] = '';
             });
         }
     });
 
-    const zoomedAvatar = document.querySelector('.zoomed_avatar');
-    if (zoomedAvatar) {
-        panelStyles.forEach((style) => {
-            zoomedAvatar.style[style] = '';
+    const zoomedAvatars = document.querySelectorAll('.zoomed_avatar');
+    if (zoomedAvatars.length > 0) {
+        zoomedAvatars.forEach((avatar) => {
+            avatar.classList.add('resizing');
+            panelStyles.forEach((style) => {
+                avatar.style[style] = '';
+            });
         });
     }
 
     $('[data-dragged="true"]').removeAttr('data-dragged');
+    await delay(50)
+
     power_user.movingUIState = {};
     saveSettingsDebounced();
     eventSource.emit(event_types.MOVABLE_PANELS_RESET);
 
     eventSource.once(event_types.SETTINGS_UPDATED, () => {
-        toastr.success('Panel positions reset');
+        $(".resizing").removeClass('resizing');
+        if (type === 'resize') {
+            toastr.warning('Panel positions reset due to zoom/resize');
+        } else {
+            toastr.success('Panel positions reset');
+        }
     });
-
 }
 
 function doNewChat() {
@@ -987,13 +1085,342 @@ function doRandomChat() {
 
 }
 
-function doDelMode() {
-    setTimeout(() => {
-        $("#option_delete_mes").trigger('click')
-    }, 1);
+async function doMesCut(_, text) {
+
+    //reject invalid args or no args
+    if (text && isNaN(text) || !text) {
+        toastr.error(`Must enter a single number only, non-number characters disallowed.`)
+        return
+    }
+
+    //reject attempts to delete firstmes
+    if (text === 0) {
+        toastr.error('Cannot delete the First Message')
+        return
+    }
+
+    let mesIDToCut = Number(text).toFixed(0)
+    let mesToCut = $("#chat").find(`.mes[mesid=${mesIDToCut}]`)
+
+    if (!mesToCut.length) {
+        toastr.error(`Could not find message with ID: ${mesIDToCut}`)
+        return
+    }
+
+    mesToCut.find('.mes_edit_delete').trigger('click');
+    $('#dialogue_popup_ok').trigger('click');
+}
+
+
+async function doDelMode(_, text) {
+
+    //first enter delmode
+    $("#option_delete_mes").trigger('click')
+
+    //reject invalid args
+    if (text && isNaN(text)) {
+        toastr.warning('Must enter a number or nothing.')
+        await delay(300) //unsure why 300 is neccessary here, but any shorter and it wont see the delmode UI
+        $("#dialogue_del_mes_cancel").trigger('click');
+        return
+    }
+
+    //parse valid args
+    if (text) {
+        await delay(300) //same as above, need event signal for 'entered del mode'
+        console.debug('parsing msgs to del')
+        let numMesToDel = Number(text).toFixed(0)
+        let lastMesID = $('.last_mes').attr('mesid')
+        let oldestMesIDToDel = lastMesID - numMesToDel + 1;
+
+        //disallow targeting first message
+        if (oldestMesIDToDel <= 0) {
+            oldestMesIDToDel = 1
+        }
+
+        let oldestMesToDel = $('#chat').find(`.mes[mesid=${oldestMesIDToDel}]`)
+        let oldestDelMesCheckbox = $(oldestMesToDel).find('.del_checkbox');
+        let newLastMesID = oldestMesIDToDel - 1;
+        console.debug(`DelMesReport -- numMesToDel:  ${numMesToDel}, lastMesID: ${lastMesID}, oldestMesIDToDel:${oldestMesIDToDel}, newLastMesID: ${newLastMesID}`)
+        oldestDelMesCheckbox.trigger('click');
+        let trueNumberOfDeletedMessage = lastMesID - oldestMesIDToDel + 1
+
+        //await delay(1)
+        $('#dialogue_del_mes_ok').trigger('click');
+        toastr.success(`Deleted ${trueNumberOfDeletedMessage} messages.`)
+        return
+    }
+}
+
+function doResetPanels() {
+    $("#movingUIreset").trigger('click');
+}
+
+
+
+
+function setAvgBG() {
+    const bgimg = new Image();
+    bgimg.src = $('#bg1')
+        .css('background-image')
+        .replace(/^url\(['"]?/, '')
+        .replace(/['"]?\)$/, '');
+
+    /*     const charAvatar = new Image()
+        charAvatar.src = $("#avatar_load_preview")
+            .attr('src')
+            .replace(/^url\(['"]?/, '')
+            .replace(/['"]?\)$/, '');
+
+        const userAvatar = new Image()
+        userAvatar.src = $("#user_avatar_block .avatar.selected img")
+            .attr('src')
+            .replace(/^url\(['"]?/, '')
+            .replace(/['"]?\)$/, ''); */
+
+
+    bgimg.onload = function () {
+        var rgb = getAverageRGB(bgimg);
+        //console.log(`average color of the bg is:`)
+        //console.log(rgb);
+        $("#blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
+
+        const backgroundColorString = $("#blur-tint-color-picker").attr('color')
+            .replace('rgba', '')
+            .replace('rgb', '')
+            .replace('(', '[')
+            .replace(')', ']');   //[50, 120, 200, 1]; // Example background color
+        const backgroundColorArray = JSON.parse(backgroundColorString) //[200, 200, 200, 1]
+        console.log(backgroundColorArray)
+        $("#main-text-color-picker").attr('color', getReadableTextColor(backgroundColorArray));
+        console.log($("#main-text-color-picker").attr('color')); // Output: 'rgba(0, 47, 126, 1)'
+    }
+
+    /*     charAvatar.onload = function () {
+            var rgb = getAverageRGB(charAvatar);
+            //console.log(`average color of the AI avatar is:`);
+            //console.log(rgb);
+            $("#bot-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
+        }
+
+        userAvatar.onload = function () {
+            var rgb = getAverageRGB(userAvatar);
+            //console.log(`average color of the user avatar is:`);
+            //console.log(rgb);
+            $("#user-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
+        } */
+
+
+
+
+
+    function getAverageRGB(imgEl) {
+
+        var blockSize = 5, // only visit every 5 pixels
+            defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs
+            canvas = document.createElement('canvas'),
+            context = canvas.getContext && canvas.getContext('2d'),
+            data, width, height,
+            i = -4,
+            length,
+            rgb = { r: 0, g: 0, b: 0 },
+            count = 0;
+
+        if (!context) {
+            return defaultRGB;
+        }
+
+        height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
+        width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
+        context.drawImage(imgEl, 0, 0);
+
+        try {
+            data = context.getImageData(0, 0, width, height);
+        } catch (e) {
+    /* security error, img on diff domain */alert('x');
+            return defaultRGB;
+        }
+
+        length = data.data.length;
+        while ((i += blockSize * 4) < length) {
+            ++count;
+            rgb.r += data.data[i];
+            rgb.g += data.data[i + 1];
+            rgb.b += data.data[i + 2];
+        }
+
+        // ~~ used to floor values
+        rgb.r = ~~(rgb.r / count);
+        rgb.g = ~~(rgb.g / count);
+        rgb.b = ~~(rgb.b / count);
+
+        return rgb;
+
+    }
+
+    function hslToRgb(h, s, l) {
+        const hueToRgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+
+        if (s === 0) {
+            return [l, l, l];
+        }
+
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        const r = hueToRgb(p, q, h + 1 / 3);
+        const g = hueToRgb(p, q, h);
+        const b = hueToRgb(p, q, h - 1 / 3);
+
+        return [r * 255, g * 255, b * 255];
+    }
+
+    function rgbToLuminance(r, g, b) {
+        console.log(r, g, b)
+        const gammaCorrect = (color) => {
+            return color <= 0.03928
+                ? color / 12.92
+                : Math.pow((color + 0.055) / 1.055, 2.4);
+        };
+
+        const rsRGB = r / 255;
+        const gsRGB = g / 255;
+        const bsRGB = b / 255;
+
+        const rLuminance = gammaCorrect(rsRGB).toFixed(2);
+        const gLuminance = gammaCorrect(gsRGB).toFixed(2);
+        const bLuminance = gammaCorrect(bsRGB).toFixed(2);
+
+        console.log(`rLum ${rLuminance}, gLum ${gLuminance}, bLum ${bLuminance}`)
+
+        return 0.2126 * rLuminance + 0.7152 * gLuminance + 0.0722 * bLuminance;
+    }
+
+    //this version keeps BG and main text in same hue
+    /* function getReadableTextColor(rgb) {
+         const [r, g, b] = rgb;
+
+         // Convert RGB to HSL
+         const rgbToHsl = (r, g, b) => {
+             const max = Math.max(r, g, b);
+             const min = Math.min(r, g, b);
+             const d = max - min;
+             const l = (max + min) / 2;
+
+             if (d === 0) return [0, 0, l];
+
+             const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+             const h = (() => {
+                 switch (max) {
+                     case r:
+                         return (g - b) / d + (g < b ? 6 : 0);
+                     case g:
+                         return (b - r) / d + 2;
+                     case b:
+                         return (r - g) / d + 4;
+                 }
+             })() / 6;
+
+             return [h, s, l];
+         };
+         const [h, s, l] = rgbToHsl(r / 255, g / 255, b / 255);
+
+         // Calculate appropriate text color based on background color
+         const targetLuminance = l > 0.5 ? 0.2 : 0.8;
+         const targetSaturation = s > 0.5 ? s - 0.2 : s + 0.2;
+         const [rNew, gNew, bNew] = hslToRgb(h, targetSaturation, targetLuminance);
+
+         // Return the text color in RGBA format
+         return `rgba(${rNew.toFixed(0)}, ${gNew.toFixed(0)}, ${bNew.toFixed(0)}, 1)`;
+     }*/
+
+    //this version makes main text complimentary color to BG color
+    function getReadableTextColor(rgb) {
+        const [r, g, b] = rgb;
+
+        // Convert RGB to HSL
+        const rgbToHsl = (r, g, b) => {
+            const max = Math.max(r, g, b);
+            const min = Math.min(r, g, b);
+            const d = max - min;
+            const l = (max + min) / 2;
+
+            if (d === 0) return [0, 0, l];
+
+            const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            const h = (() => {
+                switch (max) {
+                    case r:
+                        return (g - b) / d + (g < b ? 6 : 0);
+                    case g:
+                        return (b - r) / d + 2;
+                    case b:
+                        return (r - g) / d + 4;
+                }
+            })() / 6;
+
+            return [h, s, l];
+        };
+        const [h, s, l] = rgbToHsl(r / 255, g / 255, b / 255);
+
+        // Calculate complementary color based on background color
+        const complementaryHue = (h + 0.5) % 1;
+        const complementarySaturation = s > 0.5 ? s - 0.6 : s + 0.6;
+        const complementaryLuminance = l > 0.5 ? 0.2 : 0.8;
+
+        // Convert complementary color back to RGB
+        const [rNew, gNew, bNew] = hslToRgb(complementaryHue, complementarySaturation, complementaryLuminance);
+
+        // Return the text color in RGBA format
+        return `rgba(${rNew.toFixed(0)}, ${gNew.toFixed(0)}, ${bNew.toFixed(0)}, 1)`;
+    }
+
+
+}
+
+export function getCustomStoppingStrings() {
+    try {
+        // Parse the JSON string
+        const strings = JSON.parse(power_user.custom_stopping_strings);
+
+        // Make sure it's an array
+        if (!Array.isArray(strings)) {
+            return [];
+        }
+
+        // Make sure all the elements are strings
+        return strings.filter((s) => typeof s === 'string');
+    } catch (error) {
+        // If there's an error, return an empty array
+        console.warn('Error parsing custom stopping strings:', error);
+        return [];
+    }
 }
 
 $(document).ready(() => {
+
+    $(window).on('resize', async () => {
+        if (isMobile()) {
+            return
+        }
+
+        //console.log('Window resized!');
+        const zoomLevel = Number(window.devicePixelRatio).toFixed(2);
+        const winWidth = window.innerWidth;
+        const winHeight = window.innerHeight;
+        console.debug(`Zoom: ${zoomLevel}, X:${winWidth}, Y:${winHeight}`);
+        if (Object.keys(power_user.movingUIState).length > 0) {
+            resetMovablePanels('resize');
+        }
+        // Adjust layout and styling here
+    });
+
     // Settings that go to settings.json
     $("#collapse-newlines-checkbox").change(function () {
         power_user.collapse_newlines = !!$(this).prop("checked");
@@ -1074,6 +1501,17 @@ $(document).ready(() => {
         reloadMarkdownProcessor(power_user.render_formulas);
     });
 
+    $("#start_reply_with").on('input', function () {
+        power_user.user_prompt_bias = $(this).val();
+        saveSettingsDebounced();
+    });
+
+    $("#chat-show-reply-prefix-checkbox").change(function () {
+        power_user.show_user_prompt_bias = !!$(this).prop("checked");
+        reloadCurrentChat();
+        saveSettingsDebounced();
+    })
+
     $("#multigen").change(function () {
         power_user.multigen = $(this).prop("checked");
         saveSettingsDebounced();
@@ -1112,10 +1550,13 @@ $(document).ready(() => {
         applyAvatarStyle();
     });
 
-    $(`input[name="chat_display"]`).on('input', function (e) {
-        power_user.chat_display = Number(e.target.value);
-        localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
+    $("#chat_display").on('change', function () {
+        console.debug('###CHAT DISPLAY SELECTOR CHANGE###')
+        const value = $(this).find(':selected').val();
+        power_user.chat_display = Number(value);
+        saveSettingsDebounced();
         applyChatDisplay();
+
     });
 
     $(`input[name="sheld_width"]`).on('input', function (e) {
@@ -1164,12 +1605,6 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
-    /*     $("#fastui-bg-color-picker").on('change', (evt) => {
-            power_user.fastui_bg_color = evt.detail.rgba;
-            applyThemeColor('fastUIBG');
-            saveSettingsDebounced();
-        }); */
-
     $("#blur-tint-color-picker").on('change', (evt) => {
         power_user.blur_tint_color = evt.detail.rgba;
         applyThemeColor('blurTint');
@@ -1314,6 +1749,11 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#confirm_message_delete").on('input', function () {
+        power_user.confirm_message_delete = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
+
     $("#render_formulas").on("input", function () {
         power_user.render_formulas = !!$(this).prop('checked');
         reloadMarkdownProcessor(power_user.render_formulas);
@@ -1365,6 +1805,13 @@ $(document).ready(() => {
         switchTimestamps();
     });
 
+    $("#mesIDDisplayEnabled").on("input", function () {
+        const value = !!$(this).prop('checked');
+        power_user.mesIDDisplay_enabled = value;
+        localStorage.setItem(storage_keys.mesIDDisplay_enabled, power_user.mesIDDisplay_enabled);
+        switchMesIDDisplay();
+    });
+
     $("#hotswapEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.hotswap_enabled = value;
@@ -1384,6 +1831,34 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#continue_on_send").on("input", function () {
+        const value = !!$(this).prop('checked');
+        power_user.continue_on_send = value;
+        saveSettingsDebounced();
+    });
+
+    $("#trim_spaces").on("input", function () {
+        const value = !!$(this).prop('checked');
+        power_user.trim_spaces = value;
+        saveSettingsDebounced();
+    });
+
+    $('#spoiler_free_mode').on('input', function () {
+        power_user.spoiler_free_mode = !!$(this).prop('checked');
+        switchSpoilerMode();
+        saveSettingsDebounced();
+    });
+
+    $('#spoiler_free_desc_button').on('click', function () {
+        peekSpoilerMode();
+        $(this).toggleClass('fa-eye fa-eye-slash');
+    });
+
+    $('#custom_stopping_strings').on('input', function () {
+        power_user.custom_stopping_strings = $(this).val();
+        saveSettingsDebounced();
+    });
+
     $(window).on('focus', function () {
         browser_has_focus = true;
     });
@@ -1392,8 +1867,11 @@ $(document).ready(() => {
         browser_has_focus = false;
     });
 
-    registerSlashCommand('vn', toggleWaifu, ['vn'], ' – swaps Visual Novel Mode On/Off', false, true);
+    registerSlashCommand('vn', toggleWaifu, [], ' – swaps Visual Novel Mode On/Off', false, true);
     registerSlashCommand('newchat', doNewChat, ['newchat'], ' – start a new chat with current character', true, true);
     registerSlashCommand('random', doRandomChat, ['random'], ' – start a new chat with a random character', true, true);
-    registerSlashCommand('delmode', doDelMode, ['delmode'], ' – enter message deletion mode', true, true);
+    registerSlashCommand('delmode', doDelMode, ['del'], '<span class="monospace">(optional number)</span> – enter message deletion mode, and auto-deletes N messages if numeric argument is provided', true, true);
+    registerSlashCommand('cut', doMesCut, [], ' <span class="monospace">(requred number)</span> – cuts the specified message from the chat', true, true);
+    registerSlashCommand('resetpanels', doResetPanels, ['resetui'], ' – resets UI panels to original state.', true, true);
+    registerSlashCommand('bgcol', setAvgBG, [], ' – WIP test of auto-bg avg coloring', true, true);
 });