stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/MessageList/VirtualizedMessageList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedMessageList.mjs","names":[],"sources":["../../../../src/components/MessageList/VirtualizedMessageList.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { FloatingDateSeparator } from './FloatingDateSeparator';\nimport type {\n  ComputeItemKey,\n  ScrollSeekConfiguration,\n  ScrollSeekPlaceholderProps,\n  VirtuosoHandle,\n  VirtuosoProps,\n} from 'react-virtuoso';\nimport { Virtuoso } from 'react-virtuoso';\n\nimport { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';\nimport { useLastReadData } from './hooks';\nimport {\n  useGiphyPreview,\n  useMessageSetKey,\n  useNewMessageNotification,\n  usePrependedMessagesCount,\n  useScrollToBottomOnNewMessage,\n  useShouldForceScrollToBottom,\n  useUnreadMessagesNotificationVirtualized,\n} from './hooks/VirtualizedMessageList';\nimport { useMarkRead } from './hooks/useMarkRead';\nimport { NewMessageNotification as DefaultNewMessageNotification } from './NewMessageNotification';\nimport { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';\nimport { getGroupStyles, getLastReceived, processMessages } from './utils';\nimport type { MessageProps, MessageUIComponentProps } from '../Message';\nimport { MessageUI } from '../Message';\nimport { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';\nimport {\n  calculateFirstItemIndex,\n  calculateItemIndex,\n  EmptyPlaceholder,\n  Header,\n  Item,\n  makeItemsRenderedHandler,\n  messageRenderer,\n} from './VirtualizedMessageListComponents';\n\nimport {\n  ScrollToLatestMessageButton as DefaultScrollToLatestMessageButton,\n  UnreadMessagesSeparator as DefaultUnreadMessagesSeparator,\n} from '../MessageList';\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { EventComponent as DefaultMessageSystem } from '../EventComponent';\nimport {\n  NotificationList as DefaultNotificationList,\n  useNotificationTarget,\n} from '../Notifications';\n\nimport { DialogManagerProvider } from '../../context';\nimport type { ChannelActionContextValue } from '../../context/ChannelActionContext';\nimport { useChannelActionContext } from '../../context/ChannelActionContext';\nimport type {\n  ChannelNotifications,\n  ChannelStateContextValue,\n} from '../../context/ChannelStateContext';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport type { ChatContextValue } from '../../context/ChatContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport type { ComponentContextValue } from '../../context/ComponentContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageTranslationViewProvider } from '../../context/MessageTranslationViewContext';\nimport { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';\n\nimport type {\n  Channel,\n  LocalMessage,\n  ChannelState as StreamChannelState,\n  UserResponse,\n} from 'stream-chat';\nimport type { UnknownType } from '../../types/types';\nimport { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { useLastDeliveredData } from './hooks/useLastDeliveredData';\nimport { useLastOwnMessage } from './hooks/useLastOwnMessage';\nimport { useReducedMotionPreference } from './hooks/useReducedMotionPreference';\nimport { useIncomingMessageAnnouncements } from '../Accessibility';\n\ntype PropsDrilledToMessage =\n  | 'additionalMessageComposerProps'\n  | 'formatDate'\n  | 'messageActions'\n  | 'openThread'\n  | 'reactionDetailsSort'\n  | 'renderText'\n  | 'showAvatar'\n  | 'sortReactions';\n\ntype VirtualizedMessageListPropsForContext =\n  | PropsDrilledToMessage\n  | 'closeReactionSelectorOnClick'\n  | 'customMessageRenderer'\n  | 'head'\n  | 'loadingMore'\n  | 'Message'\n  | 'returnAllReadData'\n  | 'shouldGroupByUser'\n  | 'threadList';\n\n/**\n * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)\n */\nexport type VirtuosoContext = Required<\n  Pick<\n    ComponentContextValue,\n    'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'\n  >\n> &\n  Pick<VirtualizedMessageListProps, VirtualizedMessageListPropsForContext> &\n  Pick<ChatContextValue, 'customClasses'> & {\n    /** Latest received message id in the current channel */\n    lastReceivedMessageId: string | null | undefined;\n    /** Object mapping between the message ID and a string representing the position in the group of a sequence of messages posted by the same user. */\n    messageGroupStyles: Record<string, GroupStyle>;\n    /** Number of messages prepended before the first page of messages. This is needed to calculate the virtual position in the virtual list. */\n    numItemsPrepended: number;\n    /** Mapping of message ID of own messages to the array of users, who were delivered the given message */\n    ownMessagesDeliveredToOthers: Record<string, UserResponse[]>;\n    /** Mapping of message ID of own messages to the array of users, who read the given message */\n    ownMessagesReadByOthers: Record<string, UserResponse[]>;\n    /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */\n    processedMessages: RenderedMessage[];\n    /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */\n    virtuosoRef: RefObject<VirtuosoHandle | null>;\n    /** Latest own message in currently displayed message set. */\n    lastOwnMessage?: LocalMessage;\n    /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */\n    firstUnreadMessageId?: string;\n    lastReadDate?: Date;\n    /**\n     * The ID of the last message considered read by the current user in the current channel.\n     * All the messages following this message are considered unread.\n     */\n    lastReadMessageId?: string;\n    /** The number of unread messages in the current channel. */\n    unreadMessageCount?: number;\n  };\n\ntype VirtualizedMessageListWithContextProps = VirtualizedMessageListProps & {\n  channel: Channel;\n  hasMore: boolean;\n  hasMoreNewer: boolean;\n  jumpToLatestMessage: () => Promise<void>;\n  loadingMore: boolean;\n  loadingMoreNewer: boolean;\n  notifications: ChannelNotifications;\n  read?: StreamChannelState['read'];\n  thread?: ChannelStateContextValue['thread'];\n};\n\nfunction captureResizeObserverExceededError(e: ErrorEvent) {\n  if (\n    e.message === 'ResizeObserver loop completed with undelivered notifications.' ||\n    e.message === 'ResizeObserver loop limit exceeded'\n  ) {\n    e.stopImmediatePropagation();\n  }\n}\n\nfunction useCaptureResizeObserverExceededError() {\n  useEffect(() => {\n    window.addEventListener('error', captureResizeObserverExceededError);\n    return () => {\n      window.removeEventListener('error', captureResizeObserverExceededError);\n    };\n  }, []);\n}\n\nfunction fractionalItemSize(element: HTMLElement) {\n  return element.getBoundingClientRect().height;\n}\n\nfunction findMessageIndex(messages: RenderedMessage[], id: string) {\n  return messages.findIndex((message) => message.id === id);\n}\n\nfunction calculateInitialTopMostItemIndex(\n  messages: RenderedMessage[],\n  highlightedMessageId: string | undefined,\n) {\n  if (highlightedMessageId) {\n    const index = findMessageIndex(messages, highlightedMessageId);\n    if (index !== -1) {\n      return { align: 'center', index } as const;\n    }\n  }\n  return messages.length - 1;\n}\n\nconst VirtualizedMessageListWithContext = (\n  props: VirtualizedMessageListWithContextProps,\n) => {\n  const {\n    additionalMessageComposerProps,\n    additionalVirtuosoProps = {},\n    channel,\n    channelUnreadUiState,\n    closeReactionSelectorOnClick,\n    customMessageRenderer,\n    defaultItemHeight,\n    disableDateSeparator = true,\n    formatDate,\n    groupStyles,\n    hasMoreNewer,\n    head,\n    hideDeletedMessages = false,\n    hideNewMessageSeparator = false,\n    highlightedMessageId,\n    jumpToLatestMessage,\n    loadingMore,\n    loadMore,\n    loadMoreNewer,\n    maxTimeBetweenGroupedMessages,\n    Message: MessageUIComponentFromProps,\n    messageActions,\n    messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n    messages,\n    openThread,\n    // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component\n    overscan = 0,\n    reactionDetailsSort,\n    renderText,\n    returnAllReadData = false,\n    reviewProcessedMessage,\n    scrollSeekPlaceHolder,\n    scrollToLatestMessageOnFocus = false,\n    separateGiphyPreview = false,\n    shouldGroupByUser = false,\n    showAvatar,\n    showUnreadNotificationAlways,\n    sortReactions,\n    stickToBottomScrollBehavior = 'smooth',\n    suppressAutoscroll,\n    thread,\n    threadList,\n  } = props;\n\n  const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } =\n    additionalVirtuosoProps;\n\n  // Stops errors generated from react-virtuoso to bubble up\n  // to Sentry or other tracking tools.\n  useCaptureResizeObserverExceededError();\n\n  const {\n    DateSeparator = DefaultDateSeparator,\n    GiphyPreviewMessage = DefaultGiphyPreviewMessage,\n    MessageListMainPanel = DefaultMessageListMainPanel,\n    MessageSystem = DefaultMessageSystem,\n    NewMessageNotification = DefaultNewMessageNotification,\n    NotificationList = DefaultNotificationList,\n    ScrollToLatestMessageButton = DefaultScrollToLatestMessageButton,\n    TypingIndicator,\n    UnreadMessagesNotification = DefaultUnreadMessagesNotification,\n    UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,\n    VirtualMessage: MessageUIComponentFromContext = MessageUI,\n  } = useComponentContext('VirtualizedMessageList');\n  const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;\n\n  const { client, customClasses } = useChatContext('VirtualizedMessageList');\n  const prefersReducedMotion = useReducedMotionPreference();\n  const effectiveStickToBottomScrollBehavior = prefersReducedMotion\n    ? 'auto'\n    : stickToBottomScrollBehavior;\n  const notificationTarget = useNotificationTarget();\n\n  const virtuoso = useRef<VirtuosoHandle>(null);\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } =\n    useUnreadMessagesNotificationVirtualized({\n      lastRead: channelUnreadUiState?.last_read,\n      showAlways: !!showUnreadNotificationAlways,\n      unreadCount: channelUnreadUiState?.unread_messages ?? 0,\n    });\n\n  const { giphyPreviewMessage, setGiphyPreviewMessage } =\n    useGiphyPreview(separateGiphyPreview);\n\n  const processedMessages = useMemo(() => {\n    if (typeof messages === 'undefined') {\n      return [];\n    }\n\n    if (\n      disableDateSeparator &&\n      !hideDeletedMessages &&\n      hideNewMessageSeparator &&\n      !separateGiphyPreview\n    ) {\n      return messages;\n    }\n\n    return processMessages({\n      enableDateSeparator: !disableDateSeparator,\n      hideDeletedMessages,\n      hideNewMessageSeparator,\n      lastRead,\n      messages,\n      reviewProcessedMessage,\n      setGiphyPreviewMessage,\n      userId: client.userID || '',\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    disableDateSeparator,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    lastRead,\n    messages,\n    messages?.length,\n    client.userID,\n  ]);\n\n  /**\n   * This indirection via a ref is needed because Virtuoso’s itemsRendered is set at render time,\n   * while FloatingDateSeparator lives in a child component that may run its hooks in a different order.\n   * Using a ref lets the parent provide the callback to Virtuoso while the child keeps ownership\n   * of the actual handler implementation.\n   */\n  const floatingDateItemsRenderedRef = useRef<\n    ((rendered: RenderedMessage[]) => void) | null\n  >(null);\n\n  const lastOwnMessage = useLastOwnMessage({ messages, ownUserId: client.user?.id });\n\n  // get the mapping of own messages to array of users who read them\n  const ownMessagesReadByOthers = useLastReadData({\n    channel,\n    lastOwnMessage,\n    messages: messages || [],\n    returnAllReadData,\n  });\n\n  const ownMessagesDeliveredToOthers = useLastDeliveredData({\n    channel,\n    lastOwnMessage,\n    messages: messages || [],\n    returnAllReadData,\n  });\n\n  const lastReceivedMessageId = useMemo(\n    () => getLastReceived(processedMessages),\n    [processedMessages],\n  );\n\n  const groupStylesFn = groupStyles || getGroupStyles;\n  const messageGroupStyles = useMemo(\n    () =>\n      processedMessages.reduce<Record<string, GroupStyle>>((acc, message, i) => {\n        const style = groupStylesFn(\n          message,\n          processedMessages[i - 1],\n          processedMessages[i + 1],\n          !shouldGroupByUser,\n          maxTimeBetweenGroupedMessages,\n        );\n        if (style && message.id) acc[message.id] = style;\n        return acc;\n      }, {}),\n    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      maxTimeBetweenGroupedMessages,\n      processedMessages.length,\n      shouldGroupByUser,\n      groupStylesFn,\n    ],\n  );\n\n  const {\n    atBottom,\n    isMessageListScrolledToBottom,\n    newMessagesNotification,\n    setIsMessageListScrolledToBottom,\n    setNewMessagesNotification,\n  } = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer);\n\n  useMarkRead({\n    isMessageListScrolledToBottom,\n    messageListIsThread: !!threadList,\n    wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,\n  });\n\n  const scrollToBottom = useCallback(async () => {\n    if (hasMoreNewer) {\n      await jumpToLatestMessage();\n      return;\n    }\n\n    if (virtuoso.current) {\n      virtuoso.current.scrollToIndex(processedMessages.length - 1);\n    }\n\n    setNewMessagesNotification(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    virtuoso,\n    processedMessages,\n    setNewMessagesNotification,\n    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage\n    processedMessages.length,\n    hasMoreNewer,\n    jumpToLatestMessage,\n  ]);\n\n  useScrollToBottomOnNewMessage({\n    messages,\n    scrollToBottom,\n    scrollToLatestMessageOnFocus,\n  });\n\n  const numItemsPrepended = usePrependedMessagesCount(\n    processedMessages,\n    !disableDateSeparator,\n  );\n\n  const { messageSetKey } = useMessageSetKey({ messages });\n\n  const shouldForceScrollToBottom = useShouldForceScrollToBottom(\n    processedMessages,\n    client.userID,\n  );\n\n  useIncomingMessageAnnouncements({\n    activeThreadId: thread?.id,\n    channel,\n    ownUserId: client.userID,\n    threadList,\n  });\n\n  const handleItemsRendered = useMemo(\n    () =>\n      makeItemsRenderedHandler(\n        [\n          toggleShowUnreadMessagesNotification,\n          (rendered) => floatingDateItemsRenderedRef.current?.(rendered),\n        ],\n        processedMessages,\n      ),\n    [processedMessages, toggleShowUnreadMessagesNotification],\n  );\n  const followOutput = (isAtBottom: boolean) => {\n    if (hasMoreNewer || suppressAutoscroll) {\n      return false;\n    }\n\n    if (shouldForceScrollToBottom()) {\n      return isAtBottom ? effectiveStickToBottomScrollBehavior : 'auto';\n    }\n    // a message from another user has been received - don't scroll to bottom unless already there\n    return isAtBottom ? effectiveStickToBottomScrollBehavior : false;\n  };\n\n  const computeItemKey = useCallback<ComputeItemKey<UnknownType, VirtuosoContext>>(\n    (index, _, { numItemsPrepended, processedMessages }) =>\n      processedMessages[calculateItemIndex(index, numItemsPrepended)].id,\n    [],\n  );\n\n  const atBottomStateChange = (isAtBottom: boolean) => {\n    atBottom.current = isAtBottom;\n    setIsMessageListScrolledToBottom(isAtBottom);\n\n    if (isAtBottom) {\n      loadMoreNewer?.(messageLimit);\n      setNewMessagesNotification?.(false);\n    }\n  };\n  const atTopStateChange = (isAtTop: boolean) => {\n    if (isAtTop) {\n      loadMore?.(messageLimit);\n    }\n  };\n\n  useEffect(() => {\n    let scrollTimeout: ReturnType<typeof setTimeout>;\n    if (highlightedMessageId) {\n      const index = findMessageIndex(processedMessages, highlightedMessageId);\n      if (index !== -1) {\n        scrollTimeout = setTimeout(() => {\n          virtuoso.current?.scrollToIndex({ align: 'center', index });\n        }, 0);\n      }\n    }\n    return () => {\n      clearTimeout(scrollTimeout);\n    };\n  }, [highlightedMessageId, processedMessages]);\n\n  const id = useStableId();\n\n  if (!processedMessages) return null;\n\n  const dialogManagerId = threadList\n    ? `virtualized-message-list-dialog-manager-thread-${id}`\n    : `virtualized-message-list-dialog-manager-${id}`;\n\n  return (\n    <VirtualizedMessageListContextProvider value={{ scrollToBottom }}>\n      <MessageTranslationViewProvider>\n        <MessageListMainPanel>\n          <DialogManagerProvider id={dialogManagerId}>\n            {!threadList && showUnreadMessagesNotification && (\n              <UnreadMessagesNotification\n                unreadCount={channelUnreadUiState?.unread_messages}\n              />\n            )}\n            <div\n              className={\n                customClasses?.virtualizedMessageList || 'str-chat__virtual-list'\n              }\n            >\n              <FloatingDateSeparator\n                disableDateSeparator={disableDateSeparator}\n                itemsRenderedRef={floatingDateItemsRenderedRef}\n                processedMessages={processedMessages}\n              />\n              <Virtuoso<UnknownType, VirtuosoContext>\n                atBottomStateChange={atBottomStateChange}\n                atBottomThreshold={100}\n                atTopStateChange={atTopStateChange}\n                atTopThreshold={100}\n                className='str-chat__message-list-scroll'\n                components={{\n                  EmptyPlaceholder,\n                  Header,\n                  Item,\n                  ...(TypingIndicator && {\n                    Footer: () =>\n                      isMessageListScrolledToBottom ? (\n                        <TypingIndicator\n                          isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                          scrollToBottom={scrollToBottom}\n                          threadList={threadList}\n                        />\n                      ) : null,\n                  }),\n                  ...virtuosoComponentsFromProps,\n                }}\n                computeItemKey={computeItemKey}\n                context={{\n                  additionalMessageComposerProps,\n                  closeReactionSelectorOnClick,\n                  customClasses,\n                  customMessageRenderer,\n                  DateSeparator,\n                  firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,\n                  formatDate,\n                  head,\n                  lastOwnMessage,\n                  lastReadDate: channelUnreadUiState?.last_read,\n                  lastReadMessageId: channelUnreadUiState?.last_read_message_id,\n                  lastReceivedMessageId,\n                  loadingMore,\n                  Message: MessageUIComponent,\n                  messageActions,\n                  messageGroupStyles,\n                  MessageSystem,\n                  numItemsPrepended,\n                  openThread,\n                  ownMessagesDeliveredToOthers,\n                  ownMessagesReadByOthers,\n                  processedMessages,\n                  reactionDetailsSort,\n                  renderText,\n                  returnAllReadData,\n                  shouldGroupByUser,\n                  showAvatar,\n                  sortReactions,\n                  threadList,\n                  unreadMessageCount: channelUnreadUiState?.unread_messages,\n                  UnreadMessagesSeparator,\n                  virtuosoRef: virtuoso,\n                }}\n                firstItemIndex={calculateFirstItemIndex(numItemsPrepended)}\n                followOutput={followOutput}\n                increaseViewportBy={{ bottom: 200, top: 0 }}\n                initialTopMostItemIndex={calculateInitialTopMostItemIndex(\n                  processedMessages,\n                  highlightedMessageId,\n                )}\n                itemContent={messageRenderer}\n                itemSize={fractionalItemSize}\n                itemsRendered={handleItemsRendered}\n                key={messageSetKey}\n                overscan={overscan}\n                ref={virtuoso}\n                style={{ overflowX: 'hidden' }}\n                totalCount={processedMessages.length}\n                {...overridingVirtuosoProps}\n                {...(scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {})}\n                {...(defaultItemHeight ? { defaultItemHeight } : {})}\n              />\n              <NewMessageNotification\n                newMessageCount={channelUnreadUiState?.unread_messages}\n                showNotification={newMessagesNotification || hasMoreNewer}\n              />\n              <ScrollToLatestMessageButton\n                isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                isNotAtLatestMessageSet={hasMoreNewer}\n                onClick={scrollToBottom}\n                threadList={threadList}\n              />\n            </div>\n          </DialogManagerProvider>\n          <NotificationList panel={notificationTarget} />\n        </MessageListMainPanel>\n        {giphyPreviewMessage && <GiphyPreviewMessage message={giphyPreviewMessage} />}\n      </MessageTranslationViewProvider>\n    </VirtualizedMessageListContextProvider>\n  );\n};\n\nexport type VirtualizedMessageListProps = Partial<\n  Pick<MessageProps, PropsDrilledToMessage>\n> & {\n  /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */\n  additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext>;\n  channelUnreadUiState?: ChannelStateContextValue['channelUnreadUiState'];\n  /** If true, picking a reaction from the `ReactionSelector` component will close the selector */\n  closeReactionSelectorOnClick?: boolean;\n  /** Custom render function, if passed, certain UI props are ignored */\n  customMessageRenderer?: (\n    messageList: RenderedMessage[],\n    index: number,\n  ) => React.ReactElement;\n  /** @deprecated Use additionalVirtuosoProps.defaultItemHeight instead. Will be removed with next major release - `v11.0.0`.\n   * If set, the default item height is used for the calculation of the total list height. Use if you expect messages with a lot of height variance\n   * */\n  defaultItemHeight?: number;\n  /** Disables the injection of date separator components in MessageList, defaults to `true` */\n  disableDateSeparator?: boolean;\n  /** Callback function to set group styles for each message */\n  groupStyles?: (\n    message: RenderedMessage,\n    previousMessage: RenderedMessage,\n    nextMessage: RenderedMessage,\n    noGroupByUser: boolean,\n    maxTimeBetweenGroupedMessages?: number,\n  ) => GroupStyle;\n  /** Whether or not the list has more items to load */\n  hasMore?: boolean;\n  /** Whether or not the list has newer items to load */\n  hasMoreNewer?: boolean;\n  /**\n   * @deprecated Use additionalVirtuosoProps.components.Header to override default component rendered above the list ove messages.\n   * Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components\n   */\n  head?: React.ReactElement;\n  /** Hides the `MessageDeleted` components from the list, defaults to `false` */\n  hideDeletedMessages?: boolean;\n  /** Hides the `DateSeparator` component when new messages are received in a channel that's watched but not active, defaults to false */\n  hideNewMessageSeparator?: boolean;\n  /** The id of the message to highlight and center */\n  highlightedMessageId?: string;\n  /** Whether or not the list is currently loading more items */\n  loadingMore?: boolean;\n  /** Whether or not the list is currently loading newer items */\n  loadingMoreNewer?: boolean;\n  /** Function called when more messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */\n  loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);\n  /** Function called when new messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */\n  loadMoreNewer?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);\n  /** Maximum time in milliseconds that should occur between messages to still consider them grouped together */\n  maxTimeBetweenGroupedMessages?: number;\n  /** Custom UI component to display a message, defaults to and accepts same props as [MessageUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageUI.tsx) */\n  Message?: React.ComponentType<MessageUIComponentProps>;\n  /** The limit to use when paginating messages */\n  messageLimit?: number;\n  /** Optional prop to override the messages available from [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */\n  messages?: LocalMessage[];\n  /**\n   * @deprecated Use additionalVirtuosoProps.overscan instead. Will be removed with next major release - `v11.0.0`.\n   * The amount of extra content the list should render in addition to what's necessary to fill in the viewport\n   */\n  overscan?: number;\n  /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */\n  returnAllReadData?: boolean;\n  /**\n   * Allows to review changes introduced to messages array on per message basis (e.g. date separator injected before a message).\n   * The array returned from the function is appended to the array of messages that are later rendered into React elements in the `VirtualizedMessageList`.\n   */\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n  /**\n   * @deprecated Pass additionalVirtuosoProps.scrollSeekConfiguration and specify the placeholder in additionalVirtuosoProps.components.ScrollSeekPlaceholder instead.  Will be removed with next major release - `v11.0.0`.\n   * Performance improvement by showing placeholders if user scrolls fast through list.\n   * it can be used like this:\n   * ```\n   *  {\n   *    enter: (velocity) => Math.abs(velocity) > 120,\n   *    exit: (velocity) => Math.abs(velocity) < 40,\n   *    change: () => null,\n   *    placeholder: ({index, height})=> <div style={{height: height + \"px\"}}>{index}</div>,\n   *  }\n   *  ```\n   */\n  scrollSeekPlaceHolder?: ScrollSeekConfiguration & {\n    placeholder: React.ComponentType<ScrollSeekPlaceholderProps>;\n  };\n  /** When `true`, the list will scroll to the latest message when the window regains focus */\n  scrollToLatestMessageOnFocus?: boolean;\n  /** If true, the Giphy preview will render as a separate component above the `MessageComposer`, rather than inline with the other messages in the list */\n  separateGiphyPreview?: boolean;\n  /** If true, group messages belonging to the same user, otherwise show each message individually */\n  shouldGroupByUser?: boolean;\n  /**\n   * The floating notification informing about unread messages will be shown when the\n   * UnreadMessagesSeparator is not visible. The default is false, that means the notification\n   * is shown only when viewing unread messages.\n   */\n  showUnreadNotificationAlways?: boolean;\n  /** The scrollTo behavior when new messages appear. Use `\"smooth\"` for regular chat channels, and `\"auto\"` (which results in instant scroll to bottom) if you expect high throughput. Reduced-motion users are always treated as `\"auto\"`. */\n  stickToBottomScrollBehavior?: 'smooth' | 'auto';\n  /** stops the list from autoscrolling when new messages are loaded */\n  suppressAutoscroll?: boolean;\n  /** If true, indicates the message list is a thread  */\n  threadList?: boolean;\n};\n\n/**\n * The VirtualizedMessageList component renders a list of messages in a virtualized list.\n * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).\n */\nexport function VirtualizedMessageList(props: VirtualizedMessageListProps) {\n  const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext(\n    'VirtualizedMessageList',\n  );\n  const {\n    channel,\n    channelUnreadUiState,\n    hasMore,\n    hasMoreNewer,\n    highlightedMessageId,\n    loadingMore,\n    loadingMoreNewer,\n    messages: contextMessages,\n    notifications,\n    read,\n    suppressAutoscroll,\n    thread,\n  } = useChannelStateContext('VirtualizedMessageList');\n\n  const messages = props.messages || contextMessages;\n\n  return (\n    <VirtualizedMessageListWithContext\n      channel={channel}\n      channelUnreadUiState={props.channelUnreadUiState ?? channelUnreadUiState}\n      hasMore={!!hasMore}\n      hasMoreNewer={!!hasMoreNewer}\n      highlightedMessageId={highlightedMessageId}\n      jumpToLatestMessage={jumpToLatestMessage}\n      loadingMore={!!loadingMore}\n      loadingMoreNewer={!!loadingMoreNewer}\n      loadMore={loadMore}\n      loadMoreNewer={loadMoreNewer}\n      messages={messages}\n      notifications={notifications}\n      read={read}\n      suppressAutoscroll={suppressAutoscroll}\n      thread={thread}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VirtualizedMessageList.mjs","names":[],"sources":["../../../../src/components/MessageList/VirtualizedMessageList.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { FloatingDateSeparator } from './FloatingDateSeparator';\nimport type {\n  ComputeItemKey,\n  ScrollSeekConfiguration,\n  ScrollSeekPlaceholderProps,\n  VirtuosoHandle,\n  VirtuosoProps,\n} from 'react-virtuoso';\nimport { Virtuoso } from 'react-virtuoso';\n\nimport { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';\nimport { useLastReadData } from './hooks';\nimport {\n  useGiphyPreview,\n  useMessageSetKey,\n  useNewMessageNotification,\n  usePrependedMessagesCount,\n  useScrollToBottomOnNewMessage,\n  useShouldForceScrollToBottom,\n  useUnreadMessagesNotificationVirtualized,\n} from './hooks/VirtualizedMessageList';\nimport { useMarkRead } from './hooks/useMarkRead';\n\nimport {\n  NotificationList as DefaultNotificationList,\n  useNotificationTarget,\n} from '../Notifications';\nimport { useIncomingMessageAnnouncements } from '../Accessibility';\nimport { NewMessageNotification as DefaultNewMessageNotification } from './NewMessageNotification';\nimport { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';\nimport { getGroupStyles, getLastReceived, processMessages } from './utils';\nimport type { MessageProps } from '../Message';\nimport { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';\nimport {\n  calculateFirstItemIndex,\n  calculateItemIndex,\n  EmptyPlaceholder,\n  Header,\n  Item,\n  makeItemsRenderedHandler,\n  messageRenderer,\n} from './VirtualizedMessageListComponents';\n\nimport {\n  UnreadMessagesSeparator as DefaultUnreadMessagesSeparator,\n  ScrollToLatestMessageButton,\n} from '../MessageList';\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { EventComponent as DefaultMessageSystem } from '../EventComponent';\n\nimport { DialogManagerProvider, useChannel, WithComponents } from '../../context';\nimport type { ChatContextValue } from '../../context/ChatContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport type { ComponentContextValue } from '../../context/ComponentContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageTranslationViewProvider } from '../../context/MessageTranslationViewContext';\nimport { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';\nimport { getMessageSourceKey } from './messageSourceKey';\nimport { useStateStore } from '../../store';\nimport { useThreadContext } from '../Threads';\nimport { useThreadHead } from './hooks/useThreadHead';\nimport { useMessagePaginator } from '../../hooks';\n\nimport type {\n  Channel,\n  LocalMessage,\n  MessageFocusSignalState,\n  MessagePaginatorState,\n  ChannelState as StreamChannelState,\n  TimestampNS,\n  UnreadSnapshotState,\n  UserResponse,\n} from 'stream-chat';\nimport type { UnknownType } from '../../types/types';\nimport { useCanPaginateReplies } from './hooks/useCanPaginateReplies';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { useLastDeliveredData } from './hooks/useLastDeliveredData';\nimport { useLastOwnMessage } from './hooks/useLastOwnMessage';\n\ntype PropsDrilledToMessage =\n  | 'additionalMessageComposerProps'\n  | 'formatDate'\n  | 'reactionDetailsSort'\n  | 'renderText'\n  | 'showAvatar'\n  | 'sortReactions';\n\ntype VirtualizedMessageListPropsForContext =\n  | PropsDrilledToMessage\n  | 'closeReactionSelectorOnClick'\n  | 'customMessageRenderer'\n  // | 'loadingMore'\n  | 'returnAllReadData'\n  | 'shouldGroupByUser';\n\n/**\n * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)\n */\nexport type VirtuosoContext = Required<\n  Pick<\n    ComponentContextValue,\n    'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'\n  >\n> &\n  Pick<VirtualizedMessageListProps, VirtualizedMessageListPropsForContext> &\n  Pick<ChatContextValue, 'customClasses'> & {\n    channel: Channel;\n    /** The thread parent message rendered above the replies, or null outside a thread. */\n    head: React.ReactElement | null;\n    /** Latest received message id in the current channel */\n    lastReceivedMessageId: string | null | undefined;\n    loadingMore: boolean;\n    /** Object mapping between the message ID and a string representing the position in the group of a sequence of messages posted by the same user. */\n    messageGroupStyles: Record<string, GroupStyle>;\n    /** Number of messages prepended before the first page of messages. This is needed to calculate the virtual position in the virtual list. */\n    numItemsPrepended: number;\n    /** Mapping of message ID of own messages to the array of users, who were delivered the given message */\n    ownMessagesDeliveredToOthers: Record<string, UserResponse[]>;\n    /** Mapping of message ID of own messages to the array of users, who read the given message */\n    ownMessagesReadByOthers: Record<string, UserResponse[]>;\n    /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */\n    processedMessages: RenderedMessage[];\n    /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */\n    virtuosoRef: RefObject<VirtuosoHandle | null>;\n    /** Latest own message in currently displayed message set. */\n    lastOwnMessage?: LocalMessage;\n    /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */\n    firstUnreadMessageId: string | null;\n    /** Unix nanoseconds, as `messagePaginator.unreadStateSnapshot.lastReadAt` carries it. */\n    lastReadDate: TimestampNS | null;\n    /**\n     * The ID of the last message considered read by the current user in the current channel.\n     * All the messages following this message are considered unread.\n     */\n    lastReadMessageId: string | null;\n    /** The number of unread messages in the current channel. */\n    unreadMessageCount: number;\n    /** Message id currently targeted by paginator focus signal. */\n    focusedMessageId?: string | null;\n  };\n\ntype VirtualizedMessageListWithContextProps = VirtualizedMessageListProps & {\n  channel: Channel;\n  // hasMore: boolean;\n  // hasMoreNewer: boolean;\n  // jumpToLatestMessage: () => Promise<void>;\n  // loadingMore: boolean;\n  // loadingMoreNewer: boolean;\n  read?: StreamChannelState['read'];\n};\n\nconst channelReadSelector = (nextValue: { read: StreamChannelState['read'] }) => ({\n  read: nextValue.read,\n});\n\nfunction captureResizeObserverExceededError(e: ErrorEvent) {\n  if (\n    e.message === 'ResizeObserver loop completed with undelivered notifications.' ||\n    e.message === 'ResizeObserver loop limit exceeded'\n  ) {\n    e.stopImmediatePropagation();\n  }\n}\n\nfunction useCaptureResizeObserverExceededError() {\n  useEffect(() => {\n    window.addEventListener('error', captureResizeObserverExceededError);\n    return () => {\n      window.removeEventListener('error', captureResizeObserverExceededError);\n    };\n  }, []);\n}\n\nfunction fractionalItemSize(element: HTMLElement) {\n  return element.getBoundingClientRect().height;\n}\n\nfunction findMessageIndex(messages: RenderedMessage[], id: string) {\n  return messages.findIndex((message) => message.id === id);\n}\n\nfunction calculateInitialTopMostItemIndex(\n  messages: RenderedMessage[],\n  focusedMessageId: string | undefined,\n) {\n  if (focusedMessageId) {\n    const index = findMessageIndex(messages, focusedMessageId);\n    if (index !== -1) {\n      return { align: 'center', index } as const;\n    }\n  }\n  return messages.length - 1;\n}\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => state;\nconst messageFocusSignalSelector = (state: MessageFocusSignalState) => ({\n  messageFocusSignal: state.signal,\n});\n\nconst messagePaginatorStateSelector = (state: MessagePaginatorState) => ({\n  hasMoreNewer: state.hasMoreHead,\n  isLoading: state.isLoading,\n  messages: state.items ?? [],\n});\n\nconst VirtualizedMessageListWithContext = (\n  props: VirtualizedMessageListWithContextProps,\n) => {\n  const {\n    additionalMessageComposerProps,\n    additionalVirtuosoProps = {},\n    channel,\n    // channelUnreadUiState,\n    closeReactionSelectorOnClick,\n    customMessageRenderer,\n    defaultItemHeight,\n    formatDate,\n    groupStyles,\n    hideDeletedMessages = false,\n    // hasMoreNewer,\n    hideNewMessageSeparator = false,\n    maxTimeBetweenGroupedMessages,\n    // jumpToLatestMessage,\n    // loadingMore,\n    // loadMore,\n    // loadMoreNewer,\n    overscan = 0,\n    // messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n    // messages,\n    // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component\n    reactionDetailsSort,\n    renderText,\n    returnAllReadData = false,\n    reviewProcessedMessage,\n    scrollSeekPlaceHolder,\n    scrollToLatestMessageOnFocus = false,\n    separateGiphyPreview = false,\n    shouldGroupByUser = false,\n    showAvatar,\n    showUnreadNotificationAlways,\n    sortReactions,\n    stickToBottomScrollBehavior = 'smooth',\n    suppressAutoscroll: suppressAutoscrollFromProps = false,\n    withDateSeparator = false,\n  } = props;\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const threadHead = useThreadHead();\n  const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] =\n    React.useState(false);\n  const suppressAutoscroll =\n    suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;\n  const loadingOlderRef = useRef(false);\n\n  const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } =\n    additionalVirtuosoProps;\n\n  // Stops errors generated from react-virtuoso to bubble up\n  // to Sentry or other tracking tools.\n  useCaptureResizeObserverExceededError();\n\n  const {\n    DateSeparator = DefaultDateSeparator,\n    GiphyPreviewMessage = DefaultGiphyPreviewMessage,\n    MessageSystem = DefaultMessageSystem,\n    NewMessageNotification = DefaultNewMessageNotification,\n    TypingIndicator,\n    UnreadMessagesNotification = DefaultUnreadMessagesNotification,\n    UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,\n    VirtualMessage,\n  } = useComponentContext();\n  // `VirtualMessage` overrides `MessageUI` for the messages this list renders, so it is\n  // applied to this subtree's `ComponentContext` rather than drilled down to each `Message`.\n  // Memoized so the provider does not hand every consumer below a new value each render.\n  const virtualMessageOverrides = useMemo(\n    () => ({ MessageUI: VirtualMessage }),\n    [VirtualMessage],\n  );\n\n  const { client, customClasses } = useChatContext();\n  const messagePaginator = useMessagePaginator();\n\n  const { hasMoreNewer, isLoading, messages } = useStateStore(\n    messagePaginator.state,\n    messagePaginatorStateSelector,\n  );\n  const { messageFocusSignal } = useStateStore(\n    messagePaginator.messageFocusSignal,\n    messageFocusSignalSelector,\n  );\n\n  const channelUnreadUiState = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n  const focusedMessageId = messageFocusSignal?.messageId;\n\n  const virtuoso = useRef<VirtuosoHandle>(null);\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } =\n    useUnreadMessagesNotificationVirtualized({\n      showAlways: !!showUnreadNotificationAlways,\n    });\n\n  const { giphyPreviewMessage, setGiphyPreviewMessage } =\n    useGiphyPreview(separateGiphyPreview);\n\n  const processedMessages = useMemo(() => {\n    if (typeof messages === 'undefined') {\n      return [];\n    }\n\n    if (\n      !withDateSeparator &&\n      !hideDeletedMessages &&\n      hideNewMessageSeparator &&\n      !separateGiphyPreview\n    ) {\n      return messages;\n    }\n\n    return processMessages({\n      hideDeletedMessages,\n      hideNewMessageSeparator,\n      lastRead,\n      messages,\n      reviewProcessedMessage,\n      setGiphyPreviewMessage,\n      userId: client.userID || '',\n      withDateSeparator,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    withDateSeparator,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    lastRead,\n    messages,\n    messages?.length,\n    client.userID,\n  ]);\n\n  /**\n   * This indirection via a ref is needed because Virtuoso’s itemsRendered is set at render time,\n   * while FloatingDateSeparator lives in a child component that may run its hooks in a different order.\n   * Using a ref lets the parent provide the callback to Virtuoso while the child keeps ownership\n   * of the actual handler implementation.\n   */\n  const floatingDateItemsRenderedRef = useRef<\n    ((rendered: RenderedMessage[]) => void) | null\n  >(null);\n\n  const lastOwnMessage = useLastOwnMessage({ messages, ownUserId: client.user?.id });\n\n  // get the mapping of own messages to array of users who read them\n  const ownMessagesReadByOthers = useLastReadData({\n    channel,\n    lastOwnMessage,\n    messages: messages || [],\n    returnAllReadData,\n  });\n\n  const ownMessagesDeliveredToOthers = useLastDeliveredData({\n    channel,\n    lastOwnMessage,\n    messages: messages || [],\n    returnAllReadData,\n  });\n\n  const lastReceivedMessageId = useMemo(\n    () => getLastReceived(processedMessages),\n    [processedMessages],\n  );\n\n  const groupStylesFn = groupStyles || getGroupStyles;\n  const messageGroupStyles = useMemo(\n    () =>\n      processedMessages.reduce<Record<string, GroupStyle>>((acc, message, i) => {\n        const style = groupStylesFn(\n          message,\n          processedMessages[i - 1],\n          processedMessages[i + 1],\n          !shouldGroupByUser,\n          maxTimeBetweenGroupedMessages,\n        );\n        if (style && message.id) acc[message.id] = style;\n        return acc;\n      }, {}),\n    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      maxTimeBetweenGroupedMessages,\n      processedMessages.length,\n      shouldGroupByUser,\n      groupStylesFn,\n    ],\n  );\n\n  const {\n    atBottom,\n    isMessageListScrolledToBottom,\n    newMessagesNotification,\n    setIsMessageListScrolledToBottom,\n    setNewMessagesNotification,\n  } = useNewMessageNotification(processedMessages, client.userID);\n\n  useMarkRead({\n    hasMoreNewer,\n    isMessageListScrolledToBottom,\n    messageListIsThread: isThreadList,\n  });\n\n  useIncomingMessageAnnouncements({\n    activeThreadId: thread?.id,\n    channel,\n    ownUserId: channel.getClient().user?.id,\n    threadList: isThreadList,\n  });\n\n  const scrollToBottom = useCallback(async () => {\n    if (messagePaginator.hasMoreHead) {\n      await messagePaginator.jumpToTheLatestMessage();\n    } else if (virtuoso.current) {\n      virtuoso.current.scrollToIndex(processedMessages.length - 1);\n    }\n\n    setNewMessagesNotification(false);\n  }, [\n    messagePaginator,\n    virtuoso,\n    processedMessages,\n    setNewMessagesNotification,\n    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage\n    // processedMessages.length,\n    // hasMoreNewer,\n    // jumpToLatestMessage,\n  ]);\n\n  useScrollToBottomOnNewMessage({\n    messages,\n    scrollToBottom,\n    scrollToLatestMessageOnFocus,\n  });\n\n  const numItemsPrepended = usePrependedMessagesCount(\n    processedMessages,\n    withDateSeparator,\n  );\n\n  const { messageSetKey } = useMessageSetKey({ messages });\n\n  const shouldForceScrollToBottom = useShouldForceScrollToBottom(\n    processedMessages,\n    client.userID,\n  );\n\n  const handleItemsRendered = useMemo(\n    () =>\n      makeItemsRenderedHandler(\n        [\n          toggleShowUnreadMessagesNotification,\n          (rendered) => floatingDateItemsRenderedRef.current?.(rendered),\n        ],\n        processedMessages,\n      ),\n    [processedMessages, toggleShowUnreadMessagesNotification],\n  );\n  const followOutput = (isAtBottom: boolean) => {\n    if (messagePaginator.hasMoreHead || suppressAutoscroll) {\n      return false;\n    }\n\n    if (shouldForceScrollToBottom()) {\n      return isAtBottom ? stickToBottomScrollBehavior : 'auto';\n    }\n    // a message from another user has been received - don't scroll to bottom unless already there\n    return isAtBottom ? stickToBottomScrollBehavior : false;\n  };\n\n  const computeItemKey = useCallback<ComputeItemKey<UnknownType, VirtuosoContext>>(\n    (index, _, { numItemsPrepended, processedMessages }) =>\n      processedMessages[calculateItemIndex(index, numItemsPrepended)].id,\n    [],\n  );\n\n  const canPaginateReplies = useCanPaginateReplies();\n\n  const atBottomStateChange = (isAtBottom: boolean) => {\n    atBottom.current = isAtBottom;\n    setIsMessageListScrolledToBottom(isAtBottom);\n\n    if (isAtBottom) {\n      // An empty thread is at both ends at once, so Virtuoso reports both on mount — see\n      // `useCanPaginateReplies` for why that must not become a request.\n      if (canPaginateReplies) messagePaginator.toHead();\n      // loadMoreNewer?.(messageLimit);\n      setNewMessagesNotification?.(false);\n    }\n  };\n  const atTopStateChange = (isAtTop: boolean) => {\n    if (isAtTop) {\n      if (!canPaginateReplies) return;\n      if (loadingOlderRef.current) return;\n      loadingOlderRef.current = true;\n      setSuppressAutoscrollWhileLoadingOlder(true);\n      void messagePaginator.toTail().finally(() => {\n        loadingOlderRef.current = false;\n        setSuppressAutoscrollWhileLoadingOlder(false);\n      });\n    }\n  };\n\n  useEffect(() => {\n    let scrollTimeout: ReturnType<typeof setTimeout>;\n    if (focusedMessageId) {\n      const index = findMessageIndex(processedMessages, focusedMessageId);\n      if (index !== -1) {\n        scrollTimeout = setTimeout(() => {\n          virtuoso.current?.scrollToIndex({ align: 'center', index });\n        }, 0);\n      }\n    }\n    return () => {\n      clearTimeout(scrollTimeout);\n    };\n  }, [focusedMessageId, processedMessages]);\n\n  const id = useStableId();\n\n  if (!processedMessages) return null;\n\n  const dialogManagerId = isThreadList\n    ? `virtualized-message-list-dialog-manager-thread-${id}`\n    : `virtualized-message-list-dialog-manager-${id}`;\n\n  const list = (\n    <VirtualizedMessageListContextProvider value={{ scrollToBottom }}>\n      <MessageTranslationViewProvider>\n        <DialogManagerProvider id={dialogManagerId}>\n          {!isThreadList && showUnreadMessagesNotification && (\n            <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unreadCount} />\n          )}\n          <div\n            className={customClasses?.virtualizedMessageList || 'str-chat__virtual-list'}\n          >\n            <FloatingDateSeparator\n              itemsRenderedRef={floatingDateItemsRenderedRef}\n              processedMessages={processedMessages}\n              withDateSeparator={withDateSeparator}\n            />\n            <Virtuoso<UnknownType, VirtuosoContext>\n              atBottomStateChange={atBottomStateChange}\n              atBottomThreshold={100}\n              atTopStateChange={atTopStateChange}\n              atTopThreshold={100}\n              className='str-chat__message-list-scroll'\n              components={{\n                EmptyPlaceholder,\n                Header,\n                Item,\n                ...virtuosoComponentsFromProps,\n              }}\n              computeItemKey={computeItemKey}\n              context={{\n                additionalMessageComposerProps,\n                channel,\n                closeReactionSelectorOnClick,\n                customClasses,\n                customMessageRenderer,\n                DateSeparator,\n                firstUnreadMessageId: channelUnreadUiState?.firstUnreadMessageId,\n                focusedMessageId,\n                formatDate,\n                head: threadHead,\n                lastOwnMessage,\n                lastReadDate: channelUnreadUiState?.lastReadAt,\n                lastReadMessageId: channelUnreadUiState?.lastReadMessageId,\n                lastReceivedMessageId,\n                loadingMore: isLoading,\n                messageGroupStyles,\n                MessageSystem,\n                numItemsPrepended,\n                ownMessagesDeliveredToOthers,\n                ownMessagesReadByOthers,\n                processedMessages,\n                reactionDetailsSort,\n                renderText,\n                returnAllReadData,\n                shouldGroupByUser,\n                showAvatar,\n                sortReactions,\n                unreadMessageCount: channelUnreadUiState?.unreadCount,\n                UnreadMessagesSeparator,\n                virtuosoRef: virtuoso,\n              }}\n              firstItemIndex={calculateFirstItemIndex(numItemsPrepended)}\n              followOutput={followOutput}\n              increaseViewportBy={{ bottom: 200, top: 0 }}\n              initialTopMostItemIndex={calculateInitialTopMostItemIndex(\n                processedMessages,\n                focusedMessageId,\n              )}\n              itemContent={messageRenderer}\n              itemSize={fractionalItemSize}\n              itemsRendered={handleItemsRendered}\n              key={messageSetKey}\n              overscan={overscan}\n              ref={virtuoso}\n              style={{ overflowX: 'hidden' }}\n              totalCount={processedMessages.length}\n              {...overridingVirtuosoProps}\n              {...(scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {})}\n              {...(defaultItemHeight ? { defaultItemHeight } : {})}\n            />\n            <NewMessageNotification\n              newMessageCount={channelUnreadUiState?.unreadCount}\n              showNotification={\n                (newMessagesNotification || hasMoreNewer) &&\n                !isMessageListScrolledToBottom\n              }\n            />\n            {/* An empty list has nothing to jump to. Gate on the message count rather than on\n                  scroll position alone: a list with no content can legitimately report \"not at\n                  bottom\", which would otherwise render a dead affordance. */}\n            {messages.length > 0 && (\n              <ScrollToLatestMessageButton\n                isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                isNotAtLatestMessageSet={hasMoreNewer && messages.length > 0}\n                onClick={scrollToBottom}\n              />\n            )}\n          </div>\n        </DialogManagerProvider>\n        {TypingIndicator && (\n          <TypingIndicator\n            isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n            scrollToBottom={scrollToBottom}\n          />\n        )}\n        {giphyPreviewMessage && <GiphyPreviewMessage message={giphyPreviewMessage} />}\n      </MessageTranslationViewProvider>\n    </VirtualizedMessageListContextProvider>\n  );\n\n  // Only wrap when there is something to override, so the common case adds no provider.\n  return VirtualMessage ? (\n    <WithComponents overrides={virtualMessageOverrides}>{list}</WithComponents>\n  ) : (\n    list\n  );\n};\n\nexport type VirtualizedMessageListProps = Partial<\n  Pick<MessageProps, PropsDrilledToMessage>\n> & {\n  /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */\n  additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext>;\n  /** If true, picking a reaction from the `ReactionSelector` component will close the selector */\n  closeReactionSelectorOnClick?: boolean;\n  /** Custom render function, if passed, certain UI props are ignored */\n  customMessageRenderer?: (\n    messageList: RenderedMessage[],\n    index: number,\n  ) => React.ReactElement;\n  /** @deprecated Use additionalVirtuosoProps.defaultItemHeight instead. Will be removed with next major release - `v11.0.0`.\n   * If set, the default item height is used for the calculation of the total list height. Use if you expect messages with a lot of height variance\n   * */\n  defaultItemHeight?: number;\n  /** Callback function to set group styles for each message */\n  groupStyles?: (\n    message: RenderedMessage,\n    previousMessage: RenderedMessage,\n    nextMessage: RenderedMessage,\n    noGroupByUser: boolean,\n    maxTimeBetweenGroupedMessages?: number,\n  ) => GroupStyle;\n  // /** Whether or not the list has more items to load */\n  // hasMore?: boolean;\n  // /** Whether or not the list has newer items to load */\n  // hasMoreNewer?: boolean;\n  /** Hides the `MessageDeleted` components from the list, defaults to `false` */\n  hideDeletedMessages?: boolean;\n  /** Hides the `DateSeparator` component when new messages are received in a channel that's watched but not active, defaults to false */\n  hideNewMessageSeparator?: boolean;\n  // /** Whether or not the list is currently loading more items */\n  // loadingMore?: boolean;\n  // /** Whether or not the list is currently loading newer items */\n  // loadingMoreNewer?: boolean;\n  /** Function called when more messages are to be loaded. */\n  // loadMore?: () => Promise<void>;\n  /** Function called when new messages are to be loaded. */\n  // loadMoreNewer?: () => Promise<void>;\n  /** Maximum time in milliseconds that should occur between messages to still consider them grouped together */\n  maxTimeBetweenGroupedMessages?: number;\n  // /** The limit to use when paginating messages */\n  // messageLimit?: number;\n  /** Optional prop to override the messages available from the active message paginator. */\n  messages?: LocalMessage[];\n  /**\n   * @deprecated Use additionalVirtuosoProps.overscan instead. Will be removed with next major release - `v11.0.0`.\n   * The amount of extra content the list should render in addition to what's necessary to fill in the viewport\n   */\n  overscan?: number;\n  /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */\n  returnAllReadData?: boolean;\n  /**\n   * Allows to review changes introduced to messages array on per message basis (e.g. date separator injected before a message).\n   * The array returned from the function is appended to the array of messages that are later rendered into React elements in the `VirtualizedMessageList`.\n   */\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n  /**\n   * @deprecated Pass additionalVirtuosoProps.scrollSeekConfiguration and specify the placeholder in additionalVirtuosoProps.components.ScrollSeekPlaceholder instead.  Will be removed with next major release - `v11.0.0`.\n   * Performance improvement by showing placeholders if user scrolls fast through list.\n   * it can be used like this:\n   * ```\n   *  {\n   *    enter: (velocity) => Math.abs(velocity) > 120,\n   *    exit: (velocity) => Math.abs(velocity) < 40,\n   *    change: () => null,\n   *    placeholder: ({index, height})=> <div style={{height: height + \"px\"}}>{index}</div>,\n   *  }\n   *  ```\n   */\n  scrollSeekPlaceHolder?: ScrollSeekConfiguration & {\n    placeholder: React.ComponentType<ScrollSeekPlaceholderProps>;\n  };\n  /** When `true`, the list will scroll to the latest message when the window regains focus */\n  scrollToLatestMessageOnFocus?: boolean;\n  /** If true, the Giphy preview will render as a separate component above the `MessageInput`, rather than inline with the other messages in the list */\n  separateGiphyPreview?: boolean;\n  /** If true, group messages belonging to the same user, otherwise show each message individually */\n  shouldGroupByUser?: boolean;\n  /**\n   * The floating notification informing about unread messages will be shown when the\n   * UnreadMessagesSeparator is not visible. The default is false, that means the notification\n   * is shown only when viewing unread messages.\n   */\n  showUnreadNotificationAlways?: boolean;\n  /** The scrollTo behavior when new messages appear. Use `\"smooth\"` for regular chat channels, and `\"auto\"` (which results in instant scroll to bottom) if you expect high throughput. */\n  stickToBottomScrollBehavior?: 'smooth' | 'auto';\n  /** If true, prevents autoscroll-to-bottom behavior on new messages. */\n  suppressAutoscroll?: boolean;\n  /** Injects date separator components into the list, defaults to `false` */\n  withDateSeparator?: boolean;\n};\n\n/**\n * The VirtualizedMessageList component renders a list of messages in a virtualized list.\n * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).\n */\nexport function VirtualizedMessageList(props: VirtualizedMessageListProps) {\n  const channel = useChannel();\n  const thread = useThreadContext();\n  const notificationTarget = useNotificationTarget();\n  const {\n    MessageListMainPanel = DefaultMessageListMainPanel,\n    NotificationList = DefaultNotificationList,\n  } = useComponentContext();\n\n  const { read } = useStateStore(channel?.state, channelReadSelector) ?? {};\n\n  const messages = props.messages; // || contextMessages;\n\n  // See the note in `MessageList`: the panel and the notification area sit above the key, so a\n  // notification keeps its element, its countdown and its box across a switch. Here it also puts\n  // them above `VirtualizedMessageListWithContext`'s `if (!processedMessages) return null`, which\n  // would otherwise take the notification area down with the list.\n  // todo: finalize the props shape for VirtualizedMessageList\n  return (\n    <MessageListMainPanel>\n      <VirtualizedMessageListWithContext\n        channel={channel}\n        // See the note in MessageList: this list's local state -- Virtuoso's scroll offset above all\n        // -- is scoped to whatever it is showing, a thread's replies or a channel's messages.\n        key={getMessageSourceKey({ channel, thread })}\n        // channelUnreadUiState={props.channelUnreadUiState ?? channelUnreadUiState}\n        // hasMore={!!hasMore}\n        // hasMoreNewer={!!hasMoreNewer}\n        // jumpToLatestMessage={jumpToLatestMessage}\n        // loadingMore={!!loadingMore}\n        // loadingMoreNewer={!!loadingMoreNewer}\n        // loadMore={loadMore}\n        // loadMoreNewer={loadMoreNewer}\n        messages={messages}\n        read={read}\n        {...props}\n      />\n      <NotificationList panel={notificationTarget} />\n    </MessageListMainPanel>\n  );\n}\n"],"mappings":"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"}

package/dist/es/components/MessageList/VirtualizedMessageListComponents.mjs

@@ -1,8 +1,9 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
 import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
-import { Message } from "../Message/Message.mjs";
 import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from "./utils.mjs";
+import { Message } from "../Message/Message.mjs";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -32,19 +33,20 @@ var Item = ({ context, ...props }) => {
 	});
 };
 var Header = ({ context }) => {
-	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = useComponentContext("VirtualizedMessageListHeader");
+	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = useComponentContext();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [context?.head, context?.loadingMore && LoadingIndicator$1 && /* @__PURE__ */ jsx("div", {
 		className: "str-chat__virtual-list__loading",
 		children: /* @__PURE__ */ jsx(LoadingIndicator$1, {})
 	})] });
 };
 var EmptyPlaceholder = ({ context }) => {
-	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator } = useComponentContext("VirtualizedMessageList");
+	const isThreadList = !!useThreadContext();
+	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator } = useComponentContext();
 	if (typeof context?.processedMessages !== "undefined" && context.processedMessages.length > 0) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: EmptyStateIndicator$1 && /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: context?.threadList ? "thread" : "message" }) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: EmptyStateIndicator$1 && /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: isThreadList ? "thread" : "message" }) });
 };
 var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
