AI/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-10-01 01:26:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

Restyle the chat input box + several CSS improvements

Browse Source 
- 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
This commit is contained in:
oobabooga 2023-08-17 11:06:18 -07:00
parent cebe07f29c
commit bdb6eb5734
4 changed files with 43 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/html_instruct_style.css
View File

@ -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;
}

32
css/main.css
View File

@ -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;

12
js/main.js
View File

@ -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';

2
modules/ui_chat.py
View File

@ -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():