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

Reorganize chat buttons (#3892)

Browse Source
This commit is contained in:
oobabooga 2023-09-13 02:36:12 -03:00 committed by GitHub
parent 34dc7306b8
commit 5e3d2f7d44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 101 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/main.css
View File

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

45
js/main.js
View File

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

2
js/show_controls.js
View File

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

47
modules/ui_chat.py
View File

@ -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='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', 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='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', 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='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', 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'])