toggle to hide chat avatars

This commit is contained in:
RossAscends 2024-04-25 12:51:56 +09:00
parent f90f370fed
commit e59a5b4449
3 changed files with 42 additions and 5 deletions

View File

@ -19,7 +19,8 @@ body.no-timer .mes_timer,
body.no-timestamps .timestamp,
body.no-tokenCount .tokenCounterDisplay,
body.no-mesIDDisplay .mesIDDisplay,
body.no-modelIcons .icon-svg {
body.no-modelIcons .icon-svg,
body.hideChatAvatars .mesAvatarWrapper .avatar {
display: none !important;
}
@ -439,4 +440,4 @@ body.expandMessageActions .mes .mes_buttons .extraMesButtonsHint {
#smooth_streaming:checked~#smooth_streaming_speed_control {
display: block;
}
}

View File

@ -3520,7 +3520,7 @@
<i class="fa-fw fa-solid fa-user-shield"></i>
<span data-i18n="Account">Account</span>
</div>
<div id="admin_button" class="margin0 menu_button_icon menu_button" >
<div id="admin_button" class="margin0 menu_button_icon menu_button">
<i class="fa-fw fa-solid fa-user-tie"></i>
<span data-i18n="Admin Panel">Admin Panel</span>
</div>
@ -3776,6 +3776,10 @@
<input id="mesIDDisplayEnabled" type="checkbox" />
<span data-i18n="Message IDs">Message IDs</span>
</label>
<label data-newbie-hidden for="hideChatAvatarsEnabled" class="checkbox_label" title="Hide avatars in chat messages." data-i18n="[title]Hide avatars in chat messages.">
<input id="hideChatAvatarsEnabled" type="checkbox" />
<span data-i18n="Hide Chat Avatars">Hide Chat Avatars</span>
</label>
<label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label" title="Show the number of tokens for each message in the chat log." data-i18n="[title]Show the number of tokens in each message in the chat log">
<input id="messageTokensEnabled" type="checkbox" />
<span data-i18n="Show Message Token Count">Message Token Count</span>
@ -6066,4 +6070,4 @@
</script>
</body>
</html>
</html>

View File

