fix: Aethetic mode images with agent mode (support for multi char in progress for aethetic mode)

Author: prima

klite.embd

@@ -21317,6 +21317,11 @@ Current version indicated by LITEVER below.
 		}
 		currchatunit.msg = processed_msg;
 		currchatunit.name = namepart;
+		currchatunit.source = currchatunit?.source;
+		if (currchatunit?.source === "system")
+		{
+			currchatunit.name = "System"
+		}
 		return currchatunit;
 	}
 
@@ -23433,9 +23438,34 @@ Current version indicated by LITEVER below.
 		document.getElementById('aesthetic_text_preview').innerHTML = render_aesthetic_ui(preview,true);
 	}
 
+	// source, name, imageData
+	let sourceImagesForCharacters = [
+		{
+			source: "system",
+			name: "System",
+			imageData: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtQTFRFAAAA+XJ0l09PsVdXcTw842hqw2hmTi4vMCQlb2eUgWtl+tGpBAMDEw4NPCkoFw8PJBgXt5WBVkxW4Nvf7Lia3Z+MpJnAZ05HnJOTYIS/NAAAABl0Uk5TAv////v//vT9//3/Nna08qf+///////a/hkcROQAAAGUSURBVHiclZLRcoQgDEULBAKoIKjI/39pL4i7nbUPbcYZwJyES5Kvr3/YvIx1nn9zL4G4EwuTXX7xs4QFGEklOT6SBENERguhsWHFD2AVRhL8IEgawY8b5L4fYtg+TSl8+NMEu4G2P34Q67r6I+37dLyBfU/4PY/sInG2MR8vIHG01h9mHfq1hUUQtwYcLEcp+ltmwqutdy5HMwAfc8ExKtVSLEZZW13Jxb4Azq7UHFnFrtGItLliS1UDYOfctm3JhEtlEH5zzpZNDsC63AB1VysY3gqC3C2ytsNW6Q3IjCt91Qr9QK8MiFL4nUEpEyNLYmodxYo3RquVHWUmbbRu0QCbKWwNfil5zYeENrRRqtZrGEQYqdtW8FWHLl4bgZDLFLZdbS/UzP2AEGTufkt3xWSvwzJeh4GxHWD5qlgXOZ/n2ULuC/od4Pk8x9xhCekD0Bqd/DmXgbpEumRgrMPn1K6ecs4pJc/V0nE+x35KtfTJTJufpvPTD2DyNZ3e4wP3zDCHevg+yYvf09PfkHuK7/Vv9g2CjBTdqv3bFgAAAABJRU5ErkJggg==)"
+		},
+		{
+			source: "human",
+			name: "Eso",
+			imageData: "var(--img_worldTree)"
+		},
+		{
+			source: "ai",
+			name: "Eso",
+			imageData: "var(--img_worldTree)"
+		}
+	];
+	
+	function getImageForSource(source, name)
+	{
+		let images = sourceImagesForCharacters.filter(imageMeta => imageMeta?.source === source && imageMeta?.name === name);
+		return images.length > 0 ? images[0]?.imageData : undefined;
+	}
+
 	function render_aesthetic_ui(input, isPreview) //class suffix string used to prevent defined styles from leaking into global scope
 	{
-		const avatarImage = function(for_ai) { //todo: this is still bad code, but will keep it for now
+		const avatarImage = function(for_ai, source = undefined, name = undefined) { //todo: this is still bad code, but will keep it for now
 			if((for_ai && !as.AI_portrait) || (!for_ai && !as.you_portrait) || as.border_style == 'None')
 			{
 				return ''; //for no portrait
@@ -23444,16 +23474,24 @@ Current version indicated by LITEVER below.
 			let radius = (as.border_style == 'Circle' ? '1000rem' : (as.border_style == 'Rounded' ? '1.6rem' : '0.1rem'));
 			let width, height;
 			let imgclassname = "";
-			if (!for_ai) {
+			let imageToUse = source !== undefined ? getImageForSource(source, name) : undefined;
+			if (imageToUse !== undefined)
+			{
+				width = as.portrait_width_AI;
+				height = (as.border_style == 'Circle' ? as.portrait_width_AI : as.portrait_width_AI / as.portrait_ratio_AI);
+			}
+			else if (!for_ai) 
+			{
 				width = as.portrait_width_you;
 				height = (as.border_style == 'Circle' ? as.portrait_width_you : as.portrait_width_you / as.portrait_ratio_you);
 				imgclassname = "you-portrait-image";
-			} else {
+			}
+			else {
 				width = as.portrait_width_AI;
 				height = (as.border_style == 'Circle' ? as.portrait_width_AI : as.portrait_width_AI / as.portrait_ratio_AI);
 				imgclassname = "AI-portrait-image";
 			}
-			return `<div class='${imgclassname}${classSuffixStr}${reinvertcolor}' style='width:${width}px; height:${height}px; border-radius: ${radius}'></div>`;
+			return `<div class='${imgclassname}${classSuffixStr}${reinvertcolor}' style='width:${width}px; height:${height}px; border-radius: ${radius}; ${!!imageToUse ? `background:${imageToUse}; margin: 10px 6px; background-clip: content-box; background-position: 50% 50%; background-size: 100% 100%; background-origin: content-box; background-repeat: no-repeat; border:none;` : ""}'></div>`;
 		}
 
 		if(localsettings.separate_end_tags) {
@@ -23613,12 +23651,12 @@ Current version indicated by LITEVER below.
 			newbodystr += `<div style='display:flex; align-items:stretch; flex-direction: row;'>`;
 			if(curr.myturn)
 			{
-				newbodystr += `${(showavatar?avatarImage(false):"")}
+				newbodystr += `${(showavatar?avatarImage(false, curr?.source, curr?.name):"")}
 				<div class='aui_myturn_block'`;
 			}
 			else
 			{
-				newbodystr += `${(showavatar?avatarImage(true):"")}
+				newbodystr += `${(showavatar?avatarImage(true, curr?.source, curr?.name):"")}
 				<div class='aui_aiturn_block'`;
 			}
 			newbodystr += ` style='flex: 1; display:flex; padding: ${as.padding()}; margin: ${as.margin()}; min-height:${as.background_minHeight}px;`
@@ -40738,14 +40776,17 @@ let checkFinalThoughtsPrompt = `Action: {"command":{"name":"thought","args":{"me
 				if (elem.indexOf(usertag) !== -1)
 				{
 					out.source = "human"
+					out.myturn = true
 				}
 				else if (elem.indexOf(aitag) !== -1)
 				{
 					out.source = "ai"
+					out.myturn = false
 				}
 				else if (elem.indexOf(systag) !== -1)
 				{
 					out.source = "system"
+					out.myturn = false
 				}
 				else
 				{
@@ -40826,7 +40867,8 @@ let checkFinalThoughtsPrompt = `Action: {"command":{"name":"thought","args":{"me
 				if (allow_blank || elem.message.trim() != "") {
 					return {
 						msg: elem.message,
-						source: elem.source
+						source: elem.source,
+						myturn: elem.myturn
 					}
 				}
 				return null
@@ -40836,7 +40878,7 @@ let checkFinalThoughtsPrompt = `Action: {"command":{"name":"thought","args":{"me
 		{
 			return originalRepackInstructTurns(input, usertag, aitag, allow_blank)
 		}
-	}
+	};
 
 	let getLastActions = (amountOfActions = 10) => {
 		let exclusions = ["Chain of thought repetition detected - ending", "Chain of thought complete", "plan_actions"]