Mirrors/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-11-21 23:57:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move hover menu shortcuts to right side (#3951)

Browse Source
This commit is contained in:
missionfloyd 2023-09-17 19:33:00 -06:00 committed by GitHub
parent 280cca9f66
commit cc8eda298a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 71 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
css/main.css
View File

@ -313,6 +313,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.chat-parent {
height: calc(100dvh - 179px) !important;
}
.old-ui .chat-parent {
height: calc(100dvh - 310px) !important;
}
}
.chat {
@ -333,11 +337,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
overflow: auto !important;
}
.chat-parent.old-ui {
.old-ui .chat-parent {
height: calc(100dvh - 270px);
}
.bigchat {
.chat-parent.bigchat {
height: calc(100dvh - 181px) !important;
}
@ -515,7 +519,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
width: 100%;
background: transparent !important;
border-radius: 0px !important;
justify-content: left;
justify-content: space-between;
margin: 0 !important;
height: 36px;
}
@ -536,6 +540,52 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
opacity: 0.333;
}
#chat-buttons:not(.old-ui) {
#chat-tab:not(.old-ui) #chat-buttons {
display: none !important;
}
}
#gr-hover-container {
min-width: 0 !important;
display: flex;
flex-direction: column-reverse;
padding-right: 20px;
padding-bottom: 3px;
flex-grow: 0 !important;
}
#generate-stop-container {
min-width: 0 !important;
display: flex;
flex-direction: column-reverse;
padding-bottom: 3px;
flex: 0 auto !important;
}
#chat-input-container {
min-width: 0 !important;
}
#chat-input-container > .form {
background: transparent;
border: none;
}
#chat-input-row {
padding-bottom: 20px;
}
.old-ui #chat-input-row, #chat-input-row.bigchat {
padding-bottom: 0px !important;
}
#chat-col {
padding-bottom: 115px;
}
.old-ui #chat-col, #chat-col.bigchat {
padding-bottom: 95px !important;
}
.old-ui #chat-buttons #clear-history-confirm {
order: -1;
}

33
js/main.js
View File

@ -213,30 +213,6 @@ for(i = 0; i < textareaElements.length; i++) {
textareaElements[i].style.resize = "none";
}
//------------------------------------------------
// Improve the looks of the chat input field
//------------------------------------------------
let isOld = document.querySelectorAll('.old-ui').length > 0;
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 = isOld ? '0px' : '20px';
document.getElementById('stop').parentElement.parentElement.style.flex = '0 0 auto';
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
//------------------------------------------------
@ -251,7 +227,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
//------------------------------------------------
var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons:not(.old-ui) button");
var buttonsInChat = document.querySelectorAll("#chat-tab:not(.old-ui) #chat-buttons button");
var button = document.getElementById('hover-element-button');
var menu = document.getElementById('hover-menu');
@ -280,17 +256,16 @@ if (buttonsInChat.length > 0) {
if (matches && matches.length > 1) {
// Apply the transparent-substring class to the matched substring
const substring = matches[1];
const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring}</span>`);
const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring.slice(1, -1)}</span>`);
thisButton.innerHTML = newText;
}
}
} else {
buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons.old-ui button");
console.log(buttonsInChat);
buttonsInChat = document.querySelectorAll("#chat-tab.old-ui #chat-buttons button");
for (let i = 0; i < buttonsInChat.length; i++) {
buttonsInChat[i].textContent = buttonsInChat[i].textContent.replace(/ \(.*?\)/, '');
}
document.getElementById('gr-hover').parentElement.style.display = 'none';
document.getElementById('gr-hover-container').style.display = 'none';
}
function isMouseOverButtonOrMenu() {

9
js/show_controls.js
View File

@ -1,6 +1,5 @@
const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions");
const chatParent = document.querySelector(".chat-parent");
let isOld = document.querySelectorAll('.old-ui').length > 0;
function toggle_controls(value) {
if (value) {
@ -9,15 +8,15 @@ function toggle_controls(value) {
});
chatParent.classList.remove("bigchat");
document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = isOld ? '0px' : '20px';
document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = isOld ? '95px' : '115px';
document.getElementById('chat-input-row').classList.remove("bigchat");
document.getElementById('chat-col').classList.remove("bigchat");
} else {
belowChatInput.forEach(element => {
element.style.display = "none";
});
chatParent.classList.add("bigchat");
document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '0px';
document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = '95px';
document.getElementById('chat-input-row').classList.add("bigchat")
document.getElementById('chat-col').classList.add("bigchat");
}
}

16
modules/ui_chat.py
View File

@ -20,27 +20,27 @@ def create_ui():
shared.gradio['dummy'] = gr.State()
shared.gradio['history'] = gr.State({'internal': [], 'visible': []})
with gr.Tab('Chat', elem_id='chat-tab'):
with gr.Tab('Chat', elem_id='chat-tab', elem_classes=("old-ui" if shared.args.chat_buttons else None)):
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'), elem_classes=("old-ui" if shared.args.chat_buttons else None))
with gr.Column(elem_id='chat-col'):
shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
with gr.Row():
with gr.Column(scale=1):
with gr.Row(elem_id="chat-input-row"):
with gr.Column(scale=1, elem_id='gr-hover-container'):
gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block" id="hover-element-button">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
with gr.Column(scale=10):
with gr.Column(scale=10, elem_id='chat-input-container'):
shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input', elem_classes=['add_scrollbar'])
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='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
with gr.Column(scale=1):
with gr.Column(scale=1, elem_id='generate-stop-container'):
with gr.Row():
shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop', visible=False)
shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary')
# Hover menu buttons
with gr.Column(elem_id='chat-buttons', elem_classes=("old-ui" if shared.args.chat_buttons else None)):
with gr.Column(elem_id='chat-buttons'):
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')