From 688551ffa6c1f69f423afe3c5973c09e270eeb1b Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Thu, 14 Sep 2023 15:23:51 +0300
Subject: [PATCH] #1128 Auto-Expand Message Actions

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

diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css
index 2b0e57483..43a84fdcf 100644
--- a/public/css/toggle-dependent.css
+++ b/public/css/toggle-dependent.css
@@ -360,3 +360,11 @@ body.movingUI #groupMemberListPopout {
 body.noShadows * {
     text-shadow: none !important;
 }
+
+body.expandMessageActions .mes .mes_buttons .extraMesButtons {
+    display: inherit !important;
+}
+
+body.expandMessageActions .mes .mes_buttons .extraMesButtonsHint {
+    display: none !important;
+}
diff --git a/public/index.html b/public/index.html
index f3df1066f..1e8bc6a39 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2889,6 +2889,11 @@
                                     <span data-i18n="Waifu Mode">Visual Novel Mode</span>
                                 </label>
 
+                                <label for="expandMessageActions" class="checkbox_label">
+                                    <input id="expandMessageActions" type="checkbox" />
+                                    <span data-i18n="Auto-Expand Message Actions">Auto-Expand Message Actions</span>
+                                </label>
+
                                 <label for="messageTimerEnabled" class="checkbox_label">
                                     <input id="messageTimerEnabled" type="checkbox" />
                                     <span data-i18n="Message Timer">Message Timer</span>
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 4eb50f6b4..946e97b34 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -152,6 +152,7 @@ let power_user = {
     mesIDDisplay_enabled: false,
     max_context_unlocked: false,
     message_token_count_enabled: false,
+    expand_message_actions: false,
     prefer_character_prompt: true,
     prefer_character_jailbreak: true,
     quick_continue: false,
@@ -235,6 +236,7 @@ const storage_keys = {
     timestamp_model_icon: 'TimestampModelIcon',
     mesIDDisplay_enabled: 'mesIDDisplayEnabled',
     message_token_count_enabled: 'MessageTokenCountEnabled',
+    expand_message_actions: 'ExpandMessageActions',
 };
 
 let browser_has_focus = true;
@@ -368,6 +370,13 @@ function switchTokenCount() {
     $("#messageTokensEnabled").prop("checked", power_user.message_token_count_enabled);
 }
 
+function switchMessageActions() {
+    const value = localStorage.getItem(storage_keys.expand_message_actions);
+    power_user.expand_message_actions = value === null ? false : value == "true";
+    $("body").toggleClass("expandMessageActions", power_user.expand_message_actions);
+    $("#expandMessageActions").prop("checked", power_user.expand_message_actions);
+}
+
 function switchMesIDDisplay() {
     const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
     power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
@@ -662,6 +671,13 @@ async function applyTheme(name) {
                 switchMesIDDisplay();
             }
         },
+        {
+            key: 'expand_message_actions',
+            action: async () => {
+                localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions));
+                switchMessageActions();
+            }
+        },
         {
             key: 'hotswap_enabled',
             action: async () => {
@@ -733,6 +749,7 @@ switchTimestamps();
 switchIcons();
 switchMesIDDisplay();
 switchTokenCount();
+switchMessageActions();
 
 function loadPowerUserSettings(settings, data) {
     // Load from settings.json
@@ -2106,6 +2123,13 @@ $(document).ready(() => {
         switchTokenCount();
     });
 
+    $("#expandMessageActions").on("input", function () {
+        const value = !!$(this).prop('checked');
+        power_user.expand_message_actions = value;
+        localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions));
+        switchMessageActions();
+    });
+
     $("#mesIDDisplayEnabled").on("input", function () {
         const value = !!$(this).prop('checked');
         power_user.mesIDDisplay_enabled = value;