Merge pull request #2469 from Esalarc/group_chat_queue_display

Adding display of queued speakers in group chat windows.

public/css/rm-groups.css

@@ -68,9 +68,9 @@
     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

@@ -4141,6 +4141,10 @@
                                     <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>
@@ -5796,6 +5800,7 @@
                 <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

@@ -70,6 +70,7 @@ import {
     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';
@@ -120,6 +121,8 @@ const DEFAULT_AUTO_MODE_DELAY = 5;
 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);
@@ -857,7 +860,13 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
             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();
@@ -865,6 +874,9 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
             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 = {}) {
                     messageChunk = textResult?.messageChunk;
                 }
             }
+            if (power_user.show_group_chat_queue) {
+                groupChatQueueOrder.delete(characters[chId].avatar);
+                groupChatQueueOrder.forEach((value, key, map) => map.set(key, value - 1));
+            }
         }
     } finally {
         typingIndicator.hide();
@@ -892,6 +908,10 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
         is_group_generating = false;
         setSendButtonState(false);
         setCharacterId(undefined);
+        if (power_user.show_group_chat_queue) {
+            groupChatQueueOrder = new Map();
+            printGroupMembers();
+        }
         setCharacterName('');
         activateSendButtons();
         showSwipeButtons();
@@ -1318,6 +1338,14 @@ function getGroupCharacterBlock(character) {
     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
@@ -1610,6 +1638,7 @@ export async function openGroupById(groupId) {
         select_group_chats(groupId);
 
         if (selected_group !== groupId) {
+            groupChatQueueOrder = new Map();
             await clearChat();
             cancelTtsPlay();
             selected_group = groupId;

public/scripts/power-user.js

@@ -179,6 +179,7 @@ let power_user = {
     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,
@@ -1601,6 +1602,7 @@ function loadPowerUserSettings(settings, data) {
 
     $('#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);
@@ -3567,6 +3569,11 @@ $(document).ready(() => {
         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

@@ -2922,6 +2922,23 @@ input[type=search]:focus::-webkit-search-cancel-button {
     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,