Show/hide the extensions block using javascript

Author: oobabooga

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";

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;
 }
 

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';
+    }
+});

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"):

server.py

@@ -215,7 +215,7 @@ def create_settings_menus(default_preset):
                 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')