Merge branch 'dev-settings-on-top' into dev

.gitignore

@@ -3,6 +3,7 @@ public/chats/
 public/characters/
 public/User Avatars/
 public/backgrounds/
+public/css/bg_load.css
 /uploads/
 *.jsonl
 public/settings.json

public/img/book-atlas-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 43 43 0 96 0H384h32c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32v64c17.7 0 32 14.3 32 32s-14.3 32-32 32H384 96c-53 0-96-43-96-96V96zM64 416c0 17.7 14.3 32 32 32H352V384H96c-17.7 0-32 14.3-32 32zM247.4 283.8c-3.7 3.7-6.2 4.2-7.4 4.2s-3.7-.5-7.4-4.2c-3.8-3.7-8-10-11.8-18.9c-6.2-14.5-10.8-34.3-12.2-56.9h63c-1.5 22.6-6 42.4-12.2 56.9c-3.8 8.9-8 15.2-11.8 18.9zm42.7-9.9c7.3-18.3 12-41.1 13.4-65.9h31.1c-4.7 27.9-21.4 51.7-44.5 65.9zm0-163.8c23.2 14.2 39.9 38 44.5 65.9H303.5c-1.4-24.7-6.1-47.5-13.4-65.9zM368 192a128 128 0 1 0 -256 0 128 128 0 1 0 256 0zM145.3 208h31.1c1.4 24.7 6.1 47.5 13.4 65.9c-23.2-14.2-39.9-38-44.5-65.9zm31.1-32H145.3c4.7-27.9 21.4-51.7 44.5-65.9c-7.3 18.3-12 41.1-13.4 65.9zm56.1-75.8c3.7-3.7 6.2-4.2 7.4-4.2s3.7 .5 7.4 4.2c3.8 3.7 8 10 11.8 18.9c6.2 14.5 10.8 34.3 12.2 56.9h-63c1.5-22.6 6-42.4 12.2-56.9c3.8-8.9 8-15.2 11.8-18.9z"/></svg>

public/img/face-smile-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

public/img/font-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M254 52.8C249.3 40.3 237.3 32 224 32s-25.3 8.3-30 20.8L57.8 416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-1.8l18-48H303.8l18 48H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H390.2L254 52.8zM279.8 304H168.2L224 155.1 279.8 304z"/></svg>

public/img/panorama-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M45.6 32C20.4 32 0 52.4 0 77.6V434.4C0 459.6 20.4 480 45.6 480c5.1 0 10-.8 14.7-2.4C74.6 472.8 177.6 440 320 440s245.4 32.8 259.6 37.6c4.7 1.6 9.7 2.4 14.7 2.4c25.2 0 45.6-20.4 45.6-45.6V77.6C640 52.4 619.6 32 594.4 32c-5 0-10 .8-14.7 2.4C565.4 39.2 462.4 72 320 72S74.6 39.2 60.4 34.4C55.6 32.8 50.7 32 45.6 32zM96 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm272 0c7.9 0 15.4 3.9 19.8 10.5L512.3 353c5.4 8 5.6 18.4 .4 26.5s-14.7 12.3-24.2 10.7C442.7 382.4 385.2 376 320 376c-65.6 0-123.4 6.5-169.3 14.4c-9.8 1.7-19.7-2.9-24.7-11.5s-4.3-19.4 1.9-27.2L197.3 265c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l26.4 33.1 87-127.6c4.5-6.6 11.9-10.5 19.8-10.5z"/></svg>

public/img/sliders-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 416c0-17.7 14.3-32 32-32l54.7 0c12.3-28.3 40.5-48 73.3-48s61 19.7 73.3 48L480 384c17.7 0 32 14.3 32 32s-14.3 32-32 32l-246.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 448c-17.7 0-32-14.3-32-32zm192 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM384 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-32-80c32.8 0 61 19.7 73.3 48l54.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-54.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l246.7 0c12.3-28.3 40.5-48 73.3-48zM192 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm73.3 0L480 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-214.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 128C14.3 128 0 113.7 0 96S14.3 64 32 64l86.7 0C131 35.7 159.2 16 192 16s61 19.7 73.3 48z"/></svg>

public/img/wifi-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M54.2 202.9C123.2 136.7 216.8 96 320 96s196.8 40.7 265.8 106.9c12.8 12.2 33 11.8 45.2-.9s11.8-33-.9-45.2C549.7 79.5 440.4 32 320 32S90.3 79.5 9.8 156.7C-2.9 169-3.3 189.2 8.9 202s32.5 13.2 45.2 .9zM320 256c56.8 0 108.6 21.1 148.2 56c13.3 11.7 33.5 10.4 45.2-2.8s10.4-33.5-2.8-45.2C459.8 219.2 393 192 320 192s-139.8 27.2-190.5 72c-13.3 11.7-14.5 31.9-2.8 45.2s31.9 14.5 45.2 2.8c39.5-34.9 91.3-56 148.2-56zm64 160a64 64 0 1 0 -128 0 64 64 0 1 0 128 0z"/></svg>

public/script.js

@@ -87,7 +87,7 @@ window["TavernAI"] = {};
 
 const VERSION = "1.1.0";
 let converter = new showdown.Converter({ emoji: "true" });
-let bg_menu_toggle = false;
+/* let bg_menu_toggle = false; */
 const systemUserName = "TavernAI";
 let default_user_name = "You";
 let name1 = default_user_name;
@@ -397,13 +397,7 @@ async function getStatus() {
                     main_api == "kobold" ? api_server : api_server_textgenerationwebui,
                 main_api: main_api,
             }),
-            beforeSend: function () {
+            beforeSend: function () { },
-                if (is_api_button_press) {
-                    //$("#api_loading").css("display", 'inline-block');
-                    //$("#api_button").css("display", 'none');
-                }
-                //$('#create_button').attr('value','Creating...'); //
-            },
             cache: false,
             dataType: "json",
             crossDomain: true,
