From c1959c26ee2bf57439b1d06d8750ece72259fa2a Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Wed, 15 Mar 2023 16:34:31 -0300
Subject: [PATCH] Show/hide the extensions block using javascript

---
 css/chat.js           |  1 +
 css/main.css          |  2 +-
 css/main.js           | 15 +++++++++++++++
 modules/extensions.py |  2 +-
 server.py             |  2 +-
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/css/chat.js b/css/chat.js
index f45bf78a..4a78e454 100644
--- a/css/chat.js
+++ b/css/chat.js
@@ -1 +1,2 @@
 document.getElementById("main").childNodes[0].style = "max-width: 800px; margin-left: auto; margin-right: auto";
+document.getElementById("extensions").style = "max-width: 800px; margin-left: auto; margin-right: auto";
diff --git a/css/main.css b/css/main.css
index 8519f1c9..ca076d28 100644
--- a/css/main.css
+++ b/css/main.css
@@ -33,7 +33,7 @@ svg {
 ol li p, ul li p {
     display: inline-block;
 }
-#main, #settings, #extensions, #chat-settings {
+#main, #settings, #chat-settings {
   border: 0;
 }
 
diff --git a/css/main.js b/css/main.js
index ad4b5ec0..d96c8cd8 100644
--- a/css/main.js
+++ b/css/main.js
@@ -1,3 +1,18 @@
 document.getElementById("main").parentNode.childNodes[0].style = "border: none; background-color: #8080802b; margin-bottom: 40px";
 document.getElementById("main").parentNode.style = "padding: 0; margin: 0";
 document.getElementById("main").parentNode.parentNode.parentNode.style = "padding: 0";
+
+// Get references to the elements
+let main = document.getElementById('main');
+let main_parent = main.parentNode;
+let extensions = document.getElementById('extensions');
+
+// Add an event listener to the main element
+main_parent.addEventListener('click', function(e) {
+    // Check if the main element is visible
+    if (main.offsetHeight > 0 && main.offsetWidth > 0) {
+        extensions.style.visibility = 'visible';
+    } else {
+        extensions.style.visibility = 'hidden';
+    }
+});
diff --git a/modules/extensions.py b/modules/extensions.py
index e8541ab5..89dfcda4 100644
--- a/modules/extensions.py
+++ b/modules/extensions.py
@@ -42,7 +42,7 @@ def create_extensions_block():
                     extension.params[param] = shared.settings[_id]
 
     # Creating the extension ui elements
-    with gr.Box(elem_id="#extensions"):
+    with gr.Box(elem_id="extensions"):
         gr.Markdown("Extensions")
         for extension, name in iterator():
             if hasattr(extension, "ui"):
diff --git a/server.py b/server.py
index e417f146..6512e756 100644
--- a/server.py
+++ b/server.py
@@ -215,7 +215,7 @@ if shared.args.chat or shared.args.cai_chat:
                 shared.gradio['display'] = gr.Chatbot(value=shared.history['visible']).style(color_map=("#326efd", "#212528"))
             shared.gradio['textbox'] = gr.Textbox(label='Input')
             with gr.Row():
-                shared.gradio['Stop'] = gr.Button('Stop')
+                shared.gradio['Stop'] = gr.Button('Stop', elem_id="stop")
                 shared.gradio['Generate'] = gr.Button('Generate')
             with gr.Row():
                 shared.gradio['Impersonate'] = gr.Button('Impersonate')