Cleanup

So much for that 100px hack

aiserver.py

@@ -7481,7 +7481,7 @@ 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):
+def UI_2_search_wi(data):
     query = data["query"].lower()
     full_data = koboldai_vars.worldinfo_v2.to_json()
 
@@ -7502,6 +7502,32 @@ def UI_2_load_softprompt_list(data):
 
     socketio.emit("wi_results", results, broadcast=True, room="UI_2")
 
+@socketio.on("update_wi_attribute")
+def UI_2_update_wi_attribute(data):
+    uid, key, value = data["uid"], data["key"], data["value"]
+    koboldai_vars.worldinfo_v2.world_info[uid][key] = value
+    socketio.emit("world_info_entry", koboldai_vars.worldinfo_v2.world_info[uid], broadcast=True, room="UI_2")
+
+@socketio.on("update_wi_keys")
+def UI_2_update_wi_attribute(data):
+    uid, key, is_secondary, operation = data["uid"], data["key"], data["is_secondary"], data["operation"]
+
+    keykey = "key" if not is_secondary else "keysecondary"
+    key_exists = key in koboldai_vars.worldinfo_v2.world_info[uid][keykey]
+
+    if operation == "add":
+        if not key_exists:
+            koboldai_vars.worldinfo_v2.world_info[uid][keykey].append(key)
+    elif operation == "remove":
+        if key_exists:
+            koboldai_vars.worldinfo_v2.world_info[uid][keykey].remove(key)
+
+    if keykey == "keysecondary":
+        koboldai_vars.worldinfo_v2.world_info[uid]["selective"] = len(koboldai_vars.worldinfo_v2.world_info[uid]["keysecondary"]) > 0
+
+    # Send to UI
+    socketio.emit("world_info_entry", koboldai_vars.worldinfo_v2.world_info[uid], broadcast=True, room="UI_2")
+
 
 #==================================================================#
 # Event triggered when user edits phrase biases

static/koboldai.css

@@ -1932,8 +1932,6 @@ body {
 }
 
 .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;
 
