From 1b02ee7e7aa47023c5d9243d40d8ef9182839de9 Mon Sep 17 00:00:00 2001
From: Concedo <39025047+LostRuins@users.noreply.github.com>
Date: Sat, 13 Sep 2025 11:42:04 +0800
Subject: [PATCH] updated lite

---
 klite.embd | 209 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 139 insertions(+), 70 deletions(-)

diff --git a/klite.embd b/klite.embd
index 3111b98b3..2c666fb9d 100644
--- a/klite.embd
+++ b/klite.embd
@@ -12,7 +12,7 @@ Current version indicated by LITEVER below.
 -->
 
 <script id="init-config">
-	const LITEVER = 282;
+	const LITEVER = 283;
 	const urlParams = new URLSearchParams(window.location.search);
 	var localflag = urlParams.get('local'); //this will be replaced automatically in embedded kcpp
 	const STORAGE_PREFIX = (localflag?"e_":"")+"kaihordewebui_";
@@ -238,8 +238,8 @@ Current version indicated by LITEVER below.
 
 	/* Responsive containers */
 	.maincontainer {
-		padding-right: 4px;
-		padding-left: 4px;
+		padding-right: 0px;
+		padding-left: 0px;
 		margin-right: auto;
 		margin-left: auto;
 	}
@@ -265,61 +265,51 @@ Current version indicated by LITEVER below.
 		width: 1770px;
 	}}
 	.centeredcontainer {
-		width: calc(100% - 642px)!important;
+		width: calc(100% - 620px)!important;
+	}
+	.centeredcontainer.retractleft {
+		width: calc(100% - 320px)!important;
+		transform: translateX(-150px);
+	}
+	.centeredcontainer.retractright {
+		width: calc(100% - 320px)!important;
+		transform: translateX(150px);
+	}
+	.centeredcontainer.retractleft.retractright {
+		width: calc(100% - 20px)!important;
+		transform: translateX(0px);
 	}
 	@media (max-width: 960px) {
 		.centeredcontainer {
 			width: 35%!important;
 		}
+		.centeredcontainer.retractleft {
+			width: 67%!important;
+			transform: translateX(-16vw);
+		}
+		.centeredcontainer.retractright {
+			width: 67%!important;
+			transform: translateX(16vw);
+		}
+		.centeredcontainer.retractleft.retractright {
+			width: calc(100% - 20px)!important;
+			transform: translateX(0px);
+		}
 	}
 
 
 	/* Viewports */
-	.normal_viewport_height
+	#maineditbody
 	{
-		height: calc(100vh - 240px);
+		display:flex;
+		overflow-y: auto;
 	}
-	@media (max-width: 432px) {
-		.normal_viewport_height
-		{
-			height: calc(100vh - 260px);
-		}
-	}
-	@media (max-width: 274px) {
-		.normal_viewport_height
-		{
-			height: calc(100vh - 280px);
-		}
-	}
-	@media print {
-		#inputrow, #actionmenu, #actionmenu2,.topmenu,.lastreq,.corpolastreq,.cht_inp_hold_outer
-		{
-			display: none;
-		}
-		#gamescreen, .chat_msg_history
-		{
-			display: inline;
-			height: auto;
-			overflow-y: hidden;
-		}
-	}
-	.aesthetic_viewport_height
+	.viewport_height
 	{
-		height: calc(100vh - 160px);
-	}
-	.aesthetic_viewport_height.withmenu
-	{
-		height: calc(100vh - 206px);
-	}
-	.aesthetic_viewport_height.withtyping
-	{
-		height: calc(100vh - 210px);
-	}
-	.aesthetic_viewport_height.withmenu.withtyping
-	{
-		height: calc(100vh - 256px);
+		flex-grow: 1;
 	}
 
+
 	/* Top nav menu */
 	#connectstatusdiv {
 		text-align: center;
@@ -370,7 +360,7 @@ Current version indicated by LITEVER below.
 	.navtoggler {
 		background-color: var(--theme_color_topbtn);
 		border: 0px solid #bababa;
-		height: 44px;
+		height: 50px;
 		width: 56px;
 		border-radius: 6px;
 	}
