From 871e9aed3f3f095f8b823cdcc53a6594fd2b3b0c Mon Sep 17 00:00:00 2001
From: Aevann1 <randomname42029@gmail.com>
Date: Tue, 22 Mar 2022 04:35:12 +0200
Subject: [PATCH] chat

---
 files/assets/images/Drama/alert.webp | Bin 0 -> 5190 bytes
 files/assets/js/chat.js              |  28 ----
 files/routes/chat.py                 |  24 ++-
 files/templates/chat.html            | 240 ++++++++++++++++++++-------
 files/templates/default.html         |   2 +-
 requirements.txt                     |   1 +
 supervisord.conf                     |   2 +-
 7 files changed, 207 insertions(+), 90 deletions(-)
 create mode 100644 files/assets/images/Drama/alert.webp
 delete mode 100644 files/assets/js/chat.js

diff --git a/files/assets/images/Drama/alert.webp b/files/assets/images/Drama/alert.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cbb93f39695a5843df022b752f4d527c5cc07ba2
GIT binary patch
literal 5190
zcmV-M6uIkCNk&FK6aWBMMM6+kP&il$0000G0001g0049V06|PpND~GC00E$dZIdC%
z`Xi%fZR6OsZQHhO+qP}nwr$&3d$%Ivzv!Os>e-I_h?oFOkD`j|0gG*Z$i;U*{>lgM
zzWMY`7ag+E!o2|?RT5fe(n^wsL=`~W{JUKC>hDw8;FO=AJ!AdB07PXv8@S224}SXh
zSdRVs(+AJnd~jV!0Swsq>aQ}ZJ)7m4mb0^Z)H4Up2|!aFl9F_&nU8wkS-*d9%q+Du
z0X;Xo{cn=A!ra-QXDc$v$uI2G3(!<0ssNxJXW9FWW!i(wt7-xkx%g+2xya7a-HhZ<
zXUzhrssQM|$ii)q4l?hPEdR;*fEDjA$ZXDLyBRs^(m4R2-<J3M;`z({kUD}MGnLJp
zcFSWVi_DIhjU0FHb@#pY4{M)@)Vv{Yu=(cfxNfYOEj!I7&x+Kng@0qKbt}xAH47et
zN|Tlu!<KIT3{rCz9K+V0`CV5?Nm{8?bkGlM@y`E;msTxLF@PD$>b(0=2c7>qTYlzG
z{iUSM7^D0DbD&L1S#Uy8<N%oY{)~XCG=__43^DVUz54)2l_U)e8RIc9lfPfS)?fh8
zN|N>z7ct6gBu6}T@Y1~jK($tqWx^n{Ws>~uzQY!)0HRgUeF7orW+drfT(=w`Rq3W!
zs<RnMzOWVq0N#m*q-S$-XDEQbLaLtT-*y!NriA7Ee+UF%*qI-65dc%dDtIFlz+Yiy
zZdc=-sGOr_fdIHUD)UD)0l+>{Wo`wnnl-4*Z~G<G{3<5n>CjrohU7kO0g+k*CP!qv
zQxxr99+3N_WkuQ>G$tP7-Kl~)_YB8<%JPtU<hf{!_a;T%gMN?2^VDUL>cfI#LNQ)1
zibhu$6NvkWIg>OZy6BWRjHjc5MipDrqsadAu!Ke>_5Q_k7~BKekm3{?gEYR;qk=}0
z%r+)_6wWP>8dBUzW1K5WLyF}rdl<%>(TJq<5{+?Yt_H17u?3BR8b9ciq#j9~Kl4y%
z+zVQdVka6y&Hmc}k@iHoe(gCH8c&C|SHZqC2Alo=VUlWzbo$c6q45%EtqRs*X1MO-
zW|mY#@d_;-7Q6sj18340u=|)9MXI);c|<gx2d%n+(_+d#Vu%QUAy1MP5sgPdQGL_|
zng^8q$L=D42o`;l%<<5;6BGa{XghHV&ExS;+N25zSmpyVN5jmmp;Zt?x09#PqA`E3
zO=<uMSn6GRFw9(6v=*d-u8%MWV|)Oq9iS5yWw^Om4Rxw48;|9eQXL5kWqKIy+02ah
zN?kKgjKf*`odr`}Gmede#lPRYb^CE^cTZA>VA$v=GQVAU=6+oOBtcz6Mnz#f8j7Tv
zP`6-c7@51I3K|y-9}|Uh9i$QxW*i>{xk5>^ObWtji<UIU)G)@(0V!qfX+dQEHlU>W
zEsU>vME6k_lo^Qe6_s)p%3(Z!RL(3DgD7}4v<$(pQDIzE){qfloLbhv|AH_c65g(5
z4H^+d=0;@=9TkLgb)<5JjSgd_vWAb1!RbqtlQ84>DDskJ%{DoTV$pI01IE%~n6gkg
zNH~<V7#1!G37d~(5y8|2%YtIQcbRjmqjNoINvNRP6{NMgf>)G>1Z?>S&0AaM$DL5V
zC}w_;w3g<aI0vLOK!II;r{@;N%ypqnKuVbDCem{2GVb3TK!G*hBrUhD6PpE5wC(sQ
znax|&{!If^&~=|rNm>hX%PS)_4N#!#77tG)tyQ>t&SsV~f9WmK0U!!s(OXFK>BQYV
zXEU?HEIZrxpLdXijw!0Zs;`mO0o>hl&Q@KRS#~y@C;jvNyN};+%I>QUO^S}26m3UO
zV9}n}%sE@lqA)Yd&QkNFk$?U0(OWOvcjHAT9k9~|%PlZdzpkj6(4keZ<ooo(Ea%Mf
zZQ`hZfBo{qw_keXuA447{g{1s*m#X)7o2Ta{~lcw^@^&dgpMv1^th3A+N2Tx{_*{%
zZ@u>112<iN<+;ZlvH$K{thd@y^Uprxpx)g(R|E}8N=a2yN+N>kR)H0cIB?e;w%%yX
z6_#6SzS(9R(yvFSil9W1l#;4yN-2qmpjApj!y+kZyD6n4)tD{;09H^qAOsEo0MIr7
zodGI<0CfO9X)2IKq#~i2dFO~g286Q!XOjS|f3jUzdN0X;Xlobwuf~4HdlHV<Y@Ek-
zoAFuyJ=FuuU+l-MkEP#057|z(zd#Qz-)CRkAKb5JAOH8NUy$(^$q%WeXG|aIywdMa
z<A$JKzW-0+ce0Yx|HAbV?;rcmNbivUljv{Fcen=y2i^bU`jh{8|G)Ol@}vJBn4hbE
z^8cau4*qBTll{N<9@782KE$81<!~2scee2eibXrasXy_H_fY$nMt1+F5x>S{4C6t*
zC`Cyi%2`hdTll?P_XHlzP@h%Zxs2^~A&*KF$y0C#*$N_8Z}g(<-_#f+fxeFaMnJ4v
zc%$2J5**pd*zm4{->q{xAXa)zxeeiRcHx1&SX_5W_M2nUHTZ9BP>SeDIJe8-(jno-
z24qf|<mcyhQ3RX~a6eD4kR^!Xdh$HV*JOuKh8E%8AY)Xko=TDWE<<P@;v~FQeoe}2
z0eKwDIhB-o(vsN^A=G%0VW9pYSk>oioiVe;CkCphv?~%FPQ_K_PAF%0*UAIE+kur(
z2(7c7+V|x`Lxh`XFBkF#ZDzSo#?6}tJ@7C90RI0P-8z5gY!G^?3he><I}yZ-&PYvr
zJ?pUOO%#}(W5l^!@x}k0Ofh~Yem~FUd}9RPix23JGFb;)D)jo3=r9KJVFLB}bPTfw
zQQ7%pu)d#?D1LD=<=ZiBooC>4ZSpyEshY`lROM>rRlppiisCC-5F&!{L$5Cx4|n~{
zzJ{nwjmu0=d$rL|(mWdbchlu3$ecWbLjv-`czE=0qD+Xky~rBmFm}Xuu<2P((0$6E
z*WHfxf873~P&*e1WJ2)kNS7~C_WkSRRziM%j)p>3$FQ8{*DouO^qKlakHzUfCLDG@
zehlQ3#4*T3l*s5`R%|=}0R+86V?STq)vIjT=dwr^Apo%m&A_e5{37txOqU)Dg(3dx
z|FkAgL0;RDt_^3SDAKr}e|zpT7ABO_OLZDxWkw8AgU+pRKC28C>6f-}?jwy5V<qIb
zJ8WWnDWqce#3l#GO)Y<I-#)=D{5AeupSvswe56r2GuOj*k++G9R}($OU-3It^&76`
zdCISK$))LP9z=s{?v2=AwG2jQPss&oD1I^#yp&Ah1!$%0(y>p=rN#@59TN*f>oFMY
zzv&#S>>vb?6c1M!v`L~5yT*w_Ho@_2WDXCqt(X79A1m{u_1*QCm#kF3{r}0YkOAp&
z*ZciQDTzUtFWC1Uh}Dpt^7ZYG6zj&o6?A+yglQ}wVWB8OJ;7c{c_9#$%>{>T-ze1|
z{6ylo^Hhfq&tsVeeQ<5VSlqglhql!XpwA;{VUf*yL^!aS?))7fp7UB0mrg^6Es^Li
zkpZ@~p+FDL9Apok_9__iOKpF;P-21@S5z{u)~@oCnTKgAC~+L|zgfdW6+s1t2C)&>
zO+kfq@~c$Z`PD&Dz-Qj{s9i(Vmsa5fk>MP?tyAXE(oT}2IM9*`<?hrMN8vJ*H|1oZ
zX62TcxK*;L$Qqu`BlGQmDlgWtky>A5a<v8|va<>aMV31dNuS43Hnh<zmfAnNg9*^;
zkCI5U?St3?N7vjC7>c43EYnmI@QR{w6fg~BPq=7`i9BKrX_^66f70hN5!HqiCtu5n
z-SAzsOwJ8r_-xhF7vTN=Kadw>fY@TH$kK1?5~L;|!^AuMj~jgMa8H!X-{43y@Q|^K
zzA|w2Pmp37F<y{8oW}=yvnhFk>`|OkMId%Aj{fht>sH5RYWTCy@*Rq+_uokdwQp}b
zf{03V`$8$q>+}WTsXIZiJ}PXSxQ6Zl6RUUIi|O4drBRN1FL*xfA%_p7d#$w6XVr$y
z85-U%_?K^K`_*m#I0NFl>#$~kKcm=6j7-IV0ZwuzQd;#%o!u<U?C-PUHHUFuA!H(D
zG`+~vLm>3~va|$J$>LC@P(d7PSN?PvKa539Wpp6xf??4#94Q-#>G)SVvHeHwAyB<8
zs;0Gj|8ze7Y7EBU4#{Y^MsB+`s~33*Q<kvJI<db=c#M+OZ@Z4u?moW&=Ii5vIJ8a9
zkN+H+q2FH32K3!6D#RCdL3Wa@Efr2hooxY_|MQ^frdt~fAVUb8vVW8#t#@}tB=fr<
z>zV)_$g^OJNLiUOC72Iity~o&1ImS>_dQO;Gd+5Rwj$mEdTF(Wp%49eHN<o&Nh8wf
z&InRyi#5P0JOvfb%hjP~ydmmcTk!4h)`Flw(aB$CYpk#u%bglWFh!W1J>@|I!Z|H#
z28so~ulIghT)oj^aos%{<T0UTjF20g_mI#;Pn{)otecImnR3dC2uqfQV9wl2al3}z
zITK~C^KGJxZ+i!D$NwQZn=D9e1bh+cZXd1R93qBN`R9b>b?Y05;p0?x7be@ZnXqko
z)c5DcQL@>vH83e;6{tG-teruX)U;JDy|JM(xElT!gc=;9matJ3v)vyaA-DnIaLY;{
z_dQ}B@J&Kr2Fxm$j>Qf;fGra{dL^l0LT^rz^*!V8{>CAEfy@nn=|w8RkCc5NgeQOC
z4b)T$UXdt`wj3+uyR4ijB?Y`fcM?TaIJW8ZBOO;L6}a9{(*}=#(O^Ap!E(z_kn?%{
z{3p(UL)?Y$k79XS<5JT3sDS~+z_bHsf{*p)$jvL#vu6-(boCr~Tk>BJ3NQ#Ng%SLS
z0y)LV^d>Q3&LCZYC!isCifNYaN<p0~FBFmN2tg~e;$JmXWP{HKeEB#uYo0qSrl=r*
z+;LyS?WY^py*_{`8B*oNt3{aADOcraUhItOBAaPQ5sToJMpf0(zo;PS4^nEJ7O#1o
z5;A%7@x}#&jW;4&tLsDS${qxz35PV`J<yYvKa5K2Wfwu6t2y<&+Xs_^z|8C>y!3&s
z4uA^A1SIGfjT}&(;jiYop05?X4B`^&Emah^U_ZVBmB|Fl44a6`^~OgcH8~uNu}~xz
zs$P3|dNBrSjLY>xEu9%IHp%BtTF+5?plhc(ycy9pnU$)+PJoAI8{u(fqS{7QXV*FP
z-aVc*w(@`!V}ja5K#U9~GBfUpQ~)F21WToV@@3D`^Syjwfzrg1PUeWJFOg^}Ul3s3
zZ7$90fTRFQkUZtNxIOxOFRpX^qvR);?EDe$31`CBoNN~^Yt1boa2E*FB4uX}hE$Ig
z@82=?+(Ad3;-#jUdeuXe+wcSa0rz=7y5ct|TaT)Ca^HQ;WOcYK+lqn^p~`(AJxi*@
zp5w2^P7LWOUm#*byqu5lTg3hFA{zUxrOLC1nFXq;IG~IkIZ8ME%3prPb<K|!`}+6m
z3Ws)K5yCwM$$gLWQ&CPGEe1u*4(CkB4teqzz)I@pZ<4yQ!?Nf>p=UzKiJincaD`u5
z+V5rqD&eAU$$9WUmVioJp^)<K6`PF1DVhCtP;}?!1t#DI)bR~6A0Ywd<?UKJd=1pb
zUD2p^lTvBYw(iD`ZZ7;)mpAu3qElyBH1SyYD<em5W<pr(p+(^~R5}Z;0;vC~uim5&
zHv$*O_KC@L91TlFg6YG10SE01vblROe8L1yq-C=&F#-gf3q#!$*@N8u<#sA8Lfn45
za`PsXhrXc7GZ21W$ykNNuK^$qsjf?UYbWf<fKPMmvUxCp)L}l5lL#MOEOd@uR-d~n
zMoQD)CTPB)kU_Fy3}}U_J`<?GCWhxDUkP+@HTf7)(#hdOZaCG%@p7^?VN&%Mscb`4
zU!sP>3}3#VU6VlNTz+Qdrc7i4jwU)=OyqbQgxhK9e2Fzhg!5#O@4n8xeow#fta4H@
zn7fu;`j;cZBr(7F-iHhd!Es)`mLcfiqaJ_PuzXO7K{1gPq)gT1db^qZ@V1VB8UnEV
z>itH*Otd+)2J5JJsr?m2MQ?|<nJu)2O?|>s7-i7tCbIXYXBcenH|foV|44z%j*r%a
zA*yzIzI7Ey(;1=HDQ-kHw+5vFb6?sNqLqdmQkc*DtOTGz;vvA4#vq7X3MgNif_59o
z&U~uZ*-7owIM#Uh9C#@=K5JXw>DeCHWZNLTcv~eSA{gguP!h9ADPG&SEf0KMN>+Wp
zJaW~)?8kTHohP3Z`@5#UMM@}e7zCIH_ZbMsJEGKS7lO(wV9<aR&%lAs$eMS-Z#Y*s
zuKF2ePm#a-5D?WiPmR1)jYoiC7YTVQ{Blv;C%9<Q2;h=6Tm!a^y;lBisWGi5kyM4y
z-b-)_IBg3cry|lGy1Mv`589u6VGB!^Q)D;aqpTP)PO%=h9WNX)L2)F=QnE4X1w0mu
zEp3mRl96O+y4W6+Md1r=`Uy27Ric81`Rr)m8EJq0zqY)|(3w&>v^uV73qH!VDZu1-
zkh-j^M6HJzpEQ8@67`NHF%=jnMoayzaA;xz)|w$eHA6dt_Pm&AQglHK;<O+BEGxBL
z2xP_Xi`{o>pl!x)Z_7#k>itOcm%Pi$OPA+Nrd9flxN3T`=g@A@1)?ZWBSe`)y>C$o
zoktYc2<H=+&q<l28F!9PU+zak?PhI=qT+i0VZUojQW_Za%G&*mdFRaisI?_lE8zjS
z?T&q+k@L20yO{q<m&8BkhYzj5k4_S4PC_^Uin#~Bz*#RXXw>=lkbDKP<o)UZ`=&g3
zOXmh=1*X0j6YL`qd$ZT0__gxyxdQC(&MkPDw*1BN!m_`^SpY<}?kEa+O8J+I^pY@?
zRb`*`Z}lH5rc`aK8E8-nIbB6m{~awp|6^ZTbJOL`@g@Rw(MIjR_aZN~4U}8}0KTgk
A7XSbN

