From 6a4ee6811347d2f045e22bc6ebd9433689d1c6b3 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sat, 11 May 2024 17:17:42 +0300
Subject: [PATCH] Message delete highlight color follows theme settings

---
 public/script.js | 30 ++++++++++++------------------
 public/style.css |  4 ++++
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/public/script.js b/public/script.js
index 923cddee5..90586d84c 100644
--- a/public/script.js
+++ b/public/script.js
@@ -789,7 +789,6 @@ export let novelai_setting_names;
 let abortController;
 
 //css
-var css_mes_bg = $('<div class="mes"></div>').css('background');
 var css_send_form_display = $('<div id=send_form></div>').css('display');
 const MAX_GENERATION_LOOPS = 5;
 
@@ -8586,19 +8585,17 @@ jQuery(async function () {
         }
         $('.mes').children('.del_checkbox').each(function () {
             $(this).prop('checked', false);
-            $(this).parent().css('background', css_mes_bg);
+            $(this).parent().removeClass('selected');
         });
-        $(this).css('background', '#600'); //sets the bg of the mes selected for deletion
+        $(this).addClass('selected'); //sets the bg of the mes selected for deletion
         var i = Number($(this).attr('mesid')); //checks the message ID in the chat
         this_del_mes = i;
+        //as long as the current message ID is less than the total chat length
         while (i < chat.length) {
-            //as long as the current message ID is less than the total chat length
-            $('.mes[mesid=\'' + i + '\']').css('background', '#600'); //sets the bg of the all msgs BELOW the selected .mes
-            $('.mes[mesid=\'' + i + '\']')
-                .children('.del_checkbox')
-                .prop('checked', true);
+            //sets the bg of the all msgs BELOW the selected .mes
+            $(`.mes[mesid="${i}"]`).addClass('selected');
+            $(`.mes[mesid="${i}"]`).children('.del_checkbox').prop('checked', true);
             i++;
-            //console.log(i);
         }
     });
 
@@ -9202,7 +9199,7 @@ jQuery(async function () {
         $('.del_checkbox').each(function () {
             $(this).css('display', 'none');
             $(this).parent().children('.for_checkbox').css('display', 'block');
-            $(this).parent().css('background', css_mes_bg);
+            $(this).parent().removeClass('selected');
             $(this).prop('checked', false);
         });
         showSwipeButtons();
@@ -9217,22 +9214,19 @@ jQuery(async function () {
         $('.del_checkbox').each(function () {
             $(this).css('display', 'none');
             $(this).parent().children('.for_checkbox').css('display', 'block');
-            $(this).parent().css('background', css_mes_bg);
+            $(this).parent().removeClass('selected');
             $(this).prop('checked', false);
         });
 
         if (this_del_mes >= 0) {
-            $('.mes[mesid=\'' + this_del_mes + '\']')
-                .nextAll('div')
-                .remove();
-            $('.mes[mesid=\'' + this_del_mes + '\']').remove();
+            $(`.mes[mesid="${this_del_mes}"]`).nextAll('div').remove();
+            $(`.mes[mesid="${this_del_mes}"]`).remove();
             chat.length = this_del_mes;
             await saveChatConditional();
-            var $textchat = $('#chat');
-            $textchat.scrollTop($textchat[0].scrollHeight);
+            chatElement.scrollTop(chatElement[0].scrollHeight);
             eventSource.emit(event_types.MESSAGE_DELETED, chat.length);
+            $('#chat .mes').removeClass('last_mes');
             $('#chat .mes').last().addClass('last_mes');
-            $('#chat .mes').eq(-2).removeClass('last_mes');
         } else {
             console.log('this_del_mes is not >= 0, not deleting');
         }
diff --git a/public/style.css b/public/style.css
index 7cd1f5ddf..7ac30cfdf 100644
--- a/public/style.css
+++ b/public/style.css
@@ -813,6 +813,10 @@ body .panelControlBar {
     position: relative;
 }
 
+#chat .mes.selected{
+    background-color: rgb(from var(--SmartThemeQuoteColor) r g b / .5);
+}
+
 .mes q:before,
 .mes q:after {
     content: '';