simcop2387/text-generation-webui-mirror
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2025-06-07 06:06:20 -04:00
Code Issues Projects Releases Packages Wiki Activity

Optimize the Chat tab (#6948)

Browse source
This commit is contained in:
oobabooga 2025-05-04 18:58:37 -03:00 • committed by GitHub
parent b7a5c7db8d
commit 7853fb1c8d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
css/main.css
View file

@ -389,7 +389,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.chat {
margin-left: auto;
margin-right: auto;
min-height: var(--chat-height);
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
@ -401,11 +401,9 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
.chat-parent {
height: calc(100dvh - 98px - var(--input-delta));
flex: 1;
overflow: auto !important;
/* scroll-behavior: smooth; */
border-radius: 0 !important;
margin-bottom: var(--input-delta) !important;
}
.chat-parent .prose {
@ -422,8 +420,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
.chat-parent.bigchat {
height: calc(100dvh - 98px - var(--input-delta)) !important;
margin-bottom: var(--input-delta) !important;
flex: 1;
}
.chat > .messages {
@ -604,8 +601,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
.chat-input-positioned {
position: absolute;
bottom: 0;
max-width: 54rem;
left: 50%;
transform: translateX(-50%);
@ -790,7 +785,8 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat-input-container {
min-width: 0 !important;
display: flex;
flex-direction: column;
}
#chat-input-container > .form {
@ -799,9 +795,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat-input-row {
padding-bottom: 1.5em;
padding-left: 1rem;
padding-right: 1rem;
padding: 1rem;
}
#chat-input-row.bigchat {
@ -809,22 +803,16 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat-col {
padding-bottom: 100px;
height: 100dvh;
display: flex;
flex-direction: column;
padding-bottom: 0;
}
@media screen and (width <= 924px) {
#chat-col {
padding-bottom: 100px;
height: calc(100dvh - 132px);
margin-top: 32px;
position: relative; /* Ensure positioning for the pseudo-element */
}
.chat-parent {
height: calc(100dvh - 98px - var(--input-delta) - 32px);
}
.chat-parent.bigchat {
height: calc(100dvh - 98px - var(--input-delta) - 32px) !important;
}
}

8
js/main.js
View file

@ -442,12 +442,6 @@ function updateCssProperties() {
// Check if the chat container is visible
if (chatContainer.clientHeight > 0) {
const chatContainerParentHeight = chatContainer.parentNode.clientHeight;
const newChatHeight = `${chatContainerParentHeight - chatInputHeight - 80}px`;
document.documentElement.style.setProperty("--chat-height", newChatHeight);
document.documentElement.style.setProperty("--input-delta", `${chatInputHeight - 40}px`);
// Adjust scrollTop based on input height change
if (chatInputHeight !== currentChatInputHeight) {
const deltaHeight = chatInputHeight - currentChatInputHeight;
@ -720,7 +714,7 @@ function isMobile() {
// Function to initialize sidebars
function initializeSidebars() {
const isOnMobile = isMobile();
if (isOnMobile) {
// Mobile state: Hide sidebars and set closed states
[pastChatsRow, chatControlsRow, headerBar].forEach(el => {

2
modules/ui_chat.py
View file

@ -46,8 +46,8 @@ def create_ui():
with gr.Row():
with gr.Column(elem_id='chat-col'):
shared.gradio['html_display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, '', '', 'chat', 'cai-chat', '')['html'], visible=True)
shared.gradio['display'] = gr.JSON(value={}, visible=False) # Hidden buffer
shared.gradio['html_display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, '', '', 'chat', 'cai-chat', '')['html'], visible=True)
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')