Mirrors/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-09-20 10:35:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

UI: Expand chat vertically and handle header wrapping

Browse source
This commit is contained in:
Lounger 2023-12-21 03:42:23 +01:00
parent a098c7eee3
commit e3e053ab99
2 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
css/main.css
View file

@ -325,14 +325,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-left: 0;
padding-right: 0;
}
.chat-parent {
height: calc(100dvh - 179px) !important;
}
.old-ui .chat-parent {
height: calc(100dvh - 310px) !important;
}
}
.chat {
@ -349,16 +341,16 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
.chat-parent {
height: calc(100dvh - 181px);
height: calc(100dvh - 113px - var(--chat-input-offset));
overflow: auto !important;
}
.old-ui .chat-parent {
height: calc(100dvh - 270px);
height: calc(100dvh - 207px - var(--chat-input-offset));
}
.chat-parent.bigchat {
height: calc(100dvh - 181px) !important;
height: calc(100dvh - 113px - var(--chat-input-offset)) !important;
}
.chat > .messages {

15
js/main.js
View file

@ -126,7 +126,7 @@ targetElement.addEventListener("scroll", function() {
// Create a MutationObserver instance
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
updateChatHeight();
updateCssProperties();
if(!isScrolled) {
targetElement.scrollTop = targetElement.scrollHeight;
@ -329,14 +329,17 @@ function toggleBigPicture() {
}
//------------------------------------------------
// Define the --chat-height global CSS variable to
// the height of the chat parent
// Define global CSS properties for resizing and
// positioning certain elements
//------------------------------------------------
function updateChatHeight() {
function updateCssProperties() {
const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode;
const newChatHeight = `${chatContainer.clientHeight}px`;
document.documentElement.style.setProperty('--chat-height', newChatHeight);
const header = document.querySelector('.header_bar');
const chatInputOffset = `${header.clientHeight}px`;
document.documentElement.style.setProperty('--chat-input-offset', chatInputOffset);
}
window.addEventListener('resize', updateChatHeight);
window.addEventListener('resize', updateCssProperties);