@@ -744,6 +734,7 @@ Current version indicated by LITEVER below.
 	{
 		font-size:9pt;
 		padding-top: 4px;
+		margin-bottom: 6px;
 		text-shadow: 1px 1px 1px #000000;
 	}
 	.unstarted_block
@@ -757,6 +748,8 @@ Current version indicated by LITEVER below.
 	/* Horizontal action bar */
 	.actbtn{
 		border-radius: 6px;
+		margin-bottom: 1px;
+		margin-top: 1px;
 	}
 	.actbtnbtm{
 		border-radius: 8px;
@@ -915,15 +908,39 @@ Current version indicated by LITEVER below.
 		width: 330px;
 	}
 	.nspopup.sidepanelsize {
-		width: 320px!important;
+		width: 300px!important;
 		margin-top: 0px!important;
 	}
+	.nspopup.sidepanelsize.retractleft
+	{
+		display: none;
+	}
+	.nspopup.sidepanelsize.retractright
+	{
+		display: none;
+	}
 	@media (max-width: 960px) {
 		.nspopup.sidepanelsize {
 			width: 32vw!important;
 			margin-top: 0px!important;
 		}
 	}
+
+	.panel-handle {
+		position:absolute;
+		top:50%;
+		transform:translateY(-50%);
+		width:12px;
+		height:100px;
+		background-color:var(--theme_color_main);
+		border:1px solid var(--theme_color_border);
+		border-radius:4px;
+		cursor:pointer;
+		opacity:.85;
+	}
+	.panel-handle:hover { background-color: var(--theme_color_highlight);}
+    .panel-handle.left { left:-16px; } .panel-handle.right { right:-16px; }
+
 	.nspopup.flexsize {
 		width: 600px;
 	}
@@ -1518,7 +1535,7 @@ Current version indicated by LITEVER below.
 	}
 	.translucentbg
 	{
-		background-color: #00000066;
+		background-color: #00000080;
 	}
 	.transparentbg
 	{
@@ -1553,7 +1570,7 @@ Current version indicated by LITEVER below.
 		background: var(--theme_color_bg_dark);
 	}
 	.chat_mesgs_inner{
-		padding: 12px 20px 12px 20px;
+		padding: 2px 12px 2px 12px;
 	}
 	.chat_sent_msg p {
 		font-size: 14px;
@@ -1792,6 +1809,17 @@ Current version indicated by LITEVER below.
 		}
 	}
 
+	.pagebox
+	{
+		height: calc(100vh - 62px);
+		display: flex;
+		flex-direction: column;
+	}
+	.pagebox.fullscroll
+	{
+		height: 100%;
+	}
+
 	/* Aesthetic UI */
 	.ui-settings-inline { font-size: 12px; display:flex; flex-direction: row; }
 	.instruct-settings-input { margin: 0px 2px; font-size:10px; }
@@ -1993,7 +2021,7 @@ Current version indicated by LITEVER below.
 		padding-left: 8px;
 		padding-right: 8px;
 		transition: transform 0.3s ease;
-		height: calc(100vh - 68px);
+		height: calc(100vh - 62px);
 		z-index: 1;
 	}
 	body.darkmode .corpoleftpanel
@@ -2098,7 +2126,7 @@ Current version indicated by LITEVER below.
 	.corporightpanel
 	{
 		width: 100%;
-		height: calc(100vh - 68px);
+		height: calc(100vh - 62px);
 		display: flex;
 		flex-direction: column;
 		padding-left: 2px;
@@ -2271,6 +2299,28 @@ Current version indicated by LITEVER below.
 		}
 	}
 
