From 566996a72877c156999bdf5174ea94898c06d168 Mon Sep 17 00:00:00 2001
From: Laura <milanbartky@gmail.com>
Date: Sat, 16 Aug 2025 14:32:57 +0200
Subject: [PATCH] mark retry messages

---
 static/css/chat.css | 18 ++++++++++++++++++
 static/js/chat.js   | 40 ++++++++++++++++++++++++++++++++++------
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/static/css/chat.css b/static/css/chat.css
index e486e27..364a48d 100644
--- a/static/css/chat.css
+++ b/static/css/chat.css
@@ -150,6 +150,24 @@ body.loading #version {
 	flex-shrink: 0;
 }
 
+.message::after {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	background: rgba(237, 135, 150, 0.2);
+	opacity: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	transition: opacity 150ms;
+	border-radius: 6px;
+}
+
+.message.marked::after {
+	opacity: 1;
+}
+
 .message.user {
 	align-self: end;
 }
diff --git a/static/js/chat.js b/static/js/chat.js
index 91dd27a..879af05 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -38,6 +38,12 @@
 		}, 0);
 	}
 
+	function mark(index) {
+		for (let x = 0; x < messages.length; x++) {
+			messages[x].mark(Number.isInteger(index) && x >= index);
+		}
+	}
+
 	class Message {
 		#id;
 		#role;
@@ -225,21 +231,29 @@
 
 			_opts.appendChild(_optRetry);
 
+			_optRetry.addEventListener("mouseenter", () => {
+				const index = this.index(!_assistant ? 1 : 0);
+
+				mark(index);
+			});
+
+			_optRetry.addEventListener("mouseleave", () => {
+				mark(false);
+			});
+
 			_optRetry.addEventListener("click", () => {
-				let index = messages.findIndex((message) => message.#id === this.#id);
+				const index = this.index(!_assistant ? 1 : 0);
 
-				if (index === -1) {
+				if (index === false) {
 					return;
 				}
 
-				if (!_assistant) {
-					index++;
-				}
-
 				while (messages.length > index) {
 					messages[messages.length - 1].delete();
 				}
 
+				mark(false);
+
 				generate(false);
 			});
 
@@ -446,6 +460,20 @@
 			);
 		}
 
+		index(offset = 0) {
+			const index = messages.findIndex((message) => message.#id === this.#id);
+
+			if (index === -1) {
+				return false;
+			}
+
+			return index + offset;
+		}
+
+		mark(state = false) {
+			this.#_message.classList.toggle("marked", state);
+		}
+
 		getData(full = false) {
 			const data = {
 				role: this.#role,