rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-03-02 02:47:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2919 from SillyTavern/swipe-nums-for-all-mes

Browse Source 
add swipe counter to all messages (needs debug)
This commit is contained in:
Cohee 2024-10-01 21:19:39 +03:00 committed by GitHub
commit 14fb42be44
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 88 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@ -4010,6 +4010,10 @@
<input id="compact_input_area" type="checkbox" />
<small data-i18n="Compact Input Area (Mobile)">Compact Input Area</small><i class="fa-solid fa-mobile-screen-button"></i>
</label>
<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.">
<input id="show_swipe_num_all_messages" type="checkbox" />
<small data-i18n="Swipe # for All Messages">Swipe # for All Messages</small><i class="fa-solid fa-mobile-screen-button"></i>
</label>
<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">
<input id="hotswapEnabled" type="checkbox" />
<small data-i18n="Characters Hotswap">Characters Hotswap</small>
@ -5938,9 +5942,10 @@
</div>
<div class="mes_bias"></div>
</div>
<div class="swipe_right fa-solid fa-chevron-right" style="display: none;">
<div class="swipes-counter"></div>
</div>
<div class="flex-container swipeRightBlock flexFlowColumn flexNoGap">
<div class="swipe_right fa-solid fa-chevron-right" style="display: none;"></div>
<div class="swipes-counter"></div>
</div>
</div>
</div>
<div id="group_avatars_template" class="template_element">

51
public/script.js
View File