+	/* Printer friendly view */
+	@media print {
+		#inputrow, #actionmenu, #actionmenu2,.topmenu,.lastreq,.corpolastreq,.cht_inp_hold_outer,.corpo_chat_outer,.corpo_leftpanel_open
+		{
+			display: none;
+		}
+		#gamescreen, .chat_msg_history, #maineditbody
+		{
+			display: inline;
+			height: auto;
+			overflow-y: visible;
+		}
+		.corpostylemain
+		{
+			overflow-y: visible;
+		}
+		.corpostyle
+		{
+			display: inline;
+		}
+	}
+
 	/* Colors */
 	.hlchunk
 	{
@@ -4309,7 +4359,12 @@ Current version indicated by LITEVER below.
 	document.getElementById("lastreq1").innerHTML =
 	document.getElementById("lastreq2").innerHTML =
 	document.getElementById("lastreq3").innerHTML =
-	`<a href="#" class="color_grayurl mainnav" title="KoboldAI Lite Information" onclick="msgbox('Source code is available at https://github.com/LostRuins/lite.koboldai.net \\nPlease report any bugs you find there.','Information')">KoboldAI Lite</a> v${LITEVER} Web - Frontend for <a href="#" class="color_grayurl mainnav" title="KoboldAI Lite Disclaimer" onclick="msgbox('KoboldAI Lite allows you to connect to various third-party AI services. We do not control or assume responsibility for the models or content generated by these services. The user is responsible for ensuring that their usage of this software is legal in their country, and complies with the terms of service of the service they are connected to. Use at your own discretion.','Disclaimer')">External API Services</a>. For local use, check out <a class="color_grayurl mainnav" title="KoboldCpp Github" href="https://github.com/LostRuins/koboldcpp">KoboldCpp</a>. For help, visit our <a class="color_grayurl mainnav" title="KoboldAI Discord" href="https://koboldai.org/discord">Discord</a>.`;
+	`<a href="#" class="color_grayurl mainnav" title="KoboldAI Lite Information"
+    onclick="msgbox('Source code is available at <a class=&quot;color_blueurl&quot; href=&quot;https://github.com/LostRuins/lite.koboldai.net&quot;>https://github.com/LostRuins/lite.koboldai.net</a><br>Please report any bugs you find there.<br><br>For local use, check out <a class=&quot;color_blueurl&quot; title=&quot;KoboldCpp Github&quot; href=&quot;https://github.com/LostRuins/koboldcpp&quot;>KoboldCpp</a>. For help, visit our <a class=&quot;color_blueurl&quot; title=&quot;KoboldAI Discord&quot; href=&quot;https://koboldai.org/discord&quot;>Discord</a>.','Information',true)">
+    KoboldAI Lite</a> v${LITEVER} Web - Frontend for
+    <a href="#" class="color_grayurl mainnav" title="KoboldAI Lite Disclaimer"
+    onclick="msgbox('KoboldAI Lite allows you to connect to various third-party AI services. We do not control or assume responsibility for the models or content generated by these services. The user is responsible for ensuring that their usage of this software is legal in their country, and complies with the terms of service of the service they are connected to. Use at your own discretion. ','Disclaimer', true)">
+    External LLM APIs</a>.`;
 
 	trigger_abort_controller(); //first trigger sets it up
 
@@ -13481,6 +13536,8 @@ Current version indicated by LITEVER below.
 			{
 				btn_memory();
 			}
+			document.getElementById("memory_panel_handle").classList.remove("hidden");
+			document.getElementById("settings_panel_handle").classList.remove("hidden");
 		}
 		else
 		{
@@ -13497,9 +13554,23 @@ Current version indicated by LITEVER below.
 			document.getElementById("memorycontainerfooter2").classList.add("hidden");
 			document.getElementById("settingscontainer").classList.add("hidden");
 			document.getElementById("memorycontainer").classList.add("hidden");
+			document.getElementById("memory_panel_handle").classList.add("hidden");
+			document.getElementById("settings_panel_handle").classList.add("hidden");
 		}
 	}
 
