added swipes,

fixed suer avatar highlighting
swiping works on touchscreens
arrow left and right also swipe on PC

public/index.html

@@ -736,6 +736,9 @@
                     <label for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
                         <h4>Collapse Newlines in Output</h4>
                     </label>
+                    <label for="swipes-checkbox"><input id="swipes-checkbox" type="checkbox" />
+                        <h4>Swipes</h4>
+                    </label>
                 </div>
             </div>
 

public/scripts/RossAscends-mods.js

@@ -324,27 +324,18 @@ $("document").ready(function () {
 	//2. find a way to make the chat slide down smoothly when the last mes div gets .remove()-d
 
 	document.addEventListener('swiped-left', function(e) {
-		var SwipeTargetMesClassParent = e.target.closest('.mes');
+		var SwipeTargetMesClassParent = e.target.closest('.last_mes');
-		if (is_send_press == false){
+		if (SwipeTargetMesClassParent !== null){
-		if (SwipeTargetMesClassParent !== null && SwipeTargetMesClassParent.nextSibling == null ){
+			if($('.swipe_right:last').attr('style')=='display: flex;' == true){
-				$('#chat').children().last().css({'transition':'all 0.5s ease-in-out'});
+				$('.swipe_right:last').click();
-				$('#chat').children().last().css({'transform':'translateX(-100vw) scale(0,0)','overflow':'hidden'});
-				$('#chat').children().last().css({'opacity':'0'});
-				
-				Generate('regenerate');
 			}
 		}
 	});
 	document.addEventListener('swiped-right', function(e) {
-		var SwipeTargetMesClassParent = e.target.closest('.mes');
+		var SwipeTargetMesClassParent = e.target.closest('.last_mes');
-		console.log(is_send_press);
+		if (SwipeTargetMesClassParent !== null){
-		if (is_send_press === false){
+			if($('.swipe_left:last').attr('style')=='display: flex;' == true){
-			if (SwipeTargetMesClassParent !== null && SwipeTargetMesClassParent.nextSibling == null){
+				$('.swipe_left:last').click();
-				$('#chat').children().last().css({'transition':'all 0.5s ease-in-out'});
-				$('#chat').children().last().css({'transform':'translateX(100vh) scale(0,0)','overflow':'hidden'});
-				$('#chat').children().last().css({'opacity':'0'});
-				Generate('regenerate');
-				console.log(is_send_press);
 			}
 		}
 	});
@@ -370,6 +361,12 @@ $("document").ready(function () {
 		if (event.ctrlKey && event.key == "ArrowRight") {		//for debug, empty local storage state
 			ClearLocal();
 		}
+		if (event.key == "ArrowLeft") {		//swipes left
+			$('.swipe_left:last').click();;
+		}
+		if (event.key == "ArrowRight") {		//swipes right
+			$('.swipe_right:last').click();
+		}
 	});
 	
 })

public/settings.json

@@ -1 +1 @@
-{"username":"You","api_server":"http://localhost:5000/api","api_server_textgenerationwebui":"","preset_settings":"gui","preset_settings_novel":"Classic-Euterpe","user_avatar":"legat.png","temp":0.43,"amount_gen":180,"max_context":2048,"anchor_order":0,"style_anchor":false,"character_anchor":false,"auto_connect":true,"auto_load_chat":true,"main_api":"kobold","api_key_novel":"","rep_pen":1.17,"rep_pen_size":1024,"model_novel":"euterpe-v2","temp_novel":1.11,"rep_pen_novel":1.11,"rep_pen_size_novel":320,"world_info":null,"world_info_depth":2,"world_info_budget":200,"active_character":"0","textgenerationwebui_settings":{"temp":0.5,"top_p":0.9,"top_k":0,"typical_p":1,"rep_pen":1.1,"rep_pen_size":0,"penalty_alpha":0}}
+{"username":"You","api_server":"http://127.0.0.1:5000/api","api_server_textgenerationwebui":"","preset_settings":"Classic-Pygmalion-2.7b","preset_settings_novel":"Classic-Euterpe","user_avatar":"legat.png","temp":0.43,"amount_gen":180,"max_context":2048,"anchor_order":0,"style_anchor":false,"character_anchor":false,"main_api":"kobold","api_key_novel":"","rep_pen":1.17,"rep_pen_size":1024,"model_novel":"euterpe-v2","temp_novel":0.5,"rep_pen_novel":1,"rep_pen_size_novel":100,"world_info":"Toaru","world_info_depth":1,"world_info_budget":200,"active_character":"0","textgenerationwebui_settings":{"temp":0.5,"top_p":0.9,"top_k":0,"typical_p":1,"rep_pen":1.1,"rep_pen_size":0,"penalty_alpha":0},"swipes":true}

public/style.css

@@ -341,13 +341,50 @@ code {
 
 .mes {
     display: grid;
-    grid-template-columns: min-content min-content auto;
+    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);
 }
 
+.last_mes .mes_text {
+    min-height: 7em;
+}
+
+.last_mes{
+    grid-template-columns: [checkbox] fit-content(60px) [avatar] 50px [msg_block] auto [rightswipe] fit-content(48px);
+    
+}
+/* SWIPE RELATED STYLES*/
+
+.swipe_right,.swipe_left {
+    height: 30px;
+    width: 30px;
+    opacity: 0.36;
+    position: absolute;
+    right: 15px;
+    margin-top: 62px;
+    left: auto;
+    background-color: var(--black50a);
+    padding: 20px;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    /* display: none; */
+    border: 1px solid grey;
+}
+
+.swipe_right img, .swipe_left img {
+    height: 30px;
+    width: 30px;
+}
+
+.swipe_left {
+    left: 20px;
+    right: auto;
+}
+
 .avatar {
     width: 50px;
     height: 50px;
@@ -367,15 +404,14 @@ code {
 }
 
 .avatar.selected img {
-    outline-style: solid;
+/*     outline-style: solid;
     outline-color: rgb(255 255 255 / 70%);
-    outline-width: 2px;
+    outline-width: 2px; */
 }
 
 .mes_block {
-
     padding-top: 0;
-    padding-left: 10px;
+    padding-left: 20px;
 }
 
 .ch_name {
@@ -386,8 +422,8 @@ code {
 .mes_text {
     font-weight: 400;
     line-height: 1.25rem;
-    padding-right: 40px;
+    padding-right: 60px;
-    padding-left: 5px;
+    padding-left: 0;
     padding-top: 5px;
     padding-bottom: 5px;
     max-width: 720px;
@@ -1527,8 +1563,10 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
 
 #user_avatar_block .avatar {
     cursor: pointer;
-    width: 60px;
+    width: 64px;
-    height: 60px;
+    height: 64px;
+    border: 2px solid rgba(255,255,255,0.7);
+    border-radius: 50%;
 }
 
 #user_avatar_block .avatar img {
@@ -2491,6 +2529,8 @@ a {
     display: none;
 }
 
+
+
 @media screen and (max-width: 450px) {      /*styles for mobile phones (tested on iPhone 13 Pro)*/
     body {
         font-size: 18px;
@@ -2500,6 +2540,7 @@ 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);
         margin-left: 5px;
         margin-right: 5px;
         position: fixed;