Group members reordering

public/index.html

@@ -650,14 +650,20 @@
                                         <input id="enhance_definitions" type="checkbox" />
                                         Enhance Definitions
                                     </label>
-                                    <div class="range-block-counter justifyLeft">Use OAI knowledge base to enhance definitions for public figures and known fictional characters</div>
+                                    <div class="range-block-counter justifyLeft">
+                                        Use OAI knowledge base to enhance definitions for public figures and known fictional characters
+                                    </div>
                                 </div>
                                 <div class="range-block">
                                     <label for="wrap_in_quotes" title="Wrap user messages in quotes before sending" class="checkbox_label widthFreeExpand">
                                         <input id="wrap_in_quotes" type="checkbox" />
                                         Wrap in Quotes
                                     </label>
-                                    <div class="range-block-counter justifyLeft">Wrap entire user message in quotes before sending. Volatile impact on AI responses. Helps when using basic chats. Hurts when combining RP-style narration with quotes. Leave off if you use quotes manually for speech.</div>
+                                    <div class="range-block-counter justifyLeft">
+                                        Wrap entire user message in quotes before sending. Volatile impact on AI responses.
+                                        Helps when using basic chats. Hurts when combining RP-style narration with quotes.
+                                        Leave off if you use quotes manually for speech.
+                                    </div>
                                 </div>
                             </div>
                             <br>
@@ -843,7 +849,7 @@
                             </a>
                         </div>
                         <span>
