Merge pull request #2919 from SillyTavern/swipe-nums-for-all-mes add swipe counter to all messages (needs debug)

14fb42be444f5ec36eead6ba3663b9fa804909ab

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

Signed
Parents: 6ba60e8f60251373c4a07593a09dd99eb16f7d56 7d0cc9e372b57efd2d31baa78f1a7160aa128184
4 files changed, +87 -31Ignore whitespace
public/index.html+8 -3
@@ -4010,6 +4010,10 @@
40104010 <input id="compact_input_area" type="checkbox" />
40114011 <small data-i18n="Compact Input Area (Mobile)">Compact Input Area</small><i class="fa-solid fa-mobile-screen-button"></i>
40124012 </label>
4013+ <label for="show_swipe_num_all_messages" class="checkbox_label" title="Display swipe numbers for all messages, not just the last." data-i18n="[title]Display swipe numbers for all messages, not just the last.">
4014+ <input id="show_swipe_num_all_messages" type="checkbox" />
4015+ <small data-i18n="Swipe # for All Messages">Swipe # for All Messages</small><i class="fa-solid fa-mobile-screen-button"></i>
4016+ </label>
40134017 <label for="hotswapEnabled" class="checkbox_label" title="In the Character Management panel, show quick selection buttons for favorited characters." data-i18n="[title]In the Character Management panel, show quick selection buttons for favorited characters">
40144018 <input id="hotswapEnabled" type="checkbox" />
40154019 <small data-i18n="Characters Hotswap">Characters Hotswap</small>
@@ -5938,9 +5942,10 @@
59385942 </div>
59395943 <div class="mes_bias"></div>
59405944 </div>
59415945 <div class="swipe_right faflex-solidcontainer fa-chevron-right"swipeRightBlock style="display:flexFlowColumn none;flexNoGap">
59425946 <div class="swipesswipe_right fa-countersolid fa-chevron-right" style="display: none;"></div>
5943- </div>
5947+ <div class="swipes-counter"></div>
5948+ </div>
59445949 </div>
59455950 </div>
59465951 <div id="group_avatars_template" class="template_element">
public/script.js+31 -20
@@ -83,6 +83,7 @@ import {
8383 resetMovableStyles,
8484 forceCharacterEditorTokenize,
8585 applyPowerUserSettings,
86+ switchSwipeNumAllMessages,
8687} from './scripts/power-user.js';
8788
8889import {
@@ -2369,6 +2370,13 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
23692370
23702371 addCopyToCodeBlocks(newMessage);
23712372
2373+ // Set the swipes counter for past messages, only visible if 'Show Swipes on All Message' is enabled
2374+ if (!params.isUser && newMessageId !== 0 && newMessageId !== chat.length - 1) {
2375+ const swipesNum = chat[newMessageId].swipes?.length;
2376+ const swipeId = chat[newMessageId].swipe_id + 1;
2377+ newMessage.find('.swipes-counter').text(`${swipeId}\u200B/\u200b${swipesNum}`);
2378+ }
2379+
23722380 if (showSwipes) {
23732381 $('#chat .mes').last().addClass('last_mes');
23742382 $('#chat .mes').eq(-2).removeClass('last_mes');
@@ -7471,7 +7479,6 @@ export function showSwipeButtons() {
74717479 //had to add this to make the swipe counter work
74727480 //(copied from the onclick functions for swipe buttons..
74737481 //don't know why the array isn't set for non-swipe messsages in Generate or addOneMessage..)
7474-
74757482 if (chat[chat.length - 1]['swipe_id'] === undefined) { // if there is no swipe-message in the last spot of the chat array
74767483 chat[chat.length - 1]['swipe_id'] = 0; // set it to id 0
74777484 chat[chat.length - 1]['swipes'] = []; // empty the array
@@ -7481,32 +7488,36 @@ export function showSwipeButtons() {
74817488 const currentMessage = $('#chat').children().filter(`[mesid="${chat.length - 1}"]`);
74827489 const swipeId = chat[chat.length - 1].swipe_id;
74837490 const swipeCounterText = (`${(swipeId + 1)}\u200B/\u200b${(chat[chat.length - 1].swipes.length)}`);
7491+ const swipeRight = currentMessage.find('.swipe_right');
7492+ const swipeLeft = currentMessage.find('.swipe_left');
7493+ const swipeCounter = currentMessage.find('.swipes-counter');
74847494
74857495 if (swipeId !== undefined && (chat[chat.length - 1].swipes.length > 1 || swipeId > 0)) {
74867496 currentMessage.children('.swipe_left')swipeLeft.css('display', 'flex');
74877497 }
74887498 //only show right when generate is off, or when next right swipe would not make a generate happen
74897499 if (is_send_press === false || chat[chat.length - 1].swipes.length >= swipeId) {
74907500 currentMessageswipeRight.childrencss('.swipe_rightdisplay', 'flex').css('displayopacity', 'flex0.3');
74917501 currentMessage.children('.swipe_right')swipeCounter.css('opacity', '0.3');
74927502 }
7493- //console.log((chat[chat.length - 1]));
74947503 if ((chat[chat.length - 1].swipes.length - swipeId) === 1) {
7495- //console.log('highlighting R swipe');
7504+ //chevron was moved out of hardcode in HTML to class toggle dependent on last_mes or not
7496- currentMessage.children('.swipe_right').css('opacity', '0.7');
7505+ //necessary for 'swipe_right' div in past messages to have no chevron if 'show swipes for all messages' is turned on
7506+ swipeRight.css('opacity', '0.7');
7507+ swipeCounter.css('opacity', '0.7');
74977508 }
7498- //console.log(swipesCounterHTML);
74997509
7500- $('.swipes-counter').text(swipeCounterText);
7510+ //allows for writing individual swipe counters for past messages
7511+ const lastSwipeCounter = $('.last_mes .swipes-counter');
7512+ lastSwipeCounter.text(swipeCounterText).show();
75017513
75027514 //console.logswitchSwipeNumAllMessages(swipeId);
7503- //console.log(chat[chat.length - 1].swipes.length);
75047515}
75057516
75067517export function hideSwipeButtons() {
7507- //console.log('hideswipebuttons entered');
7518+ $('#chat').find('.swipe_right').hide();
75087519 $('#chat').find('.swipe_rightlast_mes .swipes-counter').csshide('display', 'none');
75097520 $('#chat').find('.swipe_left').csshide('display', 'none');
75107521}
75117522
75127523/**
@@ -8341,8 +8352,8 @@ const swipe_right = () => {
83418352 }
83428353
83438354 const currentMessage = $('#chat').children().filter(`[mesid="${chat.length - 1}"]`);
83448355 let this_div = currentMessage.childrenfind('.swipe_right');
83458356 let this_mes_div = this_div.parent().parent();
83468357
83478358 if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now)
83488359 chat[chat.length - 1]['swipe_id'] = chat[chat.length - 1]['swipes'].length; //show that message slot (will be '...' while generating)
@@ -8352,7 +8363,7 @@ const swipe_right = () => {
83528363 }
83538364 // handles animated transitions when swipe right, specifically height transitions between messages
83548365 if (run_generate || run_swipe_right) {
83558366 let this_mes_block = this_mes_div.childrenfind('.mes_block').children(' .mes_text');
83568367 const this_mes_div_height = this_mes_div[0].scrollHeight;
83578368 const this_mes_block_height = this_mes_block[0].scrollHeight;
83588369
@@ -9409,9 +9420,9 @@ jQuery(async function () {
94099420
94109421 ///// SWIPE BUTTON CLICKS ///////
94119422
9412- $(document).on('click', '.swipe_right', swipe_right);
9423+ //limit swiping to only last message clicks
9413-
9424+ $(document).on('click', '.last_mes .swipe_right', swipe_right);
94149425 $(document).on('click', '.last_mes .swipe_left', swipe_left);
94159426
94169427 const debouncedCharacterSearch = debounce((searchQuery) => {
94179428 entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);
public/scripts/power-user.js+21 -0
@@ -290,6 +290,7 @@ let power_user = {
290290 restore_user_input: true,
291291 reduced_motion: false,
292292 compact_input_area: true,
293+ show_swipe_num_all_messages: false,
293294 auto_connect: false,
294295 auto_load_chat: false,
295296 forbid_external_media: true,
@@ -469,6 +470,11 @@ function switchCompactInputArea() {
469470 $('#compact_input_area').prop('checked', power_user.compact_input_area);
470471}
471472
473+export function switchSwipeNumAllMessages() {
474+ $('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);
475+ $('.mes:not(.last_mes) .swipes-counter').css('opacity', '').toggle(power_user.show_swipe_num_all_messages);
476+}
477+
472478var originalSliderValues = [];
473479
474480async function switchLabMode() {
@@ -1283,6 +1289,13 @@ function applyTheme(name) {
12831289 switchCompactInputArea();
12841290 },
12851291 },
1292+ {
1293+ key: 'show_swipe_num_all_messages',
1294+ action: () => {
1295+ $('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);
1296+ switchSwipeNumAllMessages();
1297+ },
1298+ },
12861299 ];
12871300
12881301 for (const { key, selector, type, action } of themeProperties) {
@@ -1352,6 +1365,7 @@ function applyPowerUserSettings() {
13521365 switchHideChatAvatars();
13531366 switchTokenCount();
13541367 switchMessageActions();
1368+ switchSwipeNumAllMessages();
13551369}
13561370
13571371function getExampleMessagesBehavior() {
@@ -2296,6 +2310,7 @@ function getThemeObject(name) {
22962310 zoomed_avatar_magnification: power_user.zoomed_avatar_magnification,
22972311 reduced_motion: power_user.reduced_motion,
22982312 compact_input_area: power_user.compact_input_area,
2313+ show_swipe_num_all_messages: power_user.show_swipe_num_all_messages,
22992314 };
23002315}
23012316
@@ -3755,6 +3770,12 @@ $(document).ready(() => {
37553770 saveSettingsDebounced();
37563771 });
37573772
3773+ $('#show_swipe_num_all_messages').on('input', function () {
3774+ power_user.show_swipe_num_all_messages = !!$(this).prop('checked');
3775+ switchSwipeNumAllMessages();
3776+ saveSettingsDebounced();
3777+ });
3778+
37583779 $('#auto-connect-checkbox').on('input', function () {
37593780 power_user.auto_connect = !!$(this).prop('checked');
37603781 saveSettingsDebounced();
public/style.css+27 -8
@@ -969,34 +969,53 @@ body .panelControlBar {
969969
970970/* SWIPE RELATED STYLES*/
971971
972+.mes {
973+ --swipeCounterHeight: 15px;
974+ --swipeCounterMargin: 5px;
975+}
976+
972977.swipe_right,
973978.swipe_left {
974979 heightwidth: 40px25px;
975980 widthheight: 40px25px;
976981 opacity: 0.3;
977982 align-items: center;
978983 justify-content: center;
979984 z-index: 9999;
980985 grid-row-start: 2;
981986 font-size: 30px20px;
982987 cursor: pointer;
983988 align-self: center;
989+}
990+
991+.swipe_left {
984992 position: absolute;
985-bottom: 15px;
993+ bottom: calc(var(--swipeCounterHeight) + var(--swipeCounterMargin));
986994 flex-flow: column;
987995}
988996
997+.swipeRightBlock {
998+ position: absolute;
999+ right: 0;
1000+ bottom: 0;
1001+}
9891002
9901003.swipes-counter {
9911004 color: var(--SmartThemeBodyColor);
9921005 font-size: 12px;
9931006 padding: 0 5px;
9941007 font-family: var(--mainFontFamily);
9951008 font-weight: 400;
9961009 align-self: center;
9971010 min-width: 40px;
9981011 display: flex;
9991012 justify-content: center;
1013+ margin-bottom: var(--swipeCounterMargin);
1014+ height: var(--swipeCounterHeight);
1015+}
1016+
1017+.mes:not(.last_mes) .swipes-counter {
1018+ opacity: 0.3;
10001019}
10011020
10021021.swipe_left {
@@ -1006,7 +1025,7 @@ flex-flow: column;
10061025
10071026.swipe_right {
10081027 right: 5px;
10091028 align-self:end center;
10101029}
10111030
10121031.ui-settings {
@@ -2640,7 +2659,7 @@ select option:not(:checked) {
26402659
26412660#instruct_enabled_label .menu_button:not(.toggleEnabled),
26422661#sysprompt_enabled_label .menu_button:not(.toggleEnabled) {
26432662 color: Red;
26442663}
26452664
26462665.displayBlock {