touchstudy-core 0.1.8 → 0.1.10

package/dist/index.js

@@ -38,7 +38,7 @@ var BASE_URL = function () {
 }();
 var PUSHER_CONFIG = {
   cluster: "ap1",
-  key: "dde049326fbe52b2a749"
+  key: "9018c77328885a14150b"
 };
 var EXAM_CHANNEL = "presence-exam-channel";
 var EXAM_STUDENT_CHANNEL = "EXAM-CHANNEL-{examCode}-STUDENT-{studentId}";
@@ -1381,11 +1381,10 @@ var MessageStatus;
 })(MessageStatus || (MessageStatus = {}));
 
 var ChatRightItem = function ChatRightItem(_ref) {
-  var content = _ref.content,
+  var id = _ref.id,
+    content = _ref.content,
     createdAt = _ref.createdAt,
     isRead = _ref.isRead,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? exports.ChatItemType.Default : _ref$type,
     examCode = _ref.examCode,
     isSystemLog = _ref.isSystemLog,
     parentId = _ref.parentId,
@@ -1399,8 +1398,11 @@ var ChatRightItem = function ChatRightItem(_ref) {
     examTitle = _ref.examTitle,
     parentContent = _ref.parentContent,
     status = _ref.status,
+    selectedReplyMessageId = _ref.selectedReplyMessageId,
+    selectedReplyItemRef = _ref.selectedReplyItemRef,
     onAddExamMessage = _ref.onAddExamMessage,
-    onReTrySendMessage = _ref.onReTrySendMessage;
+    onReTrySendMessage = _ref.onReTrySendMessage,
+    onGotoParentMessage = _ref.onGotoParentMessage;
   var _useState = React.useState(false),
     isShowTime = _useState[0],
     setShowTime = _useState[1];
@@ -1425,16 +1427,17 @@ var ChatRightItem = function ChatRightItem(_ref) {
     setShowTime(isSystemLog || !!isFirst);
   }, [isFirst, isSystemLog]);
   return React__default.createElement("li", {
+    ref: selectedReplyMessageId === id ? selectedReplyItemRef : undefined,
     className: "px-3 " + (!isLast ? "pb-1" : "pb-3") + " " + (!!examCode ? "border border-top-0 border-info" : "") + " " + (!!examCode && isLast ? "border-bottom-1 mb-3" : "border-bottom-0")
   }, showExamHeader && isFirst && React__default.createElement("div", {
     className: "d-flex bg-info justify-content-between px-3 mb-3 py-1 " + styles$1["list__item__header"]
   }, React__default.createElement(reactRouterDom.Link, {
     to: "" + (actionLink || "/"),
     className: "text-black"
-  }, examTitle), !!examId && !!examTitle && React__default.createElement("span", {
+  }, examTitle), !!examId && !!examTitle && !!examCode && React__default.createElement("span", {
     className: "pointer text-black",
     onClick: function onClick() {
-      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle);
+      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle, examCode);
     }
   }, "Add message to exam")), isSystemLog || !!isFirst ? React__default.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
