AI/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-10-01 01:26:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

UI: better handle scrolling when the input area grows

Browse Source
This commit is contained in:
oobabooga 2024-07-21 21:20:22 -07:00
parent 7ef2414357
commit e1085180cf
1 changed files with 3 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/main.js
View File

@ -445,14 +445,12 @@ function updateCssProperties() {
// Check if the chat container is visible // Check if the chat container is visible
if (chatContainer.clientHeight > 0) { if (chatContainer.clientHeight > 0) {
// Calculate new chat height and adjust CSS properties
var numericHeight = chatContainer.parentNode.clientHeight - chatInputHeight + 40 - 100; var numericHeight = chatContainer.parentNode.clientHeight - chatInputHeight + 40 - 100;
if (document.getElementById("chat-tab").style.paddingBottom != "") { if (document.getElementById("chat-tab").style.paddingBottom != "") {
numericHeight += 20; numericHeight += 20;
} }
const newChatHeight = `${numericHeight}px`;
const newChatHeight = `${numericHeight}px`;
document.documentElement.style.setProperty("--chat-height", newChatHeight); document.documentElement.style.setProperty("--chat-height", newChatHeight);
document.documentElement.style.setProperty("--input-delta", `${chatInputHeight - 40}px`); document.documentElement.style.setProperty("--input-delta", `${chatInputHeight - 40}px`);
@ -463,15 +461,14 @@ function updateCssProperties() {
// Adjust scrollTop based on input height change // Adjust scrollTop based on input height change
if (chatInputHeight !== currentChatInputHeight) { if (chatInputHeight !== currentChatInputHeight) {
chatContainer.scrollTop += chatInputHeight > currentChatInputHeight ? chatInputHeight : -chatInputHeight + 40; chatContainer.scrollTop += chatInputHeight - currentChatInputHeight;
currentChatInputHeight = chatInputHeight; currentChatInputHeight = chatInputHeight;
} }
} }
} }
// Observe textarea size changes and call update function // Observe textarea size changes and call update function
new ResizeObserver(updateCssProperties) new ResizeObserver(updateCssProperties).observe(document.querySelector("#chat-input textarea"));
.observe(document.querySelector("#chat-input textarea"));
// Handle changes in window size // Handle changes in window size
window.addEventListener("resize", updateCssProperties); window.addEventListener("resize", updateCssProperties);