stream-chat-react 11.22.0 → 12.0.0-rc.2

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

@@ -2,36 +2,34 @@ import { useMemo } from 'react';
 import { getGroupStyles, insertIntro, processMessages, } from '../../utils';
 import { useChatContext } from '../../../../context/ChatContext';
 import { useComponentContext } from '../../../../context/ComponentContext';
-export var useEnrichedMessages = function (args) {
-    var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser, reviewProcessedMessage = args.reviewProcessedMessage;
-    var client = useChatContext('useEnrichedMessages').client;
-    var HeaderComponent = useComponentContext('useEnrichedMessages').HeaderComponent;
-    var lastRead = useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
-    var enableDateSeparator = !disableDateSeparator;
-    var messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator
+export const useEnrichedMessages = (args) => {
+    const { channel, disableDateSeparator, groupStyles, headerPosition, hideDeletedMessages, hideNewMessageSeparator, messages, noGroupByUser, reviewProcessedMessage, } = args;
+    const { client } = useChatContext('useEnrichedMessages');
+    const { HeaderComponent } = useComponentContext('useEnrichedMessages');
+    const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
+    const enableDateSeparator = !disableDateSeparator;
+    let messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator
         ? messages
         : processMessages({
-            enableDateSeparator: enableDateSeparator,
-            hideDeletedMessages: hideDeletedMessages,
-            hideNewMessageSeparator: hideNewMessageSeparator,
-            lastRead: lastRead,
-            messages: messages,
-            reviewProcessedMessage: reviewProcessedMessage,
+            enableDateSeparator,
+            hideDeletedMessages,
+            hideNewMessageSeparator,
+            lastRead,
+            messages,
+            reviewProcessedMessage,
             userId: client.userID || '',
         });
     if (HeaderComponent) {
         messagesWithDates = insertIntro(messagesWithDates, headerPosition);
     }
-    var groupStylesFn = groupStyles || getGroupStyles;
-    var messageGroupStyles = useMemo(function () {
-        return messagesWithDates.reduce(function (acc, message, i) {
-            var style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser);
-            if (style)
-                acc[message.id] = style;
-            return acc;
-        }, {});
-    }, 
+    const groupStylesFn = groupStyles || getGroupStyles;
+    const messageGroupStyles = useMemo(() => messagesWithDates.reduce((acc, message, i) => {
+        const style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser);
+        if (style)
+            acc[message.id] = style;
+        return acc;
+    }, {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [messagesWithDates, noGroupByUser]);
-    return { messageGroupStyles: messageGroupStyles, messages: messagesWithDates };
+    return { messageGroupStyles, messages: messagesWithDates };
 };

package/dist/components/MessageList/hooks/MessageList/useMessageListElements.d.ts

@@ -16,4 +16,3 @@ type UseMessageListElementsProps<StreamChatGenerics extends DefaultStreamChatGen
 };
 export declare const useMessageListElements: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseMessageListElementsProps<StreamChatGenerics>) => React.ReactNode[];
 export {};
-//# sourceMappingURL=useMessageListElements.d.ts.map

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

@@ -1,35 +1,32 @@
-import { __assign } from "tslib";
 import { useMemo } from 'react';
 import { useLastReadData } from '../useLastReadData';
 import { getLastReceived } from '../../utils';
 import { useChatContext } from '../../../../context/ChatContext';
 import { useComponentContext } from '../../../../context/ComponentContext';
