From e59a5b4449cca22ae3abf8224af12a382ea866b3 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Thu, 25 Apr 2024 12:51:56 +0900
Subject: [PATCH] toggle to hide chat avatars

---
 public/css/toggle-dependent.css |  5 +++--
 public/index.html               |  8 ++++++--
 public/scripts/power-user.js    | 34 ++++++++++++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css
index 834e31c31..1095e300e 100644
--- a/public/css/toggle-dependent.css
+++ b/public/css/toggle-dependent.css
@@ -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;
-}
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 75aaf4eac..8bcc22b27 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
\ No newline at end of file
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index e780014ac..fd9bac986 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -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;