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

2fccd83083b714e165eda5102112b7b21ba4865c

David Fedolfi <dfedolfi@gmail.com>

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]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>

                 <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+19 -16 Viewed

 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);

         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 = {}) {
859	await saveChatConditional();	859	await saveChatConditional();
860	$('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));	860	$('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles:true }));
861	}	861	}
862	if (showChatQueue){	862	groupChatQueueOrder = new Map();
		863
		864	if (power_user.show_group_chat_queue){
863	for (let i = 0; i < activatedMembers.length; ++i){	865	for (let i = 0; i < activatedMembers.length; ++i){
864	characters[activatedMembers[i]].queueOrder = (i+1);	866	groupChatQueueOrder.set(characters[activatedMembers[i]].avatar, i+1);
865	}	867	}
866	}	868	}
867	// now the real generation begins: cycle through every activated character	869	// now the real generation begins: cycle through every activated character

             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 = {}) {
894	messageChunk = textResult?.messageChunk;	896	messageChunk = textResult?.messageChunk;
895	}	897	}
896	}	898	}
897	if (showChatQueue){	899	if (power_user.show_group_chat_queue){
898	activatedMembers.filter(chidx => characters[chidx].queueOrder > 0)	900	groupChatQueueOrder.delete(characters[chId].avatar);
899	.forEach(chindex => characters[chindex].queueOrder -= 1);	901	groupChatQueueOrder.forEach((value, key, map) => map.set(key, value-1));
900	}	902	}
901	}	903	}
902	} finally {	904	} finally {

         is_group_generating = false;
         setSendButtonState(false);
         setCharacterId(undefined);
+        if (power_user.show_group_chat_queue){
-        if (showChatQueue){
+            groupChatQueueOrder = new Map();
-            group.members.forEach(avatar => {
-                let character = characters.find(x => x.avatar === avatar || x.name === avatar);
-                character.queueOrder = undefined;
-            });
             printGroupMembers();
+        }
         setCharacterName('');

     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+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+8 -0 Viewed

     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);
+}