From 2ad6ca88749afe645f1498c26a2c88c4bba3cd09 Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Fri, 15 Sep 2023 21:39:37 -0600 Subject: [PATCH] Add back chat buttons with --chat-buttons (#3947) --- README.md | 1 + css/main.css | 12 ++++++++++++ js/main.js | 44 ++++++++++++++++++++++++++------------------ js/show_controls.js | 2 +- modules/shared.py | 1 + modules/ui_chat.py | 34 ++++++++++++++++++++-------------- 6 files changed, 61 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index f20da84f..5cded3b8 100644 --- a/README.md +++ b/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 diff --git a/css/main.css b/css/main.css index 6c02e871..6e684636 100644 --- a/css/main.css +++ b/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; +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 6440226e..f7f97af7 100644 --- a/js/main.js +++ b/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--) { - const thisButton = buttonsInChat[i]; - menu.appendChild(thisButton); +if (buttonsInChat.length > 0) { + for (let i = buttonsInChat.length - 1; i >= 0; i--) { + const thisButton = buttonsInChat[i]; + menu.appendChild(thisButton); - if(i != 10) { - thisButton.addEventListener("click", () => { - hideMenu(); - }); - } + if(i != 8) { + thisButton.addEventListener("click", () => { + hideMenu(); + }); + } - const buttonText = thisButton.textContent; - 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, ` ${substring}`); - thisButton.innerHTML = newText; - } + const buttonText = thisButton.textContent; + 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, ` ${substring}`); + 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() { diff --git a/js/show_controls.js b/js/show_controls.js index 89908795..31d377da 100644 --- a/js/show_controls.js +++ b/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) { diff --git a/modules/shared.py b/modules/shared.py index 30fa1393..ab1dbe11 100644 --- a/modules/shared.py +++ b/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') diff --git a/modules/ui_chat.py b/modules/ui_chat.py index 07e7a47b..c602fe95 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'): 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') - shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue') - shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last') - shared.gradio['Replace last reply'] = gr.Button('Replace last reply (Ctrl + Shift + L)', elem_id='Replace-last') - shared.gradio['Copy last reply'] = gr.Button('Copy last reply (Ctrl + Shift + K)', elem_id='Copy-last') - shared.gradio['Impersonate'] = gr.Button('Impersonate (Ctrl + Shift + M)', elem_id='Impersonate') - 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, elem_id='clear-history-confirm') - shared.gradio['send-chat-to-default'] = gr.Button('Send to default') - shared.gradio['send-chat-to-notebook'] = gr.Button('Send to notebook') + with gr.Column(elem_id='chat-buttons', elem_classes=("old-ui" if shared.args.chat_buttons else None)): + with gr.Row(): + shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate') + shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue') + shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last') + with gr.Row(): + shared.gradio['Replace last reply'] = gr.Button('Replace last reply (Ctrl + Shift + L)', elem_id='Replace-last') + shared.gradio['Copy last reply'] = gr.Button('Copy last reply (Ctrl + Shift + K)', elem_id='Copy-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['Send dummy reply'] = gr.Button('Send dummy reply') + 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'])