Group Chat Queue Display

- removing queue position from character object - storing in map in group_chat.js instead
- moving queue position to div
- moving '#' from js to css ::before
- adding option to settings
- cleaning up guards

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]Requests logprobs from the API for the Token Probabilities feature">
+                                    <input id="show_group_chat_queue" type="checkbox" />
+                                    <small data-i18n="Request token probabilities">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

@@ -121,6 +121,7 @@ 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);
+let groupChatQueueOrder = new Map();
 
 function setAutoModeWorker() {
     clearInterval(autoModeWorker);
@@ -787,7 +788,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
         return Promise.resolve();
     }
     
-    const showChatQueue = (!(typingIndicator.length === 0 && !isStreamingEnabled()) && openGroupId);
     try {
         throwIfAborted();
         hideSwipeButtons();
@@ -859,9 +859,11 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
             await saveChatConditional();
             $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
         }
-        if (showChatQueue){
+        groupChatQueueOrder = new Map();
+
+        if (power_user.show_group_chat_queue){
             for (let i = 0; i < activatedMembers.length; ++i){
-                characters[activatedMembers[i]].queueOrder = (i+1);
+                groupChatQueueOrder.set(characters[activatedMembers[i]].avatar, i+1);
             }
         }
         // now the real generation begins: cycle through every activated character
@@ -871,7 +873,7 @@ 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 (showChatQueue){
+            if (power_user.show_group_chat_queue){
                 printGroupMembers();
             }
             await eventSource.emit(event_types.GROUP_MEMBER_DRAFTED, chId);
@@ -894,9 +896,9 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
                     messageChunk = textResult?.messageChunk;
                 }
             }
-            if (showChatQueue){
-                activatedMembers.filter(chidx => characters[chidx].queueOrder > 0)
-                                .forEach(chindex => characters[chindex].queueOrder -= 1);
+            if (power_user.show_group_chat_queue){
+                groupChatQueueOrder.delete(characters[chId].avatar);
+                groupChatQueueOrder.forEach((value, key, map) => map.set(key, value-1));
             }
         }
     } finally {
@@ -905,12 +907,8 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
         is_group_generating = false;
         setSendButtonState(false);
         setCharacterId(undefined);
-        
-        if (showChatQueue){
-            group.members.forEach(avatar => {
-                let character = characters.find(x => x.avatar === avatar || x.name === avatar);
-                character.queueOrder = undefined;
-            });
+        if (power_user.show_group_chat_queue){
+            groupChatQueueOrder = new Map();
             printGroupMembers();
         }
         setCharacterName('');
@@ -1333,10 +1331,15 @@ function getGroupCharacterBlock(character) {
     template.find('.ch_name').text(character.name + (character.queueOrder > 0?'   (#' + character.queueOrder + ')':''));    template.attr('chid', characters.indexOf(character));
     template.find('.ch_fav').val(isFav);
     template.toggleClass('is_fav', isFav);
-    template.toggleClass('is_active', character.queueOrder === 1);
-    template.toggleClass('is_queued', character.queueOrder > 1);
+    
+    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));
-    template.toggleClass('is_active', character.avatar === (this_chid && characters[this_chid] && characters[this_chid].avatar));
 
     // Display inline tags
     const tagsElement = template.find('.tags');

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,14 @@ input[type=search]:focus::-webkit-search-cancel-button {
     position: relative;
 }
 
+.group_member .queue_position:not(:empty)::before {  
+    content: "#";
+}
+
+.group_member .queue_position{
+    margin-right: 1rem;
+}
+
 .group_member.is_queued {
     border: 2px solid var(--golden);
 }