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

Attempt at shrinking chat area when input box grows

Browse Source
This commit is contained in:
Lounger 2023-12-22 04:51:20 +01:00
parent 588b37c032
commit 554a8f910b
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/main.css
View File

@ -332,7 +332,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 880px; max-width: 880px;
min-height: var(--chat-height); height: var(--chat-height);
overflow-y: auto; overflow-y: auto;
padding-right: 15px; padding-right: 15px;
display: flex; display: flex;

16
js/main.js
View File

@ -332,14 +332,28 @@ function toggleBigPicture() {
// Define global CSS properties for resizing and // Define global CSS properties for resizing and
// positioning certain elements // positioning certain elements
//------------------------------------------------ //------------------------------------------------
let currentChatInputHeight = 0;
function updateCssProperties() { function updateCssProperties() {
// Set the height of the chat area
const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode; const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode;
const newChatHeight = `${chatContainer.clientHeight}px`; const chatInputHeight = document.querySelector('#chat-input textarea').clientHeight;
const newChatHeight = `${chatContainer.clientHeight - chatInputHeight + 40}px`;
document.documentElement.style.setProperty('--chat-height', newChatHeight); document.documentElement.style.setProperty('--chat-height', newChatHeight);
// Set the position offset of the chat input box
const header = document.querySelector('.header_bar'); const header = document.querySelector('.header_bar');
const chatInputOffset = `${header.clientHeight}px`; const chatInputOffset = `${header.clientHeight}px`;
document.documentElement.style.setProperty('--chat-input-offset', chatInputOffset); document.documentElement.style.setProperty('--chat-input-offset', chatInputOffset);
// Offset the scroll position of the chat area
if (chatInputHeight !== currentChatInputHeight) {
chatContainer.scrollTop += chatInputHeight > currentChatInputHeight ? chatInputHeight : -chatInputHeight;
currentChatInputHeight = chatInputHeight;
}
} }
new ResizeObserver(updateCssProperties)
.observe(document.querySelector('#chat-input textarea'));
window.addEventListener('resize', updateCssProperties); window.addEventListener('resize', updateCssProperties);