@@ -1454,14 +1457,17 @@ var ChatRightItem = function ChatRightItem(_ref) {
   }, React__default.createElement("div", {
     className: "d-flex flex-column align-items-end"
   }, parentId && React__default.createElement("p", {
-    className: "opacity-50 mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from-right"] + " text-end bg-primary text-white"
+    className: "px-3 bg-light opacity-50 pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from-right"] + "  mb-0 fw-medium " + styles$1["reply-text"],
+    onClick: function onClick() {
+      return onGotoParentMessage === null || onGotoParentMessage === void 0 ? void 0 : onGotoParentMessage(parentId);
+    }
   }, React__default.createElement("b", null, "Reply To:"), " ", parentContent), React__default.createElement("p", {
     className: "mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + (parentId ? styles$1["list__item__message--reply-right"] : "") + " text-end bg-primary text-white",
     onClick: handleShowInfo
   }, content), status !== MessageStatus.Default && React__default.createElement("p", {
     onClick: handleReTrySendMessage,
     className: "fs-6 mb-0 " + (status === MessageStatus.SentError ? "text-danger text-decoration-underline pointer" : "")
-  }, status), (type !== exports.ChatItemType.Exam || !examCode) && status === MessageStatus.Default && React__default.createElement(reactstrap.Collapse, {
+  }, status), !isSystemLog && status === MessageStatus.Default && React__default.createElement(reactstrap.Collapse, {
     isOpen: isShowInfo
   }, React__default.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-end"
@@ -1489,7 +1495,8 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     onReply = _ref.onReply,
     selectedReplyMessageId = _ref.selectedReplyMessageId,
     onToggleReply = _ref.onToggleReply,
-    selectedReplyItemRef = _ref.selectedReplyItemRef;
+    selectedReplyItemRef = _ref.selectedReplyItemRef,
+    onGotoParentMessage = _ref.onGotoParentMessage;
   var _useState = React.useState(false),
     isShowTime = _useState[0],
     setShowTime = _useState[1];
@@ -1517,10 +1524,10 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   }, React__default.createElement(reactRouterDom.Link, {
     to: "" + (actionLink || "/"),
     className: "text-black"
-  }, examTitle), !!examId && !!examTitle && React__default.createElement("span", {
+  }, examTitle), !!examId && !!examTitle && !!examCode && React__default.createElement("span", {
     className: "pointer text-black",
     onClick: function onClick() {
-      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle);
+      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle, examCode);
     }
   }, "Add message to exam")), isSystemLog || !!isFirst ? React__default.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