-                            Make sure you run it in notebook mode<br>(not
+                            Make sure you run it in notebook/default mode<br>(not
                             <pre>--cai-chat</pre> or
                             <pre>--chat</pre>)
                         </span>
@@ -1162,7 +1168,8 @@
                                     <input id="fast_ui_mode" type="checkbox" />
                                     No Blur Effect
                                 </label>
-                                <label for="waifuMode"><input id="waifuMode" type="checkbox" />
+                                <label for="waifuMode"  class="checkbox_label">
+                                    <input id="waifuMode" type="checkbox" />
                                     ♡ Waifu Mode ♡
                                 </label>
                             </div>
@@ -1429,10 +1436,10 @@
                             </div>
                             <div class="ch_name"></div>
                             <div class="group_member_icon">
-                                <div title="Move up" data-action="up" class="right_menu_button fa-solid fa-lg fa-chevron-up"></div>
+                                <div title="Move up" data-action="up" class="right_menu_button fa-solid fa-xl 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="Move down" data-action="down" class="right_menu_button fa-solid fa-xl fa-chevron-down"></div>
-                                <div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-lg fa-xmark"></div>
+                                <div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-xl fa-xmark"></div>
-                                <div class="fa-solid fa-lg fa-plus"></div>
+                                <div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-xl fa-plus"></div>
                             </div>
                         </div>
                     </div>

public/notes/message_sound.html

@@ -24,7 +24,7 @@
                 Plays at 80% volume.
             </p>
             <p>
-                If "Sound only for unfocused window" option is enabled, the sound plays only if TavernAI window is <b>unfocused</b>.
+                If "Background Sound Only" option is enabled, the sound plays only if TavernAI window is <b>unfocused</b>.
             </p>
         </div>
     </div>

public/scripts/group-chats.js

@@ -543,23 +543,12 @@ async function groupChatAutoModeWorker() {
     await generateGroupWrapper(true);
 }
 
-async function memberClickHandler(event) {
+async function modifyGroupMember(chat_id, groupMember, isDelete) { 
-    // Handled by different function
-    if (!!$(this).closest("#rm_group_members").length) {
-        return;
-    }
-
-    event.stopPropagation();
-    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);
+    let _thisGroup = groups.find((x) => x.id == chat_id);
     template.data("id", id);
-    template.click(memberClickHandler);
 
     if (isDelete) {
         $("#rm_group_add_members").prepend(template);
@@ -580,13 +569,54 @@ async function modifyGroupMember(groupMember, isDelete) {
         await editGroup(selected_group);
         updateGroupAvatar(_thisGroup);
     }
+    else {
+        template.css({ 'order': 'unset' });
+    }
 
     groupMember.remove();
     const groupHasMembers = !!$("#rm_group_members").children().length;
     $("#rm_group_submit").prop("disabled", !groupHasMembers);
 }
 
-function select_group_chats(chat_id) {
+async function reorderGroupMember(chat_id, groupMember, direction) {
+    const id = groupMember.data("id");
+    const group = groups.find((x) => x.id == chat_id);
+
+    // Existing groups need to modify members list
+    if (group && group.members.length > 1) {
+        const indexOf = group.members.indexOf(id);
+        if (direction == 'down') {
+            const next = group.members[indexOf + 1];
+            if (next) {
+                group.members[indexOf + 1] = group.members[indexOf];
+                group.members[indexOf] = next;
+            }
+        }
+        if (direction == 'up') {
+            const prev = group.members[indexOf - 1];
+            if (prev) {
+                group.members[indexOf - 1] = group.members[indexOf];
+                group.members[indexOf] = prev;
+            }
+        }
+        
+        await editGroup(chat_id);
+        updateGroupAvatar(group);
+        // stupid but lifts the manual reordering
+        select_group_chats(chat_id, true);
+    }
+    // New groups just can't be DOM-ordered
+    else {
+        if (direction == 'down') {
+            groupMember.insertAfter(groupMember.next());
+        }
+        if (direction == 'up') {
+            groupMember.insertBefore(groupMember.prev());
+        }
+    }
+}
+
+function select_group_chats(chat_id, skipAnimation) {
     const group = chat_id && groups.find((x) => x.id == chat_id);
     const groupName = group?.name ?? "";
 
@@ -612,7 +642,9 @@ function select_group_chats(chat_id) {
     });
     $(`input[name="rm_group_activation_strategy"][value="${Number(group?.activation_strategy ?? group_activation_strategy.NATURAL)}"]`).prop('checked', true);
 
-    selectRightMenuWithAnimation('rm_group_chats_block');
+    if (!skipAnimation) {
+        selectRightMenuWithAnimation('rm_group_chats_block');
+    }
 
     // render characters list
     $("#rm_group_add_members").empty();
@@ -627,7 +659,6 @@ function select_group_chats(chat_id) {
         template.find(".avatar img").attr("src", avatar);
         template.find(".ch_name").text(character.name);
         template.attr("chid", characters.indexOf(character));
-        template.click(memberClickHandler);
 
         if (
             group &&
@@ -685,6 +716,27 @@ function select_group_chats(chat_id) {
     else {
         $("#rm_group_automode_label").hide();
     }
+
+    $(document).off("click", ".group_member .right_menu_button");
+    $(document).on("click", ".group_member .right_menu_button", async function (event) {
+        event.stopPropagation();
+        const action = $(this).data('action');
+        const member = $(this).closest('.group_member');
+
+        if (action == 'remove') {
+            await modifyGroupMember(chat_id, member, true);
+        }
+        
+        if (action == 'add') {
+            await modifyGroupMember(chat_id, member, false);
+        }
+        
+        if (action == 'up' || action == 'down') {
+            await reorderGroupMember(chat_id, member, action);
+        }
+
+        sortCharactersList("#rm_group_add_members .group_member");
+    });
 }
 
 $(document).ready(() => {
@@ -707,15 +759,6 @@ $(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();
 

public/style.css

@@ -2346,7 +2346,6 @@ h5 {
     width: 100%;
     padding: 5px;
     border-radius: 10px;
-    cursor: pointer;
 }
 
 .group_member .ch_name {
@@ -2357,27 +2356,15 @@ h5 {
     width: calc(100% - 110px);
 }
 
-.group_member:hover {
-    background-color: var(--white30a);
-}
-
-#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[order="start"] .fa-chevron-down,
-#rm_group_members .group_member:last-child .fa-chevron-up,
+#rm_group_members .group_member[order="end"] .fa-chevron-up,
-#rm_group_add_members .right_menu_button,
+#rm_group_add_members .right_menu_button:not(.fa-plus),
 #rm_group_members .fa-plus {
     display: none;
 }
 
-#rm_group_members .right_menu_button {
+#rm_group_members .right_menu_button, #rm_group_add_members .right_menu_button {
     padding: 0px;
 }
 
@@ -2412,10 +2399,6 @@ h5 {
     text-overflow: ellipsis;
 }
 
-#rm_button_back_from_group {
-    padding: 5px;
-}
-
 #typing_indicator_template {
     display: none !important;
 }