-	const { additionalMessageComposerProps, closeReactionSelectorOnClick, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastOwnMessage, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, openThread, ownMessagesDeliveredToOthers, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, renderText, returnAllReadData, showAvatar, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef } = virtuosoContext;
+	const { additionalMessageComposerProps, channel, closeReactionSelectorOnClick, customMessageRenderer, DateSeparator, firstUnreadMessageId, focusedMessageId, formatDate, lastOwnMessage, lastReadDate, lastReadMessageId, lastReceivedMessageId, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesDeliveredToOthers, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, renderText, returnAllReadData, showAvatar, sortReactions, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef } = virtuosoContext;
 	const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
 	if (customMessageRenderer) return customMessageRenderer(messageList, streamMessageIndex);
 	const message = messageList[streamMessageIndex];
@@ -55,13 +57,14 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
 	}) : null;
 	if (message.type === "system") return MessageSystem ? /* @__PURE__ */ jsx(MessageSystem, { message }) : null;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [getIsFirstUnreadMessage({
+		channel,
 		firstUnreadMessageId,
 		isFirstMessage: streamMessageIndex === 0,
-		lastReadDate,
+		lastReadAt: lastReadDate,
 		lastReadMessageId,
 		message,
 		previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : void 0,
-		unreadMessageCount
+		unreadCount: unreadMessageCount
 	}) && /* @__PURE__ */ jsx("div", {
 		className: "str-chat__unread-messages-separator-wrapper",
 		children: /* @__PURE__ */ jsx(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })
@@ -72,19 +75,16 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
 		deliveredTo: ownMessagesDeliveredToOthers[message.id] || [],
 		formatDate,
 		groupStyles: [messageGroupStyles[message.id] ?? ""],
+		highlighted: focusedMessageId === message.id,
 		lastOwnMessage,
 		lastReceivedId: lastReceivedMessageId,
 		message,
-		Message: MessageUIComponent,
-		messageActions,
-		openThread,
 		reactionDetailsSort,
 		readBy: ownMessagesReadByOthers[message.id] || [],
 		renderText,
 		returnAllReadData,
 		showAvatar,
-		sortReactions,
-		threadList
+		sortReactions
 	})] });
 };
 //#endregion