@@ -1545,7 +1552,10 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   })), React__default.createElement("div", {
     className: "d-flex flex-column"
   }, parentId && React__default.createElement("p", {
-    className: "opacity-50 mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from"] + " text-start bg-light"
+    className: "opacity-50 mb-0 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from"] + " " + styles$1["reply-text"] + " text-start bg-light",
+    onClick: function onClick() {
+      return onGotoParentMessage === null || onGotoParentMessage === void 0 ? void 0 : onGotoParentMessage(parentId);
+    }
   }, React__default.createElement("b", null, "Reply To:"), " ", parentContent), React__default.createElement("p", {
     className: "mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + (parentId ? styles$1["list__item__message--reply"] : "") + " text-start bg-light",
     onClick: handleShowInfo
@@ -1585,6 +1595,11 @@ var ChatList = function ChatList(_ref) {
   var handleToggleReply = function handleToggleReply(id) {
     setSelectedReplyMessageId(id === selectedReplyMessageId ? undefined : id);
   };
+  var handleSelectParentMessage = function handleSelectParentMessage(id) {
+    if (id === selectedReplyMessageId) selectedReplyItemRef.current && selectedReplyItemRef.current.scrollIntoView({
+      behavior: "smooth"
+    });else setSelectedReplyMessageId(id);
+  };
   React.useEffect(function () {
     selectedReplyMessageId && selectedReplyItemRef.current && selectedReplyItemRef.current.scrollIntoView({
       behavior: "smooth"
@@ -1607,7 +1622,8 @@ var ChatList = function ChatList(_ref) {
       selectedReplyMessageId: selectedReplyMessageId,
       onToggleReply: handleToggleReply,
       selectedReplyItemRef: selectedReplyItemRef,
-      onReTrySendMessage: onReTrySendMessage
+      onReTrySendMessage: onReTrySendMessage,
+      onGotoParentMessage: handleSelectParentMessage
     }));
   }));
 };
@@ -1722,7 +1738,15 @@ var ChatContainer = function ChatContainer(_ref) {
   var chatHeaderProps = _ref.chatHeaderProps,
     chatListProps = _ref.chatListProps,
     inputProps = _ref.inputProps,
-    onRead = _ref.onRead;
+    _ref$scrollOffset = _ref.scrollOffset,
+    scrollOffset = _ref$scrollOffset === void 0 ? 0 : _ref$scrollOffset,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    isScrollToEnd = _ref.isScrollToEnd,
+    onRead = _ref.onRead,
+    onReachTop = _ref.onReachTop,
+    onReachBottom = _ref.onReachBottom,
+    onEndScrollToEnd = _ref.onEndScrollToEnd;
   var onReply = chatListProps.onReply,
     onAddExamMessage = chatListProps.onAddExamMessage;
   var onChangeOption = chatHeaderProps.onChangeOption;
@@ -1737,10 +1761,10 @@ var ChatContainer = function ChatContainer(_ref) {
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     onReply === null || onReply === void 0 ? void 0 : onReply(id, content, examId);
   };
-  var handleAddExamMessage = function handleAddExamMessage(examId, examTitle) {
+  var handleAddExamMessage = function handleAddExamMessage(examId, examTitle, examCode) {
     var _inputRef$current2;
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    onAddExamMessage(examId, examTitle);
+    onAddExamMessage(examId, examTitle, examCode);
   };
   var handleChangeExamOption = function handleChangeExamOption(val) {
     var _inputRef$current3;
@@ -1748,6 +1772,16 @@ var ChatContainer = function ChatContainer(_ref) {
     onChangeOption === null || onChangeOption === void 0 ? void 0 : onChangeOption(val);
   };
   var handleScroll = function handleScroll() {
+    if (listRef.current) {
+      var scrollTop = listRef.current.scrollTop;
+      var scrollHeight = listRef.current.scrollHeight;
+      var clientHeight = listRef.current.clientHeight;
+      if (scrollTop + clientHeight + scrollOffset >= scrollHeight) {
+        onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom();
+      } else if (scrollTop <= scrollOffset) {
+        onReachTop === null || onReachTop === void 0 ? void 0 : onReachTop();
+      }
+    }
     if (scrollRef.current) clearTimeout(scrollRef.current);
     scrollRef.current = setTimeout(function () {
       onRead === null || onRead === void 0 ? void 0 : onRead();
@@ -1757,36 +1791,40 @@ var ChatContainer = function ChatContainer(_ref) {
     if (focusRef.current) clearTimeout(focusRef.current);
     focusRef.current = setTimeout(function () {
       onRead === null || onRead === void 0 ? void 0 : onRead();
-    }, 800);
+    }, 300);
   };
   React.useEffect(function () {
-    var _listRef$current, _listItemRef$current, _listItemRef$current$;
+    var _listRef$current, _chatListProps$messag, _listRef$current3;
     scrollRef.current && clearTimeout(scrollRef.current);
     addEventTimeout.current && clearTimeout(addEventTimeout.current);
     (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.removeEventListener("scroll", handleScroll);
-    (_listItemRef$current = listItemRef.current) === null || _listItemRef$current === void 0 ? void 0 : (_listItemRef$current$ = _listItemRef$current.lastElementChild) === null || _listItemRef$current$ === void 0 ? void 0 : _listItemRef$current$.scrollIntoView({
-      behavior: "smooth"
-    });
-    addEventTimeout.current = setTimeout(function () {
-      var _listRef$current2;
-      (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.addEventListener("scroll", handleScroll);
-    }, 800);
+    if (isScrollToEnd && !isLoading && (_chatListProps$messag = chatListProps.messages) !== null && _chatListProps$messag !== void 0 && _chatListProps$messag.length) {
+      var _listItemRef$current, _listItemRef$current$;
+      (_listItemRef$current = listItemRef.current) === null || _listItemRef$current === void 0 ? void 0 : (_listItemRef$current$ = _listItemRef$current.lastElementChild) === null || _listItemRef$current$ === void 0 ? void 0 : _listItemRef$current$.scrollIntoView({
+        behavior: "smooth"
+      });
+      onEndScrollToEnd === null || onEndScrollToEnd === void 0 ? void 0 : onEndScrollToEnd();
+      addEventTimeout.current = setTimeout(function () {
+        var _listRef$current2;
+        (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.addEventListener("scroll", handleScroll);
+      }, 800);
+    } else (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.addEventListener("scroll", handleScroll);
     return function () {
-      var _listRef$current3;
-      (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.removeEventListener("scroll", handleScroll);
+      var _listRef$current4;
+      (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 ? void 0 : _listRef$current4.removeEventListener("scroll", handleScroll);
       scrollRef.current && clearTimeout(scrollRef.current);
       addEventTimeout.current && clearTimeout(addEventTimeout.current);
     };
-  }, [listItemRef.current, JSON.stringify(chatListProps.messages)]);
+  }, [JSON.stringify(chatListProps.messages), scrollOffset, isLoading, onEndScrollToEnd, onRead, isScrollToEnd]);
   React.useEffect(function () {
     var _inputRef$current4;
     (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.addEventListener("focus", handleFocus);
     return function () {
       var _inputRef$current5;
       (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.removeEventListener("focus", handleFocus);
-      if (focusRef.current) clearTimeout(focusRef.current);
+      focusRef.current && clearTimeout(focusRef.current);
     };
-  }, []);
+  }, [onRead]);
   return React__default.createElement("div", {
     className: "d-flex flex-column w-100 h-100 border border-1 border-light rounded-3 shadow-sm"
   }, React__default.createElement("div", null, React__default.createElement(ChatHeader, Object.assign({}, chatHeaderProps, {
@@ -1794,7 +1832,12 @@ var ChatContainer = function ChatContainer(_ref) {
   }))), React__default.createElement("div", {
     ref: listRef,
     className: "flex-grow-1 " + styles$1["body"]
-  }, React__default.createElement(ChatList, Object.assign({}, chatListProps, {
+  }, isLoading && React__default.createElement("div", {
+    className: "d-flex justify-content-center"
+  }, React__default.createElement(reactstrap.Spinner, {
+    color: "secondary",
+    className: "my-2"
+  }, "Loading...")), React__default.createElement(ChatList, Object.assign({}, chatListProps, {
     listItemRef: listItemRef,
     onReply: handleReply,
     onAddExamMessage: handleAddExamMessage
@@ -1843,7 +1886,7 @@ var CONVERSATION_DEFAULT_FILTER = {
 };
 var MESSAGE_DEFAULT_FILTER = {
   currentPage: 1,
-  pageSize: -1,
+  pageSize: 12,
   textSearch: "",
   sortColumnDirection: OrderBy.DESC,
   sortColumnName: MessageSortBy.CreatedAt
@@ -1903,43 +1946,68 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
   var _useState2 = React.useState(MESSAGE_DEFAULT_FILTER),
     messageFilter = _useState2[0],
     setMessageFilter = _useState2[1];
+  var _useState3 = React.useState(false),
+    isLoading = _useState3[0],
+    setLoading = _useState3[1];
   var getMessageList = function getMessageList(conversationId, examId) {
     try {
-      var filter = _extends({}, messageFilter, {
-        examId: !examId ? messageFilter.examId : examId
-      });
-      return Promise.resolve(getMessagesByConversation(conversationId, filter)).then(function (res) {
-        var _res$data$items;
-        function _temp(_getListExamOptions) {
-          _getListExamOptions;
-        }
-        setMessages(((_res$data$items = res.data.items) === null || _res$data$items === void 0 ? void 0 : _res$data$items.reverse()) || []);
-        return getListExamOptions ? Promise.resolve(!!getListExamOptions && getListExamOptions(userId)).then(_temp) : _temp(!!getListExamOptions && getListExamOptions(userId));
+      var _temp3 = function _temp3() {
+        setLoading(false);
+      };
+      setLoading(true);
+      var _temp2 = _catch(function () {
+        var filter = _extends({}, messageFilter, {
+          examId: !examId ? messageFilter.examId : examId
+        });
+        return Promise.resolve(getMessagesByConversation(conversationId, filter)).then(function (res) {
+          function _temp(_getListExamOptions) {
+            _getListExamOptions;
+          }
+          setMessages(function (state) {
+            var _res$data$items;
+            return [].concat(((_res$data$items = res.data.items) === null || _res$data$items === void 0 ? void 0 : _res$data$items.reverse()) || [], state);
+          });
+          return getListExamOptions ? Promise.resolve(!!getListExamOptions && getListExamOptions(userId)).then(_temp) : _temp(!!getListExamOptions && getListExamOptions(userId));
+        });
+      }, function (error) {
+        console.log({
+          error: error
+        });
       });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  var handleLoadMore = function handleLoadMore() {
+    if (isLoading) return;
+    var lastItem = messages[0];
+    if (!lastItem) return;
+    var newFilter = _extends({}, messageFilter, {
+      currentPage: 1,
+      beforeDate: lastItem.createdAt
+    });
+    setMessageFilter(newFilter);
+    return JSON.stringify(newFilter) === JSON.stringify(messageFilter);
+  };
   var handleMarkReadMessage = function handleMarkReadMessage(conversationId, messageId) {
     try {
-      var _temp2 = _catch(function () {
+      var _temp4 = _catch(function () {
         return Promise.resolve(apiMarkReadMessage(conversationId, messageId)).then(function () {});
       }, function (error) {
         console.log({
           error: error
         });
       });
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
   var resetMessages = function resetMessages() {
+    setMessageFilter(MESSAGE_DEFAULT_FILTER);
     setMessages([]);
   };
-  var handleChangeMessageFilter = function handleChangeMessageFilter(filter) {
-    setMessageFilter(_extends({}, messageFilter, filter));
-  };
   var handleChangeExamId = function handleChangeExamId(value) {
     setMessageFilter(_extends({}, messageFilter, {
       examId: value === null || value === void 0 ? void 0 : value.value,
@@ -1947,14 +2015,15 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
     }));
   };
   return {
+    isLoading: isLoading,
     messageFilter: messageFilter,
     messages: messages,
     getMessageList: getMessageList,
     setMessages: setMessages,
     resetMessages: resetMessages,
-    handleChangeMessageFilter: handleChangeMessageFilter,
     handleChangeExamId: handleChangeExamId,
-    handleMarkReadMessage: handleMarkReadMessage
+    handleMarkReadMessage: handleMarkReadMessage,
+    handleLoadMore: handleLoadMore
   };
 };
 
@@ -1970,6 +2039,7 @@ var useChatContainer = function useChatContainer(props) {
   var channel = React.useRef();
   var channelName = React.useRef();
   var loadingRef = React.useRef(false);
+  var firstLoadRef = React.useRef(true);
   var dispatch = reactRedux.useDispatch();
   var roles = reactRedux.useSelector(function (state) {
     var _state$common, _state$common$user;
@@ -1985,16 +2055,26 @@ var useChatContainer = function useChatContainer(props) {
   var _useState3 = React.useState(MessageStatus.Default),
     messageStatus = _useState3[0],
     setMessageStatus = _useState3[1];
+  var _useState4 = React.useState(true),
+    isScrollToEnd = _useState4[0],
+    setScrollToEnd = _useState4[1];
   var _useExamList = useExamList(isStudent),
     exams = _useExamList.exams,
     getListExam = _useExamList.getListExam;
   var _useMessageList = useMessageList(isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation = selectedConversation.teacher) === null || _selectedConversation === void 0 ? void 0 : _selectedConversation.id : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation2 = selectedConversation.student) === null || _selectedConversation2 === void 0 ? void 0 : _selectedConversation2.id, !userId ? getListExam : undefined),
+    isLoadingMessages = _useMessageList.isLoading,
     messages = _useMessageList.messages,
     messageFilter = _useMessageList.messageFilter,
     getMessageList = _useMessageList.getMessageList,
     resetMessages = _useMessageList.resetMessages,
     handleChangeExamId = _useMessageList.handleChangeExamId,
-    setMessages = _useMessageList.setMessages;
+    setMessages = _useMessageList.setMessages,
+    handleLoadMore = _useMessageList.handleLoadMore;
+  var handleToggleScrollToEnd = function handleToggleScrollToEnd() {
+    setScrollToEnd(function (state) {
+      return !state;
+    });
+  };
   var handleAddMessage = function handleAddMessage() {
     try {
       var _message$content, _message$content$trim;
@@ -2007,6 +2087,7 @@ var useChatContainer = function useChatContainer(props) {
       })) return Promise.resolve();
       loadingRef.current = true;
       if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id) || !(message !== null && message !== void 0 && (_message$content = message.content) !== null && _message$content !== void 0 && (_message$content$trim = _message$content.trim()) !== null && _message$content$trim !== void 0 && _message$content$trim.length)) return Promise.resolve();
+      setScrollToEnd(true);
       setMessages(function (state) {
         return [].concat(state, [{
           id: 0,
@@ -2019,7 +2100,7 @@ var useChatContainer = function useChatContainer(props) {
             id: message.examId,
             startTime: moment().format("YYYY-MM-DDTHH:mm:ss"),
             title: message.examTitle || "",
-            code: "temp",
+            code: message.examCode || "",
             createdAt: moment().format("YYYY-MM-DDTHH:mm:ss")
           } : undefined,
           isRead: false,
@@ -2059,14 +2140,16 @@ var useChatContainer = function useChatContainer(props) {
       return Promise.reject(e);
     }
   };
-  var handleAddExamMessage = function handleAddExamMessage(examId, title) {
+  var handleAddExamMessage = function handleAddExamMessage(examId, title, examCode) {
     setMessage(!!message ? _extends({}, message, {
       examId: examId,
+      examCode: examCode,
       examTitle: title,
       parentId: undefined,
       parentContent: ""
     }) : {
       examId: examId,
+      examCode: examCode,
       content: "",
       examTitle: title,
       parentId: undefined,
@@ -2158,7 +2241,8 @@ var useChatContainer = function useChatContainer(props) {
     return results;
   }, [JSON.stringify(messages), JSON.stringify(message), isStudent, JSON.stringify(selectedConversation), messageFilter.examId, isStudent, userId, messageStatus]);
   var handleNewMessageSent = function handleNewMessageSent(data) {
-    if (!messageFilter.examId || messageFilter.examId && data.examId === messageFilter.examId) {
+    if (!messageFilter.examId && !examId || messageFilter.examId && data.examId === messageFilter.examId || examId && examId === data.examId) {
+      setScrollToEnd(true);
       setMessages(function (state) {
         if (state.some(function (i) {
           return i.id === 0;
@@ -2178,6 +2262,11 @@ var useChatContainer = function useChatContainer(props) {
       }));
     });
   };
+  var handleLoadMoreMessages = function handleLoadMoreMessages() {
+    if (handleLoadMore()) {
+      getMessageConversation();
+    }
+  };
   var cleanupPusher = function cleanupPusher() {
     var _pusher$current, _pusher$current2;
     (_pusher$current = pusher.current) === null || _pusher$current === void 0 ? void 0 : _pusher$current.unbind("new-message-event", handleNewMessageSent);
@@ -2203,13 +2292,15 @@ var useChatContainer = function useChatContainer(props) {
       pusher.current.bind("message-read-event", handleMessageMarkRead);
     }
     return cleanupPusher;
-  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, messageFilter.examId]);
+  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, messageFilter.examId, examId]);
   React.useEffect(function () {
     var getConversation = function getConversation() {
       try {
         var _temp6 = function _temp6() {
           dispatch(setLoading(false));
         };
+        resetMessages();
+        setScrollToEnd(true);
         if ((conversation === null || conversation === void 0 ? void 0 : conversation.id) !== undefined) {
           setSelectedConversation(conversation);
           return Promise.resolve();
@@ -2242,7 +2333,7 @@ var useChatContainer = function useChatContainer(props) {
     };
     getConversation();
   }, [conversation === null || conversation === void 0 ? void 0 : conversation.id, userId]);
-  var handleMarkRead = function handleMarkRead() {
+  var handleMarkRead = React.useCallback(function () {
     try {
       if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) return Promise.resolve();
       var _temp7 = _catch(function () {
@@ -2256,17 +2347,12 @@ var useChatContainer = function useChatContainer(props) {
     } catch (e) {
       return Promise.reject(e);
     }
-  };
+  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id]);
   var getMessageConversation = function getMessageConversation() {
     try {
-      var _temp12 = function _temp12() {
-        dispatch(setLoading(false));
-      };
       if (!roles.length) return Promise.resolve();
       if ((selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id) === undefined) return Promise.resolve();
-      if (messageFilter.currentPage === 1) resetMessages();
-      dispatch(setLoading(true));
-      var _temp11 = _catch(function () {
+      return Promise.resolve(_catch(function () {
         var _temp10 = function () {
           if (selectedConversation.id === 0) {
             var _userId = isStudent ? selectedConversation.teacher.id : selectedConversation.student.id;
@@ -2281,7 +2367,11 @@ var useChatContainer = function useChatContainer(props) {
               });
             };
             var _temp8 = function () {
-              if (messageFilter.currentPage === 1) return Promise.resolve(handleMarkRead()).then(function () {});
+              if (firstLoadRef.current) {
+                return Promise.resolve(handleMarkRead()).then(function () {
+                  firstLoadRef.current = false;
+                });
+              }
             }();
             return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
           }
@@ -2289,21 +2379,24 @@ var useChatContainer = function useChatContainer(props) {
         if (_temp10 && _temp10.then) return _temp10.then(function () {});
       }, function () {
         reactToastify.toast.error("Fail to fetch data!");
-      });
-      return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11));
+      }));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  var handleConversationChange = function handleConversationChange() {
+    resetMessages();
+    setScrollToEnd(true);
+  };
   React.useEffect(function () {
     getMessageConversation();
-  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.teacher.id, selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.student.id, isStudent, roles.length, JSON.stringify(messageFilter), examId]);
-  var userName = isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation3 = selectedConversation.teacher) === null || _selectedConversation3 === void 0 ? void 0 : _selectedConversation3.displayName : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation4 = selectedConversation.student) === null || _selectedConversation4 === void 0 ? void 0 : _selectedConversation4.displayName;
-  var userAvatar = isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation5 = selectedConversation.teacher) === null || _selectedConversation5 === void 0 ? void 0 : _selectedConversation5.avatar : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation6 = selectedConversation.student) === null || _selectedConversation6 === void 0 ? void 0 : _selectedConversation6.avatar;
+  }, [JSON.stringify(selectedConversation), JSON.stringify(roles), JSON.stringify(messageFilter), examId]);
+  var userName = (isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation3 = selectedConversation.teacher) === null || _selectedConversation3 === void 0 ? void 0 : _selectedConversation3.displayName : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation4 = selectedConversation.student) === null || _selectedConversation4 === void 0 ? void 0 : _selectedConversation4.displayName) || "";
+  var userAvatar = (isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation5 = selectedConversation.teacher) === null || _selectedConversation5 === void 0 ? void 0 : _selectedConversation5.avatar : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation6 = selectedConversation.student) === null || _selectedConversation6 === void 0 ? void 0 : _selectedConversation6.avatar) || "";
   return {
     chatHeaderProps: {
-      name: userName || "",
-      avatar: userAvatar || "",
+      name: userName,
+      avatar: userAvatar,
       options: exams,
       onChangeOption: handleFilterExam
     },
@@ -2321,15 +2414,19 @@ var useChatContainer = function useChatContainer(props) {
       onSubmit: handleAddMessage,
       onClearReply: !messageFilter.examId || message !== null && message !== void 0 && message.parentContent ? handleClearReply : undefined
     },
+    isScrollToEnd: isScrollToEnd,
+    isLoadingMessages: isLoadingMessages,
     exams: exams,
     messageList: messageList,
     selectedConversation: selectedConversation,
     messageStatus: messageStatus,
     messageFilter: messageFilter,
+    handleToggleScrollToEnd: handleToggleScrollToEnd,
+    handleLoadMoreMessages: handleLoadMoreMessages,
     getMessageList: getMessageList,
     handleFilterExam: handleFilterExam,
     setMessage: setMessage,
-    resetMessages: resetMessages,
+    resetMessages: handleConversationChange,
     getMessageConversation: getMessageConversation,
     handleMarkRead: handleMarkRead
   };
@@ -2369,8 +2466,8 @@ var useConversationList = function useConversationList() {
         return i.id === val.id;
       });
       if (index > -1 && JSON.stringify(val) !== JSON.stringify(state[index])) {
-        return [].concat(state.slice(0, index), [val], state.slice(index + 1));
-      } else return [].concat(state, [val]);
+        return [val].concat(state.slice(0, index), state.slice(index + 1));
+      } else return [val].concat(state);
     });
     setSelectedConversation(function (state) {
       if (!state) return val;