stream-chat-react 11.12.0 → 11.12.2

package/dist/components/MessageList/renderMessages.js

@@ -1,35 +1,57 @@
 import { __assign } from "tslib";
 import React, { Fragment } from 'react';
-import { isDate } from '../../context';
+import { isDateSeparatorMessage } from './utils';
+import { Message } from '../Message';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import { Message } from '../Message/Message';
 export function defaultRenderMessages(_a) {
     var channelUnreadUiState = _a.channelUnreadUiState, components = _a.components, customClasses = _a.customClasses, lastReceivedId = _a.lastReceivedMessageId, messageGroupStyles = _a.messageGroupStyles, messages = _a.messages, readData = _a.readData, messageProps = _a.sharedMessageProps;
     var DateSeparator = components.DateSeparator, HeaderComponent = components.HeaderComponent, MessageSystem = components.MessageSystem, UnreadMessagesSeparator = components.UnreadMessagesSeparator;
-    return messages.map(function (message, index) {
-        if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
-            return (React.createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
+    var renderedMessages = [];
+    var firstMessage;
+    for (var index = 0; index < messages.length; index++) {
+        var message = messages[index];
+        if (isDateSeparatorMessage(message)) {
+            renderedMessages.push(React.createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
                 React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
         }
-        if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-            return (React.createElement("li", { key: 'intro' },
+        else if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
+            renderedMessages.push(React.createElement("li", { key: 'intro' },
                 React.createElement(HeaderComponent, null)));
         }
-        if (message.type === 'system') {
-            return (React.createElement("li", { key: message.id || message.created_at },
+        else if (message.type === 'system') {
+            renderedMessages.push(React.createElement("li", { key: message.id || message.created_at },
                 React.createElement(MessageSystem, { message: message })));
         }
-        var groupStyles = messageGroupStyles[message.id] || '';
-        var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
-        var isNewestMessage = index === messages.length - 1;
-        var isLastReadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) === message.id;
-        var showUnreadSeparator = isLastReadMessage &&
-            !isNewestMessage &&
-            ((channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) || (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) > 0); // unread count can be 0 if the user marks unread only own messages
-        return (React.createElement(Fragment, { key: message.id || message.created_at },
-            React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
-                React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))),
-            showUnreadSeparator && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
-                React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState.unread_messages })))));
-    });
+        else {
+            if (!firstMessage) {
+                firstMessage = message;
+            }
+            var groupStyles = messageGroupStyles[message.id] || '';
+            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
+            var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+            var lastReadTimestamp = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read.getTime();
+            var isFirstMessage = (firstMessage === null || firstMessage === void 0 ? void 0 : firstMessage.id) && firstMessage.id === message.id;
+            var isNewestMessage = index === messages.length - 1;
+            var isLastReadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) === message.id ||
+                (!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) && createdAtTimestamp === lastReadTimestamp);
+            var isFirstUnreadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) === message.id ||
+                (!!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) &&
+                    !!createdAtTimestamp &&
+                    !!lastReadTimestamp &&
+                    createdAtTimestamp > lastReadTimestamp &&
+                    isFirstMessage);
+            var showUnreadSeparatorAbove = !(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) && isFirstUnreadMessage;
+            var showUnreadSeparatorBelow = isLastReadMessage &&
+                !isNewestMessage &&
+                ((channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) || !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages)); // this part has to be here as we do not mark channel read when sending a message
+            renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at },
+                showUnreadSeparatorAbove && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages }))),
+                React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
+                    React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))),
+                showUnreadSeparatorBelow && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })))));
+        }
+    }
+    return renderedMessages;
 }

package/dist/components/MessageList/utils.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { UserResponse } from 'stream-chat';
+import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
+import type { MessageLabel, UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 type ProcessMessagesParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -44,5 +45,13 @@ export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 export declare const getGroupStyles: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
 export declare const hasMoreMessagesProbably: (returnedCountMessages: number, limit: number) => boolean;
 export declare const hasNotMoreMessages: (returnedCountMessages: number, limit: number) => boolean;
+type DateSeparatorMessage = {
+    customType: typeof CUSTOM_MESSAGE_TYPE.date;
+    date: Date;
+    id: string;
+    type: MessageLabel;
+    unread: boolean;
+};
+export declare function isDateSeparatorMessage<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>): message is DateSeparatorMessage;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/MessageList/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGvE,KAAK,qBAAqB,CACxB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,+FAA+F;IAC/F,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CACrC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CACpE,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,8KAuF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,IAAI,WAQrD,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,qJAIL,MAAM,wCAgDxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UA2CF,CAAC;AAOF,eAAO,MAAM,uBAAuB,0BAA2B,MAAM,SAAS,MAAM,YACpD,CAAC;AAGjC,eAAO,MAAM,kBAAkB,0BAA2B,MAAM,SAAS,MAAM,YAChD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAInE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGvE,KAAK,qBAAqB,CACxB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,+FAA+F;IAC/F,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CACrC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CACpE,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,8KAuF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,IAAI,WAQrD,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,qJAIL,MAAM,wCAgDxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UA2CF,CAAC;AAOF,eAAO,MAAM,uBAAuB,0BAA2B,MAAM,SAAS,MAAM,YACpD,CAAC;AAGjC,eAAO,MAAM,kBAAkB,0BAA2B,MAAM,SAAS,MAAM,YAChD,CAAC;AAEhC,KAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC5C,IAAI,EAAE,IAAI,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAAG,OAAO,IAAI,oBAAoB,CAE7E"}

package/dist/components/MessageList/utils.js

@@ -226,3 +226,6 @@ export var hasMoreMessagesProbably = function (returnedCountMessages, limit) {
 export var hasNotMoreMessages = function (returnedCountMessages, limit) {
     return returnedCountMessages < limit;
 };
+export function isDateSeparatorMessage(message) {
+    return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
+}

package/dist/constants/limits.d.ts

@@ -1,5 +1,6 @@
 export declare const DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
 export declare const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
+export declare const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
 export declare const DEFAULT_THREAD_PAGE_SIZE = 50;
 export declare const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 //# sourceMappingURL=limits.d.ts.map

package/dist/constants/limits.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"limits.d.ts","sourceRoot":"","sources":["../../src/constants/limits.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAClD,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,kCAAkC,MAAM,CAAC"}
+{"version":3,"file":"limits.d.ts","sourceRoot":"","sources":["../../src/constants/limits.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAClD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,kCAAkC,MAAM,CAAC"}

package/dist/constants/limits.js

@@ -1,4 +1,5 @@
 export var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
 export var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
+export var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
 export var DEFAULT_THREAD_PAGE_SIZE = 50;
 export var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;