stream-chat-react 10.7.2 → 10.7.3

package/dist/components/MessageList/hooks/usePrependMessagesCount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePrependMessagesCount.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/usePrependMessagesCount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAAE,gBAAgB,EAAE,OAAO,UAwCzE"}
+{"version":3,"file":"usePrependMessagesCount.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/hooks/usePrependMessagesCount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAItE,wBAAgB,yBAAyB,CACvC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,EAAE,gBAAgB,EAAE,OAAO,UA2DzE"}

package/dist/components/MessageList/hooks/usePrependMessagesCount.js

@@ -1,11 +1,12 @@
 import { useMemo, useRef } from 'react';
+var STATUSES_EXCLUDED_FROM_PREPEND = ['sending', 'failed'];
 export function usePrependedMessagesCount(messages, hasDateSeparator) {
     var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
     var firstMessageId = useRef();
     var earliestMessageId = useRef();
     var previousNumItemsPrepended = useRef(0);
     var numItemsPrepended = useMemo(function () {
-        var _a;
+        var _a, _b;
         if (!messages || !messages.length) {
             previousNumItemsPrepended.current = 0;
             return 0;
@@ -21,13 +22,30 @@ export function usePrependedMessagesCount(messages, hasDateSeparator) {
         earliestMessageId.current = currentFirstMessageId;
         // if new messages were prepended, find out how many
         // start with this number because there cannot be fewer prepended items than before
+        var adjustPrependedMessageCount = 0;
         for (var i = previousNumItemsPrepended.current; i < messages.length; i += 1) {
+            // Optimistic UI update, when sending messages, can lead to a situation, when
+            // the order of the messages changes for a moment. This can happen, when a user
+            // sends multiple messages withing few milliseconds. E.g. we send a message A
+            // then message B. At first we have message array with both messages of status "sending"
+            // then response for message A is received with a new - later - created_at timestamp
+            // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageId.current
+            // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
+            // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
+            // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
+            // not considered as prepended messages.
+            if (((_b = messages[i]) === null || _b === void 0 ? void 0 : _b.status) &&
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                STATUSES_EXCLUDED_FROM_PREPEND.includes(messages[i].status) &&
+                messages[i].id !== firstMessageId.current) {
+                adjustPrependedMessageCount++;
+            }
             if (messages[i].id === firstMessageId.current) {
-                previousNumItemsPrepended.current = i;
-                return i;
+                previousNumItemsPrepended.current = i - adjustPrependedMessageCount;
+                return previousNumItemsPrepended.current;
             }
         }
-        // if no match has found, we have jumped - reset the prepend item count.
+        // if no match has found, we have jumped - reset the prepended item count.
         firstMessageId.current = currentFirstMessageId;
         previousNumItemsPrepended.current = 0;
         return 0;

package/dist/index.cjs.js

@@ -33670,7 +33670,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.7.2';
+var version = '10.7.3';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -35260,13 +35260,14 @@ function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
     };
 }
 
+var STATUSES_EXCLUDED_FROM_PREPEND = ['sending', 'failed'];
 function usePrependedMessagesCount(messages, hasDateSeparator) {
     var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
     var firstMessageId = React.useRef();
     var earliestMessageId = React.useRef();
     var previousNumItemsPrepended = React.useRef(0);
     var numItemsPrepended = React.useMemo(function () {
-        var _a;
+        var _a, _b;
         if (!messages || !messages.length) {
             previousNumItemsPrepended.current = 0;
             return 0;
@@ -35282,13 +35283,30 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
         earliestMessageId.current = currentFirstMessageId;
         // if new messages were prepended, find out how many
         // start with this number because there cannot be fewer prepended items than before
+        var adjustPrependedMessageCount = 0;
         for (var i = previousNumItemsPrepended.current; i < messages.length; i += 1) {
+            // Optimistic UI update, when sending messages, can lead to a situation, when
+            // the order of the messages changes for a moment. This can happen, when a user
+            // sends multiple messages withing few milliseconds. E.g. we send a message A
+            // then message B. At first we have message array with both messages of status "sending"
+            // then response for message A is received with a new - later - created_at timestamp
+            // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageId.current
+            // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
+            // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
+            // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
+            // not considered as prepended messages.
+            if (((_b = messages[i]) === null || _b === void 0 ? void 0 : _b.status) &&
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                STATUSES_EXCLUDED_FROM_PREPEND.includes(messages[i].status) &&
+                messages[i].id !== firstMessageId.current) {
+                adjustPrependedMessageCount++;
+            }
             if (messages[i].id === firstMessageId.current) {
-                previousNumItemsPrepended.current = i;
-                return i;
+                previousNumItemsPrepended.current = i - adjustPrependedMessageCount;
+                return previousNumItemsPrepended.current;
             }
         }
-        // if no match has found, we have jumped - reset the prepend item count.
+        // if no match has found, we have jumped - reset the prepended item count.
         firstMessageId.current = currentFirstMessageId;
         previousNumItemsPrepended.current = 0;
         return 0;