Dragon-Knight/templates/babblebox.php

<div id="babblebox">
	<div class="messages" hx-get="/babblebox/messages" hx-trigger="every 5s">
		<?= $messages ?>
	</div>

	<form hx-post="/babblebox" hx-target="#babblebox > .messages" style="margin-top: 1rem;">
		<input type="text" name="babble" maxlength="255"><br>
		<input type="submit" name="submit" value="Babble">
		<input type="reset" name="reset" value="Clear">
	</form>

	<script>
		let chatBox = document.querySelector('#babblebox > .messages')
		let isUserAtBottom = true
		if (chatBox !== null) {
			chatBox.scrollTop = chatBox.scrollHeight;
			const isAtBottom = () => chatBox.scrollHeight - chatBox.scrollTop === chatBox.clientHeight

			const scrollChatToBottom = () => {
				if (isUserAtBottom) chatBox.scrollTop = chatBox.scrollHeight;
			}

			const observer = new MutationObserver(scrollChatToBottom)
			observer.observe(chatBox, { childList: true, subtree: true })

			chatBox.addEventListener('scroll', () => isUserAtBottom = isAtBottom())
		}
	</script>
</div>