package/dist/es/components/MessageList/VirtualizedMessageListComponents.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedMessageListComponents.mjs","names":[],"sources":["../../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport throttle from 'lodash.throttle';\nimport React from 'react';\nimport type { ItemProps, ListItem } from 'react-virtuoso';\n\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';\nimport { Message } from '../Message';\n\nimport { useComponentContext } from '../../context';\nimport type { GroupStyle, RenderedMessage } from './utils';\nimport { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';\nimport type { VirtuosoContext } from './VirtualizedMessageList';\nimport type { UnknownType } from '../../types/types';\n\nconst PREPEND_OFFSET = 10 ** 7;\n\nexport function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number) {\n  return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;\n}\n\nexport function calculateFirstItemIndex(numItemsPrepended: number) {\n  return PREPEND_OFFSET - numItemsPrepended;\n}\n\nexport const makeItemsRenderedHandler = (\n  renderedItemsActions: Array<(msg: RenderedMessage[]) => void>,\n  processedMessages: RenderedMessage[],\n) =>\n  throttle((items: ListItem<UnknownType>[]) => {\n    const renderedMessages = items\n      .map((item) => {\n        if (!item.originalIndex) return undefined;\n        return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];\n      })\n      .filter((msg) => !!msg);\n    renderedItemsActions.forEach((action) =>\n      action(renderedMessages as RenderedMessage[]),\n    );\n  }, 200);\n\ntype CommonVirtuosoComponentProps = {\n  context?: VirtuosoContext;\n};\n// using 'display: inline-block'\n// traps CSS margins of the item elements, preventing incorrect item measurements\nexport const Item = ({ context, ...props }: ItemProps & CommonVirtuosoComponentProps) => {\n  if (!context) return <></>;\n\n  const message =\n    context.processedMessages[\n      calculateItemIndex(props['data-item-index'], context.numItemsPrepended)\n    ];\n  const groupStyles: GroupStyle = context.messageGroupStyles[message.id];\n\n  return (\n    <div\n      {...props}\n      className={\n        context?.customClasses?.virtualMessage ||\n        clsx('str-chat__virtual-list-message-wrapper str-chat__li', {\n          [`str-chat__li--${groupStyles}`]: groupStyles,\n        })\n      }\n    />\n  );\n};\nexport const Header = ({ context }: CommonVirtuosoComponentProps) => {\n  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext(\n    'VirtualizedMessageListHeader',\n  );\n\n  return (\n    <>\n      {context?.head}\n      {context?.loadingMore && LoadingIndicator && (\n        <div className='str-chat__virtual-list__loading'>\n          <LoadingIndicator />\n        </div>\n      )}\n    </>\n  );\n};\nexport const EmptyPlaceholder = ({ context }: CommonVirtuosoComponentProps) => {\n  const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext(\n    'VirtualizedMessageList',\n  );\n  // prevent showing that there are no messages if there actually are messages (for some reason virtuoso decides to render empty placeholder first, even though it has the totalCount prop > 0)\n  if (\n    typeof context?.processedMessages !== 'undefined' &&\n    context.processedMessages.length > 0\n  )\n    return null;\n\n  return (\n    <>\n      {EmptyStateIndicator && (\n        <EmptyStateIndicator listType={context?.threadList ? 'thread' : 'message'} />\n      )}\n    </>\n  );\n};\n\nexport const messageRenderer = (\n  virtuosoIndex: number,\n  _data: UnknownType,\n  virtuosoContext: VirtuosoContext,\n) => {\n  const {\n    additionalMessageComposerProps,\n    closeReactionSelectorOnClick,\n    customMessageRenderer,\n    DateSeparator,\n    firstUnreadMessageId,\n    formatDate,\n    lastOwnMessage,\n    lastReadDate,\n    lastReadMessageId,\n    lastReceivedMessageId,\n    Message: MessageUIComponent,\n    messageActions,\n    messageGroupStyles,\n    MessageSystem,\n    numItemsPrepended,\n    openThread,\n    ownMessagesDeliveredToOthers,\n    ownMessagesReadByOthers,\n    processedMessages: messageList,\n    reactionDetailsSort,\n    renderText,\n    returnAllReadData,\n    showAvatar,\n    sortReactions,\n    threadList,\n    unreadMessageCount = 0,\n    UnreadMessagesSeparator,\n    virtuosoRef,\n  } = virtuosoContext;\n\n  const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);\n\n  if (customMessageRenderer) {\n    return customMessageRenderer(messageList, streamMessageIndex);\n  }\n\n  const message = messageList[streamMessageIndex];\n\n  if (!message || isIntroMessage(message)) return <div style={{ height: '1px' }}></div>; // returning null or zero height breaks the virtuoso\n\n  if (isDateSeparatorMessage(message)) {\n    return DateSeparator ? (\n      <DateSeparator date={message.date} unread={message.unread} />\n    ) : null;\n  }\n\n  if (message.type === 'system') {\n    return MessageSystem ? <MessageSystem message={message} /> : null;\n  }\n\n  const isFirstUnreadMessage = getIsFirstUnreadMessage({\n    firstUnreadMessageId,\n    isFirstMessage: streamMessageIndex === 0,\n    lastReadDate,\n    lastReadMessageId,\n    message,\n    previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : undefined,\n    unreadMessageCount,\n  });\n\n  return (\n    <>\n      {isFirstUnreadMessage && (\n        <div className='str-chat__unread-messages-separator-wrapper'>\n          <UnreadMessagesSeparator unreadCount={unreadMessageCount} />\n        </div>\n      )}\n      <Message\n        additionalMessageComposerProps={additionalMessageComposerProps}\n        autoscrollToBottom={virtuosoRef.current?.autoscrollToBottom}\n        closeReactionSelectorOnClick={closeReactionSelectorOnClick}\n        deliveredTo={ownMessagesDeliveredToOthers[message.id] || []}\n        formatDate={formatDate}\n        groupStyles={[messageGroupStyles[message.id] ?? '']}\n        lastOwnMessage={lastOwnMessage}\n        lastReceivedId={lastReceivedMessageId}\n        message={message}\n        Message={MessageUIComponent}\n        messageActions={messageActions}\n        openThread={openThread}\n        reactionDetailsSort={reactionDetailsSort}\n        readBy={ownMessagesReadByOthers[message.id] || []}\n        renderText={renderText}\n        returnAllReadData={returnAllReadData}\n        showAvatar={showAvatar}\n        sortReactions={sortReactions}\n        threadList={threadList}\n      />\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"VirtualizedMessageListComponents.mjs","names":[],"sources":["../../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport throttle from 'lodash.throttle';\nimport React from 'react';\nimport type { ItemProps, ListItem } from 'react-virtuoso';\n\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';\nimport { Message } from '../Message';\n\nimport { useComponentContext } from '../../context';\nimport type { GroupStyle, RenderedMessage } from './utils';\nimport { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';\nimport type { VirtuosoContext } from './VirtualizedMessageList';\nimport type { UnknownType } from '../../types/types';\nimport { useThreadContext } from '../Threads';\n\nconst PREPEND_OFFSET = 10 ** 7;\n\nexport function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number) {\n  return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;\n}\n\nexport function calculateFirstItemIndex(numItemsPrepended: number) {\n  return PREPEND_OFFSET - numItemsPrepended;\n}\n\nexport const makeItemsRenderedHandler = (\n  renderedItemsActions: Array<(msg: RenderedMessage[]) => void>,\n  processedMessages: RenderedMessage[],\n) =>\n  throttle((items: ListItem<UnknownType>[]) => {\n    const renderedMessages = items\n      .map((item) => {\n        if (!item.originalIndex) return undefined;\n        return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];\n      })\n      .filter((msg) => !!msg);\n    renderedItemsActions.forEach((action) =>\n      action(renderedMessages as RenderedMessage[]),\n    );\n  }, 200);\n\ntype CommonVirtuosoComponentProps = {\n  context?: VirtuosoContext;\n};\n// using 'display: inline-block'\n// traps CSS margins of the item elements, preventing incorrect item measurements\nexport const Item = ({ context, ...props }: ItemProps & CommonVirtuosoComponentProps) => {\n  if (!context) return <></>;\n\n  const message =\n    context.processedMessages[\n      calculateItemIndex(props['data-item-index'], context.numItemsPrepended)\n    ];\n  const groupStyles: GroupStyle = context.messageGroupStyles[message.id];\n\n  return (\n    <div\n      {...props}\n      className={\n        context?.customClasses?.virtualMessage ||\n        clsx('str-chat__virtual-list-message-wrapper str-chat__li', {\n          [`str-chat__li--${groupStyles}`]: groupStyles,\n        })\n      }\n    />\n  );\n};\nexport const Header = ({ context }: CommonVirtuosoComponentProps) => {\n  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();\n\n  return (\n    <>\n      {context?.head}\n      {context?.loadingMore && LoadingIndicator && (\n        <div className='str-chat__virtual-list__loading'>\n          <LoadingIndicator />\n        </div>\n      )}\n    </>\n  );\n};\nexport const EmptyPlaceholder = ({ context }: CommonVirtuosoComponentProps) => {\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext();\n  // prevent showing that there are no messages if there actually are messages (for some reason virtuoso decides to render empty placeholder first, even though it has the totalCount prop > 0)\n  if (\n    typeof context?.processedMessages !== 'undefined' &&\n    context.processedMessages.length > 0\n  )\n    return null;\n\n  return (\n    <>\n      {EmptyStateIndicator && (\n        <EmptyStateIndicator listType={isThreadList ? 'thread' : 'message'} />\n      )}\n    </>\n  );\n};\n\nexport const messageRenderer = (\n  virtuosoIndex: number,\n  _data: UnknownType,\n  virtuosoContext: VirtuosoContext,\n) => {\n  const {\n    additionalMessageComposerProps,\n    channel,\n    closeReactionSelectorOnClick,\n    customMessageRenderer,\n    DateSeparator,\n    firstUnreadMessageId,\n    focusedMessageId,\n    formatDate,\n    lastOwnMessage,\n    lastReadDate,\n    lastReadMessageId,\n    lastReceivedMessageId,\n    messageGroupStyles,\n    MessageSystem,\n    numItemsPrepended,\n    ownMessagesDeliveredToOthers,\n    ownMessagesReadByOthers,\n    processedMessages: messageList,\n    reactionDetailsSort,\n    renderText,\n    returnAllReadData,\n    showAvatar,\n    sortReactions,\n    unreadMessageCount = 0,\n    UnreadMessagesSeparator,\n    virtuosoRef,\n  } = virtuosoContext;\n\n  const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);\n\n  if (customMessageRenderer) {\n    return customMessageRenderer(messageList, streamMessageIndex);\n  }\n\n  const message = messageList[streamMessageIndex];\n\n  if (!message || isIntroMessage(message)) return <div style={{ height: '1px' }}></div>; // returning null or zero height breaks the virtuoso\n\n  if (isDateSeparatorMessage(message)) {\n    return DateSeparator ? (\n      <DateSeparator date={message.date} unread={message.unread} />\n    ) : null;\n  }\n\n  if (message.type === 'system') {\n    return MessageSystem ? <MessageSystem message={message} /> : null;\n  }\n\n  const isFirstUnreadMessage = getIsFirstUnreadMessage({\n    channel,\n    firstUnreadMessageId,\n    isFirstMessage: streamMessageIndex === 0,\n    lastReadAt: lastReadDate,\n    lastReadMessageId,\n    message,\n    previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : undefined,\n    unreadCount: unreadMessageCount,\n  });\n\n  return (\n    <>\n      {isFirstUnreadMessage && (\n        <div className='str-chat__unread-messages-separator-wrapper'>\n          <UnreadMessagesSeparator unreadCount={unreadMessageCount} />\n        </div>\n      )}\n      <Message\n        additionalMessageComposerProps={additionalMessageComposerProps}\n        autoscrollToBottom={virtuosoRef.current?.autoscrollToBottom}\n        closeReactionSelectorOnClick={closeReactionSelectorOnClick}\n        deliveredTo={ownMessagesDeliveredToOthers[message.id] || []}\n        formatDate={formatDate}\n        groupStyles={[messageGroupStyles[message.id] ?? '']}\n        highlighted={focusedMessageId === message.id}\n        lastOwnMessage={lastOwnMessage}\n        lastReceivedId={lastReceivedMessageId}\n        message={message}\n        reactionDetailsSort={reactionDetailsSort}\n        readBy={ownMessagesReadByOthers[message.id] || []}\n        renderText={renderText}\n        returnAllReadData={returnAllReadData}\n        showAvatar={showAvatar}\n        sortReactions={sortReactions}\n      />\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/MessageList/hooks/MessageList/useEnrichedMessages.mjs

