diff --git a/public/index.html b/public/index.html index 137fa0be8..710f64b01 100644 --- a/public/index.html +++ b/public/index.html @@ -834,6 +834,7 @@
${bias}
+
diff --git a/public/script.js b/public/script.js index 172b5ebfa..b1200e5f2 100644 --- a/public/script.js +++ b/public/script.js @@ -748,6 +748,7 @@ 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); }); } @@ -859,17 +860,32 @@ function addOneMessage(mes, type = "normal") { 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); + + //console.log(mes); } else { $("#chat").children().filter('[mesid="' + count_view_mes + '"]').children('.mes_block').children('.mes_text').append(messageText); hideSwipeButtons(); count_view_mes++; + } var $textchat = $("#chat"); $('#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(); } @@ -900,7 +916,7 @@ function sendSystemMessage(type, text) { } chat.push(newMessage); - console.log('sendSystemMessage calls addOneMessage'); + //console.log('sendSystemMessage calls addOneMessage'); addOneMessage(newMessage); is_send_press = false; } @@ -1026,7 +1042,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length console.log('checking bias'); chat[chat.length - 1]['extra']['bias'] = messageBias; } - console.log('Generate calls addOneMessage'); + //console.log('Generate calls addOneMessage'); addOneMessage(chat[chat.length - 1]); } //////////////////////////////////// @@ -1203,7 +1219,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length return; function runGenerate(cycleGenerationPromt = '') { - + $(".swipe_right").css("display", "none"); is_send_press = true; generatedPromtCache += cycleGenerationPromt; @@ -1546,7 +1562,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length if (chat[chat.length - 1]['swipe_id'] === chat[chat.length - 1]['swipes'].length - 1) { //console.log(getMessage); chat[chat.length - 1]['mes'] = getMessage; - console.log('runGenerate calls addOneMessage for swipe'); + // console.log('runGenerate calls addOneMessage for swipe'); addOneMessage(chat[chat.length - 1], 'swipe'); } else { chat[chat.length - 1]['mes'] = getMessage; @@ -1572,7 +1588,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length chat[chat.length - 1]['is_name'] = true; chat[chat.length - 1]['force_avatar'] = avatarImg; } - console.log('runGenerate calls addOneMessage'); + //console.log('runGenerate calls addOneMessage'); addOneMessage(chat[chat.length - 1]); $("#send_but").css("display", "inline"); @@ -1594,6 +1610,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length $("#send_but").css("display", "inline"); $("#loading_mes").css("display", "none"); + //console.log('runGenerate calling showSwipeBtns'); showSwipeButtons(); } console.log('/savechat called by /Generate'); @@ -1602,7 +1619,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length //console.log('AI Response: +'+getMessage+ '('+final_message_length+' tokens)'); $("#send_but").css("display", "inline"); - + //console.log('runGenerate calling showSwipeBtns pt. 2'); showSwipeButtons(); $("#loading_mes").css("display", "none"); @@ -2027,6 +2044,7 @@ async function getSettings(type) { $('#swipes-checkbox').prop('checked', swipes); /// swipecode console.log('getSettings -- swipes = ' + swipes + '. toggling box'); hideSwipeButtons(); + //console.log('getsettings calling showswipebtns'); showSwipeButtons(); //Novel @@ -2131,23 +2149,9 @@ async function getSettings(type) { textgenerationwebui_settings[i] ); } - /* //RossAscends: getting variables added/adjusted/applied with RA-mods - active_character = settings.active_character; - this_chid = settings.active_character; //forcing variable sameness for chid and this_chid with active_character in order to load RA_ALC - var chid = settings.active_character; //forcing variable sameness for chid and this_chid with active_character in order to load RA_ALC - console.log( - "getSettings -- loaded from file -- active_character : " + - settings.active_character - ); - auto_connect = settings.auto_connect; - auto_load_chat = settings.auto_load_chat; */ + selected_button = settings.selected_button; - /* NavOpenClosePref = settings.NavOpenClosePref; - stickyNavPref = settings.stickyNavPref; */ - /* $("#nav-toggle").prop("checked", NavOpenClosePref); - $("#rm_button_panel_pin").prop("checked", stickyNavPref); - $("#auto-connect-checkbox").prop("checked", auto_connect); - $("#auto-load-chat-checkbox").prop("checked", auto_load_chat); */ + } if (!is_checked_colab) isColab(); @@ -2687,7 +2691,33 @@ function showSwipeButtons() { if (swipeId !== undefined && swipeId != 0) { currentMessage.children('.swipe_left').css('display', 'flex'); } - currentMessage.children('.swipe_right').css('display', 'flex'); + if (is_send_press === false || chat[chat.length - 1].swipes.length >= swipeId) { //only show right when generate is off, or when next right swipe would not make a generate happen + currentMessage.children('.swipe_right').css('display', 'flex'); + currentMessage.children('.swipe_right').css('opacity', '0.3'); + } + + //had to add this to make the swipe counter work + //(copied from the onclick functions for swipe buttons.. + //don't know why the array isn't set for non-swipe messsages in Generate or addOneMessage..) + + if (chat[chat.length - 1]['swipe_id'] === undefined) { // if there is no swipe-message in the last spot of the chat array + chat[chat.length - 1]['swipe_id'] = 0; // set it to id 0 + chat[chat.length - 1]['swipes'] = []; // empty the array + chat[chat.length - 1]['swipes'][0] = chat[chat.length - 1]['mes']; //assign swipe array with last message from chat + } + //console.log((chat[chat.length - 1])); + if (is_send_press === false && (chat[chat.length - 1].swipes.length - swipeId) === 1) { + console.log('highlighting R swipe'); + currentMessage.children('.swipe_right').css('opacity', '0.7'); + } + + var swipesCounterHTML = (`${(swipeId + 1)}/${(chat[chat.length - 1].swipes.length)}`); + console.log(swipesCounterHTML); + + $(".swipes-counter").html(swipesCounterHTML); + + //console.log(swipeId); + //console.log(chat[chat.length - 1].swipes.length); } function hideSwipeButtons() { @@ -2724,6 +2754,7 @@ $(document).ready(function () { console.log('detected swipes-checkbox changed values') swipes = !!$('#swipes-checkbox').prop('checked'); if (swipes) { + //console.log('toggle change calling showswipebtns'); showSwipeButtons(); } else { hideSwipeButtons(); @@ -2745,11 +2776,14 @@ $(document).ready(function () { } chat[chat.length - 1]['swipe_id']++; //make new slot in array //console.log(chat[chat.length-1]['swipes']); - if (parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { //if swipe id of last message is the same as the length of the 'swipes' array + if (parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { //if swipe id of last message is the same as the length of the 'swipes' array + run_generate = true; } 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 swipe + 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) @@ -2778,10 +2812,11 @@ $(document).ready(function () { //console.log(parseInt(chat[chat.length-1]['swipe_id'])); //console.log(chat[chat.length-1]['swipes'].length); if (run_generate && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { - //console.log('showing ...'); - $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows ... while generating + //console.log('showing ""..."'); + $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows "..." while generating } else { //console.log('showing previously generated swipe candidate, or "..."'); + //console.log('onclick right swipe calling addOneMessage'); addOneMessage(chat[chat.length - 1], 'swipe'); } let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight); @@ -2819,7 +2854,7 @@ $(document).ready(function () { Generate('swipe'); } else { if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) { - console.log('caught here 3'); + saveChat(); } } @@ -2882,7 +2917,7 @@ $(document).ready(function () { queue: false, complete: function () { const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop("scrollHeight") - $('#chat').outerHeight()) - 10); - console.log('sipwing left after tr5ansition calls addOneMessage'); + //console.log('on left swipe click calling addOneMessage'); addOneMessage(chat[chat.length - 1], 'swipe'); let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight); if (new_height < 103) new_height = 103; @@ -2971,7 +3006,7 @@ $(document).ready(function () { }); $("#send_but").click(function () { if (is_send_press == false) { - hideSwipeButtons(); + //hideSwipeButtons(); is_send_press = true; Generate(); @@ -2987,7 +3022,7 @@ $(document).ready(function () { $("#send_textarea").keydown(function (e) { if (!e.shiftKey && !e.ctrlKey && e.key == "Enter" && is_send_press == false) { - hideSwipeButtons(); + //hideSwipeButtons(); is_send_press = true; e.preventDefault(); Generate(); @@ -3425,6 +3460,7 @@ $(document).ready(function () { chat[0]["is_name"] = true; chat[0]["mes"] = this_ch_mes; add_mes_without_animation = true; + //console.log('form create submission calling addOneMessage'); addOneMessage(chat[0]); } } @@ -3613,7 +3649,7 @@ $(document).ready(function () { else if (id == "option_regenerate") { if (is_send_press == false) { - hideSwipeButtons(); + //hideSwipeButtons(); is_send_press = true; Generate("regenerate"); } @@ -3647,6 +3683,7 @@ $(document).ready(function () { $(this).prop("checked", false); }); this_del_mes = 0; + console.log('canceled del msgs, calling showswipesbtns'); showSwipeButtons(); }); @@ -3678,6 +3715,7 @@ $(document).ready(function () { this_del_mes = 0; $('#chat .mes').last().addClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes'); + console.log('confirmed del msgs, calling showswipesbtns'); showSwipeButtons(); }); diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index e6a970123..98087f9c5 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -279,7 +279,8 @@ $("document").ready(function () { var SwipeButR = $('.swipe_right:last'); var SwipeTargetMesClassParent = e.target.closest('.last_mes'); if (SwipeTargetMesClassParent !== null) { - if (SwipeButR.attr('style') == 'display: flex;' == true) { + if (SwipeButR.css('display') === 'flex') { + //if (SwipeButR.attr('style') == 'display: flex;' == true) { SwipeButR.click(); } } @@ -287,13 +288,19 @@ $("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.attr('style') == 'display: flex;' == true) { + if (SwipeButL.css('display') === 'flex') { + //if (SwipeButL.attr('style') == 'display: flex;' == true) { SwipeButL.click(); } } }); + function isInputElementInFocus() { + return $(document.activeElement).is(":input"); + } + //Additional hotkeys CTRL+ENTER and CTRL+UPARROW document.addEventListener("keydown", (event) => { if (event.ctrlKey && event.key == "Enter") { @@ -316,11 +323,36 @@ $("document").ready(function () { ClearLocal(); } if (event.key == "ArrowLeft") { //swipes left - $('.swipe_left:last').click(); - } - if (event.key == "ArrowRight") { //swipes right - $('.swipe_right:last').click(); - } - }); + /* console.log('SWIPE FILTER -- ' + + $("#send_textarea").val() + ' ' + + $("#character_popup").css("display") + ' ' + + $("#shadow_select_chat_popup").css("display") + ' ' + + isInputElementInFocus()); */ -}) + if ( + $("#send_textarea").val() === '' && + $("#character_popup").css("display") === "none" && + $("#shadow_select_chat_popup").css("display") === "none" && + !isInputElementInFocus() + ) { + $('.swipe_left:last').click(); + } + } + 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 ( + $("#send_textarea").val() === '' && + $("#character_popup").css("display") === "none" && + $("#shadow_select_chat_popup").css("display") === "none" && + !isInputElementInFocus() + ) { + $('.swipe_right:last').click(); + } + }; + }) +}); diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index 817e20a04..c6bf2b706 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/public/scripts/extensions/expressions/index.js @@ -180,14 +180,14 @@ async function setExpression(character, expression) { const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`); if (debugImageStatus && !debugImageStatus.classList.contains('failure')) { - console.log('setting expression from character images folder'); + //console.log('setting expression from character images folder'); const imgUrl = `/characters/${character}/${filename}`; $('img.expression').prop('src', imgUrl); } else { if (showDefault) { - console.log('no character images, trying default expressions'); + //console.log('no character images, trying default expressions'); const defImgUrl = `/img/default-expressions/${filename}`; - console.log(defImgUrl); + //console.log(defImgUrl); $('img.expression').prop('src', defImgUrl); } } diff --git a/public/style.css b/public/style.css index 2cef15f26..cc58f2074 100644 --- a/public/style.css +++ b/public/style.css @@ -176,7 +176,27 @@ code { } #chat { + overflow-x: hidden; + padding-bottom: 0; + overflow-y: scroll; + display: flex; + flex-wrap: wrap; + margin-top: 40px; + bottom: 10px; + border-bottom: 1px solid var(--black30a); + border-left: 1px solid var(--black30a); + border-right: 1px solid var(--black30a); + backdrop-filter: blur(20px); + background-color: var(--black70a); + -webkit-backdrop-filter: blur(20px); + text-shadow: #000 0 0 3px; + scrollbar-width: thin; + transition: all 1s ease-in-out; + align-content: end; + + /*old style top to bottom flow*/ +/* overflow-x: hidden; overflow-y: scroll; margin-top: 40px; border-bottom: 1px solid var(--black30a); @@ -187,7 +207,7 @@ code { -webkit-backdrop-filter: blur(20px); text-shadow: #000 0 0 3px; scrollbar-width: thin; - transition: all 1s ease-in-out; + transition: all 1s ease-in-out; */ } @@ -348,16 +368,25 @@ code { } .mes { + display: grid; + grid-template-columns: min-content min-content auto min-content min-content; + padding: 10px 10px 0 10px; + margin-top: 0; + width: 100%; + color: var(--ivory, white); + align-self: flex-end; + + /* display: grid; grid-template-columns: min-content min-content auto min-content min-content; padding: 10px 10px 0 10px; vertical-align: top; width: 100%; - color: var(--ivory, white); + color: var(--ivory, white); */ } .last_mes .mes_text { - min-height: 7em; + min-height: 6em; } .last_mes{ @@ -367,26 +396,34 @@ code { /* SWIPE RELATED STYLES*/ .swipe_right,.swipe_left { - height: 30px; - width: 30px; + height: 40px; + width: 40px; opacity: 0.36; position: absolute; right: 15px; - margin-top: 62px; + margin-top: 60px; left: auto; background-color: var(--black50a); - padding: 20px; border-radius: 50%; align-items: center; justify-content: center; - /* display: none; */ border: 1px solid grey; + flex-wrap: wrap; } .swipe_right img, .swipe_left img { height: 30px; + display: flex; width: 30px; } +.swipes-counter{ + display: flex; + color: white; + position: fixed; + font-size: 12px; + padding: 0; + margin-top: 60px; +} .swipe_left { left: 20px; @@ -2582,9 +2619,9 @@ a { #sheld { /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/ height: calc(100svh - 15px); - width: 100vw; //calc(100vw - 15px); + width: calc(100vw - 10px); + margin: 0 auto; margin-left: 5px; - margin-right: 5px; position: fixed; } #send_textarea { /*larger input bar for mobile screens, easier to tap*/ @@ -2608,8 +2645,13 @@ a { 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: 100%; + width: 100vw; box-shadow: none; } @@ -2626,7 +2668,9 @@ a { min-width: 33%; } /*for debug purposes*/ - /** {border: 1px solid purple;}*/ +/* + * {border: 1px solid purple;} + */ } @media (max-width: 768px) {