feat: Expanded group chat images to all modes (instruct tested)

Author: prima

klite.embd

@@ -21296,6 +21296,16 @@ Current version indicated by LITEVER below.
 					{
 						currmsg = currmsg.replace(/(\[\d{1,2}\/\d{1,2}\/\d{4}, \d{1,2}:\d{2} [AP]M\])/g, "$1\n");
 					}
+					let currentName = undefined;
+					if (localsettings.inject_chatnames_instruct)
+					{
+						[localsettings.chatname, ...localsettings.chatopponent.split("||$||")].forEach(op => {
+							if (currentName === undefined && currmsg.trim().startsWith(`${op.trim()}:`))
+							{
+								currentName = op.trim()
+							}
+						})
+					}
 					if(localsettings.inject_chatnames_instruct && localsettings.instruct_has_markdown)
 					{
 						let m_name = localsettings.chatname + ": ";
@@ -21323,34 +21333,48 @@ Current version indicated by LITEVER below.
 						currmsg = simpleMarkdown(currmsg,localsettings.instruct_has_latex);
 					}
 
+					let imageToUse = getImageForSource(curr?.source, currentName), isHuman = false, putRaw = false;
 					if (curr?.source !== undefined) {
 						switch (curr?.source) {
 							case "human":
-								fulltxt += `<hr style="margin-top: 12px; margin-bottom: 12px;"><span class="color_cyan"><img src="${human_square}" style="height:38px;width:auto;padding:3px 6px 3px 3px;border-radius: 8%;"/>${currmsg}</span>`;
-								break
+								imageToUse = imageToUse || "var(--img_humansquare)";
+								isHuman = true;
+								break;
 							case "ai":
-								fulltxt += `<hr style="margin-top: 12px; margin-bottom: 12px;"><span class="color_cyan"><img src="${niko_square}" style="height:38px;width:auto;padding:3px 6px 3px 3px;border-radius: 8%;"/>${currmsg}</span>`
-								break
+								imageToUse = imageToUse || "var(--img_nikosquare)";
+								break;
 							case "system":
 							default:
-								fulltxt += `<hr style="margin-top: 12px; margin-bottom: 12px;"><span class="color_cyan"><img src="${favivon_normal}" style="height:38px;width:auto;padding:3px 6px 3px 3px;border-radius: 8%;"/>${currmsg}</span>`
-								break
+								imageToUse = imageToUse || "var(--img_favicon_normal)";
+								break;
 						}
 					}
 					else {
 						if(curr.myturn)
 						{
-							fulltxt += `<hr style="margin-top: 12px; margin-bottom: 12px;"><span class="color_cyan"><img src="${human_square}" style="height:38px;width:auto;padding:3px 6px 3px 3px;border-radius: 8%;"/>${currmsg}</span>`;
+							imageToUse = imageToUse || "var(--img_humansquare)";
+							isHuman = true;
 						}
 						else
 						{
 							if (i == 0) {
 								fulltxt += `${currmsg}`;
-							} else {
-								fulltxt += `<hr style="margin-top: 12px; margin-bottom: 12px;"><img src="${niko_square}" style="height:38px;width:auto;padding:3px 6px 3px 3px;border-radius: 8%;"/>${currmsg}</span>`;
+								putRaw = true;
+							} 
+							else {
+								imageToUse = imageToUse || "var(--img_nikosquare)";
 							}
 						}
 					}
+
+					if (putRaw)
+					{
+						fulltxt += `${currmsg}`;
+					}
+					else
+					{
+						fulltxt += `<hr style="margin-top: 12px; margin-bottom: 12px;">${isHuman ? `<span class="color_cyan">` : ""}<img class="containAndScaleImage" style="height:38px;width:38px;padding:3px 6px 3px 3px;border-radius: 8%; background-image: ${imageToUse};" />${currmsg}${isHuman ? `</span>` : ""}`;
+					}
 				}
 
 			} else {
@@ -22340,7 +22364,12 @@ Current version indicated by LITEVER below.
 				newbodystr += `<div style="width:100%">`;
 			}
 			else {
-				newbodystr += `<div><img ${(curr.myturn ? "" : `onclick="corpo_click_avatar()"`)} src="${(curr.myturn ? human_square : niko_square)}" class="corpoavatar"/></div>
+				let imageToUse = getImageForSource(curr?.source, curr.name);
+				if (imageToUse === undefined)
+				{
+					imageToUse = curr.myturn ? "var(--img_humansquare)" : "var(--img_nikosquare)"
+				}
+				newbodystr += `<div><img ${(curr.myturn ? "" : `onclick="corpo_click_avatar()"`)} style="background-image:${imageToUse};" class="corpoavatar containAndScaleImage"/></div>
 				<div style="width:100%">
 				<div class="corpostyleitemheading">`+ curr.name + `</div>`;
 			}
@@ -24069,11 +24098,23 @@ Current version indicated by LITEVER below.
 
 	function getImageForSource(source, name)
 	{
+		if (name === undefined)
+		{
+			return undefined;
+		}
 		let imageFromIndexDB = getImageUrlFromCharacter(name)
 		if (imageFromIndexDB !== undefined)
 		{
 			return imageFromIndexDB;
 		}
+		if (name === localsettings.chatname && !!aestheticInstructUISettings?.you_portrait)
+		{
+			return `url(${aestheticInstructUISettings.you_portrait})`
+		}
+		if (localsettings?.chatopponent?.split("||$||").includes(name) && !!aestheticInstructUISettings?.AI_portrait)
+		{
+			return `url(${aestheticInstructUISettings.AI_portrait})`
+		}
 		if (source !== undefined)
 		{
 			let images = sourceImagesForCharacters.filter(imageMeta => imageMeta?.source === source && imageMeta?.name === name);
@@ -24110,7 +24151,7 @@ Current version indicated by LITEVER below.
 				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}; ${!!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>`;
+			return `<div class='${imgclassname}${classSuffixStr}${reinvertcolor} containAndScaleImage' style='width:${width}px; height:${height}px; border-radius: ${radius}; ${!!imageToUse ? `background-image:${imageToUse}; margin: 10px 6px; border:none;` : ""}'></div>`;
 		}
 
 		if(localsettings.separate_end_tags) {
@@ -37051,4 +37092,15 @@ flowchart TD\n${treeToViewOutput.outputText.trim()}`
 	setInterval(updateExecScriptButtons, 15*1000);
 	setTimeout(updateExecScriptButtons, 5*1000);
 </script>
+<style>
+	.containAndScaleImage
+	{
+		aspect-ratio: 1;
+		background-clip: content-box;
+		background-position: 50% 50%;
+		background-size: 100% 100%;
+		background-origin: content-box;
+		background-repeat: no-repeat;
+	}
+</style>
 </html>