From 3d0cdbc5e58aa697b6c2e4dd65590d3b11e397b6 Mon Sep 17 00:00:00 2001
From: Lynne <thecoolone3@gmail.com>
Date: Mon, 20 Jan 2020 13:46:30 +1000
Subject: [PATCH] chat UI improvements

---
 app/static/script.js        | 9 ++++++---
 app/static/style.css        | 2 +-
 app/templates/bot/chat.html | 7 ++++++-
 app/webui.py                | 7 ++++++-
 4 files changed, 19 insertions(+), 6 deletions(-)

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 += `<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;
 }
 
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 @@
 	<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>
 
diff --git a/app/webui.py b/app/webui.py
index 8ecbcf0..40d80ac 100644
--- a/app/webui.py
+++ b/app/webui.py
@@ -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):