@@ -1945,6 +1943,7 @@ body {
 	background-color: var(--flyout_background_pinned);
 	height: 100%;
 	flex-grow: 1;
+	flex-basis: 50%;
 	overflow-y: hidden;
 	filter: brightness(70%);
 	padding: 0px 7px;
@@ -1970,6 +1969,10 @@ body {
 	height: 30%;
 }
 
+.finder-wi-keys {
+	margin-bottom: 8px;
+}
+
 .finder-wi-added-keys {
 	display: inline-block;
 }
@@ -1984,11 +1987,6 @@ body {
 
 .tag-text { cursor: text; }
 
-[data-placeholder]:empty:before {
-	content: attr(data-placeholder);
-	opacity: 0.6;
-}
-
 .finder-wi-activation-header-container {
 	display: flex;
 	justify-content: space-between;
@@ -2005,20 +2003,29 @@ body {
 	column-gap: 5px;
 }
 
+.finder-wi-blanket {
+	position: absolute;
+	/* Hack */
+	width: 99%;
+	height: 100%;
+	cursor: pointer;
+}
+
 /*---------------------------------- Global ------------------------------------------------*/
 .hidden {
 	display: none;
 }
 
-.block {
-	display: block;
-}
-
 .disabled {
 	opacity: 0.4;
 	pointer-events: none;
 }
 
+[data-placeholder]:empty:before {
+	content: attr(data-placeholder);
+	opacity: 0.6;
+}
+
 #input_text {
 	grid-area: textarea;
 	background-color: var(--input_background);

static/koboldai.js

@@ -44,6 +44,8 @@ var world_info_folder_data = {};
 var saved_settings = {};
 var finder_selection_index = -1;
 var on_colab;
+var wi_finder_data = [];
+var wi_finder_offset = 0;
 
 // name, desc, icon, func
 const finder_actions = [
@@ -3391,30 +3393,74 @@ function $e(tag, parent, attributes) {
 	return element;
 }
 
-function makeFinderWITag(name, container, isPrimary) {
+function makeFinderWITag(name, container, isPrimary, uid) {
 	let wiTag = $e("span", container, {classes: ["tag"]});
 	let wiTagIcon = $e("span", wiTag, {classes: ["finder-wi-tag-icon", "material-icons-outlined"], innerText: "close"});
 	let wiTagText = $e("span", wiTag, {innerText: name, contenteditable: true});
 
 	wiTagIcon.addEventListener("click", function(e) {
-		// TODO: Server
+		socket.emit(
+			"update_wi_keys",
+			{uid: parseInt(uid), key: name, is_secondary: !isPrimary, operation: "remove"}
+		);
 		wiTag.remove();
 	});
 }
 
-function updateWISearchListings(entry) {
+function updateWIInfo(event) {
-	const wiCarousel = document.getElementById("finder-wi-carousel");
+	// Should be a change event or something similar. This WILL send an update
+	// packet on each unfocus in some cases. It's not that big of a deal, right? :p
 
-	let entries = Object.values(entry).flat().slice(0, 3);
+	let key = event.target.getAttribute("wi-sync");
+
+	if ("checked" in event.target) {
+		// checkbox / toggle
+		value = event.target.checked;
+	} else if ("value" in event.target) {
+		// standard inputs
+		value = event.target.value;
+	} else {
+		// contenteditable
+		value = event.target.innerText
+	}
+
+	let uid = $(event.target).closest(".finder-wi-block")[0].getAttribute("wi-uid");
+	socket.emit("update_wi_attribute", {uid: parseInt(uid), key: key, value: value});
+}
+
+function updateWISearchListings(data) {
+	wi_finder_offset = 0;
+	wi_finder_data = Object.values(data).flat();
+	renderWISearchListings();
+}
+
+function renderWISearchListings() {
+	const wiCarousel = document.getElementById("finder-wi-carousel");
+	$(".finder-wi-block").remove();
+
+	let data = Array.from(wi_finder_data);
+
+	// No need for excessive shifting
+	let realOffset = wi_finder_offset % data.length;
+
+	// Make first be central
+	if (data.length > 2) realOffset--;
+
+	// Wrap around
+	if (realOffset < 0) realOffset += data.length;
+
+	// Actual data wrap
+	for (let i=0;i<realOffset;i++) {
+		data.push(data.shift());
+	}
+	let entries = data.slice(0, 3);
 
 	// Visual spacing-- this kinda sucks
 	if (entries.length == 1) entries = [null, entries[0], null];
 	if (entries.length == 2) entries = [null, ...entries];
 
-	console.log(entries);
-
 	for (const [i, entry] of entries.entries()) {
-		let wiBlock = $e("div", wiCarousel, {classes: ["finder-wi-block"]});
+		let wiBlock = $e("div", wiCarousel, {classes: ["finder-wi-block"], "wi-uid": entry ? entry.uid : "null"});
 
 		// Spacer hack
 		if (!entry) {
@@ -3422,50 +3468,99 @@ function updateWISearchListings(entry) {
 			continue;
 		}
 
-		// Focus is the center highlighted one. If there is 3 entries (max),
+		// The "position" relative to others.
-		// the important one is at the center. Otherwise, the important one is
+		let current = "center";
-		// in the front.
+
-		if ((i == 1 && entries.length == 3) || (i == 0 && entries.length < 3)) {
+		if (entries.length == 3) {
+			if (i !== 1) current = (i == 0) ? "left" : "right";
+		} else if (entries.length == 2) {
+			if (i === 1) current = "right";
+		}
+
+		if (current !== "center") {
+			let blanket = $e("div", wiBlock, {classes: ["finder-wi-blanket"]});
+		}
+
+		if (current === "left") {
+			wiBlock.addEventListener("click", function(event) {
+				wi_finder_offset--;
+				renderWISearchListings();
+				event.preventDefault();
+			});
+		} else if (current === "right") {
+			wiBlock.addEventListener("click", function(event) {
+				wi_finder_offset++;
+				renderWISearchListings();
+				event.preventDefault();
+			});
+		} else if (current === "center") {
+			// Focus is the center highlighted one. If there is 3 entries (max),
+			// the important one is at the center. Otherwise, the important one
+			// is in the front.
 			wiBlock.classList.add("finder-wi-focus");
 		}
 
 
-		let wiTitle = $e("span", wiBlock, {classes: ["finder-wi-title"], innerText: entry.title, contenteditable: true, "data-placeholder": "Entry"});
+		let wiTitle = $e("span", wiBlock, {
-		wiTitle.addEventListener("keydown", function(e) {
+			classes: ["finder-wi-title"],
-			if (e.key === "Enter") e.preventDefault();
+			innerText: entry.title,
+			contenteditable: true,
+			"data-placeholder": "Entry",
+			"wi-sync": "title",
 		});
+		wiTitle.addEventListener("keydown", function(e) {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				wiTitle.blur();
+			}
+		});
+		wiTitle.addEventListener("blur", updateWIInfo);
 
 		let wiTextLabel = $e("h3", wiBlock, {innerText: "Info", "style.margin": "10px 0px 5px 0px"});
-		/*
+		let wiContent = $e("textarea", wiBlock, {
-		let wiContentLabel = $e("span", wiBlock, {
+			classes: ["finder-wi-content"],
-			classes: ["block"], innerText: "Text: "
+			value: entry.content,
+			placeholder: "Write your World Info here!",
+			"wi-sync": "content",
 		});
-		*/
+		wiContent.addEventListener("blur", updateWIInfo);
-		let wiContent = $e("textarea", wiBlock, {classes: ["finder-wi-content"], value: entry.content, placeholder: "Write your World Info here!"});
+
-		let wiComment = $e("textarea", wiBlock, {placeholder: "Comment"});
+		let wiComment = $e("textarea", wiBlock, {
+			placeholder: "Comment",
+			value: entry.comment,
+			"wi-sync": "comment",
+		});
+		wiComment.addEventListener("blur", updateWIInfo);
 
 		let wiActivationHeaderContainer = $e("div", wiBlock, {classes: ["finder-wi-activation-header-container"]});
 		let wiActivationLabel = $e("h3", wiActivationHeaderContainer, {innerText: "Activation", "style.display": "inline"});
 		let wiAlwaysContainer = $e("div", wiActivationHeaderContainer, {classes: ["finder-wi-always-container"]});
 		let wiAlwaysLabel = $e("span", wiAlwaysContainer, {innerText: "Always Activate"});
 
-		let wiAlways = $e("input", wiAlwaysContainer, {type: "checkbox", "data-toggle": "toggle", "data-size": "mini", "data-onstyle": "success"});
+		let wiActivationHelp = $e("span", wiBlock, {classes: ["help_text"], innerText: "Change when the AI reads this World Info entry"})
+		let wiTagActivationContainer = $e("div", wiBlock);
+
+		let wiAlways = $e("input", wiAlwaysContainer, {
+			type: "checkbox",
+			"wi-sync": "constant",
+		});
 		$(wiAlways).change(function(e) {
-			console.log("<3!!")
+			updateWIInfo(e);
 			if (this.checked) {
 				wiTagActivationContainer.classList.add("disabled");
 			} else {
 				wiTagActivationContainer.classList.remove("disabled");
 			}
 		});
-		$(wiAlways).bootstrapToggle();
+		$(wiAlways).bootstrapToggle({
-
+			size: "mini",
-		let wiActivationHelp = $e("span", wiBlock, {classes: ["help_text"], innerText: "Change when the AI reads this World Info entry"})
+			onstyle: "success",
-		let wiTagActivationContainer = $e("div", wiBlock);
+		});
+		$(wiAlways).bootstrapToggle(entry.constant ? "on" : "off");
 
 		for (const isPrimary of [true, false]) {
 			let wiTagLabel = $e("span", wiTagActivationContainer, {
-				classes: ["block"],
+				"style.display": "block",
 				innerText: isPrimary ? "Requires one of:" : "And (if present):"
 			});
 
@@ -3477,7 +3572,7 @@ function updateWISearchListings(entry) {
 
 			// Existing keys
 			for (const key of entry.key) {
-				makeFinderWITag(key, wiAddedTagContainer);
+				makeFinderWITag(key, wiAddedTagContainer, isPrimary, entry.uid);
 			}
 
 			// The "fake key" add button
@@ -3486,11 +3581,15 @@ function updateWISearchListings(entry) {
 			let wiNewTagText = $e("span", wiNewTag, {classes: ["tag-text"], contenteditable: true, "data-placeholder": "Key"});
 
 			function newTag() {
-				// TODO: Server
 				let tagName = wiNewTagText.innerText;
 				wiNewTagText.innerText = "";
 				if (!tagName.trim()) return;
-				makeFinderWITag(tagName, wiAddedTagContainer, isPrimary)
+				makeFinderWITag(tagName, wiAddedTagContainer, isPrimary, entry.uid)
+
+				socket.emit(
+					"update_wi_keys",
+					{uid: parseInt(entry.uid), key: tagName, is_secondary: !isPrimary, operation: "add"}
+				);
 			}
 
 			wiNewTagText.addEventListener("blur", newTag);