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

UI: fix scroll down after sending a multiline message

Browse Source
This commit is contained in:
oobabooga 2024-02-17 19:24:04 -08:00
parent d6bd71db7f
commit 904867a139
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
js/main.js
View File

@ -377,36 +377,41 @@ function toggleBigPicture() {
}
//------------------------------------------------
// Define global CSS properties for resizing and
// positioning certain elements
// Handle the chat input box growth
//------------------------------------------------
let currentChatInputHeight = 0;
// Update chat layout based on chat and input dimensions
function updateCssProperties() {
// Set the height of the chat area
const chatContainer = document.getElementById("chat").parentNode.parentNode.parentNode;
const chatInputHeight = document.querySelector("#chat-input textarea").clientHeight;
// Check if the chat container is visible
if (chatContainer.clientHeight > 0) {
// Calculate new chat height and adjust CSS properties
const newChatHeight = `${chatContainer.clientHeight - chatInputHeight + 40}px`;
document.documentElement.style.setProperty("--chat-height", newChatHeight);
document.documentElement.style.setProperty("--input-delta", `${chatInputHeight - 40}px`);
// Set the position offset of the chat input box
// Get and set header height
const header = document.querySelector(".header_bar");
const headerHeight = `${header.clientHeight}px`;
document.documentElement.style.setProperty("--header-height", headerHeight);
// Offset the scroll position of the chat area
// Adjust scrollTop based on input height change
if (chatInputHeight !== currentChatInputHeight) {
chatContainer.scrollTop += chatInputHeight > currentChatInputHeight ? chatInputHeight : -chatInputHeight;
chatContainer.scrollTop += chatInputHeight > currentChatInputHeight ? chatInputHeight : -chatInputHeight + 40;
currentChatInputHeight = chatInputHeight;
}
}
}
// Observe textarea size changes and call update function
new ResizeObserver(updateCssProperties)
.observe(document.querySelector("#chat-input textarea"));
// Handle changes in window size
window.addEventListener("resize", updateCssProperties);
//------------------------------------------------