Reorganize chat buttons (#3892)

css/main.css

@@ -293,11 +293,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     }
 
     .chat-parent {
-        height: calc(100dvh - 262px) !important;
+        height: calc(100dvh - 172px) !important;
-    }
-
-    .bigchat {
-        height: calc(100dvh - 180px) !important;
     }
 }
 
@@ -316,14 +312,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 }
 
 .chat-parent {
-    height: calc(100dvh - 272px);
+    height: calc(100dvh - 182px);
     overflow: auto !important;
 }
 
-.bigchat {
-    height: calc(100dvh - 200px);
-}
-
 .chat > .messages {
     display: flex;
     flex-direction: column;
@@ -468,3 +460,33 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 #chat-tab .generating {
   display: none !important;
 }
+
+.hover-element {
+  position: relative;
+  font-size: 24px;
+}
+
+.hover-menu {
+  display: none;
+  position: absolute;
+  bottom: 80%;
+  left: 0;
+  background-color: var(--background-fill-secondary);
+  z-index: 100;
+  min-width: 300px;
+  flex-direction: column;
+}
+
+.hover-element:hover .hover-menu {
+  display: flex;
+}
+
+.hover-menu button {
+  width: 100%;
+  background: transparent !important;
+  border-radius: 0px !important;
+}
+
+.hover-menu button:hover {
+  background: var(--button-secondary-background-fill-hover) !important;
+}

js/main.js

@@ -94,8 +94,12 @@ const observer = new MutationObserver(function(mutations) {
     const firstChild = targetElement.children[0];
     if (firstChild.classList.contains('generating')) {
       typing.parentNode.classList.add('visible-dots');
+      document.getElementById('stop').style.display = 'flex';
+      document.getElementById('Generate').style.display = 'none';
     } else {
       typing.parentNode.classList.remove('visible-dots');
+      document.getElementById('stop').style.display = 'none';
+      document.getElementById('Generate').style.display = 'flex';
     }
 
   });
@@ -116,7 +120,6 @@ observer.observe(targetElement, config);
 //------------------------------------------------
 // Notebook box scrolling
 //------------------------------------------------
-
 const notebookElement = document.querySelector('#textbox-notebook textarea');
 let notebookScrolled = false;
 
@@ -142,7 +145,6 @@ notebookObserver.observe(notebookElement.parentNode.parentNode.parentNode, confi
 //------------------------------------------------
 // Default box scrolling
 //------------------------------------------------
-
 const defaultElement = document.querySelector('#textbox-default textarea');
 let defaultScrolled = false;
 
@@ -180,6 +182,20 @@ for(i = 0; i < textareaElements.length; i++) {
 //------------------------------------------------
 document.getElementById('chat-input').parentNode.style.background = 'transparent';
 document.getElementById('chat-input').parentNode.style.border = 'none';
+document.getElementById('chat-input').parentElement.parentElement.style.minWidth = 0;
+
+document.getElementById('stop').parentElement.parentElement.style.minWidth = 0;
+document.getElementById('stop').parentElement.parentElement.style.display = 'flex';
+document.getElementById('stop').parentElement.parentElement.style.flexDirection = 'column-reverse';
+document.getElementById('stop').parentElement.parentElement.style.paddingBottom = '3px';
+document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '20px';
+
+document.getElementById('gr-hover').parentElement.style.minWidth = 0;
+document.getElementById('gr-hover').parentElement.style.display = 'flex';
+document.getElementById('gr-hover').parentElement.style.flexDirection = 'column-reverse';
+document.getElementById('gr-hover').parentElement.style.flex = '0';
+document.getElementById('gr-hover').parentElement.style.paddingRight = '20px';
+document.getElementById('gr-hover').parentElement.style.paddingBottom = '3px';
 
 //------------------------------------------------
 // Remove some backgrounds
@@ -189,3 +205,28 @@ for(i = 0; i < noBackgroundelements.length; i++) {
     noBackgroundelements[i].parentNode.style.border = 'none';
     noBackgroundelements[i].parentNode.parentNode.parentNode.style.alignItems = 'center';
 }
+
+//------------------------------------------------
+// Create the hover menu in the chat tab
+//------------------------------------------------
+const buttonsInChat = document.getElementById("chat-tab").querySelectorAll("button");
+const hoverMenu = document.getElementById('hover-menu');
+
+for (let i = 14; i >= 2; i--) {
+  const button = buttonsInChat[i];
+  hoverMenu.appendChild(button);
+
+  if(i != 10) {
+    button.addEventListener("click", () => {
+      hoverMenu.style.display = 'none';
+      setTimeout(() => {
+        hoverMenu.style.display = '';
+      }, 2000);
+    });
+  }
+}
+
+//------------------------------------------------
+// Focus on the chat input
+//------------------------------------------------
+document.querySelector('#chat-input textarea').focus()

js/show_controls.js

@@ -8,11 +8,13 @@ function toggle_controls(value) {
         });
 
         chatParent.classList.remove("bigchat");
+        document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '20px';
     } else {
         belowChatInput.forEach(element => {
           element.style.display = "none";
         });
 
         chatParent.classList.add("bigchat");
+        document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '0px';
     }
 }