literal 0
HcmV?d00001

diff --git a/files/assets/js/chat.js b/files/assets/js/chat.js
deleted file mode 100644
index 60f6e2d6c..000000000
--- a/files/assets/js/chat.js
+++ /dev/null
@@ -1,28 +0,0 @@
-let socket=io()
-
-function send() {
-    text = document.getElementById('input-text').value
-    socket.emit('speak', text);
-    document.getElementById('input-text').value = ''
-}
-
-socket.on('speak', function(json) {
-	console.log(json);
-	document.getElementsByClassName('desktop-avatar')[0].src = json['avatar']
-	document.getElementsByClassName('userlink')[0].href = '/@' + json['username']
-	document.getElementsByClassName('userlink')[0].innerHTML = json['username']
-	document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
-	document.getElementsByClassName('chat-message')[0].innerHTML = json['text']
-	document.getElementById('chat-text').append(document.getElementsByClassName('chat-line')[0].cloneNode(true))
-})
-
-document.getElementById('input-text').addEventListener("keyup", function(event) {
-	if (event.key === 'Enter') {
-		event.preventDefault();
-		send()
-	}
-})
-
-socket.on('count', function(data){
-    document.getElementsByClassName('board-chat-count').innerHTML = data
-})
\ No newline at end of file
diff --git a/files/routes/chat.py b/files/routes/chat.py
index 57892b816..3d4eaa752 100644
--- a/files/routes/chat.py
+++ b/files/routes/chat.py
@@ -13,6 +13,7 @@ if SITE in ('pcmemes.net', 'localhost'):
 	import sys
 
 	socketio = SocketIO(app, async_mode='gevent')
