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='