Add back chat buttons with --chat-buttons (#3947)

README.md

@@ -356,6 +356,7 @@ Optionally, you can use the following command-line flags:
 | `--gradio-auth-path GRADIO_AUTH_PATH` | Set the gradio authentication file path. The file should contain one or more user:password pairs in this format: "u1:p1,u2:p2,u3:p3" |
 | `--ssl-keyfile SSL_KEYFILE`           | The path to the SSL certificate key file. |
 | `--ssl-certfile SSL_CERTFILE`         | The path to the SSL certificate cert file. |
+| `--chat-buttons`                      | Show buttons on chat tab instead of hover menu. |
 
 #### API
 

css/main.css

@@ -333,6 +333,14 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     overflow: auto !important;
 }
 
+.chat-parent.old-ui {
+    height: calc(100dvh - 290px);
+}
+
+.bigchat {
+    height: calc(100dvh - 181px) !important;
+}
+
 .chat > .messages {
     display: flex;
     flex-direction: column;
@@ -527,3 +535,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 .transparent-substring {
   opacity: 0.333;
 }
+
+#chat-buttons:not(.old-ui) {
+    display: none !important;
+}

js/main.js

@@ -249,7 +249,7 @@ for(i = 0; i < noBackgroundelements.length; i++) {
 // The show/hide events were adapted from:
 // https://github.com/SillyTavern/SillyTavern/blob/6c8bd06308c69d51e2eb174541792a870a83d2d6/public/script.js
 //------------------------------------------------
-const buttonsInChat = document.getElementById("chat-tab").querySelectorAll("button");
+var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons:not(.old-ui) button");
 var button = document.getElementById('hover-element-button');
 var menu = document.getElementById('hover-menu');
 
@@ -261,26 +261,34 @@ function hideMenu() {
     menu.style.display = 'none'; // Hide the menu
 }
 
-for (let i = 14; i >= 2; i--) {
+if (buttonsInChat.length > 0) {
-  const thisButton = buttonsInChat[i];
+    for (let i = buttonsInChat.length - 1; i >= 0; i--) {
-  menu.appendChild(thisButton);
+        const thisButton = buttonsInChat[i];
+        menu.appendChild(thisButton);
 
-  if(i != 10) {
+        if(i != 8) {
-    thisButton.addEventListener("click", () => {
+            thisButton.addEventListener("click", () => {
-      hideMenu();
+                hideMenu();
-    });
+            });
-  }
+        }
 
-  const buttonText = thisButton.textContent;
+        const buttonText = thisButton.textContent;
-  const matches = buttonText.match(/(\(.*?\))/);
+        const matches = buttonText.match(/(\(.*?\))/);
-
-  if (matches && matches.length > 1) {
-    // Apply the transparent-substring class to the matched substring
-    const substring = matches[1];
-    const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring}</span>`);
-    thisButton.innerHTML = newText;
-  }
 
+        if (matches && matches.length > 1) {
+            // Apply the transparent-substring class to the matched substring
+            const substring = matches[1];
+            const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring}</span>`);
+            thisButton.innerHTML = newText;
+        }
+    }
+} else {
+    buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons.old-ui button");
+    console.log(buttonsInChat);
+    for (let i = 0; i < buttonsInChat.length; i++) {
+        buttonsInChat[i].textContent = buttonsInChat[i].textContent.replace(/ \(.*?\)/, '');
+    }
+    document.getElementById('gr-hover').parentElement.style.display = 'none';
 }
 
 function isMouseOverButtonOrMenu() {

js/show_controls.js

@@ -1,5 +1,5 @@
 const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions");
-const chatParent = document.getElementById("chat").parentNode.parentNode.parentNode;
+const chatParent = document.querySelector(".chat-parent");
 
 function toggle_controls(value) {
     if (value) {

modules/shared.py

@@ -91,6 +91,7 @@ parser.add_argument('--no-stream', action='store_true', help='DEPRECATED')
 parser.add_argument('--settings', type=str, help='Load the default interface settings from this yaml file. See settings-template.yaml for an example. If you create a file called settings.yaml, this file will be loaded by default without the need to use the --settings flag.')
 parser.add_argument('--extensions', type=str, nargs="+", help='The list of extensions to load. If you want to load more than one extension, write the names separated by spaces.')
 parser.add_argument('--verbose', action='store_true', help='Print the prompts to the terminal.')
+parser.add_argument('--chat-buttons', action='store_true', help='Show buttons on chat tab instead of hover menu.')
 
 # Model loader
 parser.add_argument('--loader', type=str, help='Choose the model loader manually, otherwise, it will get autodetected. Valid options: transformers, autogptq, gptq-for-llama, exllama, exllama_hf, llamacpp, rwkv')

modules/ui_chat.py

@@ -23,7 +23,7 @@ def create_ui():
     with gr.Tab('Chat', elem_id='chat-tab'):
         with gr.Row():
             with gr.Column():
-                shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
+                shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'), elem_classes=("old-ui" if shared.args.chat_buttons else None))
 
                 with gr.Row():
                     with gr.Column(scale=1):
@@ -40,19 +40,25 @@ def create_ui():
                             shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary')
 
         # Hover menu buttons
-        shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate')
+        with gr.Column(elem_id='chat-buttons', elem_classes=("old-ui" if shared.args.chat_buttons else None)):
-        shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue')
+            with gr.Row():
-        shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last')
+                shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate')
-        shared.gradio['Replace last reply'] = gr.Button('Replace last reply (Ctrl + Shift + L)', elem_id='Replace-last')
+                shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue')
-        shared.gradio['Copy last reply'] = gr.Button('Copy last reply (Ctrl + Shift + K)', elem_id='Copy-last')
+                shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last')
-        shared.gradio['Impersonate'] = gr.Button('Impersonate (Ctrl + Shift + M)', elem_id='Impersonate')
+            with gr.Row():
-        shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
+                shared.gradio['Replace last reply'] = gr.Button('Replace last reply (Ctrl + Shift + L)', elem_id='Replace-last')
-        shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
+                shared.gradio['Copy last reply'] = gr.Button('Copy last reply (Ctrl + Shift + K)', elem_id='Copy-last')
-        shared.gradio['Clear history'] = gr.Button('Clear history')
+                shared.gradio['Impersonate'] = gr.Button('Impersonate (Ctrl + Shift + M)', elem_id='Impersonate')
-        shared.gradio['Clear history-cancel'] = gr.Button('Cancel', visible=False)
+            with gr.Row():
-        shared.gradio['Clear history-confirm'] = gr.Button('Confirm', variant='stop', visible=False, elem_id='clear-history-confirm')
+                shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
-        shared.gradio['send-chat-to-default'] = gr.Button('Send to default')
+                shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
-        shared.gradio['send-chat-to-notebook'] = gr.Button('Send to notebook')
+            with gr.Row():
+                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, elem_id='clear-history-confirm')
+            with gr.Row():
+                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'])