lynnesbian/FediBooks
lynnesbian/FediBooks
1
0
Fork 0
mirror of https://github.com/Lynnesbian/FediBooks/ synced 2024-11-25 08:38:59 +00:00
Code Issues Releases Wiki Activity

chat UI improvements

Browse source
This commit is contained in:
Lynne Megido 2020-01-20 13:46:30 +10:00
parent d48eb9264f
commit 3d0cdbc5e5
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
4 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/static/script.js
View file

@ -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 += `<div class="message-container user"><div class="message user">${message}</div></div>`;
let chatbox = document.getElementById("chatbox");
chatbox.innerHTML += `<div class="message-container user"><div class="message user">${message}</div></div>`;
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 += `<div class="message-container bot"><div class="bot-icon"></div><div class="message bot">${this.responseText}</div></div>`;
chatbox.innerHTML += `<div class="message-container bot"><div class="bot-icon"></div><div class="message bot">${this.responseText}</div></div>`;
chatbox.scrollTop = chatbox.scrollHeight;
}
};
xhttp.open("GET", `/bot/chat/${id}/message`, true);
xhttp.send();
xhttp.send();
return false;
}

2
app/static/style.css
View file

@ -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;

7
app/templates/bot/chat.html
View file

@ -4,6 +4,11 @@
<meta charset="UTF-8">
<title>FediBooks</title>
{% include 'imports.html' %}
<style>
.bot-icon {
background: center / contain url("{{icon}}") no-repeat;
}
</style>
<script>
window.onload = function() {
document.getElementById("chatbox-input-box").focus();
@ -39,7 +44,7 @@
</div>
<form id="chatbox-input">
<input id="chatbox-input-box" name="message" placeholder="Press enter to send">
<input id="chatbox-input-box" autocomplete="off" required name="message" placeholder="Press enter to send">
</form>
</div>

7
app/webui.py
View file

@ -161,7 +161,12 @@ def bot_toggle(id):
def bot_chat(id):
# return render_template("coming_soon.html")
if bot_check(id):
return render_template("/bot/chat.html", bot = id)
c = mysql.connection.cursor()
c.execute("SELECT icon FROM `bots` WHERE handle = %s", (id,))
icon = c.fetchone()[0]
if icon is None:
icon = "/img/bot_generic.png"
return render_template("/bot/chat.html", bot = id, icon = icon)
@app.route("/bot/chat/<id>/message")
def bot_chat_message(id):