engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

allow user to prevent autoscrolling streamed chunks.

Browse source 
modified:   templates/chat.html
This commit is contained in:
Russell Ballestrini 2024-04-04 10:01:32 -04:00
parent 4037872e7e
commit dabce4a954
1 changed files with 17 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
templates/chat.html
View file

@ -192,7 +192,6 @@
// Connect to the server using socket.io with dynamic scheme (http or https)
const socket = io.connect(window.location.protocol + "//" + document.domain + ":" + location.port);
// Retrieve username and room name from the URL parameters
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get("username");
@ -208,6 +207,18 @@ const dompurify_config = {
]
};
// keeping track of scrolling to prevent autoscrolling.
let userHasScrolledUp = false;
document.addEventListener('DOMContentLoaded', (event) => {
const chatContainer = document.getElementById("chat");
chatContainer.addEventListener('scroll', () => {
const distanceFromBottom = chatContainer.scrollHeight - chatContainer.scrollTop - chatContainer.clientHeight;
userHasScrolledUp = distanceFromBottom > 5;
});
});
// Function to handle sending the message
function sendMessage() {
const message = document.getElementById("message").value;
@ -308,7 +319,7 @@ socket.on("message", (data) => {
addLineNumbers(block);
});
// Scroll to the bottom of the chat container
// Scroll to the bottom of the chat container to show the new message.
if (data.id) {
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
}
@ -441,8 +452,10 @@ socket.on("message_chunk", (data) => {
addLineNumbers(block);
});
// Scroll to the bottom of the chat container
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
// Scroll to the bottom of the chat container, but skip it if the user has scrolled up.
if (!userHasScrolledUp) {
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
}
});