chat messages are loaded on scroll top

chatto/src/main/javascript/ts/src/model/ChatModel.ts

@@ -89,7 +89,7 @@ export class ChatModel implements Subject {
                 // })
                 const newArr = cVMs.concat(existingMessages)
                 // log.debug(newArr);
-                this.storeUserMessages(contactName, newArr);
+                this.storeUserMessages(contactName, cVMs);
                 // this.storeUserMessages(contactName, cVMs);
             }
             else {

chatto/src/main/javascript/ts/src/view/ChatView.ts

@@ -41,11 +41,13 @@ export class ChatView implements Observer {
     update(data: ChatMessageViewModel[]): void {
         log.info('ChatView: updating view');
         // let html: string = "";
-        this._messageContainer.innerHTML = "";
+        // let currentMsg = $('.msg:first');
+        // this._messageContainer.innerHTML = "";
         const rev: ChatMessageViewModel[] = Object.create(data)
         rev.reverse();
-        data.forEach((vm: ChatMessageViewModel) => {
-            const vmTemp: ChatMessageViewModel = {...vm};
+        let arr: string[] = [];
+        rev.forEach((vm: ChatMessageViewModel) => {
+            const vmTemp: ChatMessageViewModel = { ...vm };
             vmTemp.message = this._markdownService.render(vm.message);
             /** Very Important!!!
             * Sanitizing HTML before displaying on webpage to prevent XSS attacks!!
@@ -58,11 +60,18 @@ export class ChatView implements Observer {
             else {
                 rendered = DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp));
             }
-            $(this._messageContainer).append(rendered);
+            $(this._messageContainer).prepend(rendered);
+            // if (currentMsg.position() != null) {
+            //     $(this._messageContainer).scrollTop(currentMsg.position().top)
+            // }
+
             // log.debug(vm)
             // log.debug(vmTemp)
             // html += this._messageSendTemplate(vm);
         });
+        // if (currentMsg.position() != null) {
+        //     $(this._messageContainer).scrollTop(currentMsg.position().top)
+        // }
 
         // html = DOMPurify.sanitize(md.render(html));
         // this._element.innerHTML = html;
@@ -149,7 +158,6 @@ export class ChatView implements Observer {
         fetch(JsonAPI.MESSAGE_POST, {
             method: 'POST',
             headers: headers,
-            body: JSON.stringify(chatMessageDTO)
         })
             .then(response => {
                 log.debug(response);
@@ -162,6 +170,7 @@ export class ChatView implements Observer {
     chatMessagePageLoadAjax() {
         this._messageContainer.addEventListener('scroll', (e) => {
             if ($(this._messageContainer).scrollTop() == 0) {
+                let currentMsg = $('.msg:first');
                 log.debug('Reached top')
                 // @ts-ignore
                 let passphrase: string;
@@ -178,8 +187,11 @@ export class ChatView implements Observer {
                     log.error('passphrase is empty or null');
                     return;
                 }
-                if(JsonAPI.contactName != null)
-                this._chatModel.getMessages(JsonAPI.contactName , passphrase, null);
+                if (JsonAPI.contactName != null)
+                    this._chatModel.getMessages(JsonAPI.contactName, passphrase, null).then(() => {
+                        log.debug(currentMsg.offset()!.top)
+                        $(this._messageContainer).scrollTop(currentMsg.position()!.top - $('.msg').position()!.top)
+                    });
             }
         })
     }

chatto/src/main/resources/templates/chat.html

@@ -232,7 +232,7 @@
                     <div class="img_cont_msg">
                         <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
                     </div>
-                    <div class="msg_container">
+                    <div class="msg msg_container">
                         {{{message}}}
                         <span class="msg_time">{{messageTime}}</span>
                     </div>
@@ -241,7 +241,7 @@
 
     <template id="msg_container_send_template">
         <div class="d-flex justify-content-end mb-4">
-                <div class="msg_container_send">
+                <div class="msg msg_container_send">
                         {{{message}}}
                     <span class="msg_time_send">{{messageTime}}</span>
                 </div>