From b8939b8ccb388e654635f281f546f93cdb24182c Mon Sep 17 00:00:00 2001
From: city-unit <140349364+city-unit@users.noreply.github.com>
Date: Fri, 20 Oct 2023 22:14:36 -0400
Subject: [PATCH 1/2] Hide extra buttons when you click away

---
 public/script.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/public/script.js b/public/script.js
index 78ca282f8..e073665ca 100644
--- a/public/script.js
+++ b/public/script.js
@@ -8101,6 +8101,14 @@ jQuery(async function () {
         }, 150);
     })
 
+    $(document).on("click", function (e) {
+        // Check if the click was outside the relevant elements
+        if (!$(e.target).closest('.extraMesButtons, .extraMesButtonsHint').length) {
+            $('.extraMesButtonsHint').show().css('opacity', .2); // Reset the hint button to its original state
+            $('.extraMesButtons').hide().css('opacity', 0); // Hide the extra buttons and reset their opacity            
+        }
+    });
+
     $(document).on("click", ".mes_edit_cancel", function () {
         let text = chat[this_edit_mes_id]["mes"];
 

From 95a3021e53eb9709ce6508b4a2af17290a4f5cd2 Mon Sep 17 00:00:00 2001
From: city-unit <140349364+city-unit@users.noreply.github.com>
Date: Fri, 20 Oct 2023 22:31:57 -0400
Subject: [PATCH 2/2] Smooth transition

---
 public/script.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/script.js b/public/script.js
index e073665ca..88a3a7538 100644
--- a/public/script.js
+++ b/public/script.js
@@ -8104,8 +8104,22 @@ jQuery(async function () {
     $(document).on("click", function (e) {
         // Check if the click was outside the relevant elements
         if (!$(e.target).closest('.extraMesButtons, .extraMesButtonsHint').length) {
-            $('.extraMesButtonsHint').show().css('opacity', .2); // Reset the hint button to its original state
-            $('.extraMesButtons').hide().css('opacity', 0); // Hide the extra buttons and reset their opacity            
+            // Transition out the .extraMesButtons first
+            $('.extraMesButtons').transition({
+                opacity: 0,
+                duration: 150,
+                easing: 'ease-in-out',
+                complete: function () {
+                    $(this).hide(); // Hide the .extraMesButtons after the transition
+
+                    // Transition the .extraMesButtonsHint back in
+                    $('.extraMesButtonsHint').show().transition({
+                        opacity: .2,
+                        duration: 150,
+                        easing: 'ease-in-out'
+                    });
+                }
+            });        
         }
     });