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

Make the chat input expand upwards (#3920)

Browse Source
This commit is contained in:
oobabooga 2023-09-14 07:06:42 -03:00 committed by GitHub
parent 6b6af74e14
commit 27dbcc59f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/main.css
View File

@ -359,7 +359,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
#chat-input { #chat-input {
padding: 0; padding: 0;
padding-top: 18px; padding-top: 18px;
background: var(--background-fill-primary); background: transparent;
border: none; border: none;
} }

6
js/main.js
View File

@ -332,6 +332,12 @@ for (var i = 0; i < 2; i++) {
parent.insertBefore(elementToMove, parent.firstChild); parent.insertBefore(elementToMove, parent.firstChild);
//------------------------------------------------
// Make the chat input grow upwards instead of downwards
//------------------------------------------------
document.getElementById('show-controls').parentNode.style.position = 'absolute';
document.getElementById('show-controls').parentNode.style.bottom = '0px';
//------------------------------------------------ //------------------------------------------------
// Focus on the chat input // Focus on the chat input
//------------------------------------------------ //------------------------------------------------

4
js/show_controls.js
View File

@ -1,4 +1,4 @@
const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+3), #extensions"); const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions");
const chatParent = document.getElementById("chat").parentNode.parentNode.parentNode; const chatParent = document.getElementById("chat").parentNode.parentNode.parentNode;
function toggle_controls(value) { function toggle_controls(value) {
@ -9,6 +9,7 @@ function toggle_controls(value) {
chatParent.classList.remove("bigchat"); chatParent.classList.remove("bigchat");
document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '20px'; document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '20px';
document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = '115px';
} else { } else {
belowChatInput.forEach(element => { belowChatInput.forEach(element => {
element.style.display = "none"; element.style.display = "none";
@ -16,5 +17,6 @@ function toggle_controls(value) {
chatParent.classList.add("bigchat"); chatParent.classList.add("bigchat");
document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '0px'; document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '0px';
document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = '95px';
} }
} }

4
modules/ui_chat.py
View File

@ -21,6 +21,8 @@ def create_ui():
shared.gradio['history'] = gr.State({'internal': [], 'visible': []}) shared.gradio['history'] = gr.State({'internal': [], 'visible': []})
with gr.Tab('Chat', elem_id='chat-tab'): with gr.Tab('Chat', elem_id='chat-tab'):
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')) 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.Row():
@ -28,7 +30,7 @@ def create_ui():
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') 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):
shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input') 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['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') 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')