From 5e3d2f7d447700076fa66fb33f991d561da0a94b Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Wed, 13 Sep 2023 02:36:12 -0300 Subject: [PATCH] Reorganize chat buttons (#3892) --- css/main.css | 42 ++++++++++++++++++++++++++++++---------- js/main.js | 45 +++++++++++++++++++++++++++++++++++++++++-- js/show_controls.js | 2 ++ modules/ui_chat.py | 47 +++++++++++++++++++++++---------------------- 4 files changed, 101 insertions(+), 35 deletions(-) diff --git a/css/main.css b/css/main.css index 6b4eb0fe..aff19090 100644 --- a/css/main.css +++ b/css/main.css @@ -293,11 +293,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { } .chat-parent { - height: calc(100dvh - 262px) !important; - } - - .bigchat { - height: calc(100dvh - 180px) !important; + height: calc(100dvh - 172px) !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; +} diff --git a/js/main.js b/js/main.js index db31b376..e65c7314 100644 --- a/js/main.js +++ b/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() diff --git a/js/show_controls.js b/js/show_controls.js index 2a86a15e..8d90aa53 100644 --- a/js/show_controls.js +++ b/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'; } } diff --git a/modules/ui_chat.py b/modules/ui_chat.py index e3f5820d..2dcd0969 100644 --- a/modules/ui_chat.py +++ b/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='
', label='typing', elem_id='typing-container') with gr.Row(): - shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop') - shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary') - shared.gradio['Continue'] = gr.Button('Continue') + with gr.Column(scale=1): + gr.HTML(value='
☰
', elem_id='gr-hover') - with gr.Row(): - shared.gradio['Impersonate'] = gr.Button('Impersonate') - shared.gradio['Regenerate'] = gr.Button('Regenerate') - shared.gradio['Remove last'] = gr.Button('Remove last', elem_classes=['button_nowrap']) + with gr.Column(scale=10): + 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='
', label='typing', elem_id='typing-container') - with gr.Row(): - shared.gradio['Copy last reply'] = gr.Button('Copy last reply') - shared.gradio['Replace last reply'] = gr.Button('Replace last reply') - shared.gradio['Send dummy message'] = gr.Button('Send dummy message') - shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply') + with gr.Column(scale=1): + with gr.Row(): + shared.gradio['Stop'] = gr.Button('■', elem_id='stop', visible=False, variant='stop') + shared.gradio['Generate'] = gr.Button('►', elem_id='Generate', variant='primary') - with gr.Row(): - shared.gradio['Clear history'] = gr.Button('Clear history') - shared.gradio['Clear history-confirm'] = gr.Button('Confirm', variant='stop', visible=False) - shared.gradio['Clear history-cancel'] = gr.Button('Cancel', visible=False) - - 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') + # Hover menu buttons + shared.gradio['Continue'] = gr.Button('Continue') + shared.gradio['Impersonate'] = gr.Button('Impersonate') + shared.gradio['Regenerate'] = gr.Button('Regenerate') + shared.gradio['Remove last'] = gr.Button('Remove last', elem_classes=['button_nowrap']) + shared.gradio['Copy last reply'] = gr.Button('Copy last reply') + shared.gradio['Replace last reply'] = gr.Button('Replace last reply') + 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'])