From 7cd437e05c3bf114597e4546faa53a02b40682e1 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:10:46 -0700
Subject: [PATCH] Properly close the hover menu on mobile

---
 css/main.css       |  6 +----
 js/main.js         | 64 ++++++++++++++++++++++++++++++++++++++++------
 modules/ui_chat.py |  2 +-
 3 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/css/main.css b/css/main.css
index ef6b7b70..49d51496 100644
--- a/css/main.css
+++ b/css/main.css
@@ -475,15 +475,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
   bottom: 80%;
   left: 0;
   background-color: var(--background-fill-secondary);
-  z-index: 100;
+  z-index: 10000;
   min-width: 300px;
   flex-direction: column;
 }
 
-.hover-element:hover .hover-menu {
-  display: flex;
-}
-
 .hover-menu button {
   width: 100%;
   background: transparent !important;
diff --git a/js/main.js b/js/main.js
index f0d8bc38..4687524f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -208,24 +208,72 @@ for(i = 0; i < noBackgroundelements.length; i++) {
 
 //------------------------------------------------
 // Create the hover menu in the chat tab
+// The show/hide events were adapted from:
+// https://github.com/SillyTavern/SillyTavern/blob/6c8bd06308c69d51e2eb174541792a870a83d2d6/public/script.js
 //------------------------------------------------
 const buttonsInChat = document.getElementById("chat-tab").querySelectorAll("button");
-const hoverMenu = document.getElementById('hover-menu');
+var button = document.getElementById('hover-element-button');
+var menu = document.getElementById('hover-menu');
+
+function showMenu() {
+    menu.style.display = 'flex'; // Show the menu
+}
+
+function hideMenu() {
+    menu.style.display = 'none'; // Hide the menu
+}
 
 for (let i = 14; i >= 2; i--) {
-  const button = buttonsInChat[i];
-  hoverMenu.appendChild(button);
+  const thisButton = buttonsInChat[i];
+  menu.appendChild(thisButton);
 
   if(i != 10) {
-    button.addEventListener("click", () => {
-      hoverMenu.style.display = 'none';
-      setTimeout(() => {
-        hoverMenu.style.display = '';
-      }, 2000);
+    thisButton.addEventListener("click", () => {
+      hideMenu();
     });
   }
 }
 
+function isMouseOverButtonOrMenu() {
+    return menu.matches(':hover') || button.matches(':hover');
+}
+
+button.addEventListener('mouseenter', function () {
+    showMenu();
+});
+
+button.addEventListener('click', function () {
+    showMenu();
+});
+
+// Add event listener for mouseleave on the button
+button.addEventListener('mouseleave', function () {
+    // Delay to prevent menu hiding when the mouse leaves the button into the menu
+    setTimeout(function () {
+        if (!isMouseOverButtonOrMenu()) {
+            hideMenu();
+        }
+    }, 100);
+});
+
+// Add event listener for mouseleave on the menu
+menu.addEventListener('mouseleave', function () {
+    // Delay to prevent menu hide when the mouse leaves the menu into the button
+    setTimeout(function () {
+        if (!isMouseOverButtonOrMenu()) {
+            hideMenu();
+        }
+    }, 100);
+});
+
+// Add event listener for click anywhere in the document
+document.addEventListener('click', function (event) {
+    // Check if the click is outside the button/menu and the menu is visible
+    if (!isMouseOverButtonOrMenu() && menu.style.display === 'flex') {
+        hideMenu();
+    }
+});
+
 //------------------------------------------------
 // Relocate the "Show controls" checkbox
 //------------------------------------------------
diff --git a/modules/ui_chat.py b/modules/ui_chat.py
index 1517b383..d16df842 100644
--- a/modules/ui_chat.py
+++ b/modules/ui_chat.py
@@ -25,7 +25,7 @@ def create_ui():
 
         with gr.Row():
             with gr.Column(scale=1):
-                gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
+                gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block" id="hover-element-button">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
 
             with gr.Column(scale=10):
                 shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input')