Smart refresh thumbnails cache. Sort group candidates list. Remove members by click on remove btn

2025-06-05 21:59:27 +02:00 · 2023-04-14 19:44:59 +03:00
parent 4b98f9d825
commit 81bffd34d8
7 changed files with 101 additions and 36 deletions
--- 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>
--- 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,7 +2319,21 @@ 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() {
@ -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>`
                    );
--- 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}`;
--- 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 {
--- 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();

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

--- 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: ""