+	typing = []
 
 	@app.get("/chat")
 	@auth_required
@@ -38,10 +39,27 @@ if SITE in ('pcmemes.net', 'localhost'):
 	def connect():
 		global count
 		count += 1
-		emit("count", count)
+		emit("count", count, broadcast=True)
+
+		emit('typing', typing)
+		return '', 204
 
 	@socketio.on('disconnect')
-	def disconnect():
+	@auth_required
+	def disconnect(v):
 		global count
 		count -= 1
-		emit("count", count)
\ No newline at end of file
+		emit("count", count, broadcast=True)
+		if v.username in typing: typing.remove(v.username)
+		emit('typing', typing, broadcast=True)
+		return '', 204
+
+	@socketio.on('typing')
+	@auth_required
+	def typing_indicator(data, v):
+
+		if data and v.username not in typing: typing.append(v.username)
+		elif not data and v.username in typing: typing.remove(v.username)
+
+		emit('typing', typing, broadcast=True)
+		return '', 204
\ No newline at end of file
diff --git a/files/templates/chat.html b/files/templates/chat.html
index d8284de51..17f148a3f 100644
--- a/files/templates/chat.html
+++ b/files/templates/chat.html
@@ -1,83 +1,209 @@
 {% extends "default.html" %}
 
 {% block title %}
-  <title>Chat</title>
-  <meta name="description" content="Chat">
+	<title>Chat</title>
+	<meta name="description" content="Chat">
 {% endblock %}
 
 {% block content %}
 
 <div class="border-right py-3 px-3">
-  <span data-toggle="tooltip" data-placement="bottom" title="people online right now" class="text-muted">
-    <i class="far fa-user fa-sm mr-1"></i>
-    <span class="board-chat-count">0</span>
-  </span>
+	<span data-toggle="tooltip" data-placement="bottom" title="people online right now" class="text-muted">
+		<i class="far fa-user fa-sm mr-1"></i>
+		<span class="board-chat-count">0</span>
+	</span>
 </div>
 
 <div id="chat-line-template" class="d-none">
-  <div class="chat-line my-2">
-    <div class="d-flex align-items-center">
-      <span class="rounded mb-auto d-none d-md-block chat-profile">
-        <img class="desktop-avatar rounded-circle w-100">
-      </span>
-      <div class="pl-md-3 text-muted">
-        <div>
-          <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
-          <a href="" class="font-weight-bold text-black userlink" target="_blank"></a>
-          <div style="overflow:hidden">
-            <span class="chat-message text-black text-break"></span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div class="chat-line my-2">
+		<div class="d-flex align-items-center">
+			<span class="rounded mb-auto d-none d-md-block chat-profile">
+				<img class="desktop-avatar rounded-circle w-100">
+			</span>
+			<div class="pl-md-3 text-muted">
+				<div>
+					<img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
+					<a href="" class="font-weight-bold text-black userlink" target="_blank"></a>
+					<div style="overflow:hidden">
+						<span class="chat-message text-black text-break"></span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
 
 <div class="container p-md-0 chat-container">
-  <div id="chat-window">
-    <div id="chat-text" class="fullchat">
-    </div>
-    <div id="system-template">
-      <div class="system-line">
-        <p class="message text-muted"></p>
-      </div>
-    </div>
-  </div>
-  <div class="position-relative form-group d-flex pb-3">
-    <div class="position-absolute text-muted text-small" style="bottom: -1.5rem; line-height: 1;">
-      <span id="typing-indicator"></span>
-      <span id="loading-indicator" class="d-none"></span>
-    </div>
-    <input id="input-text" type="text" class="form-control" placeholder="Message" autocomplete="off" autofocus />
-    <button id="chatsend" onclick="send()" class="btn btn-primary ml-3" type="submit">Send</button>
-  </div>
+	<div id="chat-window">
+		<div id="chat-text" class="fullchat">
+		</div>
+		<div id="system-template">
+			<div class="system-line">
+				<p class="message text-muted"></p>
+			</div>
+		</div>
+	</div>
+	<div class="position-relative form-group d-flex pb-3">
+		<div class="position-absolute text-muted text-small" style="bottom: -1.5rem; line-height: 1;">
+			<span id="typing-indicator"></span>
+			<span id="loading-indicator" class="d-none"></span>
+		</div>
+		<input id="input-text" type="text" class="form-control" placeholder="Message" autocomplete="off" autofocus />
+		<button id="chatsend" onclick="send()" class="btn btn-primary ml-3" type="submit">Send</button>
+	</div>
 </div>
 
 <script src="/assets/js/socketio.js"></script>