@ -83,6 +83,7 @@ import {
resetMovableStyles,
forceCharacterEditorTokenize,
applyPowerUserSettings,
switchSwipeNumAllMessages,
} from './scripts/power-user.js';
import {
@ -2369,6 +2370,13 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
addCopyToCodeBlocks(newMessage);
// Set the swipes counter for past messages, only visible if 'Show Swipes on All Message' is enabled
if (!params.isUser && newMessageId !== 0 && newMessageId !== chat.length - 1) {
const swipesNum = chat[newMessageId].swipes?.length;
const swipeId = chat[newMessageId].swipe_id + 1;
newMessage.find('.swipes-counter').text(`${swipeId}\u200B/\u200b${swipesNum}`);
}
if (showSwipes) {
$('#chat .mes').last().addClass('last_mes');
$('#chat .mes').eq(-2).removeClass('last_mes');
@ -7471,7 +7479,6 @@ export function showSwipeButtons() {
//had to add this to make the swipe counter work
//(copied from the onclick functions for swipe buttons..
//don't know why the array isn't set for non-swipe messsages in Generate or addOneMessage..)
if (chat[chat.length - 1]['swipe_id'] === undefined) { // if there is no swipe-message in the last spot of the chat array
chat[chat.length - 1]['swipe_id'] = 0; // set it to id 0
chat[chat.length - 1]['swipes'] = []; // empty the array
@ -7481,32 +7488,36 @@ export function showSwipeButtons() {
const currentMessage = $('#chat').children().filter(`[mesid="${chat.length - 1}"]`);
const swipeId = chat[chat.length - 1].swipe_id;
const swipeCounterText = (`${(swipeId + 1)}\u200B/\u200b${(chat[chat.length - 1].swipes.length)}`);
const swipeRight = currentMessage.find('.swipe_right');
const swipeLeft = currentMessage.find('.swipe_left');
const swipeCounter = currentMessage.find('.swipes-counter');
if (swipeId !== undefined && (chat[chat.length - 1].swipes.length > 1 || swipeId > 0)) {
currentMessage.children('.swipe_left').css('display', 'flex');
swipeLeft.css('display', 'flex');
}
//only show right when generate is off, or when next right swipe would not make a generate happen
if (is_send_press === false || chat[chat.length - 1].swipes.length >= swipeId) {
currentMessage.children('.swipe_right').css('display', 'flex');
currentMessage.children('.swipe_right').css('opacity', '0.3');
swipeRight.css('display', 'flex').css('opacity', '0.3');
swipeCounter.css('opacity', '0.3');
}
//console.log((chat[chat.length - 1]));
if ((chat[chat.length - 1].swipes.length - swipeId) === 1) {
//console.log('highlighting R swipe');
currentMessage.children('.swipe_right').css('opacity', '0.7');
//chevron was moved out of hardcode in HTML to class toggle dependent on last_mes or not
//necessary for 'swipe_right' div in past messages to have no chevron if 'show swipes for all messages' is turned on
swipeRight.css('opacity', '0.7');
swipeCounter.css('opacity', '0.7');
}
//console.log(swipesCounterHTML);
$('.swipes-counter').text(swipeCounterText);
//allows for writing individual swipe counters for past messages
const lastSwipeCounter = $('.last_mes .swipes-counter');
lastSwipeCounter.text(swipeCounterText).show();
//console.log(swipeId);
//console.log(chat[chat.length - 1].swipes.length);
switchSwipeNumAllMessages();
}
export function hideSwipeButtons() {
//console.log('hideswipebuttons entered');
$('#chat').find('.swipe_right').css('display', 'none');
$('#chat').find('.swipe_left').css('display', 'none');
$('#chat').find('.swipe_right').hide();
$('#chat').find('.last_mes .swipes-counter').hide();
$('#chat').find('.swipe_left').hide();
}
/**
@ -8341,8 +8352,8 @@ const swipe_right = () => {
}
const currentMessage = $('#chat').children().filter(`[mesid="${chat.length - 1}"]`);
let this_div = currentMessage.children('.swipe_right');
let this_mes_div = this_div.parent();
let this_div = currentMessage.find('.swipe_right');
let this_mes_div = this_div.parent().parent();
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)
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 = () => {
}
// handles animated transitions when swipe right, specifically height transitions between messages
if (run_generate || run_swipe_right) {
let this_mes_block = this_mes_div.children('.mes_block').children('.mes_text');
let this_mes_block = this_mes_div.find('.mes_block .mes_text');
const this_mes_div_height = this_mes_div[0].scrollHeight;
const this_mes_block_height = this_mes_block[0].scrollHeight;
@ -9409,9 +9420,9 @@ jQuery(async function () {
///// SWIPE BUTTON CLICKS ///////
$(document).on('click', '.swipe_right', swipe_right);
$(document).on('click', '.swipe_left', swipe_left);
//limit swiping to only last message clicks
$(document).on('click', '.last_mes .swipe_right', swipe_right);
$(document).on('click', '.last_mes .swipe_left', swipe_left);
const debouncedCharacterSearch = debounce((searchQuery) => {
entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);

21
public/scripts/power-user.js
View File

@ -290,6 +290,7 @@ let power_user = {
restore_user_input: true,
reduced_motion: false,
compact_input_area: true,
show_swipe_num_all_messages: false,
auto_connect: false,
auto_load_chat: false,
forbid_external_media: true,
@ -469,6 +470,11 @@ function switchCompactInputArea() {
$('#compact_input_area').prop('checked', power_user.compact_input_area);
}
export function switchSwipeNumAllMessages() {
$('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);
$('.mes:not(.last_mes) .swipes-counter').css('opacity', '').toggle(power_user.show_swipe_num_all_messages);
}
var originalSliderValues = [];
async function switchLabMode() {
@ -1283,6 +1289,13 @@ function applyTheme(name) {
switchCompactInputArea();
},
},
{
key: 'show_swipe_num_all_messages',
action: () => {
$('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);
switchSwipeNumAllMessages();
},
},
];
for (const { key, selector, type, action } of themeProperties) {
@ -1352,6 +1365,7 @@ function applyPowerUserSettings() {
switchHideChatAvatars();
switchTokenCount();
switchMessageActions();
switchSwipeNumAllMessages();
}
function getExampleMessagesBehavior() {
@ -2296,6 +2310,7 @@ function getThemeObject(name) {
zoomed_avatar_magnification: power_user.zoomed_avatar_magnification,
reduced_motion: power_user.reduced_motion,
compact_input_area: power_user.compact_input_area,
show_swipe_num_all_messages: power_user.show_swipe_num_all_messages,
};
}
@ -3755,6 +3770,12 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$('#show_swipe_num_all_messages').on('input', function () {
power_user.show_swipe_num_all_messages = !!$(this).prop('checked');
switchSwipeNumAllMessages();
saveSettingsDebounced();
});
$('#auto-connect-checkbox').on('input', function () {
power_user.auto_connect = !!$(this).prop('checked');
saveSettingsDebounced();

37
public/style.css
View File

@ -969,34 +969,53 @@ body .panelControlBar {
/* SWIPE RELATED STYLES*/
.mes {
--swipeCounterHeight: 15px;
--swipeCounterMargin: 5px;
}
.swipe_right,
.swipe_left {
height: 40px;
width: 40px;
width: 25px;
height: 25px;
opacity: 0.3;
align-items: center;
justify-content: center;
z-index: 9999;
grid-row-start: 2;
font-size: 30px;
font-size: 20px;
cursor: pointer;
align-self: center;
position: absolute;
bottom: 15px;
flex-flow: column;
}
.swipe_left {
position: absolute;
bottom: calc(var(--swipeCounterHeight) + var(--swipeCounterMargin));
flex-flow: column;
}
.swipeRightBlock {
position: absolute;
right: 0;
bottom: 0;
}
.swipes-counter {
color: var(--SmartThemeBodyColor);
font-size: 12px;
padding: 0;
padding: 0 5px;
font-family: var(--mainFontFamily);
font-weight: 400;
align-self: center;
min-width: 40px;
display: flex;
justify-content: center;
margin-bottom: var(--swipeCounterMargin);
height: var(--swipeCounterHeight);
}
.mes:not(.last_mes) .swipes-counter {
opacity: 0.3;
}
.swipe_left {
@ -1006,7 +1025,7 @@ flex-flow: column;
.swipe_right {
right: 5px;
align-self:end;
align-self: center;
}
.ui-settings {
@ -2640,7 +2659,7 @@ select option:not(:checked) {
#instruct_enabled_label .menu_button:not(.toggleEnabled),
#sysprompt_enabled_label .menu_button:not(.toggleEnabled) {
color: Red;
color: Red;
}
.displayBlock {