@@ -535,11 +529,7 @@ function printCharacters() {
 
 async function getCharacters() {
     await getGroups();
-
-    //console.log('getCharacters() -- entered');
-    //console.log(characters);
     var response = await fetch("/getcharacters", {
-        //RossAscends: changed from const
         method: "POST",
         headers: {
             "Content-Type": "application/json",
@@ -551,45 +541,17 @@ async function getCharacters() {
     });
     if (response.ok === true) {
         var getData = ""; //RossAscends: reset to force array to update to account for deleted character.
-        var getData = await response.json(); //RossAscends: changed from const
+        getData = await response.json();
-        //console.log(getData);
+        const load_ch_count = Object.getOwnPropertyNames(getData);
-
-        //var aa = JSON.parse(getData[0]);
-
-        var load_ch_count = Object.getOwnPropertyNames(getData); //RossAscends: change from const to create dynamic character load amounts.
-        var charCount = load_ch_count.length;
-        //console.log('/getcharacters -- expecting to load '+charCount+' characters.')
         for (var i = 0; i < load_ch_count.length; i++) {
             characters[i] = [];
             characters[i] = getData[i];
             characters[i]['name'] = DOMPurify.sanitize(characters[i]['name']);
-            //console.log('/getcharacters -- loaded character #'+(i+1)+' ('+characters[i].name+')');
         }
-        //RossAscends: updated character sorting to be alphabetical
-        characters.sort(function (a, b) {
-            //console.log('sorting characters: '+a.name+' vs '+b.name);
-            if (a.name < b.name) {
-                return -1;
-            }
-            if (a.name > b.name) {
-                return 1;
-            }
-            return 0;
-        });
-        //console.log(characters);
-
-        //characters.reverse();
-        //console.log('/getcharacters -- this_chid -- '+this_chid);
         if (this_chid != undefined && this_chid != "invalid-safety-id") {
             $("#avatar_url_pole").val(characters[this_chid].avatar);
         }
-
-        //console.log('/getcharacters -- sending '+i+' characters to /printcharacters');
         printCharacters();
-        //console.log(propOwn.length);
-        //return JSON.parse(getData[0]);
-        //const getData = await response.json();
-        //var getMessage = getData.results[0].text;
     }
 }
 
@@ -611,13 +573,9 @@ async function getBackgrounds() {
         for (var i = 0; i < getData.length; i++) {
             //console.log(1);
             $("#bg_menu_content").append(
-                "<div class=bg_example><img bgfile='" +
+                `<div class="bg_example" bgfile="${getData[i]}" class="bg_example_img" style="background-image: url(backgrounds/${getData[i]});">
-                getData[i] +
+                <div bgfile="${getData[i]}" class=bg_example_cross style="background-image: url(img/cross.png);">
-                "' class=bg_example_img src='backgrounds/" +
+            </div>`
-                getData[i] +
-                "'><img bgfile='" +
-                getData[i] +
-                "' class=bg_example_cross src=img/cross.png></div>"
             );
         }
         //var aa = JSON.parse(getData[0]);
@@ -652,23 +610,7 @@ async function isColab() {
 }
 
 async function setBackground(bg) {
-    /*
-              const response = await fetch("/setbackground", {
-                  method: "POST",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({
-                          "bg": bg
-                      })
 
-              });
-              if (response.ok === true) {
-                  //const getData = await response.json();
-                  //background = getData;
-      
-                  //var aa = JSON.parse(getData[0]);
-                  //const load_ch_coint = Object.getOwnPropertyNames(getData);
-              }*/
-    //console.log(bg);
     jQuery.ajax({
         type: "POST", //
         url: "/setbackground", //
@@ -682,11 +624,7 @@ async function setBackground(bg) {
         dataType: "json",
         contentType: "application/json",
         //processData: false,
-        success: function (html) {
+        success: function (html) { },
-            //setBackground(html);
-            //$('body').css('background-image', 'linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url('+e.target.result+')');
-            //$("#form_bg_download").after("<div class=bg_example><img bgfile='"+html+"' class=bg_example_img src='backgrounds/"+html+"'><img bgfile='"+html+"' class=bg_example_cross src=img/cross.png></div>");
-        },
         error: function (jqXHR, exception) {
             console.log(exception);
             console.log(jqXHR);
@@ -706,18 +644,12 @@ async function delBackground(bg) {
         }),
     });
     if (response.ok === true) {
-        //const getData = await response.json();
+
-        //background = getData;
-        //var aa = JSON.parse(getData[0]);
-        //const load_ch_coint = Object.getOwnPropertyNames(getData);
     }
 }
 
 function printMessages() {
-    //console.log(chat);
-    //console.log('printMessages() -- printing messages for -- '+this_chid+' '+active_character+' '+characters[this_chid]);
     chat.forEach(function (item, i, arr) {
-        //console.log('print message calling addOneMessage');
         addOneMessage(item);
     });
 }
@@ -832,6 +764,7 @@ function addOneMessage(mes, type = "normal") {
     newMessage.find('.avatar img').on('error', function () {
         $(this).attr("src", "/img/user-slash-solid.svg");
     });
+
     if (type === 'swipe') {
         $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('');
         $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').append(messageText);
@@ -845,20 +778,8 @@ function addOneMessage(mes, type = "normal") {
     }
     $('#chat .mes').last().addClass('last_mes');
     $('#chat .mes').eq(-2).removeClass('last_mes');
-    //$textchat.scrollTop(($textchat[0].scrollHeight));
 
-
-    //console.log(chat[chat.length - 1].["swipes"]);
-    //console.log(mes);
-    /*     if (mes["swipes"] !== undefined) {
-            if (mes["swipes"].length - 1 == mes["swipe_id"]) {           //this works to detect when next right swipe would generate
-                $(".swipe_right").css('opacity', '0.7')          // but we need it to happen on load, not only when swiping happens.
-            } else {
-                $(".swipe_right").css('opacity', '0.3')
-            };
-        } */
     hideSwipeButtons();
-    //console.log('addonemessage calling showSwipeBtns');
     showSwipeButtons();
 
     // TODO: figure out smooth scrolling that wouldn't hit performance much.
@@ -908,7 +829,6 @@ function sendSystemMessage(type, text) {
     }
 
     chat.push(newMessage);
-    //console.log('sendSystemMessage calls addOneMessage');
     addOneMessage(newMessage);
     is_send_press = false;
 }
@@ -1270,7 +1190,6 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs").
         }
 
         function runGenerate(cycleGenerationPromt = '') {
-            $(".swipe_right").css("display", "none");
             is_send_press = true;
 
             generatedPromtCache += cycleGenerationPromt;
@@ -1315,18 +1234,9 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs").
                         }
                     }
                     mesSend[mesSend.length] = item;
-                    //chatString = chatString+item;
+
                 });
             }
-            //finalPromt +=chatString;
-            //console.log(storyString);
-
-            //console.log(encode(characters[this_chid].description+chatString).length);
-            //console.log(encode(JSON.stringify(characters[this_chid].description+chatString)).length);
-            //console.log(JSON.stringify(storyString));
-            //Send story string
-            var mesSendString = '';
-            var mesExmString = '';
 
             function setPromtString() {
                 mesSendString = '';
@@ -1335,6 +1245,7 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs").
                     mesExmString += mesExamplesArray[j];
                 }
                 for (let j = 0; j < mesSend.length; j++) {
+
                     mesSendString += mesSend[j];
                     if (force_name2 && j === mesSend.length - 1 && tokens_already_generated === 0) {
                         mesSendString += name2 + ':';
@@ -1343,7 +1254,7 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs").
             }
 
             function checkPromtSize() {
-                //console.log('checking prompt size');
+
                 setPromtString();
                 let thisPromtContextSize = encode(JSON.stringify(worldInfoString + storyString + mesExmString + mesSendString + anchorTop + anchorBottom + charPersonality + generatedPromtCache + promptBias + extension_prompt)).length + 120;
 
@@ -1863,40 +1774,51 @@ function openNavToggle() {
 
 function changeMainAPI() {
     const selectedVal = $("#main_api").val();
-    console.log(selectedVal);
+    //console.log(selectedVal);
     const apiElements = {
         "kobold": {
-            apiElem: $("#kobold_api"),
+            apiSettings: $("#kobold_api-settings"),
+            apiConnector: $("#kobold_api"),
+            apiRanges: $("#range_block"),
             maxContextElem: $("#max_context_block"),
             amountGenElem: $("#amount_gen_block"),
             softPromptElem: $("#softprompt_block")
         },
         "textgenerationwebui": {
-            apiElem: $("#textgenerationwebui_api"),
+            apiSettings: $("#textgenerationwebui_api-settings"),
+            apiConnector: $("#textgenerationwebui_api"),
+            apiRanges: $("#range_block_textgenerationwebui"),
             maxContextElem: $("#max_context_block"),
             amountGenElem: $("#amount_gen_block"),
             softPromptElem: $("#softprompt_block")
         },
         "novel": {
-            apiElem: $("#novel_api"),
+            apiSettings: $("#novel_api-settings"),
+            apiConnector: $("#novel_api"),
+            apiRanges: $("#range_block_novel"),
             maxContextElem: $("#max_context_block"),
             amountGenElem: $("#amount_gen_block"),
             softPromptElem: $("#softprompt_block")
         }
     };
+    console.log('--- apiElements--- ');
+    //console.log(apiElements);
 
     for (const apiName in apiElements) {
         const apiObj = apiElements[apiName];
         const isCurrentApi = selectedVal === apiName;
-        console.log(isCurrentApi);
+
-        console.log(selectedVal);
+        apiObj.apiSettings.css("display", isCurrentApi ? "block" : "none");
-        apiObj.apiElem.css("display", isCurrentApi ? "block" : "none");
+        apiObj.apiConnector.css("display", isCurrentApi ? "block" : "none");
+        apiObj.apiRanges.css("display", isCurrentApi ? "block" : "none");
 
         if (isCurrentApi && apiName === "kobold") {
+            console.log("enabling SP for kobold");
             $("#softprompt_block").css("display", "block");
         }
 
         if (isCurrentApi && apiName === "textgenerationwebui") {
+            console.log("enabling amount_gen for ooba");
             apiObj.amountGenElem.children().prop("disabled", false);
             apiObj.amountGenElem.css("opacity", 1.0);
         }
@@ -1908,7 +1830,7 @@ function changeMainAPI() {
 ////////////////////////////////////////////////////
 
 async function getUserAvatars() {
-    $("#user_avatar_block").html(""); //RossAscends: necessary to avoid doubling avatars each QuickRefresh.
+    $("#user_avatar_block").html(""); //RossAscends: necessary to avoid doubling avatars each refresh.
     $("#user_avatar_block").append('<div class="avatar_upload">+</div>');
     const response = await fetch("/getuseravatars", {
         method: "POST",
@@ -2030,7 +1952,7 @@ async function getSettings(type) {
                 });
                 var arr_holder = {};
 
-                $("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on QuickRefresh
+                $("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on refresh
                 $("#settings_perset").append(
                     '<option value="gui">GUI KoboldAI Settings</option>'
                 ); //adding in the GUI settings, since it is not loaded dynamically
@@ -2106,21 +2028,11 @@ async function getSettings(type) {
                     $("#settings_perset option[value=gui]")
                         .attr("selected", "true")
                         .trigger("change");
-                    $("#range_block").children().prop("disabled", true);
-                    $("#range_block").css("opacity", 0.5);
-
-                    $("#amount_gen_block").children().prop("disabled", true);
-                    $("#amount_gen_block").css("opacity", 0.45);
                 } else {
                     if (typeof koboldai_setting_names[preset_settings] !== "undefined") {
                         $(`#settings_perset option[value=${koboldai_setting_names[preset_settings]}]`)
                             .attr("selected", "true");
                     } else {
-                        $("#range_block").children().prop("disabled", true);
-                        $("#range_block").css("opacity", 0.5);
-                        $("#amount_gen_block").children().prop("disabled", true);
-                        $("#amount_gen_block").css("opacity", 0.45);
-
                         preset_settings = "gui";
                         $("#settings_perset option[value=gui]")
                             .attr("selected", "true")
@@ -2244,9 +2156,7 @@ async function saveSettings(type) {
         success: function (data) {
             //online_status = data.result;
             if (type == "change_name") {
-                //console.log('got name change');
+
-                //console.log('success: reading from settings = ' + settings.username);
-                //name1 = settings.username;
 
                 clearChat();
                 printMessages();
@@ -2357,20 +2267,9 @@ async function getAllCharaChats() {
                     }
                 }
             }
-            //<div id="select_chat_div">
-
-            //<div id="load_select_chat_div">
-            //console.log(data);
-            //chat.length = 0;
-
-            //chat =  data;
-            //getChatResult();
-            //saveChat();
-            //console.log('getAllCharaChats() -- Finished successfully');
         },
         error: function (jqXHR, exception) {
-            //getChatResult();
+
-            //console.log('getAllCharaChats() -- Failed');
             console.log(exception);
             console.log(jqXHR);
         },
@@ -2689,13 +2588,10 @@ function read_bg_load(input) {
                         "url(" + e.target.result + ")"
                     );
                     $("#form_bg_download").after(
-                        "<div class=bg_example><img bgfile='" +
+                        `<div class=bg_example>
-                        html +
+                            <img bgfile="${html}" class="bg_example_img" style="background-image: url(backgrounds/"${html});">
-                        "' class=bg_example_img src='backgrounds/" +
+                            <img bgfile="${html}" class=bg_example_cross src="img/cross.png">
-                        html +
+                        </div>`
-                        "'><img bgfile='" +
-                        html +
-                        "' class=bg_example_cross src=img/cross.png></div>"
                     );
                 },
                 error: function (jqXHR, exception) {
@@ -2741,10 +2637,10 @@ function showSwipeButtons() {
     }
     //console.log((chat[chat.length - 1]));
     if ((chat[chat.length - 1].swipes.length - swipeId) === 1) {
-        console.log('highlighting R swipe');
+        //console.log('highlighting R swipe');
         currentMessage.children('.swipe_right').css('opacity', '0.7');
     }
-    console.log(swipesCounterHTML);
+    //console.log(swipesCounterHTML);
 
     $(".swipes-counter").html(swipesCounterHTML);
 
@@ -2815,8 +2711,6 @@ $(document).ready(function () {
         } else if (parseInt(chat[chat.length - 1]['swipe_id']) < chat[chat.length - 1]['swipes'].length) { //otherwise, if the id is less than the number of swipes
             chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']]; //load the last mes box with the latest generation
             run_swipe_right = true; //then prepare to do normal right swipe to show next message
-
-
         }
 
         if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now)
@@ -2929,22 +2823,21 @@ $(document).ready(function () {
         }
 
     });
+
     $(document).on('click', '.swipe_left', function () {      // when we swipe left..but no generation.
         const swipe_duration = 120;
         const swipe_range = '700px';
         chat[chat.length - 1]['swipe_id']--;
-        if (chat[chat.length - 1]['swipe_id'] >= 0) {           // hide the left arrow if we are viewing the first candidate of the last message block
+        if (chat[chat.length - 1]['swipe_id'] >= 0) {
-            $(this).parent().children('swipe_right').css('display', 'flex');
+            /*$(this).parent().children('swipe_right').css('display', 'flex');
             if (chat[chat.length - 1]['swipe_id'] === 0) {
                 $(this).css('display', 'none');
-            }
+            }*/ // Just in case
-
             let this_mes_div = $(this).parent();
             let this_mes_block = $(this).parent().children('.mes_block').children('.mes_text');
             const this_mes_div_height = this_mes_div[0].scrollHeight;
             this_mes_div.css('height', this_mes_div_height);
             const this_mes_block_height = this_mes_block[0].scrollHeight;
-
             chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']];
             $(this).parent().children('.mes_block').transition({
                 x: swipe_range,
@@ -3041,28 +2934,15 @@ $(document).ready(function () {
         }
     });
 
-    $("#characloud_url").click(function () {
-        window.open("https://boosty.to/tavernai", "_blank");
-    });
     $("#send_but").click(function () {
         if (is_send_press == false) {
-            //hideSwipeButtons();
             is_send_press = true;
-
             Generate();
         }
     });
 
-    //hotkey to send input with enter (shift+enter generates a new line in the chat input box)
-    //this is not ideal for touch device users with virtual keyboards.
-    //ideally we would detect if the user is using a virtual keyboard, and disable this shortcut for them.
-    //because mobile users' hands are always near the screen, tapping the send button is better for them, and enter should always make a new line.
-    //note: CAI seems to have this handled. PC: shift+enter = new line, enter = send. iOS: shift+enter AND enter both make new lines, and only the send button sends.
-    //maybe a way to simulate this would be to disable the eventListener for people iOS.
-
     $("#send_textarea").keydown(function (e) {
         if (!e.shiftKey && !e.ctrlKey && e.key == "Enter" && is_send_press == false) {
-            //hideSwipeButtons();
             is_send_press = true;
             e.preventDefault();
             Generate();
@@ -3200,40 +3080,8 @@ $(document).ready(function () {
         // Will allow to select the same file twice in a row
         $("#form_upload_avatar").trigger("reset");
     });
-    $("#logo_block").click(function (event) {
+
-        if (!bg_menu_toggle) {
+    $(document).on("click", ".bg_example", function () {
-            $("#bg_menu_button").transition({
-                perspective: "100px",
-                rotate3d: "1,1,0,180deg",
-            });
-            $("#bg_menu_content").transition({
-                opacity: 1.0,
-                height: "90vh",
-                duration: 340,
-                easing: "in",
-                complete: function () {
-                    bg_menu_toggle = true;
-                    $("#bg_menu_content").css("overflow-y", "auto");
-                },
-            });
-        } else {
-            $("#bg_menu_button").transition({
-                perspective: "100px",
-                rotate3d: "1,1,0,360deg",
-            });
-            $("#bg_menu_content").css("overflow-y", "hidden");
-            $("#bg_menu_content").transition({
-                opacity: 0.0,
-                height: "0px",
-                duration: 340,
-                easing: "in",
-                complete: function () {
-                    bg_menu_toggle = false;
-                },
-            });
-        }
-    });
-    $(document).on("click", ".bg_example_img", function () {
         //when user clicks on a BG thumbnail...
         var this_bgfile = $(this).attr("bgfile"); // this_bgfile = whatever they clicked
 
@@ -3255,8 +3103,6 @@ $(document).ready(function () {
             duration: 1300, //animation_rm_duration,
             easing: "linear",
             complete: function () {
-                // why does the BG transition completion make the #options (right nav) invisible?
-                $("#options").css("display", "none");
             },
         });
         $("#bg" + number_bg).css(
@@ -3783,15 +3629,19 @@ $(document).ready(function () {
             $("#max_context_counter").html(max_context + " Tokens");
 
             $("#range_block").children().prop("disabled", false);
+
             $("#range_block").css("opacity", 1.0);
             $("#amount_gen_block").children().prop("disabled", false);
+
             $("#amount_gen_block").css("opacity", 1.0);
         } else {
             //$('.button').disableSelection();
             preset_settings = "gui";
             $("#range_block").children().prop("disabled", true);
+
             $("#range_block").css("opacity", 0.5);
             $("#amount_gen_block").children().prop("disabled", true);
+
             $("#amount_gen_block").css("opacity", 0.45);
         }
         saveSettingsDebounced();
@@ -4270,8 +4120,27 @@ $(document).ready(function () {
     });
 
     $('.drawer-toggle').click(function () {
+        //$('#top-settings-holder').find('.open').slideToggle(0, "swing");
         var icon = $(this).find('.drawer-icon');
-        icon.toggleClass('down up');
+        var drawer = $(this).parent().find('.drawer-content');
-        $(this).closest('.drawer').find('.drawer-content').slideToggle();
+        var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
+        var iconWasOpenAlready = $(this).find('.drawer-icon').hasClass('openicon');
+        console.log('Draw Open? ' + drawerWasOpenAlready + ' Icon Open? ' + iconWasOpenAlready);
+
+        if (!drawerWasOpenAlready) {
+            $('.openDrawer').slideToggle(200, "swing")                                      //close all open drawers
+            $('.openIcon').toggleClass('closedIcon openIcon');                  //set all icons   to closed state
+            $('.openDrawer').toggleClass('closedDrawer openDrawer');            //set all drawers to closed state
+            console.log('drawer was closed, so opening');
+            icon.toggleClass('openIcon closedIcon');
+            drawer.toggleClass('openDrawer closedDrawer');                      //mark selected drawer as open if closed
+            $(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing");   //open selected drawer
+
+        } else if (drawerWasOpenAlready) {
+            console.log('found the drawer was already open, so closing');
+            icon.toggleClass('closedIcon openIcon');
+            $('.openDrawer').slideToggle(200, "swing");
+            drawer.toggleClass('closedDrawer openDrawer');
+        }
     });
 });

public/scripts/RossAscends-mods.js

@@ -1,3 +1,4 @@
+esversion: 6
 import { encode } from "../scripts/gpt-2-3-tokenizer/mod.js";
 
 import {
@@ -158,7 +159,7 @@ function RA_CountCharTokens() {
 //Auto Load Last Charcter -- (fires when active_character is defined and auto_load_chat is true)
 async function RA_autoloadchat() {
 	if (document.getElementById('CharID0') !== null) {
-		console.log('char list loaded! clicking activeChar')
+		console.log('char list loaded! clicking activeChar');
 		var CharToAutoLoad = document.getElementById('CharID' + LoadLocal('ActiveChar'));
 		if (CharToAutoLoad != null) {
 			CharToAutoLoad.click();
@@ -167,17 +168,17 @@ async function RA_autoloadchat() {
 		}
 		RestoreNavTab();
 	} else {
-		console.log('no char list yet..')
+		console.log('no char list yet..');
-		setTimeout(RA_autoloadchat, 100)			// if the charcter list hadn't been loaded yet, try again. 
+		setTimeout(RA_autoloadchat, 100);			// if the charcter list hadn't been loaded yet, try again. 
 	}
 }
 //only triggers when AutoLoadChat is enabled, consider adding this as an independent feature later. 
 function RestoreNavTab() {
-	if ($(rm_button_selected_ch).children("h2").text() !== '') {		//check for a change in the character edit tab name
+	if ($('#rm_button_selected_ch').children("h2").text() !== '') {		//check for a change in the character edit tab name
 		console.log('detected ALC char finished loaded, proceeding to restore tab.');
-		$(SelectedNavTab).click() 									//click to restore saved tab when name has changed (signalling char load is done)
+		$(SelectedNavTab).click(); 									//click to restore saved tab when name has changed (signalling char load is done)
 	} else {
-		setTimeout(RestoreNavTab, 100)								//if not changed yet, check again after 100ms
+		setTimeout(RestoreNavTab, 100);								//if not changed yet, check again after 100ms
 	}
 }
 //changes input bar and send button display depending on connection status
@@ -205,9 +206,6 @@ function RA_autoconnect() {
 			if (isUrlOrAPIKey(api_server) && main_api === "kobold") {
 				$("#api_url_text").val(api_server);
 				$("#api_button").click();
-				//} else if (isUrlOrAPIKey(api_key_novel) && main_api === "novel") {
-				// $("#api_key_novel").val(api_key_novel);
-				// $("#api_button").click();
 			}
 		}
 	} else {
@@ -236,7 +234,7 @@ $("document").ready(function () {
 
 	if (LoadLocalBool('AutoLoadChatEnabled') == true) { RA_autoloadchat(); }
 	//Autoconnect on page load if enabled, or when api type is changed
-	if (LoadLocalBool("AutoConnectEnabled") == true) { RA_autoconnect() }
+	if (LoadLocalBool("AutoConnectEnabled") == true) { RA_autoconnect(); }
 	$("#main_api").change(function () { RA_autoconnect(); });
 	$("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); });
 
@@ -285,7 +283,6 @@ $("document").ready(function () {
 		var SwipeTargetMesClassParent = e.target.closest('.last_mes');
 		if (SwipeTargetMesClassParent !== null) {
 			if (SwipeButR.css('display') === 'flex') {
-				//if (SwipeButR.attr('style') == 'display: flex;' == true) {
 				SwipeButR.click();
 			}
 		}
@@ -293,10 +290,8 @@ $("document").ready(function () {
 	document.addEventListener('swiped-right', function (e) {
 		var SwipeButL = $('.swipe_left:last');
 		var SwipeTargetMesClassParent = e.target.closest('.last_mes');
-		//console.log('Touch swipe check -- closest last_mes = "' + (SwipeTargetMesClassParent !== null) + ' Button display = ' + (SwipeButL.attr('style') == 'display: flex;' == true));
 		if (SwipeTargetMesClassParent !== null) {
 			if (SwipeButL.css('display') === 'flex') {
-				//if (SwipeButL.attr('style') == 'display: flex;' == true) {
 				SwipeButL.click();
 			}
 		}
@@ -328,14 +323,8 @@ $("document").ready(function () {
 			ClearLocal();
 		}
 		if (event.key == "ArrowLeft") {		//swipes left
-			/* console.log('SWIPE FILTER -- ' +
-				$("#send_textarea").val() + ' ' +
-				$("#character_popup").css("display") + ' ' +
-				$("#shadow_select_chat_popup").css("display") + ' ' +
-				isInputElementInFocus()); */
 			if (
-
+				$(".swipe_left:last").css('display') === 'flex' &&
-				$(".swipe_left:last").css("display") === "flex" &&
 				$("#send_textarea").val() === '' &&
 				$("#character_popup").css("display") === "none" &&
 				$("#shadow_select_chat_popup").css("display") === "none" &&
@@ -345,14 +334,8 @@ $("document").ready(function () {
 			}
 		}
 		if (event.key == "ArrowRight") { //swipes right
-			/* console.log('SWIPE FILTER -- ' +
-				$("#send_textarea").val() + ' ' +
-				$("#character_popup").css("display") + ' ' +
-				$("#shadow_select_chat_popup").css("display") + ' ' +
-				isInputElementInFocus()); */
 			if (
-
+				$(".swipe_right:last").css('display') === 'flex' &&
-				$(".swipe_right:last").css("display") === "flex" &&
 				$("#send_textarea").val() === '' &&
 				$("#character_popup").css("display") === "none" &&
 				$("#shadow_select_chat_popup").css("display") === "none" &&
@@ -360,6 +343,6 @@ $("document").ready(function () {
 			) {
 				$('.swipe_right:last').click();
 			}
-		};
+		}
-	})
+	});
 });

public/style.css

@@ -70,11 +70,11 @@ body {
     border-radius: 5px;
 }
 
-@supports (height: 100dvh) {
+/* @supports (height: 100dvh) {
     body {
         height: 100dvh;
     }
-}
+} */
 
 .mes_text p {
     margin-top: 0;
@@ -162,13 +162,16 @@ code {
     backdrop-filter: blur(10px);
     background-color: var(--black70a);
     -webkit-backdrop-filter: blur(10px);
-    z-index: 2001;
+    z-index: 3000;
 }
 
+
+
+
 #sheld {
     display: grid;
     grid-template-rows: auto min-content;
-    height: calc(100svh);
+    height: calc(100svh - 40px);
 
     /*overflow: auto;*/
     overflow-x: hidden;
@@ -180,13 +183,11 @@ code {
 }
 
 #chat {
-
+margin-top:5px;
     overflow-x: hidden;
     padding-bottom: 0;
     overflow-y: scroll;
     display: flex;
-    
-    margin-top: 40px;
     bottom: 10px;
     border-bottom: 1px solid var(--black30a);
     border-left: 1px solid var(--black30a);
@@ -339,7 +340,8 @@ code {
 }
 
 #right-nav-panel hr,
-#personality_div hr {
+#personality_div hr,
+#top-settings-holder hr {
     background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
 }
 
@@ -568,25 +570,25 @@ textarea {
 }
 
 
-.right_menu {
+/* .topbar {
     max-height: calc(100% - 50px);
     padding: 0 20px;
 }
-
+ */
-.right_menu h3 {
+#top-bar h3 {
     margin: 0;
     padding: 10px 0;
 }
 
-.right_menu h4 {
+#top-bar h4 {
     margin: 0;
     padding: 5px 0;
 }
 
-.right_menu h5 {
+#top-bar h5 {
     color: var(--white50a);
-    margin: 0;
+    margin-bottom: 0;
-    padding-bottom: 5px;
+    margin-top: 0;
     font-size: 0.75rem;
 }
 
@@ -610,6 +612,7 @@ input[type=submit] {}
     width: calc(100% - 50px);
     margin-left: 20px;
     margin-right: 30px;
+    max-height: 30px;
     display: flex;
     align-items: flex-end;
 }
@@ -711,6 +714,7 @@ select {
     border: 1px solid var(--white30a);
     border-radius: 10px;
     width: 100%;
+    margin-bottom:10px;
 }
 
 select option {
@@ -897,146 +901,90 @@ input[type=search]:focus::-webkit-search-cancel-button {
 /*LEFT SIDE BG MENU*/
 
 #logo_block {
-    margin-top: 10px;
+    z-index: 3001;
-    height: 26px;
-    z-index: 2000;
 }
 
 #bg_menu {
-    margin-top: 0;
-    margin-left: 2px;
     cursor: pointer;
     position: fixed;
-    z-index: 2050;
+    z-index: 3001;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-#site_logo {
-    opacity: 0.4;
-    display: inline-block;
-    width: 130px;
-    height: 20px;
-    vertical-align: top;
-    margin-left: 1px;
-}
-
-#update-notification {
-    height: min-content;
-    font-size: 0.75rem;
-    line-height: 0.75rem;
-    color: orange;
-    margin-bottom: 5px;
-    display: inline-block;
-    top: -50%;
-    position: relative;
-}
-
-#update-notification a {
-    color: orange;
-    text-decoration: none;
-}
-
-#bg_menu_button {
-    display: inline-block;
-    opacity: 0.4;
-    transition: 0.5s;
-    cursor: pointer;
-    width: 20px;
-    text-align: center;
-    height: 20px;
-    color: var(--white50a);
-
-}
-
-#bg_menu_button img {
-    width: 20px;
-    height: 20px;
-    margin-bottom: 6px;
 }
 
 #bg_menu_content {
     margin-top: 5px;
-    margin-left: 0;
+    display: flex;
-    opacity: 0.0;
+    flex-wrap:wrap;
-    cursor: auto;
+    max-width: 450px;
-    display: block;
+    justify-content: center;
-    width: 122px;
-    height: 0;
-    backdrop-filter: blur(10px);
-    background-color: var(--black70a);
-    -webkit-backdrop-filter: blur(10px);
-    overflow: hidden;
 }
 
 .bg_example {
-    width: 103px;
+    width: 30%;
-    height: 83px;
+    max-height: 100px;
-    border-style: none;
+    background-repeat: no-repeat;
-    padding: 6px;
+    background-size: cover;
-    /* padding-bottom: 20px; */
+    background-position: center;
-    position: relative;
+    border-radius: 20px;
-    margin-left: 3px;
+    border: 1px solid var(--black50a);
-    backdrop-filter: blur(10px);
+    box-shadow: 0 0 7px var(--black50a);
-    background-color: var(--black70a);
+    margin: 5px;
-    -webkit-backdrop-filter: blur(1px);
+    aspect-ratio: 4/3;
-}
-
-.bg_example_img {
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center center;
-    border-radius: 10px;
 }
 
 .bg_example_cross {
-    width: 12px;
+    width: 15px;
-    height: 12px;
+    height: 15px;
-    position: absolute;
+    position: relative;
     float: right;
     right: 10px;
     top: 10px;
     cursor: pointer;
-    opacity: 0.5;
+    opacity: 0.4;
     background-color: var(--black100);
-    border-radius: 2px;
+    border-radius: 50%;
-    padding: 1px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    box-shadow: 0 0 0 2pt black;
+}
+
+#form_bg_download {
+    width:30%;
+    margin: 5px;
 }
 
 .bg_example_but_load {
-    margin-left: 3px;
-
-    width: 103px;
-    height: 83px;
-    border-style: none;
-    padding: 6px;
-    padding-bottom: 20px;
-
 }
 
 .bg_example_but_load img {
     cursor: pointer;
-    width: 91px;
+    height: 100px;
-    height: 57px;
+    object-fit: contain;
-    object-fit: cover;
+    margin: auto auto;
-    object-position: center center;
     border-radius: 10px;
     opacity: 0.1;
 }
 
 #add_bg_button {
-    margin-bottom: 2px;
 }
+.input-file {
+    display: flex;
+    justify-content: center;
+}
+
 
 #form_create {
     display: grid;
-    height: 90vh;
+    height: 100%;
-    grid-template-rows: [avatar] min-content [hr] min-content [descriptionHeader] min-content [description] auto [firstmessageHeader] min-content [firstMessage] auto [hidden] min-content [advanced] min-content [tokenCounter] min-content [formButtons] min-content;
+    overflow-y: auto;
+    grid-template-rows: 
+        [avatar] min-content 
+        [hr] min-content 
+        [descriptionHeader] min-content 
+        [description] auto 
+        [firstmessageHeader] min-content 
+        [firstMessage] auto 
+        [hidden] min-content;
 }
 
 .avatar_div {
@@ -1130,17 +1078,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: flex;
 }
 
-.input-file {
-    display: block;
-}
-
-#form_bg_download {
-    margin-bottom: 2px;
-    backdrop-filter: blur(10px);
-    background-color: var(--black70a);
-    -webkit-backdrop-filter: blur(10px);
-}
-
 /* Focus */
 #colab_popup {
 
@@ -1166,7 +1103,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
     width: 300px;
     position: absolute;
-    z-index: 2060;
+    z-index: 9999;
     margin-left: auto;
     margin-right: auto;
     left: 0;
@@ -1266,7 +1203,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     position: absolute;
     width: 100%;
     height: 100vh;
-    z-index: 2095;
+    z-index: 9999;
 }
 
 #colab_shadow_popup {
@@ -1379,12 +1316,12 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-right: auto;
     left: 0;
     right: 0;
-    margin-top: 40px;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     padding: 4px;
     /*border: 1px solid #333333;*/
     flex-direction: column;
-    z-index: 2064;
+    z-index: 3010;
+    border-radius: 0 0 20px 20px;
 }
 
 #world_popup_bottom_holder {
@@ -1701,87 +1638,89 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
     display: none !important;
 }
 
-#temp {
+.range-block {
-    margin-left: 10px;
+    height:min-content;
-    margin-bottom: 20px;
 }
 
-#temp_counter {
+.range-block-title{
-    margin-bottom: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
 }
-
-#amount_gen {
-    margin-left: 10px;
-    margin-bottom: 20px;
-}
-
-#amount_gen_counter {
-    margin-bottom: 0;
-}
-
-#max_context {
-    margin-left: 10px;
-    margin-bottom: 20px;
-}
-
-#max_context_counter {
-    margin-bottom: 0;
-}
-
-#range_block input {
-    margin-left: 10px;
-    margin-bottom: 20px;
-}
-
-#range_block_novel input {
-    margin-left: 10px;
-    margin-bottom: 20px;
-}
-
-/* range sliders */
-
-#range_block,
-#range_block_novel {
-    margin-top: 10px;
-}
-
-#range_block input,
-#range_block_novel input {
-    margin-bottom: 20px;
-}
-
-#temp,
-#amount_gen,
-#max_context {
-    margin-bottom: 20px;
-}
-
-#temp_counter,
-#amount_gen_counter,
-#max_context_counter {
-    margin-bottom: 0;
-}
-
 .range-block-counter {
-    width: min-content;
+    width: max-content;
-    margin: 0 auto;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10px;
+    font-size:11px;
+    color: var(--white50a);
 }
 
 .range-block-range {
     margin: 0 auto;
+    margin-bottom: 10px;
     width: 100%;
+    margin-bottom: 10px;
 }
 
-input[type="range"] {
+/* input[type=range] {
     -webkit-appearance: none;
-    margin: 0 auto;
+    appearance: none;
+    margin: 0;
+    padding: 0;
     width: 100%;
-    height: 7px;
+    height: 5px;
     background: var(--white50a);
     border-radius: 15px;
     background-size: 70% 100%;
     background-repeat: no-repeat;
 }
+input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 15px;
+    width: 15px;
+    margin-top: -5px;
+    border-radius: 50%;
+    background:red;
+} */
+
+input[type="range"]{
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 5px;
+    background: var(--white50a);
+    border-radius: 15px;
+    background-size: 70% 100%;
+    background-repeat: no-repeat;
+    box-shadow:inset 0 0 2px black;
+/*     -webkit-appearance:none;
+    width:160px;
+    height:20px;
+    margin:10px 50px;
+    background: linear-gradient(to right, #9A2720 0%, #9A2720 100%);
+    background-size:150px 10px;
+    background-position:center;
+    background-repeat:no-repeat;
+    overflow:hidden;
+    outline: none; */
+  }
+  
+  input[type="range"]::-webkit-slider-thumb{
+     -webkit-appearance:none;
+    position:relative;
+    box-shadow:0 0 5px 0 black;
+    box-shadow:inset 0 0 5px var(--black70a);
+    -webkit-appearance: none;
+    height: 15px;
+    width: 15px;
+    /* margin-top: -5px; */
+    border-radius: 50%;
+    background:var(--white100);
+  }
 
 /*Notes '?' links*/
 
@@ -1897,8 +1836,6 @@ input[type="range"] {
 }
 
 #anchor_order {
-    width: 284px;
-
     margin-bottom: 15px;
     color: var(--white70a);
     background-color: var(--black50a);
@@ -1934,7 +1871,6 @@ input[type="range"] {
 
 #character_popup {
     display: none;
-    position:fixed;
     background-color: var(--black30a);
     backdrop-filter: blur(50px);
     -webkit-backdrop-filter: blur(30px);
@@ -1948,7 +1884,6 @@ input[type="range"] {
     margin-right: auto;
     left: 0;
     right: 0;
-    margin-top: 40px;
     box-shadow: 0 0 20px var(--black70a);
     padding-left: 30px;
     padding-right: 30px;
@@ -2199,6 +2134,7 @@ input[type="range"] {
     flex-direction: row;
     width: 100%;
     align-items: flex-end;
+    margin-bottom: 10px;
 }
 
 #rm_group_buttons .checkbox {
@@ -2581,14 +2517,14 @@ a {
     bottom: 0;
     margin: 0;
     right: -450px;
-    padding: 0;
+    padding: 0 10px;
     -webkit-transition: right 0.14s ease-in-out 0.02s;
     -moz-transition: right 0.14s ease-in-out 0.02s;
     transition: right 0.14s ease-in-out 0.02s;
     backdrop-filter: blur(10px);
     background-color: var(--black70a);
     -webkit-backdrop-filter: blur(10px);
-    z-index: 2050;
+    z-index: 3000;
     white-space: nowrap;
     border-left: 1px solid var(--black30a);
     scrollbar-width: thin;
@@ -2644,10 +2580,17 @@ a {
 #nav-toggle:checked~#right-nav-panel {
     right: 0;
     box-shadow: -5px 0 20px 0 var(--black70a);
+    /*overflow-y: auto;*/
+}
+
+
+#right-nav-panel > div:not(#right-nav-panel-tabs) {
+    height: calc(100% - 40px);
     overflow-y: auto;
 }
 
 
+
 /* Message images */
 .mes img.img_extra {
     max-width: 600px;
@@ -2660,84 +2603,6 @@ a {
     display: none;
 }
 
-
-
-@media screen and (max-width: 450px) {      /*styles for mobile phones (tested on iPhone 13 Pro)*/
-    body {
-        font-size: 18px;
-    }
-
-    #bg1, #bg2 {position:fixed;}
-
-    #sheld {    /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
-        height: calc(100svh - 15px);
-        width: calc(100vw - 10px);
-        margin: 0 auto;
-        margin-left: 5px;
-        position: fixed;
-    }
-    #send_textarea {    /*larger input bar for mobile screens, easier to tap*/
-        font-size: 1.25rem;
-        line-height: 1.5rem;
-        min-height: calc(2rem + 0.75rem + 2px);
-        max-height: 35vh;
-        word-wrap: break-word;
-        height: 40px;
-        resize: vertical;
-        display: block;
-        background-color: rgba(255, 0, 0, 0);
-        border: 0;
-        box-shadow: none;
-        padding: 6px 0 6px 0;
-        font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
-        margin: 0;
-        text-shadow: #000 0 0 3px;
-    }
-    #rm_ch_create_block textarea {  /*without this the text areas display far too large*/
-        max-height: 300px;
-    }
-
-    #rm_api_block {
-        width:100vw;
-
-    }
-
-    #right-nav-panel, #character_popup {        /* character_popup display needs work, "width:100%" items push outside the box */
-        width: 100vw;
-        box-shadow: none;
-    }
-
-    #character_popup {
-        margin-top:0;
-        height:100dvh;
-        padding-left:15px;
-        padding-right: 15px;
-        width: 100vw;
-        position: fixed;
-    }
-
-    #talkativeness_hint span {
-        min-width: 33%;
-    }
-    /*for debug purposes*/
-/* 
-    * {border: 1px solid purple;}
-     */
-}
-
-@media (max-width: 768px) {
-    .mes img.img_extra {
-        max-width: 100%;
-    }
-}
-
-@media all and (display-mode: browser) {        /*Even in iOS WebApp mode the window detects as this; unhelpful.*/
-    * { 
-
-    }
-
-}
-
 /* Extensions */
 #extensions_url {
     display: block;
@@ -2778,54 +2643,6 @@ label[for="extensions_autoconnect"] {
     padding: 0.05px; /* clear fix */
 }
 
-.success {
-    color: green;
-}
-
-.failure {
-    color: red;
-}
-
-.expander {
-    flex-grow: 1;
-}
-
-.drawer {
-    padding-bottom: 10px;
-}
-
-.drawer-icon {
-    display: block;
-    cursor: pointer;
-    width: 26px;
-    height: 26px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    filter: invert(1) brightness(75%);
-}
-
-.drawer-icon.up {
-    background-image: url('img/circle-chevron-up-solid.svg');
-}
-
-.drawer-icon.down {
-    background-image: url('img/circle-chevron-down-solid.svg');
-}
-
-.drawer-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.drawer-content {
-    display: none;
-}
-
-.drawer-content .checkbox_label {
-    margin: 1rem 0;
-}
-
 .extensions_info {
     text-align: left;
     margin: 0 1em;
@@ -2851,3 +2668,225 @@ label[for="extensions_autoconnect"] {
     text-decoration: line-through;
     color: lightgray;
 }
+
+.success {
+    color: green;
+}
+
+.failure {
+    color: red;
+}
+
+.expander {
+    flex-grow: 1;
+}
+
+/*------------ TOP SIDE SETTINGS ----------------*/
+
+#top-settings-holder{
+    margin: 0 auto;
+    padding-top: 5px;
+    /* right: auto; */
+    height: 35px;
+    min-width: 20vw;
+    max-width: 700px;
+    color: white;
+    justify-content: space-around;
+    display: grid;
+    grid-template-columns: 10% 10% 10% 10% 10% 10% 10%;
+    z-index: 3000;
+    position: relative;
+    /* grid-gap: 20px; */
+
+}
+
+.drawer {
+    align-items: center;
+    display: flex;
+    flex-flow: column;
+
+}
+
+.drawer-icon {
+    display: inline-block;
+    cursor: pointer;
+    min-width: 36px;
+    height: 26px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.icon-connect{
+    background-image: url('img/wifi-solid.svg');
+}
+.icon-sliders{
+    background-image: url('img/sliders-solid.svg');
+}
+.icon-globe{
+    background-image: url('img/book-atlas-solid.svg');
+}
+.icon-user{
+    background-image: url('img/face-smile-regular.svg');
+}
+
+.icon-panorama{
+    background-image: url('img/panorama-solid.svg');
+}
+
+.icon-cubes {
+    background-image: url('img/cubes-solid.svg');
+}
+
+.icon-formatting {
+    background-image: url('img/font-solid.svg');
+}
+
+.drawer-icon.openIcon {
+   /*  background-image: url('img/circle-chevron-up-solid.svg'); */
+   filter: invert(1) brightness(200%);
+   transition: all 0.275s;
+}
+
+.drawer-icon.closedIcon {
+    /* background-image: url('img/circle-chevron-down-solid.svg'); */
+    filter: invert(1);
+    opacity: 0.3;
+    transition: all 0.275s;
+}
+
+.drawer-icon.closedIcon:hover{
+    opacity: 1;
+}
+
+.drawer-header {
+    display: flex;
+    align-items: center;
+}
+
+.drawer-content {
+    background-color: var(--black50a);
+    color: white;
+    border-radius: 20px;
+    padding: 10px;
+    border: 1px solid grey;
+    box-shadow: 0 0 20px black;
+    /* min-width:400px; */
+    width: max-content;
+    overflow-y: scroll;
+    max-height: 90vh;
+    display: none;
+    position: absolute;
+    left:0;
+    right:0;
+    width: max-content;
+    margin: 30px auto;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+}
+
+.flex-container {
+    display: flex;
+    gap: 20px;
+}
+
+.wide50p { width:50%;}
+
+
+
+
+/* ---------- @media quaries must always go at the bottom ------------*/
+
+@media screen and (max-width: 450px) {      /*styles for mobile phones (tested on iPhone 13 Pro)*/
+    body {
+        font-size: 18px;
+    }
+
+    .drawer-content {
+        width: calc(100vw - 10px);
+        position: fixed;
+        left: 0;
+        top: 10px;
+    }
+
+    #top-settings-holder{
+        max-width:70vw;
+    }
+    #bg1, #bg2 {position:fixed;}
+
+    #sheld, #character_popup, #world_popup, #right-nav-panel {    /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
+        height: calc(100svh - 55px);
+        width: calc(100vw - 10px);
+        margin: 0 auto;
+        margin-left: 5px;
+        position: fixed;
+    }
+
+    .mes-text {padding-right: 25px;}
+
+    #right-nav-panel {
+        margin-top: 0 auto;
+        border-radius: 0 0 0 20px;
+        height: calc(100vh - 30px);
+        width: calc(100vw - 5px);
+    }
+
+    #right-nav-panel h4 {margin: 5px auto;}
+
+    #form_create {
+        grid-template-rows: 
+            [avatar] min-content 
+            [hr] min-content 
+            [descriptionHeader] min-content 
+            [description] auto 
+            [firstmessageHeader] min-content 
+            [firstMessage] auto;
+    }
+
+    #result_info {    font-size: 14px;}
+
+    .avatar_div {margin-top: 5px;}
+
+    #character_popup {
+        width: calc(100vw - 5px);
+        border-radius: 0 0 0 20px;
+        margin-top: -35px;
+        height: calc(100vh - 30px);
+    }
+
+
+    #send_textarea {    /*larger input bar for mobile screens, easier to tap*/
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+        min-height: calc(2rem + 0.75rem + 2px);
+        max-height: 200px;
+        word-wrap: break-word;
+        height: 40px;
+        resize: vertical;
+        display: block;
+        background-color: rgba(255, 0, 0, 0);
+        border: 0;
+        box-shadow: none;
+        padding: 6px 0 6px 0;
+        font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+        margin: 0;
+        text-shadow: #000 0 0 3px;
+    }
+    #rm_ch_create_block textarea {  /*without this the text areas display far too large*/
+        max-height: 200px;
+    }
+
+    #talkativeness_hint span {
+        min-width: 33%;
+    }
+    /*for debug purposes*/
+/* 
+    * {border: 1px solid purple;}
+     */
+}
+
+@media (max-width: 768px) {
+    .mes img.img_extra {
+        max-width: 100%;
+    }
+}
+