@@ -4,19 +4,18 @@ import { getGroupStyles, insertIntro, processMessages } from "../../utils.mjs";
 import { useMemo } from "react";
 //#region src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
 var useEnrichedMessages = (args) => {
-	const { channel, disableDateSeparator, groupStyles, headerPosition, hideDeletedMessages, hideNewMessageSeparator, maxTimeBetweenGroupedMessages, messages, noGroupByUser, reviewProcessedMessage } = args;
-	const { client } = useChatContext("useEnrichedMessages");
-	const { HeaderComponent } = useComponentContext("useEnrichedMessages");
+	const { channel, groupStyles, headerPosition, hideDeletedMessages, hideNewMessageSeparator, maxTimeBetweenGroupedMessages, messages, noGroupByUser, reviewProcessedMessage, withDateSeparator } = args;
+	const { client } = useChatContext();
+	const { HeaderComponent } = useComponentContext();
 	const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
-	const enableDateSeparator = !disableDateSeparator;
-	let messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
-		enableDateSeparator,
+	let messagesWithDates = !withDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
 		hideDeletedMessages,
 		hideNewMessageSeparator,
 		lastRead,
 		messages,
 		reviewProcessedMessage,
-		userId: client.userID || ""
+		userId: client.userID || "",
+		withDateSeparator
 	});
 	if (HeaderComponent) messagesWithDates = insertIntro(messagesWithDates, headerPosition);
 	const groupStylesFn = groupStyles || getGroupStyles;

