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

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.mjs","names":[],"sources":["../../../../src/components/MessageList/MessageList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nimport {\n  useEnrichedMessages,\n  useMessageListElements,\n  useScrollLocationLogic,\n  useUnreadMessagesNotification,\n} from './hooks/MessageList';\nimport { useMarkRead } from './hooks/useMarkRead';\nimport { NewMessageNotification as DefaultNewMessageNotification } from './NewMessageNotification';\nimport { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';\n\nimport type { ChannelActionContextValue } from '../../context/ChannelActionContext';\nimport { useChannelActionContext } from '../../context/ChannelActionContext';\nimport type { ChannelStateContextValue } from '../../context/ChannelStateContext';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { DialogManagerProvider } from '../../context';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageListContextProvider } from '../../context/MessageListContext';\nimport { MessageTranslationViewProvider } from '../../context/MessageTranslationViewContext';\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport type { InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';\nimport { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';\nimport { MESSAGE_ACTIONS } from '../Message/utils';\nimport { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';\nimport { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';\n\nimport { FloatingDateSeparator } from './FloatingDateSeparator';\nimport type { MessageRenderer } from './renderMessages';\nimport { defaultRenderMessages } from './renderMessages';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nimport type { LocalMessage } from 'stream-chat';\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';\nimport type { MessageProps } from '../Message/types';\n\nimport {\n  DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,\n  DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n} from '../../constants/limits';\nimport { useLastOwnMessage } from './hooks/useLastOwnMessage';\nimport { useReducedMotionPreference } from './hooks/useReducedMotionPreference';\nimport { ScrollToLatestMessageButton as DefaultScrollToLatestMessageButton } from './ScrollToLatestMessageButton';\nimport {\n  NotificationList as DefaultNotificationList,\n  useNotificationTarget,\n} from '../Notifications';\nimport { useIncomingMessageAnnouncements } from '../Accessibility';\n\ntype MessageListWithContextProps = Omit<\n  ChannelStateContextValue,\n  'members' | 'mutes' | 'watchers'\n> &\n  MessageListProps;\n\ntype JumpToLatestPhase = 'idle' | 'waiting-for-render' | 'animating';\ntype HighlightedJumpPhase = 'idle' | 'waiting-for-render' | 'animating';\n\nconst getMessageSetSignature = (messages: LocalMessage[]) =>\n  `${messages.length}:${messages[0]?.id || ''}:${messages[messages.length - 1]?.id || ''}`;\n\nconst getMessageTimestamp = (message?: LocalMessage) =>\n  message?.created_at?.getTime?.() ?? null;\n\nconst MessageListWithContext = (props: MessageListWithContextProps) => {\n  const {\n    channel,\n    channelUnreadUiState,\n    disableDateSeparator = false,\n    groupStyles,\n    hasMoreNewer = false,\n    headerPosition,\n    hideDeletedMessages = false,\n    hideNewMessageSeparator = false,\n    highlightedMessageId,\n    internalInfiniteScrollProps: {\n      threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,\n      ...restInternalInfiniteScrollProps\n    } = {},\n    jumpToLatestMessage = () => Promise.resolve(),\n    loadMore: loadMoreCallback,\n    loadMoreNewer: loadMoreNewerCallback,\n    maxTimeBetweenGroupedMessages,\n    messageActions = Object.keys(MESSAGE_ACTIONS),\n    messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n    messages = [],\n    noGroupByUser = false,\n    reactionDetailsSort,\n    renderMessages = defaultRenderMessages,\n    returnAllReadData = false,\n    reviewProcessedMessage,\n    showUnreadNotificationAlways,\n    sortReactions,\n    suppressAutoscroll,\n    thread,\n    threadList = false,\n    unsafeHTML = false,\n  } = props;\n\n  const [listElement, setListElement] = React.useState<HTMLDivElement | null>(null);\n  const [jumpToLatestPhase, setJumpToLatestPhase] =\n    React.useState<JumpToLatestPhase>('idle');\n  const [highlightedJumpPhase, setHighlightedJumpPhase] =\n    React.useState<HighlightedJumpPhase>('idle');\n  const [jumpSourceMessageSetSignature, setJumpSourceMessageSetSignature] =\n    React.useState<string | null>(null);\n  const previousHasMoreNewerRef = React.useRef(hasMoreNewer);\n  const previousMessageSetSignatureRef = React.useRef('');\n  const previousMessageSetBoundsRef = React.useRef<{\n    firstTimestamp: number | null;\n    lastTimestamp: number | null;\n  }>({\n    firstTimestamp: null,\n    lastTimestamp: null,\n  });\n\n  const { customClasses } = useChatContext('MessageList');\n  const prefersReducedMotion = useReducedMotionPreference();\n  const scrollBehavior = prefersReducedMotion ? 'auto' : 'smooth';\n\n  const {\n    EmptyStateIndicator = DefaultEmptyStateIndicator,\n    LoadingIndicator = DefaultLoadingIndicator,\n    MessageListMainPanel = DefaultMessageListMainPanel,\n    MessageListWrapper = 'ul',\n    NewMessageNotification = DefaultNewMessageNotification,\n    NotificationList = DefaultNotificationList,\n    ScrollToLatestMessageButton = DefaultScrollToLatestMessageButton,\n    TypingIndicator = DefaultTypingIndicator,\n    UnreadMessagesNotification = DefaultUnreadMessagesNotification,\n  } = useComponentContext();\n\n  const notificationTarget = useNotificationTarget();\n  const messageSetSignature = React.useMemo(\n    () => getMessageSetSignature(messages),\n    [messages],\n  );\n  const messageSetBounds = React.useMemo(\n    () => ({\n      firstTimestamp: getMessageTimestamp(messages[0]),\n      lastTimestamp: getMessageTimestamp(messages[messages.length - 1]),\n    }),\n    [messages],\n  );\n  const isJumpingToLatest = jumpToLatestPhase !== 'idle';\n  const isHighlightedJumpRequested = !!highlightedMessageId;\n  // Highlighted jumps temporarily disable prepend pagination so a target\n  // message rendered near the top does not immediately load the previous page.\n  const isJumpingToHighlightedMessage = highlightedJumpPhase !== 'idle';\n  const justReachedLatestMergedSet = previousHasMoreNewerRef.current && !hasMoreNewer;\n\n  const {\n    hasNewMessages,\n    isMessageListScrolledToBottom,\n    onScroll,\n    scrollToBottom,\n    wrapperRect,\n  } = useScrollLocationLogic({\n    disableAutoScrollToBottom:\n      isJumpingToLatest || isHighlightedJumpRequested || justReachedLatestMergedSet,\n    disableScrollManagement: isJumpingToLatest || isJumpingToHighlightedMessage,\n    hasMoreNewer,\n    listElement,\n    loadingMore: props.loadingMore,\n    loadMoreScrollThreshold,\n    messages, // todo: is it correct to base the scroll logic on an array that does not contain date separators or intro?\n    scrolledUpThreshold: props.scrolledUpThreshold,\n    suppressAutoscroll,\n  });\n  const isTypingIndicatorScrolledToBottom =\n    isMessageListScrolledToBottom &&\n    !isJumpingToLatest &&\n    !isJumpingToHighlightedMessage &&\n    !justReachedLatestMergedSet;\n\n  const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({\n    isMessageListScrolledToBottom,\n    listElement,\n    showAlways: !!showUnreadNotificationAlways,\n    unreadCount: channelUnreadUiState?.unread_messages,\n  });\n\n  useMarkRead({\n    isMessageListScrolledToBottom: isTypingIndicatorScrolledToBottom,\n    messageListIsThread: threadList,\n    wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,\n  });\n\n  const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({\n    channel,\n    disableDateSeparator,\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    maxTimeBetweenGroupedMessages,\n    messages,\n    noGroupByUser,\n    reviewProcessedMessage,\n  });\n\n  const lastOwnMessage = useLastOwnMessage({\n    messages,\n    ownUserId: channel.getClient().user?.id,\n  });\n\n  const elements = useMessageListElements({\n    channelUnreadUiState,\n    enrichedMessages,\n    internalMessageProps: {\n      additionalMessageComposerProps: props.additionalMessageComposerProps,\n      closeReactionSelectorOnClick: props.closeReactionSelectorOnClick,\n      disableQuotedMessages: props.disableQuotedMessages,\n      formatDate: props.formatDate,\n      Message: props.Message,\n      messageActions,\n      messageListRect: wrapperRect,\n      onMentionsClick: props.onMentionsClick,\n      onMentionsHover: props.onMentionsHover,\n      onUserClick: props.onUserClick,\n      onUserHover: props.onUserHover,\n      openThread: props.openThread,\n      reactionDetailsSort,\n      renderText: props.renderText,\n      retrySendMessage: props.retrySendMessage,\n      showAvatar: props.showAvatar,\n      sortReactions,\n      unsafeHTML,\n    },\n    lastOwnMessage,\n    messageGroupStyles,\n    messages,\n    renderMessages,\n    returnAllReadData,\n    threadList,\n  });\n\n  useIncomingMessageAnnouncements({\n    activeThreadId: thread?.id,\n    channel,\n    ownUserId: channel.getClient().user?.id,\n    threadList,\n  });\n\n  const messageListClass = customClasses?.messageList || 'str-chat__message-list';\n\n  const loadMore = React.useCallback(() => {\n    if (loadMoreCallback) {\n      loadMoreCallback(messageLimit);\n    }\n  }, [loadMoreCallback, messageLimit]);\n\n  const loadMoreNewer = React.useCallback(() => {\n    if (loadMoreNewerCallback) {\n      loadMoreNewerCallback(messageLimit);\n    }\n  }, [loadMoreNewerCallback, messageLimit]);\n\n  const scrollToBottomFromNotification = React.useCallback(async () => {\n    if (hasMoreNewer) {\n      setJumpSourceMessageSetSignature(messageSetSignature);\n      setJumpToLatestPhase('waiting-for-render');\n      try {\n        await jumpToLatestMessage();\n      } catch (error) {\n        setJumpSourceMessageSetSignature(null);\n        setJumpToLatestPhase('idle');\n        throw error;\n      }\n      return;\n    }\n\n    scrollToBottom({ behavior: scrollBehavior });\n  }, [\n    scrollBehavior,\n    hasMoreNewer,\n    jumpToLatestMessage,\n    messageSetSignature,\n    scrollToBottom,\n  ]);\n\n  React.useLayoutEffect(() => {\n    if (\n      jumpToLatestPhase !== 'waiting-for-render' ||\n      hasMoreNewer ||\n      !listElement?.scrollTo ||\n      messageSetSignature === jumpSourceMessageSetSignature\n    ) {\n      return;\n    }\n\n    listElement.scrollTo({ top: 0 });\n\n    const animationFrameId = requestAnimationFrame(() => {\n      setJumpToLatestPhase('animating');\n      listElement.scrollTo({\n        behavior: scrollBehavior,\n        top: listElement.scrollHeight,\n      });\n    });\n\n    return () => cancelAnimationFrame(animationFrameId);\n  }, [\n    scrollBehavior,\n    hasMoreNewer,\n    jumpSourceMessageSetSignature,\n    jumpToLatestPhase,\n    listElement,\n    messageSetSignature,\n  ]);\n\n  React.useLayoutEffect(() => {\n    if (jumpToLatestPhase !== 'animating' || !listElement?.scrollTo) {\n      return;\n    }\n\n    const finalize = () => {\n      listElement.scrollTo({ top: listElement.scrollHeight });\n      setJumpSourceMessageSetSignature(null);\n      setJumpToLatestPhase('idle');\n    };\n\n    const settleTimeoutId = setTimeout(finalize, 500);\n\n    return () => {\n      clearTimeout(settleTimeoutId);\n    };\n  }, [jumpToLatestPhase, listElement]);\n\n  React.useLayoutEffect(() => {\n    if (!highlightedMessageId) {\n      setHighlightedJumpPhase('idle');\n      return;\n    }\n\n    const element = listElement?.querySelector(\n      `[data-message-id='${highlightedMessageId}']`,\n    );\n    if (!element) {\n      setHighlightedJumpPhase('waiting-for-render');\n      return;\n    }\n\n    const messageSetChanged =\n      previousMessageSetSignatureRef.current !== messageSetSignature;\n    setHighlightedJumpPhase(messageSetChanged ? 'animating' : 'idle');\n    let settleTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    const animationFrameId = requestAnimationFrame(() => {\n      element.scrollIntoView({\n        behavior: scrollBehavior,\n        block: 'center',\n      });\n\n      if (!messageSetChanged || !listElement?.scrollTo) {\n        setHighlightedJumpPhase('idle');\n        return;\n      }\n\n      settleTimeoutId = setTimeout(() => {\n        const elementRect = element.getBoundingClientRect();\n        const listRect = listElement.getBoundingClientRect();\n        const targetTop =\n          listElement.scrollTop +\n          (elementRect.top - listRect.top) -\n          (listElement.clientHeight - elementRect.height) / 2;\n\n        listElement.scrollTo({ top: Math.max(targetTop, 0) });\n        setHighlightedJumpPhase('idle');\n      }, 500);\n    });\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n      if (settleTimeoutId) {\n        clearTimeout(settleTimeoutId);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollBehavior, highlightedMessageId, messageSetSignature]);\n\n  React.useEffect(() => {\n    previousHasMoreNewerRef.current = hasMoreNewer;\n  }, [hasMoreNewer]);\n\n  React.useEffect(() => {\n    previousMessageSetSignatureRef.current = messageSetSignature;\n    previousMessageSetBoundsRef.current = messageSetBounds;\n  }, [messageSetBounds, messageSetSignature]);\n\n  const id = useStableId();\n\n  const showEmptyStateIndicator = elements.length === 0 && !threadList;\n  const dialogManagerId = threadList\n    ? `message-list-dialog-manager-thread-${id}`\n    : `message-list-dialog-manager-${id}`;\n\n  return (\n    <MessageListContextProvider\n      value={{\n        listElement,\n        processedMessages: enrichedMessages,\n        scrollToBottom,\n      }}\n    >\n      <MessageTranslationViewProvider>\n        <MessageListMainPanel>\n          <DialogManagerProvider id={dialogManagerId}>\n            {!threadList && showUnreadMessagesNotification && (\n              <UnreadMessagesNotification\n                unreadCount={channelUnreadUiState?.unread_messages}\n              />\n            )}\n            <FloatingDateSeparator\n              disableDateSeparator={disableDateSeparator}\n              listElement={listElement}\n              processedMessages={enrichedMessages}\n            />\n            <div\n              className={clsx(messageListClass, customClasses?.threadList)}\n              onScroll={onScroll}\n              ref={setListElement}\n              tabIndex={0}\n            >\n              {showEmptyStateIndicator ? (\n                <EmptyStateIndicator listType={threadList ? 'thread' : 'message'} />\n              ) : (\n                <InfiniteScroll\n                  className='str-chat__message-list-scroll'\n                  data-testid='reverse-infinite-scroll'\n                  hasNextPage={props.hasMoreNewer}\n                  hasPreviousPage={isJumpingToHighlightedMessage ? false : props.hasMore}\n                  head={props.head}\n                  isLoading={Boolean(\n                    props.loadingMore || props.loadingMoreForJumpToChannelMessage,\n                  )}\n                  loader={\n                    <div className='str-chat__list__loading' key='loading-indicator'>\n                      {(props.loadingMore ||\n                        props.loadingMoreForJumpToChannelMessage) && <LoadingIndicator />}\n                    </div>\n                  }\n                  loadNextPage={loadMoreNewer}\n                  loadPreviousPage={\n                    isJumpingToHighlightedMessage ? () => undefined : loadMore\n                  }\n                  threshold={loadMoreScrollThreshold}\n                  {...restInternalInfiniteScrollProps}\n                >\n                  <MessageListWrapper className='str-chat__ul'>\n                    {elements}\n                  </MessageListWrapper>\n                  <TypingIndicator\n                    isMessageListScrolledToBottom={isTypingIndicatorScrolledToBottom}\n                    scrollToBottom={scrollToBottom}\n                    threadList={threadList}\n                  />\n\n                  <div key='bottom' />\n                </InfiniteScroll>\n              )}\n            </div>\n            <NewMessageNotification\n              newMessageCount={channelUnreadUiState?.unread_messages}\n              showNotification={hasNewMessages || hasMoreNewer}\n            />\n            <ScrollToLatestMessageButton\n              isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n              isNotAtLatestMessageSet={hasMoreNewer}\n              onClick={scrollToBottomFromNotification}\n              threadList={threadList}\n            />\n          </DialogManagerProvider>\n          <NotificationList panel={notificationTarget} />\n        </MessageListMainPanel>\n      </MessageTranslationViewProvider>\n    </MessageListContextProvider>\n  );\n};\n\ntype PropsDrilledToMessage =\n  | 'additionalMessageComposerProps'\n  | 'closeReactionSelectorOnClick'\n  | 'disableQuotedMessages'\n  | 'formatDate'\n  | 'Message'\n  | 'messageActions'\n  | 'onMentionsClick'\n  | 'onMentionsHover'\n  | 'onUserClick'\n  | 'onUserHover'\n  | 'openThread'\n  | 'reactionDetailsSort'\n  | 'renderText'\n  | 'retrySendMessage'\n  | 'showAvatar'\n  | 'sortReactions'\n  | 'unsafeHTML';\n\nexport type MessageListProps = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {\n  /** Disables the injection of date separator components in MessageList, defaults to `false` */\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 the list has more items to load */\n  hasMore?: boolean;\n  /** Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components */\n  head?: React.ReactElement;\n  /** Position to render HeaderComponent */\n  headerPosition?: number;\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  /** Overrides the default props passed to [InfiniteScroll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx) */\n  internalInfiniteScrollProps?: Partial<InfiniteScrollProps>;\n  /** Function called when latest messages should be loaded, after the list has jumped at an earlier message set */\n  jumpToLatestMessage?: () => Promise<void>;\n  /** Whether or not the list is currently loading more items */\n  loadingMore?: boolean;\n  /** Whether or not the list is currently jumping to a highlighted message */\n  loadingMoreForJumpToChannelMessage?: 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 newer 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['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  /** The messages to render in the list, defaults to messages stored in [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */\n  messages?: LocalMessage[];\n  /** If true, turns off message UI grouping by user */\n  noGroupByUser?: boolean;\n  /** Overrides the way MessageList renders messages */\n  renderMessages?: MessageRenderer;\n  /** If true, `readBy` data supplied to the `Message` components will include all user read states per sent message */\n  returnAllReadData?: boolean;\n  /**\n   * Allows to review changes introduced to messages array on per message basis (e.g. date separator injection 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 `MessageList`.\n   */\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n  /**\n   * The pixel threshold under which the message list is considered to be so near to the bottom,\n   * so that if a new message is delivered, the list will be scrolled to the absolute bottom.\n   * Defaults to 200px\n   */\n  scrolledUpThreshold?: number;\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  /** If true, indicates the message list is a thread  */\n  threadList?: boolean; // todo: refactor needed - message list should have a state in which among others it would be optionally flagged as thread\n};\n\n/**\n * The MessageList component renders a list of Messages.\n * It is a consumer of the following contexts:\n * - [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/)\n * - [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/)\n * - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)\n * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)\n */\nexport const MessageList = (props: MessageListProps) => {\n  const { jumpToLatestMessage, loadMore, loadMoreNewer } =\n    useChannelActionContext('MessageList');\n\n  const {\n    members: membersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    mutes: mutesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    watchers: watchersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...restChannelStateContext\n  } = useChannelStateContext('MessageList');\n\n  return (\n    <MessageListWithContext\n      jumpToLatestMessage={jumpToLatestMessage}\n      loadMore={loadMore}\n      loadMoreNewer={loadMoreNewer}\n      {...restChannelStateContext}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MessageList.mjs","names":[],"sources":["../../../../src/components/MessageList/MessageList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nimport {\n  useEnrichedMessages,\n  useMessageListElements,\n  useScrollLocationLogic,\n  useUnreadMessagesNotification,\n} from './hooks/MessageList';\nimport { getMessageSourceKey } from './messageSourceKey';\nimport { useMarkRead } from './hooks/useMarkRead';\n\nimport { NewMessageNotification as DefaultNewMessageNotification } from './NewMessageNotification';\nimport {\n  NotificationList as DefaultNotificationList,\n  useNotificationTarget,\n} from '../Notifications';\nimport { useIncomingMessageAnnouncements } from '../Accessibility';\nimport { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';\n\nimport { DialogManagerProvider, useChannel } from '../../context';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageListContextProvider } from '../../context/MessageListContext';\nimport { MessageTranslationViewProvider } from '../../context/MessageTranslationViewContext';\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';\nimport { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';\nimport { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';\n\nimport { FloatingDateSeparator } from './FloatingDateSeparator';\nimport type { MessageRenderer } from './renderMessages';\nimport { defaultRenderMessages } from './renderMessages';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { useThreadContext } from '../Threads';\nimport { useThreadHead } from './hooks/useThreadHead';\n\nimport type {\n  LocalMessage,\n  MessageFocusSignalState,\n  MessagePaginatorState,\n  TimestampNS,\n  UnreadSnapshotState,\n} from 'stream-chat';\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';\nimport type { MessageProps } from '../Message/types';\n\nimport { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';\nimport { useLastOwnMessage } from './hooks/useLastOwnMessage';\nimport { useStateStore } from '../../store';\nimport type { InfiniteScrollPaginatorProps } from '../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport { InfiniteScrollPaginator } from '../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport { useMessagePaginator } from '../../hooks';\nimport { ScrollToLatestMessageButton } from './ScrollToLatestMessageButton';\nimport { useCanPaginateReplies } from './hooks/useCanPaginateReplies';\n\ntype MessageListWithContextProps = MessageListProps;\n\nconst messagePaginatorStateSelector = (state: MessagePaginatorState) => ({\n  // hasMore: state.hasMoreTail,\n  hasMoreNewer: state.hasMoreHead,\n  isLoading: state.isLoading,\n  messages: state.items ?? [],\n});\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => state;\nconst messageFocusSignalSelector = (state: MessageFocusSignalState) => ({\n  messageFocusSignal: state.signal,\n});\n\n// Smooth scrolling for user-initiated scrolls (scroll-to-latest, jump-to-message), honoring the OS\n// \"reduce motion\" preference (WCAG 2.3.3 — `auto` = instant). Read imperatively at scroll time and\n// deliberately NOT via a reactive hook: it must add no render churn to MessageList, which would\n// perturb the paginator's scroll-position handling (initial/streaming autoscroll stays instant).\nconst getScrollBehavior = (): ScrollBehavior =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    ? 'auto'\n    : 'smooth';\n\nconst MessageListWithContext = (props: MessageListWithContextProps) => {\n  const channel = useChannel();\n  const threadHead = useThreadHead();\n  const {\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages = false,\n    hideNewMessageSeparator = false,\n    internalInfiniteScrollProps: {\n      element: internalListElement = 'div',\n      threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,\n      ...restInternalInfiniteScrollProps\n    } = {},\n    maxTimeBetweenGroupedMessages,\n    noGroupByUser = false,\n    // messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n    reactionDetailsSort,\n    renderMessages = defaultRenderMessages,\n    returnAllReadData = false,\n    reviewProcessedMessage,\n    showUnreadNotificationAlways,\n    sortReactions,\n    suppressAutoscroll: suppressAutoscrollFromProps = false,\n    unsafeHTML = false,\n    withDateSeparator = true,\n  } = props;\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] =\n    React.useState(false);\n  const suppressAutoscroll =\n    suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;\n  const loadingOlderRef = React.useRef(false);\n\n  const [listElement, setListElement] = React.useState<HTMLDivElement | null>(null);\n\n  const { customClasses } = useChatContext();\n\n  const {\n    EmptyStateIndicator = DefaultEmptyStateIndicator,\n    LoadingIndicator = DefaultLoadingIndicator,\n    MessageListWrapper = 'ul',\n    NewMessageNotification = DefaultNewMessageNotification,\n    TypingIndicator = DefaultTypingIndicator,\n    UnreadMessagesNotification = DefaultUnreadMessagesNotification,\n  } = useComponentContext();\n  const messagePaginator = useMessagePaginator();\n\n  const { hasMoreNewer, isLoading, messages } = useStateStore(\n    messagePaginator.state,\n    messagePaginatorStateSelector,\n  );\n\n  const channelUnreadUiState = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n  const { messageFocusSignal } = useStateStore(\n    messagePaginator.messageFocusSignal,\n    messageFocusSignalSelector,\n  );\n  const focusedMessageId = messageFocusSignal?.messageId;\n\n  const {\n    hasNewMessages,\n    isMessageListScrolledToBottom,\n    onScroll,\n    scrollToBottom,\n    wrapperRect,\n  } = useScrollLocationLogic({\n    hasMoreNewer,\n    listElement,\n    loadMoreScrollThreshold,\n    messages, // todo: is it correct to base the scroll logic on an array that does not contain date separators or intro?\n    scrolledUpThreshold: props.scrolledUpThreshold,\n    suppressAutoscroll,\n  });\n\n  const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({\n    isMessageListScrolledToBottom,\n    listElement,\n    showAlways: !!showUnreadNotificationAlways,\n  });\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  // MERGE-RECONCILE: master's useReducedMotionPreference()/scrollBehavior was NOT\n  // re-grafted here — it fed master's scroll logic, which PR #2909 replaced with\n  // messagePaginator-driven scrolling (useScrollLocationLogic). Reconcile if\n  // prefers-reduced-motion scroll behavior is required.\n\n  const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({\n    channel,\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    maxTimeBetweenGroupedMessages,\n    messages,\n    noGroupByUser,\n    reviewProcessedMessage,\n    withDateSeparator,\n  });\n\n  const lastOwnMessage = useLastOwnMessage({\n    messages,\n    ownUserId: channel.getClient().user?.id,\n  });\n\n  const elements = useMessageListElements({\n    enrichedMessages,\n    focusedMessageId,\n    internalMessageProps: {\n      // MERGE-RECONCILE: additionalMessageInputProps → additionalMessageComposerProps\n      // (master's MessageInput→MessageComposer rename). Per-action get*Notification props\n      // were removed by master's notification redesign and are no longer drilled here.\n      additionalMessageComposerProps: props.additionalMessageComposerProps,\n      closeReactionSelectorOnClick: props.closeReactionSelectorOnClick,\n      disableQuotedMessages: props.disableQuotedMessages,\n      formatDate: props.formatDate,\n      messageListRect: wrapperRect,\n      onMentionsClick: props.onMentionsClick,\n      onMentionsHover: props.onMentionsHover,\n      onUserClick: props.onUserClick,\n      onUserHover: props.onUserHover,\n      reactionDetailsSort,\n      renderText: props.renderText,\n      // retrySendMessage: props.retrySendMessage,\n      showAvatar: props.showAvatar,\n      sortReactions,\n      unsafeHTML,\n    },\n    lastOwnMessage,\n    messageGroupStyles,\n    messages,\n    renderMessages,\n    returnAllReadData,\n  });\n\n  const messageListClass = customClasses?.messageList || 'str-chat__message-list';\n\n  // An empty thread would otherwise ask for a page at both ends the moment the scroller mounts.\n  const canPaginateReplies = useCanPaginateReplies();\n\n  const loadOlderMessages = React.useCallback(async () => {\n    if (loadingOlderRef.current) return;\n    loadingOlderRef.current = true;\n    setSuppressAutoscrollWhileLoadingOlder(true);\n    try {\n      await messagePaginator.toTail();\n    } finally {\n      loadingOlderRef.current = false;\n      setSuppressAutoscrollWhileLoadingOlder(false);\n    }\n  }, [messagePaginator]);\n\n  const scrollToBottomFromNotification = React.useCallback(() => {\n    if (messagePaginator.hasMoreHead) {\n      // Latest page not loaded — load it; the message-focus signal then drives the smooth scroll\n      // to the latest message via the effect below.\n      messagePaginator.jumpToTheLatestMessage();\n    } else {\n      scrollToBottom({ behavior: getScrollBehavior() });\n    }\n  }, [messagePaginator, scrollToBottom]);\n\n  // Bring a focused message (deep-link / quoted-reply jump, or jump-to-latest) into view and start\n  // its highlight's dismissal only once it is actually viewed.\n  //\n  // The list renders whatever the paginator holds in state, so the target is in the DOM as soon as\n  // the jump resolves — there is nothing to wait for on the data side. What can lag is *visibility*:\n  // the list may be collapsed to zero width (e.g. a thread panel covering the channel when a \"view\n  // in channel\" jump fires), in which case the initial scroll is computed against stale geometry and\n  // the emit-time TTL would burn the highlight before the user ever sees it. So we:\n  //   - re-center on relayout (the reveal resizes the list 0 → full width; a resize is the precise\n  //     signal for \"geometry changed\" and never fires from scrolling, so it can't fight the smooth\n  //     animation below), and\n  //   - measure the dismissal TTL from the moment the message is genuinely on screen (viewed),\n  //     reported by an IntersectionObserver rather than from when the jump resolved.\n  React.useLayoutEffect(() => {\n    if (!messageFocusSignal || !listElement) return;\n    const { messageId, token } = messageFocusSignal;\n\n    const findTarget = () =>\n      listElement.querySelector<HTMLElement>(`[data-message-id='${messageId}']`);\n    const centerTarget = (behavior: ScrollBehavior) =>\n      findTarget()?.scrollIntoView({ behavior, block: 'center' });\n\n    // Initial attempt — smooth (or reduced-motion 'auto') for the common case of a visible list.\n    centerTarget(getScrollBehavior());\n\n    const target = findTarget();\n    if (\n      !target ||\n      typeof IntersectionObserver === 'undefined' ||\n      typeof ResizeObserver === 'undefined'\n    ) {\n      // Can't observe \"viewed\" — start the countdown now so the highlight still clears.\n      messagePaginator.scheduleMessageFocusSignalClear({ token });\n      return;\n    }\n\n    // Re-center on relayout while the jump is active, keyed off an actual change in the list's\n    // measured size rather than \"the observer's Nth callback\". That distinction matters: the reveal\n    // (0 → full width) often coincides with the observer's initial callback, so a \"skip the first\n    // callback\" heuristic would swallow the very resize we need to react to. Comparing sizes also\n    // leaves the common visible-list case untouched — the baseline callback reports no change, so\n    // the initial smooth scroll above is never interrupted by an instant re-center.\n    let lastWidth = listElement.clientWidth;\n    let lastHeight = listElement.clientHeight;\n    const relayoutObserver = new ResizeObserver(() => {\n      const width = listElement.clientWidth;\n      const height = listElement.clientHeight;\n      if (width === lastWidth && height === lastHeight) return;\n      lastWidth = width;\n      lastHeight = height;\n      centerTarget('auto');\n    });\n\n    const viewObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        const rootHeight = listElement.clientHeight || 1;\n        // Viewed = at least half the message is on screen, or (for a message taller than the\n        // viewport) the visible slice fills at least half the viewport.\n        const viewed =\n          entry.isIntersecting &&\n          (entry.intersectionRatio >= 0.5 ||\n            entry.intersectionRect.height >= rootHeight * 0.5);\n        if (!viewed) return;\n        messagePaginator.scheduleMessageFocusSignalClear({ token });\n        viewObserver.disconnect();\n        relayoutObserver.disconnect();\n      },\n      { root: listElement, threshold: [0, 0.5, 1] },\n    );\n\n    viewObserver.observe(target);\n    relayoutObserver.observe(listElement);\n\n    return () => {\n      viewObserver.disconnect();\n      relayoutObserver.disconnect();\n    };\n  }, [messageFocusSignal, listElement, messagePaginator]);\n\n  const id = useStableId();\n\n  const showEmptyStateIndicator = elements.length === 0 && !isThreadList;\n  const dialogManagerId = isThreadList\n    ? `message-list-dialog-manager-thread-${id}`\n    : `message-list-dialog-manager-${id}`;\n\n  return (\n    <MessageListContextProvider\n      value={{\n        listElement,\n        processedMessages: enrichedMessages,\n        scrollToBottom,\n      }}\n    >\n      <MessageTranslationViewProvider>\n        <DialogManagerProvider id={dialogManagerId}>\n          {!isThreadList && showUnreadMessagesNotification && (\n            <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unreadCount} />\n          )}\n          {/*todo: apply styles\n            .str-chat__list {\n              overflow-y: hidden;\n            }\n\n            .str-chat__infinite-scroll-paginator.str-chat__message-list-scroll {\n              height: 100%;\n            }\n            */}\n          <FloatingDateSeparator\n            listElement={listElement}\n            processedMessages={enrichedMessages}\n            withDateSeparator={withDateSeparator}\n          />\n          <div\n            className={clsx(messageListClass, customClasses?.threadList)}\n            onScroll={onScroll}\n            ref={setListElement}\n            tabIndex={0}\n          >\n            {showEmptyStateIndicator ? (\n              <EmptyStateIndicator listType={isThreadList ? 'thread' : 'message'} />\n            ) : (\n              <InfiniteScrollPaginator\n                className='str-chat__message-list-scroll'\n                data-testid='reverse-infinite-scroll'\n                element={internalListElement}\n                loadNextOnScrollToBottom={\n                  canPaginateReplies ? messagePaginator.toHead : undefined\n                }\n                loadNextOnScrollToTop={canPaginateReplies ? loadOlderMessages : undefined}\n                onScroll={onScroll}\n                ref={setListElement}\n                threshold={loadMoreScrollThreshold}\n                {...restInternalInfiniteScrollProps}\n              >\n                {threadHead}\n                {isLoading && (\n                  <div className='str-chat__list__loading' key='loading-indicator'>\n                    {props.loadingMore && <LoadingIndicator />}\n                  </div>\n                )}\n                <MessageListWrapper className='str-chat__ul'>\n                  {elements}\n                </MessageListWrapper>\n                <TypingIndicator\n                  isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                  scrollToBottom={scrollToBottom}\n                />\n\n                <div key='bottom' />\n              </InfiniteScrollPaginator>\n            )}\n            <NewMessageNotification\n              newMessageCount={channelUnreadUiState?.unreadCount}\n              showNotification={\n                (hasNewMessages || hasMoreNewer) && !isMessageListScrolledToBottom\n              }\n            />\n            {/* An empty list has nothing to jump to — see the matching gate in\n                  VirtualizedMessageList. */}\n            {messages.length > 0 && (\n              <ScrollToLatestMessageButton\n                isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                isNotAtLatestMessageSet={hasMoreNewer && messages.length > 0}\n                onClick={scrollToBottomFromNotification}\n              />\n            )}\n          </div>\n        </DialogManagerProvider>\n      </MessageTranslationViewProvider>\n    </MessageListContextProvider>\n  );\n};\n\ntype PropsDrilledToMessage =\n  | 'additionalMessageComposerProps'\n  | 'closeReactionSelectorOnClick'\n  | 'disableQuotedMessages'\n  | 'formatDate'\n  | 'onMentionsClick'\n  | 'onMentionsHover'\n  | 'onUserClick'\n  | 'onUserHover'\n  | 'reactionDetailsSort'\n  | 'renderText'\n  // | 'retrySendMessage'\n  | 'showAvatar'\n  | 'sortReactions'\n  | 'unsafeHTML';\n\n// Allow intrinsic element override while keeping div-prop compatibility\ntype InternalPaginatorProps = Partial<\n  Omit<InfiniteScrollPaginatorProps<'div'>, 'element'>\n> & {\n  element?: keyof React.JSX.IntrinsicElements;\n};\n\nexport type MessageListProps = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {\n  // todo: data manipulation - should live in the paginator\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 the list has more items to load */\n  hasMore?: boolean;\n  /**\n   * Position to render HeaderComponent, as a timestamp in the same unit as `message.created_at` —\n   * i.e. unix nanoseconds. Was milliseconds while `created_at` was a `Date`.\n   */\n  headerPosition?: TimestampNS;\n  // todo: data manipulation - should live in MessagePaginator\n  /** Hides the MessageDeleted components from the list, defaults to `false` */\n  hideDeletedMessages?: boolean;\n  // todo: data manipulation - should live in MessagePaginator\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  /** Overrides the default props passed to [InfiniteScrollPaginator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx) */\n  internalInfiniteScrollProps?: InternalPaginatorProps;\n  /** Function called when latest messages should be loaded, after the list has jumped at an earlier message set */\n  jumpToLatestMessage?: () => Promise<void>;\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 newer 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  /** The messages to render in the list; defaults to the active message-paginator items. */\n  messages?: LocalMessage[];\n  /** If true, turns off message UI grouping by user */\n  noGroupByUser?: boolean;\n  /** Overrides the way MessageList renders messages */\n  renderMessages?: MessageRenderer;\n  /** If true, `readBy` data supplied to the `Message` components will include all user read states per sent message */\n  returnAllReadData?: boolean;\n  /**\n   * Allows to review changes introduced to messages array on per message basis (e.g. date separator injection 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 `MessageList`.\n   */\n  // todo: have state.pipe() API to allow modifying the state output / emission\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n  /**\n   * The pixel threshold under which the message list is considered to be so near to the bottom,\n   * so that if a new message is delivered, the list will be scrolled to the absolute bottom.\n   * Defaults to 200px\n   */\n  scrolledUpThreshold?: number;\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  /** If true, prevents autoscroll-to-bottom behavior on new messages. */\n  suppressAutoscroll?: boolean;\n  /** Injects date separator components into the list, defaults to `true` */\n  withDateSeparator?: boolean;\n};\n\n/**\n * The MessageList component renders a list of Messages.\n * It is a consumer of the following contexts:\n * - `ChannelInstanceContext`\n * - `ChatContext`\n * - `ComponentContext`\n * - `ThreadContext`\n */\nexport const MessageList = (props: MessageListProps) => {\n  const channel = useChannel();\n  const thread = useThreadContext();\n  const notificationTarget = useNotificationTarget();\n  const {\n    MessageListMainPanel = DefaultMessageListMainPanel,\n    NotificationList = DefaultNotificationList,\n  } = useComponentContext();\n\n  // The panel and the notification area sit *above* the key on purpose.\n  //\n  // Scroll position and the rest of the list's local state belong to whatever it is showing -- a\n  // thread's replies or a channel's messages -- so a different one starts from scratch. A\n  // notification does not: it reports something the user just did, and its countdown and entry\n  // animation have to outlive the switch. Rendering it here keeps the element, its timer and the\n  // panel box it is positioned against whole, without anything having to move.\n  // See specs/notification-list-stable-host/spec.md.\n  return (\n    <MessageListMainPanel>\n      <MessageListWithContext {...props} key={getMessageSourceKey({ channel, thread })} />\n      <NotificationList panel={notificationTarget} />\n    </MessageListMainPanel>\n  );\n};\n"],"mappings":"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"}

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

@@ -8,7 +8,11 @@ var UnMemoizedNewMessageNotification = (props) => {
 	const { t } = useTranslationContext();
 	const { NewMessageNotification: CustomNewMessageNotification } = useComponentContext();
 	if (!showNotification) return null;
-	const label = newMessageCount > 0 ? t("{{count}} new messages", { count: newMessageCount }) : t("New Messages!");
+	const label = newMessageCount > 0 ? t("common.newMessages.label", {
+		count: newMessageCount,
+		defaultValue_one: "{{count}} new message",
+		defaultValue_other: "{{count}} new messages"
+	}) : t("messageList.newMessageNotification.newMessages.label", "New Messages!");
 	if (CustomNewMessageNotification) return /* @__PURE__ */ jsx(CustomNewMessageNotification, {
 		...props,
 		label

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

@@ -1 +1 @@
-{"version":3,"file":"NewMessageNotification.mjs","names":[],"sources":["../../../../src/components/MessageList/NewMessageNotification.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type NewMessageNotificationProps = {\n  /** Pre-computed label text (passed to custom override) */\n  label?: string;\n  /** Controls the notification display */\n  showNotification?: boolean;\n  /** Number of new messages since user scrolled up (optional; when provided shows \"{{count}} new messages\") */\n  newMessageCount?: number;\n};\n\nconst UnMemoizedNewMessageNotification = (props: NewMessageNotificationProps) => {\n  const { newMessageCount = 0, showNotification } = props;\n\n  const { t } = useTranslationContext();\n\n  const { NewMessageNotification: CustomNewMessageNotification } = useComponentContext();\n\n  if (!showNotification) return null;\n\n  const label =\n    newMessageCount > 0\n      ? t('{{count}} new messages', { count: newMessageCount })\n      : t('New Messages!');\n\n  if (CustomNewMessageNotification) {\n    return <CustomNewMessageNotification {...props} label={label} />;\n  }\n\n  return (\n    <div className='str-chat__new-message-notification'>\n      <div\n        aria-atomic='true'\n        aria-live='polite'\n        className='str-chat__message-notification__label'\n        data-testid='message-notification'\n        role='status'\n      >\n        {label}\n      </div>\n    </div>\n  );\n};\n\nexport const NewMessageNotification = React.memo(\n  UnMemoizedNewMessageNotification,\n) as typeof UnMemoizedNewMessageNotification;\n"],"mappings":";;;;;AAcA,IAAM,oCAAoC,UAAuC;CAC/E,MAAM,EAAE,kBAAkB,GAAG,qBAAqB;CAElD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,wBAAwB,iCAAiC,oBAAoB;CAErF,IAAI,CAAC,kBAAkB,OAAO;CAE9B,MAAM,QACJ,kBAAkB,IACd,EAAE,0BAA0B,EAAE,OAAO,gBAAgB,CAAC,IACtD,EAAE,eAAe;CAEvB,IAAI,8BACF,OAAO,oBAAC,8BAAD;EAA8B,GAAI;EAAc;CAAQ,CAAA;CAGjE,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAU;GACV,eAAY;GACZ,MAAK;aAEJ;EACE,CAAA;CACF,CAAA;AAET;AAEA,IAAa,yBAAyB,MAAM,KAC1C,gCACF"}
+{"version":3,"file":"NewMessageNotification.mjs","names":[],"sources":["../../../../src/components/MessageList/NewMessageNotification.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type NewMessageNotificationProps = {\n  /** Pre-computed label text (passed to custom override) */\n  label?: string;\n  /** Controls the notification display */\n  showNotification?: boolean;\n  /** Number of new messages since user scrolled up (optional; when provided shows \"{{count}} new messages\") */\n  newMessageCount?: number;\n};\n\nconst UnMemoizedNewMessageNotification = (props: NewMessageNotificationProps) => {\n  const { newMessageCount = 0, showNotification } = props;\n\n  const { t } = useTranslationContext();\n\n  const { NewMessageNotification: CustomNewMessageNotification } = useComponentContext();\n\n  if (!showNotification) return null;\n\n  const label =\n    newMessageCount > 0\n      ? t('common.newMessages.label', {\n          count: newMessageCount,\n          defaultValue_one: '{{count}} new message',\n          defaultValue_other: '{{count}} new messages',\n        })\n      : t('messageList.newMessageNotification.newMessages.label', 'New Messages!');\n\n  if (CustomNewMessageNotification) {\n    return <CustomNewMessageNotification {...props} label={label} />;\n  }\n\n  return (\n    <div className='str-chat__new-message-notification'>\n      <div\n        aria-atomic='true'\n        aria-live='polite'\n        className='str-chat__message-notification__label'\n        data-testid='message-notification'\n        role='status'\n      >\n        {label}\n      </div>\n    </div>\n  );\n};\n\nexport const NewMessageNotification = React.memo(\n  UnMemoizedNewMessageNotification,\n) as typeof UnMemoizedNewMessageNotification;\n"],"mappings":";;;;;AAcA,IAAM,oCAAoC,UAAuC;CAC/E,MAAM,EAAE,kBAAkB,GAAG,qBAAqB;CAElD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,wBAAwB,iCAAiC,oBAAoB;CAErF,IAAI,CAAC,kBAAkB,OAAO;CAE9B,MAAM,QACJ,kBAAkB,IACd,EAAE,4BAA4B;EAC5B,OAAO;EACP,kBAAkB;EAClB,oBAAoB;CACtB,CAAC,IACD,EAAE,wDAAwD,eAAe;CAE/E,IAAI,8BACF,OAAO,oBAAC,8BAAD;EAA8B,GAAI;EAAc;CAAQ,CAAA;CAGjE,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAU;GACV,eAAY;GACZ,MAAK;aAEJ;EACE,CAAA;CACF,CAAA;AAET;AAEA,IAAa,yBAAyB,MAAM,KAC1C,gCACF"}

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

@@ -1,59 +1,64 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { Button } from "../Button/Button.mjs";
 import { Badge } from "../Badge/Badge.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import React, { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MessageList/ScrollToLatestMessageButton.tsx
+var threadStateSelector = ({ parentMessage }) => ({ parentMessage });
 var UnMemoizedScrollToLatestMessageButton = (props) => {
-	const { isMessageListScrolledToBottom, isNotAtLatestMessageSet = false, onClick, threadList } = props;
-	const { channel: activeChannel, client } = useChatContext();
-	const { thread } = useChannelStateContext();
-	const { t } = useTranslationContext();
 	const { IconArrowDown } = useComponentContextIcons();
-	const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);
-	const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);
-	const observedEvent = threadList ? "message.updated" : "message.new";
+	const { isMessageListScrolledToBottom, isNotAtLatestMessageSet = false, onClick } = props;
+	const { client } = useChatContext();
+	const channel = useChannel();
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const { parentMessage } = useStateStore(thread?.state, threadStateSelector) ?? {};
+	const { t } = useTranslationContext();
+	const [countUnread, setCountUnread] = useState(channel.countUnread() || 0);
+	const [replyCount, setReplyCount] = useState(parentMessage?.reply_count || 0);
+	const observedEvent = isThreadList ? "message.updated" : "message.new";
 	useEffect(() => {
 		const handleEvent = (event) => {
-			const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
+			const newMessageInAnotherChannel = event.cid !== channel?.cid;
 			const newMessageIsMine = event.user?.id === client.user?.id;
-			const isThreadOpen = !!thread;
 			const newMessageIsReply = !!event.message?.parent_id;
-			if (isMessageListScrolledToBottom || newMessageInAnotherChannel || newMessageIsMine || isThreadOpen && !threadList && newMessageIsReply) return;
+			if (isMessageListScrolledToBottom || newMessageInAnotherChannel || newMessageIsMine || channel && !isThreadList && newMessageIsReply) return;
 			if (event.type === "message.new") setCountUnread((prev) => prev + 1);
-			else if (event.message?.id === thread?.id) {
+			else if (event.message?.id === parentMessage?.id) {
 				const newReplyCount = event.message?.reply_count || 0;
 				setCountUnread(() => newReplyCount - replyCount);
 			}
 		};
-		client.on(observedEvent, handleEvent);
+		const subscription = client.on(observedEvent, handleEvent);
 		return () => {
-			client.off(observedEvent, handleEvent);
+			subscription.unsubscribe();
 		};
 	}, [
-		activeChannel,
+		channel,
 		client,
 		isMessageListScrolledToBottom,
 		observedEvent,
+		parentMessage,
 		replyCount,
-		thread,
-		threadList
+		isThreadList
 	]);
 	useEffect(() => {
 		if (isMessageListScrolledToBottom) {
 			setCountUnread(0);
-			setReplyCount(thread?.reply_count || 0);
+			setReplyCount(parentMessage?.reply_count || 0);
 		}
-	}, [isMessageListScrolledToBottom, thread]);
+	}, [isMessageListScrolledToBottom, parentMessage]);
 	if (isMessageListScrolledToBottom && !isNotAtLatestMessageSet) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__jump-to-latest-message",
 		children: [/* @__PURE__ */ jsx(Button, {
 			appearance: "ghost",
-			"aria-label": t("aria/Jump to latest message"),
+			"aria-label": t("messageList.scrollLatestMessage.jumpLatestMessage.ariaLabel", "Jump to latest message"),
 			"aria-live": "polite",
 			circular: true,
 			className: "str-chat__jump-to-latest-message__button",

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToLatestMessageButton.mjs","names":[],"sources":["../../../../src/components/MessageList/ScrollToLatestMessageButton.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport {\n  useChannelStateContext,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\n\nimport type { Event } from 'stream-chat';\nimport { Badge } from '../Badge';\nimport { Button } from '../Button';\n\nexport type ScrollToLatestMessageButtonProps = {\n  /** When true, user has jumped to an older message set and newer messages can be loaded */\n  isNotAtLatestMessageSet?: boolean;\n  isMessageListScrolledToBottom?: boolean;\n  onClick: React.MouseEventHandler;\n  threadList?: boolean;\n};\n\nconst UnMemoizedScrollToLatestMessageButton = (\n  props: ScrollToLatestMessageButtonProps,\n) => {\n  const {\n    isMessageListScrolledToBottom,\n    isNotAtLatestMessageSet = false,\n    onClick,\n    threadList,\n  } = props;\n\n  const { channel: activeChannel, client } = useChatContext();\n  const { thread } = useChannelStateContext();\n  const { t } = useTranslationContext();\n  const { IconArrowDown } = useComponentContextIcons();\n  const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);\n  const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);\n  const observedEvent = threadList ? 'message.updated' : 'message.new';\n\n  useEffect(() => {\n    const handleEvent = (event: Event) => {\n      const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;\n      const newMessageIsMine = event.user?.id === client.user?.id;\n\n      const isThreadOpen = !!thread;\n      const newMessageIsReply = !!event.message?.parent_id;\n      const dontIncreaseMainListCounterOnNewReply =\n        isThreadOpen && !threadList && newMessageIsReply;\n\n      if (\n        isMessageListScrolledToBottom ||\n        newMessageInAnotherChannel ||\n        newMessageIsMine ||\n        dontIncreaseMainListCounterOnNewReply\n      ) {\n        return;\n      }\n\n      if (event.type === 'message.new') {\n        // cannot rely on channel.countUnread because active channel is automatically marked read\n        setCountUnread((prev) => prev + 1);\n      } else if (event.message?.id === thread?.id) {\n        const newReplyCount = event.message?.reply_count || 0;\n        setCountUnread(() => newReplyCount - replyCount);\n      }\n    };\n    client.on(observedEvent, handleEvent);\n\n    return () => {\n      client.off(observedEvent, handleEvent);\n    };\n  }, [\n    activeChannel,\n    client,\n    isMessageListScrolledToBottom,\n    observedEvent,\n    replyCount,\n    thread,\n    threadList,\n  ]);\n\n  useEffect(() => {\n    if (isMessageListScrolledToBottom) {\n      setCountUnread(0);\n      setReplyCount(thread?.reply_count || 0);\n    }\n  }, [isMessageListScrolledToBottom, thread]);\n\n  if (isMessageListScrolledToBottom && !isNotAtLatestMessageSet) return null;\n\n  return (\n    <div className='str-chat__jump-to-latest-message'>\n      <Button\n        appearance='ghost'\n        aria-label={t('aria/Jump to latest message')}\n        aria-live='polite'\n        circular\n        className='str-chat__jump-to-latest-message__button'\n        data-testid='scroll-to-latest-message-button'\n        onClick={onClick}\n        size='md'\n        variant='secondary'\n      >\n        <IconArrowDown />\n      </Button>\n      {countUnread > 0 && (\n        <Badge\n          className='str-chat__jump-to-latest__unread-count'\n          data-testid='unread-message-notification-counter'\n          size='md'\n          variant='primary'\n        >\n          {countUnread}\n        </Badge>\n      )}\n    </div>\n  );\n};\n\nexport const ScrollToLatestMessageButton = React.memo(\n  UnMemoizedScrollToLatestMessageButton,\n) as typeof UnMemoizedScrollToLatestMessageButton;\n"],"mappings":";;;;;;;;;AAqBA,IAAM,yCACJ,UACG;CACH,MAAM,EACJ,+BACA,0BAA0B,OAC1B,SACA,eACE;CAEJ,MAAM,EAAE,SAAS,eAAe,WAAW,eAAe;CAC1D,MAAM,EAAE,WAAW,uBAAuB;CAC1C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,eAAe,YAAY,KAAK,CAAC;CAChF,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ,eAAe,CAAC;CACrE,MAAM,gBAAgB,aAAa,oBAAoB;CAEvD,gBAAgB;EACd,MAAM,eAAe,UAAiB;GACpC,MAAM,6BAA6B,MAAM,QAAQ,eAAe;GAChE,MAAM,mBAAmB,MAAM,MAAM,OAAO,OAAO,MAAM;GAEzD,MAAM,eAAe,CAAC,CAAC;GACvB,MAAM,oBAAoB,CAAC,CAAC,MAAM,SAAS;GAI3C,IACE,iCACA,8BACA,oBALA,gBAAgB,CAAC,cAAc,mBAQ/B;GAGF,IAAI,MAAM,SAAS,eAEjB,gBAAgB,SAAS,OAAO,CAAC;QAC5B,IAAI,MAAM,SAAS,OAAO,QAAQ,IAAI;IAC3C,MAAM,gBAAgB,MAAM,SAAS,eAAe;IACpD,qBAAqB,gBAAgB,UAAU;GACjD;EACF;EACA,OAAO,GAAG,eAAe,WAAW;EAEpC,aAAa;GACX,OAAO,IAAI,eAAe,WAAW;EACvC;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,+BAA+B;GACjC,eAAe,CAAC;GAChB,cAAc,QAAQ,eAAe,CAAC;EACxC;CACF,GAAG,CAAC,+BAA+B,MAAM,CAAC;CAE1C,IAAI,iCAAiC,CAAC,yBAAyB,OAAO;CAEtE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,6BAA6B;GAC3C,aAAU;GACV,UAAA;GACA,WAAU;GACV,eAAY;GACH;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,eAAD,CAAgB,CAAA;EACV,CAAA,GACP,cAAc,KACb,oBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,MAAK;GACL,SAAQ;aAEP;EACI,CAAA,CAEN;;AAET;AAEA,IAAa,8BAA8B,MAAM,KAC/C,qCACF"}
+{"version":3,"file":"ScrollToLatestMessageButton.mjs","names":[],"sources":["../../../../src/components/MessageList/ScrollToLatestMessageButton.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { useThreadContext } from '../Threads/ThreadContext';\nimport { useStateStore } from '../../store';\n\nimport type { EventPayload, ThreadState } from 'stream-chat';\nimport { Badge } from '../Badge';\nimport { Button } from '../Button';\n\nexport type ScrollToLatestMessageButtonProps = {\n  /** When true, user has jumped to an older message set and newer messages can be loaded */\n  isNotAtLatestMessageSet?: boolean;\n  isMessageListScrolledToBottom?: boolean;\n  onClick: React.MouseEventHandler;\n};\n\nconst threadStateSelector = ({ parentMessage }: ThreadState) => ({\n  parentMessage,\n});\n\nconst UnMemoizedScrollToLatestMessageButton = (\n  props: ScrollToLatestMessageButtonProps,\n) => {\n  const { IconArrowDown } = useComponentContextIcons();\n  const {\n    isMessageListScrolledToBottom,\n    isNotAtLatestMessageSet = false,\n    onClick,\n  } = props;\n\n  const { client } = useChatContext();\n  const channel = useChannel();\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const { parentMessage } = useStateStore(thread?.state, threadStateSelector) ?? {};\n  const { t } = useTranslationContext();\n  const [countUnread, setCountUnread] = useState(channel.countUnread() || 0);\n  const [replyCount, setReplyCount] = useState(parentMessage?.reply_count || 0);\n  const observedEvent = isThreadList ? 'message.updated' : 'message.new';\n\n  useEffect(() => {\n    const handleEvent = (event: EventPayload<'message.new' | 'message.updated'>) => {\n      const newMessageInAnotherChannel = event.cid !== channel?.cid;\n      const newMessageIsMine = event.user?.id === client.user?.id;\n\n      const newMessageIsReply = !!event.message?.parent_id;\n      const dontIncreaseMainListCounterOnNewReply =\n        channel && !isThreadList && newMessageIsReply;\n\n      if (\n        isMessageListScrolledToBottom ||\n        newMessageInAnotherChannel ||\n        newMessageIsMine ||\n        dontIncreaseMainListCounterOnNewReply\n      ) {\n        return;\n      }\n\n      if (event.type === 'message.new') {\n        // cannot rely on channel.countUnread because active channel is automatically marked read\n        setCountUnread((prev) => prev + 1);\n      } else if (event.message?.id === parentMessage?.id) {\n        const newReplyCount = event.message?.reply_count || 0;\n        setCountUnread(() => newReplyCount - replyCount);\n      }\n    };\n    const subscription = client.on(observedEvent, handleEvent);\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [\n    channel,\n    client,\n    isMessageListScrolledToBottom,\n    observedEvent,\n    parentMessage,\n    replyCount,\n    isThreadList,\n  ]);\n\n  useEffect(() => {\n    if (isMessageListScrolledToBottom) {\n      setCountUnread(0);\n      setReplyCount(parentMessage?.reply_count || 0);\n    }\n  }, [isMessageListScrolledToBottom, parentMessage]);\n\n  if (isMessageListScrolledToBottom && !isNotAtLatestMessageSet) return null;\n\n  return (\n    <div className='str-chat__jump-to-latest-message'>\n      <Button\n        appearance='ghost'\n        aria-label={t(\n          'messageList.scrollLatestMessage.jumpLatestMessage.ariaLabel',\n          'Jump to latest message',\n        )}\n        aria-live='polite'\n        circular\n        className='str-chat__jump-to-latest-message__button'\n        data-testid='scroll-to-latest-message-button'\n        onClick={onClick}\n        size='md'\n        variant='secondary'\n      >\n        <IconArrowDown />\n      </Button>\n      {countUnread > 0 && (\n        <Badge\n          className='str-chat__jump-to-latest__unread-count'\n          data-testid='unread-message-notification-counter'\n          size='md'\n          variant='primary'\n        >\n          {countUnread}\n        </Badge>\n      )}\n    </div>\n  );\n};\n\nexport const ScrollToLatestMessageButton = React.memo(\n  UnMemoizedScrollToLatestMessageButton,\n) as typeof UnMemoizedScrollToLatestMessageButton;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,uBAAuB,EAAE,qBAAkC,EAC/D,cACF;AAEA,IAAM,yCACJ,UACG;CACH,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EACJ,+BACA,0BAA0B,OAC1B,YACE;CAEJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,CAAC,CAAC;CACvB,MAAM,EAAE,kBAAkB,cAAc,QAAQ,OAAO,mBAAmB,KAAK,CAAC;CAChF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,aAAa,kBAAkB,SAAS,QAAQ,YAAY,KAAK,CAAC;CACzE,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe,eAAe,CAAC;CAC5E,MAAM,gBAAgB,eAAe,oBAAoB;CAEzD,gBAAgB;EACd,MAAM,eAAe,UAA2D;GAC9E,MAAM,6BAA6B,MAAM,QAAQ,SAAS;GAC1D,MAAM,mBAAmB,MAAM,MAAM,OAAO,OAAO,MAAM;GAEzD,MAAM,oBAAoB,CAAC,CAAC,MAAM,SAAS;GAI3C,IACE,iCACA,8BACA,oBALA,WAAW,CAAC,gBAAgB,mBAQ5B;GAGF,IAAI,MAAM,SAAS,eAEjB,gBAAgB,SAAS,OAAO,CAAC;QAC5B,IAAI,MAAM,SAAS,OAAO,eAAe,IAAI;IAClD,MAAM,gBAAgB,MAAM,SAAS,eAAe;IACpD,qBAAqB,gBAAgB,UAAU;GACjD;EACF;EACA,MAAM,eAAe,OAAO,GAAG,eAAe,WAAW;EAEzD,aAAa;GACX,aAAa,YAAY;EAC3B;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,+BAA+B;GACjC,eAAe,CAAC;GAChB,cAAc,eAAe,eAAe,CAAC;EAC/C;CACF,GAAG,CAAC,+BAA+B,aAAa,CAAC;CAEjD,IAAI,iCAAiC,CAAC,yBAAyB,OAAO;CAEtE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EACV,+DACA,wBACF;GACA,aAAU;GACV,UAAA;GACA,WAAU;GACV,eAAY;GACH;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,eAAD,CAAgB,CAAA;EACV,CAAA,GACP,cAAc,KACb,oBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,MAAK;GACL,SAAQ;aAEP;EACI,CAAA,CAEN;;AAET;AAEA,IAAa,8BAA8B,MAAM,KAC/C,qCACF"}

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

@@ -1,27 +1,43 @@
-import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/MessageList/UnreadMessagesNotification.tsx
-var UnreadMessagesNotification = ({ queryMessageLimit, showCount = true, unreadCount }) => {
+var unreadStateSnapshotSelector = (state) => ({ unreadCount: state.unreadCount });
+var UnreadMessagesNotification = ({ queryMessageLimit, showCount = true }) => {
 	const { IconArrowUp, IconXmark } = useComponentContextIcons();
-	const { jumpToFirstUnreadMessage, markRead } = useChannelActionContext();
-	const { t } = useTranslationContext("UnreadMessagesNotification");
+	const channel = useChannel();
+	const { client } = useChatContext();
+	const thread = useThreadContext();
+	const messagePaginator = useMessagePaginator();
+	const { unreadCount } = useStateStore(messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("str-chat__unread-messages-notification", { "str-chat__unread-messages-notification--with-count": unreadCount && showCount }),
 		"data-testid": "unread-messages-notification",
 		children: [/* @__PURE__ */ jsxs(Button, {
 			appearance: "outline",
-			onClick: () => jumpToFirstUnreadMessage(queryMessageLimit),
+			onClick: () => messagePaginator.jumpToTheFirstUnreadMessage({ pageSize: queryMessageLimit }),
 			variant: "secondary",
-			children: [/* @__PURE__ */ jsx(IconArrowUp, {}), unreadCount && showCount ? t("{{count}} unread", { count: unreadCount }) : t("Unread messages")]
+			children: [/* @__PURE__ */ jsx(IconArrowUp, {}), unreadCount && showCount ? t("messageList.unreadMessagesNotification.unread.text", {
+				count: unreadCount,
+				defaultValue_one: "{{count}} unread",
+				defaultValue_other: "{{count}} unread"
+			}) : t("messageList.unreadMessagesNotification.unreadMessages.text", "Unread messages")]
 		}), /* @__PURE__ */ jsx(Button, {
 			appearance: "outline",
-			"aria-label": t("aria/Mark messages as read"),
-			onClick: () => markRead(),
+			"aria-label": t("messageList.unreadMessagesNotification.markMessagesRead.ariaLabel", "Mark messages as read"),
+			onClick: () => {
+				messagePaginator.clearUnreadSnapshot();
+				client.messageDeliveryReporter.throttledMarkRead(thread ?? channel);
+			},
 			variant: "secondary",
 			children: /* @__PURE__ */ jsx(IconXmark, {})
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"UnreadMessagesNotification.mjs","names":[],"sources":["../../../../src/components/MessageList/UnreadMessagesNotification.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChannelActionContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\n\nexport type UnreadMessagesNotificationProps = {\n  /**\n   * Configuration parameter to determine the message page size, when jumping to the first unread message.\n   */\n  queryMessageLimit?: number;\n  /**\n   * Configuration parameter to determine, whether the unread count is to be shown on the component. Enabled by default.\n   */\n  showCount?: boolean;\n  /**\n   * The count of unread messages to be displayed if enabled.\n   */\n  unreadCount?: number;\n};\n\nexport const UnreadMessagesNotification = ({\n  queryMessageLimit,\n  showCount = true,\n  unreadCount,\n}: UnreadMessagesNotificationProps) => {\n  const { IconArrowUp, IconXmark } = useComponentContextIcons();\n\n  const { jumpToFirstUnreadMessage, markRead } = useChannelActionContext();\n  const { t } = useTranslationContext('UnreadMessagesNotification');\n\n  return (\n    <div\n      className={clsx('str-chat__unread-messages-notification', {\n        'str-chat__unread-messages-notification--with-count': unreadCount && showCount,\n      })}\n      data-testid='unread-messages-notification'\n    >\n      <Button\n        appearance='outline'\n        onClick={() => jumpToFirstUnreadMessage(queryMessageLimit)}\n        variant='secondary'\n      >\n        <IconArrowUp />\n        {unreadCount && showCount\n          ? t('{{count}} unread', { count: unreadCount })\n          : t('Unread messages')}\n      </Button>\n      <Button\n        appearance='outline'\n        aria-label={t('aria/Mark messages as read')}\n        onClick={() => markRead()}\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAwBA,IAAa,8BAA8B,EACzC,mBACA,YAAY,MACZ,kBACqC;CACrC,MAAM,EAAE,aAAa,cAAc,yBAAyB;CAE5D,MAAM,EAAE,0BAA0B,aAAa,wBAAwB;CACvE,MAAM,EAAE,MAAM,sBAAsB,4BAA4B;CAEhE,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,0CAA0C,EACxD,sDAAsD,eAAe,UACvE,CAAC;EACD,eAAY;YAJd,CAME,qBAAC,QAAD;GACE,YAAW;GACX,eAAe,yBAAyB,iBAAiB;GACzD,SAAQ;aAHV,CAKE,oBAAC,aAAD,CAAc,CAAA,GACb,eAAe,YACZ,EAAE,oBAAoB,EAAE,OAAO,YAAY,CAAC,IAC5C,EAAE,iBAAiB,CACjB;MACR,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,4BAA4B;GAC1C,eAAe,SAAS;GACxB,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}
+{"version":3,"file":"UnreadMessagesNotification.mjs","names":[],"sources":["../../../../src/components/MessageList/UnreadMessagesNotification.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { useMessagePaginator } from '../../hooks';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\nimport { useThreadContext } from '../Threads';\nimport type { UnreadSnapshotState } from 'stream-chat';\nimport { useStateStore } from '../../store';\n\nexport type UnreadMessagesNotificationProps = {\n  /**\n   * Configuration parameter to determine the message page size, when jumping to the first unread message.\n   */\n  queryMessageLimit?: number;\n  /**\n   * Configuration parameter to determine, whether the unread count is to be shown on the component. Enabled by default.\n   */\n  showCount?: boolean;\n  // todo: maybe remove?\n  unreadCount?: number;\n};\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => ({\n  unreadCount: state.unreadCount,\n});\n\nexport const UnreadMessagesNotification = ({\n  queryMessageLimit,\n  showCount = true,\n}: UnreadMessagesNotificationProps) => {\n  const { IconArrowUp, IconXmark } = useComponentContextIcons();\n  // todo: move into a hook dedicated to unread count from the snapshot\n  const channel = useChannel();\n  const { client } = useChatContext();\n  const thread = useThreadContext();\n  const messagePaginator = useMessagePaginator();\n  const { unreadCount } = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n\n  const { t } = useTranslationContext();\n\n  return (\n    <div\n      className={clsx('str-chat__unread-messages-notification', {\n        'str-chat__unread-messages-notification--with-count': unreadCount && showCount,\n      })}\n      data-testid='unread-messages-notification'\n    >\n      <Button\n        appearance='outline'\n        onClick={() =>\n          messagePaginator.jumpToTheFirstUnreadMessage({\n            pageSize: queryMessageLimit,\n          })\n        }\n        variant='secondary'\n      >\n        <IconArrowUp />\n        {unreadCount && showCount\n          ? t('messageList.unreadMessagesNotification.unread.text', {\n              count: unreadCount,\n              defaultValue_one: '{{count}} unread',\n              defaultValue_other: '{{count}} unread',\n            })\n          : t(\n              'messageList.unreadMessagesNotification.unreadMessages.text',\n              'Unread messages',\n            )}\n      </Button>\n      <Button\n        appearance='outline'\n        aria-label={t(\n          'messageList.unreadMessagesNotification.markMessagesRead.ariaLabel',\n          'Mark messages as read',\n        )}\n        onClick={() => {\n          messagePaginator.clearUnreadSnapshot();\n          client.messageDeliveryReporter.throttledMarkRead(thread ?? channel);\n        }}\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA2BA,IAAM,+BAA+B,WAAgC,EACnE,aAAa,MAAM,YACrB;AAEA,IAAa,8BAA8B,EACzC,mBACA,YAAY,WACyB;CACrC,MAAM,EAAE,aAAa,cAAc,yBAAyB;CAE5D,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,SAAS,iBAAiB;CAChC,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,EAAE,gBAAgB,cACtB,iBAAiB,qBACjB,2BACF;CAEA,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,0CAA0C,EACxD,sDAAsD,eAAe,UACvE,CAAC;EACD,eAAY;YAJd,CAME,qBAAC,QAAD;GACE,YAAW;GACX,eACE,iBAAiB,4BAA4B,EAC3C,UAAU,kBACZ,CAAC;GAEH,SAAQ;aAPV,CASE,oBAAC,aAAD,CAAc,CAAA,GACb,eAAe,YACZ,EAAE,sDAAsD;IACtD,OAAO;IACP,kBAAkB;IAClB,oBAAoB;GACtB,CAAC,IACD,EACE,8DACA,iBACF,CACE;MACR,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EACV,qEACA,uBACF;GACA,eAAe;IACb,iBAAiB,oBAAoB;IACrC,OAAO,wBAAwB,kBAAkB,UAAU,OAAO;GACpE;GACA,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}

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

@@ -1,26 +1,37 @@
-import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MessageList/UnreadMessagesSeparator.tsx
 var UNREAD_MESSAGE_SEPARATOR_CLASS = "str-chat__unread-messages-separator";
 var UnreadMessagesSeparator = ({ showCount = true, unreadCount }) => {
 	const { IconXmark } = useComponentContextIcons();
-	const { t } = useTranslationContext("UnreadMessagesSeparator");
-	const { markRead } = useChannelActionContext();
+	const { t } = useTranslationContext();
+	const channel = useChannel();
+	const { client } = useChatContext();
+	const messagePaginator = useMessagePaginator();
 	return /* @__PURE__ */ jsxs("div", {
 		className: UNREAD_MESSAGE_SEPARATOR_CLASS,
 		"data-testid": "unread-messages-separator",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "str-chat__unread-messages-separator__text",
-			children: unreadCount && showCount ? t("{{count}} unread", { count: unreadCount }) : t("Unread messages")
+			children: unreadCount && showCount ? t("messageList.unreadMessagesNotification.unread.text", {
+				count: unreadCount,
+				defaultValue_one: "{{count}} unread",
+				defaultValue_other: "{{count}} unread"
+			}) : t("messageList.unreadMessagesNotification.unreadMessages.text", "Unread messages")
 		}), /* @__PURE__ */ jsx(Button, {
 			appearance: "ghost",
-			"aria-label": t("aria/Mark messages as read"),
+			"aria-label": t("messageList.unreadMessagesNotification.markMessagesRead.ariaLabel", "Mark messages as read"),
 			circular: true,
-			onClick: () => markRead(),
+			onClick: () => {
+				client.messageDeliveryReporter.throttledMarkRead(channel);
+				messagePaginator.clearUnreadSnapshot();
+			},
 			size: "sm",
 			variant: "secondary",
 			children: /* @__PURE__ */ jsx(IconXmark, {})

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

@@ -1 +1 @@
-{"version":3,"file":"UnreadMessagesSeparator.mjs","names":[],"sources":["../../../../src/components/MessageList/UnreadMessagesSeparator.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChannelActionContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\n\nexport const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';\n\nexport type UnreadMessagesSeparatorProps = {\n  /**\n   * Configuration parameter to determine, whether the unread count is to be shown on the component. Enabled by default.\n   */\n  showCount?: boolean;\n  /**\n   * The count of unread messages to be displayed if enabled.\n   */\n  unreadCount?: number;\n};\n\nexport const UnreadMessagesSeparator = ({\n  showCount = true,\n  unreadCount,\n}: UnreadMessagesSeparatorProps) => {\n  const { IconXmark } = useComponentContextIcons();\n\n  const { t } = useTranslationContext('UnreadMessagesSeparator');\n  const { markRead } = useChannelActionContext();\n  return (\n    <div\n      className={UNREAD_MESSAGE_SEPARATOR_CLASS}\n      data-testid='unread-messages-separator'\n    >\n      <div className={'str-chat__unread-messages-separator__text'}>\n        {unreadCount && showCount\n          ? t('{{count}} unread', { count: unreadCount })\n          : t('Unread messages')}\n      </div>\n      <Button\n        appearance='ghost'\n        aria-label={t('aria/Mark messages as read')}\n        circular\n        onClick={() => markRead()}\n        size='sm'\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAa,iCAAiC;AAa9C,IAAa,2BAA2B,EACtC,YAAY,MACZ,kBACkC;CAClC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,EAAE,MAAM,sBAAsB,yBAAyB;CAC7D,MAAM,EAAE,aAAa,wBAAwB;CAC7C,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAY;YAFd,CAIE,oBAAC,OAAD;GAAK,WAAW;aACb,eAAe,YACZ,EAAE,oBAAoB,EAAE,OAAO,YAAY,CAAC,IAC5C,EAAE,iBAAiB;EACpB,CAAA,GACL,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,4BAA4B;GAC1C,UAAA;GACA,eAAe,SAAS;GACxB,MAAK;GACL,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}
+{"version":3,"file":"UnreadMessagesSeparator.mjs","names":[],"sources":["../../../../src/components/MessageList/UnreadMessagesSeparator.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\nimport { useMessagePaginator } from '../../hooks';\n\nexport const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';\n\nexport type UnreadMessagesSeparatorProps = {\n  /**\n   * Configuration parameter to determine, whether the unread count is to be shown on the component. Enabled by default.\n   */\n  showCount?: boolean;\n  /**\n   * The count of unread messages to be displayed if enabled.\n   */\n  unreadCount?: number;\n};\n\nexport const UnreadMessagesSeparator = ({\n  showCount = true,\n  unreadCount,\n}: UnreadMessagesSeparatorProps) => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { client } = useChatContext();\n  const messagePaginator = useMessagePaginator();\n  return (\n    <div\n      className={UNREAD_MESSAGE_SEPARATOR_CLASS}\n      data-testid='unread-messages-separator'\n    >\n      <div className={'str-chat__unread-messages-separator__text'}>\n        {unreadCount && showCount\n          ? t('messageList.unreadMessagesNotification.unread.text', {\n              count: unreadCount,\n              defaultValue_one: '{{count}} unread',\n              defaultValue_other: '{{count}} unread',\n            })\n          : t(\n              'messageList.unreadMessagesNotification.unreadMessages.text',\n              'Unread messages',\n            )}\n      </div>\n      <Button\n        appearance='ghost'\n        aria-label={t(\n          'messageList.unreadMessagesNotification.markMessagesRead.ariaLabel',\n          'Mark messages as read',\n        )}\n        circular\n        onClick={() => {\n          client.messageDeliveryReporter.throttledMarkRead(channel);\n          messagePaginator.clearUnreadSnapshot();\n        }}\n        size='sm'\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAUA,IAAa,iCAAiC;AAa9C,IAAa,2BAA2B,EACtC,YAAY,MACZ,kBACkC;CAClC,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,mBAAmB,oBAAoB;CAC7C,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAY;YAFd,CAIE,oBAAC,OAAD;GAAK,WAAW;aACb,eAAe,YACZ,EAAE,sDAAsD;IACtD,OAAO;IACP,kBAAkB;IAClB,oBAAoB;GACtB,CAAC,IACD,EACE,8DACA,iBACF;EACD,CAAA,GACL,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EACV,qEACA,uBACF;GACA,UAAA;GACA,eAAe;IACb,OAAO,wBAAwB,kBAAkB,OAAO;IACxD,iBAAiB,oBAAoB;GACvC;GACA,MAAK;GACL,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}