Add a "Show controls" button to chat UI (#3590)

css/main.css

@@ -101,15 +101,15 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
 }
 
 .textbox_default textarea {
-    height: calc(100vh - 310px);
+    height: calc(100dvh - 310px);
 }
 
 .textbox_default_output textarea {
-    height: calc(100vh - 190px);
+    height: calc(100dvh - 190px);
 }
 
 .textbox textarea {
-    height: calc(100vh - 241px);
+    height: calc(100dvh - 241px);
 }
 
 .textbox_default textarea, .textbox_default_output textarea, .textbox textarea {
@@ -123,7 +123,7 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
 
 @media screen and (max-width: 711px) {
     .textbox_default textarea {
-        height: calc(100vh - 275px);
+        height: calc(100dvh - 295px);
     }
 }
 
@@ -218,10 +218,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     opacity: 1;
 }
 
-#gradio-chatbot {
-    height: 66.67vh;
-}
-
 .wrap.svelte-6roggh.svelte-6roggh {
     max-height: 92.5%;
 }
@@ -246,8 +242,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
         padding: 0px;
     }
 
-    .chat {
+    #chat {
-        height: calc(100vh - 274px) !important;
+        height: calc(100dvh - 272px) !important;
+    }
+
+    .bigchat #chat {
+        height: calc(100dvh - 180px) !important;
     }
 }
 
@@ -255,7 +255,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     margin-left: auto;
     margin-right: auto;
     max-width: 800px;
-    height: calc(100vh - 286px);
+    height: 100%;
     overflow-y: auto;
     padding-right: 20px;
     display: flex;
@@ -265,6 +265,21 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     padding-top: 1px;
 }
 
+#chat {
+    height: calc(100dvh - 286px);
+}
+
+.bigchat #chat {
+    height: calc(100dvh - 200px);
+}
+
+
+#show-controls {
+    position: absolute;
+    background-color: transparent;
+    left: calc(100% - 140px);
+}
+
 .chat > .messages {
     display: flex;
     flex-direction: column;

extensions/gallery/script.js

@@ -1,23 +1,34 @@
 let gallery_element = document.getElementById('gallery-extension');
+let chat_mode_element = document.getElementById('chat-mode');
+
 let extensions_block = gallery_element.parentElement;
 let extensions_block_size = extensions_block.childNodes.length;
 let gallery_only = (extensions_block_size == 5);
 
 main_parent.addEventListener('click', function(e) {
     let chat_visible = (chat_tab.offsetHeight > 0 && chat_tab.offsetWidth > 0);
+    let chat_mode_visible = (chat_mode_element.offsetHeight > 0 && chat_mode_element.offsetWidth > 0);
     let notebook_visible = (notebook_tab.offsetHeight > 0 && notebook_tab.offsetWidth > 0);
     let default_visible = (default_tab.offsetHeight > 0 && default_tab.offsetWidth > 0);
 
     // Only show this extension in the Chat tab
     if (chat_visible) {
-        gallery_element.style.display = 'block';
+        if (chat_mode_visible) {
-        if (gallery_only) {
+            gallery_element.style.display = 'block';
-            extensions_block.style.display = '';
+            if (gallery_only) {
+                extensions_block.style.display = '';
+            }
+        } else {
+            gallery_element.style.display = 'none';
+            extensions_block.style.display = 'none';
         }
     } else {
         gallery_element.style.display = 'none';
         if (gallery_only) {
             extensions_block.style.display = 'none';
         }
+        else {
+            extensions_block.style.display = '';
+        }
     }
 });

js/show_controls.js

@@ -0,0 +1,18 @@
+const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+3), #extensions");
+const chatParent = document.getElementById("chat").parentNode;
+
+function toggle_controls(value) {
+    if (value) {
+        belowChatInput.forEach(element => {
+          element.style.display = "inherit";
+        });
+
+        chatParent.classList.remove("bigchat");
+    } else {
+        belowChatInput.forEach(element => {
+          element.style.display = "none";
+        });
+
+        chatParent.classList.add("bigchat");
+    }
+}

modules/ui.py

@@ -16,6 +16,8 @@ with open(Path(__file__).resolve().parent / '../js/save_files.js', 'r') as f:
     save_files_js = f.read()
 with open(Path(__file__).resolve().parent / '../js/switch_tabs.js', 'r') as f:
     switch_tabs_js = f.read()
+with open(Path(__file__).resolve().parent / '../js/show_controls.js', 'r') as f:
+    show_controls_js = f.read()
 
 refresh_symbol = '🔄'
 delete_symbol = '🗑️'

modules/ui_chat.py

@@ -22,7 +22,9 @@ def create_ui():
 
     with gr.Tab('Chat', elem_id='chat-tab'):
         shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
-        shared.gradio['textbox'] = gr.Textbox(label='Input')
+
+        shared.gradio['textbox'] = gr.Textbox(label='Input', elem_id='chat-input')
+        shared.gradio['show-controls'] = gr.Checkbox(value=True, label='Show controls', elem_id='show-controls')
         with gr.Row():
             shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop')
             shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary')
@@ -48,7 +50,7 @@ def create_ui():
             shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with'])
 
         with gr.Row():
-            shared.gradio['mode'] = gr.Radio(choices=['chat', 'chat-instruct', 'instruct'], value=shared.settings['mode'] if shared.settings['mode'] in ['chat', 'instruct', 'chat-instruct'] else 'chat', label='Mode', info='Defines how the chat prompt is generated. In instruct and chat-instruct modes, the instruction template selected under Parameters > Instruction template must match the current model.')
+            shared.gradio['mode'] = gr.Radio(choices=['chat', 'chat-instruct', 'instruct'], value=shared.settings['mode'] if shared.settings['mode'] in ['chat', 'instruct', 'chat-instruct'] else 'chat', label='Mode', info='Defines how the chat prompt is generated. In instruct and chat-instruct modes, the instruction template selected under Parameters > Instruction template must match the current model.', elem_id='chat-mode')
             shared.gradio['chat_style'] = gr.Dropdown(choices=utils.get_available_chat_styles(), label='Chat style', value=shared.settings['chat_style'], visible=shared.settings['mode'] != 'instruct')
 
 
@@ -125,6 +127,8 @@ def create_event_handlers():
     shared.input_params = gradio(inputs)
     shared.reload_inputs = gradio(reload_arr)
 
+    shared.gradio['show-controls'].change(None, gradio('show-controls'), None, _js=f'(x) => {{{ui.show_controls_js}; toggle_controls(x)}}')
+
     shared.gradio['Generate'].click(
         ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
         lambda x: (x, ''), gradio('textbox'), gradio('Chat input', 'textbox'), show_progress=False).then(