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

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

@@ -1 +1 @@
-{"version":3,"file":"Channel.mjs","names":[],"sources":["../../../../src/components/Channel/Channel.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\nimport debounce from 'lodash.debounce';\nimport throttle from 'lodash.throttle';\nimport type {\n  ChannelAPIResponse,\n  ChannelMemberResponse,\n  ChannelQueryOptions,\n  ChannelState,\n  DeleteMessageOptions,\n  Event,\n  EventAPIResponse,\n  GiphyVersions,\n  LocalMessage,\n  Message,\n  MessageResponse,\n  SendMessageAPIResponse,\n  SendMessageOptions,\n  Channel as StreamChannel,\n  StreamChat,\n  UpdateMessageOptions,\n} from 'stream-chat';\nimport { localMessageToNewMessagePayload, withoutConcurrency } from 'stream-chat';\n\nimport { initialState, makeChannelReducer } from './channelState';\nimport { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';\nimport { useCreateTypingContext } from './hooks/useCreateTypingContext';\nimport { useEditMessageHandler } from './hooks/useEditMessageHandler';\nimport { useIsMounted } from './hooks/useIsMounted';\nimport type { OnMentionAction } from './hooks/useMentionsHandlers';\nimport { useMentionsHandlers } from './hooks/useMentionsHandlers';\n\nimport {\n  LoadingErrorIndicator as DefaultLoadingErrorIndicator,\n  LoadingChannel as DefaultLoadingIndicator,\n} from '../Loading';\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { useNotificationApi } from '../Notifications';\n\nimport type { ChannelActionContextValue, MarkReadWrapperOptions } from '../../context';\nimport {\n  ChannelActionProvider,\n  ChannelStateProvider,\n  TypingProvider,\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../context';\n\nimport { CHANNEL_CONTAINER_ID } from './constants';\nimport {\n  DEFAULT_HIGHLIGHT_DURATION,\n  DEFAULT_JUMP_TO_PAGE_SIZE,\n  DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n  DEFAULT_THREAD_PAGE_SIZE,\n} from '../../constants/limits';\n\nimport { hasMoreMessagesProbably } from '../MessageList';\nimport {\n  getChatContainerClass,\n  useChannelContainerClasses,\n  useImageFlagEmojisOnWindowsClass,\n} from './hooks/useChannelContainerClasses';\nimport {\n  adaptMessageSendErrorToErrorFromResponse,\n  findInMsgSetByDate,\n  findInMsgSetById,\n  settlePendingAttachmentUploads,\n} from './utils';\nimport { useThreadContext } from '../Threads';\nimport { getChannel } from '../../utils';\nimport { getChannelConfig } from '../../utils/getChannelConfig';\nimport type {\n  ChannelUnreadUiState,\n  ImageAttachmentSizeHandler,\n  VideoAttachmentSizeHandler,\n} from '../../types/types';\nimport {\n  getImageAttachmentConfiguration,\n  getVideoAttachmentConfiguration,\n} from '../Attachment/attachment-sizing';\nimport { useSearchFocusedMessage } from '../Search/hooks';\nimport { WithAudioPlayback } from '../AudioPlayback';\n\nexport type ChannelProps = {\n  /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */\n  activeUnreadHandler?: (unread: number, documentTitle: string) => void;\n  /** Allows multiple audio players to play the audio at the same time. Disabled by default. */\n  allowConcurrentAudioPlayback?: boolean;\n  /** The connected and active channel */\n  channel?: StreamChannel;\n  /**\n   * Optional configuration parameters used for the initial channel query.\n   * Applied only if the value of channel.initialized is false.\n   * If the channel instance has already been initialized (channel has been queried),\n   * then the channel query will be skipped and channelQueryOptions will not be applied.\n   */\n  channelQueryOptions?: ChannelQueryOptions;\n  /** Custom action handler to override the default `client.deleteMessage(message.id)` function */\n  doDeleteMessageRequest?: (\n    message: LocalMessage,\n    options?: DeleteMessageOptions,\n  ) => Promise<MessageResponse>;\n  /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */\n  doMarkReadRequest?: (\n    channel: StreamChannel,\n    setChannelUnreadUiState?: (state: ChannelUnreadUiState) => void,\n  ) => Promise<EventAPIResponse> | void;\n  /** Custom action handler to override the default `channel.sendMessage` request function (advanced usage only) */\n  doSendMessageRequest?: (\n    channel: StreamChannel,\n    message: Message,\n    options?: SendMessageOptions,\n  ) => ReturnType<StreamChannel['sendMessage']> | void;\n  /** Custom action handler to override the default `client.updateMessage` request function (advanced usage only) */\n  doUpdateMessageRequest?: (\n    cid: string,\n    updatedMessage: LocalMessage | MessageResponse,\n    options?: UpdateMessageOptions,\n  ) => ReturnType<StreamChat['updateMessage']>;\n  /** Custom UI component to be shown if no active channel is set, defaults to the message empty state indicator. Pass `null` to suppress rendering. */\n  EmptyPlaceholder?: React.ReactElement | null;\n  /** The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default */\n  giphyVersion?: GiphyVersions;\n  /** A custom function to provide size configuration for image attachments */\n  imageAttachmentSizeHandler?: ImageAttachmentSizeHandler;\n  /**\n   * Allows to prevent triggering the channel.watch() call when mounting the component.\n   * That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client.\n   * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.\n   */\n  initializeOnMount?: boolean;\n  /** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount. */\n  markReadOnMount?: boolean;\n  /** Custom action handler function to run on click of an @mention in a message */\n  onMentionsClick?: OnMentionAction;\n  /** Custom action handler function to run on hover of an @mention in a message */\n  onMentionsHover?: OnMentionAction;\n  /** You can turn on/off thumbnail generation for video attachments */\n  shouldGenerateVideoThumbnail?: boolean;\n  /** If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages) */\n  skipMessageDataMemoization?: boolean;\n  /** A custom function to provide size configuration for video attachments */\n  videoAttachmentSizeHandler?: VideoAttachmentSizeHandler;\n};\n\nconst ChannelContainer = ({\n  children,\n  className: additionalClassName,\n  ...props\n}: PropsWithChildren<ComponentProps<'div'>>) => {\n  const { customClasses, theme } = useChatContext('Channel');\n  const { channelClass, chatClass } = useChannelContainerClasses({\n    customClasses,\n  });\n  const className = clsx(chatClass, theme, channelClass, additionalClassName);\n  return (\n    <div id={CHANNEL_CONTAINER_ID} {...props} className={className}>\n      {children}\n    </div>\n  );\n};\n\nconst UnMemoizedChannel = (props: PropsWithChildren<ChannelProps>) => {\n  const { channel: propsChannel, EmptyPlaceholder } = props;\n  const {\n    EmptyStateIndicator = DefaultEmptyStateIndicator,\n    LoadingErrorIndicator,\n    LoadingIndicator = DefaultLoadingIndicator,\n  } = useComponentContext('Channel');\n\n  const { channel: contextChannel, channelsQueryState } = useChatContext('Channel');\n\n  const channel = propsChannel || contextChannel;\n  const emptyPlaceholder =\n    'EmptyPlaceholder' in props\n      ? EmptyPlaceholder\n      : EmptyStateIndicator && <EmptyStateIndicator listType='message' />;\n\n  if (channelsQueryState.queryInProgress === 'reload' && LoadingIndicator) {\n    return (\n      <ChannelContainer>\n        <LoadingIndicator />\n      </ChannelContainer>\n    );\n  }\n\n  if (channelsQueryState.error && !channel && LoadingErrorIndicator) {\n    return (\n      <ChannelContainer>\n        <LoadingErrorIndicator error={channelsQueryState.error} />\n      </ChannelContainer>\n    );\n  }\n\n  if (channelsQueryState.error && !channel) {\n    return <ChannelContainer />;\n  }\n\n  if (!channel?.cid) {\n    return <ChannelContainer>{emptyPlaceholder}</ChannelContainer>;\n  }\n\n  return <ChannelInner {...props} channel={channel} key={channel.cid} />;\n};\n\nconst ChannelInner = (\n  props: PropsWithChildren<\n    ChannelProps & {\n      channel: StreamChannel;\n      key: string;\n    }\n  >,\n) => {\n  const {\n    activeUnreadHandler,\n    allowConcurrentAudioPlayback,\n    channel,\n    channelQueryOptions,\n    children,\n    doDeleteMessageRequest,\n    doMarkReadRequest,\n    doSendMessageRequest,\n    doUpdateMessageRequest,\n    initializeOnMount = true,\n    markReadOnMount = true,\n    onMentionsClick,\n    onMentionsHover,\n    skipMessageDataMemoization,\n  } = props;\n  const {\n    LoadingErrorIndicator = DefaultLoadingErrorIndicator,\n    LoadingIndicator = DefaultLoadingIndicator,\n  } = useComponentContext();\n\n  const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } =\n    useChatContext();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext('Channel');\n  const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);\n  const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();\n  const thread = useThreadContext();\n\n  const [channelConfig, setChannelConfig] = useState(() => getChannelConfig(channel));\n\n  const [channelUnreadUiState, _setChannelUnreadUiState] =\n    useState<ChannelUnreadUiState>();\n\n  const channelReducer = useMemo(() => makeChannelReducer(), []);\n\n  const [state, dispatch] = useReducer(\n    channelReducer,\n    // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used\n    // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state\n    {\n      ...initialState,\n      hasMore: channel.state.messagePagination.hasPrev,\n      loading: !channel.initialized,\n      messages: channel.state.messages,\n    },\n  );\n  const jumpToMessageFromSearch = useSearchFocusedMessage();\n  const isMounted = useIsMounted();\n\n  const originalTitle = useRef('');\n  const lastRead = useRef<Date | undefined>(undefined);\n  const online = useRef(true);\n\n  const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n\n  const channelCapabilitiesArray = channel.data?.own_capabilities as string[];\n\n  const throttledCopyStateFromChannel = useMemo(\n    () =>\n      throttle(() => dispatch({ channel, type: 'copyStateFromChannelOnEvent' }), 500, {\n        leading: true,\n        trailing: true,\n      }),\n    [channel],\n  );\n\n  const setChannelUnreadUiState = useMemo(\n    () =>\n      throttle(_setChannelUnreadUiState, 200, {\n        leading: true,\n        trailing: false,\n      }),\n    [],\n  );\n\n  const markRead = useMemo(\n    () =>\n      throttle(\n        async (options?: MarkReadWrapperOptions) => {\n          const { updateChannelUiUnreadState = true } = options ?? {};\n          if (channel.disconnected) return;\n\n          if (!channelConfig?.read_events && client.options.isLocalUnreadCountEnabled) {\n            const event = channel.markReadLocally();\n\n            if (updateChannelUiUnreadState && event) {\n              lastRead.current = new Date();\n              _setChannelUnreadUiState({\n                last_read: lastRead.current,\n                last_read_message_id: event.last_read_message_id,\n                unread_messages: 0,\n              });\n            }\n          } else if (channelConfig?.read_events) {\n            lastRead.current = new Date();\n\n            if (doMarkReadRequest) {\n              doMarkReadRequest(\n                channel,\n                updateChannelUiUnreadState ? setChannelUnreadUiState : undefined,\n              );\n            } else {\n              const markReadResponse = await channel.markRead();\n              // markReadResponse.event can be null in case of a user that is not a member of a channel being marked read\n              // in that case event is null and we should not set unread UI\n              if (updateChannelUiUnreadState && markReadResponse?.event) {\n                _setChannelUnreadUiState({\n                  last_read: lastRead.current,\n                  last_read_message_id: markReadResponse.event.last_read_message_id,\n                  unread_messages: 0,\n                });\n              }\n            }\n          }\n\n          if (activeUnreadHandler) {\n            activeUnreadHandler(0, originalTitle.current);\n          } else if (originalTitle.current) {\n            document.title = originalTitle.current;\n          }\n        },\n        500,\n        { leading: true, trailing: false },\n      ),\n    [\n      activeUnreadHandler,\n      channel,\n      channelConfig,\n      client,\n      doMarkReadRequest,\n      setChannelUnreadUiState,\n    ],\n  );\n\n  const handleEvent = async (event: Event) => {\n    // client-level subscriptions keep firing after disconnect, and reading from\n    // or querying a disconnected channel throws\n    if (channel.disconnected) return;\n\n    if (event.message) {\n      dispatch({\n        channel,\n        message: event.message,\n        type: 'updateThreadOnEvent',\n      });\n    }\n\n    // ignore the event if it is not targeted at the current channel.\n    // Event targeted at this channel or globally targeted event should lead to state refresh\n    if (event.type === 'user.messages.deleted' && event.cid && event.cid !== channel.cid)\n      return;\n\n    if (event.type === 'user.watching.start' || event.type === 'user.watching.stop')\n      return;\n\n    if (event.type === 'typing.start' || event.type === 'typing.stop') {\n      return dispatch({ channel, type: 'setTyping' });\n    }\n\n    if (event.type === 'connection.changed' && typeof event.online === 'boolean') {\n      online.current = event.online;\n    }\n\n    if (event.type === 'message.new') {\n      const mainChannelUpdated =\n        !event.message?.parent_id || event.message?.show_in_channel;\n\n      if (mainChannelUpdated) {\n        if (\n          document.hidden &&\n          (channelConfig?.read_events || client.options.isLocalUnreadCountEnabled) &&\n          !channel.muteStatus().muted\n        ) {\n          const unread = channel.countUnread(lastRead.current);\n\n          if (activeUnreadHandler) {\n            activeUnreadHandler(unread, originalTitle.current);\n          } else {\n            document.title = `(${unread}) ${originalTitle.current}`;\n          }\n        }\n      }\n\n      if (\n        event.message?.user?.id === client.userID &&\n        event?.message?.created_at &&\n        event?.message?.cid\n      ) {\n        const messageDate = new Date(event.message.created_at);\n        const cid = event.message.cid;\n\n        if (\n          !latestMessageDatesByChannels[cid] ||\n          latestMessageDatesByChannels[cid].getTime() < messageDate.getTime()\n        ) {\n          latestMessageDatesByChannels[cid] = messageDate;\n        }\n      }\n    }\n\n    if (event.type === 'user.deleted') {\n      const oldestID = channel.state?.messages?.[0]?.id;\n\n      /**\n       * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.\n       */\n      // FIXME: we should use channelQueryOptions if they are available\n      await channel.query({\n        messages: { id_lt: oldestID, limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },\n        watchers: { limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },\n      });\n    }\n\n    if (event.type === 'message.read_locally') {\n      return;\n    }\n\n    if (event.type === 'notification.mark_unread')\n      _setChannelUnreadUiState((prev) => {\n        if (!(event.last_read_at && event.user)) return prev;\n        return {\n          first_unread_message_id: event.first_unread_message_id,\n          last_read: new Date(event.last_read_at),\n          last_read_message_id: event.last_read_message_id,\n          unread_messages: event.unread_messages ?? 0,\n        };\n      });\n\n    if (event.type === 'channel.truncated' && event.cid === channel.cid) {\n      _setChannelUnreadUiState(undefined);\n    }\n\n    throttledCopyStateFromChannel();\n  };\n\n  // useLayoutEffect here to prevent spinner. Use Suspense when it is available in stable release\n  useLayoutEffect(() => {\n    let errored = false;\n    let done = false;\n\n    (async () => {\n      if (!channel.initialized && initializeOnMount) {\n        try {\n          // if active channel has been set without id, we will create a temporary channel id from its member IDs\n          // to keep track of the /query request in progress. This is the same approach of generating temporary id\n          // that the JS client uses to keep track of channel in client.activeChannels\n          const members: string[] = [];\n          if (!channel.id && channel.data?.members) {\n            for (const member of channel.data.members) {\n              let userId: string | undefined;\n              if (typeof member === 'string') {\n                userId = member;\n              } else if (typeof member === 'object') {\n                const { user, user_id } = member as ChannelMemberResponse;\n                userId = user_id || user?.id;\n              }\n              if (userId) {\n                members.push(userId);\n              }\n            }\n          }\n          await getChannel({ channel, client, members, options: channelQueryOptions });\n          const config = channel.getConfig();\n          setChannelConfig(config);\n        } catch (e) {\n          dispatch({ error: e as Error, type: 'setError' });\n          errored = true;\n        }\n      }\n\n      done = true;\n      originalTitle.current = document.title;\n\n      if (!errored) {\n        dispatch({\n          channel,\n          hasMore: channel.state.messagePagination.hasPrev,\n          type: 'initStateFromChannel',\n        });\n\n        if (client.user?.id && channel.state.read[client.user.id]) {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { user, ...ownReadState } = channel.state.read[client.user.id];\n          _setChannelUnreadUiState((existingState) => {\n            // only set the initial state here, do not override existing\n            if (existingState) return existingState;\n            return ownReadState;\n          });\n        }\n        /**\n         * TODO: maybe pass last_read to the countUnread method to get proper value\n         * combined with channel.countUnread adjustment (_countMessageAsUnread)\n         * to allow counting own messages too\n         *\n         * const lastRead = channel.state.read[client.userID as string].last_read;\n         */\n        if (channel.countUnread() > 0 && markReadOnMount)\n          markRead({ updateChannelUiUnreadState: false });\n        // The more complex sync logic is done in Chat\n        client.on('connection.changed', handleEvent);\n        client.on('connection.recovered', handleEvent);\n        client.on('user.updated', handleEvent);\n        client.on('user.deleted', handleEvent);\n        client.on('user.messages.deleted', handleEvent);\n        channel.on(handleEvent);\n      }\n    })();\n\n    return () => {\n      if (errored || !done) return;\n      channel?.off(handleEvent);\n      client.off('connection.changed', handleEvent);\n      client.off('connection.recovered', handleEvent);\n      client.off('user.deleted', handleEvent);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    channel.cid,\n    channelQueryOptions,\n    doMarkReadRequest,\n    channelConfig?.read_events,\n    initializeOnMount,\n  ]);\n\n  useEffect(() => {\n    if (!state.thread) return;\n\n    const message = state.messages?.find((m) => m.id === state.thread?.id);\n\n    if (message) dispatch({ message, type: 'setThread' });\n  }, [state.messages, state.thread]);\n\n  const handleHighlightedMessageChange = useCallback(\n    ({\n      highlightDuration,\n      highlightedMessageId,\n    }: {\n      highlightedMessageId: string;\n      highlightDuration?: number;\n    }) => {\n      dispatch({\n        channel,\n        highlightedMessageId,\n        type: 'jumpToMessageFinished',\n      });\n      if (clearHighlightedMessageTimeoutId.current) {\n        clearTimeout(clearHighlightedMessageTimeoutId.current);\n      }\n      clearHighlightedMessageTimeoutId.current = setTimeout(() => {\n        if (searchController._internalState.getLatestValue().focusedMessage) {\n          searchController._internalState.partialNext({ focusedMessage: undefined });\n        }\n        clearHighlightedMessageTimeoutId.current = null;\n        dispatch({ type: 'clearHighlightedMessage' });\n      }, highlightDuration ?? DEFAULT_HIGHLIGHT_DURATION);\n    },\n    [channel, searchController],\n  );\n\n  useEffect(() => {\n    if (!jumpToMessageFromSearch?.id) return;\n    handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });\n  }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);\n\n  /** MESSAGE */\n  const notifyJumpToFirstUnreadError = useCallback(() => {\n    addNotification({\n      context: { feature: 'jumpToFirstUnread' },\n      emitter: 'Channel',\n      message: t('Failed to jump to the first unread message'),\n      severity: 'error',\n      targetPanels: ['channel'],\n      type: 'channel:jumpToFirstUnread:failed',\n    });\n  }, [addNotification, t]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const loadMoreFinished = useCallback(\n    debounce(\n      (hasMore: boolean, messages: ChannelState['messages']) => {\n        if (!isMounted.current) return;\n        dispatch({ hasMore, messages, type: 'loadMoreFinished' });\n      },\n      2000,\n      { leading: true, trailing: true },\n    ),\n    [],\n  );\n\n  const finishLoadMore = useCallback(\n    (hasMore: boolean, messages: ChannelState['messages']) => {\n      if (!isMounted.current) return;\n      dispatch({ hasMore, messages, type: 'loadMoreFinished' });\n    },\n    [isMounted],\n  );\n\n  const loadMore = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {\n    if (\n      channel.disconnected ||\n      !online.current ||\n      !window.navigator.onLine ||\n      !channel.state.messagePagination.hasPrev\n    )\n      return 0;\n\n    // prevent duplicate loading events...\n    const oldestMessage = state?.messages?.[0];\n\n    if (\n      state.loadingMore ||\n      state.loadingMoreNewer ||\n      oldestMessage?.status !== 'received'\n    ) {\n      return 0;\n    }\n\n    dispatch({ loadingMore: true, type: 'setLoadingMore' });\n\n    const oldestID = oldestMessage?.id;\n    const perPage = limit;\n    let queryResponse: ChannelAPIResponse;\n\n    try {\n      queryResponse = await channel.query({\n        messages: { id_lt: oldestID, limit: perPage },\n        watchers: { limit: perPage },\n      });\n    } catch (e) {\n      console.warn('message pagination request failed with error', e);\n      dispatch({ loadingMore: false, type: 'setLoadingMore' });\n      return 0;\n    }\n\n    loadMoreFinished.cancel();\n    finishLoadMore(channel.state.messagePagination.hasPrev, channel.state.messages);\n\n    return queryResponse.messages.length;\n  };\n\n  const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {\n    if (\n      channel.disconnected ||\n      !online.current ||\n      !window.navigator.onLine ||\n      !channel.state.messagePagination.hasNext\n    )\n      return 0;\n\n    const newestMessage = state?.messages?.[state?.messages?.length - 1];\n    if (state.loadingMore || state.loadingMoreNewer) return 0;\n\n    dispatch({ loadingMoreNewer: true, type: 'setLoadingMoreNewer' });\n\n    const newestId = newestMessage?.id;\n    const perPage = limit;\n    let queryResponse: ChannelAPIResponse;\n\n    try {\n      queryResponse = await channel.query({\n        messages: { id_gt: newestId, limit: perPage },\n        watchers: { limit: perPage },\n      });\n    } catch (e) {\n      console.warn('message pagination request failed with error', e);\n      dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });\n      return 0;\n    }\n\n    dispatch({\n      hasMoreNewer: channel.state.messagePagination.hasNext,\n      messages: channel.state.messages,\n      type: 'loadMoreNewerFinished',\n    });\n    return queryResponse.messages.length;\n  };\n\n  const jumpToMessage: ChannelActionContextValue['jumpToMessage'] = useCallback(\n    async (\n      messageId,\n      messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,\n      highlightDuration = DEFAULT_HIGHLIGHT_DURATION,\n    ) => {\n      // Keep quoted-message jumps out of the older-page pagination path.\n      dispatch({\n        loadingMoreForJumpToChannelMessage: true,\n        type: 'setLoadingMoreForJumpToChannelMessage',\n      });\n      loadMoreFinished.cancel();\n      try {\n        await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);\n\n        handleHighlightedMessageChange({\n          highlightDuration,\n          highlightedMessageId: messageId,\n        });\n      } catch (error) {\n        dispatch({\n          loadingMoreForJumpToChannelMessage: false,\n          type: 'setLoadingMoreForJumpToChannelMessage',\n        });\n        throw error;\n      }\n    },\n    [channel, handleHighlightedMessageChange, loadMoreFinished],\n  );\n\n  const jumpToLatestMessage: ChannelActionContextValue['jumpToLatestMessage'] =\n    useCallback(async () => {\n      loadMoreFinished.cancel();\n      await channel.state.loadMessageIntoState('latest');\n      dispatch({\n        hasMore: channel.state.messagePagination.hasPrev,\n        hasMoreNewer: channel.state.messagePagination.hasNext,\n        messages: channel.state.messages,\n        type: 'jumpToLatestMessageFinished',\n      });\n    }, [channel, loadMoreFinished]);\n\n  const jumpToFirstUnreadMessage: ChannelActionContextValue['jumpToFirstUnreadMessage'] =\n    useCallback(\n      async (\n        queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,\n        highlightDuration = DEFAULT_HIGHLIGHT_DURATION,\n      ) => {\n        if (!channelUnreadUiState?.unread_messages) return;\n        let lastReadMessageId = channelUnreadUiState?.last_read_message_id;\n        let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;\n        let isInCurrentMessageSet = false;\n\n        if (firstUnreadMessageId) {\n          const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);\n          isInCurrentMessageSet = result.index !== -1;\n        } else if (lastReadMessageId) {\n          const result = findInMsgSetById(lastReadMessageId, channel.state.messages);\n          isInCurrentMessageSet = !!result.target;\n          firstUnreadMessageId =\n            result.index > -1 ? channel.state.messages[result.index + 1]?.id : undefined;\n        } else {\n          const lastReadTimestamp = channelUnreadUiState.last_read.getTime();\n          const { index: lastReadMessageIndex, target: lastReadMessage } =\n            findInMsgSetByDate(\n              channelUnreadUiState.last_read,\n              channel.state.messages,\n              true,\n            );\n\n          if (lastReadMessage) {\n            firstUnreadMessageId = channel.state.messages[lastReadMessageIndex + 1]?.id;\n            isInCurrentMessageSet = !!firstUnreadMessageId;\n            lastReadMessageId = lastReadMessage.id;\n          } else {\n            dispatch({ loadingMore: true, type: 'setLoadingMore' });\n            let messages;\n            try {\n              messages = (\n                await channel.query(\n                  {\n                    messages: {\n                      created_at_around: channelUnreadUiState.last_read.toISOString(),\n                      limit: queryMessageLimit,\n                    },\n                  },\n                  'new',\n                )\n              ).messages;\n            } catch (e) {\n              notifyJumpToFirstUnreadError();\n              finishLoadMore(\n                channel.state.messagePagination.hasPrev,\n                channel.state.messages,\n              );\n              return;\n            }\n\n            const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);\n            if (!firstMessageWithCreationDate) {\n              notifyJumpToFirstUnreadError();\n              finishLoadMore(\n                channel.state.messagePagination.hasPrev,\n                channel.state.messages,\n              );\n              return;\n            }\n            const firstMessageTimestamp = new Date(\n              firstMessageWithCreationDate.created_at as string,\n            ).getTime();\n            if (lastReadTimestamp < firstMessageTimestamp) {\n              // whole channel is unread\n              firstUnreadMessageId = firstMessageWithCreationDate.id;\n            } else {\n              const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);\n              lastReadMessageId = result.target?.id;\n            }\n            finishLoadMore(\n              channel.state.messagePagination.hasPrev,\n              channel.state.messages,\n            );\n          }\n        }\n\n        if (!firstUnreadMessageId && !lastReadMessageId) {\n          notifyJumpToFirstUnreadError();\n          return;\n        }\n\n        if (!isInCurrentMessageSet) {\n          dispatch({ loadingMore: true, type: 'setLoadingMore' });\n          try {\n            const targetId = (firstUnreadMessageId ?? lastReadMessageId) as string;\n            await channel.state.loadMessageIntoState(\n              targetId,\n              undefined,\n              queryMessageLimit,\n            );\n            /**\n             * if the index of the last read message on the page is beyond the half of the page,\n             * we have arrived to the oldest page of the channel\n             */\n            const indexOfTarget = channel.state.messages.findIndex(\n              (message) => message.id === targetId,\n            ) as number;\n            finishLoadMore(\n              channel.state.messagePagination.hasPrev,\n              channel.state.messages,\n            );\n            firstUnreadMessageId =\n              firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;\n          } catch (e) {\n            notifyJumpToFirstUnreadError();\n            finishLoadMore(\n              channel.state.messagePagination.hasPrev,\n              channel.state.messages,\n            );\n            return;\n          }\n        }\n\n        if (!firstUnreadMessageId) {\n          notifyJumpToFirstUnreadError();\n          return;\n        }\n        if (!channelUnreadUiState.first_unread_message_id)\n          _setChannelUnreadUiState({\n            ...channelUnreadUiState,\n            first_unread_message_id: firstUnreadMessageId,\n            last_read_message_id: lastReadMessageId,\n          });\n        handleHighlightedMessageChange({\n          highlightDuration,\n          highlightedMessageId: firstUnreadMessageId,\n        });\n      },\n      [\n        channel,\n        finishLoadMore,\n        handleHighlightedMessageChange,\n        notifyJumpToFirstUnreadError,\n        channelUnreadUiState,\n      ],\n    );\n\n  const deleteMessage = useCallback(\n    async (\n      message: LocalMessage,\n      options?: DeleteMessageOptions,\n    ): Promise<MessageResponse> => {\n      if (!message?.id) {\n        throw new Error('Cannot delete a message - missing message ID.');\n      }\n      let deletedMessage;\n      if (doDeleteMessageRequest) {\n        deletedMessage = await doDeleteMessageRequest(message, options);\n      } else {\n        const result = await client.deleteMessage(message.id, options);\n        deletedMessage = result.message;\n      }\n\n      return deletedMessage;\n    },\n    [client, doDeleteMessageRequest],\n  );\n\n  const updateMessage = (updatedMessage: MessageResponse | LocalMessage) => {\n    // add the message to the local channel state\n    channel.state.addMessageSorted(updatedMessage, true);\n\n    dispatch({\n      channel,\n      parentId: state.thread && updatedMessage.parent_id,\n      type: 'copyMessagesFromChannel',\n    });\n  };\n\n  const sendMessageRequest = async ({\n    localMessage,\n    message,\n    options,\n  }: {\n    localMessage: LocalMessage;\n    message: Message;\n    options?: SendMessageOptions;\n  }) => {\n    try {\n      // With a composition middleware that allows pending uploads, a message can reach this\n      // point while its attachments are still uploading. Settling them here rather than in the\n      // composer's submit handler means `retrySendMessage` gets the same treatment, and an\n      // attachment that already has a URL is skipped — so a retry only re-uploads what failed.\n      const { attachments: settledAttachments, failureReason } =\n        await settlePendingAttachmentUploads({\n          attachments: localMessage.attachments ?? [],\n          channelCid: channel.cid,\n          client,\n        });\n\n      if (failureReason) {\n        // One failed upload fails the whole message: the send was already committed\n        // optimistically, so there is nobody left to ask whether to proceed without that\n        // attachment, and dropping it silently would alter what the user sent. Nothing is sent.\n        // `AttachmentManager` has already raised the per-upload error notification.\n        const failedMessage: LocalMessage = {\n          ...localMessage,\n          attachments: settledAttachments,\n          error: adaptMessageSendErrorToErrorFromResponse(failureReason),\n          status: 'failed',\n        };\n        updateMessage(failedMessage);\n        thread?.upsertReplyLocally({ message: failedMessage });\n        return;\n      }\n\n      // `settledAttachments` is the same array unless something was uploaded just now, in which\n      // case the payload has to be rebuilt from it: the composition middleware left\n      // `message.attachments` holding only the attachments that already had a URL.\n      const messageToSend =\n        settledAttachments === localMessage.attachments\n          ? message\n          : { ...message, attachments: settledAttachments };\n\n      let messageResponse: void | SendMessageAPIResponse;\n\n      if (doSendMessageRequest) {\n        messageResponse = await doSendMessageRequest(channel, messageToSend, options);\n      } else {\n        messageResponse = await channel.sendMessage(messageToSend, options);\n      }\n\n      let existingMessage: LocalMessage | undefined = undefined;\n      for (let i = channel.state.messages.length - 1; i >= 0; i--) {\n        const msg = channel.state.messages[i];\n        if (msg.id && msg.id === message.id) {\n          existingMessage = msg;\n          break;\n        }\n      }\n\n      const responseTimestamp = new Date(\n        messageResponse?.message?.updated_at || 0,\n      ).getTime();\n      const existingMessageTimestamp = existingMessage?.updated_at?.getTime() || 0;\n      const responseIsTheNewest = responseTimestamp > existingMessageTimestamp;\n\n      // Replace the message payload after send is completed\n      // We need to check for the newest message payload, because on slow network, the response can arrive later than WS events message.new, message.updated.\n      // Always override existing message in status \"sending\"\n      if (\n        messageResponse?.message &&\n        (responseIsTheNewest || existingMessage?.status === 'sending')\n      ) {\n        updateMessage({\n          ...messageResponse.message,\n          status: 'received',\n        });\n      }\n    } catch (error) {\n      const parsedError = adaptMessageSendErrorToErrorFromResponse(error);\n\n      // Handle the case where the message already exists\n      // (typically, when retrying to send a message).\n      // If the message already exists, we can assume it was sent successfully,\n      // so we update the message status to \"received\".\n      // Right now, the only way to check this error is by checking\n      // the combination of the error code and the error description,\n      // since there is no special error code for duplicate messages.\n      if (\n        parsedError.code === 4 &&\n        error instanceof Error &&\n        error.message.includes('already exists')\n      ) {\n        updateMessage({\n          ...localMessage,\n          status: 'received',\n        });\n      } else {\n        updateMessage({\n          ...localMessage,\n          error: parsedError,\n          status: 'failed',\n        });\n\n        thread?.upsertReplyLocally({\n          message: {\n            ...localMessage,\n            error: parsedError,\n            status: 'failed',\n          },\n        });\n      }\n    }\n  };\n\n  /**\n   * Sends are serialised per channel while a composition middleware declaring\n   * `allowsPendingUploads` is installed. Without it a text-only message would reach the server\n   * while an earlier message was still uploading, and since `created_at` is stamped when the\n   * request arrives, the channel would end up in a different order than the user watched happen.\n   * `withoutConcurrency` lets a failed send through without blocking the ones behind it.\n   *\n   * Read off the channel's composer, which is what the composer setup function configures — so\n   * whoever installs the middleware gets the matching send path with nothing else to switch on.\n   */\n  const doSendMessage = (params: {\n    localMessage: LocalMessage;\n    message: Message;\n    options?: SendMessageOptions;\n  }) =>\n    channel.messageComposer.allowsPendingUploads\n      ? withoutConcurrency(`stream-chat-react/send-message/${channel.cid}`, () =>\n          sendMessageRequest(params),\n        )\n      : sendMessageRequest(params);\n\n  const sendMessage = async ({\n    localMessage,\n    message,\n    options,\n  }: {\n    localMessage: LocalMessage;\n    message: Message;\n    options?: SendMessageOptions;\n  }) => {\n    channel.state.filterErrorMessages();\n\n    thread?.upsertReplyLocally({\n      message: localMessage,\n    });\n\n    updateMessage(localMessage);\n\n    await doSendMessage({ localMessage, message, options });\n  };\n\n  const retrySendMessage = async (localMessage: LocalMessage) => {\n    /**\n     * If type is not checked, and we for example send message.type === 'error',\n     * then request fails with error: \"message.type must be one of ['' regular system]\".\n     * For now, we re-send any other type to prevent breaking behavior.\n     */\n\n    const type = localMessage.type === 'error' ? 'regular' : localMessage.type;\n    updateMessage({\n      ...localMessage,\n      error: undefined,\n      status: 'sending',\n      type,\n    });\n\n    await doSendMessage({\n      localMessage,\n      message: localMessageToNewMessagePayload({ ...localMessage, type }),\n    });\n  };\n\n  const removeMessage = (message: LocalMessage) => {\n    channel.state.removeMessage(message);\n\n    dispatch({\n      channel,\n      parentId: state.thread && message.parent_id,\n      type: 'copyMessagesFromChannel',\n    });\n  };\n\n  /** THREAD */\n\n  const openThread = (message: LocalMessage, event?: React.BaseSyntheticEvent) => {\n    event?.preventDefault();\n    dispatch({ channel, message, type: 'openThread' });\n  };\n\n  const closeThread = (event?: React.BaseSyntheticEvent) => {\n    event?.preventDefault();\n    dispatch({ type: 'closeThread' });\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const loadMoreThreadFinished = useCallback(\n    debounce(\n      (\n        threadHasMore: boolean,\n        threadMessages: Array<ReturnType<ChannelState['formatMessage']>>,\n      ) => {\n        dispatch({\n          threadHasMore,\n          threadMessages,\n          type: 'loadMoreThreadFinished',\n        });\n      },\n      2000,\n      { leading: true, trailing: true },\n    ),\n    [],\n  );\n\n  const loadMoreThread = async (limit: number = DEFAULT_THREAD_PAGE_SIZE) => {\n    // FIXME: should prevent loading more, if state.thread.reply_count === channel.state.threads[parentID].length\n    if (state.threadLoadingMore || !state.thread || !state.threadHasMore) return;\n\n    dispatch({ type: 'startLoadingThread' });\n    const parentId = state.thread.id;\n\n    if (!parentId) {\n      return dispatch({ type: 'closeThread' });\n    }\n\n    const oldMessages = channel.state.threads[parentId] || [];\n    const oldestMessageId = oldMessages[0]?.id;\n\n    try {\n      const queryResponse = await channel.getReplies(parentId, {\n        id_lt: oldestMessageId,\n        limit,\n      });\n\n      const threadHasMoreMessages = hasMoreMessagesProbably(\n        queryResponse.messages.length,\n        limit,\n      );\n      const newThreadMessages = channel.state.threads[parentId] || [];\n\n      // next set loadingMore to false so we can start asking for more data\n      loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);\n    } catch (e) {\n      loadMoreThreadFinished(false, oldMessages);\n    }\n  };\n\n  const onMentionsHoverOrClick = useMentionsHandlers(onMentionsHover, onMentionsClick);\n\n  const editMessage = useEditMessageHandler(doUpdateMessageRequest);\n\n  const { typing, ...restState } = state;\n\n  const channelStateContextValue = useCreateChannelStateContext({\n    ...restState,\n    channel,\n    channelCapabilitiesArray,\n    channelConfig,\n    channelUnreadUiState,\n    giphyVersion: props.giphyVersion || 'fixed_height',\n    imageAttachmentSizeHandler:\n      props.imageAttachmentSizeHandler || getImageAttachmentConfiguration,\n    mutes,\n    notifications: [],\n    shouldGenerateVideoThumbnail: props.shouldGenerateVideoThumbnail ?? true,\n    videoAttachmentSizeHandler:\n      props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,\n    watcher_count: state.watcherCount,\n  });\n\n  const channelActionContextValue: ChannelActionContextValue = useMemo(\n    () => ({\n      closeThread,\n      deleteMessage,\n      dispatch,\n      editMessage,\n      jumpToFirstUnreadMessage,\n      jumpToLatestMessage,\n      jumpToMessage,\n      loadMore,\n      loadMoreNewer,\n      loadMoreThread,\n      markRead,\n      onMentionsClick: onMentionsHoverOrClick,\n      onMentionsHover: onMentionsHoverOrClick,\n      openThread,\n      removeMessage,\n      retrySendMessage,\n      sendMessage,\n      setChannelUnreadUiState,\n      skipMessageDataMemoization,\n      updateMessage,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      channel.cid,\n      deleteMessage,\n      loadMore,\n      loadMoreNewer,\n      markRead,\n      jumpToFirstUnreadMessage,\n      jumpToMessage,\n      jumpToLatestMessage,\n      setChannelUnreadUiState,\n    ],\n  );\n\n  const typingContextValue = useCreateTypingContext({\n    typing,\n  });\n\n  if (state.error) {\n    return (\n      <ChannelContainer>\n        <LoadingErrorIndicator error={state.error} />\n      </ChannelContainer>\n    );\n  }\n\n  if (state.loading) {\n    return (\n      <ChannelContainer>\n        <LoadingIndicator />\n      </ChannelContainer>\n    );\n  }\n\n  if (!channel.watch) {\n    return (\n      <ChannelContainer>\n        <div>{t('Channel Missing')}</div>\n      </ChannelContainer>\n    );\n  }\n\n  return (\n    <ChannelContainer className={windowsEmojiClass}>\n      <ChannelStateProvider value={channelStateContextValue}>\n        <ChannelActionProvider value={channelActionContextValue}>\n          <TypingProvider value={typingContextValue}>\n            <WithAudioPlayback allowConcurrentPlayback={allowConcurrentAudioPlayback}>\n              <div className={clsx(chatContainerClass)}>{children}</div>\n            </WithAudioPlayback>\n          </TypingProvider>\n        </ChannelActionProvider>\n      </ChannelStateProvider>\n    </ChannelContainer>\n  );\n};\n\n/**\n * A wrapper component that provides channel data and renders children.\n * The Channel component provides 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 Channel = React.memo(UnMemoizedChannel) as typeof UnMemoizedChannel;\n"],"mappings":"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"}
+{"version":3,"file":"Channel.mjs","names":[],"sources":["../../../../src/components/Channel/Channel.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport React, { useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport type { Channel as StreamChannel } from 'stream-chat';\n\nimport { ChannelInstanceProvider, useChatContext } from '../../context';\n\nimport { CHANNEL_CONTAINER_ID } from './constants';\nimport { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';\n\nimport {\n  useChannelContainerClasses,\n  useImageFlagEmojisOnWindowsClass,\n} from './hooks/useChannelContainerClasses';\nimport { WithAudioPlayback } from '../AudioPlayback';\n\nexport type ChannelProps = {\n  /**\n   * The channel to bind this subtree to. Required -- render `<ChannelPlaceholder />` (or nothing)\n   * while none is selected. Initialize it before passing it in; `Channel` does not query.\n   */\n  channel: StreamChannel;\n};\n\n/**\n * The channel's content column (`.str-chat__channel`) with no channel bound, for filling the same\n * layout slot while none is selected.\n */\nexport const ChannelPlaceholder = ({\n  children,\n  className: additionalClassName,\n  ...props\n}: PropsWithChildren<ComponentProps<'div'>>) => {\n  const { customClasses, theme } = useChatContext();\n  const { channelClass, chatClass } = useChannelContainerClasses({\n    customClasses,\n  });\n  const className = clsx(chatClass, theme, channelClass, additionalClassName);\n  return (\n    <div id={CHANNEL_CONTAINER_ID} {...props} className={className}>\n      {children}\n    </div>\n  );\n};\n\n// One component: `channel` is required and nothing is keyed, so there is no early return needing a\n// wrapper to sit in front of the hooks.\nexport const Channel = (props: PropsWithChildren<ChannelProps>) => {\n  const { channel, children } = props;\n\n  const { client } = useChatContext();\n  const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();\n\n  // Claim the channel while mounted (refcounted, so several consumers are fine). The client skips\n  // re-seeding an active channel's message list on hydration, leaving the larger loaded window to\n  // `channel.reload()`.\n  useEffect(() => {\n    channel.activate();\n    return () => {\n      channel.deactivate();\n    };\n  }, [channel]);\n\n  // Keyed on the instance, not the cid: children subscribe to *this* channel's stores.\n  const channelInstanceContextValue = useMemo(() => ({ channel }), [channel]);\n\n  useEffect(() => {\n    // Re-seed the unread boundary the separator and \"N new\" banner render from: a cached channel\n    // is not re-queried on reopen, so the LLC's auto-seed never runs and the boundary would be\n    // stale. Skipped when the channel is deliberately flagged unread, since seeding clears that\n    // flag. Marking read is `useMarkRead`'s job, not this one's.\n    if (\n      !channel.messagePaginator.unreadStateSnapshot.getLatestValue().firstUnreadMessageId\n    ) {\n      channel.messagePaginator.seedUnreadSnapshot();\n    }\n\n    // One subscription per event, each released by its own handle, so subscribing and\n    // unsubscribing cannot drift apart and nothing has to filter events it never asked for.\n    const subscriptions = [\n      // Channel state is not normalized, so rather than hunting this user's references through it\n      // we re-query. Note what that does and does not do: it refreshes members, read state and\n      // watchers, but not the loaded messages -- the page it asks for is older than the window.\n      // todo: remove with REACT-1175 (single source of truth for user references)\n      client.on('user.deleted', async () => {\n        const oldestID = channel.messagePaginator.items?.[0]?.id;\n\n        await channel.query({\n          messages: { id_lt: oldestID, limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },\n          watchers: { limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },\n        });\n      }),\n    ];\n\n    return () => {\n      subscriptions.forEach((subscription) => subscription.unsubscribe());\n    };\n  }, [channel, client]);\n\n  return (\n    <ChannelPlaceholder className={windowsEmojiClass}>\n      <ChannelInstanceProvider value={channelInstanceContextValue}>\n        <WithAudioPlayback playbackScope={channel}>{children}</WithAudioPlayback>\n      </ChannelInstanceProvider>\n    </ChannelPlaceholder>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,IAAa,sBAAsB,EACjC,UACA,WAAW,qBACX,GAAG,YAC2C;CAC9C,MAAM,EAAE,eAAe,UAAU,eAAe;CAChD,MAAM,EAAE,cAAc,cAAc,2BAA2B,EAC7D,cACF,CAAC;CACD,MAAM,YAAY,KAAK,WAAW,OAAO,cAAc,mBAAmB;CAC1E,OACE,oBAAC,OAAD;EAAK,IAAI;EAAsB,GAAI;EAAkB;EAClD;CACE,CAAA;AAET;AAIA,IAAa,WAAW,UAA2C;CACjE,MAAM,EAAE,SAAS,aAAa;CAE9B,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,oBAAoB,iCAAiC;CAK3D,gBAAgB;EACd,QAAQ,SAAS;EACjB,aAAa;GACX,QAAQ,WAAW;EACrB;CACF,GAAG,CAAC,OAAO,CAAC;CAGZ,MAAM,8BAA8B,eAAe,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;CAE1E,gBAAgB;EAKd,IACE,CAAC,QAAQ,iBAAiB,oBAAoB,eAAe,CAAC,CAAC,sBAE/D,QAAQ,iBAAiB,mBAAmB;EAK9C,MAAM,gBAAgB,CAKpB,OAAO,GAAG,gBAAgB,YAAY;GACpC,MAAM,WAAW,QAAQ,iBAAiB,QAAQ,EAAE,EAAE;GAEtD,MAAM,QAAQ,MAAM;IAClB,UAAU;KAAE,OAAO;KAAU,OAAA;IAAsC;IACnE,UAAU,EAAE,OAAA,GAAsC;GACpD,CAAC;EACH,CAAC,CACH;EAEA,aAAa;GACX,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;EACpE;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OACE,oBAAC,oBAAD;EAAoB,WAAW;YAC7B,oBAAC,yBAAD;GAAyB,OAAO;aAC9B,oBAAC,mBAAD;IAAmB,eAAe;IAAU;GAA4B,CAAA;EACjD,CAAA;CACP,CAAA;AAExB"}

package/dist/es/components/Channel/hooks/useChannelCapabilities.mjs

@@ -0,0 +1,21 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import { useMemo } from "react";
+//#region src/components/Channel/hooks/useChannelCapabilities.ts
+var ownCapabilitiesSelector = ({ ownCapabilities }) => ({ ownCapabilities });
+var useChannelCapabilities = ({ cid }) => {
+	const channel = useChannel();
+	const { ownCapabilities } = useStateStore(channel.state, ownCapabilitiesSelector) ?? {};
+	return useMemo(() => {
+		if (!cid || channel.cid !== cid) return /* @__PURE__ */ new Set();
+		return new Set(ownCapabilities ?? []);
+	}, [
+		channel.cid,
+		cid,
+		ownCapabilities
+	]);
+};
+//#endregion
+export { useChannelCapabilities };
+
+//# sourceMappingURL=useChannelCapabilities.mjs.map

package/dist/es/components/Channel/hooks/useChannelCapabilities.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelCapabilities.mjs","names":[],"sources":["../../../../../src/components/Channel/hooks/useChannelCapabilities.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { OwnCapabilitiesState } from 'stream-chat';\nimport { useChannel } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst ownCapabilitiesSelector = ({ ownCapabilities }: OwnCapabilitiesState) => ({\n  ownCapabilities,\n});\n\nexport const useChannelCapabilities = ({ cid }: { cid: string | undefined }) => {\n  const channel = useChannel();\n  const { ownCapabilities } = useStateStore(channel.state, ownCapabilitiesSelector) ?? {};\n\n  return useMemo(() => {\n    if (!cid || channel.cid !== cid) return new Set<string>();\n    return new Set(ownCapabilities ?? []);\n  }, [channel.cid, cid, ownCapabilities]);\n};\n"],"mappings":";;;;AAKA,IAAM,2BAA2B,EAAE,uBAA6C,EAC9E,gBACF;AAEA,IAAa,0BAA0B,EAAE,UAAuC;CAC9E,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,oBAAoB,cAAc,QAAQ,OAAO,uBAAuB,KAAK,CAAC;CAEtF,OAAO,cAAc;EACnB,IAAI,CAAC,OAAO,QAAQ,QAAQ,KAAK,uBAAO,IAAI,IAAY;EACxD,OAAO,IAAI,IAAI,mBAAmB,CAAC,CAAC;CACtC,GAAG;EAAC,QAAQ;EAAK;EAAK;CAAe,CAAC;AACxC"}

package/dist/es/components/Channel/hooks/useChannelContainerClasses.mjs

@@ -1,7 +1,7 @@
 import { useChatContext } from "../../../context/ChatContext.mjs";
 //#region src/components/Channel/hooks/useChannelContainerClasses.ts
 var useImageFlagEmojisOnWindowsClass = () => {
-	const { useImageFlagEmojisOnWindows } = useChatContext("Channel");
+	const { useImageFlagEmojisOnWindows } = useChatContext();
 	return useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/) ? "str-chat--windows-flags" : "";
 };
 var getChatContainerClass = (customClass) => customClass ?? "str-chat__container";