package/dist/es/components/MessageList/hooks/MessageList/useEnrichedMessages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useEnrichedMessages.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from '../../utils';\nimport { getGroupStyles, insertIntro, processMessages } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { Channel, LocalMessage } from 'stream-chat';\n\nexport const useEnrichedMessages = (args: {\n  channel: Channel;\n  disableDateSeparator: boolean;\n  hideDeletedMessages: boolean;\n  hideNewMessageSeparator: boolean;\n  messages: LocalMessage[];\n  noGroupByUser: boolean;\n  groupStyles?: (\n    message: RenderedMessage,\n    previousMessage: RenderedMessage,\n    nextMessage: RenderedMessage,\n    noGroupByUser: boolean,\n    maxTimeBetweenGroupedMessages?: number,\n  ) => GroupStyle;\n  headerPosition?: number;\n  maxTimeBetweenGroupedMessages?: number;\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n}) => {\n  const {\n    channel,\n    disableDateSeparator,\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    maxTimeBetweenGroupedMessages,\n    messages,\n    noGroupByUser,\n    reviewProcessedMessage,\n  } = args;\n\n  const { client } = useChatContext('useEnrichedMessages');\n  const { HeaderComponent } = useComponentContext('useEnrichedMessages');\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  const enableDateSeparator = !disableDateSeparator;\n\n  let messagesWithDates =\n    !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator\n      ? messages\n      : processMessages({\n          enableDateSeparator,\n          hideDeletedMessages,\n          hideNewMessageSeparator,\n          lastRead,\n          messages,\n          reviewProcessedMessage,\n          userId: client.userID || '',\n        });\n\n  if (HeaderComponent) {\n    messagesWithDates = insertIntro(messagesWithDates, headerPosition);\n  }\n\n  const groupStylesFn = groupStyles || getGroupStyles;\n  const messageGroupStyles = useMemo(\n    () =>\n      messagesWithDates.reduce<Record<string, GroupStyle>>((acc, message, i) => {\n        const style = groupStylesFn(\n          message,\n          messagesWithDates[i - 1],\n          messagesWithDates[i + 1],\n          noGroupByUser,\n          maxTimeBetweenGroupedMessages,\n        );\n        if (style) acc[message.id] = style;\n        return acc;\n      }, {}),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [maxTimeBetweenGroupedMessages, messagesWithDates, noGroupByUser],\n  );\n\n  return { messageGroupStyles, messages: messagesWithDates };\n};\n"],"mappings":";;;;;AAUA,IAAa,uBAAuB,SAiB9B;CACJ,MAAM,EACJ,SACA,sBACA,aACA,gBACA,qBACA,yBACA,+BACA,UACA,eACA,2BACE;CAEJ,MAAM,EAAE,WAAW,eAAe,qBAAqB;CACvD,MAAM,EAAE,oBAAoB,oBAAoB,qBAAqB;CAErE,MAAM,WAAW,cAAc,QAAQ,WAAW,GAAG,CAAC,OAAO,CAAC;CAE9D,MAAM,sBAAsB,CAAC;CAE7B,IAAI,oBACF,CAAC,uBAAuB,CAAC,uBAAuB,0BAC5C,WACA,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,OAAO,UAAU;CAC3B,CAAC;CAEP,IAAI,iBACF,oBAAoB,YAAY,mBAAmB,cAAc;CAGnE,MAAM,gBAAgB,eAAe;CAkBrC,OAAO;EAAE,oBAjBkB,cAEvB,kBAAkB,QAAoC,KAAK,SAAS,MAAM;GACxE,MAAM,QAAQ,cACZ,SACA,kBAAkB,IAAI,IACtB,kBAAkB,IAAI,IACtB,eACA,6BACF;GACA,IAAI,OAAO,IAAI,QAAQ,MAAM;GAC7B,OAAO;EACT,GAAG,CAAC,CAAC,GAEP;GAAC;GAA+B;GAAmB;EAAa,CAGzD;EAAoB,UAAU;CAAkB;AAC3D"}
+{"version":3,"file":"useEnrichedMessages.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from '../../utils';\nimport { getGroupStyles, insertIntro, processMessages } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { Channel, LocalMessage, TimestampNS } from 'stream-chat';\n\nexport const useEnrichedMessages = (args: {\n  channel: Channel;\n  hideDeletedMessages: boolean;\n  hideNewMessageSeparator: boolean;\n  messages: LocalMessage[];\n  noGroupByUser: boolean;\n  withDateSeparator: boolean;\n  groupStyles?: (\n    message: RenderedMessage,\n    previousMessage: RenderedMessage,\n    nextMessage: RenderedMessage,\n    noGroupByUser: boolean,\n    maxTimeBetweenGroupedMessages?: number,\n  ) => GroupStyle;\n  headerPosition?: TimestampNS;\n  maxTimeBetweenGroupedMessages?: number;\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n}) => {\n  const {\n    channel,\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    maxTimeBetweenGroupedMessages,\n    messages,\n    noGroupByUser,\n    reviewProcessedMessage,\n    withDateSeparator,\n  } = args;\n\n  const { client } = useChatContext();\n  const { HeaderComponent } = useComponentContext();\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  let messagesWithDates =\n    !withDateSeparator && !hideDeletedMessages && hideNewMessageSeparator\n      ? messages\n      : processMessages({\n          hideDeletedMessages,\n          hideNewMessageSeparator,\n          lastRead,\n          messages,\n          reviewProcessedMessage,\n          userId: client.userID || '',\n          withDateSeparator,\n        });\n\n  if (HeaderComponent) {\n    messagesWithDates = insertIntro(messagesWithDates, headerPosition);\n  }\n\n  const groupStylesFn = groupStyles || getGroupStyles;\n  const messageGroupStyles = useMemo(\n    () =>\n      messagesWithDates.reduce<Record<string, GroupStyle>>((acc, message, i) => {\n        const style = groupStylesFn(\n          message,\n          messagesWithDates[i - 1],\n          messagesWithDates[i + 1],\n          noGroupByUser,\n          maxTimeBetweenGroupedMessages,\n        );\n        if (style) acc[message.id] = style;\n        return acc;\n      }, {}),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [maxTimeBetweenGroupedMessages, messagesWithDates, noGroupByUser],\n  );\n\n  return { messageGroupStyles, messages: messagesWithDates };\n};\n"],"mappings":";;;;;AAUA,IAAa,uBAAuB,SAiB9B;CACJ,MAAM,EACJ,SACA,aACA,gBACA,qBACA,yBACA,+BACA,UACA,eACA,wBACA,sBACE;CAEJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,MAAM,WAAW,cAAc,QAAQ,WAAW,GAAG,CAAC,OAAO,CAAC;CAE9D,IAAI,oBACF,CAAC,qBAAqB,CAAC,uBAAuB,0BAC1C,WACA,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,QAAQ,OAAO,UAAU;EACzB;CACF,CAAC;CAEP,IAAI,iBACF,oBAAoB,YAAY,mBAAmB,cAAc;CAGnE,MAAM,gBAAgB,eAAe;CAkBrC,OAAO;EAAE,oBAjBkB,cAEvB,kBAAkB,QAAoC,KAAK,SAAS,MAAM;GACxE,MAAM,QAAQ,cACZ,SACA,kBAAkB,IAAI,IACtB,kBAAkB,IAAI,IACtB,eACA,6BACF;GACA,IAAI,OAAO,IAAI,QAAQ,MAAM;GAC7B,OAAO;EACT,GAAG,CAAC,CAAC,GAEP;GAAC;GAA+B;GAAmB;EAAa,CAGzD;EAAoB,UAAU;CAAkB;AAC3D"}