@ -178,6 +178,7 @@ let power_user = {
timestamps_enabled: true,
timestamp_model_icon: false,
mesIDDisplay_enabled: false,
hideChatAvatars_enabled: false,
max_context_unlocked: false,
message_token_count_enabled: false,
expand_message_actions: false,
@ -295,6 +296,7 @@ const storage_keys = {
timestamps_enabled: 'TimestampsEnabled',
timestamp_model_icon: 'TimestampModelIcon',
mesIDDisplay_enabled: 'mesIDDisplayEnabled',
hideChatAvatars_enabled: 'hideChatAvatarsEnabled',
message_token_count_enabled: 'MessageTokenCountEnabled',
expand_message_actions: 'ExpandMessageActions',
enableZenSliders: 'enableZenSliders',
@ -464,6 +466,17 @@ function switchMesIDDisplay() {
$('#mesIDDisplayEnabled').prop('checked', power_user.mesIDDisplay_enabled);
}
function switchHideChatAvatars() {
const value = localStorage.getItem(storage_keys.hideChatAvatars_enabled);
power_user.hideChatAvatars_enabled = value === null ? true : value == 'true';
/*console.log(`
localstorage value:${value},
poweruser after:${power_user.hideChatAvatars_enabled}`)
*/
$('body').toggleClass('hideChatAvatars', power_user.hideChatAvatars_enabled);
$('#hideChatAvatarsEnabled').prop('checked', power_user.hideChatAvatars_enabled);
}
function switchMessageActions() {
const value = localStorage.getItem(storage_keys.expand_message_actions);
power_user.expand_message_actions = value === null ? false : value == 'true';
@ -1269,6 +1282,13 @@ async function applyTheme(name) {
switchMesIDDisplay();
},
},
{
key: 'hideChatAvatars_enabled',
action: async () => {
localStorage.setItem(storage_keys.hideChatAvatars_enabled, Boolean(power_user.hideChatAvatars_enabled));
switchHideChatAvatars();
},
},
{
key: 'expand_message_actions',
action: async () => {
@ -1391,6 +1411,7 @@ switchTimer();
switchTimestamps();
switchIcons();
switchMesIDDisplay();
switchHideChatAvatars();
switchTokenCount();
switchMessageActions();
@ -1433,6 +1454,7 @@ function loadPowerUserSettings(settings, data) {
const timer = localStorage.getItem(storage_keys.timer_enabled);
const timestamps = localStorage.getItem(storage_keys.timestamps_enabled);
const mesIDDisplay = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
const hideChatAvatars = localStorage.getItem(storage_keys.hideChatAvatars_enabled);
const expandMessageActions = localStorage.getItem(storage_keys.expand_message_actions);
const enableZenSliders = localStorage.getItem(storage_keys.enableZenSliders);
const enableLabMode = localStorage.getItem(storage_keys.enableLabMode);
@ -1456,6 +1478,7 @@ function loadPowerUserSettings(settings, data) {
power_user.timer_enabled = timer === null ? true : timer == 'true';
power_user.timestamps_enabled = timestamps === null ? true : timestamps == 'true';
power_user.mesIDDisplay_enabled = mesIDDisplay === null ? true : mesIDDisplay == 'true';
power_user.hideChatAvatars_enabled = hideChatAvatars === null ? true : hideChatAvatars == 'true';
power_user.expand_message_actions = expandMessageActions === null ? true : expandMessageActions == 'true';
power_user.enableZenSliders = enableZenSliders === null ? false : enableZenSliders == 'true';
power_user.enableLabMode = enableLabMode === null ? false : enableLabMode == 'true';
@ -1541,6 +1564,7 @@ function loadPowerUserSettings(settings, data) {
$('#messageTimestampsEnabled').prop('checked', power_user.timestamps_enabled);
$('#messageModelIconEnabled').prop('checked', power_user.timestamp_model_icon);
$('#mesIDDisplayEnabled').prop('checked', power_user.mesIDDisplay_enabled);
$('#hideChatAvatarsEndabled').prop('checked', power_user.hideChatAvatars_enabled);
$('#prefer_character_prompt').prop('checked', power_user.prefer_character_prompt);
$('#prefer_character_jailbreak').prop('checked', power_user.prefer_character_jailbreak);
$('#enableZenSliders').prop('checked', power_user.enableZenSliders).trigger('input');
@ -2150,6 +2174,7 @@ async function saveTheme(name = undefined) {
timestamp_model_icon: power_user.timestamp_model_icon,
mesIDDisplay_enabled: power_user.mesIDDisplay_enabled,
hideChatAvatars_enabled: power_user.hideChatAvatars_enabled,
message_token_count_enabled: power_user.message_token_count_enabled,
expand_message_actions: power_user.expand_message_actions,
enableZenSliders: power_user.enableZenSliders,
@ -2373,7 +2398,7 @@ async function doRandomChat(_, tagName) {
.map(x => x[0]) // Map the character avatar
.filter(x => characters.find(y => y.avatar === x)); // Filter out characters that don't exist
const randomCharacter = taggedCharacters[Math.floor(Math.random() * taggedCharacters.length)];
const randomIndex = characters.findIndex(x => x.avatar === randomCharacter);
const randomIndex = characters.findIndex(x => x.avatar === randomCharacter);
if (randomIndex === -1) {
return;
}
@ -3376,6 +3401,13 @@ $(document).ready(() => {
switchMesIDDisplay();
});
$('#hideChatAvatarsEnabled').on('input', function () {
const value = !!$(this).prop('checked');
power_user.hideChatAvatars_enabled = value;
localStorage.setItem(storage_keys.hideChatAvatars_enabled, Boolean(power_user.hideChatAvatars_enabled));
switchHideChatAvatars();
});
$('#hotswapEnabled').on('input', function () {
const value = !!$(this).prop('checked');
power_user.hotswap_enabled = value;