Remove Chat.resetOldestMessageDateTime and rely directly on the DOM

Fix and add an improved layout when navigating history
Fix MAM retrieval for newer messages

app/Widgets/Chat/Chat.php

@@ -311,12 +311,16 @@ class Chat extends \Movim\Widget\Base
 
     public function onMAMRetrieved($packet)
     {
-        $counter = $packet->content;
+        $content = $packet->content;
 
         $this->rpc('MovimUtils.removeClass', '#chat_widget .contained', 'loading');
 
-        if ($counter > 0) {
-            $this->rpc('Chat.getHistory', false);
+        if ($content['counter'] > 0) {
+            if ($content['forward']) {
+                $this->rpc('Chat.getNewerMessages');
+            } else {
+                $this->rpc('Chat.getHistory', false);
+            }
         }
     }
 
@@ -434,7 +438,7 @@ class Chat extends \Movim\Widget\Base
             }
 
             $this->rpc('Chat.setObservers');
-            $this->rpc('Chat.resetOldestMessageDateTime');
+            $this->rpc('Chat.clearMessages', '#' . cleanupId($jid) . '-conversation');
             $this->getMessages($jid);
             $this->rpc('Notif.current', 'chat|' . $jid);
             $this->rpc('Chat.scrollToSeparator');
@@ -480,7 +484,7 @@ class Chat extends \Movim\Widget\Base
             }
 
             $this->rpc('Chat.setObservers');
-            $this->rpc('Chat.resetOldestMessageDateTime'); // TODO, not call there all the time ?!
+            $this->rpc('Chat.clearMessages', '#' . cleanupId($room) . '-conversation'); // TODO, not call there all the time ?!
             $this->getMessages($room, muc: true);
             $this->rpc('Notif.current', 'chat|' . $room);
             $this->rpc('Chat.scrollToSeparator');
@@ -1011,10 +1015,10 @@ class Chat extends \Movim\Widget\Base
             ->first();
 
         if ($contextMessage) {
-            $this->rpc('MovimTpl.fill', '#' . cleanupId($jid) . '-conversation', '');
+            $this->rpc('Chat.clearMessages', '#' . cleanupId($jid) . '-conversation');
             $this->ajaxGetHistory($jid, $contextMessage->published, muc: $contextMessage->isMuc(), prepend: false, tryMam: false);
             $this->rpc('Chat.scrollAndBlinkMessageMid', $mid);
-            $this->rpc('MovimUtils.addClass', '#scroll_now.button.action', 'show');
+            $this->rpc('MovimUtils.addClass', '#chat_widget .contained', 'history');
         }
     }
 
@@ -1031,23 +1035,19 @@ class Chat extends \Movim\Widget\Base
         $messages = \App\Message::jid($jid);
 
         if ($date !== null) {
-            $messages = $messages->where('published', $prepend ? '<' : '>', date(MOVIM_SQL_DATE, strtotime($date)));
+            $messages = $messages->where('published', $prepend ? '<' : '>=', date(MOVIM_SQL_DATE, strtotime($date)));
         }
 
         $messages = $muc
             ? $messages->whereIn('type', Message::MESSAGE_TYPE_MUC)->whereNull('subject')
             : $messages->whereIn('type', Message::MESSAGE_TYPE);
 
-        $messages = $messages->orderBy('published', 'desc')
+        $messages = $messages->orderBy('published', $prepend ? 'desc' : 'asc')
             ->withCount('reactions')
             ->take($this->_pagination)
             ->get();
 
         if ($messages->count() > 0) {
-            if (!$prepend) {
-                $messages = $messages->reverse();
-            }
-
             foreach ($messages as $message) {
                 $this->prepareMessage($message);
             }
@@ -1204,9 +1204,9 @@ class Chat extends \Movim\Widget\Base
 
     public function ajaxClearAndGetMessages(string $jid, $muc = false)
     {
-        $this->rpc('MovimTpl.fill', '#' . cleanupId($jid) . '-conversation', '');
+        $this->rpc('Chat.clearMessages', '#' . cleanupId($jid) . '-conversation');
         $this->getMessages($jid, $muc);
-        $this->rpc('MovimUtils.removeClass', '#scroll_now.button.action', 'show');
+        $this->rpc('MovimUtils.removeClass', '#chat_widget .contained', 'history');
     }
 
     public function getMessages(string $jid, $muc = false, $seenOnly = false, $event = true)

app/Widgets/Chat/chat.css

@@ -41,6 +41,10 @@ main:not(.enabled) #chat_widget {
     position: relative;
 }
 