+	function toggle_sidepanel_left()
+	{
+		document.getElementById("settingscontainerfg").classList.toggle("retractleft");
+		document.getElementById("maincontainer").classList.toggle("retractleft");
+	}
+
+	function toggle_sidepanel_right()
+	{
+		document.getElementById("memorycontainerfg").classList.toggle("retractright");
+		document.getElementById("maincontainer").classList.toggle("retractright");
+	}
+
 	function toggle_theme_colors()
 	{
 		if(localsettings.invert_colors)
@@ -20991,7 +21062,7 @@ Current version indicated by LITEVER below.
 					whorun = "<br>You're using the Cohere API";
 				}
 				else {
-					whorun = `<br>Horde <a class="color_green mainnav" href="#" tabindex="${mainmenu_is_untab?`-1`:`0`}" onclick="get_and_show_workers()">Volunteer(s)</a> are running <span class="color_orange">${selected_models.reduce((s, a) => s + a.count, 0)} threads</span> for selected models with a total queue length of <span class="color_orange">${selected_models.reduce((s, a) => s + a.queued, 0)}</span> tokens`;
+					whorun = `<br>Horde <a class="color_blueurl mainnav" href="#" tabindex="${mainmenu_is_untab?`-1`:`0`}" onclick="get_and_show_workers()">Volunteer(s)</a> are running <span class="color_orange">${selected_models.reduce((s, a) => s + a.count, 0)} threads</span> for selected models with a total queue length of <span class="color_orange">${selected_models.reduce((s, a) => s + a.queued, 0)}</span> tokens`;
 				}
 				let nowmode = (localsettings.opmode==1?"Story Mode":(localsettings.opmode==2?"Adventure Mode":(localsettings.opmode==3?"Chat Mode":"Instruct Mode")));
 				let selmodelstr = "";
@@ -21005,9 +21076,9 @@ Current version indicated by LITEVER below.
 				}
 
 				document.getElementById("gametext").innerHTML = `Welcome to <span class="color_kobotext">KoboldAI Lite</span>!`+
-				`<br>You are using the models <span class="color_green">${selmodelstr}</span>${(selected_workers.length == 0 ? `` : ` (Pinned to ${selected_workers.length} worker IDs)`)}.`+
+				`<br>You are using the models <span class="color_lightgreen">${selmodelstr}</span>${(selected_workers.length == 0 ? `` : ` (Pinned to ${selected_workers.length} worker IDs)`)}.`+
 				`${whorun}.`+
-				(multiplayer_active?(!multiplayer_pinged?`<br><br><span class="color_orange">[ Trying to join Multiplayer... ]</span>`:`<br><br><span class="color_green">[ Multiplayer is <b>Active</b>! This session is shared with other server participants.]<br>[ You can leave via exit button in top right corner. ]</span>`):(is_using_kcpp_with_multiplayer()?`<br><br>[ <a href="#" tabindex="${mainmenu_is_untab?`-1`:`0`}" class="color_blueurl mainnav" onclick="join_multiplayer()"><span class="color_green">Multiplayer Available</span> - Click Here To Join</a> ]`:``))+
+				(multiplayer_active?(!multiplayer_pinged?`<br><br><span class="color_orange">[ Trying to join Multiplayer... ]</span>`:`<br><br><span class="color_green">[ Multiplayer is <b>Active</b>! This session is shared with other server participants.]<br>[ You can leave via exit button in top right corner. ]</span>`):(is_using_kcpp_with_multiplayer()?`<br><br>[ <a href="#" tabindex="${mainmenu_is_untab?`-1`:`0`}" class="color_blueurl mainnav" onclick="join_multiplayer()"><span class="color_lightgreen">Multiplayer Available</span> - Click Here To Join</a> ]`:``))+
 				`<br><br><span class="color_orange bolded">${nowmode} Selected</span> - Enter a prompt below to begin!`+
 				`<br>Or, <a href="#" tabindex="${mainmenu_is_untab?`-1`:`0`}" class="color_blueurl mainnav" onclick="document.getElementById('loadfileinput').click()">load a <b>JSON File</b> or a <b>Character Card</b> here.</a>`+
 				`<br>Or, <a href="#" tabindex="${mainmenu_is_untab?`-1`:`0`}" class="color_blueurl mainnav" onclick="display_scenarios()">select a <b>Quick Start Scenario</b> here.</a>`+
