From b2296dcda01f5d50e2e44084400cbcc3663f7357 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Sun, 27 Aug 2023 13:06:01 -0700
Subject: [PATCH] Ctrl+S to show/hide chat controls

---
 css/main.css       |  2 +-
 js/main.js         | 15 ++++++++++++++-
 modules/ui_chat.py |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/css/main.css b/css/main.css
index 405b57e0..d23b3445 100644
--- a/css/main.css
+++ b/css/main.css
@@ -329,7 +329,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 #show-controls {
     position: absolute;
     background-color: transparent;
-    left: calc(100% - 130px);
+    left: calc(100% - 180px);
 }
 
 .chat > .messages {
diff --git a/js/main.js b/js/main.js
index e409cc3d..4544460e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -40,9 +40,11 @@ for(i = 0; i < textareaElements.length; i++) {
 }
 
 //------------------------------------------------
-// Stop generation on Esc pressed
+// Keyboard shortcuts
 //------------------------------------------------
 document.addEventListener("keydown", function(event) {
+
+  // Stop generation on Esc pressed
   if (event.key === "Escape") {
     // Find the element with id 'stop' and click it
     var stopButton = document.getElementById("stop");
@@ -50,6 +52,17 @@ document.addEventListener("keydown", function(event) {
       stopButton.click();
     }
   }
+
+  // Show chat controls on Ctrl+S pressed
+  else if (event.ctrlKey && event.key == "s") {
+    event.preventDefault();
+
+    var showControlsElement = document.getElementById('show-controls');
+    if (showControlsElement && showControlsElement.childNodes.length >= 4) {
+      showControlsElement.childNodes[3].click();
+    }
+  }
+
 });
 
 //------------------------------------------------
diff --git a/modules/ui_chat.py b/modules/ui_chat.py
index 72e8cd03..f85fe611 100644
--- a/modules/ui_chat.py
+++ b/modules/ui_chat.py
@@ -23,7 +23,7 @@ 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='', placeholder='Send a message', elem_id='chat-input')
-        shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls', elem_id='show-controls')
+        shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
 
         with gr.Row():
             shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop')