From 02186ac4cbbc7fbdfddac66b172e32472849943f Mon Sep 17 00:00:00 2001
From: nataly <nataly.abi.wajeh0@gmail.com>
Date: Tue, 23 Jul 2024 17:04:54 +0300
Subject: [PATCH] New changes.

---
 .../add/__pycache__/urls.cpython-312.pyc      | Bin 1070 -> 1070 bytes
 .../add/__pycache__/views.cpython-312.pyc     | Bin 12211 -> 12211 bytes
 osinaweb/db.sqlite3                           | Bin 1708032 -> 1720320 bytes
 osinaweb/input.css                            |   5 +
 .../__pycache__/consumers.cpython-312.pyc     | Bin 7962 -> 7643 bytes
 .../__pycache__/routing.cpython-312.pyc       | Bin 502 -> 520 bytes
 .../osichat/__pycache__/urls.cpython-312.pyc  | Bin 417 -> 417 bytes
 .../osichat/__pycache__/views.cpython-312.pyc | Bin 555 -> 1173 bytes
 osinaweb/osichat/templates/chat-widget.html   |   4 +-
 osinaweb/osichat/templates/conversation.html  | 196 ++++++++++-------
 .../osichat/templates/partials/message.html   |   2 +-
 .../osichat/templates/partials/typing.html    |   2 +
 osinaweb/osinacore/templates/main.html        | 205 ++++++++++++++++--
 .../__pycache__/settings.cpython-312.pyc      | Bin 3687 -> 3775 bytes
 osinaweb/static/dist/output.css               | 201 +++++++++++++++--
 osinaweb/static/js/.DS_Store                  | Bin 6148 -> 6148 bytes
 osinaweb/static/js/osichat/chat-toggle.js     |   7 +
 osinaweb/static/js/osichat/conversation.js    |  17 +-
 osinaweb/static/js/osichat/textarea.js        |  27 +++
 osinaweb/static/js/osichat/visitors.js        |  45 ++--
 osinaweb/tailwind.config.js                   |   9 +
 21 files changed, 570 insertions(+), 150 deletions(-)
 create mode 100644 osinaweb/osichat/templates/partials/typing.html
 create mode 100644 osinaweb/static/js/osichat/textarea.js

diff --git a/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc b/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc
index b6b7684883b10823c2190683815501c53f4df567..0a76ee19b0c4df5b43195987e7d43e0d22967db2 100644
GIT binary patch
delta 40
tcmZ3-v5tfHG%qg~0}z}mnx8gjBkvJrMy|=1m;<>b`S_U{xr@YsQUK+f3F`m=

delta 40
tcmZ3-v5tfHG%qg~0}$i|%uAcKk@pBQBirOl%z@mZJp4?J+(qI*DFD|z30wdG

diff --git a/osinaweb/billing/add/__pycache__/views.cpython-312.pyc b/osinaweb/billing/add/__pycache__/views.cpython-312.pyc
index 8be14d38f9bd9208be3bc67958291371a81ad323..2eb9cadaf9ce7fa8b04ea93428fbc8e2116f66a7 100644
GIT binary patch
delta 20
acmdlSzd4@!G%qg~0}zz%n7@&Gg+2g9a0Y$=

delta 20
acmdlSzd4@!G%qg~0}#AVowt#Dg+2gA&jzFb

diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index e9b399ab24161c3564313ebc7762a19c921f3b11..a6e6a1ac3d33720ccf49988b3a5e528fe231d093 100644
GIT binary patch
delta 27956
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
LaY13rcp&?K{avYY

delta 7784
zcmeHMdr(~0dB1nxJoa7|7Q?QPbYUeV@wnXgV}&F@575(Cl1;2Ck(OoIU0@&V0~XpC
zR`ysksa->{bsCQ{mObgzZSyRScE)WLcQVt7r&C9+Dg{?^oVdxjaXU$rQPfs;>VD@g
zMnbfV=}i9<tMe`T?(h80cfRwT^L^(sJsq9C5Sj5(NkkCj%g`<mAZE8JHqfwr2fjV<
z%0}|moSn&-Z#kct&nNpFb62-+u%~MBb!L%7`I)LJa{nB)Z5`>GZ`$@(X3{tJLCfnN
z;%}=>=2p|dP#_*ooC*xYqVZEBi7>r+{`J;B>zun3wSWG^?#K6KNB0g4i~2<9*dskc
zccO1h-*hCVH>>@@#DKy*ay+LW%pG||*w6JRhJwdNGRem$!pWn-$o|2}$@JbG0w+kV
zoZ2dg45#=7!Ov@~tZ6(a&woGB&Nv>TpT^U9ey)6`WiFo_m_I-BQ);gFobAb{UqVm6
zL_Xnl(65q!I6}Wk|AxLwe@MSaze-=C=gY1XHe4X5=oXSJcUjFKE380u$7Uu?Z5B+r
z3IDpU^fvrzGPEVv3U7Xs+|D@KsTVQeWmJBd%)zkJ1&hma&UyC5ACb^Z(9F;*(5%pG
z(CpA0&`O|{LMww-UU>0G&ULOjN6EdjRQ;mt=R{WIG+mVoZ~xNCU2u`dh#=WY(*H!i
zW`2i$jvhkp8LA0&%us*mAYUSDh+jL_fgKyrtr@Cn&iQpWQvR5#M6I(_W0PYY(a5Ld
zP%higP4tgR{ee_A6HSi~4<@sN@l<+Pk7dbSo6Uz!Xr|r6oc+oyRrty*9e%>{n#E0^
z(^uRr=q;hLw6L?HLNLQ9UoG6(QE4a7uB)zq<|?eKuKc;z0H1r??L&X>s@PF@jjK$U
zP+Nty3_a6ZUWfjx(z+FWf$?raZ_Uz;m;_DVaI>gOs{8<LxaRIJ{Jvay)Pb7i%G2mK
zRTXt;YQbG?-a}QRvIX}R^zYZ)yU_GCx6j;O`a5TTyR#BnRpGZg-IiIqvx@v{^Em?j
zfl%3jp1I<76h6G{K2M?}mDWw@$GzpA8ed6WNp%V3*y3Ou9!I64ti)bIIQ|oT%y`Ev
z*6WU6qa!ZsN%Y}AxJN3>2Jl)RE(;dF`fcXI^H<ylP3Au84fN&f?w_LGX0NZbyYwao
zbeH}Leet@RL6_RRU3RQFPMt(2f9Re^&23&E5*FNb=02K6k1W7!rDkt6dLC5B1sv$g
zg4<WyNBs@%)<->6{CcwZbp{=1^D>Bi$GzWzHHF`O$9;n=e7DuxN1|`saMz-@n!LNI
zZpw|Hc2iZ(qeL~L!D;B5O<te9n<{nw9#MzNf9S5O?WPQlZpsW{OYJRtAHM8+%6@{r
z^salK@d*9nyYA=E+s)ns=I*irN;G>13lF{L{sm*+V>7*AuU5a)QGMPzH<R3IF(Rc$
zgh*+$RYQBI&}gf<{-(`#nmA^iM)u1!e`2yu&*zhuEvVyajT1e4wdM)~BQnJ>*IGG|
z;RU}W_(hIYB|%gKvZFA4t>!6Dhn;?xpg*E-(*H((K)+AFOW&r4*7BKmy|Im+I@bZi
z&F%v6%uWzzcYrw44&sa3LFD`((mIH^1|q707*If*l0lr1Ks+jf=oLU5<U#D?Ky<c&
zXlFsFtssOJ5UtH1wl-PJ1i2rJ9xS?1*(a6dwIyU1{$FP)Kuq*)JgwXG0=@8^irO2r
z8<cJ@e!d<H9~KR-{Fr&=jf$mz7n8M?3h>A^g1$rFqJKgE3wY!PeT_b}mJfKOjGlU}
zz5_=5Mm_e)tM%9^uhe6&oUg}jIaiPUGE<Ko^Cbp*<|zid<_QM-CbtngC$$lKXJjLG
z&me>SbDF^pI>BHM9cQqMjxg9qJq&hI7lXajz7e}g5jJ8+aZD3FXnp&!Z0Ip$w;}f#
za<3t~4B2^crq*&{LpgDipx$wQtNd))7wrFRd)+!~iI{hpYKfbrDsdCekslOpa-Q{$
zEo8Ix@RN^sCb)Q9&{CPv)QH;OKM)R$4va_%l^YLCWU_LcN3)Wra9r=5@b~m|_i3re
zx_S?d4=cIuMEtQyO`SY?=&{}LBZEgHqesJ{Ja9tNj|S8Kd)%Jce8zXC2S$Fh6U~0?
zVG5`Hp08Og&NI$4g^CW(_o;n@(OfE*O7ZDHE)(V_N2Sz2XdsqLbBWLpq>%DX;?&aV
z&ojK{mt?;rvYe=^l71|kOeRtpKZAboGR1rjT*%&w=kPX?RX?Y*x~9vDw1gju@bMm>
zmADrT8C3JbKLIkRplK?<gf>iX>S<Vx7Z_dvYQMm<nxsR{y^FuYd6)_(m}7$UOMj1k
znmR$9C{*-%n(5Z@;l$)>lU@(qzUp!vCim_U1U#<|b=!S5V)OdL<gvg=G{)>58HrAW
zR88kKo`(ekx32eXZ&(F_&2cpp_t~xDX1PpXE>xWMEYK%mxLU6l$JF}uSo(ZMd^KS6
z?bJyEw&dsNM(RJPKc}9ePL@U1@_|FHv24onN9#KYGMX9+M^mAprPVC@k1MW@#tU3M
zL0Dp&0U8NMBH?ftzQU1v;j&-W{Ibj{oS;ZDhVR@C@S&kdgo(fp%Ve|Ji7Yb|!Jkii
zP6;rQ(N&UIMN)Xp7|G&-uE~*4QA;2}W_eEMbOHFy?_tox!z)0%&dRzbiz)`ajzK-q
zl^}uTMOm4WM2vc&2BShFBZ(D2PGw~UiWzK|Ipzf1y$})4S`=7G6?vU!0CHd@M3Nw1
zuqrQTl7=B$?n0)ZIs^}he!z&Z6L?AIb&RoKi*muSTyXht67QE4*kJ;vC>tS$Z+Je%
zjjaUotgeEybPSxY0$?P%%oC!23iu?A)kQ(jH4J+e!{X8S3NneuJ5S|hu+9|5Ud=46
z;^Gu|zbLVsEJ9Aipe_swXI3yl;*=B}RtP{-ruEf;3Jr$FSKtJdg|!xV6>#KjOcu|s
z1W8~#EDv@p`8IZ1e>~g2(tJT=d0kdj1>^qI)wthAVDQxPMK_Kap7Zk@92>GCYrf4r
zHUeAt@Ni(_-ofE$;rxQa^1LKTV#C318xa6lUnG!W(xG4`nuw>F#2_;e$OM>lCY23l
zvZ+v-38X?yA{mPBDv~X(Kb&onpXXUo!r|S}vd>2NfXy(D34{a7*8|XCqQHs@E<hT%
zy*8rRFtLTnL;~?)W+IWTufNw?xP3qj>QJy~vLG}((Pby{$HWq{X9~xB3lm9<8<s)G
zUCe$a7zqW3Lj#y6#RP)EL^hrQ>JZo-O*8QX;710SKzt&WNQGFYH<bv603MAq>1=;G
zn2PpC<6$N_5(=b4>~cHcOqRul#?GSqdxr1dbH=F+u_me<FUiJ1*FZc+z_nom^>wP<
z`FG9}<v%aamD|hCl{J=LENw3N%aVhR>-MDmBge4qXSS^ML+hmFmzF6DZGOqzX8Nw_
zVe&mPL3~0y2MKq#IhOB4U%TTu<(GB82+2X!C0;$$70Y*&5Qn#Q5}hvRL@>@Lvcf<x
zFg6kiW@3rqKxjOjlGIT-86M6|qHllfQD7E+Sz>uf;B*=H-?g^>uEqYMt_Vi|orYOh
z4WTOYvM7m|cE^&Mm%x>htQ*$0FR3|>6=WO<7`=T_4FxL4a=ff?2HL-*7Ic<VB#kqM
z)ECtp<ZT=p8gC4#8R|-TQ7vlNlDs{yqGvzyoNC5;II9&=6y>G0H8u`Bfiq0uWGDcz
zHOdl^q2>iaF^J?PBGALBD9GT&yH{mMBe1pbv=m)1?3b2^3^fl-29anGJqmC*^A$l;
zIAsM9r?I@E>0EJW&RC^RSmmrT7|BMYL~dB@*GBk&l*o>bt59iad~{OfRAZHoODeWR
zQNUwx<lbwe1bYgyk;<zYP{;E8()xcUX4j|vC5S-WUohr~r*2p*Dk97=mTz04O^t@f
zvqD-Ni;hRQ9G?m128CQi7)=j_CP&9YgT=4}T25i%IA1i2U2A{Y4}qpa4lhotb#48(
zLj`E`=QP|OqNc?lz#jih6F6QZ5Jd=y`#mm!cOd@@JdUGSzIkn?xgf<tf7q@N(YSw;
z;qixX=G7o=Nt^<49?x&Xv^0A5V~?<Fv3f4P!h!M@pepQnos;hiG<X8rR@7kD8YbDg
zDv2P#E&=R)`v*vPAc0M*8kTHXl>`z1l$oM%za_XNVP#d&@wpPuH?BfrKshLorTbkC
z1qqaL3M6SBlWbm<1dan;ltuae=>UnyDk2Xdj!8DHPJ$D(r2G$-!0ITX3RA@-zEw$J
zbs)z}xL{qjS4DhVR}=w~3MOe-odkkRR1|gPbnsCCXB%f&Qokw*KsgEOrIjR5P=a2U
zIcy1Ymt^YxU=#69mKBkM#auoexHu^+1R>lq4t3!de<Xbe%k%V||9gtG;2en#&3F!>
zzqsRh{6T_@<sT%-2MKaTf_;!6@19u?66Avfx%dYzsE*+3^8cA2)iozbNQqz0cV4{U
zu~bl2=VgMPp&9C1REP62yjZ^EY>DOf;aE0qeV?T|mD+XV>J2YU1W3t{!DIQoYh$Qd
zVt}ioZd{Z0;5zj4#RnV@*B(vejoN>=QJ}iurV8mEs!j#h46%Hdp{B5!hjLcnMNnUS
z!((AA58JO0s4nS<q4D0TtLVT_JQoY+-}eN~^E1h$34QW2kF~JyfoH3u9Lj~oAM$*m
z{8ye=o#@g>p0*~V@Y8h;-YhIHIz+fritvI;6nUtjVtE={aoSbXa!_#<%Y6!8$xb&J
zYFU+_;95Z=!uu<!ct42cod%5`{+xo}YDv5Z7e2T(lp9{fw}z4N@Zf})%LUT$v5b~b
zCZ+L|I2Mk_w3s#=ofyN{9(YmYm!Lnd!KL)R@r<ja3@_hst%Tp3ZnjsyVD}y@m>Rs_
MvlXiC-hXxcH})s~CjbBd

diff --git a/osinaweb/input.css b/osinaweb/input.css
index 339ab8af..e88b0c3b 100644
--- a/osinaweb/input.css
+++ b/osinaweb/input.css
@@ -15,6 +15,11 @@
     background: #5a5a5a00;
 }
 
+
+#dynamicTextarea::-webkit-scrollbar {
+    width: 0px !important;
+}
+
 .rtl {
     direction: rtl;
 }
diff --git a/osinaweb/osichat/__pycache__/consumers.cpython-312.pyc b/osinaweb/osichat/__pycache__/consumers.cpython-312.pyc
index 82d653cd821a237db12081006974305aa4beb2ee..8abdee66b4a181f7bc86de0901245c977ce39919 100644
GIT binary patch
delta 2238
zcmZuyO>7%Q6yCM>$GiSb9RI|`j^n0Dwm3;kf{@xMEsy|JOF~=P(qGr{ZW5=qH_Wb6
z5<(LMLID-3YE(5Xh*n%s)B{Bkf@{Tr14zXDHB76D6DJNOEf-GA+qILnVkLj`=FQBT
z_rCY$`AYxo9lr0qUYVia#n-QnmK(nGonVD4bb5)wKluCck1UU)(I8H9GB?XiNVvrl
z#6wZBk7Z0Z9D`4FTxV^GWu_U$IYa`wkvDUCF*B8?f{u(CDWA+1lj9oF6agn4U49{(
z%W0D);U`hPWG>;uj*o;L)XF@AA2^hN<UQ|x-+j(|$K_o({i`dsyvZ42gNkDadFUoZ
zB4X7v9^l$SUaBMBF{GC#Giu(*Ws!>fc#iuD$6XRTivJGmOPQkW<D>r0I#uWC4u(N*
zsvJ(%Metd-gm3e^K$cv!xM0>K)n=;viSQQZU`(lIaTa&iha3|gN>8j!b<c9w9rh9s
zLMibK5m}qkN@m8Kp45o5r>6(c3)|;>xk4VaIlWvm(KK-(ZB#=@L&RA|1w|kn>_=_X
z7-|Qgo-#-Q*aBd2ArfxF&`X3b=vmbu&N0nIb+8HnBa0f@rpC}p>JpEFR8J&RdjmI%
z5jKUN5qGkm<1^wW5!lwwdGHmn!<X86E7e;`^{zZU_;cz7d{d0OysnUMVeno({!?rj
z2r-^^6sD$f)mW*>FhGfu{_fwPaEURig+WPYYxL35shz-|vSC)lZ%2detm<f_M`l^o
zSsl6R$X7=JM%*23pA)YORHWZ5lc`D!(Ciu_;&|Tr9^%ZR%OVaqQv_>?$oa`kR#lN^
z7#5*KtR}%?mdI9lWz?*xDWXLu5f9nLO!`E9WJ1fC1`%>dqdO3IhGG<m0OxeH<gi#q
zJyd5vw8<oDfK8k69;rR^B&ZKjm}h|U{4cKPopAh;enGz#PFKR|)yBl)Y^5>18f(7h
zuEf%-(fHy-C914OnpWbSl}OiWePofpkiOH{a<%Dl)5nQ>UMA9cpAjSS0{5XCe<wZV
zPQrD)0Glx<cLbhT^9j7X<_qw?`>hf$<39Nv$6pM-DaTq>79y}SQ01S=tf!7vI!~GZ
z!`FmAt82h_eQx}<FUUgChjAw-L1*yRIs-oM;aUIs><bTnh#MjjE$0k<o~A~G(`T}1
z%&@YcxCn3L^je9p7cBCD-+q7q1tLLdXL93N6V=nX0j}W>ysaJ3F^ppr=9$%4;_8;m
zTdp0e#J1h&sKj=Bv$qo4y}+IGuey5h9^c(IcnT;EU_B_yd;$zSoS-Bg_BXSGSoeRs
z3(`dD*6+@YXG>~9LkhR?v{3iDz5d5d?Z(rA1iNQ>F>sfq&+JV7VK-PruK?`Bzt{H+
zS~qYbx;jm(EDicjfG&UyHa70qN*4^83|de0vrDQM?+Z4u2bN305eM6bE1`og?WQ|u
z38v^kxN);sSYpvOI#ImD`#fcFzpfWwENg~|fIuRQ<_oln?T5h?vQ&SV>d_Hg3b(xq
zZV_HB7bgwsBs34JtkDsWj>4iJGDFi#8~&JO^*Ah@q+mc0majE$_fo}73qBiYlxlny
zmgPvnF=x|4mnpy2^?522Z&4q~7qm>NTpX#os5tDqA&WD0IlVNcAtP(%^->qail83Q
z5Woq53<bqaT(!Whm{A`rS#?l-yf4%FDNsU3K^lOSkWnhprtw(ZW3avvCY-Uuv~x0y
zpNn;~bIU098yh|d7Mxa0&}B*{ZTaXme6mTIvs~Q|wl-XqQ4SQ48QV*X=&F}g_kaG`
zP2J9m4hJ_}d#qXx(AAmNVf+6X3-LI65x2(QJH8W6?E-ifAOw&EfLgNq2&4`T1Ar0q
z902?Q*dY&q1hAd{jLj6@W!4-b-?-L*g+z)Sz)GT<P2(epqs`XdN6-K3>MQDMxuEr<
hDg0BSBe{i@S3+$M7&<;U#g4PAXC>VJ4+DaA>wjb&_<#Ta

delta 2433
zcmZuzU2Gdg5WYR%`RDu_yS~JU9VaC}zP5>5eoI4I1cjmsT3RSSCB-<tOXI}Jg}qCp
zM2-pqAy?w3=^~mIMEio&sz`t$Bp!G`La0IrQOk&!qeAe&3lAuy@B%_GbLTWI>OOos
zJ3F&Gv-5NJ!@!xHp|65LiG#7U|J{*o@sC1Bh;$N`r?@gVM%eSQ)-d6C&UB#+jxt*a
z#@T_`2Dak&vJZ&J)JTl&6r`*QDml@S;<#Dv0>96S=tj{j=o7h_A`m(?6u0Hh7Yf>x
z$u{%-K2L+Muu=Z?@D5OZfvbB1Z}^Y<Uk$QIu!U`KHF;Z-72&nORgN79CfK8{zXCJ>
zl8TQ;VPZ#wo_H7tD|nRZ(^EOMXcY2PrA=&6`1oY2&%2eNKPF*Ktw}Z~_6N!?l^@S=
z9359(?B{SZ>xn4rSMgp!^}ZvruOs(%s=l&tk%vQJ5b$M|Q>1;Cq|IoPX3m_Q(%84|
z9ecf08__7$sO6fbB}KFZ+@f8eM7t4s5PA`U0N}eYX6TcaSkm*VVY!ZKCiUQMm{HHI
zq?5hp*+mxEFP>Xi*qiA}ZC*}gtEudVQY|%5Z|+`hR;ta)`R-ct*5Cb}c&PHgN`#Gh
zJB1h*=w$<98~+x^-j(m{Dif6?;9Qvb#_Vd$0?wuzo~;<$`0V@Q#YVv9`7(cF_!RfP
zn|Y#$HrJAhQ@OmVQq3^d-Lxb-o;fvdYKohE>TBz7LI3blJ6MW~#*p5+#xO9kIyyS&
z2ISnrc&Yc00;KUUzzf`!XyR0MA-f#SRHK=CqJ6PkO>C*RrqB7Sty}6Xsl~Bsi&Bp^
zFNzCWt|U6oCQm2dZeQ_pG36@fj!6~IN{DMoWA?C$bgMs&muz!x`a;S?lB*%ND6NJ<
zV(4mzS4^{iq?e=>J6$0CIrbunbzjSTP-_g86uGtRm?vwJ`)?-6Unj|%*Q%q;UxZt5
zjNMGjr9$?xAHA*YCsC5-T`D&(lwD&!_M4at?B<R@hRus*5f~wNa{CY@>b!g2Q+BIf
zOlyO@nksv)k0#+JiGXE{X=o2HI)v_#2-J9tr3DWuvz16(fQ_il+9mjK5yu|jCfE*|
zkvxXwp!oJ#o`SBA7d6B3jB0sRqlN)l#W_qW134#7n<IVO=lFpRiws&m15%}^PZm`r
zV2MUShf3KDVwRv53#R2(wSul{urpOEnoj09wE;3Tg3yF86ha*zR#2`mnl}}%lTo{n
z9dxeGITl&|QPZ5tHB7>)wA{|Za*b=VmN=6yO>2f1HXs9WuuFliW7}bETn2zv6qQeH
zTG(`|f1&?e;{1KJXtv_1w<OO>r=_!@)1h;-A8xF*+))W$ky{rBYqGK|_f_S-^TkhM
zHF<DZ-d&Y<fA(Zeex%~B#}gH)E_W`=y;ZsQyik+-Ryn~ZS01b<(wMgA3bn+h<9jRj
zx1WgD!_gDtwQy&BWA6#!&G7e;_=*o?S0v7NJNuW9vrO>I9&C9uiGZFtkCOt*z_ztk
zP-)g2N|U|puF&Ts!~PDnXKb}CYibI=UXM2@?qNH^?c~v=r^7!IXiVFip7cXzar7~S
z$Jv>t+aAERB@FB8tm2_qvvd;z#<bDZkh*pi?SrL(6@V|@DEMvcn?M}eXhAE^XiqI=
zqr*JuVkb8odT0*_Uf^jbOqMWePLwVX+7AmQXa(<wxF6K@i9HZKlirCU?vY~2gkEe%
zSt#X!e;D|5h-KqFkE3;#s7_Bz8DQ&r2O2_=Be)sHT*^^6G<VcKHHTYy00XnoHhInH
z{lJ*(WV^x%Uv4x%sg^YQ{L)wP5`WBj9oSX`=lT-RR&YWeE|#?1<n+XF!$f#@`))LM
zuBo6;&Oia>O(>6k^p!pfe0l)kIfP*V#cz4n9JhU@cj1;D{6>>~1l9#)VkOd11UoK8
zpcME2{T{>pbvIGRantF=2bn98B`+`CmiUgyPvHqJ+b1miNfW+<^cj|JQ;ylD9>TMp
zL$FPi=m^pn8OKW7+4WDs&FmAevyY<Ux@rGQnkQg)u4}*ZXTdJDrN|lfOWP|$Sh)0V
z1pJYpafCDi=91I)F?94G0v<vK5M%`V^D~GP0=}%#4e&Cz%7?|oY8Shd+(-u5ugNS?
zSZnHV+Lpah|1a-76S_KG(st5W#!{J%UXs2X@A-p+`H#b7ijcr%x%W>F3H#Rn0BYSY
AeE<Le

diff --git a/osinaweb/osichat/__pycache__/routing.cpython-312.pyc b/osinaweb/osichat/__pycache__/routing.cpython-312.pyc
index 204c53f953e69cb39a6620889b92a216398e5250..409b338a1faee836d25896c4c8cb6293a18c81bc 100644
GIT binary patch
delta 90
zcmeyy+`+<onwOW00SKlR&QH5Kk@v8SOnI?>esN}UMq-J+O>s$)RdH%@ab|vAd}fN>
t#M{>xZ6|MHRF}KJslGz~x~9WLO^3^xPM2AnKd`b$GF@a4E#d_l1^|~09*6({

delta 72
zcmeBR`Nqt9nwOW00SI;n%u72mk@qk+cX_dXesN}UMq<gtH`f?#CLd;0m+g?9!GB#s
b|DuHcWeLN}EJhz#StOY*GKd!O0<{7Fc8?bu

diff --git a/osinaweb/osichat/__pycache__/urls.cpython-312.pyc b/osinaweb/osichat/__pycache__/urls.cpython-312.pyc
index 3a1b658619c2ab35f0a2bfb5311cb3b23f02706a..7401df0ff3790cbf799c5ec899c36a8bb73477a5 100644
GIT binary patch
delta 55
zcmZ3;ypWmqG%qg~0}xCtoS!yzBX0?#0tW*t=LJs58K&2z^)5>5ZHT|Z;`)J^iJz&F
JyNDO45&)vC4uk*z

delta 55
zcmZ3;ypWmqG%qg~0}wR(&r4gfk++0Vfs28a^8%;j4Abk<dKabjHpE|Has9x`!q3#m
JUBnAi2>_hJ4rBlT

diff --git a/osinaweb/osichat/__pycache__/views.cpython-312.pyc b/osinaweb/osichat/__pycache__/views.cpython-312.pyc
index 1bb36d0bee9551465f1a965c71411498a4eee5ef..922006f3a0d26bb86ccdabd9662d6f9dc99f7ce8 100644
GIT binary patch
literal 1173
zcmb7DOH30%7@pY&ZD|P$sGtx<z=RrQO^h)rVrW`l36E5$LSmZIU0`dwTW6-0lCFC2
zfKg*On3|~3t06HQIVvX;FReY4jB@hijR*&W7iYI!G{lR4GV_1``~T<hsiC1BFnV_T
z^>h~pz&A^9h{-l>9%ZZm6rjK)NWn=6EzBjk6hFz^m`@6mf+9QslVXndi{Gs<Kcsa?
z)fE*n<hzOuJ*?uip<{J84(+_vO=OH`Yjd7y3m^{?e;FN^usn8=0u^ql)?>oTvWpac
zsa8i3_A^_;wabBtOEuLT#2xT|YKwnro6rM@$H|>=PR&s;uGHn>3!u1O?Q~>vc`o7o
z%cTaLeoQ{k|8r)y;&Em+1=8qb$iuv#)W77MiLZffKzxq12Oys*DjrjqU^i!qcg4pC
zt2_&{V2+;vS?Ko;(><5R#zvzzq8CTP*9XJFP|!jYY{O&7nu>bEp`nqnP;@XD49_>s
z5|TbE%UW8~r;R?%kmp4?!LFIQ;zmX%C`Vo6`Yqka>VA%LS{hj|&F`kdP-twB@-r%-
zB2FhYixH%ysT--cGb$#S3U(e(XfCd%iDu|XutMvotL8yH@ua5eBwCHCJ}W9HF%q+@
zP^jWM7Sd_c_P9KbRfJ^&Yb0)@<e(AHq*yqXhgn22XBqU^aU~JcXAD_av$k9lZJbr7
zET{NvjL3I1HH-VwIoiNRi0(9k4zPl5w(vW)-3Mz@Yr(hZt4N(Csk3<a^h$GC>aR$F
zk`#D<vMgQt2usq{iZoi1M$1z8vy>}FZdM{wrN~qzGF^&H7iUQE&RjW?yMJXv5XFwK
zE$xN=#r|T~$>l4{=T_8WXRzE7T5zv5wmvl<nvd=+2y4yz3cZWH&(FNk%FQPhTw8A7
zYkQtszFulOU-k|Zg@K=2F5uhy13<B3t-1Y)>(>U);5Ke!Eq~}Z7dQe|k9Y!S`PDuy
zaEf0&B{Iy;U8<f%AD%T3iDw8#)_<hln%a5^_7$NfrnV2_E!bobAnW68yZcjyl1Zuq
g=nxaFPl;RD#%e>j4!YMt&lk|RSziw?po2{R8*ZHz6#xJL

delta 294
zcmbQrxtfLVG%qg~0}wR(&r7?{Fp*D!QE8&O96NIhLljFT%ft{xiDX8QJQT11X=Wh)
z9KtZM&nmu_v4j;SmBL)Zn8~;rsydiKlf~~AcaW>Ee~4?mql-(>Erwf6nFX56w^)2#
zLmY20r>B+_fsE5+y2W0UT3DJ|Tyl#uIVUqUuOvRRpqL3LHTf}9rY#?k0kWi614uM5
z+z=3-&NGqcx`4t(0fhy!8<;K&7&my{;TE4EGNbZ>gyv;#tqUw#pMh!_{4`l7tFdT-
zO<2iL#19lI;sp}FIBatBQ%ZAE?TUnfT#$>41%Si{W=2NFy9~;A8B{*AF)?a`bpQYq
CaYLy9

diff --git a/osinaweb/osichat/templates/chat-widget.html b/osinaweb/osichat/templates/chat-widget.html
index 8b81b7eb..fa91f432 100644
--- a/osinaweb/osichat/templates/chat-widget.html
+++ b/osinaweb/osichat/templates/chat-widget.html
@@ -11,7 +11,7 @@
 
 
 
-<div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 gap-2 text-white text-sm border-4 border-white"
+<div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 gap-2 text-white text-sm border-4 border-white hover:shadow-2xl duration-500 cursor-pointer"
     id="openChatContainer">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
         <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
@@ -24,7 +24,7 @@
     <p>Chat with us</p>
 </div>
 
-<div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 text-white text-sm border-4 border-white hidden"
+<div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 text-white text-sm border-4 border-white hidden hover:shadow-2xl duration-500 cursor-pointer"
     id="closeChatContainer">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
         <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor"
diff --git a/osinaweb/osichat/templates/conversation.html b/osinaweb/osichat/templates/conversation.html
index 66a6421c..8318d8eb 100644
--- a/osinaweb/osichat/templates/conversation.html
+++ b/osinaweb/osichat/templates/conversation.html
@@ -1,99 +1,131 @@
 {%load static%}
-<div class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between" id="chatContainer">
-    <div class="w-ful h-full flex flex-col justify-between">
+<div class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between"
+    id="chatContainer">
+
+    <!-- HEADER -->
+    <div class="w-full rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
+        <div class="flex gap-3 items-center">
+            <img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
+            <div class="flex flex-col">
+                <p class="text-white">Ositcom</p>
+                <p class="text-white opacity-80 text-xs">Typically replies in a few minutes</p>
+            </div>
+        </div>
+
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+            class="text-white w-7 notFilledSvg cursor-pointer hover:scale-105 duration-500" fill="none">
+            <path
+                d="M11 3L10.3374 3.23384C7.75867 4.144 6.46928 4.59908 5.73464 5.63742C5 6.67576 5 8.0431 5 10.7778V13.2222C5 15.9569 5 17.3242 5.73464 18.3626C6.46928 19.4009 7.75867 19.856 10.3374 20.7662L11 21"
+                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            <path d="M21 12L11 12M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5"
+                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </div>
 
-        <div class="w-full flex flex-col gap-5">
-            <!-- HEADER -->
-            <div class="w-full rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
-                <div class="flex gap-3 items-center">
-                    <img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
-                    <div class="flex flex-col">
-                        <p class="text-white">Ositcom</p>
-                        <p class="text-white opacity-80 text-xs">Typically replies in a few minutes</p>
-                    </div>
-                </div>
 
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-white w-7 notFilledSvg cursor-pointer hover:scale-105 duration-500" fill="none">
-                    <path d="M11 3L10.3374 3.23384C7.75867 4.144 6.46928 4.59908 5.73464 5.63742C5 6.67576 5 8.0431 5 10.7778V13.2222C5 15.9569 5 17.3242 5.73464 18.3626C6.46928 19.4009 7.75867 19.856 10.3374 20.7662L11 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-                    <path d="M21 12L11 12M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
+    <div class="flex-l overflow-y-auto flex flex-col gap-5 px-5 relative py-5" id="conversation">
+        <!-- ROBOT -->
+        <div class="flex items-end gap-2">
+            <div>
+                <div
+                    class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" color="#000000" fill="none">
+                        <path d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5" stroke="white"
+                            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5"
+                            stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M7 7L7 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <path d="M17 7L17 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <circle cx="7" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <circle cx="17" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <path
+                            d="M13.5 7H10.5C7.67157 7 6.25736 7 5.37868 7.90898C4.5 8.81796 4.5 10.2809 4.5 13.2069C4.5 16.1329 4.5 17.5958 5.37868 18.5048C6.25736 19.4138 7.67157 19.4138 10.5 19.4138H11.5253C12.3169 19.4138 12.5962 19.5773 13.1417 20.1713C13.745 20.8283 14.6791 21.705 15.5242 21.9091C16.7254 22.1994 16.8599 21.7979 16.5919 20.6531C16.5156 20.327 16.3252 19.8056 16.526 19.5018C16.6385 19.3316 16.8259 19.2898 17.2008 19.2061C17.7922 19.074 18.2798 18.8581 18.6213 18.5048C19.5 17.5958 19.5 16.1329 19.5 13.2069C19.5 10.2809 19.5 8.81796 18.6213 7.90898C17.7426 7 16.3284 7 13.5 7Z"
+                            stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <path d="M9.5 15C10.0701 15.6072 10.9777 16 12 16C13.0223 16 13.9299 15.6072 14.5 15"
+                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M9.00896 11H9" stroke="#20336b" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                        <path d="M15.009 11H15" stroke="#20336b" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                    </svg>
+                </div>
+            </div>
+            <div
+                class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
+                <p>Hello {{chat_room.chatroomguest.name}}, the support department is notified about your request
+                    to start a conversation. It usually takes few minutes for you to receieve a reply.</p>
             </div>
+        </div>
 
 
-            <div class="max-h-[430px] overflow-y-auto flex flex-col gap-5 px-5">
-                <!-- ROBOT -->
-                <div class="flex items-end gap-2">
-                    <div>
-                        <div
-                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" color="#000000" fill="none">
-                                <path d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M7 7L7 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <path d="M17 7L17 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <circle cx="7" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <circle cx="17" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <path d="M13.5 7H10.5C7.67157 7 6.25736 7 5.37868 7.90898C4.5 8.81796 4.5 10.2809 4.5 13.2069C4.5 16.1329 4.5 17.5958 5.37868 18.5048C6.25736 19.4138 7.67157 19.4138 10.5 19.4138H11.5253C12.3169 19.4138 12.5962 19.5773 13.1417 20.1713C13.745 20.8283 14.6791 21.705 15.5242 21.9091C16.7254 22.1994 16.8599 21.7979 16.5919 20.6531C16.5156 20.327 16.3252 19.8056 16.526 19.5018C16.6385 19.3316 16.8259 19.2898 17.2008 19.2061C17.7922 19.074 18.2798 18.8581 18.6213 18.5048C19.5 17.5958 19.5 16.1329 19.5 13.2069C19.5 10.2809 19.5 8.81796 18.6213 7.90898C17.7426 7 16.3284 7 13.5 7Z" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <path d="M9.5 15C10.0701 15.6072 10.9777 16 12 16C13.0223 16 13.9299 15.6072 14.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M9.00896 11H9" stroke="#20336b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M15.009 11H15" stroke="#20336b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                            </svg> 
-    
-                            
-                        </div>
-                    </div>
+        <!-- USER MESSAGES -->
+        <div id="messages" class="w-full flex flex-col items-end gap-3">
+            {% for message in chat_room_messages %}
+            {% if message.member %}
+            <div class="flex items-end gap-2">
+                <div>
                     <div
-                        class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
-                        <p>Hello {{chat_room.chatroomguest.name}}, the support department is notified about your request to start a conversation. It usually takes few minutes for you to receieve a reply.</p>
+                        class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                        {% if message.member.staffprofile.image %}
+                        <img class="w-full h-full rounded-full"
+                            src="http://192.168.1.111:8000{{message.member.staffprofile.image.url}}">
+                        {% else %}
+                        <p>nn</p>
+                        {% endif %}
                     </div>
                 </div>
-    
-
-                <!-- USER MESSAGES -->
-                <div id="messages" class="w-full flex flex-col items-end gap-3">
-                    {% for message in chat_room_messages %}
-                    {% if message.member %}
-                        <div class="flex items-end gap-2">
-                            <div>
-                                <div
-                                    class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
-                                    {% if message.member.staffprofile.image %}
-                                        <img class="w-full h-full rounded-full" src="http://192.168.1.111:8000{{message.member.staffprofile.image.url}}">
-                                    {% else %}
-                                    jh
-                                    {% endif %}
-            
-                                    
-                                </div>
-                            </div>
-                            <div
-                                class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
-                                <p>{{message.content}}</p>
-                            </div>
-                        </div>
-                    {% else %}
-                        <div class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-7 bg-opacity-70 bg-osiblue ">
-                            <p>{{message.content}}</p>
-                        </div>
-                    {% endif %}
-                    {% endfor %}
+                <div
+                    class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
+                    <p class="break-all">{{message.content}}</p>
                 </div>
             </div>
+            {% else %}
+            <div
+                class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue ">
+                <p class="break-all">{{message.content}}</p>
+            </div>
+            {% endif %}
+            {% endfor %}
         </div>
+    </div>
 
-        <form class="p-5" id="sendMessage">
-            <div class="relative w-full h-fit">
-                <input type="text" name="message" class="w-full border border-gray-300 rounded-md px-3 py-3 outline-none" placeholder="Write your message...">
 
-                <button type="submit" class="absolute h-full top-0 right-0 flex justify-center items-center px-3 rounded-md text-osiblue">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 notFilledSvg">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+    <form class="px-5 pb-5 bg-transparent relative" id="sendMessage">
+        <!-- INCLUDE TYPING HERE -->
+        <div class="mb-2 flex justify-start items-center gap-2 absolute -top-11">
+            <div
+                class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                <p>nn</p>
+            </div>
+            <div
+                class="w-fit rounded-r-3xl rounded-tl-3xl px-2 py-2 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
+                <div class="h-2 w-2 bg-secondosiblue rounded-full animate-typing"></div>
+                <div class="h-2 w-2 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;"></div>
+                <div class="h-2 w-2 bg-fifthosiblue rounded-full animate-typing" style="animation-delay: 0.4s;"></div>
+            </div>
+        </div>
+        <!-- END TYPING -->
+
+        <div class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
+            <textarea name="message" id="dynamicTextarea" onkeyup="adjustTextHeight(this);"
+                placeholder="Write your message..."
+                class="w-full outline-none p-3 resize-none h-[50px] max-h-[200px] duration-500"></textarea>
+            <div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 notFilledSvg">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+                    </svg>
+                </div>
+                <button type="submit" class="hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 notFilledSvg">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                     </svg>
                 </button>
             </div>
-        </form>    
-    </div>
-</div>
-
-
-
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/osinaweb/osichat/templates/partials/message.html b/osinaweb/osichat/templates/partials/message.html
index 83f9bc10..e4005b39 100644
--- a/osinaweb/osichat/templates/partials/message.html
+++ b/osinaweb/osichat/templates/partials/message.html
@@ -1,5 +1,5 @@
 <div class="w-fit bg-osiblue bg-opacity-70 px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-7 fade-in-up">
-    <p>{{chat_message.content}}</p>
+    <p class="break-all">{{chat_message.content}}</p>
 </div>
 
 <style>
diff --git a/osinaweb/osichat/templates/partials/typing.html b/osinaweb/osichat/templates/partials/typing.html
new file mode 100644
index 00000000..3ca4eefe
--- /dev/null
+++ b/osinaweb/osichat/templates/partials/typing.html
@@ -0,0 +1,2 @@
+{% load static %}
+
diff --git a/osinaweb/osinacore/templates/main.html b/osinaweb/osinacore/templates/main.html
index 51d1bb16..5ec4bf44 100644
--- a/osinaweb/osinacore/templates/main.html
+++ b/osinaweb/osinacore/templates/main.html
@@ -21,6 +21,167 @@
 </head>
 
 <body class="bg-gray-200 font-poppinsLight relative">
+    <div class="w-[800px] h-[700px] bg-white rounded-md border border-gray-100 shadow-md z-50 fixed right-9 bottom-24 grid grid-cols-3 hidden"
+        id="chatContainer">
+
+        <!-- LEFT SIDE - CHATS -->
+        <div class="h-full border-r border-gray-200 bg-gray-50 flex flex-col text-secondosiblue">
+            <!-- HEADER -->
+            <div class="w-full flex items-center gap-1 py-3 px-3 border-b border-gray-100 text-[17px]">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+                </svg>
+                <p>Chats</p>
+            </div>
+
+            <!-- CHATS -->
+            <div class="w-full flex flex-col gap-1 py-3 px-3 border-b border-gray-100 text-sm">
+                <div class="w-full flex justify-between items-center">
+                    <p class="text-secondosiblue font-poppinsBold">Nataly</p>
+
+                    <div
+                        class="w-[20px] h-[20px] bg-osiblue rounded-full shadow-md flex justify-center items-center text-white text-[10px]">
+                        <p>22</p>
+                    </div>
+                </div>
+
+                <p class="text-gray-500 text-xs">Hi, i need help woth web hosting...</p>
+
+                <p class="text-gray-500 opacity-70 text-xs">12:00PM</p>
+            </div>
+        </div>
+
+
+
+        <!-- RIGHT SIDE - CONVERSATION -->
+        <div class="col-span-2 h-full">
+            <!-- STARTUP CONTAINER -->
+            <div class="w-full h-full flex flex-col justify-center items-center text-center hidden">
+                <img src="{% static 'images/ositcom_logos/osinablue.png' %}" alt="" srcset="">
+
+                <p class="text-gray-500">Text Here</p>
+            </div>
+
+
+
+            <div class="w-full h-full flex flex-col justify-between">
+                <!-- HEADER -->
+                <div
+                    class="w-full flex items-center gap-1 py-3 px-3 border-b border-gray-100 text-[17px] text-secondosiblue">
+                    <div
+                        class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                        </svg>
+                    </div>
+
+                    <p>Nataly</p>
+                </div>
+
+                <!-- CONVERSATION -->
+                <div class="w-full h-full flex-l flex flex-col gap-3 overflow-y-auto p-3">
+                    <div class="w-full flex items-end justify-end gap-2">
+                        <div
+                            class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue ">
+                            <p class="break-all">hi how are you</p>
+                        </div>
+
+                        <div
+                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                            <p>nn</p>
+                        </div>
+                    </div>
+
+
+
+                    <div class="w-full flex items-end justify-start gap-2">
+                        <div
+                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-5">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                            </svg>
+                        </div>
+                        <div
+                            class="w-fit bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
+                            <p class="break-all">hi how are you</p>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- INPUT FORM -->
+                <form class="px-5 pb-5 bg-transparent relative" id="sendMessage">
+                    <!-- INCLUDE TYPING HERE -->
+                    <div class="mb-2 flex justify-start items-center gap-2 absolute -top-11 ">
+                        <div
+                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                            <p>nn</p>
+                        </div>
+                        <div
+                            class="w-fit rounded-r-3xl rounded-tl-3xl px-2 py-2 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
+                            <div class="h-2 w-2 bg-secondosiblue rounded-full animate-typing"></div>
+                            <div class="h-2 w-2 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;">
+                            </div>
+                            <div class="h-2 w-2 bg-fifthosiblue rounded-full animate-typing"
+                                style="animation-delay: 0.4s;"></div>
+                        </div>
+                    </div>
+                    <!-- END TYPING -->
+
+                    
+                    <div
+                        class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
+                        <textarea name="message" id="dynamicTextarea" onkeyup="adjustTextHeight(this);"
+                            placeholder="Write your message..."
+                            class="w-full outline-none p-3 resize-none h-[50px] max-h-[200px] duration-500"></textarea>
+                        <div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-5 notFilledSvg">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+                                </svg>
+                            </div>
+                            <button type="submit" class="hidden">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-5 notFilledSvg">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-9 z-30 gap-2 text-white text-sm border-4 border-white hover:shadow-2xl duration-500 cursor-pointer"
+        id="openChatContainer">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+            <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                stroke-linejoin="round" />
+            <path
+                d="M6.09881 19C4.7987 18.8721 3.82475 18.4816 3.17157 17.8284C2 16.6569 2 14.7712 2 11V10.5C2 6.72876 2 4.84315 3.17157 3.67157C4.34315 2.5 6.22876 2.5 10 2.5H14C17.7712 2.5 19.6569 2.5 20.8284 3.67157C22 4.84315 22 6.72876 22 10.5V11C22 14.7712 22 16.6569 20.8284 17.8284C19.6569 19 17.7712 19 14 19C13.4395 19.0125 12.9931 19.0551 12.5546 19.155C11.3562 19.4309 10.2465 20.0441 9.14987 20.5789C7.58729 21.3408 6.806 21.7218 6.31569 21.3651C5.37769 20.6665 6.29454 18.5019 6.5 17.5"
+                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+
+        <p>Osichat</p>
+    </div>
+
+    <div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-9 z-30 text-white text-sm border-4 border-white hidden hover:shadow-2xl duration-500 cursor-pointer"
+        id="closeChatContainer">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+            <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor"
+                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </div>
 
 
     <!-- USERS ACTIVITIES BUTTON ON MOBILE -->
@@ -901,7 +1062,8 @@
 
 
             <!-- MODULES SECTION -->
-            <div class="w-full h-fit hidden xlg1:grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
+            <div
+                class="w-full h-fit hidden xlg1:grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
@@ -945,23 +1107,32 @@
 
             <!-- TOP MODULES ON MOBILE -->
             <div class="block xlg1:hidden px-5 s:px-9 py-5">
-                <div class="bg-white shadow-sm rounded-md flex justify-between items-center text-secondosiblue text-[17px] py-5 px-3 cursor-pointer" id="openAccessibilitiesDropDown">
+                <div class="bg-white shadow-sm rounded-md flex justify-between items-center text-secondosiblue text-[17px] py-5 px-3 cursor-pointer"
+                    id="openAccessibilitiesDropDown">
                     <div class="flex justify-start items-center gap-2">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6" fill="none">
-                            <path d="M15.5 6.5C15.5 8.433 13.933 10 12 10C10.067 10 8.5 8.433 8.5 6.5C8.5 4.567 10.067 3 12 3C13.933 3 15.5 4.567 15.5 6.5Z" stroke="currentColor" stroke-width="1.5" />
-                            <path d="M22 17.5C22 19.433 20.433 21 18.5 21C16.567 21 15 19.433 15 17.5C15 15.567 16.567 14 18.5 14C20.433 14 22 15.567 22 17.5Z" stroke="currentColor" stroke-width="1.5" />
-                            <path d="M9 17.5C9 19.433 7.433 21 5.5 21C3.567 21 2 19.433 2 17.5C2 15.567 3.567 14 5.5 14C7.433 14 9 15.567 9 17.5Z" stroke="currentColor" stroke-width="1.5" />
+                            <path
+                                d="M15.5 6.5C15.5 8.433 13.933 10 12 10C10.067 10 8.5 8.433 8.5 6.5C8.5 4.567 10.067 3 12 3C13.933 3 15.5 4.567 15.5 6.5Z"
+                                stroke="currentColor" stroke-width="1.5" />
+                            <path
+                                d="M22 17.5C22 19.433 20.433 21 18.5 21C16.567 21 15 19.433 15 17.5C15 15.567 16.567 14 18.5 14C20.433 14 22 15.567 22 17.5Z"
+                                stroke="currentColor" stroke-width="1.5" />
+                            <path
+                                d="M9 17.5C9 19.433 7.433 21 5.5 21C3.567 21 2 19.433 2 17.5C2 15.567 3.567 14 5.5 14C7.433 14 9 15.567 9 17.5Z"
+                                stroke="currentColor" stroke-width="1.5" />
                         </svg>
                         <p>Accessibilites</p>
                     </div>
 
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowDown">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 arrowDown">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                    </svg> 
+                    </svg>
 
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowUp hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 arrowUp hidden">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
-                    </svg> 
+                    </svg>
                 </div>
 
                 <div class="w-full flex flex-col gap-3" id="accessibilitesDropDown">
@@ -971,7 +1142,7 @@
                             <div class="px-3">
                                 <p>Recent Status</p>
                             </div>
-    
+
                             <button
                                 class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer hidden sm:flex justify-center items-center shadow-md addStatusButton"
                                 data-modal-url="{% url 'addstatusmodal' %}">
@@ -980,7 +1151,7 @@
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                 </svg>
                             </button>
-    
+
                             <button
                                 class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex sm:hidden justify-center items-center shadow-md addStatusButtonMobile"
                                 data-modal-url="{% url 'statusmobilemodal' %}">
@@ -1007,7 +1178,7 @@
                             </div>
                         </div>
                     </div>
-    
+
                     <div class="bg-white shadow-md rounded-md p-5">
                         <div class="w-full h-full flex flex-col justify-between items-center">
                             <div class="w-full flex justify-between items-center">
@@ -1020,7 +1191,7 @@
                             </div>
                         </div>
                     </div>
-    
+
                     <div class="bg-white shadow-md rounded-md p-5">
                         <div class="w-full h-full flex flex-col justify-between items-center">
                             <div class="w-full flex justify-between items-center">
@@ -1034,7 +1205,7 @@
                         </div>
                     </div>
                 </div>
-            </div>            
+            </div>
 
             <!-- NOTES SECTION -->
             <div class="w-full px-5 s:px-9 pb-5">
@@ -1210,7 +1381,7 @@
 
     <!---------------------- JS SCRIPTS -------------------->
 
-    
+
     <!-- ONLINE CONSUMER SCRIPT -->
     <script type="text/javascript" src='{% static "js/online/online-consumer.js" %}'></script>
 
@@ -1241,6 +1412,10 @@
 
     <!-- MODULES DROP DOWN ON MOBILE -->
     <script type="text/javascript" src='{% static "js/accessibilities-dropdown.js" %}'></script>
+
+    <script type="text/javascript" src='{% static "js/osichat/textarea.js" %}'></script>
+
+    <script type="text/javascript" src='{% static "js/osichat/chat-toggle.js" %}'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/osinaweb/osinaweb/__pycache__/settings.cpython-312.pyc b/osinaweb/osinaweb/__pycache__/settings.cpython-312.pyc
index 905e06c46ce409ff7d19783064d88619844823d5..b20a503e40de5fa37ea40f6a94ce4d2752331d44 100644
GIT binary patch
delta 432
zcmaDZvtO3)G%qg~0}xCtoS()oIFV0+QDUO{97XmhffSx7!4%$9<}4MEJSxaipZGvo
z6o-W9WL-uDU6B-#DA5$r6tNWX6p3`kOvV(+IZT<1QDQ(bsZ{n9=_+mph7=jFnE2!>
zMrmD%6s0K16y+$X6!s`-AeKo{iIT-_zo@3_Y9@%Y(ix-VQq-d4aVeg}BrmIwq7kK-
zq8X)>q7|i_q8+6I#HuMeQEEV&)HmBO?Pg>YnEZn|mG>5Ra(+>9MrvY8YEkjzSeEIG
z9GkzgBr{5@B8lteW~QX%q?RWZrRq877j5=oV_{+xo*c;G!YH$O8pkq5Mvcj~T<gTe
zoc)7>;~jl`{KG+Hynm3VyQg39=2u+n8M!=xu4e?|;v<t6^Tdk@3NbbCeNyA%V`|{~
XAi*FdcY#6d1KVZ+-e5)+cc3x=|D9kg

delta 367
zcmdll`&@?aG%qg~0}wR(&r4e;Fp*D!QDma}99f<yffU|U<}4+U94g3Co%lpq6syE!
z8AelG;S`Z5krdGsu@vzXiFC$H#uUjpOqq;PqChdJRQ43<DsBdb6dACX*yK7!X<hLY
zr6`FM<tWJ%_9!VJmQGQLlEG#9<YSDAk+LajQF6FcpgI@C1KO&-nh7EvC7+@ZrI4Z-
zrI?}>rIex_r3}O>DLPTAK%3PzJ235LWaOXxhdFg}9?Nt__RVap$&8yPu>D|U6q?-0
z;le1r`5ebGMn?6?rCjSaTXU~t<Z=fZ%m~EAdnSM8iRTj#Vrt;~q{6|+)WG#YWOD{@
KFe8gAP#OSFaz(oU

diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 4b0dc0ec..14ed6b22 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -738,6 +738,10 @@ video {
   top: -2.5rem;
 }
 
+.-top-11 {
+  top: -2.75rem;
+}
+
 .-top-12 {
   top: -3rem;
 }
@@ -746,6 +750,10 @@ video {
   top: -0.5rem;
 }
 
+.-top-5 {
+  top: -1.25rem;
+}
+
 .-top-\[54px\] {
   top: -54px;
 }
@@ -874,6 +882,14 @@ video {
   top: 14px;
 }
 
+.right-9 {
+  right: 2.25rem;
+}
+
+.bottom-20 {
+  bottom: 5rem;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -906,6 +922,10 @@ video {
   grid-column: span 2 / span 2;
 }
 
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
 .m-auto {
   margin: auto;
 }
@@ -1339,8 +1359,16 @@ video {
   height: 100vh;
 }
 
-.max-h-\[430px\] {
-  max-height: 430px;
+.h-\[700px\] {
+  height: 700px;
+}
+
+.h-\[23px\] {
+  height: 23px;
+}
+
+.max-h-\[200px\] {
+  max-height: 200px;
 }
 
 .max-h-\[50px\] {
@@ -1351,6 +1379,10 @@ video {
   min-height: 200px;
 }
 
+.min-h-\[100\%\] {
+  min-height: 100%;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -1572,6 +1604,18 @@ video {
   width: 100%;
 }
 
+.w-\[600px\] {
+  width: 600px;
+}
+
+.w-\[800px\] {
+  width: 800px;
+}
+
+.w-\[23px\] {
+  width: 23px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1666,6 +1710,22 @@ video {
   animation: blob 7s infinite;
 }
 
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-0.5rem);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: translateY(0.5rem);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-bounce {
+  animation: bounce 3s infinite;
+}
+
 @keyframes bounceX {
   0%, 100% {
     transform: scale(1);
@@ -1682,6 +1742,16 @@ video {
   animation: bounceX 4s infinite;
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1692,6 +1762,24 @@ video {
   animation: spin 1s linear infinite;
 }
 
+@keyframes typing {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-0.2rem);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animate-typing {
+  animation: typing 1s infinite;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -1855,6 +1943,18 @@ video {
   margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1890,6 +1990,10 @@ video {
   overflow-y: auto;
 }
 
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
 .overflow-x-scroll {
   overflow-x: scroll;
 }
@@ -1916,6 +2020,14 @@ video {
   white-space: pre-wrap;
 }
 
+.whitespace-break-spaces {
+  white-space: break-spaces;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .break-all {
   word-break: break-all;
 }
@@ -1955,6 +2067,11 @@ video {
   border-end-end-radius: 0.375rem;
 }
 
+.rounded-l-3xl {
+  border-top-left-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -2005,11 +2122,6 @@ video {
   border-top-right-radius: 0px;
 }
 
-.rounded-l-3xl {
-  border-top-left-radius: 1.5rem;
-  border-bottom-left-radius: 1.5rem;
-}
-
 .rounded-bl-lg {
   border-bottom-left-radius: 0.5rem;
 }
@@ -2046,6 +2158,10 @@ video {
   border-top-left-radius: 0px;
 }
 
+.rounded-tr-3xl {
+  border-top-right-radius: 1.5rem;
+}
+
 .rounded-tr-full {
   border-top-right-radius: 9999px;
 }
@@ -2058,10 +2174,6 @@ video {
   border-top-right-radius: 0px;
 }
 
-.rounded-tr-3xl {
-  border-top-right-radius: 1.5rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -2422,6 +2534,16 @@ video {
   background-color: rgb(20 83 45 / var(--tw-bg-opacity));
 }
 
+.bg-lime-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(163 230 53 / var(--tw-bg-opacity));
+}
+
+.bg-lime-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 204 22 / var(--tw-bg-opacity));
+}
+
 .bg-orange-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));
@@ -2551,16 +2673,6 @@ video {
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
-.bg-lime-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(132 204 22 / var(--tw-bg-opacity));
-}
-
-.bg-lime-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 230 53 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-10 {
   --tw-bg-opacity: 0.1;
 }
@@ -2905,10 +3017,18 @@ video {
   padding-left: 2.75rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-20 {
   padding-left: 5rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -2917,6 +3037,18 @@ video {
   padding-left: 1.5rem;
 }
 
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
+.pr-14 {
+  padding-right: 3.5rem;
+}
+
+.pr-16 {
+  padding-right: 4rem;
+}
+
 .pr-20 {
   padding-right: 5rem;
 }
@@ -3052,6 +3184,10 @@ video {
   line-height: 1rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -3084,6 +3220,10 @@ video {
   font-style: italic;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }
@@ -3276,6 +3416,10 @@ video {
   opacity: 0.8;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -3323,6 +3467,11 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3377,6 +3526,10 @@ video {
   background: #5a5a5a00;
 }
 
+#dynamicTextarea::-webkit-scrollbar {
+  width: 0px !important;
+}
+
 .rtl {
   direction: rtl;
 }
@@ -3885,6 +4038,12 @@ video {
   text-decoration-line: underline;
 }
 
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
diff --git a/osinaweb/static/js/.DS_Store b/osinaweb/static/js/.DS_Store
index 2189b430e3cd0ba9ddcfde5357895391dceaad04..743eba2132b46bffd4a2a28c58529ce72ef753e8 100644
GIT binary patch
delta 65
zcmZoMXfc=|#>CJ*u~2NHo+2aD!~pBb1|lqz`5CP?H#4@dO}@amYco3sKL=3F=7Wsi
VnJ4p$7&0<Uw&9W993!%V831y$62kxh

delta 112
zcmZoMXfc=|#>B`mu~2NHo+2aj!~pBb0*nnnMvtvNFGDdy217nWIfE`k9*{0!NCk@M
zF=R0md*<XPC*|ZPF)%O)0P!LqHs83fpKUWc2R{eUyv>Y^-<c=#ix_e+0;L*&c(aGd
G9%cZ^O&In7

diff --git a/osinaweb/static/js/osichat/chat-toggle.js b/osinaweb/static/js/osichat/chat-toggle.js
index 61b2cc42..64d625e6 100644
--- a/osinaweb/static/js/osichat/chat-toggle.js
+++ b/osinaweb/static/js/osichat/chat-toggle.js
@@ -3,10 +3,17 @@ const openChatButton = document.getElementById('openChatContainer');
 const chatContainer = document.getElementById('chatContainer');
 const closeChatButton = document.getElementById('closeChatContainer');
 
+
+const conversation = document.getElementById('conversation');
+function scrollToBottom() {
+    conversation.scrollTop = conversation.scrollHeight;
+}
+
 openChatButton.addEventListener('click', function () {
     chatContainer.classList.remove('hidden');
     openChatButton.classList.add('hidden');
     closeChatButton.classList.remove('hidden');
+    scrollToBottom();
 });
 
 closeChatButton.addEventListener('click', function () {
diff --git a/osinaweb/static/js/osichat/conversation.js b/osinaweb/static/js/osichat/conversation.js
index 08ae3b92..ed60c9f0 100644
--- a/osinaweb/static/js/osichat/conversation.js
+++ b/osinaweb/static/js/osichat/conversation.js
@@ -1,12 +1,12 @@
 const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-const domain = "192.168.1.106:8000";
+const domain = "192.168.1.111:3000";
 console.log('hi')
 // Function to fetch session ID
 
 
 async function fetchSessionID() {
     try {
-        const response = await fetch('http://192.168.1.106:3000/get-client-session/'); 
+        const response = await fetch('http://192.168.1.111:8000/get-client-session/'); 
         const data = await response.json();
         return data.session_id;
     } catch (error) {
@@ -38,6 +38,8 @@ async function initializeChatWebSocket() {
             script.src = `http://${domain}/static/js/osichat/chat-toggle.js`;
             chatDiv.appendChild(script);
 
+
+
             const startChatContainer = document.getElementById('startChat');
             // If this container exists then the template returned was start-conversation.html, no conversation yet.
             if (startChatContainer) {
@@ -60,7 +62,13 @@ async function initializeChatWebSocket() {
             }
 
             const sendMessageContainer = document.getElementById('sendMessage');
+
             if (sendMessageContainer) {
+                const textareaScript = document.createElement('script');
+                textareaScript.type = 'text/javascript';
+                textareaScript.src = `http://${domain}/static/js/osichat/textarea.js`;
+                chatDiv.appendChild(textareaScript);
+
                 sendMessageContainer.addEventListener('submit', function (event) {
                     event.preventDefault();
 
@@ -98,7 +106,4 @@ async function initializeChatWebSocket() {
     };
 }
 
-
-document.addEventListener('DOMContentLoaded', () => {
-    initializeChatWebSocket();
-});
+initializeChatWebSocket();
diff --git a/osinaweb/static/js/osichat/textarea.js b/osinaweb/static/js/osichat/textarea.js
new file mode 100644
index 00000000..0ec85f34
--- /dev/null
+++ b/osinaweb/static/js/osichat/textarea.js
@@ -0,0 +1,27 @@
+function adjustTextHeight(textarea) {
+    // MAKE THE TEXTAREA'S HEIGHT ADJUSTABLE
+    if (textarea.value.trim() === '') {
+        textarea.style.height = '50px';
+    } else {
+        textarea.style.height = textarea.scrollHeight + 'px';
+    }
+
+    // DISPLAY AND HIDE THE SUBMIT BUTTON
+    const submitButton = document.querySelector('#sendMessage button[type="submit"]');
+    if (textarea.value.trim() === '') {
+        submitButton.classList.add('hidden');
+    } else {
+        submitButton.classList.remove('hidden');
+    }
+}
+
+const form = document.querySelector('#sendMessage');
+const textarea = document.querySelector('#dynamicTextarea');
+const conversationContainer = document.getElementById('conversation');
+
+form.addEventListener('submit', (event) => {
+    textarea.style.height = '50px';
+    setTimeout(() => {
+        conversationContainer.scrollTop = conversationContainer.scrollHeight;
+    }, 100); 
+});
\ No newline at end of file
diff --git a/osinaweb/static/js/osichat/visitors.js b/osinaweb/static/js/osichat/visitors.js
index 0f57261b..1dc84929 100644
--- a/osinaweb/static/js/osichat/visitors.js
+++ b/osinaweb/static/js/osichat/visitors.js
@@ -1,26 +1,26 @@
 const visitors_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-const my_domain = "192.168.1.106:8000";
+const my_domain = "192.168.1.111:3000";
 
 async function fetchClientData() {
     try {
-        const response = await fetch('https://osina.ositcom.com/get-client-ip/');
+        const response = await fetch('http://192.168.1.111:3000/get-client-ip/');
         const data = await response.json();
         return {
             client_ip: data.ip,
             client_country: data.country
         };
-        } catch (error) {
-            console.error('Error fetching client data:', error);
-            return {
-                client_ip: 'Unknown',
-                client_country: 'Unknown'
-            };
-        }
+    } catch (error) {
+        console.error('Error fetching client data:', error);
+        return {
+            client_ip: 'Unknown',
+            client_country: 'Unknown'
+        };
+    }
 }
 
-async function fetchSessionID() {
+async function fetchVisitorsSession() {
     try {
-        const response = await fetch('http://192.168.1.106:3000/get-client-session/');
+        const response = await fetch('http://192.168.1.111:8000/get-client-session/');
         const data = await response.json();
         return data.session_id;
     } catch (error) {
@@ -34,7 +34,7 @@ async function initializeVisitorsWebSocket() {
 
     const referrer = document.referrer;
     const clientData = await fetchClientData();
-    const session_id = await fetchSessionID();
+    const session_id = await fetchVisitorsSession();
     const visitorsSocketUrl = `${visitors_ws_scheme}://${my_domain}/ws/osichat/visitors/`;
     const visitorsSocket = new WebSocket(visitorsSocketUrl);
 
@@ -50,17 +50,16 @@ async function initializeVisitorsWebSocket() {
             'session_id': session_id
         };
         visitorsSocket.send(JSON.stringify(event_message));
-        };
+    };
 
-        visitorsSocket.onclose = () => {
-            console.log('WebSocket connection to visitors closed');
-        };
+    visitorsSocket.onclose = () => {
+        console.log('WebSocket connection to visitors closed');
+    };
+
+    visitorsSocket.onerror = (error) => {
+        console.error('WebSocket error:', error);
+    };
+}
 
-        visitorsSocket.onerror = (error) => {
-            console.error('WebSocket error:', error);
-        };
-    }
 
-    document.addEventListener('DOMContentLoaded', async () => {
-        initializeVisitorsWebSocket();
-    });
\ No newline at end of file
+initializeVisitorsWebSocket();
\ No newline at end of file
diff --git a/osinaweb/tailwind.config.js b/osinaweb/tailwind.config.js
index b21595d6..bbcf4a2d 100644
--- a/osinaweb/tailwind.config.js
+++ b/osinaweb/tailwind.config.js
@@ -43,6 +43,7 @@ module.exports = {
           '0%, 100%': { transform: 'translateY(-0.5rem)' },
           '50%': { transform: 'translateY(0.5rem)' },
         },
+
         bounceX: {
           '0%, 100%': {
             transform: 'scale(1)',
@@ -53,6 +54,7 @@ module.exports = {
             opacity: 1,
           },
         },
+
         blob: {
           "0%": {
             transform: "translate(0px, 0px) scale(1)",
@@ -67,11 +69,18 @@ module.exports = {
             transform: "tranlate(0px, 0px) scale(1)",
           },
         },
+
+        typing: {
+          '0%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-0.2rem)' },
+          '100%': { transform: 'translateY(0)' },
+        },
       },
       animation: {
         bounce: 'bounce 3s infinite',
         bouncePop: 'bounceX 4s infinite',
         blob: "blob 7s infinite",
+        typing: 'typing 1s infinite',
       },
     },
   },