package/dist/es/components/Channel/hooks/useChannelContainerClasses.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelContainerClasses.mjs","names":[],"sources":["../../../../../src/components/Channel/hooks/useChannelContainerClasses.ts"],"sourcesContent":["import { useChatContext } from '../../../context/ChatContext';\nimport type { ChatContextValue } from '../../../context/ChatContext';\n\nexport const useImageFlagEmojisOnWindowsClass = () => {\n  const { useImageFlagEmojisOnWindows } = useChatContext('Channel');\n  return useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)\n    ? 'str-chat--windows-flags'\n    : '';\n};\n\nexport const getChatContainerClass = (customClass?: string) =>\n  customClass ?? 'str-chat__container';\n\nexport const useChannelContainerClasses = ({\n  customClasses,\n}: Pick<ChatContextValue, 'customClasses'>) => {\n  const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();\n  return {\n    channelClass: customClasses?.channel ?? 'str-chat__channel',\n    chatClass: customClasses?.chat ?? 'str-chat',\n    chatContainerClass: getChatContainerClass(customClasses?.chatContainer),\n    windowsEmojiClass,\n  };\n};\n"],"mappings":";;AAGA,IAAa,yCAAyC;CACpD,MAAM,EAAE,gCAAgC,eAAe,SAAS;CAChE,OAAO,+BAA+B,UAAU,UAAU,MAAM,KAAK,IACjE,4BACA;AACN;AAEA,IAAa,yBAAyB,gBACpC,eAAe;AAEjB,IAAa,8BAA8B,EACzC,oBAC6C;CAC7C,MAAM,oBAAoB,iCAAiC;CAC3D,OAAO;EACL,cAAc,eAAe,WAAW;EACxC,WAAW,eAAe,QAAQ;EAClC,oBAAoB,sBAAsB,eAAe,aAAa;EACtE;CACF;AACF"}
+{"version":3,"file":"useChannelContainerClasses.mjs","names":[],"sources":["../../../../../src/components/Channel/hooks/useChannelContainerClasses.ts"],"sourcesContent":["import { useChatContext } from '../../../context/ChatContext';\nimport type { ChatContextValue } from '../../../context/ChatContext';\n\nexport const useImageFlagEmojisOnWindowsClass = () => {\n  const { useImageFlagEmojisOnWindows } = useChatContext();\n  return useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)\n    ? 'str-chat--windows-flags'\n    : '';\n};\n\nexport const getChatContainerClass = (customClass?: string) =>\n  customClass ?? 'str-chat__container';\n\nexport const useChannelContainerClasses = ({\n  customClasses,\n}: Pick<ChatContextValue, 'customClasses'>) => {\n  const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();\n  return {\n    channelClass: customClasses?.channel ?? 'str-chat__channel',\n    chatClass: customClasses?.chat ?? 'str-chat',\n    chatContainerClass: getChatContainerClass(customClasses?.chatContainer),\n    windowsEmojiClass,\n  };\n};\n"],"mappings":";;AAGA,IAAa,yCAAyC;CACpD,MAAM,EAAE,gCAAgC,eAAe;CACvD,OAAO,+BAA+B,UAAU,UAAU,MAAM,KAAK,IACjE,4BACA;AACN;AAEA,IAAa,yBAAyB,gBACpC,eAAe;AAEjB,IAAa,8BAA8B,EACzC,oBAC6C;CAC7C,MAAM,oBAAoB,iCAAiC;CAC3D,OAAO;EACL,cAAc,eAAe,WAAW;EACxC,WAAW,eAAe,QAAQ;EAClC,oBAAoB,sBAAsB,eAAe,aAAa;EACtE;CACF;AACF"}

