From 81bffd34d8ce928b9a0d2f6632930cc3c52e9b1f Mon Sep 17 00:00:00 2001
From: SillyLossy <titan0599@gmail.com>
Date: Fri, 14 Apr 2023 19:44:59 +0300
Subject: [PATCH] Smart refresh thumbnails cache. Sort group candidates list.
 Remove members by click on remove btn

---
 public/index.html                             | 12 +++--
 public/script.js                              | 30 ++++++++---
 .../scripts/extensions/expressions/index.js   | 10 +++-
 .../scripts/extensions/expressions/style.css  |  1 -
 public/scripts/group-chats.js                 | 50 +++++++++++++------
 public/scripts/power-user.js                  |  4 +-
 public/style.css                              | 30 +++++++++--
 7 files changed, 101 insertions(+), 36 deletions(-)

diff --git a/public/index.html b/public/index.html
index 544683c9f..c638c9407 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1332,8 +1332,8 @@
                                     </div>
                                     <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div>
                                     <!-- <div id="create_button" class="menu_button" type="submit" title="Create Character">✅</div> -->
-                                    <label for="create_button" id="create_button_label" class="menu_button" title="Create Character">
-                                        <input type="submit" id="create_button" name="create_button" class="fa-solid fa-user-check ">
+                                    <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
+                                        <input type="submit" id="create_button" name="create_button">
                                     </label>
                                     <!-- <input id="create_button" class="menu_button" title="Create Character" type="submit" value="✅"> -->
                                     <div id="delete_button" class="menu_button fa-solid fa-trash-can " title="Delete Character"></div>
@@ -1427,8 +1427,10 @@
                             </div>
                             <div class="ch_name"></div>
                             <div class="group_member_icon">
-                                <div alt="Remove" class="fa-solid fa-minus "></div>
-                                <div alt="Add" class="fa-solid fa-plus "></div>
+                                <div title="Move up" data-action="up" class="right_menu_button fa-solid fa-lg fa-chevron-up"></div>
+                                <div title="Move down" data-action="down" class="right_menu_button fa-solid fa-lg fa-chevron-down"></div>
+                                <div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-lg fa-xmark"></div>
+                                <div class="fa-solid fa-lg fa-plus"></div>
                             </div>
                         </div>
                     </div>
@@ -1439,7 +1441,7 @@
                                 <img src="">
                             </div>
                             <div class="group_icon">
-                                <div class="fa-solid fa-user-grouup "></div>
+                                <div class="fa-solid fa-user-group"></div>
                             </div>
                             <div class="ch_name"></div>
                         </div>
