mark retry messages

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;
 }

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,