@@ -21332,7 +21403,7 @@ Current version indicated by LITEVER below.
 			document.getElementById("fvico").href = favivon_normal;
 		}
 		else if (selected_models.length == 0 && selected_workers.length == 0) {
-			let perfinfo = `There are <span class="color_orange">${perfdata.worker_count}</span> total <a class="color_green mainnav" tabindex="${mainmenu_is_untab?`-1`:`0`}" href="#" onclick="get_and_show_workers()">volunteer(s)</a> in the AI Horde, and <span class="color_orange">${perfdata.queued_requests}</span> request(s) in queues.<br>A total of <span class="color_orange">${perfdata.past_minute_tokens}</span> tokens were generated in the last minute.<br><br>`;
+			let perfinfo = `There are <span class="color_orange">${perfdata.worker_count}</span> total <a class="color_blueurl mainnav" tabindex="${mainmenu_is_untab?`-1`:`0`}" href="#" onclick="get_and_show_workers()">volunteer(s)</a> in the AI Horde, and <span class="color_orange">${perfdata.queued_requests}</span> request(s) in queues.<br>A total of <span class="color_orange">${perfdata.past_minute_tokens}</span> tokens were generated in the last minute.<br><br>`;
 			document.getElementById("gametext").innerHTML = `Welcome to <span class="color_kobotext">KoboldAI Lite</span>!<br><br>${perfinfo}<a href="#" class="color_blueurl" onclick="display_endpoint_container()">Please select an AI service to use!</a><br>`;
 			document.getElementById("fvico").href = favivon_normal;
 		}
@@ -21421,13 +21492,11 @@ Current version indicated by LITEVER below.
 			// Show the 'AI is typing' message if an answer is pending, and prevent the 'send button' from being clicked again.
 			if (pending_response_id=="") {
 				document.getElementById("chatistyping").classList.add("hidden");
-				document.getElementById("chat_msg_body").classList.remove("withtyping");
 			}
 			else {
 				let aiName = ((localsettings.opmode==3 && pending_context_preinjection && pending_context_preinjection.includes(":")) ? pending_context_preinjection.split(":")[0] : "The AI");
 				document.getElementById("chataityping").innerText = aiName + " is typing...";
 				document.getElementById("chatistyping").classList.remove("hidden");
-				document.getElementById("chat_msg_body").classList.add("withtyping");
 			}
 			document.getElementById("corpo_chat_send_btn").disabled = document.getElementById("chat_msg_send_btn").disabled = document.getElementById("btnsend").disabled;
 
@@ -21458,12 +21527,12 @@ Current version indicated by LITEVER below.
 
 		if(localsettings.printer_view)
 		{
-			document.getElementById("gamescreen").classList.remove("normal_viewport_height");
-			document.getElementById("chat_msg_body").classList.remove("aesthetic_viewport_height");
+			document.getElementById("normalinterface").classList.add("fullscroll");
+			document.getElementById("enhancedchatinterface_inner").classList.add("fullscroll");
 		}else
 		{
-			document.getElementById("gamescreen").classList.add("normal_viewport_height");
-			document.getElementById("chat_msg_body").classList.add("aesthetic_viewport_height");
+			document.getElementById("normalinterface").classList.remove("fullscroll");
+			document.getElementById("enhancedchatinterface_inner").classList.remove("fullscroll");
 		}
 
 		let maincon = document.getElementById("maincontainer");
@@ -22454,10 +22523,8 @@ Current version indicated by LITEVER below.
 		let mainbox = document.getElementById("chat_msg_body");
 		if (am2.classList.contains("hidden")) {
 			am2.classList.remove("hidden");
-			mainbox.classList.add("withmenu");
 		} else {
 			am2.classList.add("hidden");
-			mainbox.classList.remove("withmenu");
 		}
 	}
 
@@ -24789,9 +24856,9 @@ Current version indicated by LITEVER below.
 		</div>
 
 