diff --git a/public/script.js b/public/script.js
index fedd74ad1..8c59b6a35 100644
--- a/public/script.js
+++ b/public/script.js
@@ -126,6 +126,7 @@ export {
     scrollChatToBottom,
     getTokenCount,
     isStreamingEnabled,
+    getThumbnailUrl,
     chat,
     this_chid,
     settings,
@@ -628,7 +629,7 @@ function printCharacters() {
     characters.forEach(function (item, i, arr) {
         let this_avatar = default_avatar;
         if (item.avatar != "none") {
-            this_avatar = `/thumbnail?type=avatar&file=${encodeURIComponent(item.avatar)}&${Date.now()}`;
+            this_avatar = getThumbnailUrl('avatar', item.avatar);
         } //RossAscends: changed 'prepend' to 'append' to make alphabetical sorting display correctly.
         $("#rm_print_characters_block").append(
 
@@ -688,7 +689,7 @@ async function getBackgrounds() {
         //background = getData;
         //console.log(getData.length);
         for (const bg of getData) {
-            const thumbPath = `/thumbnail?type=bg&file=${encodeURIComponent(bg)}`;
+            const thumbPath = getThumbnailUrl('bg', bg);
             $("#bg_menu_content").append(
                 `<div class="bg_example" bgfile="${bg}" class="bg_example_img" title="${bg}" style="background-image: url('${thumbPath}');">
                 <div bgfile="${bg}" class="bg_example_cross fa-solid fa-circle-xmark"></div>
@@ -902,7 +903,6 @@ function appendImageToMessage(mes, messageElement) {
 }
 
 function addOneMessage(mes, type = "normal", insertAfter = null) {
-
     var messageText = mes["mes"];
     var characterName = name1;
     var avatarImg = "User Avatars/" + user_avatar;
@@ -915,7 +915,7 @@ function addOneMessage(mes, type = "normal", insertAfter = null) {
             avatarImg = system_avatar;
         } else {
             if (characters[this_chid].avatar != "none") {
-                avatarImg = `/thumbnail?type=avatar&file=${encodeURIComponent(characters[this_chid].avatar)}`;
+                avatarImg = getThumbnailUrl('avatar', characters[this_chid].avatar);
                 if (is_mes_reload_avatar !== false) {
                     avatarImg += "&" + is_mes_reload_avatar;
                 }
@@ -2192,7 +2192,7 @@ function saveReply(type, getMessage, this_mes_is_name) {
             console.log('entering chat update for groups');
             let avatarImg = 'img/ai4.png';
             if (characters[this_chid].avatar != 'none') {
-                avatarImg = `/thumbnail?type=avatar&file=${encodeURIComponent(characters[this_chid].avatar)}&${Date.now()}`;
+                avatarImg = getThumbnailUrl('avatar', characters[this_chid].avatar);
             }
             chat[chat.length - 1]['is_name'] = true;
             chat[chat.length - 1]['force_avatar'] = avatarImg;
@@ -2319,9 +2319,23 @@ function read_avatar_load(input) {
         };
 
         reader.readAsDataURL(input.files[0]);
+
+        if (this_chid) {
+            fetch(getThumbnailUrl('avatar', characters[this_chid].avatar), {
+                method: 'GET',
+                headers: {
+                    'pragma': 'no-cache',
+                    'cache-control': 'no-cache',
+                }
+            }).then(() => console.log('Avatar refreshed'));
+        }
     }
 }
 
+function getThumbnailUrl(type, file) {
+    return `/thumbnail?type=${type}&file=${encodeURIComponent(file)}`;
+}
+
 async function getChat() {
     //console.log('/getchat -- entered for -- ' + characters[this_chid].name);
     try {
@@ -3058,9 +3072,9 @@ function select_selected_character(chid) {
     //$("#avatar_div").css("display", "none");
     var this_avatar = default_avatar;
     if (characters[chid].avatar != "none") {
-        this_avatar = "/thumbnail?type=avatar&file=" + encodeURIComponent(characters[chid].avatar);
+        this_avatar = getThumbnailUrl('avatar', characters[chid].avatar);
     }
-    $("#avatar_load_preview").attr("src", this_avatar + "&" + Date.now());
+    $("#avatar_load_preview").attr("src", this_avatar);
     $("#name_div").css("display", "none");
 
     $("#form_create").attr("actiontype", "editcharacter");
@@ -3234,7 +3248,7 @@ function read_bg_load(input) {
                         "url(" + e.target.result + ")"
                     );
                     $("#form_bg_download").after(
-                        `<div class="bg_example" bgfile="${html}" style="background-image: url('/thumbnail?type=bg&file=${encodeURIComponent(html)}');">
+                        `<div class="bg_example" bgfile="${html}" style="background-image: url('${getThumbnailUrl('bg', html)}');">
                             <div class="bg_example_cross fa-solid fa-circle-xmark"></div>
                         </div>`
                     );
diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js
index cdb1669ff..0ad0246eb 100644
--- a/public/scripts/extensions/expressions/index.js
+++ b/public/scripts/extensions/expressions/index.js
@@ -69,7 +69,9 @@ async function moduleWorker() {
 
     // check if last message changed
     const currentLastMessage = getLastCharacterMessage();
-    if (lastCharacter === context.characterId && lastMessage === currentLastMessage.mes && $('img.expression').attr('src')) {
+    if ((lastCharacter === context.characterId || lastCharacter === context.groupId)
+        && lastMessage === currentLastMessage.mes
+        && $('img.expression').attr('src')) {
         return;
     }
 
@@ -198,6 +200,12 @@ async function setExpression(character, expression, force) {
     const debugImageStatus = document.querySelector(`#image_list div[id="${filename}"] span`);
     const img = $('img.expression');
 
+    if (!debugImageStatus && !force) {
+        validateImages();
+        setTimeout(() => setExpression(character, expression, true), 500);
+        return;
+    }
+
     if (force || (debugImageStatus && !debugImageStatus.classList.contains('failure'))) {
         //console.log('setting expression from character images folder');
         const imgUrl = `/characters/${character}/${filename}`;
diff --git a/public/scripts/extensions/expressions/style.css b/public/scripts/extensions/expressions/style.css
index 67f8555bf..a4f2549bc 100644
--- a/public/scripts/extensions/expressions/style.css
+++ b/public/scripts/extensions/expressions/style.css
@@ -28,7 +28,6 @@ img.expression {
 
 img.expression.default {
     vertical-align: middle;
-    margin-bottom: 50px;
 }
 
 .debug-image {
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index d602ed8d0..4383f6550 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -5,6 +5,7 @@ import {
     delay,
 } from './utils.js';
 import { humanizedDateTime } from "./RossAscends-mods.js";
+import { sortCharactersList } from './power-user.js';
 
 import {
     chat,
@@ -39,6 +40,7 @@ import {
     chat_metadata,
     updateChatMetadata,
     isStreamingEnabled,
+    getThumbnailUrl,
 } from "../script.js";
 
 export {
@@ -138,7 +140,7 @@ async function getGroupChat(id) {
                         : default_ch_mes;
                     mes["force_avatar"] =
                         character.avatar != "none"
-                            ? `/thumbnail?type=avatar&file=${encodeURIComponent(character.avatar)}&${Date.now()}`
+                            ? getThumbnailUrl('avatar', character.avatar)
                             : default_avatar;
                     chat.push(mes);
                     addOneMessage(mes);
@@ -218,7 +220,7 @@ function getGroupAvatar(group) {
         for (const member of group.members) {
             const charIndex = characters.findIndex((x) => x.name === member);
             if (charIndex !== -1 && characters[charIndex].avatar !== "none") {
-                const avatar = `/thumbnail?type=avatar&file=${encodeURIComponent(characters[charIndex].avatar)}&${Date.now()}`;
+                const avatar = getThumbnailUrl('avatar', characters[charIndex].avatar);
                 memberAvatars.push(avatar);
             }
             if (memberAvatars.length === 4) {
@@ -321,6 +323,11 @@ async function generateGroupWrapper(by_auto_mode, type = null) {
 
         if (type === "swipe") {
             activatedMembers = activateSwipe(group.members);
+
+            if (activatedMembers.length === 0) {
+                callPopup('<h3>Deleted group member swiped. To get a reply, add them back to the group.</h3>', 'text');
+                throw new Error('Deleted group member swiped');
+            }
         }
         else if (activationStrategy === group_activation_strategy.NATURAL) {
             activatedMembers = activateNaturalOrder(group.members, activationText, lastMessage, group.allow_self_responses, isUserInput);
@@ -537,21 +544,26 @@ async function groupChatAutoModeWorker() {
 }
 
 async function memberClickHandler(event) {
+    // Handled by different function
+    if (!!$(this).closest("#rm_group_members").length) {
+        return;
+    }
+
     event.stopPropagation();
-    const id = $(this).data("id");
-    const isDelete = !!$(this).closest("#rm_group_members").length;
-    const template = $(this).clone();
+    await modifyGroupMember($(this).closest('.group_member'), false);
+}
+
+async function modifyGroupMember(groupMember, isDelete) { 
+    const id = groupMember.data("id");
+
+    const template = groupMember.clone();
     let _thisGroup = groups.find((x) => x.id == selected_group);
     template.data("id", id);
     template.click(memberClickHandler);
 
     if (isDelete) {
-        template.find(".plus").show();
-        template.find(".minus").hide();
         $("#rm_group_add_members").prepend(template);
     } else {
-        template.find(".plus").hide();
-        template.find(".minus").show();
         $("#rm_group_members").prepend(template);
     }
 
@@ -569,7 +581,7 @@ async function memberClickHandler(event) {
         updateGroupAvatar(_thisGroup);
     }
 
-    $(this).remove();
+    groupMember.remove();
     const groupHasMembers = !!$("#rm_group_members").children().length;
     $("#rm_group_submit").prop("disabled", !groupHasMembers);
 }
@@ -608,12 +620,13 @@ function select_group_chats(chat_id) {
     for (let character of characters) {
         const avatar =
             character.avatar != "none"
-                ? `/thumbnail?type=avatar&file=${encodeURIComponent(character.avatar)}&${Date.now()}`
+                ? getThumbnailUrl('avatar', character.avatar)
                 : default_avatar;
         const template = $("#group_member_template .group_member").clone();
         template.data("id", character.name);
         template.find(".avatar img").attr("src", avatar);
         template.find(".ch_name").text(character.name);
+        template.attr("chid", characters.indexOf(character));
         template.click(memberClickHandler);
 
         if (
@@ -621,17 +634,15 @@ function select_group_chats(chat_id) {
             Array.isArray(group.members) &&
             group.members.includes(character.name)
         ) {
-            template.find(".plus").hide();
-            template.find(".minus").show();
             template.css({ 'order': group.members.indexOf(character.name) });
             $("#rm_group_members").append(template);
         } else {
-            template.find(".plus").show();
-            template.find(".minus").hide();
             $("#rm_group_add_members").append(template);
         }
     }
 
+    sortCharactersList("#rm_group_add_members .group_member");
+
     const groupHasMembers = !!$("#rm_group_members").children().length;
     $("#rm_group_submit").prop("disabled", !groupHasMembers);
     $("#rm_group_allow_self_responses").prop("checked", group && group.allow_self_responses);
@@ -696,6 +707,15 @@ $(document).ready(() => {
         }
     });
 
+    $(document).on("click", ".group_member .right_menu_button", async function (event) {
+        const action = $(this).data('action');
+
+        if (action == 'remove') {
+            event.stopPropagation();
+            await modifyGroupMember($(this).closest('.group_member'), true);
+        }
+    });
+
     $("#rm_group_filter").on("input", function () {
         const searchValue = $(this).val().trim().toLowerCase();
 
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 21ee95a52..fe356355e 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -309,7 +309,7 @@ function loadPowerUserSettings(settings, data) {
     sortCharactersList();
 }
 
-function sortCharactersList() {
+function sortCharactersList(selector='.character_select') {
     const sortFunc = (a, b) => power_user.sort_order == 'asc' ? compareFunc(a, b) : compareFunc(b, a);
     const compareFunc = (first, second) => typeof first[power_user.sort_field] == "string"
         ? first[power_user.sort_field].localeCompare(second[power_user.sort_field])
@@ -322,7 +322,7 @@ function sortCharactersList() {
     let orderedList = characters.slice().sort(sortFunc);
 
     for (let i = 0; i < characters.length; i++) {
-        $(`.character_select[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
+        $(`${selector}[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
     }
 }
 
diff --git a/public/style.css b/public/style.css
index ff75c8908..38569d5b9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2334,9 +2334,10 @@ h5 {
 }
 
 .group_member_icon {
-    width: 25px;
-    height: 25px;
     margin: 0 10px;
+    display: flex;
+    column-gap: 10px;
+    align-items: center;
 }
 
 .group_member {
@@ -2361,10 +2362,27 @@ h5 {
     background-color: var(--white30a);
 }
 
-#group_member_template {
-    display: none !important;
+#rm_group_members .group_member {
+    cursor: initial;
 }
 
+#rm_group_members .group_member:hover {
+    background-color: initial;
+}
+
+/* Rules for icon display */
+#rm_group_members .group_member:first-child .fa-chevron-down,
+#rm_group_members .group_member:last-child .fa-chevron-up,
+#rm_group_add_members .right_menu_button,
+#rm_group_members .fa-plus {
+    display: none;
+}
+
+#rm_group_members .right_menu_button {
+    padding: 0px;
+}
+
+#group_member_template,
 #group_list_template {
     display: none !important;
 }
@@ -2424,6 +2442,10 @@ h5 {
     width: 0px;
 }
 
+.group_member .avatar {
+    flex-shrink: 0;
+}
+
 @keyframes ellipsis {
     0% {
         content: ""