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

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

15
js/main.js
View File

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