Improve context viewer

static/koboldai.css

@@ -809,6 +809,7 @@ td.server_vars {
 	padding-right: 35px;
 	margin-bottom: 10px;
 	flex-shrink: 0;
+	cursor: pointer;
 }
 
 .token_breakdown div {
@@ -1597,6 +1598,16 @@ body {
 	margin-bottom: 3px;
 }
 
+#context-viewer-header-right {
+	display: flex;
+	flex-direction: row;
+}
+
+#context-viewer-close {
+	cursor: pointer;
+	float: right;
+}
+
 #context-viewer-header > h3 {
 	margin: 0px;
 	margin-top: 3px;
@@ -1606,13 +1617,28 @@ body {
 	overflow-y: auto;
 	height: 100%;
 	flex-grow: 1;
-	padding: 0px 10px
+	padding: 0px 10px;
+}
+
+.context-symbol {
+	font-size: 1em !important;
+	position: relative;
+	top: 3px;
+	opacity: 0.5;
 }
 
 .context-block {
 	margin: 0px 2px;
 }
 
+.context-block:hover {
+	outline: 1px solid gray;
+}
+
+.context-block.example:hover {
+	outline: none !important;
+}
+
 .context-sp {background-color: orangered;}
 .context-prompt {background-color: orange;}
 .context-wi {background-color: #1751b9;}
@@ -1783,7 +1809,11 @@ h2 .material-icons-outlined {
 	cursor: pointer;
 }
 
-.material-icons-outlined, .collapsable_header, .section_header, .help_text {
+.material-icons-outlined,
+.collapsable_header,
+.section_header,
+.help_text,
+.noselect {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-khtml-user-select: none;

static/koboldai.js

@@ -2065,6 +2065,8 @@ function update_context(data) {
 		el.classList.add(contextClass);
 		el.innerText = entry.text;
 
+		el.innerHTML = el.innerHTML.replaceAll("<br>", '<span class="material-icons-outlined context-symbol">keyboard_return</span>');
+
 		document.getElementById("context-container").appendChild(el);
 	}
 
@@ -2905,4 +2907,12 @@ $(document).ready(function(){
 
 		if (enabledTweaks.includes(path)) toggle.click();
 	}
+
+	$("#context-viewer-close").click(function() {
+		document.getElementById("context-viewer-container").classList.add("hidden");
+	});
+
+	$(".token_breakdown").click(function() {
+		document.getElementById("context-viewer-container").classList.remove("hidden");
+	});
 });

templates/index_new.html

@@ -113,22 +113,29 @@
 	</div>
 	<iframe id="download_iframe" style="display:none;"></iframe>
 
-	<div id="context-viewer-container">
+	<div id="context-viewer-container" class="hidden">
 		<div id="context-viewer">
 			<div id="context-viewer-header">
-				<h3>Context Viewer</h3>
+				<h3 class="noselect">Context Viewer</h3>
-				<div id="context-viewer-key">
+				<div id="context-viewer-header-right">
-					<span>Key:</span>
 					<div>
-						<span class="example context-block context-sp">Soft Prompt</span>
+						<span class="noselect">Key:</span>
-						<span class="example context-block context-prompt">Prompt</span>
+						<div>
-						<span class="example context-block context-wi">World Info</span>
+							<span class="noselect example context-block context-sp">Soft Prompt</span>
-						<span class="example context-block context-memory">Memory</span>
+							<span class="noselect example context-block context-prompt">Prompt</span>
-						<span class="example context-block context-an">Author's Note</span>
+							<span class="noselect example context-block context-wi">World Info</span>
-						<span class="example context-block context-action">Action</span>
+							<span class="noselect example context-block context-memory">Memory</span>
+							<span class="noselect example context-block context-an">Author's Note</span>
+							<span class="noselect example context-block context-action">Action</span>
 						</div>
 					</div>
+					<span id="context-viewer-close" class="material-icons-outlined">close</span>
 				</div>
+			</div>
+			<span class="help_text">
+				Context is the text the AI is sent when you ask it to generate text.
+				As the context is limited in size, you can use the Context Viewer to check if things you want the AI to know are in the context.
+			</span>
 			<div id="context-container"></div>
 		</div>
 	</div>