Improved chat scrolling (#3601)

This commit is contained in:
oobabooga 2023-08-17 01:03:40 -03:00 committed by GitHub
parent 300219b081
commit 46408465ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 2 deletions

View File

@ -253,6 +253,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.bigchat #chat {
height: calc(100dvh - 180px) !important;
}
.chat {
flex-direction: column-reverse !important;
}
}
.chat {
@ -263,10 +267,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
overflow-y: auto;
padding-right: 20px;
display: flex;
flex-direction: column-reverse;
flex-direction: column;
word-break: break-word;
overflow-wrap: anywhere;
padding-top: 1px;
padding-top: 6px;
}
#chat {

View File

@ -48,3 +48,26 @@ document.addEventListener("keydown", function(event) {
}
}
});
// Chat scrolling
const targetElement = document.getElementById('chat').parentNode.parentNode.parentNode;
// Create a MutationObserver instance
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
let childElement = targetElement.childNodes[2].childNodes[0].childNodes[1];
childElement.scrollTop = childElement.scrollHeight;
});
});
// Configure the observer to watch for changes in the subtree and attributes
const config = {
childList: true,
subtree: true,
characterData: true,
attributeOldValue: true,
characterDataOldValue: true
};
// Start observing the target element
observer.observe(targetElement, config);