From aa2dc61ad08525412ced17cc417e4d9f5e15d0d6 Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Wed, 24 Aug 2022 13:50:09 -0400
Subject: [PATCH] Moved token bar

---
 gensettings.py                 | 16 ++++++++++++++
 static/koboldai.css            | 20 +++++++++++++++--
 static/koboldai.js             |  5 +++++
 templates/settings flyout.html |  1 -
 templates/story flyout.html    | 39 +++++++++++++++++-----------------
 templates/templates.html       |  4 ++--
 6 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/gensettings.py b/gensettings.py
index fad930b5..2462c13e 100644
--- a/gensettings.py
+++ b/gensettings.py
@@ -479,6 +479,22 @@ gensettingstf = [
     "classname": "user",
     "name": "singleline"
  	},
+    {
+    "UI_V2_Only": True,
+ 	"uitype": "slider",
+ 	"unit": "int",
+ 	"label": "Insert Depth",
+ 	"id": "singleline",
+ 	"min": 0,
+ 	"max": 5,
+ 	"step": 1,
+ 	"default": 3,
+	"tooltip": "The Author's Note will be entered this many actions back from the end of the game text",
+    "menu_path": "author_notes",
+    "sub_path": "",
+    "classname": "story",
+    "name": "andepth"
+ 	},
 ]
 
 gensettingsik =[{
diff --git a/static/koboldai.css b/static/koboldai.css
index f9677fe3..b6cdbb56 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -165,6 +165,10 @@ input[type="range"]::-ms-fill-upper {
 	width: 100%;
 	background: var(--layer1_palette);
 	grid-row: 2;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-color);
 }
 
 
@@ -613,7 +617,7 @@ input[type="range"]::-ms-fill-upper {
 	overflow-x: hidden;
 	overflow-y: hidden;
 	transition: 0.5s;
-	padding-top: 20px;
+	padding-top: 35px;
 	border-radius: var(--radius_unpinned_menu) 0px 0px var(--radius_unpinned_menu);
 	
 }
@@ -634,7 +638,7 @@ input[type="range"]::-ms-fill-upper {
 
 .rightSideMenu .flyout_menu_contents {
 	overflow-x: hidden;
-	overflow-y: auto;
+	overflow-y: hidden;
 	height: calc(100vh - 70px);
 }
 
@@ -689,6 +693,18 @@ td.server_vars {
 
 .story_category_area:not(#story_menu_wi){
 	margin: 10px 10px 0 10px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-color);
+}
+
+.story_category_area {
+	padding-bottom: 10px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-color);
 }
 
 .token_breakdown {
diff --git a/static/koboldai.js b/static/koboldai.js
index 1cc3ffdf..5c8371bb 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -1789,6 +1789,11 @@ function send_world_info(uid) {
 }
 
 //--------------------------------------------General UI Functions------------------------------------
+function autoResize(element) {
+	element.style.height = 'auto';
+	element.style.height = element.scrollHeight + 'px';
+}
+
 function token_length(text) {
 	return encode(text).length;
 }
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 7ed636d7..095fe2f9 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -69,7 +69,6 @@
 					<span class="material-icons-outlined cursor" title="Import Story" onclick="document.getElementById('import_aidg_club_popup').classList.remove('hidden');">cloud_download</span>
 					<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
 				</div>
-				<input id=testtoken type=text onchange="this.value = token_length(this.value)"/>
 			</div>
 			<hr/>
 		</div>
diff --git a/templates/story flyout.html b/templates/story flyout.html
index 498fe75d..16e0639c 100644
--- a/templates/story flyout.html	
+++ b/templates/story flyout.html	
@@ -17,15 +17,6 @@
 	}
 </script>
 
-<div class="token_breakdown">
-	<div id="memory_tokens" style="width:40%; background-color: #3572A5;"></div>
-	<div id="authors_notes_tokens" style="width:10%; background-color: #f1e05a;"></div>
-	<div id="world_info_tokens" style="width:20%; background-color: #563d7c;"></div>
-	<div id="prompt_tokens" style="width:40%; background-color: #e34c26;"></div>
-	<div id="game_text_tokens" style="width:10%; background-color: #c6538c ;"></div>
-	<div id="submit_tokens" style="width:20%; background-color: #ededed ;"></div>
-	<div id="unused_tokens" style="width:20%; background-color: white;"></div>
-</div>
 <div class="tabrow nomenu_icon">
 	<span class="story_menu_button selected" onclick="show_story_menu(this, 'story_menu_memory');">Memory</span>
 	<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_author');">Author's Note</span>
@@ -39,7 +30,7 @@
 			<span class="help_text">
 				Important information the AI should always keep in mind.
 			</span>
-			<textarea rows=20 id="memory" class="var_sync_story_memory var_sync_alt_story_memory_length fullwidth" onchange='sync_to_server(this);' autocomplete="off"></textarea>
+			<textarea rows=20 id="memory" class="var_sync_story_memory var_sync_alt_story_memory_length fullwidth" onchange='sync_to_server(this);' oninput="autoResize(this)" autocomplete="off"></textarea>
 		</div>
 	</div>
 	<div id="story_menu_author" class="story_category_area hidden">
@@ -52,15 +43,14 @@
 			Template:<br/>
 			<input autocomplete="off" type=text class="var_sync_story_authornotetemplate fullwidth" onchange='sync_to_server(this);'><br/>
 			Author's Notes:<br/>
-			<textarea autocomplete="off" rows=5 id="authors_notes" class="var_sync_story_authornote var_sync_alt_story_authornote_length fullwidth" onchange='sync_to_server(this);'></textarea><br/>
-			Depth<br/>
-			<input type="range" min="0" max="5" step="1" 
-						   value="3" class="setting_item_input var_sync_story_andepth"
-						   onchange='sync_to_server(this);'>
-			<span style='display: grid; grid-template-areas: "minlabel maxlabel"'>
-				<span class=setting_minlabel>0</span>
-				<span class=setting_maxlabel>5</span>
-			</span>
+			<textarea autocomplete="off" rows=5 id="authors_notes" class="var_sync_story_authornote var_sync_alt_story_authornote_length fullwidth" oninput="autoResize(this)" onchange='sync_to_server(this);'></textarea><br/>
+			<div class="setting_tile_area">
+				{% with menu='author_notes' %}
+					{% with sub_path='' %}
+						{% include 'settings item.html' %}
+					{% endwith %}
+				{% endwith %}
+			</div>
 		</div>
 	</div>
 	<div id="story_menu_notes" class="story_category_area hidden">
@@ -69,7 +59,7 @@
 			<span class="help_text">
 				Notes about the story. These notes are not read by the AI!
 			</span>
-			<textarea autocomplete="off" rows=20 class="var_sync_story_notes fullwidth" onchange='sync_to_server(this);'></textarea>
+			<textarea autocomplete="off" rows=20 class="var_sync_story_notes fullwidth" onchange='sync_to_server(this);' oninput="autoResize(this)"></textarea>
 		</div>
 	</div>
 	<div id="story_menu_wi" class="story_category_area hidden">
@@ -100,4 +90,13 @@
 			</span>
 		</div>
 	</div>
+	<div class="token_breakdown">
+		<div id="memory_tokens" style="width:40%; background-color: #3572A5;"></div>
+		<div id="authors_notes_tokens" style="width:10%; background-color: #f1e05a;"></div>
+		<div id="world_info_tokens" style="width:20%; background-color: #563d7c;"></div>
+		<div id="prompt_tokens" style="width:40%; background-color: #e34c26;"></div>
+		<div id="game_text_tokens" style="width:10%; background-color: #c6538c ;"></div>
+		<div id="submit_tokens" style="width:20%; background-color: #ededed ;"></div>
+		<div id="unused_tokens" style="width:20%; background-color: white;"></div>
+	</div>
 </div>
diff --git a/templates/templates.html b/templates/templates.html
index bb71784b..727d26e7 100644
--- a/templates/templates.html
+++ b/templates/templates.html
@@ -35,7 +35,7 @@
 	</div>
 	<div id="world_info_basic_text_">
 		Text:
-		<textarea id="world_info_entry_text_" class="world_info_text fullwidth"></textarea>
+		<textarea id="world_info_entry_text_" class="world_info_text fullwidth" oninput="autoResize(this)"></textarea>
 	</div>
 	<div id="world_info_entry_w++_" class="hidden">
 		<input type=text placeholder="Type"/><input type=text placeholder="Name"/>
@@ -45,7 +45,7 @@
 	</div>
 	<div>
 		Comment:
-		<textarea rows=1 id="world_info_comment_" class="world_info_text fullwidth"></textarea>
+		<textarea rows=1 id="world_info_comment_" class="world_info_text fullwidth" oninput="autoResize(this)"></textarea>
 	</div>
 </div>
 <div id="empty_bias">