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
Parents: 1185e20002b4a32ca0720ce9033e4f0aab1cdf0b ffea974b076e13cd1781aaf78bc2cbdfed3cb6f4
5 files changed, +59 -1Ignore whitespace
public/css/rm-groups.css+1 -1
@@ -68,9 +68,9 @@
6868 margin-top: 0.25rem;
6969 margin-bottom: 0.5rem;
7070 border: 1px solid var(--SmartThemeBorderColor);
71- ;
7271 border-radius: 10px;
7372 background-color: var(--black30a);
73+ padding: 2px;
7474}
7575
7676#rm_group_buttons_expander {
public/index.html+5 -0
@@ -4141,6 +4141,10 @@
41414141 <input id="request_token_probabilities" type="checkbox" />
41424142 <small data-i18n="Request token probabilities">Request token probabilities</small>
41434143 </label>
4144+ <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.">
4145+ <input id="show_group_chat_queue" type="checkbox" />
4146+ <small data-i18n="Show group chat queue">Show group chat queue</small>
4147+ </label>
41444148 <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
41454149 <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">
41464150 <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>
@@ -5796,6 +5800,7 @@
57965800 <div class="tags tags_inline"></div>
57975801 </div>
57985802 <input class="ch_fav" value="" hidden />
5803+ <div class="queue_position"></div>
57995804 <div class="group_member_icon">
58005805 <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>
58015806 <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
@@ -70,6 +70,7 @@ import {
7070 animation_duration,
7171 depth_prompt_role_default,
7272 shouldAutoContinue,
73+ this_chid,
7374} from '../script.js';
7475import { printTagList, createTagMapFromList, applyTagsOnCharacterSelect, tag_map, applyTagsOnGroupSelect } from './tags.js';
7576import { FILTER_TYPES, FilterHelper } from './filters.js';
@@ -120,6 +121,8 @@ const DEFAULT_AUTO_MODE_DELAY = 5;
120121export const groupCandidatesFilter = new FilterHelper(debounce(printGroupCandidates, debounce_timeout.quick));
121122let autoModeWorker = null;
122123const saveGroupDebounced = debounce(async (group, reload) => await _save(group, reload), debounce_timeout.relaxed);
124+/** @type {Map<string, number>} */
125+let groupChatQueueOrder = new Map();
123126
124127function setAutoModeWorker() {
125128 clearInterval(autoModeWorker);
@@ -857,7 +860,13 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
857860 await saveChatConditional();
858861 $('#send_textarea').val('')[0].dispatchEvent(new Event('input', { bubbles: true }));
859862 }
863+ groupChatQueueOrder = new Map();
860864
865+ if (power_user.show_group_chat_queue) {
866+ for (let i = 0; i < activatedMembers.length; ++i) {
867+ groupChatQueueOrder.set(characters[activatedMembers[i]].avatar, i + 1);
868+ }
869+ }
861870 // now the real generation begins: cycle through every activated character
862871 for (const chId of activatedMembers) {
863872 throwIfAborted();
@@ -865,6 +874,9 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
865874 const generateType = type == 'swipe' || type == 'impersonate' || type == 'quiet' || type == 'continue' ? type : 'group_chat';
866875 setCharacterId(chId);
867876 setCharacterName(characters[chId].name);
877+ if (power_user.show_group_chat_queue) {
878+ printGroupMembers();
879+ }
868880 await eventSource.emit(event_types.GROUP_MEMBER_DRAFTED, chId);
869881
870882 if (type !== 'swipe' && type !== 'impersonate' && !isStreamingEnabled()) {
@@ -885,6 +897,10 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
885897 messageChunk = textResult?.messageChunk;
886898 }
887899 }
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+ }
888904 }
889905 } finally {
890906 typingIndicator.hide();
@@ -892,6 +908,10 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
892908 is_group_generating = false;
893909 setSendButtonState(false);
894910 setCharacterId(undefined);
911+ if (power_user.show_group_chat_queue) {
912+ groupChatQueueOrder = new Map();
913+ printGroupMembers();
914+ }
895915 setCharacterName('');
896916 activateSendButtons();
897917 showSwipeButtons();
@@ -1318,6 +1338,14 @@ function getGroupCharacterBlock(character) {
13181338 template.attr('chid', characters.indexOf(character));
13191339 template.find('.ch_fav').val(isFav);
13201340 template.toggleClass('is_fav', isFav);
1341+
1342+ let queuePosition = groupChatQueueOrder.get(character.avatar);
1343+ if (queuePosition) {
1344+ template.find('.queue_position').text(queuePosition);
1345+ template.toggleClass('is_queued', queuePosition > 1);
1346+ template.toggleClass('is_active', queuePosition === 1);
1347+ }
1348+
13211349 template.toggleClass('disabled', isGroupMemberDisabled(character.avatar));
13221350
13231351 // Display inline tags
@@ -1610,6 +1638,7 @@ export async function openGroupById(groupId) {
16101638 select_group_chats(groupId);
16111639
16121640 if (selected_group !== groupId) {
1641+ groupChatQueueOrder = new Map();
16131642 await clearChat();
16141643 cancelTtsPlay();
16151644 selected_group = groupId;
public/scripts/power-user.js+7 -0
@@ -179,6 +179,7 @@ let power_user = {
179179 send_on_enter: send_on_enter_options.AUTO,
180180 console_log_prompts: false,
181181 request_token_probabilities: false,
182+ show_group_chat_queue: false,
182183 render_formulas: false,
183184 allow_name1_display: false,
184185 allow_name2_display: false,
@@ -1601,6 +1602,7 @@ function loadPowerUserSettings(settings, data) {
16011602
16021603 $('#console_log_prompts').prop('checked', power_user.console_log_prompts);
16031604 $('#request_token_probabilities').prop('checked', power_user.request_token_probabilities);
1605+ $('#show_group_chat_queue').prop('checked', power_user.show_group_chat_queue);
16041606 $('#auto_fix_generated_markdown').prop('checked', power_user.auto_fix_generated_markdown);
16051607 $('#auto_scroll_chat_to_bottom').prop('checked', power_user.auto_scroll_chat_to_bottom);
16061608 $('#bogus_folders').prop('checked', power_user.bogus_folders);
@@ -3567,6 +3569,11 @@ $(document).ready(() => {
35673569 saveSettingsDebounced();
35683570 });
35693571
3572+ $('#show_group_chat_queue').on('input', function () {
3573+ power_user.show_group_chat_queue = !!$(this).prop('checked');
3574+ saveSettingsDebounced();
3575+ });
3576+
35703577 $('#auto_scroll_chat_to_bottom').on('input', function () {
35713578 power_user.auto_scroll_chat_to_bottom = !!$(this).prop('checked');
35723579 saveSettingsDebounced();
public/style.css+17 -0
@@ -2922,6 +2922,23 @@ input[type=search]:focus::-webkit-search-cancel-button {
29222922 position: relative;
29232923}
29242924
2925+.group_member .queue_position:not(:empty)::before {
2926+ content: "#";
2927+}
2928+
2929+.group_member .queue_position {
2930+ margin-right: 0.75rem;
2931+ font-size: calc(var(--mainFontSize) * 0.9);
2932+}
2933+
2934+.group_member.is_queued {
2935+ outline: 2px solid var(--golden);
2936+}
2937+
2938+.group_member.is_active {
2939+ outline: 2px solid var(--active);
2940+}
2941+
29252942.character_select.is_fav .avatar,
29262943.group_select.is_fav .avatar,
29272944.group_member.is_fav .avatar,