From d78bd269775f3fc440f37cd31ab1701f2c501fd2 Mon Sep 17 00:00:00 2001
From: SillyLossy <titan0599@gmail.com>
Date: Sat, 18 Mar 2023 12:43:49 +0200
Subject: [PATCH 1/2] Message template instantiation

---
 public/index.html | 19 +++++++++++++++++++
 public/script.js  | 38 ++++++++++----------------------------
 public/style.css  |  4 ++++
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/public/index.html b/public/index.html
index d9b084f04..137fa0be8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -818,6 +818,25 @@
         <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
     </div>
 
+    <div id="message_template">
+        <div class="mes" mesid="${count_view_mes}" ch_name="${characterName}" is_user="${mes.is_user}">
+            <div class="for_checkbox"></div><input type="checkbox" class="del_checkbox">
+            <div class="avatar"><img src="${avatarImg}"></div>
+            <div class="swipe_left"><img src="img/swipe_left.png"></div>
+            <div class="mes_block">
+                <div class="ch_name">
+                    <span class="name_text">${characterName}</span>
+                    <div title=Edit class=mes_edit></div>
+                    <div class=mes_edit_cancel><img src=img/cancel.png></div>
+                    <div class=mes_edit_done><img src=img/done.png></div>
+                </div>
+                <div class=mes_text></div>
+            </div>
+            <div class="mes_bias">${bias}</div>
+            <div class="swipe_right"> <img src="img/swipe_right.png"></div>
+        </div>
+    </div>
+
     <div id="group_avatars_template">
         <div class="avatar avatar_collage collage_1">
             <img alt="img1" class="img_1" src="">
diff --git a/public/script.js b/public/script.js
index 91c5de894..172b5ebfa 100644
--- a/public/script.js
+++ b/public/script.js
@@ -783,6 +783,15 @@ function messageFormating(mes, ch_name, isSystem, forceAvatar) {
     return mes;
 }
 
+function getMessageFromTemplate(mesId, characterName, isUser, avatarImg, bias) {
+    const mes = $('#message_template .mes').clone();
+    mes.attr({ 'mesid': mesId, 'ch_name': characterName, 'is_user': isUser });
+    mes.find('.avatar img').attr('src', avatarImg);
+    mes.find('.ch_name .name_text').text(characterName);
+    mes.find('.mes_bias').html(bias);
+    return mes;
+}
+
 function appendImageToMessage(mes, messageElement) {
     if (mes.extra?.image) {
         const image = document.createElement("img");
@@ -829,34 +838,7 @@ function addOneMessage(mes, type = "normal") {
     );
     const bias = messageFormating(mes.extra?.bias ?? "");
 
-    var HTMLForEachMes =
-        '<div class="mes" mesid="' + count_view_mes + '" ch_name="' + characterName + '" is_user="' + mes["is_user"] + '">' +
-        '<div class="for_checkbox"></div>' +
-        '<input type="checkbox" class="del_checkbox">' +
-        '<div class="avatar">' +
-        '<img src="' + avatarImg + '">' +
-        '</div>' +
-        '<div class="swipe_left">' +
-        '<img src="img/swipe_left.png">' +
-        '</div>' +
-        '<div class="mes_block">' +
-        '<div class="ch_name">' +
-        characterName +
-        '<div title=Edit class=mes_edit></div>' +
-        '<div class=mes_edit_cancel>' +
-        '<img src=img/cancel.png>' +
-        '</div>' +
-        '<div class=mes_edit_done>' +
-        '<img src=img/done.png>' +
-        '</div>' +
-        '</div>' +
-        '<div class=mes_text></div>' +
-        '</div>' +
-        '<div class="mes_bias">' + bias + '</div>' +
-        '<div class="swipe_right">' +
-        '   <img src="img/swipe_right.png">' +
-        '</div>' +
-        '</div>';
+    var HTMLForEachMes = getMessageFromTemplate(count_view_mes, characterName, mes.is_user, avatarImg, bias);
 
     if (type !== 'swipe') {
         $("#chat").append(HTMLForEachMes);
diff --git a/public/style.css b/public/style.css
index 795656e72..2cef15f26 100644
--- a/public/style.css
+++ b/public/style.css
@@ -343,6 +343,10 @@ code {
 }
 
 
+#message_template {
+    display: none !important;
+}
+
 .mes {
     display: grid;
     grid-template-columns: min-content min-content auto min-content min-content;

From 4bfd6ded8932ff4dc7d0012dfa3e17e40d79e850 Mon Sep 17 00:00:00 2001
From: SillyLossy <titan0599@gmail.com>
Date: Sat, 18 Mar 2023 13:58:44 +0200
Subject: [PATCH 2/2] Fix extensions loader for firefox

---
 public/scripts/extensions.js | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/public/scripts/extensions.js b/public/scripts/extensions.js
index 81116e450..82a6f043a 100644
--- a/public/scripts/extensions.js
+++ b/public/scripts/extensions.js
@@ -5,20 +5,8 @@ export {
     defaultRequestArgs,
 };
 
-import * as captionManifest from "./extensions/caption/manifest.json" assert {type: 'json'};
-import * as diceManifest from "./extensions/dice/manifest.json" assert {type: 'json'};
-import * as expressionsManifest from "./extensions/expressions/manifest.json" assert {type: 'json'};
-import * as floatingPromptManifest from "./extensions/floating-prompt/manifest.json" assert {type: 'json'};
-import * as memoryManifest from "./extensions/memory/manifest.json" assert {type: 'json'};
-
-const manifests = {
-    'floating-prompt': floatingPromptManifest.default,
-    'dice': diceManifest.default,
-    'caption': captionManifest.default,
-    'expressions': expressionsManifest.default,
-    'memory': memoryManifest.default,
-};
-
+const extensionNames = ['caption', 'dice', 'expressions', 'floating-prompt', 'memory'];
+const manifests = await getManifests(extensionNames);
 const extensions_urlKey = 'extensions_url';
 const extensions_autoConnectKey = 'extensions_autoconnect';
 let modules = [];
@@ -30,6 +18,19 @@ const defaultUrl = "http://localhost:5100";
 const defaultRequestArgs = { method: 'GET', headers: { 'Bypass-Tunnel-Reminder': 'bypass' } };
 let connectedToApi = false;
 
+async function getManifests(names) {
+    const obj = {};
+    for (const name of names) {
+        const response = await fetch(`/scripts/extensions/${name}/manifest.json`);
+
+        if (response.ok) {
+            const json = await response.json();
+            obj[name] = json;
+        }
+    }
+    return obj;
+}
+
 async function activateExtensions() {
     const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order);