feat: Addition of metadata display to character manager

Author: prima

klite.embd

@@ -37504,14 +37504,81 @@ flowchart TD\n${treeToViewOutput.outputText.trim()}`
 		}
 		else
 		{
+			let createDetailsContent = (name) => {
+				let contents = document.createElement("div");
+				contents.style.color = "white";
+				contents.style.padding = "5px";
+				let titleElem = document.createElement("span");
+				titleElem.classList.add("popuptitletext");
+				titleElem.innerText = name;
+				titleElem.style.borderBottom = "solid";
+				contents.appendChild(titleElem);
+				return contents;
+			}
+			let createSection = (containerElem, section, text) => {
+				if (!!text && text.length > 0)
+				{
+					let sectionContainer = document.createElement("span");
+					sectionContainer.style = "width: 100%; display: flex; padding: 10px;";
+					let sectionTitle = document.createElement("span"), sectionElem;
+					sectionTitle.innerText = section;
+					sectionTitle.style = "padding-right: 5px; font-weight: bold;"
+					sectionContainer.appendChild(sectionTitle);
+					if (Array.isArray(text))
+					{
+						sectionElem = document.createElement("ul");
+						text.forEach(listContent => {
+							let listElem = document.createElement("li");
+							let summaryOfKey = listContent.length > 100 ? `${listContent.substr(0, 50).trim()}...${listContent.substr(-50).trim()}` : listContent.trim();
+							listElem.innerText = summaryOfKey
+							sectionElem.appendChild(listElem)
+						})
+					}
+					else
+					{
+						sectionElem = document.createElement("span");
+						sectionElem.innerText = text.trim();
+					}
+					sectionContainer.appendChild(sectionElem);
+					containerElem.appendChild(sectionContainer);
+				}
+			}
+			let lorebookEntryToString = (entry) => {
+				return `Primary: ${[...entry?.keys].join(", ")}\nSecondary: ${[...entry?.secondary_keys].join(",")}`;
+			}
+			let wiEntryToString = (entry) => {
+				return `Primary: ${entry?.key}\nSecondary: ${entry?.keysecondary}`;
+			}
 			for (let i = 0; i < allCharacterNames.length; i++)
 			{
 				let {name, thumbnail} = allCharacterNames[i], type = getTypeFromAllCharacterData(allCharacterNames[i]);
 				let charIcon = createIcon(name, !!thumbnail ? `url(${thumbnail})` : undefined)
-				charIcon.onclick = () => {
+				charIcon.onclick = async () => {
 					if (type === "Character")
 					{
-						popupUtils.reset().title("Character Options").button("Load character", async () => {
+						let data = await getCharacterData(name), {image} = data;
+						let {description, first_mes, alternate_greetings, character_book, tags, creator, creator_notes, personality } = (data)?.data;
+						let contents = createDetailsContent(name);
+						if (!!image)
+						{
+							let imageContainer = document.createElement("span"), imageElem = document.createElement("img");
+							imageElem.src = image;
+							imageElem.style = "height: 30%; width: 30%; border-radius: 10px;"
+							imageContainer.style = "width: 100%; display: flex; justify-content: space-around; padding: 10px;";
+							imageContainer.appendChild(imageElem);
+							contents.appendChild(imageContainer);
+						}
+						createSection(contents, "Creator", creator);
+						createSection(contents, "Tags", tags);
+						createSection(contents, "Creators notes", creator_notes);
+						createSection(contents, "Memory", description);
+						createSection(contents, "Alternative greetings", [first_mes, ...alternate_greetings]);
+						createSection(contents, "Personality", personality);
+						createSection(contents, "World info", character_book?.entries?.map(entry => {
+							return lorebookEntryToString(entry);
+						}));
+
+						popupUtils.reset().title("Character Options").content(contents).button("Load character", async () => {
 							popupUtils.reset()
 							let charData = await getCharacterData(name)
 							load_tavern_obj(charData.data);
@@ -37529,7 +37596,12 @@ flowchart TD\n${treeToViewOutput.outputText.trim()}`
 					}
 					else if (type === "World Info")
 					{
-						popupUtils.reset().title("World Info Options").button("Add to WI", async () => {
+						let data = await getCharacterData(name);
+						let contents = createDetailsContent(name);
+						createSection(contents, "World info", data?.data?.map(entry => {
+							return wiEntryToString(entry);
+						}));
+						popupUtils.reset().title("World Info Options").content(contents).button("Add to WI", async () => {
 							popupUtils.reset()
 							let charData = await getCharacterData(name)
 							let wiToAdd = charData.data;