package/dist/es/components/ChannelHeader/ChannelHeader.mjs

@@ -1,21 +1,24 @@
-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 { useTypingContext } from "../../context/TypingContext.mjs";
 import { ChannelAvatar } from "../Avatar/ChannelAvatar.mjs";
-import { useChannelPreviewInfo } from "../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton } from "../Button/WorkspaceNavigationButtons.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
 import { TypingIndicatorHeader } from "../TypingIndicator/TypingIndicatorHeader.mjs";
+import { useChannelPreviewInfo } from "../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
 import { useChannelHeaderOnlineStatus } from "./hooks/useChannelHeaderOnlineStatus.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChannelHeader/ChannelHeader.tsx
+var typingEventsStateSelector = ({ typingEvents }) => ({ typingEventsEnabled: typingEvents.enabled });
+var textComposerTypingSelector = ({ typing }) => ({ typing });
 var ChannelHeaderSubtitle = () => {
-	const { channelConfig } = useChannelStateContext("ChannelHeaderSubtitle");
-	const { client } = useChatContext("ChannelHeaderSubtitle");
-	const { typing = {} } = useTypingContext("ChannelHeaderSubtitle");
+	const { typingEventsEnabled } = useStateStore(useChannel().configState, typingEventsStateSelector);
+	const { client } = useChatContext();
+	const { typing = {} } = useStateStore(useMessageComposerController().textComposer?.state, textComposerTypingSelector) ?? {};
 	const onlineStatusText = useChannelHeaderOnlineStatus();
 	const typingInChannel = Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id);
