Merge pull request #2469 from Esalarc/group_chat_queue_display Adding display of queued speakers in group chat windows.

8fe111cc7155c6d21cd1cb848ebd0b19e13ab675

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/css/rm-groups.css+1 -1 Viewed

     margin-top: 0.25rem;
     margin-bottom: 0.5rem;
     border: 1px solid var(--SmartThemeBorderColor);
-    ;
     border-radius: 10px;
     background-color: var(--black30a);
+    padding: 2px;
+}
 #rm_group_buttons_expander {

public/index.html+5 -0 Viewed

                                     <input id="request_token_probabilities" type="checkbox" />
                                     <small data-i18n="Request token probabilities">Request token probabilities</small>
                                 </label>
+                                <label data-newbie-hidden class="checkbox_label" for="show_group_chat_queue" title="In group chat, highlight the character(s) that are currently queued to generate responses and the order in which they will respond." data-i18n="[title]In group chat, highlight the character(s) that are currently queued to generate responses and the order in which they will respond.">
+                                    <input id="show_group_chat_queue" type="checkbox" />
+                                    <small data-i18n="Show group chat queue">Show group chat queue</small>
+                                </label>
                                 <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
                                     <div class="inline-drawer-toggle inline-drawer-header userSettingsInnerExpandable" title="Automatically reject and re-generate AI message based on configurable criteria." data-i18n="[title]Automatically reject and re-generate AI message based on configurable criteria">
                                         <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>

                 <div class="tags tags_inline"></div>
             </div>
             <input class="ch_fav" value="" hidden />
+            <div class="queue_position"></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" data-i18n="[title]Temporarily disable automatic replies from this character"></div>
                 <div title="Enable automatic replies from this character" data-action="enable" class="right_menu_button fa-solid fa-lg fa-comment-slash" data-i18n="[title]Enable automatic replies from this character"></div>

public/scripts/group-chats.js+29 -0 Viewed

     animation_duration,
     depth_prompt_role_default,
     shouldAutoContinue,
+    this_chid,
 } from '../script.js';
 import { printTagList, createTagMapFromList, applyTagsOnCharacterSelect, tag_map, applyTagsOnGroupSelect } from './tags.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';

 export const groupCandidatesFilter = new FilterHelper(debounce(printGroupCandidates, debounce_timeout.quick));
 let autoModeWorker = null;
 const saveGroupDebounced = debounce(async (group, reload) => await _save(group, reload), debounce_timeout.relaxed);
+/** @type {Map<string, number>} */
+let groupChatQueueOrder = new Map();
 function setAutoModeWorker() {
     clearInterval(autoModeWorker);

             await saveChatConditional();
             $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles: true }));
+        }
+        groupChatQueueOrder = new Map();
+        if (power_user.show_group_chat_queue) {
+            for (let i = 0; i < activatedMembers.length; ++i) {
+                groupChatQueueOrder.set(characters[activatedMembers[i]].avatar, i + 1);
+            }
+        }
         // now the real generation begins: cycle through every activated character
         for (const chId of activatedMembers) {
             throwIfAborted();

             const generateType = type == 'swipe' || type == 'impersonate' || type == 'quiet' || type == 'continue' ? type : 'group_chat';
             setCharacterId(chId);
             setCharacterName(characters[chId].name);
+            if (power_user.show_group_chat_queue) {
+                printGroupMembers();
+            }
             await eventSource.emit(event_types.GROUP_MEMBER_DRAFTED, chId);
             if (type !== 'swipe' && type !== 'impersonate' && !isStreamingEnabled()) {

@@ -885,6 +897,10 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
885	messageChunk = textResult?.messageChunk;	897	messageChunk = textResult?.messageChunk;
886	}	898	}
887	}	899	}
		900	if (power_user.show_group_chat_queue) {
		901	groupChatQueueOrder.delete(characters[chId].avatar);
		902	groupChatQueueOrder.forEach((value, key, map) => map.set(key, value - 1));
		903	}
888	}	904	}
889	} finally {	905	} finally {
890	typingIndicator.hide();	906	typingIndicator.hide();

         is_group_generating = false;
         setSendButtonState(false);
         setCharacterId(undefined);
+        if (power_user.show_group_chat_queue) {
+            groupChatQueueOrder = new Map();
+            printGroupMembers();
+        }
         setCharacterName('');
         activateSendButtons();
         showSwipeButtons();

     template.attr('chid', characters.indexOf(character));
     template.find('.ch_fav').val(isFav);
     template.toggleClass('is_fav', isFav);
+    let queuePosition = groupChatQueueOrder.get(character.avatar);
+    if (queuePosition) {
+        template.find('.queue_position').text(queuePosition);
+        template.toggleClass('is_queued', queuePosition > 1);
+        template.toggleClass('is_active', queuePosition === 1);
+    }
     template.toggleClass('disabled', isGroupMemberDisabled(character.avatar));
     // Display inline tags

         select_group_chats(groupId);
         if (selected_group !== groupId) {
+            groupChatQueueOrder = new Map();
             await clearChat();
             cancelTtsPlay();
             selected_group = groupId;

public/scripts/power-user.js+7 -0 Viewed

     send_on_enter: send_on_enter_options.AUTO,
     console_log_prompts: false,
     request_token_probabilities: false,
+    show_group_chat_queue: false,
     render_formulas: false,
     allow_name1_display: false,
     allow_name2_display: false,

     $('#console_log_prompts').prop('checked', power_user.console_log_prompts);
     $('#request_token_probabilities').prop('checked', power_user.request_token_probabilities);
+    $('#show_group_chat_queue').prop('checked', power_user.show_group_chat_queue);
     $('#auto_fix_generated_markdown').prop('checked', power_user.auto_fix_generated_markdown);
     $('#auto_scroll_chat_to_bottom').prop('checked', power_user.auto_scroll_chat_to_bottom);
     $('#bogus_folders').prop('checked', power_user.bogus_folders);

         saveSettingsDebounced();
     });
+    $('#show_group_chat_queue').on('input', function () {
+        power_user.show_group_chat_queue = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
     $('#auto_scroll_chat_to_bottom').on('input', function () {
         power_user.auto_scroll_chat_to_bottom = !!$(this).prop('checked');
         saveSettingsDebounced();

public/style.css+17 -0 Viewed

     position: relative;
+}
+.group_member .queue_position:not(:empty)::before {
+    content: "#";
+}
+.group_member .queue_position {
+    margin-right: 0.75rem;
+    font-size: calc(var(--mainFontSize) * 0.9);
+}
+.group_member.is_queued {
+    outline: 2px solid var(--golden);
+}
+.group_member.is_active {
+    outline: 2px solid var(--active);
+}
 .character_select.is_fav .avatar,
 .group_select.is_fav .avatar,
 .group_member.is_fav .avatar,