added

- swipes library
- CSS for mobile,
- swipe left/right on last msg to regenerate

public/index.html

@@ -22,6 +22,7 @@
     <script src="scripts/showdown.min.js"></script>
     <script src="scripts/popper.js"></script>
     <script type="module" src="scripts/RossAscends-mods.js"></script>
+    <script type="module" src="scripts/swiped-events.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="stylesheet" href="css/bg_load.css">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
@@ -102,7 +103,7 @@
 
         <div id="talkativeness_div">
             <h4>Talkativeness</h4>
-            <h5>How often does the character speak randomly.&nbsp;<span class="warning">Affects group chats only!</span>
+            <h5>How often the chracter speaks in &nbsp;<span class="warning">group chats!</span>
             </h5>
             <input id="talkativeness_slider" name="talkativeness" type="range" min="0" max="1" step="0.05" value="0.5"
                 form="form_create">

public/script.js

@@ -16,7 +16,8 @@ export {
     api_server,
     api_key_novel,
     getCharacters,
-    is_send_press
+    is_send_press,
+    chat
 }
 
 // API OBJECT FOR EXTERNAL WIRING
@@ -825,19 +826,23 @@ window['TavernAI'] = {};
                 typeWriter($("#chat").children().filter('[mesid="' + count_view_mes + '"]').children('.mes_block').children('.mes_text'), messageText, 50, 0);
             }
             count_view_mes++;
+            //console.log('add mes without animation = '+add_mes_without_animation);
+            //console.log(!add_mes_without_animation);
             if (!add_mes_without_animation) {
-                $('#chat').children().last().css("opacity", 1.0);
+                console.log('adding mes with animation')
-                $('#chat').children().last().transition({
+                //$('#chat').children().last().css('transition','all 2s ease-in-out');
-                    opacity: 1.0,
+                $('#chat').children().last().css("opacity", "1");
-                    duration: 700,
+                //$('#chat').children().last().css('transition','all 2s ease-in-out');
-                    easing: "",
+                
-                    complete: function () { }
+                
-                });
+            }else {
-            } else {
+                console.log('add mes with animation was false, and is set to false again')
                 add_mes_without_animation = false;
             }
             var $textchat = $('#chat');