modules/ui_chat.py

@@ -22,34 +22,35 @@ 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 (Ctrl+S)', elem_id='show-controls')
-        shared.gradio['typing-dots'] = gr.HTML(value='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
 
         with gr.Row():
-            shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop')
+            with gr.Column(scale=1):
-            shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary')
+                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')
-            shared.gradio['Continue'] = gr.Button('Continue')
 
-        with gr.Row():
+            with gr.Column(scale=10):
-            shared.gradio['Impersonate'] = gr.Button('Impersonate')
+                shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input')
-            shared.gradio['Regenerate'] = gr.Button('Regenerate')
+                shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
-            shared.gradio['Remove last'] = gr.Button('Remove last', elem_classes=['button_nowrap'])
+                shared.gradio['typing-dots'] = gr.HTML(value='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
 
-        with gr.Row():
+            with gr.Column(scale=1):
-            shared.gradio['Copy last reply'] = gr.Button('Copy last reply')
+                with gr.Row():
-            shared.gradio['Replace last reply'] = gr.Button('Replace last reply')
+                    shared.gradio['Stop'] = gr.Button('■', elem_id='stop', visible=False, variant='stop')
-            shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
+                    shared.gradio['Generate'] = gr.Button('►', elem_id='Generate', variant='primary')
-            shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
 
-        with gr.Row():
+        # Hover menu buttons
-            shared.gradio['Clear history'] = gr.Button('Clear history')
+        shared.gradio['Continue'] = gr.Button('Continue')
-            shared.gradio['Clear history-confirm'] = gr.Button('Confirm', variant='stop', visible=False)
+        shared.gradio['Impersonate'] = gr.Button('Impersonate')
-            shared.gradio['Clear history-cancel'] = gr.Button('Cancel', visible=False)
+        shared.gradio['Regenerate'] = gr.Button('Regenerate')
-
+        shared.gradio['Remove last'] = gr.Button('Remove last', elem_classes=['button_nowrap'])
-        with gr.Row():
+        shared.gradio['Copy last reply'] = gr.Button('Copy last reply')
-            shared.gradio['send-chat-to-default'] = gr.Button('Send to default')
+        shared.gradio['Replace last reply'] = gr.Button('Replace last reply')
-            shared.gradio['send-chat-to-notebook'] = gr.Button('Send to notebook')
+        shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
+        shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
+        shared.gradio['Clear history'] = gr.Button('Clear history')
+        shared.gradio['Clear history-cancel'] = gr.Button('Cancel', visible=False)
+        shared.gradio['Clear history-confirm'] = gr.Button('Confirm', variant='stop', visible=False)
+        shared.gradio['send-chat-to-default'] = gr.Button('Send to default')
+        shared.gradio['send-chat-to-notebook'] = gr.Button('Send to notebook')
 
         with gr.Row():
             shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with'])