-		<div id="normalinterface">
-		<div id="maineditbody">
-			<div class="gamescreenbgnormal normal_viewport_height" id="gamescreen">
+		<div id="normalinterface" class="pagebox">
+		<div id="maineditbody" class="viewport_height">
+			<div class="gamescreenbgnormal viewport_height" id="gamescreen">
 				<span id="gametext" contenteditable="false" onclick="click_gametext()" onblur="merge_edit_field()">
 					<p id="tempgtloadtxt">Loading...</p>
 					<noscript><style>#tempgtloadtxt { display: none; } #gametext { white-space: normal!important; }</style><p>Sorry, KoboldAI Lite requires Javascript to function.</p></noscript>
@@ -24813,7 +24880,7 @@ Current version indicated by LITEVER below.
 			</div>
 		</div>
 
-		<div class="flex" style="margin-top: 6px;">
+		<div id="actionmenu" class="flex" style="margin-top: 6px;">
 			<div id="actionmenuitems">
 				<button type="button" class="btn actbtn btn-primary mainnav" id="btn_actmem" onclick="btn_memory()">Context</button>
 				<button type="button" class="btn actbtn btn-primary mainnav" id="btn_actundo" onpointerdown="btn_back_longpress_start()" onpointerleave="btn_back_longpress_end()" onpointerup="btn_back_longpress_end()" onclick="btn_back()">Undo</button>
@@ -24855,8 +24922,8 @@ Current version indicated by LITEVER below.
 		</div>
 
 		<div id="enhancedchatinterface" class="chat_mesgs hidden">
-			<div id="enhancedchatinterface_inner" class="chat_mesgs_inner">
-				<div id="chat_msg_body" class="chat_msg_history aesthetic_viewport_height"></div>
+			<div id="enhancedchatinterface_inner" class="chat_mesgs_inner pagebox">
+				<div id="chat_msg_body" class="chat_msg_history viewport_height"></div>
 				<div class="hidden" id="chatistyping" style="text-align:right;font-size:13px;color:#999999; padding-bottom: 3px;"><div style="padding-bottom: 2px;" id="chataityping">The AI is typing...</div><div style="padding-top:2px;text-align:right;" class="dot-flashing flex flex-push-right"></div></div>
 
 				<!-- A greatly simplified action menu for this mode -->
@@ -25140,6 +25207,7 @@ Current version indicated by LITEVER below.
 				<button type="button" class="btn btn-primary" onclick="confirm_memory();save_wi();commit_wi_changes();render_gametext();sync_multiplayer(true);hide_popups()">Apply</button>
 			</div>
 		</div>
+		<div id="memory_panel_handle" class="panel-handle left hidden" title="Toggle Right Panel" onclick="toggle_sidepanel_right()"></div>
 	</div>
 
 	<div class="popupcontainer flex hidden" id="settingscontainer">
@@ -26340,6 +26408,7 @@ Current version indicated by LITEVER below.
 				<button type="button" class="btn btn-primary" onclick="confirm_settings()">Apply</button>
 			</div>
 		</div>
+		<div id="settings_panel_handle" class="panel-handle right hidden" title="Toggle Left Panel" onclick="toggle_sidepanel_left()"></div>
 	</div>
 
 	<div class="popupcontainer flex hidden" id="aestheticsettingscontainer">
@@ -26677,7 +26746,7 @@ Current version indicated by LITEVER below.
 						<span class="helptext">These are the models currently provided by AI Horde volunteers.</span>
 					</span> <a href="#" class="color_blueurl" onclick="reset_horde_selection()">[Reset]</a>
 					<span style="float:right;">
-					<a href="#" class="color_green" onclick="get_and_show_workers()">[See Current Volunteers] </a>
+					<a href="#" class="color_blueurl" onclick="get_and_show_workers()">[See Current Volunteers] </a>
 					</span>
 					<select title="AI Horde Target Selection" class="form-control" id="pickedmodel" size="7" multiple></select>
 				</div>