+#chat_widget .contained.history {
+    mask-image: linear-gradient(to bottom, transparent, black 25% 75%, transparent);
+}
+
 #chat_widget ul.list.flex {
     width: 100%;
 }
@@ -120,13 +124,13 @@ main:not(.enabled) #chat_widget {
     pointer-events: none;
 }
 
-#chat_widget #scroll_now.button.action {
+#chat_widget .contained.history ~ .chat_box #scroll_now.button.action {
     width: 7rem;
     right: 1.5rem;
 }
 
-#chat_widget #scroll_now.button.action.show,
-#chat_widget #scroll_now.button.action:not(.show) + #scroll_down.button.action.show {
+#chat_widget .contained.history ~ .chat_box #scroll_now.button.action,
+#chat_widget .contained:not(.history) ~ .chat_box #scroll_now.button.action + #scroll_down.button.action.show {
     transition: transform 0.2s ease-in-out, opacity 0.2s;
     transform: scale(100%);
     opacity: 1;

app/Widgets/Chat/chat.js

@@ -4,7 +4,6 @@ var Chat = {
     date: null,
     separator: null,
 
-    oldestMessageDateTime: null,
     edit: false,
 
     // Scroll
@@ -166,10 +165,11 @@ var Chat = {
     getHistory: function (tryMam) {
         var textarea = Chat.getTextarea();
 
+        let firstMessage = Chat.getDiscussion().querySelector('.message');
         if (textarea) {
             Chat_ajaxGetHistory(
                 textarea.dataset.jid,
-                Chat.oldestMessageDateTime,
+                firstMessage.dataset.published,
                 Boolean(textarea.dataset.muc),
                 true,
                 tryMam);
@@ -648,8 +648,8 @@ var Chat = {
         Chat.delivery_error = delivery_error;
         Chat.action_impossible_encrypted_error = action_impossible_encrypted_error;
     },
-    resetOldestMessageDateTime: function () {
-        Chat.oldestMessageDateTime = null;
+    clearMessages: function (id) {
+        MovimTpl.fill(id, '');
     },
     setSpecificElements: function (left, right) {
         var div = document.createElement('div');
@@ -664,8 +664,7 @@ var Chat = {
         if (discussion == null) return;
 
         discussion.onscroll = function () {
-            if (this.scrollTop < 1
-                && Chat.oldestMessageDateTime) {
+            if (this.scrollTop < 1) {
                 Chat.getHistory(true);
             }
 
@@ -681,7 +680,13 @@ var Chat = {
         Chat.lastHeight = discussion.scrollHeight;
         Chat.lastScroll = discussion.scrollTop + discussion.clientHeight;
 
-        Chat.scrollToggleButton();
+        var button = document.querySelector('#chat_widget #scroll_down.button.action');
+
+        if (Chat.isScrolled()) {
+            button.classList.remove('show');
+        } else {
+            button.classList.add('show');
+        }
     },
     isScrolled: function () {
         return Chat.lastHeight - 5 <= Chat.lastScroll;
@@ -728,18 +733,6 @@ var Chat = {
             Chat.setScroll();
         }
     },
-    scrollToggleButton: function () {
-        var discussion = Chat.getDiscussion();
-        if (discussion == null) return;
-
-        var button = document.querySelector('#chat_widget #scroll_down.button.action');
-
-        if (Chat.isScrolled()) {
-            button.classList.remove('show');
-        } else {
-            button.classList.add('show');
-        }
-    },
     removeSeparator: function () {
         var separator = Chat.getDiscussion().querySelector('li.separator');
         if (separator) separator.remove();
@@ -938,21 +931,17 @@ var Chat = {
                 /**
                  * We might have old messages reacted pushed by the server
                  */
-                if (Chat.oldestMessageDateTime
+                /*if (Chat.oldestMessageDateTime
                     && Chat.oldestMessageDateTime > messageDateTime
                     && !prepend) {
                     return;
-                }
+                }*/
 
                 if (prepend === undefined || prepend === false) {
                     Chat.appendDate(date, prepend);
                 }
 
                 for (speakertime in page[date]) {
-                    if (Chat.oldestMessageDateTime == null) {
-                        Chat.oldestMessageDateTime = page[date][speakertime].published;
-                    }
-
                     Chat.appendMessage(speakertime, page[date][speakertime], prepend);
                 }
 
@@ -1183,7 +1172,7 @@ var Chat = {
             msg.appendChild(Chat.getCardHtml(data.card, data.story));
         }
 
-        msg.setAttribute('title', data.published);
+        msg.dataset.published = data.published;
 
         msg.appendChild(p);
         msg.appendChild(info);
@@ -1276,10 +1265,6 @@ var Chat = {
             }
         }
 
-        if (new Date(Chat.oldestMessageDateTime) > new Date(data.published)) {
-            Chat.oldestMessageDateTime = data.published;
-        }
-
         if (!mergeMsg) {
             if (prepend) {
                 MovimTpl.prepend('#' + id, bubble.outerHTML);
@@ -1652,7 +1637,20 @@ var Chat = {
         }
 
         return url.protocol === "http:" || url.protocol === "https:";
-    }
+    },
+    getNewerMessages: function () {
+        var jid = MovimUtils.urlParts().params[0];
+        let lastMessage = Chat.getDiscussion().querySelector('li:last-child .bubble:last-child .message:last-child');
+        if (jid && lastMessage) {
+            Chat_ajaxGetHistory(
+                jid,
+                lastMessage.dataset.published,
+                (MovimUtils.urlParts().params[1] === 'room'),
+                false,
+                false
+            );
+        }
+    },
 };
 
 MovimWebsocket.attach(function () {
@@ -1663,14 +1661,8 @@ MovimWebsocket.attach(function () {
     var jid = MovimUtils.urlParts().params[0];
 
     if (jid) {
-        if (Boolean(document.getElementById(MovimUtils.cleanupId(jid) + '-conversation')) && Chat.oldestMessageDateTime) {
-            Chat_ajaxGetHistory(
-                jid,
-                Chat.oldestMessageDateTime,
-                (MovimUtils.urlParts().params[1] === 'room'),
-                false,
-                false
-            );
+        if (Boolean(document.getElementById(MovimUtils.cleanupId(jid) + '-conversation'))) {
+            Chat.getNewerMessages();
         } else {
             (MovimUtils.urlParts().params[1] === 'room')
                 ? Chat.getRoom(jid)

app/Widgets/ChatActions/_chatactions_search.tpl

@@ -8,7 +8,7 @@
         <form name="search" onsubmit="return false;">
             <div>
                 <input name="keyword" autocomplete="off"
-                    placeholder="{$c->__('button.search')}" oninput="console.log(this.value); ChatActions_ajaxSearchMessages('{$jid|echapJS}', this.value, {if="$muc"}true{else}false{/if});" type=" text">
+                    placeholder="{$c->__('button.search')}" oninput="ChatActions_ajaxSearchMessages('{$jid|echapJS}', this.value, {if="$muc"}true{else}false{/if});" type=" text">
             </div>
         </form>
     </li>

app/Widgets/RoomsUtils/RoomsUtils.php

@@ -27,7 +27,6 @@ use App\Widgets\Dialog\Dialog;
 use App\Widgets\Drawer\Drawer;
 use App\Widgets\Toast\Toast;
 use Respect\Validation\Validator;
-use Movim\EmbedLight;
 use Movim\Session;
 use Moxl\Xec\Action\Muc\ChangeAffiliation;
 use Moxl\Xec\Action\Presence\Muc;

src/Moxl/Xec/Action/MAM/Get.php

@@ -55,7 +55,7 @@ class Get extends Action
         $session = Session::instance();
 
         $messagesCounter = (int)$session->get('mamid' . $this->_queryid);
-        $this->pack($messagesCounter);
+        $this->pack(['counter' => $messagesCounter, 'forward' => ($this->_start != null)]);
 
         $session->delete('mamid' . $this->_queryid);
         $this->deliver();

src/Moxl/Xec/Action/Presence/Muc.php

@@ -104,7 +104,7 @@ class Muc extends Action
 
             $g = new \Moxl\Xec\Action\MAM\Get;
             $g->setTo($this->_to)
-                ->setLimit(300);
+                ->setLimit(500);
 
             if (
                 !empty($message)