-	const hasTyping = channelConfig?.typing_events !== false && typingInChannel.length > 0;
+	const hasTyping = typingEventsEnabled !== false && typingInChannel.length > 0;
 	if (!hasTyping && !onlineStatusText) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__channel-header__data__subtitle",
@@ -29,11 +32,9 @@ var ChannelHeaderSubtitle = () => {
 * The ChannelHeader component renders some basic information about a Channel.
 */
 var ChannelHeader = (props) => {
-	const { Avatar = ChannelAvatar, image: overrideImage, title: overrideTitle } = props;
-	const { channel } = useChannelStateContext();
-	const { HeaderStartContent } = useComponentContext();
+	const { Avatar = ChannelAvatar, EndContent = WorkspaceNavigationCloseButton, image: overrideImage, StartContent = WorkspaceNavigationBackButton, title: overrideTitle } = props;
 	const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
-		channel,
+		channel: useChannel(),
 		overrideImage,
 		overrideTitle
 	});
@@ -42,7 +43,7 @@ var ChannelHeader = (props) => {
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "str-chat__channel-header__start",
-				children: HeaderStartContent && /* @__PURE__ */ jsx(HeaderStartContent, {})
+				children: /* @__PURE__ */ jsx(StartContent, {})
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "str-chat__channel-header__data",
@@ -51,15 +52,15 @@ var ChannelHeader = (props) => {
 					children: displayTitle
 				}), /* @__PURE__ */ jsx(ChannelHeaderSubtitle, {})]
 			}),
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "str-chat__channel-header__end",
-				children: /* @__PURE__ */ jsx(Avatar, {
+				children: [/* @__PURE__ */ jsx(Avatar, {
 					className: "str-chat__avatar--channel-header",
 					displayMembers: groupChannelDisplayInfo?.members,
 					imageUrl: displayImage,
 					size: "lg",
 					userName: displayTitle
-				})
+				}), /* @__PURE__ */ jsx(EndContent, {})]
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"ChannelHeader.mjs","names":[],"sources":["../../../../src/components/ChannelHeader/ChannelHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type ChannelAvatarProps, ChannelAvatar as DefaultAvatar } from '../Avatar';\nimport { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';\nimport { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';\nimport { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useTypingContext } from '../../context/TypingContext';\n\nconst ChannelHeaderSubtitle = () => {\n  const { channelConfig } = useChannelStateContext('ChannelHeaderSubtitle');\n  const { client } = useChatContext('ChannelHeaderSubtitle');\n  const { typing = {} } = useTypingContext('ChannelHeaderSubtitle');\n  const onlineStatusText = useChannelHeaderOnlineStatus();\n  const typingInChannel = Object.values(typing).filter(\n    ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n  );\n  const hasTyping = channelConfig?.typing_events !== false && typingInChannel.length > 0;\n\n  if (!hasTyping && !onlineStatusText) return null;\n\n  return (\n    <div className='str-chat__channel-header__data__subtitle'>\n      <span\n        className='str-chat__subtitle-content-transition'\n        key={hasTyping ? 'typing' : 'default'}\n      >\n        {hasTyping ? <TypingIndicatorHeader /> : onlineStatusText}\n      </span>\n    </div>\n  );\n};\n\nexport type ChannelHeaderProps = {\n  /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */\n  Avatar?: React.ComponentType<ChannelAvatarProps>;\n  /** Manually set the image to render, defaults to the Channel image */\n  image?: string;\n  /** Set title manually */\n  title?: string;\n};\n\n/**\n * The ChannelHeader component renders some basic information about a Channel.\n */\nexport const ChannelHeader = (props: ChannelHeaderProps) => {\n  const { Avatar = DefaultAvatar, image: overrideImage, title: overrideTitle } = props;\n\n  const { channel } = useChannelStateContext();\n  const { HeaderStartContent } = useComponentContext();\n  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({\n    channel,\n    overrideImage,\n    overrideTitle,\n  });\n\n  return (\n    <div className='str-chat__channel-header'>\n      <div className='str-chat__channel-header__start'>\n        {HeaderStartContent && <HeaderStartContent />}\n      </div>\n      <div className='str-chat__channel-header__data'>\n        <div className='str-chat__channel-header__data__title'>{displayTitle}</div>\n        <ChannelHeaderSubtitle />\n      </div>\n      <div className='str-chat__channel-header__end'>\n        <Avatar\n          className='str-chat__avatar--channel-header'\n          displayMembers={groupChannelDisplayInfo?.members}\n          imageUrl={displayImage}\n          size='lg'\n          userName={displayTitle}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,8BAA8B;CAClC,MAAM,EAAE,kBAAkB,uBAAuB,uBAAuB;CACxE,MAAM,EAAE,WAAW,eAAe,uBAAuB;CACzD,MAAM,EAAE,SAAS,CAAC,MAAM,iBAAiB,uBAAuB;CAChE,MAAM,mBAAmB,6BAA6B;CACtD,MAAM,kBAAkB,OAAO,OAAO,MAAM,CAAC,CAAC,QAC3C,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D;CACA,MAAM,YAAY,eAAe,kBAAkB,SAAS,gBAAgB,SAAS;CAErF,IAAI,CAAC,aAAa,CAAC,kBAAkB,OAAO;CAE5C,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD;GACE,WAAU;aAGT,YAAY,oBAAC,uBAAD,CAAwB,CAAA,IAAI;EACrC,GAHC,YAAY,WAAW,SAGxB;CACH,CAAA;AAET;;;;AAcA,IAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,SAAS,eAAe,OAAO,eAAe,OAAO,kBAAkB;CAE/E,MAAM,EAAE,YAAY,uBAAuB;CAC3C,MAAM,EAAE,uBAAuB,oBAAoB;CACnD,MAAM,EAAE,cAAc,cAAc,4BAA4B,sBAAsB;EACpF;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACZ,sBAAsB,oBAAC,oBAAD,CAAqB,CAAA;GACzC,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAAyC;IAAkB,CAAA,GAC1E,oBAAC,uBAAD,CAAwB,CAAA,CACrB;;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD;KACE,WAAU;KACV,gBAAgB,yBAAyB;KACzC,UAAU;KACV,MAAK;KACL,UAAU;IACX,CAAA;GACE,CAAA;EACF;;AAET"}
+{"version":3,"file":"ChannelHeader.mjs","names":[],"sources":["../../../../src/components/ChannelHeader/ChannelHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type ChannelAvatarProps, ChannelAvatar as DefaultAvatar } from '../Avatar';\nimport { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';\nimport { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';\nimport { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';\nimport { useChannel, useChatContext } from '../../context';\nimport { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton } from '../Button';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../store';\n\nimport type { ChannelConfig, EventPayload, TextComposerState } from 'stream-chat';\n\nconst typingEventsStateSelector = ({ typingEvents }: ChannelConfig) => ({\n  typingEventsEnabled: typingEvents.enabled,\n});\n\nconst textComposerTypingSelector = ({ typing }: TextComposerState) => ({ typing });\n\nconst ChannelHeaderSubtitle = () => {\n  const channel = useChannel();\n  const { typingEventsEnabled } = useStateStore(\n    channel.configState,\n    typingEventsStateSelector,\n  );\n  const { client } = useChatContext();\n  const messageComposer = useMessageComposerController();\n  const { typing = {} } =\n    useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};\n  const onlineStatusText = useChannelHeaderOnlineStatus();\n  const typingInChannel = (\n    Object.values(typing) as EventPayload<'typing.start' | 'typing.stop'>[]\n  ).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id);\n  const hasTyping = typingEventsEnabled !== false && typingInChannel.length > 0;\n\n  if (!hasTyping && !onlineStatusText) return null;\n\n  return (\n    <div className='str-chat__channel-header__data__subtitle'>\n      <span\n        className='str-chat__subtitle-content-transition'\n        key={hasTyping ? 'typing' : 'default'}\n      >\n        {hasTyping ? <TypingIndicatorHeader /> : onlineStatusText}\n      </span>\n    </div>\n  );\n};\n\nexport type ChannelHeaderProps = {\n  /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */\n  Avatar?: React.ComponentType<ChannelAvatarProps>;\n  /**\n   * Rendered at the end of the header, after the avatar. Defaults to\n   * `WorkspaceNavigationCloseButton`, the close button of a panel that can be dismissed; a component\n   * passed here replaces it, and can render the button itself to keep it.\n   */\n  EndContent?: React.ComponentType;\n  /**\n   * Rendered at the start of the header. Defaults to `WorkspaceNavigationBackButton`, the back\n   * button of a panel stacked over other content; a component passed here replaces it, and can\n   * render the button itself to keep it.\n   */\n  StartContent?: React.ComponentType;\n  /** Manually set the image to render, defaults to the Channel image */\n  image?: string;\n  /** Set title manually */\n  title?: string;\n};\n\n/**\n * The ChannelHeader component renders some basic information about a Channel.\n */\nexport const ChannelHeader = (props: ChannelHeaderProps) => {\n  const {\n    Avatar = DefaultAvatar,\n    EndContent = WorkspaceNavigationCloseButton,\n    image: overrideImage,\n    StartContent = WorkspaceNavigationBackButton,\n    title: overrideTitle,\n  } = props;\n\n  const channel = useChannel();\n  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({\n    channel,\n    overrideImage,\n    overrideTitle,\n  });\n\n  return (\n    <div className='str-chat__channel-header'>\n      <div className='str-chat__channel-header__start'>\n        <StartContent />\n      </div>\n      <div className='str-chat__channel-header__data'>\n        <div className='str-chat__channel-header__data__title'>{displayTitle}</div>\n        <ChannelHeaderSubtitle />\n      </div>\n      <div className='str-chat__channel-header__end'>\n        <Avatar\n          className='str-chat__avatar--channel-header'\n          displayMembers={groupChannelDisplayInfo?.members}\n          imageUrl={displayImage}\n          size='lg'\n          userName={displayTitle}\n        />\n        <EndContent />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,6BAA6B,EAAE,oBAAmC,EACtE,qBAAqB,aAAa,QACpC;AAEA,IAAM,8BAA8B,EAAE,cAAiC,EAAE,OAAO;AAEhF,IAAM,8BAA8B;CAElC,MAAM,EAAE,wBAAwB,cADhB,WAEd,CAAA,CAAQ,aACR,yBACF;CACA,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,EAAE,SAAS,CAAC,MAChB,cAFsB,6BAER,CAAA,CAAgB,cAAc,OAAO,0BAA0B,KAAK,CAAC;CACrF,MAAM,mBAAmB,6BAA6B;CACtD,MAAM,kBACJ,OAAO,OAAO,MAAM,CAAC,CACrB,QAAQ,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAAS;CAC5E,MAAM,YAAY,wBAAwB,SAAS,gBAAgB,SAAS;CAE5E,IAAI,CAAC,aAAa,CAAC,kBAAkB,OAAO;CAE5C,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD;GACE,WAAU;aAGT,YAAY,oBAAC,uBAAD,CAAwB,CAAA,IAAI;EACrC,GAHC,YAAY,WAAW,SAGxB;CACH,CAAA;AAET;;;;AA0BA,IAAa,iBAAiB,UAA8B;CAC1D,MAAM,EACJ,SAAS,eACT,aAAa,gCACb,OAAO,eACP,eAAe,+BACf,OAAO,kBACL;CAGJ,MAAM,EAAE,cAAc,cAAc,4BAA4B,sBAAsB;EACpF,SAFc,WAEd;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,cAAD,CAAe,CAAA;GACZ,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAAyC;IAAkB,CAAA,GAC1E,oBAAC,uBAAD,CAAwB,CAAA,CACrB;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAU;KACV,gBAAgB,yBAAyB;KACzC,UAAU;KACV,MAAK;KACL,UAAU;IACX,CAAA,GACD,oBAAC,YAAD,CAAa,CAAA,CACV;;EACF;;AAET"}

package/dist/es/components/ChannelHeader/hooks/useChannelHasMembersOnline.mjs

@@ -1,49 +1,24 @@
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../../context/ChatContext.mjs";
-import { useEffect, useState } from "react";
+import { useChannel } from "../../../context/useChannel.mjs";
 //#region src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts
-var getOtherWatchers = (watchers, ownUserId) => {
-	const next = Object.assign({}, watchers ?? {});
-	if (ownUserId) delete next[ownUserId];
-	return next;
-};
+var watchersSelector = (nextValue) => ({ watchers: nextValue.watchers });
+/**
+* Reactively reports whether OTHER members are currently online (watching the channel).
+*
+* Subscribes to the channel's watcher state instead of manually tracking
+* `user.watching.start/stop` events. Watchers include the current user, but "are other
+* members online" must reflect only other users — otherwise (e.g. in a DM) the other
+* participant looks online as soon as the local user starts watching.
+*/
 var useChannelHasMembersOnline = ({ channel: channelOverride, enabled = true } = {}) => {
-	const { channel: contextChannel } = useChannelStateContext();
-	const { client } = useChatContext();
+	const contextChannel = useChannel();
 	const channel = channelOverride ?? contextChannel;
-	const ownUserId = client.user?.id;
-	const [watchers, setWatchers] = useState(() => getOtherWatchers(channel?.state?.watchers, ownUserId));
-	useEffect(() => {
-		setWatchers(getOtherWatchers(channel?.state?.watchers, ownUserId));
-	}, [channel, ownUserId]);
-	useEffect(() => {
-		if (!enabled || !channel) return;
-		const startSubscription = channel.on("user.watching.start", (event) => {
-			setWatchers((prev) => {
-				if (!event.user?.id || event.user.id === ownUserId) return prev;
-				if (prev[event.user.id]) return prev;
-				return Object.assign({ [event.user.id]: event.user }, prev);
-			});
-		});
-		const stopSubscription = channel.on("user.watching.stop", (event) => {
-			setWatchers((prev) => {
-				if (!event.user?.id || !prev[event.user.id]) return prev;
-				const next = Object.assign({}, prev);
-				delete next[event.user.id];
-				return next;
-			});
-		});
-		return () => {
-			startSubscription.unsubscribe();
-			stopSubscription.unsubscribe();
-		};
-	}, [
-		channel,
-		enabled,
-		ownUserId
-	]);
+	const { client } = useChatContext();
+	const { watchers } = useStateStore(channel.state, watchersSelector);
 	if (!enabled) return false;
-	return Object.keys(watchers).length > 0;
+	const ownUserId = client.user?.id;
+	return Object.keys(watchers).some((id) => id !== ownUserId);
 };
 //#endregion
 export { useChannelHasMembersOnline };

package/dist/es/components/ChannelHeader/hooks/useChannelHasMembersOnline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelHasMembersOnline.mjs","names":[],"sources":["../../../../../src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel, ChannelState } from 'stream-chat';\n\nimport { useChannelStateContext } from '../../../context/ChannelStateContext';\nimport { useChatContext } from '../../../context/ChatContext';\n\nexport type UseChannelHasMembersOnlineParams = {\n  channel?: Channel;\n  enabled?: boolean;\n};\n\n// Watchers include the current user, but \"are other members online\" must reflect\n// only other users — otherwise (e.g. in a DM) the other participant looks online\n// as soon as the local user starts watching.\nconst getOtherWatchers = (\n  watchers: ChannelState['watchers'] | undefined,\n  ownUserId?: string,\n) => {\n  const next = Object.assign({}, watchers ?? {});\n  if (ownUserId) delete next[ownUserId];\n  return next;\n};\n\nexport const useChannelHasMembersOnline = ({\n  channel: channelOverride,\n  enabled = true,\n}: UseChannelHasMembersOnlineParams = {}) => {\n  const { channel: contextChannel } = useChannelStateContext();\n  const { client } = useChatContext();\n  const channel = channelOverride ?? contextChannel;\n  const ownUserId = client.user?.id;\n  const [watchers, setWatchers] = useState<ChannelState['watchers']>(() =>\n    getOtherWatchers(channel?.state?.watchers, ownUserId),\n  );\n\n  useEffect(() => {\n    setWatchers(getOtherWatchers(channel?.state?.watchers, ownUserId));\n  }, [channel, ownUserId]);\n\n  useEffect(() => {\n    if (!enabled || !channel) return;\n\n    const startSubscription = channel.on('user.watching.start', (event) => {\n      setWatchers((prev) => {\n        if (!event.user?.id || event.user.id === ownUserId) return prev;\n        if (prev[event.user.id]) return prev;\n        return Object.assign({ [event.user.id]: event.user }, prev);\n      });\n    });\n    const stopSubscription = channel.on('user.watching.stop', (event) => {\n      setWatchers((prev) => {\n        if (!event.user?.id || !prev[event.user.id]) return prev;\n\n        const next = Object.assign({}, prev);\n        delete next[event.user.id];\n        return next;\n      });\n    });\n\n    return () => {\n      startSubscription.unsubscribe();\n      stopSubscription.unsubscribe();\n    };\n  }, [channel, enabled, ownUserId]);\n\n  if (!enabled) return false;\n\n  return Object.keys(watchers).length > 0;\n};\n"],"mappings":";;;;AAcA,IAAM,oBACJ,UACA,cACG;CACH,MAAM,OAAO,OAAO,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC;CAC7C,IAAI,WAAW,OAAO,KAAK;CAC3B,OAAO;AACT;AAEA,IAAa,8BAA8B,EACzC,SAAS,iBACT,UAAU,SAC0B,CAAC,MAAM;CAC3C,MAAM,EAAE,SAAS,mBAAmB,uBAAuB;CAC3D,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,UAAU,mBAAmB;CACnC,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,CAAC,UAAU,eAAe,eAC9B,iBAAiB,SAAS,OAAO,UAAU,SAAS,CACtD;CAEA,gBAAgB;EACd,YAAY,iBAAiB,SAAS,OAAO,UAAU,SAAS,CAAC;CACnE,GAAG,CAAC,SAAS,SAAS,CAAC;CAEvB,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,SAAS;EAE1B,MAAM,oBAAoB,QAAQ,GAAG,wBAAwB,UAAU;GACrE,aAAa,SAAS;IACpB,IAAI,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK,OAAO,WAAW,OAAO;IAC3D,IAAI,KAAK,MAAM,KAAK,KAAK,OAAO;IAChC,OAAO,OAAO,OAAO,GAAG,MAAM,KAAK,KAAK,MAAM,KAAK,GAAG,IAAI;GAC5D,CAAC;EACH,CAAC;EACD,MAAM,mBAAmB,QAAQ,GAAG,uBAAuB,UAAU;GACnE,aAAa,SAAS;IACpB,IAAI,CAAC,MAAM,MAAM,MAAM,CAAC,KAAK,MAAM,KAAK,KAAK,OAAO;IAEpD,MAAM,OAAO,OAAO,OAAO,CAAC,GAAG,IAAI;IACnC,OAAO,KAAK,MAAM,KAAK;IACvB,OAAO;GACT,CAAC;EACH,CAAC;EAED,aAAa;GACX,kBAAkB,YAAY;GAC9B,iBAAiB,YAAY;EAC/B;CACF,GAAG;EAAC;EAAS;EAAS;CAAS,CAAC;CAEhC,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,SAAS;AACxC"}
+{"version":3,"file":"useChannelHasMembersOnline.mjs","names":[],"sources":["../../../../../src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts"],"sourcesContent":["import type { Channel, ChannelWatchState } from 'stream-chat';\n\nimport { useChannel } from '../../../context';\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useStateStore } from '../../../store';\n\nexport type UseChannelHasMembersOnlineParams = {\n  channel?: Channel;\n  enabled?: boolean;\n};\n\nconst watchersSelector = (nextValue: ChannelWatchState) => ({\n  watchers: nextValue.watchers,\n});\n\n/**\n * Reactively reports whether OTHER members are currently online (watching the channel).\n *\n * Subscribes to the channel's watcher state instead of manually tracking\n * `user.watching.start/stop` events. Watchers include the current user, but \"are other\n * members online\" must reflect only other users — otherwise (e.g. in a DM) the other\n * participant looks online as soon as the local user starts watching.\n */\nexport const useChannelHasMembersOnline = ({\n  channel: channelOverride,\n  enabled = true,\n}: UseChannelHasMembersOnlineParams = {}) => {\n  const contextChannel = useChannel();\n  const channel = channelOverride ?? contextChannel;\n  const { client } = useChatContext();\n  const { watchers } = useStateStore(channel.state, watchersSelector);\n\n  if (!enabled) return false;\n\n  const ownUserId = client.user?.id;\n  return Object.keys(watchers).some((id) => id !== ownUserId);\n};\n"],"mappings":";;;;AAWA,IAAM,oBAAoB,eAAkC,EAC1D,UAAU,UAAU,SACtB;;;;;;;;;AAUA,IAAa,8BAA8B,EACzC,SAAS,iBACT,UAAU,SAC0B,CAAC,MAAM;CAC3C,MAAM,iBAAiB,WAAW;CAClC,MAAM,UAAU,mBAAmB;CACnC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,aAAa,cAAc,QAAQ,OAAO,gBAAgB;CAElE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,YAAY,OAAO,MAAM;CAC/B,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,MAAM,OAAO,OAAO,SAAS;AAC5D"}

