#356 Add group chat member ghosting

public/index.html

@@ -2673,6 +2673,8 @@
             </div>
             <div class="ch_name"></div>
             <div class="group_member_icon">
+                <div title="Temporarily disable automatic replies from this character" data-action="disable" class="right_menu_button fa-solid fa-lg fa-comment-slash"></div>
+                <div title="Enable automatic replies from this character" data-action="enable" class="right_menu_button fa-solid fa-lg fa-comment-slash"></div>
                 <div title="Trigger a message from this character" data-action="speak" class="right_menu_button fa-solid fa-lg fa-comment"></div>
                 <div class="flexFlowColumn flex-container">
                     <div title="Move up" data-action="up" class="right_menu_button fa-solid fa-chevron-up"></div>

public/scripts/bookmarks.js

@@ -213,6 +213,7 @@ async function convertSoloToGroupChat() {
             avatar_url: avatar,
             allow_self_responses: activationStrategy,
             activation_strategy: allowSelfResponses,
+            disabled_members: [],
             chat_metadata: metadata,
             fav: favChecked,
             chat_id: chatName,

public/scripts/group-chats.js

@@ -282,6 +282,9 @@ async function getGroups() {
 
         // Convert groups to new format
         for (const group of groups) {
+            if (group.disabled_members == undefined) {
+                group.disabled_members = [];
+            }
             if (group.chat_id == undefined) {
                 group.chat_id = group.id;
                 group.chats = [group.id];
@@ -348,34 +351,15 @@ function getGroupAvatar(group) {
         }
     }
 
-    // Cohee: there's probably a smarter way to do this..
+    const avatarCount = memberAvatars.length;
-    if (memberAvatars.length === 1) {
+
-        const groupAvatar = $("#group_avatars_template .collage_1").clone();
+    if (avatarCount >= 1 && avatarCount <= 4) {
-        groupAvatar.find(".img_1").attr("src", memberAvatars[0]);
+        const groupAvatar = $(`#group_avatars_template .collage_${avatarCount}`).clone();
-        return groupAvatar;
+
+        for (let i = 0; i < avatarCount; i++) {
+            groupAvatar.find(`.img_${i + 1}`).attr("src", memberAvatars[i]);
         }
 
-    if (memberAvatars.length === 2) {
-        const groupAvatar = $("#group_avatars_template .collage_2").clone();
-        groupAvatar.find(".img_1").attr("src", memberAvatars[0]);
-        groupAvatar.find(".img_2").attr("src", memberAvatars[1]);
-        return groupAvatar;
-    }
-
-    if (memberAvatars.length === 3) {
-        const groupAvatar = $("#group_avatars_template .collage_3").clone();
-        groupAvatar.find(".img_1").attr("src", memberAvatars[0]);
-        groupAvatar.find(".img_2").attr("src", memberAvatars[1]);
-        groupAvatar.find(".img_3").attr("src", memberAvatars[2]);
-        return groupAvatar;
-    }
-
-    if (memberAvatars.length === 4) {
-        const groupAvatar = $("#group_avatars_template .collage_4").clone();
-        groupAvatar.find(".img_1").attr("src", memberAvatars[0]);
-        groupAvatar.find(".img_2").attr("src", memberAvatars[1]);
-        groupAvatar.find(".img_3").attr("src", memberAvatars[2]);
-        groupAvatar.find(".img_4").attr("src", memberAvatars[3]);
         return groupAvatar;
     }
 
@@ -436,7 +420,7 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
         let isGenerationDone = false;
         let isGenerationAborted = false;
 
-        if (userInput && userInput.length && !by_auto_mode) {
+        if (userInput?.length && !by_auto_mode) {
             isUserInput = true;
             activationText = userInput;
             messagesBefore++;
@@ -474,6 +458,7 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
         }
 
         const activationStrategy = Number(group.activation_strategy ?? group_activation_strategy.NATURAL);
+        const enabledMembers = group.members.filter(x => !group.disabled_members.includes(x));
         let activatedMembers = [];
 
         if (params && typeof params.force_chid == 'number') {
@@ -484,7 +469,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
             if (activatedMembers.length === 0) {
                 activatedMembers = activateListOrder(group.members.slice(0, 1));
             }
-
         }
         else if (type === "swipe") {
             activatedMembers = activateSwipe(group.members);
@@ -499,13 +483,18 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
             activatedMembers = activateImpersonate(group.members);
         }
         else if (activationStrategy === group_activation_strategy.NATURAL) {
-            activatedMembers = activateNaturalOrder(group.members, activationText, lastMessage, group.allow_self_responses, isUserInput);
+            activatedMembers = activateNaturalOrder(enabledMembers, activationText, lastMessage, group.allow_self_responses, isUserInput);
         }
         else if (activationStrategy === group_activation_strategy.LIST) {
-            activatedMembers = activateListOrder(group.members);
+            activatedMembers = activateListOrder(enabledMembers);
         }
 
-        // now the real generation begins: cycle through every character
+        if (activatedMembers.length === 0) {
+            toastr.warning('All group members are disabled. Enable at least one to get a reply.');
+            throw new Error('All group members are disabled');
+        }
+
+        // now the real generation begins: cycle through every activated character
         for (const chId of activatedMembers) {
             isGenerationDone = false;
             const generateType = type == "swipe" || type == "impersonate" || type == "quiet" ? type : "group_chat";
@@ -514,7 +503,7 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
 
             await Generate(generateType, { automatic_trigger: by_auto_mode, ...(params || {}) });
 
-            if (type !== "swipe" && type !== "impersonate" && !isMultigenEnabled()) {
+            if (type !== "swipe" && type !== "impersonate" && !isMultigenEnabled() && !isStreamingEnabled()) {
                 // update indicator and scroll down
                 typingIndicator
                     .find(".typing_indicator_name")
@@ -949,6 +938,7 @@ function select_group_chats(groupId, skipAnimation) {
             group.members.includes(character.avatar)
         ) {
             template.css({ 'order': group.members.indexOf(character.avatar) });
+            template.toggleClass('disabled', group.disabled_members.includes(character.avatar));
             $("#rm_group_members").append(template);
         } else {
             $("#rm_group_add_members").append(template);
@@ -1030,6 +1020,23 @@ function select_group_chats(groupId, skipAnimation) {
             await modifyGroupMember(groupId, member, false);
         }
 
+        if (action === 'enable') {
+            member.removeClass('disabled');
+            const _thisGroup = groups.find(x => x.id === groupId);
+            const index = _thisGroup.disabled_members.indexOf(member.data('id'));
+            if (index !== -1) {
+                _thisGroup.disabled_members.splice(index, 1);
+            }
+            await editGroup(groupId);
+        }
+
+        if (action === 'disable') {
+            member.addClass('disabled');
+            const _thisGroup = groups.find(x => x.id === groupId);
+            _thisGroup.disabled_members.push(member.data('id'));
+            await editGroup(groupId);
+        }
+
         if (action === 'up' || action === 'down') {
             await reorderGroupMember(groupId, member, action);
         }
@@ -1138,6 +1145,7 @@ async function createGroup() {
             avatar_url: avatar_url,
             allow_self_responses: allow_self_responses,
             activation_strategy: activation_strategy,
+            disabled_members: [],
             chat_metadata: {},
             fav: fav_grp_checked,
             chat_id: chatName,

public/style.css

@@ -3000,11 +3000,28 @@ body .ui-widget-content li:hover {
     align-items: center;
 }
 
+#rm_group_members .right_menu_button[data-action="speak"],
+#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"] {
+    opacity: 0.4;
+    filter: brightness(0.5);
+    transition: all 0.2s ease-in-out;
+}
+
+#rm_group_members .right_menu_button[data-action="speak"]:hover,
+#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"]:hover {
+    opacity: inherit;
+    filter: inherit;
+}
+
+#rm_group_members .right_menu_button[data-action="speak"]:hover {
+    filter: drop-shadow(0px 0px 2px green);
+}
+
 /* Rules for icon display */
-#rm_group_members .group_member[order="start"] .fa-chevron-down,
+#rm_group_add_members .right_menu_button:not([data-action="add"], [data-action="view"]),
-#rm_group_members .group_member[order="end"] .fa-chevron-up,
+#rm_group_members .right_menu_button[data-action="add"],
-#rm_group_add_members .right_menu_button:not(.fa-plus, .fa-id-badge),
+#rm_group_members .group_member.disabled .right_menu_button[data-action="disable"],
-#rm_group_members .fa-plus {
+#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="enable"] {
     display: none;
 }
 

server.js

@@ -1993,6 +1993,7 @@ app.post('/creategroup', jsonParser, (request, response) => {
         avatar_url: request.body.avatar_url,
         allow_self_responses: !!request.body.allow_self_responses,
         activation_strategy: request.body.activation_strategy ?? 0,
+        disabled_members: request.body.disabled_members ?? [],
         chat_metadata: request.body.chat_metadata ?? {},
         fav: request.body.fav,
         chat_id: request.body.chat_id ?? id,