Work on wi finder

aiserver.py

@@ -7480,6 +7480,28 @@ def UI_2_import_world_info(data):
                 )
             koboldai_vars.worldinfo_v2.add_item_to_folder(uids[child], folder_name)
 
+@socketio.on("search_wi")
+def UI_2_load_softprompt_list(data):
+    query = data["query"].lower()
+    full_data = koboldai_vars.worldinfo_v2.to_json()
+
+    results = {"title": [], "key": [], "keysecondary": [], "manual_text": []}
+
+    for entry in full_data["entries"].values():
+        # Order matters for what's more important.
+        if query in entry["title"].lower():
+            results["title"].append(entry)
+        elif any([query in k.lower() for k in entry["key"]]):
+            results["key"].append(entry)
+        elif any([query in k.lower() for k in entry["keysecondary"]]):
+            results["keysecondary"].append(entry)
+        elif query in entry["content"].lower():
+            results["manual_text"].append(entry)
+        elif query in entry["manual_text"].lower():
+            results["comment"].append(entry)
+
+    socketio.emit("wi_results", results, broadcast=True, room="UI_2")
+
 
 #==================================================================#
 # Event triggered when user edits phrase biases

static/koboldai.css

@@ -1921,22 +1921,38 @@ body {
 }
 
 #finder-wi-carousel {
-	height: 40%;
-	width: 100vw;
 	position: absolute;
+	height: 35%;
+	width: 100vw;
 	bottom: 0px;
 	right: 0px;
+
+	display: flex;
+	column-gap: 20px;
+}
+
+.finder-wi-focus {
+	/* This MUST be a percentage before pushing. The 100px is a workaround but
+	i've got to find a solution otherwiseit causes visual bugs on shorter screens */
+	margin-top: -100px;
+	height: calc(100% + 100px) !important;
+
+	overflow-y: scroll !important;
+	filter: none !important;
 }
 
 .finder-wi-block {
 	background-color: var(--flyout_background_pinned);
-	width: 33%;
 	height: 100%;
-	overflow-y: scroll;
+	flex-grow: 1;
+	overflow-y: hidden;
+	filter: brightness(70%);
 }
 
-.finder-wi-block > * {
-	display: block;
+.finder-wi-content {
+	width: 100%;
+	height: 30%;
+	border: none;
 }
 
 /*---------------------------------- Global ------------------------------------------------*/

static/koboldai.js

@@ -26,6 +26,7 @@ socket.on("delete_new_world_info_entry", function(data){document.getElementById(
 socket.on("delete_world_info_entry", function(data){document.getElementById("world_info_"+data).remove();});
 socket.on("error", function(data){show_error_message(data);});
 socket.on('load_tweaks', function(data){load_tweaks(data);});
+socket.on("wi_results", updateWISearchListings);
 //socket.onAny(function(event_name, data) {console.log({"event": event_name, "class": data.classname, "data": data});});
 
 var presets = {};
@@ -3327,20 +3328,8 @@ function addSearchListing(action, highlight) {
 	return result;
 }
 
-function updateSearchListings() {
+function updateStandardSearchListings(query) {
 	const maxResultCount = 5;
-
-	if (this.value === finder_last_input) return;
-	finder_last_input = this.value;
-	finder_selection_index = -1;
-
-	let query = this.value.toLowerCase();
-
-	// TODO: Maybe reuse the element? Would it give better performance?
-	$(".finder-result").remove();
-
-	if (!query) return;
-
 	const actionMatches = {name: [], desc: []};
 
 	for (const action of finder_actions) {
@@ -3361,6 +3350,99 @@ function updateSearchListings() {
 	}
 }
 
+function $e(tag, parent, attributes) {
+	// Small helper function for dynamic UI creation
+	// TODO: Support nested attributed with "." syntax.
+
+	let element = document.createElement(tag);
+
+	if ("classes" in attributes) {
+		if (!Array.isArray(attributes.classes)) throw Error("Classes was not array!");
+		for (const className of attributes.classes) {
+			element.classList.add(className);
+		}
+		delete attributes.classes;
+	}
+
+
+	for (const [attribute, value] of Object.entries(attributes)) {
+		if (attribute.includes(".")) {
+			console.warn("TODO: Dot syntax");
+			throw Error("No dot syntax");
+		}
+
+		if (attribute in element) {
+			element[attribute] = value;
+		} else {
+			element.setAttribute(attribute, value);
+		}
+	}
+
+	parent.appendChild(element);
+	return element;
+}
+
+function updateWISearchListings(entry) {
+	const wiCarousel = document.getElementById("finder-wi-carousel");
+
+	let entries = Object.values(entry).flat().slice(0, 3);
+
+	// Visual spacing-- this kinda sucks
+	if (entries.length == 1) entries = [null, entries[0], null];
+	if (entries.length == 2) entries = [null, ...entries];
+
+	for (const [i, entry] of entries.entries()) {
+		let wiBlock = $e("div", wiCarousel, {classes: ["finder-wi-block"]});
+
+		// Spacer hack
+		if (!entry) {
+			wiBlock.style.visibility = "hidden";
+			continue;
+		}
+
+		if ((i == 1 && entries.length == 3) || (i == 0 && entries.length < 3)) {
+			wiBlock.classList.add("finder-wi-focus");
+		}
+
+		let wiTitle = $e("h2", wiBlock, {classes: ["finder-wi-title"], innerText: entry.title});
+		let wiAlwaysLabel = $e("span", wiBlock, {innerText: "Always Activate"});
+
+		let wiAlways = $e("input", wiBlock, {type: "checkbox", "data-toggle": "toggle", "data-size": "mini"});
+		$(wiAlways).bootstrapToggle();
+
+		// Tags
+		//let wiTagContainer = document.createElement("")
+
+		let wiContent = $e("textarea", wiBlock, {classes: ["finder-wi-content"], value: entry.content});
+	}
+}
+
+function updateSearchListings() {
+	if (this.value === finder_last_input) return;
+	finder_last_input = this.value;
+	finder_selection_index = -1;
+
+	const wiCarousel = document.getElementById("finder-wi-carousel");
+	wiCarousel.classList.add("hidden");
+
+	let query = this.value.toLowerCase();
+
+	// TODO: Maybe reuse the element? Would it give better performance?
+	$(".finder-result").remove();
+
+	if (!query || query === ">") return;
+
+	if (query.startsWith(">")) {
+		wiCarousel.classList.remove("hidden");
+		$(".finder-wi-block").remove();
+
+		let wiQuery = query.replace(">", "");
+		socket.emit("search_wi", {query: wiQuery});
+	} else {
+		updateStandardSearchListings(query)
+	}
+}
+
 function updateFinderSelection() {
 	let former = document.getElementsByClassName("result-selected")[0];
 	if (former) former.classList.remove("result-selected");

templates/popups.html

@@ -143,18 +143,5 @@
 		<input id="finder-input" placeholder="Search for something..."></input>
 	</div>
 
-	<div id="finder-wi-carousel">
-		<div class="finder-wi-block">
-			<h2>It's World Info</h2>
-			<span class="help_text">This design provides a lot of horizontal space for explaining features!</span>
-			<textarea style="width: 100%;">Not to mention a lot of space to type your entries. Like a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooot of space.</textarea>
-			<span>Perhaps most imporantly, there is space to add new features.</span>
-			<input type="color">
-			<input type="radio">
-			<input type="radio">
-			<input type="radio">
-			<input type="file">
-			??? Who knows what will be here!
-		</div>
-	</div>
+	<div id="finder-wi-carousel" class="hidden"></div>
 </div>