sceyt-chat-react-uikit 1.8.7-beta.14 → 1.8.7-beta.15

package/index.js

@@ -44040,6 +44040,7 @@ function useChatController(_ref5) {
   var edgeRequestSequenceRef = React.useRef(0);
   var activeChannelIdRef = React.useRef(null);
   var lastScrollActivityAtRef = React.useRef(0);
+  var lastMeasuredLatestEdgeRef = React.useRef(0);
   var jumpToLatestFrameRef = React.useRef(null);
   var loadPrevFrameRef = React.useRef(null);
   var loadNextFrameRef = React.useRef(null);
@@ -45015,7 +45016,11 @@ function useChatController(_ref5) {
     } else if (currentScrollTop >= latestEdgeScrollTop - PRELOAD_TRIGGER_PX) {
       currentScrollTop = latestEdgeScrollTop;
     }
+    if (currentScrollTop !== container.scrollTop) {
+      setScrollTop(container, currentScrollTop, 'auto');
+    }
     var distanceFromLatest = latestEdgeScrollTop - currentScrollTop;
+    lastMeasuredLatestEdgeRef.current = latestEdgeScrollTop;
     if (Date.now() < jumpLockUntilRef.current) {
       if (jumpLockModeRef.current === 'latest' && distanceFromLatest > PRELOAD_RESET_PX) {
         clearJumpScrollingLock();
@@ -45293,14 +45298,19 @@ function useChatController(_ref5) {
     }
   }
   React.useLayoutEffect(function () {
-    var _restoreRef$current9;
+    var _lastBootKeyRef$curre, _restoreRef$current9;
     var container = scrollRef.current;
     if (!container || !messages.length) {
       return;
     }
+    var rememberLatestEdge = function rememberLatestEdge() {
+      lastMeasuredLatestEdgeRef.current = getLatestEdgeScrollTop(container);
+    };
+    var isChannelSwitch = activeChannelIdRef.current !== null && activeChannelIdRef.current !== channel.id;
+    var hasCurrentBootKey = ((_lastBootKeyRef$curre = lastBootKeyRef.current) === null || _lastBootKeyRef$curre === void 0 ? void 0 : _lastBootKeyRef$curre.startsWith(channel.id + ":")) || false;
     if (((_restoreRef$current9 = restoreRef.current) === null || _restoreRef$current9 === void 0 ? void 0 : _restoreRef$current9.mode) === 'restore-scroll-top') {
       var savedScrollTop = restoreRef.current.scrollTop;
-      if (!lastBootKeyRef.current) {
+      if (!hasCurrentBootKey) {
         lastBootKeyRef.current = channel.id + ":" + getMessageLocalRef(messages[0]);
       }
       restoreRef.current = null;
@@ -45308,19 +45318,27 @@ function useChatController(_ref5) {
       setIsViewingLatest(false);
       var maxScrollTop = getMaxScrollTop(container);
       setScrollTop(container, Math.min(savedScrollTop, maxScrollTop), 'auto');
+      rememberLatestEdge();
       return;
     }
-    if (!lastBootKeyRef.current) {
+    if (!hasCurrentBootKey) {
       lastBootKeyRef.current = channel.id + ":" + getMessageLocalRef(messages[0]);
       var preservePendingHistoryEdge = pendingEdgeCheckAfterLoadRef.current && activeEdgeIntentRef.current === 'previous';
       restoreRef.current = unreadScrollTo && unreadMessageId ? {
         mode: 'reveal-unread-separator'
-      } : preservePendingHistoryEdge ? null : isScrollInteractionActive() ? null : {
+      } : preservePendingHistoryEdge ? null : isChannelSwitch ? {
+        mode: 'to-bottom'
+      } : isScrollInteractionActive() ? null : {
         mode: 'to-bottom'
       };
     }
     var restoreState = restoreRef.current;
     if (!restoreState) {
+      var wasPinnedToPreviousLatestEdge = Math.abs(container.scrollTop - lastMeasuredLatestEdgeRef.current) <= PRELOAD_TRIGGER_PX;
+      if ((viewIsAtLatestRef.current || wasPinnedToPreviousLatestEdge) && !hasNext) {
+        scrollToLatestEdge(container, 'auto');
+      }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'reveal-message') {
@@ -45349,6 +45367,7 @@ function useChatController(_ref5) {
         jumpObserverRef.current = observer;
         observer.observe(target);
       }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'reveal-unread-separator') {
@@ -45365,6 +45384,7 @@ function useChatController(_ref5) {
       } else {
         return;
       }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'to-bottom') {
@@ -45372,6 +45392,7 @@ function useChatController(_ref5) {
       viewIsAtLatestRef.current = true;
       setIsViewingLatest(true);
       scrollToLatestEdge(container, 'auto');
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'to-bottom-smooth') {
@@ -45379,6 +45400,7 @@ function useChatController(_ref5) {
       viewIsAtLatestRef.current = true;
       setIsViewingLatest(true);
       scrollToLatestEdge(container, 'smooth');
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'preserve-anchor-window') {
@@ -45387,6 +45409,7 @@ function useChatController(_ref5) {
         viewIsAtLatestRef.current = true;
         setIsViewingLatest(true);
         scrollToLatestEdge(container, 'auto');
+        rememberLatestEdge();
         return;
       }
       var anchorElement = getItemElement(container, restoreState.itemId);
@@ -45400,6 +45423,7 @@ function useChatController(_ref5) {
       if (offsetDelta !== 0) {
         setScrollTop(container, clampScrollTopToViewport(container, container.scrollTop + offsetDelta), 'auto');
       }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'preserve-anchor') {
@@ -45433,8 +45457,9 @@ function useChatController(_ref5) {
         var nextScrollTop = clampScrollTopToViewport(container, container.scrollTop + _offsetDelta);
         setScrollTop(container, nextScrollTop, 'auto');
       }
+      rememberLatestEdge();
     }
-  }, [channel.id, unreadMessageId, isActiveEdgeRequestCurrent, dispatch, messages, unreadScrollTo, clearJumpBlur, hasNextMessages, isScrollInteractionActive]);
+  }, [channel.id, unreadMessageId, isActiveEdgeRequestCurrent, dispatch, messages, unreadScrollTo, clearJumpBlur, hasNext, isScrollInteractionActive]);
   React.useEffect(function () {
     if (!unreadScrollTo || !unreadMessageId || !messages.length || unreadRestoreCompletedRef.current) {
       return;

package/index.modern.js

@@ -44039,6 +44039,7 @@ function useChatController(_ref5) {
   var edgeRequestSequenceRef = useRef(0);
   var activeChannelIdRef = useRef(null);
   var lastScrollActivityAtRef = useRef(0);
+  var lastMeasuredLatestEdgeRef = useRef(0);
   var jumpToLatestFrameRef = useRef(null);
   var loadPrevFrameRef = useRef(null);
   var loadNextFrameRef = useRef(null);
@@ -45014,7 +45015,11 @@ function useChatController(_ref5) {
     } else if (currentScrollTop >= latestEdgeScrollTop - PRELOAD_TRIGGER_PX) {
       currentScrollTop = latestEdgeScrollTop;
     }
+    if (currentScrollTop !== container.scrollTop) {
+      setScrollTop(container, currentScrollTop, 'auto');
+    }
     var distanceFromLatest = latestEdgeScrollTop - currentScrollTop;
+    lastMeasuredLatestEdgeRef.current = latestEdgeScrollTop;
     if (Date.now() < jumpLockUntilRef.current) {
       if (jumpLockModeRef.current === 'latest' && distanceFromLatest > PRELOAD_RESET_PX) {
         clearJumpScrollingLock();
@@ -45292,14 +45297,19 @@ function useChatController(_ref5) {
     }
   }
   useLayoutEffect(function () {
-    var _restoreRef$current9;
+    var _lastBootKeyRef$curre, _restoreRef$current9;
     var container = scrollRef.current;
     if (!container || !messages.length) {
       return;
     }
+    var rememberLatestEdge = function rememberLatestEdge() {
+      lastMeasuredLatestEdgeRef.current = getLatestEdgeScrollTop(container);
+    };
+    var isChannelSwitch = activeChannelIdRef.current !== null && activeChannelIdRef.current !== channel.id;
+    var hasCurrentBootKey = ((_lastBootKeyRef$curre = lastBootKeyRef.current) === null || _lastBootKeyRef$curre === void 0 ? void 0 : _lastBootKeyRef$curre.startsWith(channel.id + ":")) || false;
     if (((_restoreRef$current9 = restoreRef.current) === null || _restoreRef$current9 === void 0 ? void 0 : _restoreRef$current9.mode) === 'restore-scroll-top') {
       var savedScrollTop = restoreRef.current.scrollTop;
-      if (!lastBootKeyRef.current) {
+      if (!hasCurrentBootKey) {
         lastBootKeyRef.current = channel.id + ":" + getMessageLocalRef(messages[0]);
       }
       restoreRef.current = null;
@@ -45307,19 +45317,27 @@ function useChatController(_ref5) {
       setIsViewingLatest(false);
       var maxScrollTop = getMaxScrollTop(container);
       setScrollTop(container, Math.min(savedScrollTop, maxScrollTop), 'auto');
+      rememberLatestEdge();
       return;
     }
-    if (!lastBootKeyRef.current) {
+    if (!hasCurrentBootKey) {
       lastBootKeyRef.current = channel.id + ":" + getMessageLocalRef(messages[0]);
       var preservePendingHistoryEdge = pendingEdgeCheckAfterLoadRef.current && activeEdgeIntentRef.current === 'previous';
       restoreRef.current = unreadScrollTo && unreadMessageId ? {
         mode: 'reveal-unread-separator'
-      } : preservePendingHistoryEdge ? null : isScrollInteractionActive() ? null : {
+      } : preservePendingHistoryEdge ? null : isChannelSwitch ? {
+        mode: 'to-bottom'
+      } : isScrollInteractionActive() ? null : {
         mode: 'to-bottom'
       };
     }
     var restoreState = restoreRef.current;
     if (!restoreState) {
+      var wasPinnedToPreviousLatestEdge = Math.abs(container.scrollTop - lastMeasuredLatestEdgeRef.current) <= PRELOAD_TRIGGER_PX;
+      if ((viewIsAtLatestRef.current || wasPinnedToPreviousLatestEdge) && !hasNext) {
+        scrollToLatestEdge(container, 'auto');
+      }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'reveal-message') {
@@ -45348,6 +45366,7 @@ function useChatController(_ref5) {
         jumpObserverRef.current = observer;
         observer.observe(target);
       }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'reveal-unread-separator') {
@@ -45364,6 +45383,7 @@ function useChatController(_ref5) {
       } else {
         return;
       }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'to-bottom') {
@@ -45371,6 +45391,7 @@ function useChatController(_ref5) {
       viewIsAtLatestRef.current = true;
       setIsViewingLatest(true);
       scrollToLatestEdge(container, 'auto');
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'to-bottom-smooth') {
@@ -45378,6 +45399,7 @@ function useChatController(_ref5) {
       viewIsAtLatestRef.current = true;
       setIsViewingLatest(true);
       scrollToLatestEdge(container, 'smooth');
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'preserve-anchor-window') {
@@ -45386,6 +45408,7 @@ function useChatController(_ref5) {
         viewIsAtLatestRef.current = true;
         setIsViewingLatest(true);
         scrollToLatestEdge(container, 'auto');
+        rememberLatestEdge();
         return;
       }
       var anchorElement = getItemElement(container, restoreState.itemId);
@@ -45399,6 +45422,7 @@ function useChatController(_ref5) {
       if (offsetDelta !== 0) {
         setScrollTop(container, clampScrollTopToViewport(container, container.scrollTop + offsetDelta), 'auto');
       }
+      rememberLatestEdge();
       return;
     }
     if (restoreState.mode === 'preserve-anchor') {
@@ -45432,8 +45456,9 @@ function useChatController(_ref5) {
         var nextScrollTop = clampScrollTopToViewport(container, container.scrollTop + _offsetDelta);
         setScrollTop(container, nextScrollTop, 'auto');
       }
+      rememberLatestEdge();
     }
-  }, [channel.id, unreadMessageId, isActiveEdgeRequestCurrent, dispatch, messages, unreadScrollTo, clearJumpBlur, hasNextMessages, isScrollInteractionActive]);
+  }, [channel.id, unreadMessageId, isActiveEdgeRequestCurrent, dispatch, messages, unreadScrollTo, clearJumpBlur, hasNext, isScrollInteractionActive]);
   useEffect(function () {
     if (!unreadScrollTo || !unreadMessageId || !messages.length || unreadRestoreCompletedRef.current) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.8.7-beta.14",
+  "version": "1.8.7-beta.15",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",