-<script src="/assets/js/chat.js?v=13"></script>
 
 <style>
+	#chat-window {
+		max-height:calc(100vh - 300px);
+		overflow-y: scroll;
+	}
 
-#chat-window {
-  max-height:calc(100vh - 300px);
-  overflow-y: scroll;
-}
+	.fullchat .chat-profile {
+		min-width: 42px;
+		width: 42px;
+		height: 42px;
+	}
 
-.fullchat .chat-profile {
-  min-width: 42px;
-  width: 42px;
-  height: 42px;
-}
+	#chat-window::-webkit-scrollbar {
+		display: none;
+	}
 
-#chat-window::-webkit-scrollbar {
-  display: none;
-}
-
-#chat-window {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
+	#chat-window {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
 
+	.chat-mention {
+		background-color: rgba(128, 90, 213, 0.3);
+	}
 </style>
 
+<script>
+	let socket=io()
+	let chatline = document.getElementsByClassName('chat-line')[0]
+	let box = document.getElementById('chat-window')
+	let textbox = document.getElementById('input-text')
+	let icon = document.getElementById('favicon')
+	let notifs = 0;
+	let scrolled_down = true;
+	let focused = true;
+	let is_typing = false;
+	let alert=true;
+
+	function flash(){
+		let title = document.getElementsByTagName('title')[0]
+		if (notifs >= 1 && !focused){
+			title.innerHTML = `[+${notifs}] Chat`;
+			if (alert) {
+				icon.href = '/static/assets/images/{{SITE_NAME}}/alert.webp'
+				alert=false;
+			}
+			else {
+				icon.href = '/assets/images/{{SITE_NAME}}/icon.webp'
+				alert=true;
+			}
+			setTimeout(flash, 500)
+		}
+		else {
+			icon.href = '/assets/images/{{SITE_NAME}}/icon.webp'
+			notifs = 0
+			title.innerHTML = 'Chat';
+		}
+	}
+
+
+	socket.on('speak', function(json) {
+		let text = json['text']
+
+		if (text.includes('<a href="/id/{{v.id}}">')){
+			chatline.classList.add('chat-mention');
+		}
+		else {
+			chatline.classList.remove('chat-mention');
+		};
+
+		notifs = notifs + 1;
+		if (notifs == 1) {
+			setTimeout(flash, 500);
+		}
+
+		scrolled_down = (box.scrollHeight - box.scrollTop <= window.innerHeight-109)
+		document.getElementsByClassName('desktop-avatar')[0].src = json['avatar']
+		document.getElementsByClassName('userlink')[0].href = '/@' + json['username']
+		document.getElementsByClassName('userlink')[0].innerHTML = json['username']
+		document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
+		document.getElementsByClassName('chat-message')[0].innerHTML = text
+		document.getElementById('chat-text').append(document.getElementsByClassName('chat-line')[0].cloneNode(true))
+		if (scrolled_down) box.scrollTo(0,box.scrollHeight)
+	})
+
+
+	function send() {
+		socket.emit('speak', textbox.value);
+		textbox.value = ''
+		is_typing = false
+		socket.emit('typing', false);
+	}
+
+
+	textbox.addEventListener("keyup", function(event) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			send()
+		}
+	})
+
+	socket.on('count', function(data){
+		document.getElementsByClassName('board-chat-count')[0].innerHTML = data
+	})
+
+	window.addEventListener('blur', function(){
+		focused=false
+	})
+	window.addEventListener('focus', function(){
+		focused=true
+	})
+
+
+	textbox.addEventListener("input", function() {
+		text = textbox.value
+		if (!text && is_typing==true){
+			is_typing=false;
+			socket.emit('typing', false);
+		}
+		else if (text && is_typing==false) {
+			is_typing=true;
+			socket.emit('typing', true);
+		}
+	})
+
+
+	socket.on('typing', function (users){
+		if (users.length==0){
+			document.getElementById('typing-indicator').innerHTML = '';
+			document.getElementById('loading-indicator').classList.add('d-none');
+		}
+		else if (users.length==1){
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> is typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+		else if (users.length==2){
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> and <b>"+users[1]+"</b> are typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+		else if (users.length==3){
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b>, <b>"+users[1]+"</b>, and <b>"+users[2]+"</b> are typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+		else if (users.length>=4){
+			more=users.length-3
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b>, <b>"+users[1]+"</b>, <b>"+users[2]+"</b> and "+more.toString()+" more are typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+	})
+</script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/files/templates/default.html b/files/templates/default.html
index af0a86fb6..46c9b082f 100644
--- a/files/templates/default.html
+++ b/files/templates/default.html
@@ -83,7 +83,7 @@
 	<link rel="apple-touch-icon" sizes="180x180" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
 		<link rel="manifest" href="/static/assets/manifest.json?v=1">
 		<link rel="mask-icon" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
-		<link rel="shortcut icon" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
+		<link id="favicon" rel="shortcut icon" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
 		<meta name="apple-mobile-web-app-title" content="{{SITE_NAME}}">
 		<meta name="application-name" content="{{SITE_NAME}}">
 		<meta name="msapplication-TileColor" content="#{{config('DEFAULT_COLOR')}}">
diff --git a/requirements.txt b/requirements.txt
index 11f442799..a0093943e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -7,6 +7,7 @@ Flask-Limiter
 Flask-Mail
 Flask-Socketio
 gevent
+gevent-websocket
 greenlet
 gunicorn
 lxml
diff --git a/supervisord.conf b/supervisord.conf
index 7e2992d02..64b74eb6a 100644
--- a/supervisord.conf
+++ b/supervisord.conf
@@ -5,7 +5,7 @@ logfile=/tmp/supervisord.log
 
 [program:service]
 directory=/service
-command=gunicorn files.__main__:app -k gevent -w 1 --reload -b 0.0.0.0:80 --max-requests 1000 --max-requests-jitter 500
+command=gunicorn files.__main__:app -k geventwebsocket.gunicorn.workers.GeventWebSocketWorker -w 1 --reload -b 0.0.0.0:80 --max-requests 1000 --max-requests-jitter 500
 stdout_logfile=/dev/stdout
 stdout_logfile_maxbytes=0
 stderr_logfile=/dev/stderr