-            $textchat.scrollTop($textchat[0].scrollHeight);
+            //$('#chat').children().last().css("opacity", "1");
+            $textchat.scrollTop(($textchat[0].scrollHeight));
+
         }
         function typeWriter(target, text, speed, i) {
             if (i < text.length) {
@@ -1003,11 +1008,14 @@ window['TavernAI'] = {};
                     if (chat[chat.length - 1]['is_user']) {//If last message from You
     
                     } else {
-                        //console.log('about to remove last msg')
                         chat.length = chat.length - 1;
                         count_view_mes -= 1;
-                        //console.log('removing last msg')
+                        //$('#chat').children().last().css({'transition':'all 0.5s ease-in-out'});
-                        $('#chat').children().last().remove();
+                        //$('#chat').children().last().css({'transform':'translateX(100vh) scale(0.1,0.1)'});
+                        //$('#chat').children().last().css({'opacity':'0'});
+                        setTimeout(function(){
+                            $('#chat').children().last().remove();
+                       },1000);
                     }
                 }
     

public/scripts/RossAscends-mods.js

@@ -15,7 +15,8 @@ import {
   api_server,
   api_key_novel,
   getCharacters,
-  is_send_press
+  is_send_press,
+  chat
 } from "../script.js";
 
 var NavToggle = document.getElementById("nav-toggle");
@@ -339,6 +340,37 @@ $("document").ready(function () {
 			(this.scrollHeight) + 'px';
 	});
 
+	//Regenerate if user swipes on the last mesage in chat
+	//TODO: 
+	//1. Make it detect if the last message is from user, and ignore swipes then...
+	//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');
+		if (is_send_press == false){
+		if (SwipeTargetMesClassParent !== null && SwipeTargetMesClassParent.nextSibling == null ){
+				$('#chat').children().last().css({'transition':'all 0.5s ease-in-out'});
+				$('#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');
+		console.log(is_send_press);
+		if (is_send_press === false){
+			if (SwipeTargetMesClassParent !== null && SwipeTargetMesClassParent.nextSibling == null){
+				$('#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);
+			}
+		}	
+	});
+
 	//Additional hotkeys CTRL+ENTER and CTRL+UPARROW
 	document.addEventListener("keydown", (event) => {
 		if (event.ctrlKey && event.key == "Enter") {

public/scripts/swiped-events.js

@@ -0,0 +1,165 @@
+/*!
+ * swiped-events.js - v@version@
+ * Pure JavaScript swipe events
+ * https://github.com/john-doherty/swiped-events
+ * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+(function (window, document) {
+
+    'use strict';
+
+    // patch CustomEvent to allow constructor creation (IE/Chrome)
+    if (typeof window.CustomEvent !== 'function') {
+
+        window.CustomEvent = function (event, params) {
+
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+
+        window.CustomEvent.prototype = window.Event.prototype;
+    }
+
+    document.addEventListener('touchstart', handleTouchStart, false);
+    document.addEventListener('touchmove', handleTouchMove, false);
+    document.addEventListener('touchend', handleTouchEnd, false);
+
+    var xDown = null;
+    var yDown = null;
+    var xDiff = null;
+    var yDiff = null;
+    var timeDown = null;
+    var startEl = null;
+
+    /**
+     * Fires swiped event if swipe detected on touchend
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchEnd(e) {
+
+        // if the user released on a different target, cancel!
+        if (startEl !== e.target) return;
+
+        var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20 units
+        var swipeUnit = getNearestAttribute(startEl, 'data-swipe-unit', 'px'); // default px
+        var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10);    // default 500ms
+        var timeDiff = Date.now() - timeDown;
+        var eventType = '';
+        var changedTouches = e.changedTouches || e.touches || [];
+
+        if (swipeUnit === 'vh') {
+            swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientHeight); // get percentage of viewport height in pixels
+        }
+        if (swipeUnit === 'vw') {
+            swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientWidth); // get percentage of viewport height in pixels
+        }
+
+        if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
+            if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+                if (xDiff > 0) {
+                    eventType = 'swiped-left';
+                }
+                else {
+                    eventType = 'swiped-right';
+                }
+            }
+        }
+        else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+            if (yDiff > 0) {
+                eventType = 'swiped-up';
+            }
+            else {
+                eventType = 'swiped-down';
+            }
+        }
+
+        if (eventType !== '') {
+
+            var eventData = {
+                dir: eventType.replace(/swiped-/, ''),
+                touchType: (changedTouches[0] || {}).touchType || 'direct',
+                xStart: parseInt(xDown, 10),
+                xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
+                yStart: parseInt(yDown, 10),
+                yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)
+            };
+
+            // fire `swiped` event event on the element that started the swipe
+            startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));
+
+            // fire `swiped-dir` event on the element that started the swipe
+            startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));
+        }
+
+        // reset values
+        xDown = null;
+        yDown = null;
+        timeDown = null;
+    }
+
+    /**
+     * Records current location on touchstart event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchStart(e) {
+
+        // if the element has data-swipe-ignore="true" we stop listening for swipe events
+        if (e.target.getAttribute('data-swipe-ignore') === 'true') return;
+
+        startEl = e.target;
+
+        timeDown = Date.now();
+        xDown = e.touches[0].clientX;
+        yDown = e.touches[0].clientY;
+        xDiff = 0;
+        yDiff = 0;
+    }
+
+    /**
+     * Records location diff in px on touchmove event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchMove(e) {
+
+        if (!xDown || !yDown) return;
+
+        var xUp = e.touches[0].clientX;
+        var yUp = e.touches[0].clientY;
+
+        xDiff = xDown - xUp;
+        yDiff = yDown - yUp;
+    }
+
+    /**
+     * Gets attribute off HTML element or nearest parent
+     * @param {object} el - HTML element to retrieve attribute from
+     * @param {string} attributeName - name of the attribute
+     * @param {any} defaultValue - default value to return if no match found
+     * @returns {any} attribute value or defaultValue
+     */
+    function getNearestAttribute(el, attributeName, defaultValue) {
+
+        // walk up the dom tree looking for attributeName
+        while (el && el !== document.documentElement) {
+
+            var attributeValue = el.getAttribute(attributeName);
+
+            if (attributeValue) {
+                return attributeValue;
+            }
+
+            el = el.parentNode;
+        }
+
+        return defaultValue;
+    }
+
+}(window, document));

public/settings.json

@@ -1 +1 @@
-{"username":"You","api_server":"http://localhost:5000/api","api_server_textgenerationwebui":"http://127.0.0.1:7860","preset_settings":"gui","preset_settings_novel":"Classic-Euterpe","user_avatar":"legat.png","temp":0.43,"amount_gen":90,"max_context":2048,"anchor_order":0,"style_anchor":false,"character_anchor":true,"auto_connect":false,"auto_load_chat":false,"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://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}}

public/style.css

@@ -32,8 +32,11 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -moz-appearance: initial;
+    scrolling-behaviour: smooth;
 }
 
+html { scroll-behaviour: smooth;}
+
 body {
     margin: 0;
     padding: 0;
@@ -45,18 +48,11 @@ body {
     background-size: cover;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     font-size: 15px;
-    /*1rem*/
     color: var(--ivory);
 
 }
 
-@media screen and (max-width: 450px) {
+
-    body {
-        margin-left: auto;
-        margin-right: auto;
-        overflow-x: hidden;
-    }
-}
 
 ::-webkit-scrollbar {
     width: 0.6em;
@@ -191,6 +187,7 @@ code {
     -webkit-backdrop-filter: blur(20px);
     text-shadow: #000 0 0 3px;
     scrollbar-width: thin;
+    transition: all 1s ease-in-out;
 
 }
 
@@ -811,7 +808,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-top: 0;
     margin-left: 2px;
     cursor: pointer;
-    position: absolute;
+    position: fixed;
     z-index: 2050;
     -webkit-user-select: none;
     -webkit-touch-callout: none;
@@ -1055,7 +1052,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-top: 36vh;
     box-shadow: 0 0 5px 5px var(--fullred);
     padding: 4px;
-    background-color: var(--black30a);
+    background-color: var(--black70a);
     border-radius: 10px;
 }
 
@@ -1788,6 +1785,7 @@ input[type="range"] {
 
 #character_popup {
     display: none;
+    position:fixed;
     background-color: var(--black30a);
     backdrop-filter: blur(50px);
     -webkit-backdrop-filter: blur(30px);
@@ -1796,7 +1794,7 @@ input[type="range"] {
     max-width: 800px;
     height: calc(100vh - 50px);
     position: absolute;
-    z-index: 2065;
+    z-index: 3002;
     margin-left: auto;
     margin-right: auto;
     left: 0;
@@ -2429,14 +2427,11 @@ a {
 }
 
 @media screen and (max-width: 450px) {
-    #right-nav-panel {
+
-        width: 100%;
-        box-shadow: none;
-    }
 }
 
 #nav-toggle {
-    position: absolute;
+    position: fixed;
     right: 13px;
     top: 12px;
     padding: 0;
@@ -2496,8 +2491,70 @@ 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);
+        margin-left: 5px;
+        margin-right: 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;
+    }
+
+    #right-nav-panel, #character_popup {        /* character_popup display needs work, "width:100%" items push outside the box */
+        width: 100%;
+        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.*/
+    * { 
+
+    }
+
 }

readme.md

@@ -9,7 +9,7 @@
    * World Info
    * OobaBooga's TextGen WebUI API connection
    * Soft prompts
-   * installing SillyLossy's TAI-extras will give support for
+   * installing [SillyLossy's TAI-extras](https://github.com/SillyLossy/TavernAI-extras) will give support for
      * Character emotional expressions
      * Auto-Summary of the chat history
      * sending images to chat, and the AI interpreting the content.
@@ -70,6 +70,7 @@ Save the file.
 Restart your TAI server. 
 
 You will now be able to connect from other devices. 
+
 ***Disclaimer: Anyone else who knows your IP address and TAI port number will be able to as well***
 
 To connect over wifi you'll need your PC's local wifi IP address