On-fly switch of Markdown renderers

public/index.html

@@ -1343,6 +1343,13 @@
                                 <input id="auto_scroll_chat_to_bottom" type="checkbox" />
                                 Auto-scroll Chat
                             </label>
+                            <label for="render_formulas">
+                                <input id="render_formulas" type="checkbox" />
+                                Render Formulas
+                                <a href="/notes#formulasrendering" class="notes-link" target="_blank">
+                                    <span class="note-link-span">?</span>
+                                </a>
+                            </label>
                             <div class="flex-container flexFlowColumn">
                                 <h4>
                                     Send on Enter

public/notes/content.md

@@ -542,3 +542,21 @@ To play your own custom sound on receiving a new message from bot, replace the f
 Plays at 80% volume.
 
 If "Background Sound Only" option is enabled, the sound plays only if SillyTavern window is **unfocused**.
+
+### Formulas Rendering
+
+Enables math formulas rendering using the [showdown-katex](https://obedm503.github.io/showdown-katex/) package.
+
+The following formatting rules are supported:
+
+#### LaTeX syntax
+```
+$$ formula goes here $$
+```
+
+#### Asciimath syntax
+```
+$ formula goes here $
+```
+
+More information: [KaTeX](https://katex.org/)

public/script.js

@@ -39,6 +39,7 @@ import {
     select_group_chats,
     regenerateGroup,
     group_generation_id,
+    getGroupChat,
 } from "./scripts/group-chats.js";
 
 import {
@@ -147,6 +148,7 @@ export {
     getThumbnailUrl,
     getStoppingStrings,
     getStatus,
+    reloadMarkdownProcessor,
     chat,
     this_chid,
     selected_button,
@@ -177,19 +179,11 @@ window["SillyTavern"] = {};
 
 const gpt3 = new GPT3BrowserTokenizer({ type: 'gpt3' });
 hljs.addPlugin({ "before:highlightElement": ({ el }) => { el.textContent = el.innerText } });
-let converter = new showdown.Converter({
-    emoji: "true",
-    underline: "true",
-    extensions: [
-        showdownKatex(
-            {
-                delimiters: [
-                    { left: '$$', right: '$$', display: true, asciimath: false },
-                    { left: '$', right: '$', display: false, asciimath: true },
-                ]
-            }
-        )],
-});
+
+// Markdown converter
+let converter;
+reloadMarkdownProcessor();
+
 /* let bg_menu_toggle = false; */
 const systemUserName = "SillyTavern System";
 let default_user_name = "You";
@@ -389,6 +383,31 @@ function getTokenCount(str, padding = 0) {
     }
 }
 
+function reloadMarkdownProcessor(render_formulas = false) {
+    if (render_formulas) {
+        converter = new showdown.Converter({
+            emoji: "true",
+            underline: "true",
+            extensions: [
+                showdownKatex(
+                    {
+                        delimiters: [
+                            { left: '$$', right: '$$', display: true, asciimath: false },
+                            { left: '$', right: '$', display: false, asciimath: true },
+                        ]
+                    }
+                )],
+        });
+    }
+    else {
+        converter = new showdown.Converter({
+            emoji: "true",
+        });
+    }
+
+    return converter;
+}
+
 const CHARACTERS_PER_TOKEN_RATIO = 3.35;
 const talkativeness_default = 0.5;
 
@@ -518,16 +537,6 @@ $.get("/csrf-token").then((data) => {
     getUserAvatars();
 });
 
-///////////// UNUSED FUNCTIONS MOVED TO TOP ///////////////
-
-function newMesPattern(name) {
-    //Patern which denotes a new message
-    name = name + ":";
-    return name;
-}
-
-//////////////////////////////////////////
-
 function checkOnlineStatus() {
     ///////// REMOVED LINES THAT DUPLICATE RA_CHeckOnlineStatus FEATURES 
 
@@ -907,6 +916,22 @@ function deleteLastMessage() {
     $('#chat').children('.mes').last().remove();
 }
 
+export async function reloadCurrentChat() {
+    clearChat();
+    chat.length = 0;
+
+    if (selected_group) {
+        await getGroupChat(selected_group);
+    }
+    else if (this_chid) {
+        await getChat();
+    }
+    else {
+        resetChatState();
+        printMessages();
+    }
+}
+
 function messageFormating(mes, ch_name, isSystem, forceAvatar) {
     if (!mes) {
         mes = '';

public/scripts/RossAscends-mods.js

@@ -122,6 +122,10 @@ function isMobile() {
 }
 
 function shouldSendOnEnter() {
+    if (!power_user) {
+        return false;
+    }
+
     switch (power_user.send_on_enter) {
         case send_on_enter_options.DISABLED:
             return false;
@@ -708,10 +712,9 @@ $("document").ready(function () {
 
     //Additional hotkeys CTRL+ENTER and CTRL+UPARROW
     function processHotkeys(event) {
-        const sendOnEnter = shouldSendOnEnter();
-
         //Enter to send when send_textarea in focus
         if ($(':focus').attr('id') === 'send_textarea') {
+            const sendOnEnter = shouldSendOnEnter();
             if (!event.shiftKey && !event.ctrlKey && event.key == "Enter" && is_send_press == false && sendOnEnter) {
                 event.preventDefault();
                 Generate();

public/scripts/group-chats.js

@@ -115,7 +115,7 @@ async function regenerateGroup() {
     generateGroupWrapper();
 }
 
-async function getGroupChat(id) {
+export async function getGroupChat(id) {
     const response = await fetch("/getgroupchat", {
         method: "POST",
         headers: {

public/scripts/power-user.js

@@ -5,6 +5,8 @@ import {
     callPopup,
     token,
     getStatus,
+    reloadMarkdownProcessor,
+    reloadCurrentChat,
 } from "../script.js";
 
 export {
@@ -97,6 +99,7 @@ let power_user = {
     auto_scroll_chat_to_bottom: true,
     auto_fix_generated_markdown: true,
     send_on_enter: send_on_enter_options.AUTO,
+    render_formulas: false,
 };
 
 let themes = [];
@@ -117,7 +120,6 @@ const storage_keys = {
     shadow_color: "TavernAI_shadow_color",
     shadow_width: "TavernAI_shadow_width",
 
-
     waifuMode: "TavernAI_waifuMode",
     movingUI: "TavernAI_movingUI",
     noShadows: "TavernAI_noShadows",
@@ -358,6 +360,7 @@ function loadPowerUserSettings(settings, data) {
     $("#always-force-name2-checkbox").prop("checked", power_user.always_force_name2);
     $("#disable-examples-formatting-checkbox").prop("checked", power_user.disable_examples_formatting);
     $('#disable-start-formatting-checkbox').prop("checked", power_user.disable_start_formatting);
+    $('#render_formulas').prop("checked", power_user.render_formulas);
     $("#custom_chat_separator").val(power_user.custom_chat_separator);
     $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
     $("#waifuMode").prop("checked", power_user.waifuMode);
@@ -399,6 +402,7 @@ function loadPowerUserSettings(settings, data) {
 
     $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
     sortCharactersList();
+    reloadMarkdownProcessor(power_user.render_formulas);
 }
 
 function sortCharactersList(selector = '.character_select') {
@@ -727,6 +731,13 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#render_formulas").on("input", function () {
+        power_user.render_formulas = !!$(this).prop('checked');
+        reloadMarkdownProcessor(power_user.render_formulas);
+        reloadCurrentChat();
+        saveSettingsDebounced();
+    })
+
     $(window).on('focus', function () {
         browser_has_focus = true;
     });