package/dist/es/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.mjs

@@ -7,13 +7,13 @@ var THROTTLE_MS = 100;
 * For non-virtualized MessageList: keeps the floating date synced with the
 * separator currently pinned to the top boundary of the list viewport.
 */
-var useFloatingDateSeparatorMessageList = ({ disableDateSeparator, listElement, processedMessages }) => {
+var useFloatingDateSeparatorMessageList = ({ listElement, processedMessages, withDateSeparator }) => {
 	const [state, setState] = useState({
 		date: null,
 		visible: false
 	});
 	const update = useCallback(() => {
-		if (disableDateSeparator || !listElement || processedMessages.length === 0) {
+		if (!withDateSeparator || !listElement || processedMessages.length === 0) {
 			setState({
 				date: null,
 				visible: false
@@ -46,7 +46,7 @@ var useFloatingDateSeparatorMessageList = ({ disableDateSeparator, listElement,
 			visible: bestDate !== null
 		});
 	}, [
-		disableDateSeparator,
+		withDateSeparator,
 		listElement,
 		processedMessages
 	]);
@@ -55,15 +55,11 @@ var useFloatingDateSeparatorMessageList = ({ disableDateSeparator, listElement,
 		const throttled = throttle(update, THROTTLE_MS);
 		throttled();
 		listElement.addEventListener("scroll", throttled);
-		if (typeof ResizeObserver === "undefined") return () => {
-			listElement.removeEventListener("scroll", throttled);
-			throttled.cancel();
-		};
-		const resizeObserver = new ResizeObserver(throttled);
-		resizeObserver.observe(listElement);
+		const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(throttled) : void 0;
+		resizeObserver?.observe(listElement);
 		return () => {
 			listElement.removeEventListener("scroll", throttled);
-			resizeObserver.disconnect();
+			resizeObserver?.disconnect();
 			throttled.cancel();
 		};
 	}, [listElement, update]);

package/dist/es/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingDateSeparatorMessageList.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport throttle from 'lodash.throttle';\n\nimport type { RenderedMessage } from '../../utils';\n\nconst DATE_SEPARATOR_SELECTOR =\n  '.str-chat__date-separator:not(.str-chat__date-separator--floating)';\nconst THROTTLE_MS = 100;\n\nexport type UseFloatingDateSeparatorMessageListParams = {\n  disableDateSeparator: boolean;\n  listElement: HTMLDivElement | null;\n  processedMessages: RenderedMessage[];\n};\n\nexport type UseFloatingDateSeparatorMessageListResult = {\n  floatingDate: Date | null;\n  showFloatingDate: boolean;\n};\n\n/**\n * For non-virtualized MessageList: keeps the floating date synced with the\n * separator currently pinned to the top boundary of the list viewport.\n */\nexport const useFloatingDateSeparatorMessageList = ({\n  disableDateSeparator,\n  listElement,\n  processedMessages,\n}: UseFloatingDateSeparatorMessageListParams): UseFloatingDateSeparatorMessageListResult => {\n  const [state, setState] = useState<{ date: Date | null; visible: boolean }>({\n    date: null,\n    visible: false,\n  });\n\n  const update = useCallback(() => {\n    if (disableDateSeparator || !listElement || processedMessages.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const separators = listElement.querySelectorAll<HTMLElement>(DATE_SEPARATOR_SELECTOR);\n    if (separators.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const containerRect = listElement.getBoundingClientRect();\n    let bestDate: Date | null = null;\n    let bestTop = -Infinity;\n\n    for (const el of separators) {\n      const rect = el.getBoundingClientRect();\n      const dataDate = el.getAttribute('data-date');\n      if (!dataDate) continue;\n\n      const isAtOrAboveTopBoundary = rect.top <= containerRect.top;\n\n      if (isAtOrAboveTopBoundary && rect.top > bestTop) {\n        bestTop = rect.top;\n        const d = new Date(dataDate);\n        if (!isNaN(d.getTime())) bestDate = d;\n      }\n    }\n\n    setState({\n      date: bestDate,\n      visible: bestDate !== null,\n    });\n  }, [disableDateSeparator, listElement, processedMessages]);\n\n  useEffect(() => {\n    if (!listElement) return;\n\n    const throttled = throttle(update, THROTTLE_MS);\n\n    throttled();\n    listElement.addEventListener('scroll', throttled);\n\n    if (typeof ResizeObserver === 'undefined') {\n      return () => {\n        listElement.removeEventListener('scroll', throttled);\n        throttled.cancel();\n      };\n    }\n\n    const resizeObserver = new ResizeObserver(throttled);\n    resizeObserver.observe(listElement);\n\n    return () => {\n      listElement.removeEventListener('scroll', throttled);\n      resizeObserver.disconnect();\n      throttled.cancel();\n    };\n  }, [listElement, update]);\n\n  return {\n    floatingDate: state.date,\n    showFloatingDate: state.visible,\n  };\n};\n"],"mappings":";;;AAKA,IAAM,0BACJ;AACF,IAAM,cAAc;;;;;AAiBpB,IAAa,uCAAuC,EAClD,sBACA,aACA,wBAC0F;CAC1F,MAAM,CAAC,OAAO,YAAY,SAAkD;EAC1E,MAAM;EACN,SAAS;CACX,CAAC;CAED,MAAM,SAAS,kBAAkB;EAC/B,IAAI,wBAAwB,CAAC,eAAe,kBAAkB,WAAW,GAAG;GAC1E,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,aAAa,YAAY,iBAA8B,uBAAuB;EACpF,IAAI,WAAW,WAAW,GAAG;GAC3B,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,gBAAgB,YAAY,sBAAsB;EACxD,IAAI,WAAwB;EAC5B,IAAI,UAAU;EAEd,KAAK,MAAM,MAAM,YAAY;GAC3B,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,WAAW,GAAG,aAAa,WAAW;GAC5C,IAAI,CAAC,UAAU;GAIf,IAF+B,KAAK,OAAO,cAAc,OAE3B,KAAK,MAAM,SAAS;IAChD,UAAU,KAAK;IACf,MAAM,IAAI,IAAI,KAAK,QAAQ;IAC3B,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,WAAW;GACtC;EACF;EAEA,SAAS;GACP,MAAM;GACN,SAAS,aAAa;EACxB,CAAC;CACH,GAAG;EAAC;EAAsB;EAAa;CAAiB,CAAC;CAEzD,gBAAgB;EACd,IAAI,CAAC,aAAa;EAElB,MAAM,YAAY,SAAS,QAAQ,WAAW;EAE9C,UAAU;EACV,YAAY,iBAAiB,UAAU,SAAS;EAEhD,IAAI,OAAO,mBAAmB,aAC5B,aAAa;GACX,YAAY,oBAAoB,UAAU,SAAS;GACnD,UAAU,OAAO;EACnB;EAGF,MAAM,iBAAiB,IAAI,eAAe,SAAS;EACnD,eAAe,QAAQ,WAAW;EAElC,aAAa;GACX,YAAY,oBAAoB,UAAU,SAAS;GACnD,eAAe,WAAW;GAC1B,UAAU,OAAO;EACnB;CACF,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,OAAO;EACL,cAAc,MAAM;EACpB,kBAAkB,MAAM;CAC1B;AACF"}
+{"version":3,"file":"useFloatingDateSeparatorMessageList.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport throttle from 'lodash.throttle';\n\nimport type { RenderedMessage } from '../../utils';\n\nconst DATE_SEPARATOR_SELECTOR =\n  '.str-chat__date-separator:not(.str-chat__date-separator--floating)';\nconst THROTTLE_MS = 100;\n\nexport type UseFloatingDateSeparatorMessageListParams = {\n  listElement: HTMLDivElement | null;\n  processedMessages: RenderedMessage[];\n  withDateSeparator: boolean;\n};\n\nexport type UseFloatingDateSeparatorMessageListResult = {\n  floatingDate: Date | null;\n  showFloatingDate: boolean;\n};\n\n/**\n * For non-virtualized MessageList: keeps the floating date synced with the\n * separator currently pinned to the top boundary of the list viewport.\n */\nexport const useFloatingDateSeparatorMessageList = ({\n  listElement,\n  processedMessages,\n  withDateSeparator,\n}: UseFloatingDateSeparatorMessageListParams): UseFloatingDateSeparatorMessageListResult => {\n  const [state, setState] = useState<{ date: Date | null; visible: boolean }>({\n    date: null,\n    visible: false,\n  });\n\n  const update = useCallback(() => {\n    if (!withDateSeparator || !listElement || processedMessages.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const separators = listElement.querySelectorAll<HTMLElement>(DATE_SEPARATOR_SELECTOR);\n    if (separators.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const containerRect = listElement.getBoundingClientRect();\n    let bestDate: Date | null = null;\n    let bestTop = -Infinity;\n\n    for (const el of separators) {\n      const rect = el.getBoundingClientRect();\n      const dataDate = el.getAttribute('data-date');\n      if (!dataDate) continue;\n\n      const isAtOrAboveTopBoundary = rect.top <= containerRect.top;\n\n      if (isAtOrAboveTopBoundary && rect.top > bestTop) {\n        bestTop = rect.top;\n        const d = new Date(dataDate);\n        if (!isNaN(d.getTime())) bestDate = d;\n      }\n    }\n\n    setState({\n      date: bestDate,\n      visible: bestDate !== null,\n    });\n  }, [withDateSeparator, listElement, processedMessages]);\n\n  useEffect(() => {\n    if (!listElement) return;\n\n    const throttled = throttle(update, THROTTLE_MS);\n\n    throttled();\n    listElement.addEventListener('scroll', throttled);\n    const resizeObserver =\n      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(throttled) : undefined;\n    resizeObserver?.observe(listElement);\n\n    return () => {\n      listElement.removeEventListener('scroll', throttled);\n      resizeObserver?.disconnect();\n      throttled.cancel();\n    };\n  }, [listElement, update]);\n\n  return {\n    floatingDate: state.date,\n    showFloatingDate: state.visible,\n  };\n};\n"],"mappings":";;;AAKA,IAAM,0BACJ;AACF,IAAM,cAAc;;;;;AAiBpB,IAAa,uCAAuC,EAClD,aACA,mBACA,wBAC0F;CAC1F,MAAM,CAAC,OAAO,YAAY,SAAkD;EAC1E,MAAM;EACN,SAAS;CACX,CAAC;CAED,MAAM,SAAS,kBAAkB;EAC/B,IAAI,CAAC,qBAAqB,CAAC,eAAe,kBAAkB,WAAW,GAAG;GACxE,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,aAAa,YAAY,iBAA8B,uBAAuB;EACpF,IAAI,WAAW,WAAW,GAAG;GAC3B,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,gBAAgB,YAAY,sBAAsB;EACxD,IAAI,WAAwB;EAC5B,IAAI,UAAU;EAEd,KAAK,MAAM,MAAM,YAAY;GAC3B,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,WAAW,GAAG,aAAa,WAAW;GAC5C,IAAI,CAAC,UAAU;GAIf,IAF+B,KAAK,OAAO,cAAc,OAE3B,KAAK,MAAM,SAAS;IAChD,UAAU,KAAK;IACf,MAAM,IAAI,IAAI,KAAK,QAAQ;IAC3B,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,WAAW;GACtC;EACF;EAEA,SAAS;GACP,MAAM;GACN,SAAS,aAAa;EACxB,CAAC;CACH,GAAG;EAAC;EAAmB;EAAa;CAAiB,CAAC;CAEtD,gBAAgB;EACd,IAAI,CAAC,aAAa;EAElB,MAAM,YAAY,SAAS,QAAQ,WAAW;EAE9C,UAAU;EACV,YAAY,iBAAiB,UAAU,SAAS;EAChD,MAAM,iBACJ,OAAO,mBAAmB,cAAc,IAAI,eAAe,SAAS,IAAI,KAAA;EAC1E,gBAAgB,QAAQ,WAAW;EAEnC,aAAa;GACX,YAAY,oBAAoB,UAAU,SAAS;GACnD,gBAAgB,WAAW;GAC3B,UAAU,OAAO;EACnB;CACF,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,OAAO;EACL,cAAc,MAAM;EACpB,kBAAkB,MAAM;CAC1B;AACF"}

package/dist/es/components/MessageList/hooks/MessageList/useMessageListElements.mjs

@@ -1,16 +1,19 @@
-import { useChannelStateContext } from "../../../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../../../context/ChatContext.mjs";
 import { useComponentContext } from "../../../../context/ComponentContext.mjs";
 import { getLastReceived } from "../../utils.mjs";
 import { useLastReadData } from "../useLastReadData.mjs";
 import { useLastDeliveredData } from "../useLastDeliveredData.mjs";
+import { useChannel } from "../../../../context/useChannel.mjs";
 import { useMemo } from "react";
 //#region src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
+var unreadStateSnapshotSelector = (state) => state;
 var useMessageListElements = (props) => {
-	const { channelUnreadUiState, enrichedMessages, internalMessageProps, lastOwnMessage, messageGroupStyles, messages, renderMessages, returnAllReadData, threadList } = props;
-	const { customClasses } = useChatContext("useMessageListElements");
-	const { channel } = useChannelStateContext();
-	const components = useComponentContext("useMessageListElements");
+	const { enrichedMessages, focusedMessageId, internalMessageProps, lastOwnMessage, messageGroupStyles, messages, renderMessages, returnAllReadData } = props;
+	const { customClasses } = useChatContext();
+	const channel = useChannel();
+	const components = useComponentContext();
+	const channelUnreadUiState = useStateStore(channel.messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
 	const readData = useLastReadData({
 		channel,
 		lastOwnMessage,
@@ -25,9 +28,11 @@ var useMessageListElements = (props) => {
 	});
 	const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [enrichedMessages]);
 	return useMemo(() => renderMessages({
+		channel,
 		channelUnreadUiState,
 		components,
 		customClasses,
+		focusedMessageId,
 		lastOwnMessage,
 		lastReceivedMessageId,
 		messageGroupStyles,
@@ -36,20 +41,23 @@ var useMessageListElements = (props) => {
 		readData,
 		sharedMessageProps: {
 			...internalMessageProps,
-			returnAllReadData,
-			threadList
+			returnAllReadData
 		}
 	}), [
+		channel,
+		channelUnreadUiState,
+		components,
+		customClasses,
 		enrichedMessages,
+		focusedMessageId,
 		internalMessageProps,
 		lastOwnMessage,
 		lastReceivedMessageId,
 		messageGroupStyles,
-		channelUnreadUiState,
+		ownMessagesDeliveredToOthers,
 		readData,
 		renderMessages,
-		returnAllReadData,
-		threadList
+		returnAllReadData
 	]);
 };
 //#endregion

package/dist/es/components/MessageList/hooks/MessageList/useMessageListElements.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageListElements.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx"],"sourcesContent":["import type React from 'react';\nimport { useMemo } from 'react';\n\nimport { useLastReadData } from '../useLastReadData';\nimport type { GroupStyle, RenderedMessage } from '../../utils';\nimport { getLastReceived } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { LocalMessage } from 'stream-chat';\nimport type { ChannelUnreadUiState } from '../../../../types/types';\nimport type { MessageRenderer, SharedMessageProps } from '../../renderMessages';\nimport { useChannelStateContext } from '../../../../context';\nimport { useLastDeliveredData } from '../useLastDeliveredData';\n\ntype UseMessageListElementsProps = {\n  messages: LocalMessage[];\n  enrichedMessages: RenderedMessage[];\n  internalMessageProps: SharedMessageProps;\n  messageGroupStyles: Record<string, GroupStyle>;\n  renderMessages: MessageRenderer;\n  returnAllReadData: boolean;\n  threadList: boolean;\n  channelUnreadUiState?: ChannelUnreadUiState;\n  lastOwnMessage?: LocalMessage;\n};\n\nexport const useMessageListElements = (props: UseMessageListElementsProps) => {\n  const {\n    channelUnreadUiState,\n    enrichedMessages,\n    internalMessageProps,\n    lastOwnMessage,\n    messageGroupStyles,\n    messages,\n    renderMessages,\n    returnAllReadData,\n    threadList,\n  } = props;\n\n  const { customClasses } = useChatContext('useMessageListElements');\n  const { channel } = useChannelStateContext();\n  const components = useComponentContext('useMessageListElements');\n\n  // get the readData, but only for messages submitted by the user themselves\n  const readData = useLastReadData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const ownMessagesDeliveredToOthers = useLastDeliveredData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const lastReceivedMessageId = useMemo(\n    () => getLastReceived(enrichedMessages),\n    [enrichedMessages],\n  );\n\n  const elements: React.ReactNode[] = useMemo(\n    () =>\n      renderMessages({\n        channelUnreadUiState,\n        components,\n        customClasses,\n        lastOwnMessage,\n        lastReceivedMessageId,\n        messageGroupStyles,\n        messages: enrichedMessages,\n        ownMessagesDeliveredToOthers,\n        readData,\n        sharedMessageProps: { ...internalMessageProps, returnAllReadData, threadList },\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      enrichedMessages,\n      internalMessageProps,\n      lastOwnMessage,\n      lastReceivedMessageId,\n      messageGroupStyles,\n      channelUnreadUiState,\n      readData,\n      renderMessages,\n      returnAllReadData,\n      threadList,\n    ],\n  );\n\n  return elements;\n};\n"],"mappings":";;;;;;;;AA4BA,IAAa,0BAA0B,UAAuC;CAC5E,MAAM,EACJ,sBACA,kBACA,sBACA,gBACA,oBACA,UACA,gBACA,mBACA,eACE;CAEJ,MAAM,EAAE,kBAAkB,eAAe,wBAAwB;CACjE,MAAM,EAAE,YAAY,uBAAuB;CAC3C,MAAM,aAAa,oBAAoB,wBAAwB;CAG/D,MAAM,WAAW,gBAAgB;EAC/B;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,+BAA+B,qBAAqB;EACxD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB,cACtB,gBAAgB,gBAAgB,GACtC,CAAC,gBAAgB,CACnB;CA+BA,OA7BoC,cAEhC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA,oBAAoB;GAAE,GAAG;GAAsB;GAAmB;EAAW;CAC/E,CAAC,GAEH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAGK;AACT"}
+{"version":3,"file":"useMessageListElements.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx"],"sourcesContent":["import type React from 'react';\nimport { useMemo } from 'react';\n\nimport { useLastReadData } from '../useLastReadData';\nimport type { GroupStyle, RenderedMessage } from '../../utils';\nimport { getLastReceived } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { LocalMessage, UnreadSnapshotState } from 'stream-chat';\nimport type { MessageRenderer, SharedMessageProps } from '../../renderMessages';\nimport { useChannel } from '../../../../context';\nimport { useLastDeliveredData } from '../useLastDeliveredData';\nimport { useStateStore } from '../../../../store';\n\ntype UseMessageListElementsProps = {\n  messages: LocalMessage[];\n  enrichedMessages: RenderedMessage[];\n  focusedMessageId?: string | null;\n  internalMessageProps: SharedMessageProps;\n  messageGroupStyles: Record<string, GroupStyle>;\n  renderMessages: MessageRenderer;\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => state;\n\nexport const useMessageListElements = (props: UseMessageListElementsProps) => {\n  const {\n    enrichedMessages,\n    focusedMessageId,\n    internalMessageProps,\n    lastOwnMessage,\n    messageGroupStyles,\n    messages,\n    renderMessages,\n    returnAllReadData,\n  } = props;\n\n  const { customClasses } = useChatContext();\n  const channel = useChannel();\n  const components = useComponentContext();\n  const channelUnreadUiState = useStateStore(\n    channel.messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n  // get the readData, but only for messages submitted by the user themselves\n  const readData = useLastReadData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const ownMessagesDeliveredToOthers = useLastDeliveredData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const lastReceivedMessageId = useMemo(\n    () => getLastReceived(enrichedMessages),\n    [enrichedMessages],\n  );\n\n  const elements: React.ReactNode[] = useMemo(\n    () =>\n      renderMessages({\n        channel,\n        channelUnreadUiState,\n        components,\n        customClasses,\n        focusedMessageId,\n        lastOwnMessage,\n        lastReceivedMessageId,\n        messageGroupStyles,\n        messages: enrichedMessages,\n        ownMessagesDeliveredToOthers,\n        readData,\n        sharedMessageProps: { ...internalMessageProps, returnAllReadData },\n      }),\n    [\n      channel,\n      channelUnreadUiState,\n      components,\n      customClasses,\n      enrichedMessages,\n      focusedMessageId,\n      internalMessageProps,\n      lastOwnMessage,\n      lastReceivedMessageId,\n      messageGroupStyles,\n      ownMessagesDeliveredToOthers,\n      readData,\n      renderMessages,\n      returnAllReadData,\n    ],\n  );\n\n  return elements;\n};\n"],"mappings":";;;;;;;;;AA2BA,IAAM,+BAA+B,UAA+B;AAEpE,IAAa,0BAA0B,UAAuC;CAC5E,MAAM,EACJ,kBACA,kBACA,sBACA,gBACA,oBACA,UACA,gBACA,sBACE;CAEJ,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,UAAU,WAAW;CAC3B,MAAM,aAAa,oBAAoB;CACvC,MAAM,uBAAuB,cAC3B,QAAQ,iBAAiB,qBACzB,2BACF;CAEA,MAAM,WAAW,gBAAgB;EAC/B;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,+BAA+B,qBAAqB;EACxD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB,cACtB,gBAAgB,gBAAgB,GACtC,CAAC,gBAAgB,CACnB;CAoCA,OAlCoC,cAEhC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA,oBAAoB;GAAE,GAAG;GAAsB;EAAkB;CACnE,CAAC,GACH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAGK;AACT"}

package/dist/es/components/MessageList/hooks/MessageList/useMessageListScrollManager.mjs

@@ -18,8 +18,8 @@ var messageIdsMatchAsSuffix = (prevMessages, newMessages) => prevMessages.every(
 *    are not comparable as a single contiguous list.
 */
 function useMessageListScrollManager(params) {
-	const { captureAnchor, disableScrollManagement = false, justReachedLatestMessageSet = false, loadingMore = false, loadMoreScrollThreshold, onScrollBy, onScrollToTop, restoreAnchor, scrollContainerMeasures, scrolledUpThreshold, scrollToBottom, showNewMessages } = params;
-	const { client } = useChatContext("useMessageListScrollManager");
+	const { captureAnchor, disableScrollManagement = false, justReachedLatestMessageSet = false, loadingMore = false, loadMoreScrollThreshold, onScrollBy, onScrollToTop, restoreAnchor, scrollContainerMeasures, scrolledUpThreshold, scrollToBottom, showNewMessages, suppressAutoscroll = false } = params;
+	const { client } = useChatContext();
 	const measures = useRef({
 		offsetHeight: 0,
 		scrollHeight: 0,
@@ -94,7 +94,8 @@ function useMessageListScrollManager(params) {
 					previousLoadingMoreRef.current = loadingMore;
 					return;
 				}
-				if (lastNewMessage.user?.id === client.userID || wasAtBottom) scrollToBottom();
+				const lastMessageIsFromCurrentUser = lastNewMessage.user?.id === client.userID;
+				if (!suppressAutoscroll && (lastMessageIsFromCurrentUser || wasAtBottom)) scrollToBottom();
 				else showNewMessages();
 			} else olderPaginationState.current = {
 				anchor: null,
@@ -121,7 +122,8 @@ function useMessageListScrollManager(params) {
 		messages,
 		params.messages,
 		restoreAnchor,
-		scrollContainerMeasures
+		scrollContainerMeasures,
+		suppressAutoscroll
 	]);
 	return (scrollTopValue, getLatestAnchor = null) => {
 		scrollTop.current = scrollTopValue;