diff --git a/app/static/script.js b/app/static/script.js index 7a4868e..e92ba1e 100644 --- a/app/static/script.js +++ b/app/static/script.js @@ -2,7 +2,9 @@ function sendMessage() { let id = window.location.href.split("/").slice(-1)[0] message = document.getElementById("chatbox-input-box").value document.getElementById("chatbox-input-box").value = '' - document.getElementById("chatbox").innerHTML += `
${message}
`; + let chatbox = document.getElementById("chatbox"); + chatbox.innerHTML += `
${message}
`; + chatbox.scrollTop = chatbox.scrollHeight; var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { @@ -11,11 +13,12 @@ function sendMessage() { } else { message = "Encountered an error while trying to get a response."; } - document.getElementById("chatbox").innerHTML += `
${this.responseText}
`; + chatbox.innerHTML += `
${this.responseText}
`; + chatbox.scrollTop = chatbox.scrollHeight; } }; xhttp.open("GET", `/bot/chat/${id}/message`, true); - xhttp.send(); + xhttp.send(); return false; } diff --git a/app/static/style.css b/app/static/style.css index 136f204..c8911a6 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -217,6 +217,7 @@ form .row { height: 90vh; background-color: #3d4353; padding: 10px; + overflow-y: scroll; } #chatbox-input, #chatbox-input input{ width: 100%; @@ -239,7 +240,6 @@ form .row { text-align: right; } .message-container .bot-icon { - background: center / contain url("https://lynnesbian.space/img/bune.png") no-repeat; height: 30px; width: 30px; display: inline-block; diff --git a/app/templates/bot/chat.html b/app/templates/bot/chat.html index de65c30..695b008 100644 --- a/app/templates/bot/chat.html +++ b/app/templates/bot/chat.html @@ -4,6 +4,11 @@ FediBooks {% include 'imports.html' %} +