-export var useMessageListElements = function (props) {
-    var channelUnreadUiState = props.channelUnreadUiState, enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, renderMessages = props.renderMessages, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
-    var _a = useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
-    var components = useComponentContext('useMessageListElements');
+export const useMessageListElements = (props) => {
+    const { channelUnreadUiState, enrichedMessages, internalMessageProps, messageGroupStyles, read, renderMessages, returnAllReadData, threadList, } = props;
+    const { client, customClasses } = useChatContext('useMessageListElements');
+    const components = useComponentContext('useMessageListElements');
     // get the readData, but only for messages submitted by the user themselves
-    var readData = useLastReadData({
+    const readData = useLastReadData({
         messages: enrichedMessages,
-        read: read,
-        returnAllReadData: returnAllReadData,
+        read,
+        returnAllReadData,
         userID: client.userID,
     });
-    var lastReceivedMessageId = useMemo(function () { return getLastReceived(enrichedMessages); }, [
+    const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [
         enrichedMessages,
     ]);
-    var elements = useMemo(function () {
-        return renderMessages({
-            channelUnreadUiState: channelUnreadUiState,
-            components: components,
-            customClasses: customClasses,
-            lastReceivedMessageId: lastReceivedMessageId,
-            messageGroupStyles: messageGroupStyles,
-            messages: enrichedMessages,
-            readData: readData,
-            sharedMessageProps: __assign(__assign({}, internalMessageProps), { threadList: threadList }),
-        });
-    }, 
+    const elements = useMemo(() => renderMessages({
+        channelUnreadUiState,
+        components,
+        customClasses,
+        lastReceivedMessageId,
+        messageGroupStyles,
+        messages: enrichedMessages,
+        readData,
+        sharedMessageProps: { ...internalMessageProps, threadList },
+    }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         enrichedMessages,

package/dist/components/MessageList/hooks/MessageList/useMessageListScrollManager.d.ts

@@ -14,4 +14,3 @@ export type UseMessageListScrollManagerParams<StreamChatGenerics extends Default
     showNewMessages: () => void;
 };
 export declare function useMessageListScrollManager<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseMessageListScrollManagerParams<StreamChatGenerics>): (scrollTopValue: number) => void;
-//# sourceMappingURL=useMessageListScrollManager.d.ts.map

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

@@ -2,36 +2,35 @@ import { useLayoutEffect, useRef } from 'react';
 import { useChatContext } from '../../../../context/ChatContext';
 // FIXME: change this generic name to something like useAdjustScrollPositionToListSize
 export function useMessageListScrollManager(params) {
-    var loadMoreScrollThreshold = params.loadMoreScrollThreshold, onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;
-    var client = useChatContext('useMessageListScrollManager').client;
-    var measures = useRef({
+    const { loadMoreScrollThreshold, onScrollBy, scrollContainerMeasures, scrolledUpThreshold, scrollToBottom, showNewMessages, } = params;
+    const { client } = useChatContext('useMessageListScrollManager');
+    const measures = useRef({
         offsetHeight: 0,
         scrollHeight: 0,
     });
-    var messages = useRef();
-    var scrollTop = useRef(0);
-    useLayoutEffect(function () {
-        var _a, _b, _c;
-        var prevMeasures = measures.current;
-        var prevMessages = messages.current;
-        var newMessages = params.messages;
-        var lastNewMessage = newMessages[newMessages.length - 1] || {};
-        var lastPrevMessage = prevMessages === null || prevMessages === void 0 ? void 0 : prevMessages[prevMessages.length - 1];
-        var newMeasures = scrollContainerMeasures();
-        var wasAtBottom = prevMeasures.scrollHeight - prevMeasures.offsetHeight - scrollTop.current <
+    const messages = useRef();
+    const scrollTop = useRef(0);
+    useLayoutEffect(() => {
+        const prevMeasures = measures.current;
+        const prevMessages = messages.current;
+        const newMessages = params.messages;
+        const lastNewMessage = newMessages[newMessages.length - 1] || {};
+        const lastPrevMessage = prevMessages?.[prevMessages.length - 1];
+        const newMeasures = scrollContainerMeasures();
+        const wasAtBottom = prevMeasures.scrollHeight - prevMeasures.offsetHeight - scrollTop.current <
             scrolledUpThreshold;
         if (typeof prevMessages !== 'undefined') {
             if (prevMessages.length < newMessages.length) {
                 // messages added to the top
-                if ((lastPrevMessage === null || lastPrevMessage === void 0 ? void 0 : lastPrevMessage.id) === lastNewMessage.id) {
+                if (lastPrevMessage?.id === lastNewMessage.id) {
                     if (scrollTop.current < loadMoreScrollThreshold) {
-                        var listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;
+                        const listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;
                         onScrollBy(listHeightDelta);
                     }
                 }
                 // messages added to the bottom
                 else {
-                    var lastMessageIsFromCurrentUser = ((_a = lastNewMessage.user) === null || _a === void 0 ? void 0 : _a.id) === client.userID;
+                    const lastMessageIsFromCurrentUser = lastNewMessage.user?.id === client.userID;
                     if (lastMessageIsFromCurrentUser || wasAtBottom) {
                         scrollToBottom();
                     }
@@ -42,8 +41,8 @@ export function useMessageListScrollManager(params) {
             }
             // message list length didn't change, but check if last message had reaction/reply update
             else {
-                var hasNewReactions = ((_b = lastPrevMessage === null || lastPrevMessage === void 0 ? void 0 : lastPrevMessage.latest_reactions) === null || _b === void 0 ? void 0 : _b.length) !== ((_c = lastNewMessage.latest_reactions) === null || _c === void 0 ? void 0 : _c.length);
-                var hasNewReplies = (lastPrevMessage === null || lastPrevMessage === void 0 ? void 0 : lastPrevMessage.reply_count) !== lastNewMessage.reply_count;
+                const hasNewReactions = lastPrevMessage?.latest_reactions?.length !== lastNewMessage.latest_reactions?.length;
+                const hasNewReplies = lastPrevMessage?.reply_count !== lastNewMessage.reply_count;
                 if ((hasNewReactions || hasNewReplies) && wasAtBottom) {
                     scrollToBottom();
                 }
@@ -53,7 +52,7 @@ export function useMessageListScrollManager(params) {
         measures.current = newMeasures;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [measures, messages, params.messages]);
-    return function (scrollTopValue) {
+    return (scrollTopValue) => {
         scrollTop.current = scrollTopValue;
     };
 }

package/dist/components/MessageList/hooks/MessageList/useScrollLocationLogic.d.ts

@@ -16,4 +16,3 @@ export declare const useScrollLocationLogic: <StreamChatGenerics extends Default
     scrollToBottom: () => void;
     wrapperRect: DOMRect | undefined;
 };
-//# sourceMappingURL=useScrollLocationLogic.d.ts.map

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

@@ -1,14 +1,14 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useMessageListScrollManager } from './useMessageListScrollManager';
-export var useScrollLocationLogic = function (params) {
-    var loadMoreScrollThreshold = params.loadMoreScrollThreshold, _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement;
-    var _c = useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
-    var _d = useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
-    var _e = useState(true), isMessageListScrolledToBottom = _e[0], setIsMessageListScrolledToBottom = _e[1];
-    var closeToBottom = useRef(false);
-    var closeToTop = useRef(false);
-    var scrollToBottom = useCallback(function () {
-        if (!(listElement === null || listElement === void 0 ? void 0 : listElement.scrollTo) || hasMoreNewer || suppressAutoscroll) {
+export const useScrollLocationLogic = (params) => {
+    const { loadMoreScrollThreshold, messages = [], scrolledUpThreshold = 200, hasMoreNewer, suppressAutoscroll, listElement, } = params;
+    const [hasNewMessages, setHasNewMessages] = useState(false);
+    const [wrapperRect, setWrapperRect] = useState();
+    const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
+    const closeToBottom = useRef(false);
+    const closeToTop = useRef(false);
+    const scrollToBottom = useCallback(() => {
+        if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {
             return;
         }
         listElement.scrollTo({
@@ -16,34 +16,34 @@ export var useScrollLocationLogic = function (params) {
         });
         setHasNewMessages(false);
     }, [listElement, hasMoreNewer, suppressAutoscroll]);
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
         if (listElement) {
             setWrapperRect(listElement.getBoundingClientRect());
             scrollToBottom();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [listElement, hasMoreNewer]);
-    var updateScrollTop = useMessageListScrollManager({
-        loadMoreScrollThreshold: loadMoreScrollThreshold,
-        messages: messages,
-        onScrollBy: function (scrollBy) {
-            listElement === null || listElement === void 0 ? void 0 : listElement.scrollBy({ top: scrollBy });
+    const updateScrollTop = useMessageListScrollManager({
+        loadMoreScrollThreshold,
+        messages,
+        onScrollBy: (scrollBy) => {
+            listElement?.scrollBy({ top: scrollBy });
         },
-        scrollContainerMeasures: function () { return ({
-            offsetHeight: (listElement === null || listElement === void 0 ? void 0 : listElement.offsetHeight) || 0,
-            scrollHeight: (listElement === null || listElement === void 0 ? void 0 : listElement.scrollHeight) || 0,
-        }); },
-        scrolledUpThreshold: scrolledUpThreshold,
-        scrollToBottom: scrollToBottom,
-        showNewMessages: function () { return setHasNewMessages(true); },
+        scrollContainerMeasures: () => ({
+            offsetHeight: listElement?.offsetHeight || 0,
+            scrollHeight: listElement?.scrollHeight || 0,
+        }),
+        scrolledUpThreshold,
+        scrollToBottom,
+        showNewMessages: () => setHasNewMessages(true),
     });
-    var onScroll = useCallback(function (event) {
-        var element = event.target;
-        var scrollTop = element.scrollTop;
+    const onScroll = useCallback((event) => {
+        const element = event.target;
+        const scrollTop = element.scrollTop;
         updateScrollTop(scrollTop);
-        var offsetHeight = element.offsetHeight;
-        var scrollHeight = element.scrollHeight;
-        var prevCloseToBottom = closeToBottom.current;
+        const offsetHeight = element.offsetHeight;
+        const scrollHeight = element.scrollHeight;
+        const prevCloseToBottom = closeToBottom.current;
         closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
         closeToTop.current = scrollTop < scrolledUpThreshold;
         if (closeToBottom.current) {
@@ -57,10 +57,10 @@ export var useScrollLocationLogic = function (params) {
         }
     }, [updateScrollTop, closeToTop, closeToBottom, scrolledUpThreshold]);
     return {
-        hasNewMessages: hasNewMessages,
-        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
-        onScroll: onScroll,
-        scrollToBottom: scrollToBottom,
-        wrapperRect: wrapperRect,
+        hasNewMessages,
+        isMessageListScrolledToBottom,
+        onScroll,
+        scrollToBottom,
+        wrapperRect,
     };
 };

package/dist/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.d.ts

@@ -6,4 +6,3 @@ export type UseUnreadMessagesNotificationParams = {
 export declare const useUnreadMessagesNotification: ({ isMessageListScrolledToBottom, showAlways, unreadCount, }: UseUnreadMessagesNotificationParams) => {
     show: boolean;
 };
-//# sourceMappingURL=useUnreadMessagesNotification.d.ts.map

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

@@ -2,51 +2,50 @@ import { useChannelStateContext } from '../../../../context';
 import { useEffect, useRef, useState } from 'react';
 import { MESSAGE_LIST_MAIN_PANEL_CLASS } from '../../MessageListMainPanel';
 import { UNREAD_MESSAGE_SEPARATOR_CLASS } from '../../UnreadMessagesSeparator';
-var targetScrolledAboveVisibleContainerArea = function (element) {
-    var targetBottom = element.getBoundingClientRect().bottom;
+const targetScrolledAboveVisibleContainerArea = (element) => {
+    const { bottom: targetBottom } = element.getBoundingClientRect();
     return targetBottom < 0;
 };
-var targetScrolledBelowVisibleContainerArea = function (element, container) {
-    var targetTop = element.getBoundingClientRect().top;
-    var containerBottom = container.getBoundingClientRect().top;
+const targetScrolledBelowVisibleContainerArea = (element, container) => {
+    const { top: targetTop } = element.getBoundingClientRect();
+    const { top: containerBottom } = container.getBoundingClientRect();
     return targetTop > containerBottom;
 };
-export var useUnreadMessagesNotification = function (_a) {
-    var isMessageListScrolledToBottom = _a.isMessageListScrolledToBottom, showAlways = _a.showAlways, unreadCount = _a.unreadCount;
-    var messages = useChannelStateContext('UnreadMessagesNotification').messages;
-    var _b = useState(false), show = _b[0], setShow = _b[1];
-    var isScrolledAboveTargetTop = useRef(false);
-    var intersectionObserverIsSupported = typeof IntersectionObserver !== 'undefined';
-    useEffect(function () {
+export const useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, showAlways, unreadCount, }) => {
+    const { messages } = useChannelStateContext('UnreadMessagesNotification');
+    const [show, setShow] = useState(false);
+    const isScrolledAboveTargetTop = useRef(false);
+    const intersectionObserverIsSupported = typeof IntersectionObserver !== 'undefined';
+    useEffect(() => {
         if (!(unreadCount && intersectionObserverIsSupported)) {
             setShow(false);
             return;
         }
-        var msgListPanel = document.querySelector(".".concat(MESSAGE_LIST_MAIN_PANEL_CLASS));
+        const msgListPanel = document.querySelector(`.${MESSAGE_LIST_MAIN_PANEL_CLASS}`);
         if (!msgListPanel)
             return;
-        var observedTarget = document.querySelector(".".concat(UNREAD_MESSAGE_SEPARATOR_CLASS));
+        const observedTarget = document.querySelector(`.${UNREAD_MESSAGE_SEPARATOR_CLASS}`);
         if (!observedTarget) {
             setShow(true);
             return;
         }
-        var scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(observedTarget);
-        var scrolledAboveSeparator = targetScrolledBelowVisibleContainerArea(observedTarget, msgListPanel);
+        const scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(observedTarget);
+        const scrolledAboveSeparator = targetScrolledBelowVisibleContainerArea(observedTarget, msgListPanel);
         setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
-        var observer = new IntersectionObserver(function (elements) {
+        const observer = new IntersectionObserver((elements) => {
             if (!elements.length)
                 return;
-            var _a = elements[0], boundingClientRect = _a.boundingClientRect, isIntersecting = _a.isIntersecting;
+            const { boundingClientRect, isIntersecting } = elements[0];
             if (isIntersecting) {
                 setShow(false);
                 return;
             }
-            var separatorIsAboveContainerTop = boundingClientRect.bottom < 0;
+            const separatorIsAboveContainerTop = boundingClientRect.bottom < 0;
             setShow(showAlways || separatorIsAboveContainerTop);
             isScrolledAboveTargetTop.current = separatorIsAboveContainerTop;
         }, { root: msgListPanel });
         observer.observe(observedTarget);
-        return function () {
+        return () => {
             observer.disconnect();
         };
     }, [
@@ -56,7 +55,7 @@ export var useUnreadMessagesNotification = function (_a) {
         showAlways,
         unreadCount,
     ]);
-    useEffect(function () {
+    useEffect(() => {
         /**
          * Handle situation when scrollToBottom is called from another component when the msg list is scrolled above the observed target (unread separator).
          * The intersection observer is not triggered when Element.scrollTo() is called. So we end up in a situation when we are scrolled to the bottom

package/dist/components/MessageList/hooks/VirtualizedMessageList/index.d.ts

@@ -5,4 +5,3 @@ export * from './usePrependMessagesCount';
 export * from './useScrollToBottomOnNewMessage';
 export * from './useShouldForceScrollToBottom';
 export * from './useUnreadMessagesNotificationVirtualized';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.d.ts

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare const useGiphyPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(separateGiphyPreview: boolean) => {
     giphyPreviewMessage: StreamMessage<StreamChatGenerics> | undefined;
     setGiphyPreviewMessage: import("react").Dispatch<import("react").SetStateAction<StreamMessage<StreamChatGenerics> | undefined>> | undefined;
 };
-//# sourceMappingURL=useGiphyPreview.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.js

@@ -1,21 +1,21 @@
 import { useEffect, useState } from 'react';
 import { useChatContext } from '../../../../context/ChatContext';
-export var useGiphyPreview = function (separateGiphyPreview) {
-    var _a = useState(), giphyPreviewMessage = _a[0], setGiphyPreviewMessage = _a[1];
-    var client = useChatContext('useGiphyPreview').client;
-    useEffect(function () {
-        var handleEvent = function (event) {
-            var message = event.message, user = event.user;
-            if ((message === null || message === void 0 ? void 0 : message.command) === 'giphy' && (user === null || user === void 0 ? void 0 : user.id) === client.userID) {
+export const useGiphyPreview = (separateGiphyPreview) => {
+    const [giphyPreviewMessage, setGiphyPreviewMessage] = useState();
+    const { client } = useChatContext('useGiphyPreview');
+    useEffect(() => {
+        const handleEvent = (event) => {
+            const { message, user } = event;
+            if (message?.command === 'giphy' && user?.id === client.userID) {
                 setGiphyPreviewMessage(undefined);
             }
         };
         if (separateGiphyPreview)
             client.on('message.new', handleEvent);
-        return function () { return client.off('message.new', handleEvent); };
+        return () => client.off('message.new', handleEvent);
     }, [client, separateGiphyPreview]);
     return {
-        giphyPreviewMessage: giphyPreviewMessage,
+        giphyPreviewMessage,
         setGiphyPreviewMessage: separateGiphyPreview ? setGiphyPreviewMessage : undefined,
     };
 };

package/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.d.ts

@@ -7,4 +7,3 @@ export declare const useMessageSetKey: <StreamChatGenerics extends DefaultStream
     messageSetKey: number;
 };
 export {};
-//# sourceMappingURL=useMessageSetKey.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.js

@@ -1,20 +1,18 @@
 import { useEffect, useRef, useState } from 'react';
-export var useMessageSetKey = function (_a) {
-    var messages = _a.messages;
+export const useMessageSetKey = ({ messages, }) => {
     /**
      * Logic to update the key of the virtuoso component when the list jumps to a new location.
      */
-    var _b = useState(+new Date()), messageSetKey = _b[0], setMessageSetKey = _b[1];
-    var firstMessageId = useRef();
-    useEffect(function () {
-        var _a;
-        var continuousSet = messages === null || messages === void 0 ? void 0 : messages.find(function (message) { return message.id === firstMessageId.current; });
+    const [messageSetKey, setMessageSetKey] = useState(+new Date());
+    const firstMessageId = useRef();
+    useEffect(() => {
+        const continuousSet = messages?.find((message) => message.id === firstMessageId.current);
         if (!continuousSet) {
             setMessageSetKey(+new Date());
         }
-        firstMessageId.current = (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.id;
+        firstMessageId.current = messages?.[0]?.id;
     }, [messages]);
     return {
-        messageSetKey: messageSetKey,
+        messageSetKey,
     };
 };

package/dist/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare function useNewMessageNotification<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId: string | undefined, hasMoreNewer?: boolean): {
@@ -7,4 +8,3 @@ export declare function useNewMessageNotification<StreamChatGenerics extends Def
     setIsMessageListScrolledToBottom: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     setNewMessagesNotification: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
-//# sourceMappingURL=useNewMessageNotification.d.ts.map

package/dist/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.js

@@ -1,24 +1,23 @@
 import { useEffect, useRef, useState } from 'react';
 export function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
-    var _a = useState(false), newMessagesNotification = _a[0], setNewMessagesNotification = _a[1];
-    var _b = useState(true), isMessageListScrolledToBottom = _b[0], setIsMessageListScrolledToBottom = _b[1];
+    const [newMessagesNotification, setNewMessagesNotification] = useState(false);
+    const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
     /**
      * use the flag to avoid the initial "new messages" quick blink
      */
-    var didMount = useRef(false);
-    var lastMessageId = useRef('');
-    var atBottom = useRef(false);
-    useEffect(function () {
-        var _a;
+    const didMount = useRef(false);
+    const lastMessageId = useRef('');
+    const atBottom = useRef(false);
+    useEffect(() => {
         if (hasMoreNewer) {
             setNewMessagesNotification(true);
             return;
         }
         /* handle scrolling behavior for new messages */
-        if (!(messages === null || messages === void 0 ? void 0 : messages.length))
+        if (!messages?.length)
             return;
-        var lastMessage = messages[messages.length - 1];
-        var prevMessageId = lastMessageId.current;
+        const lastMessage = messages[messages.length - 1];
+        const prevMessageId = lastMessageId.current;
         lastMessageId.current = lastMessage.id || ''; // update last message id
         /* do nothing if new messages are loaded from top(loadMore)  */
         if (lastMessage.id === prevMessageId)
@@ -27,17 +26,17 @@ export function useNewMessageNotification(messages, currentUserId, hasMoreNewer)
         if (atBottom.current)
             return;
         /* if the new message belongs to current user scroll to bottom */
-        if (((_a = lastMessage.user) === null || _a === void 0 ? void 0 : _a.id) !== currentUserId && didMount.current) {
+        if (lastMessage.user?.id !== currentUserId && didMount.current) {
             /* otherwise just show newMessage notification  */
             setNewMessagesNotification(true);
         }
         didMount.current = true;
     }, [currentUserId, messages, hasMoreNewer]);
     return {
-        atBottom: atBottom,
-        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
-        newMessagesNotification: newMessagesNotification,
-        setIsMessageListScrolledToBottom: setIsMessageListScrolledToBottom,
-        setNewMessagesNotification: setNewMessagesNotification,
+        atBottom,
+        isMessageListScrolledToBottom,
+        newMessagesNotification,
+        setIsMessageListScrolledToBottom,
+        setNewMessagesNotification,
     };
 }

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

@@ -1,4 +1,3 @@
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 export declare function usePrependedMessagesCount<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], hasDateSeparator: boolean): number;
-//# sourceMappingURL=usePrependMessagesCount.d.ts.map

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

@@ -1,21 +1,20 @@
 import { useMemo, useRef } from 'react';
-var STATUSES_EXCLUDED_FROM_PREPEND = {
+const STATUSES_EXCLUDED_FROM_PREPEND = {
     failed: true,
     sending: true,
 };
 export function usePrependedMessagesCount(messages, hasDateSeparator) {
-    var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-    var firstMessageOnFirstLoadedPage = useRef();
-    var previousFirstMessageOnFirstLoadedPage = useRef();
-    var previousNumItemsPrepended = useRef(0);
-    var numItemsPrepended = useMemo(function () {
-        var _a, _b;
+    const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
+    const firstMessageOnFirstLoadedPage = useRef();
+    const previousFirstMessageOnFirstLoadedPage = useRef();
+    const previousNumItemsPrepended = useRef(0);
+    const numItemsPrepended = useMemo(() => {
         if (!messages || !messages.length) {
             previousNumItemsPrepended.current = 0;
             return 0;
         }
-        var currentFirstMessage = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex];
-        var noNewMessages = (currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.id) === ((_a = previousFirstMessageOnFirstLoadedPage.current) === null || _a === void 0 ? void 0 : _a.id);
+        const currentFirstMessage = messages?.[firstRealMessageIndex];
+        const noNewMessages = currentFirstMessage?.id === previousFirstMessageOnFirstLoadedPage.current?.id;
         // This is possible only, when sending messages very quickly (basically single char messages submitted like a crazy) in empty channel (first page)
         // 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
@@ -27,7 +26,7 @@ export function usePrependedMessagesCount(messages, hasDateSeparator) {
         // 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.
-        var firstMsgMovedAfterMessagesInExcludedStatus = !!((currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.status) && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status]);
+        const firstMsgMovedAfterMessagesInExcludedStatus = !!(currentFirstMessage?.status && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status]);
         if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
             return previousNumItemsPrepended.current;
         }
@@ -37,8 +36,8 @@ export function usePrependedMessagesCount(messages, hasDateSeparator) {
         previousFirstMessageOnFirstLoadedPage.current = currentFirstMessage;
         // if new messages were prepended, find out how many
         // start with this number because there cannot be fewer prepended items than before
-        for (var prependedMessageCount = previousNumItemsPrepended.current; prependedMessageCount < messages.length; prependedMessageCount += 1) {
-            var messageIsFirstOnFirstLoadedPage = messages[prependedMessageCount].id === ((_b = firstMessageOnFirstLoadedPage.current) === null || _b === void 0 ? void 0 : _b.id);
+        for (let prependedMessageCount = previousNumItemsPrepended.current; prependedMessageCount < messages.length; prependedMessageCount += 1) {
+            const messageIsFirstOnFirstLoadedPage = messages[prependedMessageCount].id === firstMessageOnFirstLoadedPage.current?.id;
             if (messageIsFirstOnFirstLoadedPage) {
                 previousNumItemsPrepended.current = prependedMessageCount - firstRealMessageIndex;
                 return previousNumItemsPrepended.current;
@@ -51,6 +50,6 @@ export function usePrependedMessagesCount(messages, hasDateSeparator) {
         // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
         // that's why the second dependency is necessary
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [firstRealMessageIndex, messages, messages === null || messages === void 0 ? void 0 : messages.length]);
+    }, [firstRealMessageIndex, messages, messages?.length]);
     return numItemsPrepended;
 }

package/dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.d.ts

@@ -9,4 +9,3 @@ type UseScrollToBottomOnNewMessageParams<StreamChatGenerics extends DefaultStrea
 };
 export declare const useScrollToBottomOnNewMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }: UseScrollToBottomOnNewMessageParams<StreamChatGenerics>) => void;
 export {};
-//# sourceMappingURL=useScrollToBottomOnNewMessage.d.ts.map