From bdb6eb5734b3bc9585c7edc7bd2f2ec8da679973 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Thu, 17 Aug 2023 11:06:18 -0700 Subject: [PATCH] Restyle the chat input box + several CSS improvements - Remove extra spacing below the last chat message - Change the background color of code blocks in dark mode - Remove border radius from selected header bar elements - Make the chat scrollbar more discrete --- css/html_instruct_style.css | 6 +++++- css/main.css | 32 +++++++++++++++++++++++++------- js/main.js | 12 ++++++++++++ modules/ui_chat.py | 2 +- 4 files changed, 43 insertions(+), 9 deletions(-) diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css index 575281b1..160aa01c 100644 --- a/css/html_instruct_style.css +++ b/css/html_instruct_style.css @@ -43,6 +43,10 @@ margin-bottom: 9px !important; } +.gradio-container .chat .assistant-message:last-child, .gradio-container .chat .user-message:last-child { + margin-bottom: 0px !important; +} + .dark .chat .assistant-message { background-color: #3741519e; border: 1px solid #4b5563; @@ -58,5 +62,5 @@ code { } .dark code { - background-color: #1a212f !important; + background-color: #0e1321 !important; } \ No newline at end of file diff --git a/css/main.css b/css/main.css index a97a18ca..1f5bf21b 100644 --- a/css/main.css +++ b/css/main.css @@ -100,6 +100,10 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * { background-color: #8080802b; } +.header_bar button.selected { + border-radius: 0; +} + .textbox_default textarea { height: calc(100dvh - 310px); } @@ -166,7 +170,7 @@ button { } .pretty_scrollbar::-webkit-scrollbar { - width: 10px; + width: 5px; } .pretty_scrollbar::-webkit-scrollbar-track { @@ -176,13 +180,11 @@ button { .pretty_scrollbar::-webkit-scrollbar-thumb, .pretty_scrollbar::-webkit-scrollbar-thumb:hover { background: #c5c5d2; - border-radius: 10px; } .dark .pretty_scrollbar::-webkit-scrollbar-thumb, .dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover { background: #374151; - border-radius: 10px; } .pretty_scrollbar::-webkit-resizer { @@ -247,7 +249,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { } #chat { - height: calc(100dvh - 272px) !important; + height: calc(100dvh - 262px) !important; } .bigchat #chat { @@ -265,7 +267,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { max-width: 800px; height: 100%; overflow-y: auto; - padding-right: 20px; + padding-right: 15px; display: flex; flex-direction: column; word-break: break-word; @@ -274,7 +276,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { } #chat { - height: calc(100dvh - 284px); + height: calc(100dvh - 272px); } .bigchat #chat { @@ -284,7 +286,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { #show-controls { position: absolute; background-color: transparent; - left: calc(100% - 140px); + left: calc(100% - 130px); } .chat > .messages { @@ -292,6 +294,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { flex-direction: column; } +.chat .message:last-child { + margin-bottom: 0px !important; + padding-bottom: 0px !important; +} + .message-body li { margin-top: 0.5em !important; margin-bottom: 0.5em !important; @@ -322,6 +329,17 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { white-space: normal !important; } +#chat-input { + padding: 0; + padding-top: 18px; + background: var(--background-fill-primary); + border: none; +} + +#chat-input textarea:focus { + box-shadow: none !important; +} + @media print { body { visibility: hidden; diff --git a/js/main.js b/js/main.js index 68a511fc..3428c62c 100644 --- a/js/main.js +++ b/js/main.js @@ -30,7 +30,9 @@ main_parent.addEventListener('click', function(e) { } }); +//------------------------------------------------ // Add some scrollbars +//------------------------------------------------ const textareaElements = document.querySelectorAll('.add_scrollbar textarea'); for(i = 0; i < textareaElements.length; i++) { textareaElements[i].classList.remove('scroll-hide'); @@ -38,7 +40,9 @@ for(i = 0; i < textareaElements.length; i++) { textareaElements[i].style.resize = "none"; } +//------------------------------------------------ // Stop generation on Esc pressed +//------------------------------------------------ document.addEventListener("keydown", function(event) { if (event.key === "Escape") { // Find the element with id 'stop' and click it @@ -49,7 +53,9 @@ document.addEventListener("keydown", function(event) { } }); +//------------------------------------------------ // Chat scrolling +//------------------------------------------------ const targetElement = document.getElementById('chat').parentNode.parentNode.parentNode; // Create a MutationObserver instance @@ -71,3 +77,9 @@ const config = { // Start observing the target element observer.observe(targetElement, config); + +//------------------------------------------------ +// Improve the looks of the chat input field +//------------------------------------------------ +document.getElementById('chat-input').parentNode.style.background = 'transparent'; +document.getElementById('chat-input').parentNode.style.border = 'none'; diff --git a/modules/ui_chat.py b/modules/ui_chat.py index b356f8c6..e727172c 100644 --- a/modules/ui_chat.py +++ b/modules/ui_chat.py @@ -22,7 +22,7 @@ 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='Input', elem_id='chat-input') + 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', elem_id='show-controls') with gr.Row():