package/dist/es/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.mjs

@@ -1,31 +1,29 @@
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
-import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { isDmChannel } from "../../../utils/isDmChannel.mjs";
+import { useIsDmChannel } from "../../../hooks/useIsDmChannel.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
 import { useChannelHasMembersOnline } from "./useChannelHasMembersOnline.mjs";
 //#region src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts
+var memberCountSelector = (nextValue) => ({ memberCount: nextValue.memberCount });
+var watcherCountSelector = (nextValue) => ({ watcherCount: nextValue.watcherCount });
 /**
-* Returns the channel header online status text (e.g. "Online", "Offline", or "X members, Y online").
-* Returns null when the channel has no members (nothing to show).
+* Returns the channel header online status text (e.g. "Online", "Offline", or
+* "X members · Y online"). Returns null when the channel has no members (nothing to show).
+*
+* Reactive counts come from the channel's unified reactive state; DM detection and
+* "others online" are delegated to `useIsDmChannel` / `useChannelHasMembersOnline`, which
+* subscribe to the state they each need.
 */
-function useChannelHeaderOnlineStatus({ channel: channelOverride, watcherCount: watcherCountOverride } = {}) {
+function useChannelHeaderOnlineStatus() {
 	const { t } = useTranslationContext();
-	const { client } = useChatContext();
-	const { channel: contextChannel, watcherCount: contextWatcherCount = 0 } = useChannelStateContext();
-	const channel = channelOverride ?? contextChannel;
-	const watcherCount = watcherCountOverride ?? contextWatcherCount;
-	const { member_count: memberCount = 0 } = channel?.data || {};
-	const isDirectMessagingChannel = isDmChannel({
-		channel,
-		ownUserId: client.user?.id
-	});
-	const hasMembersOnline = useChannelHasMembersOnline({
-		channel,
-		enabled: isDirectMessagingChannel
-	});
+	const channel = useChannel();
+	const { memberCount } = useStateStore(channel.state, memberCountSelector);
+	const { watcherCount } = useStateStore(channel.state, watcherCountSelector);
+	const isDirectMessagingChannel = useIsDmChannel();
+	const hasMembersOnline = useChannelHasMembersOnline({ enabled: isDirectMessagingChannel });
 	if (!memberCount) return null;
-	if (isDirectMessagingChannel) return hasMembersOnline ? t("Online") : t("Offline");
-	return `${t("{{ memberCount }} members", { memberCount })} · ${t("{{ watcherCount }} online", { watcherCount })}`;
+	if (isDirectMessagingChannel) return hasMembersOnline ? t("common.online.label", "Online") : t("common.offline.label", "Offline");
+	return `${t("channelHeader.online.members.label", "{{ memberCount }} members", { memberCount })} · ${t("channelHeader.online.online.label", "{{ watcherCount }} online", { watcherCount })}`;
 }
 //#endregion
 export { useChannelHeaderOnlineStatus };

package/dist/es/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelHeaderOnlineStatus.mjs","names":[],"sources":["../../../../../src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts"],"sourcesContent":["import { useChannelStateContext } from '../../../context/ChannelStateContext';\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useTranslationContext } from '../../../context/TranslationContext';\nimport { isDmChannel } from '../../../utils';\nimport { useChannelHasMembersOnline } from './useChannelHasMembersOnline';\nimport type { Channel } from 'stream-chat';\n\nexport type UseChannelHeaderOnlineStatusParams = {\n  channel?: Channel;\n  watcherCount?: number;\n};\n\n/**\n * Returns the channel header online status text (e.g. \"Online\", \"Offline\", or \"X members, Y online\").\n * Returns null when the channel has no members (nothing to show).\n */\nexport function useChannelHeaderOnlineStatus({\n  channel: channelOverride,\n  watcherCount: watcherCountOverride,\n}: UseChannelHeaderOnlineStatusParams = {}): string | null {\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { channel: contextChannel, watcherCount: contextWatcherCount = 0 } =\n    useChannelStateContext();\n  const channel = channelOverride ?? contextChannel;\n  const watcherCount = watcherCountOverride ?? contextWatcherCount;\n  const { member_count: memberCount = 0 } = channel?.data || {};\n  const isDirectMessagingChannel = isDmChannel({\n    channel,\n    ownUserId: client.user?.id,\n  });\n  const hasMembersOnline = useChannelHasMembersOnline({\n    channel,\n    enabled: isDirectMessagingChannel,\n  });\n\n  if (!memberCount) return null;\n\n  if (isDirectMessagingChannel) {\n    return hasMembersOnline ? t('Online') : t('Offline');\n  }\n\n  return `${t('{{ memberCount }} members', { memberCount })} · ${t('{{ watcherCount }} online', { watcherCount })}`;\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,6BAA6B,EAC3C,SAAS,iBACT,cAAc,yBACwB,CAAC,GAAkB;CACzD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,SAAS,gBAAgB,cAAc,sBAAsB,MACnE,uBAAuB;CACzB,MAAM,UAAU,mBAAmB;CACnC,MAAM,eAAe,wBAAwB;CAC7C,MAAM,EAAE,cAAc,cAAc,MAAM,SAAS,QAAQ,CAAC;CAC5D,MAAM,2BAA2B,YAAY;EAC3C;EACA,WAAW,OAAO,MAAM;CAC1B,CAAC;CACD,MAAM,mBAAmB,2BAA2B;EAClD;EACA,SAAS;CACX,CAAC;CAED,IAAI,CAAC,aAAa,OAAO;CAEzB,IAAI,0BACF,OAAO,mBAAmB,EAAE,QAAQ,IAAI,EAAE,SAAS;CAGrD,OAAO,GAAG,EAAE,6BAA6B,EAAE,YAAY,CAAC,EAAE,KAAK,EAAE,6BAA6B,EAAE,aAAa,CAAC;AAChH"}
+{"version":3,"file":"useChannelHeaderOnlineStatus.mjs","names":[],"sources":["../../../../../src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts"],"sourcesContent":["import type { ChannelWatchState, MembersState } from 'stream-chat';\n\nimport { useChannel, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { useIsDmChannel } from '../../../hooks';\nimport { useChannelHasMembersOnline } from './useChannelHasMembersOnline';\n\nconst memberCountSelector = (nextValue: MembersState) => ({\n  memberCount: nextValue.memberCount,\n});\n\nconst watcherCountSelector = (nextValue: ChannelWatchState) => ({\n  watcherCount: nextValue.watcherCount,\n});\n\n/**\n * Returns the channel header online status text (e.g. \"Online\", \"Offline\", or\n * \"X members · Y online\"). Returns null when the channel has no members (nothing to show).\n *\n * Reactive counts come from the channel's unified reactive state; DM detection and\n * \"others online\" are delegated to `useIsDmChannel` / `useChannelHasMembersOnline`, which\n * subscribe to the state they each need.\n */\nexport function useChannelHeaderOnlineStatus(): string | null {\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { memberCount } = useStateStore(channel.state, memberCountSelector);\n  const { watcherCount } = useStateStore(channel.state, watcherCountSelector);\n  const isDirectMessagingChannel = useIsDmChannel();\n  const hasMembersOnline = useChannelHasMembersOnline({\n    enabled: isDirectMessagingChannel,\n  });\n\n  if (!memberCount) return null;\n\n  if (isDirectMessagingChannel) {\n    return hasMembersOnline\n      ? t('common.online.label', 'Online')\n      : t('common.offline.label', 'Offline');\n  }\n\n  return `${t('channelHeader.online.members.label', '{{ memberCount }} members', { memberCount })} · ${t('channelHeader.online.online.label', '{{ watcherCount }} online', { watcherCount })}`;\n}\n"],"mappings":";;;;;;AAOA,IAAM,uBAAuB,eAA6B,EACxD,aAAa,UAAU,YACzB;AAEA,IAAM,wBAAwB,eAAkC,EAC9D,cAAc,UAAU,aAC1B;;;;;;;;;AAUA,SAAgB,+BAA8C;CAC5D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,gBAAgB,cAAc,QAAQ,OAAO,mBAAmB;CACxE,MAAM,EAAE,iBAAiB,cAAc,QAAQ,OAAO,oBAAoB;CAC1E,MAAM,2BAA2B,eAAe;CAChD,MAAM,mBAAmB,2BAA2B,EAClD,SAAS,yBACX,CAAC;CAED,IAAI,CAAC,aAAa,OAAO;CAEzB,IAAI,0BACF,OAAO,mBACH,EAAE,uBAAuB,QAAQ,IACjC,EAAE,wBAAwB,SAAS;CAGzC,OAAO,GAAG,EAAE,sCAAsC,6BAA6B,EAAE,YAAY,CAAC,EAAE,KAAK,EAAE,qCAAqC,6BAA6B,EAAE,aAAa,CAAC;AAC3L"}