stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/ChannelList/hooks/usePaginatedChannels.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginatedChannels.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/usePaginatedChannels.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport uniqBy from 'lodash.uniqby';\n\nimport type {\n  APIErrorResponse,\n  Channel,\n  ChannelFilters,\n  ChannelOptions,\n  ChannelSort,\n  ErrorFromResponse,\n  ParsedPredefinedFilterResponse,\n  StreamChat,\n} from 'stream-chat';\n\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useTranslationContext } from '../../../context/TranslationContext';\nimport { useNotificationApi } from '../../Notifications';\n\nimport type { ChannelsQueryState } from '../../Chat/hooks/useChannelsQueryState';\n\nconst RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;\nconst MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;\n\ntype AllowedQueryType = Extract<\n  ChannelsQueryState['queryInProgress'],\n  'reload' | 'load-more'\n>;\n\nexport type CustomQueryChannelParams = {\n  currentChannels: Array<Channel>;\n  queryType: AllowedQueryType;\n  setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>;\n  setHasNextPage: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport type CustomQueryChannelsFn = (params: CustomQueryChannelParams) => Promise<void>;\n\n/**\n * Filters and sort effectively used by the channel list. When `options.predefined_filter`\n * is set, these reflect the backend-resolved values from `predefined_filter` response\n * metadata; otherwise they fall back to the caller-supplied `filters`/`sort`.\n */\nexport type EffectiveQueryParams = {\n  filters: ChannelFilters;\n  sort: ChannelSort;\n};\n\n/**\n * The `predefined_filter` response carries sort as\n * `[{ field, direction }]`. `ChannelSort` expects `[{ field: direction }]`.\n */\nconst mapPredefinedFilterSortToChannelSort = (\n  sort: NonNullable<ParsedPredefinedFilterResponse['sort']>,\n): ChannelSort =>\n  sort.map(({ direction = 1, field }) => ({\n    [field]: direction,\n  })) as ChannelSort;\n\nexport const usePaginatedChannels = (\n  client: StreamChat,\n  filters: ChannelFilters,\n  sort: ChannelSort,\n  options: ChannelOptions,\n  activeChannelHandler: (\n    channels: Array<Channel>,\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    effectiveQueryParams: EffectiveQueryParams,\n  ) => void,\n  recoveryThrottleIntervalMs: number = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS,\n  customQueryChannels?: CustomQueryChannelsFn,\n) => {\n  const { addNotification } = useNotificationApi();\n  const {\n    channelsQueryState: { error, setError, setQueryInProgress },\n  } = useChatContext('usePaginatedChannels');\n  const { t } = useTranslationContext();\n  const [channels, setChannels] = useState<Array<Channel>>([]);\n  const [hasNextPage, setHasNextPage] = useState(true);\n  // Backend-resolved filter/sort from `predefined_filter` response metadata.\n  // Used to override the caller `filters`/`sort` for local WS-driven list\n  // mutation decisions (archiving, pinning) when a predefined filter is in\n  // use. Stays `undefined` for non-predefined queries.\n  const [responseFilters, setResponseFilters] = useState<ChannelFilters | undefined>(\n    undefined,\n  );\n  const [responseSort, setResponseSort] = useState<ChannelSort | undefined>(undefined);\n  const lastRecoveryTimestamp = useRef<number | undefined>(undefined);\n\n  const recoveryThrottleInterval =\n    recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS\n      ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS\n      : (recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS);\n  // memoize props\n  const filterString = useMemo(() => JSON.stringify(filters), [filters]);\n  const sortString = useMemo(() => JSON.stringify(sort), [sort]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const queryChannels = async (queryType = 'load-more') => {\n    setError(null);\n    const offset = queryType === 'reload' ? 0 : channels.length;\n    const isFirstPage = offset === 0;\n\n    if (queryType === 'reload') {\n      setChannels([]);\n    }\n    setQueryInProgress(queryType as AllowedQueryType);\n\n    try {\n      if (customQueryChannels) {\n        await customQueryChannels({\n          currentChannels: channels,\n          queryType: queryType as AllowedQueryType,\n          setChannels,\n          setHasNextPage,\n        });\n        // `customQueryChannels` bypasses the SDK response so any previously\n        // resolved predefined-filter metadata is no longer trustworthy.\n        setResponseFilters(undefined);\n        setResponseSort(undefined);\n      } else {\n        const newOptions = {\n          offset,\n          ...options,\n        };\n\n        const channelQueryResponse = await client.queryChannels(\n          filters,\n          sort || {},\n          newOptions,\n          { withResponse: true },\n        );\n\n        const newChannels =\n          queryType === 'reload'\n            ? channelQueryResponse.channels\n            : uniqBy([...channels, ...channelQueryResponse.channels], 'cid');\n\n        setChannels(newChannels);\n        setHasNextPage(channelQueryResponse.channels.length >= (newOptions.limit ?? 1));\n\n        // Pull backend-resolved filter/sort from `predefined_filter` metadata so\n        // WS-driven list mutations use the effective semantics. Always reset\n        // first; non-predefined queries do not return this metadata and keeping\n        // stale values would silently change list behavior.\n        const predefinedFilter = channelQueryResponse.predefined_filter;\n        const nextResponseFilters = predefinedFilter\n          ? (predefinedFilter.filter as ChannelFilters)\n          : undefined;\n        const nextResponseSort = predefinedFilter?.sort\n          ? mapPredefinedFilterSortToChannelSort(predefinedFilter.sort)\n          : undefined;\n\n        setResponseFilters(nextResponseFilters);\n        setResponseSort(nextResponseSort);\n\n        // Set active channel only on load of first page\n        if (!offset && activeChannelHandler) {\n          activeChannelHandler(newChannels, setChannels, {\n            filters: nextResponseFilters ?? filters,\n            sort: nextResponseSort ?? sort,\n          });\n        }\n      }\n    } catch (error) {\n      console.warn(error);\n      addNotification({\n        emitter: 'ChannelList',\n        error: error instanceof Error ? error : undefined,\n        message: isFirstPage\n          ? t('Failed to load channels')\n          : t('Failed to load more channels'),\n        severity: 'error',\n        targetPanels: ['channel-list'],\n        type: isFirstPage\n          ? 'api:channel-list:load:failed'\n          : 'api:channel-list:load-more:failed',\n      });\n\n      if (isFirstPage) {\n        setError(error as ErrorFromResponse<APIErrorResponse>);\n      }\n    }\n\n    setQueryInProgress(null);\n  };\n\n  const throttleRecover = useCallback(() => {\n    const now = Date.now();\n    const isFirstRecovery = !lastRecoveryTimestamp.current;\n    const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current\n      ? now - lastRecoveryTimestamp.current\n      : 0;\n\n    if (\n      !isFirstRecovery &&\n      timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval &&\n      !error\n    ) {\n      return;\n    }\n\n    lastRecoveryTimestamp.current = now;\n    queryChannels('reload');\n  }, [error, queryChannels, recoveryThrottleInterval]);\n\n  const loadNextPage = () => queryChannels();\n\n  useEffect(() => {\n    if (client.recoverStateOnReconnect) return;\n    const { unsubscribe } = client.on('connection.recovered', throttleRecover);\n\n    return () => {\n      unsubscribe();\n    };\n  }, [client, throttleRecover]);\n\n  useEffect(() => {\n    queryChannels('reload');\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filterString, sortString]);\n\n  // Effective filters/sort: response-derived values take precedence over\n  // caller-supplied props when a predefined filter is in use. Falls back to\n  // the caller props for non-predefined queries and during the initial load\n  // before the first response.\n  const effectiveFilters = responseFilters ?? filters;\n  const effectiveSort = responseSort ?? sort;\n\n  return {\n    channels,\n    effectiveFilters,\n    effectiveSort,\n    hasNextPage,\n    loadNextPage,\n    setChannels,\n  };\n};\n"],"mappings":"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"}

package/dist/es/components/ChannelList/hooks/useSelectedChannelState.mjs

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+//#region src/components/ChannelList/hooks/useSelectedChannelState.ts
+var noop = () => {};
+function useSelectedChannelState({ channel, selector, stateChangeEventKeys = ["all"] }) {
+	return useSyncExternalStore(useCallback((onStoreChange) => {
+		if (!channel) return noop;
+		const subscriptions = stateChangeEventKeys.map((et) => channel.on(et, () => {
+			onStoreChange(selector(channel));
+		}));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [
+		channel,
+		selector,
+		stateChangeEventKeys
+	]), useCallback(() => {
+		if (!channel) return void 0;
+		return selector(channel);
+	}, [channel, selector]));
+}
+//#endregion
+export { useSelectedChannelState };
+
+//# sourceMappingURL=useSelectedChannelState.mjs.map

package/dist/es/components/ChannelList/hooks/useSelectedChannelState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedChannelState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useSelectedChannelState.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\nimport type { Channel, EventTypes } from 'stream-chat';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport function useSelectedChannelState<O>(_: {\n  channel: Channel;\n  selector: (channel: Channel) => O;\n  stateChangeEventKeys?: EventTypes[];\n}): O;\nexport function useSelectedChannelState<O>(_: {\n  selector: (channel: Channel) => O;\n  channel?: Channel | undefined;\n  stateChangeEventKeys?: EventTypes[];\n}): O | undefined;\nexport function useSelectedChannelState<O>({\n  channel,\n  selector,\n  stateChangeEventKeys = ['all'],\n}: {\n  selector: (channel: Channel) => O;\n  channel?: Channel;\n  stateChangeEventKeys?: EventTypes[];\n}): O | undefined {\n  const subscribe = useCallback(\n    (onStoreChange: (value: O) => void) => {\n      if (!channel) return noop;\n\n      const subscriptions = stateChangeEventKeys.map((et) =>\n        channel.on(et, () => {\n          onStoreChange(selector(channel));\n        }),\n      );\n\n      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n    },\n    [channel, selector, stateChangeEventKeys],\n  );\n\n  const getSnapshot = useCallback(() => {\n    if (!channel) return undefined;\n\n    return selector(channel);\n  }, [channel, selector]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"mappings":";;;AAKA,IAAM,aAAa,CAAC;AAYpB,SAAgB,wBAA2B,EACzC,SACA,UACA,uBAAuB,CAAC,KAAK,KAKb;CAsBhB,OAAO,qBArBW,aACf,kBAAsC;EACrC,IAAI,CAAC,SAAS,OAAO;EAErB,MAAM,gBAAgB,qBAAqB,KAAK,OAC9C,QAAQ,GAAG,UAAU;GACnB,cAAc,SAAS,OAAO,CAAC;EACjC,CAAC,CACH;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GACA;EAAC;EAAS;EAAU;CAAoB,CASd,GANR,kBAAkB;EACpC,IAAI,CAAC,SAAS,OAAO,KAAA;EAErB,OAAO,SAAS,OAAO;CACzB,GAAG,CAAC,SAAS,QAAQ,CAEkB,CAAW;AACpD"}

package/dist/es/components/ChannelList/utils.mjs

@@ -0,0 +1,86 @@
+//#region src/components/ChannelList/utils.ts
+/**
+* Expects channel array sorted by `{ pinned_at: -1 }`.
+*
+* TODO: add support for the `{ pinned_at: 1 }`
+*/
+function findLastPinnedChannelIndex({ channels }) {
+	let lastPinnedChannelIndex = null;
+	for (const channel of channels) {
+		if (!isChannelPinned(channel)) break;
+		if (typeof lastPinnedChannelIndex === "number") lastPinnedChannelIndex++;
+		else lastPinnedChannelIndex = 0;
+	}
+	return lastPinnedChannelIndex;
+}
+var moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndexWithinChannels, sort }) => {
+	const targetChannelIndex = channelToMoveIndexWithinChannels ?? channels.findIndex((channel) => channel.cid === channelToMove.cid);
+	const targetChannelExistsWithinList = targetChannelIndex >= 0;
+	const targetChannelAlreadyAtTheTop = targetChannelIndex === 0;
+	const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+	const isTargetChannelPinned = isChannelPinned(channelToMove);
+	if (targetChannelAlreadyAtTheTop || considerPinnedChannels && isTargetChannelPinned) return channels;
+	const newChannels = [...channels];
+	if (targetChannelExistsWithinList) newChannels.splice(targetChannelIndex, 1);
+	let lastPinnedChannelIndex = null;
+	if (considerPinnedChannels) lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
+	newChannels.splice(typeof lastPinnedChannelIndex === "number" ? lastPinnedChannelIndex + 1 : 0, 0, channelToMove);
+	return newChannels;
+};
+/**
+* Returns `true` only if object with `pinned_at` property is first within the `sort` array
+* or if `pinned_at` key of the `sort` object gets picked first when using `for...in` looping mechanism
+* and value of the `pinned_at` is either `1` or `-1`.
+*/
+var shouldConsiderPinnedChannels = (sort) => {
+	const value = extractSortValue({
+		atIndex: 0,
+		sort,
+		targetKey: "pinned_at"
+	});
+	if (typeof value !== "number") return false;
+	return Math.abs(value) === 1;
+};
+var extractSortValue = ({ atIndex, sort, targetKey }) => {
+	if (!sort) return null;
+	let option = null;
+	if (Array.isArray(sort)) option = sort[atIndex] ?? null;
+	else {
+		let index = 0;
+		for (const key in sort) {
+			if (index !== atIndex) {
+				index++;
+				continue;
+			}
+			if (key !== targetKey) return null;
+			option = sort;
+			break;
+		}
+	}
+	return option?.[targetKey] ?? null;
+};
+/**
+* Returns `true` only if `archived` property is of type `boolean` within `filters` object.
+*/
+var shouldConsiderArchivedChannels = (filters) => {
+	if (!filters) return false;
+	return typeof filters.archived === "boolean";
+};
+/**
+* Returns `true` only if `pinned_at` property is of type `string` within `membership` object.
+*/
+var isChannelPinned = (channel) => {
+	if (!channel) return false;
+	return typeof channel.state.membership.pinned_at === "string";
+};
+/**
+* Returns `true` only if `archived_at` property is of type `string` within `membership` object.
+*/
+var isChannelArchived = (channel) => {
+	if (!channel) return false;
+	return typeof channel.state.membership.archived_at === "string";
+};
+//#endregion
+export { extractSortValue, findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels };
+
+//# sourceMappingURL=utils.mjs.map

package/dist/es/components/ChannelList/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/ChannelList/utils.ts"],"sourcesContent":["import type { Channel, ChannelSort, ChannelSortBase } from 'stream-chat';\n\nimport type { ChannelListProps } from './ChannelList';\n\n/**\n * Expects channel array sorted by `{ pinned_at: -1 }`.\n *\n * TODO: add support for the `{ pinned_at: 1 }`\n */\nexport function findLastPinnedChannelIndex({ channels }: { channels: Channel[] }) {\n  let lastPinnedChannelIndex: number | null = null;\n\n  for (const channel of channels) {\n    if (!isChannelPinned(channel)) break;\n\n    if (typeof lastPinnedChannelIndex === 'number') {\n      lastPinnedChannelIndex++;\n    } else {\n      lastPinnedChannelIndex = 0;\n    }\n  }\n\n  return lastPinnedChannelIndex;\n}\n\ntype MoveChannelUpwardsParams = {\n  channels: Array<Channel>;\n  channelToMove: Channel;\n  sort: ChannelSort;\n  /**\n   * If the index of the channel within `channels` list which is being moved upwards\n   * (`channelToMove`) is known, you can supply it to skip extra calculation.\n   */\n  channelToMoveIndexWithinChannels?: number;\n};\n\nexport const moveChannelUpwards = ({\n  channels,\n  channelToMove,\n  channelToMoveIndexWithinChannels,\n  sort,\n}: MoveChannelUpwardsParams) => {\n  // get index of channel to move up\n  const targetChannelIndex =\n    channelToMoveIndexWithinChannels ??\n    channels.findIndex((channel) => channel.cid === channelToMove.cid);\n\n  const targetChannelExistsWithinList = targetChannelIndex >= 0;\n  const targetChannelAlreadyAtTheTop = targetChannelIndex === 0;\n\n  // pinned channels should not move within the list based on recent activity, channels which\n  // receive messages and are not pinned should move upwards but only under the last pinned channel\n  // in the list\n  const considerPinnedChannels = shouldConsiderPinnedChannels(sort);\n  const isTargetChannelPinned = isChannelPinned(channelToMove);\n\n  if (targetChannelAlreadyAtTheTop || (considerPinnedChannels && isTargetChannelPinned)) {\n    return channels;\n  }\n\n  const newChannels = [...channels];\n\n  // target channel index is known, remove it from the list\n  if (targetChannelExistsWithinList) {\n    newChannels.splice(targetChannelIndex, 1);\n  }\n\n  // as position of pinned channels has to stay unchanged, we need to\n  // find last pinned channel in the list to move the target channel after\n  let lastPinnedChannelIndex: number | null = null;\n  if (considerPinnedChannels) {\n    lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });\n  }\n\n  // re-insert it at the new place (to specific index if pinned channels are considered)\n  newChannels.splice(\n    typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0,\n    0,\n    channelToMove,\n  );\n\n  return newChannels;\n};\n\n/**\n * Returns `true` only if object with `pinned_at` property is first within the `sort` array\n * or if `pinned_at` key of the `sort` object gets picked first when using `for...in` looping mechanism\n * and value of the `pinned_at` is either `1` or `-1`.\n */\nexport const shouldConsiderPinnedChannels = (sort: ChannelListProps['sort']) => {\n  const value = extractSortValue({ atIndex: 0, sort, targetKey: 'pinned_at' });\n\n  if (typeof value !== 'number') return false;\n\n  return Math.abs(value) === 1;\n};\n\nexport const extractSortValue = ({\n  atIndex,\n  sort,\n  targetKey,\n}: {\n  atIndex: number;\n  targetKey: keyof ChannelSortBase;\n  sort?: ChannelListProps['sort'];\n}) => {\n  if (!sort) return null;\n  let option: null | ChannelSortBase = null;\n\n  if (Array.isArray(sort)) {\n    option = sort[atIndex] ?? null;\n  } else {\n    let index = 0;\n    for (const key in sort) {\n      if (index !== atIndex) {\n        index++;\n        continue;\n      }\n\n      if (key !== targetKey) {\n        return null;\n      }\n\n      option = sort;\n\n      break;\n    }\n  }\n\n  return option?.[targetKey] ?? null;\n};\n\n/**\n * Returns `true` only if `archived` property is of type `boolean` within `filters` object.\n */\nexport const shouldConsiderArchivedChannels = (filters: ChannelListProps['filters']) => {\n  if (!filters) return false;\n\n  return typeof filters.archived === 'boolean';\n};\n\n/**\n * Returns `true` only if `pinned_at` property is of type `string` within `membership` object.\n */\nexport const isChannelPinned = (channel: Channel) => {\n  if (!channel) return false;\n\n  const membership = channel.state.membership;\n\n  return typeof membership.pinned_at === 'string';\n};\n\n/**\n * Returns `true` only if `archived_at` property is of type `string` within `membership` object.\n */\nexport const isChannelArchived = (channel: Channel) => {\n  if (!channel) return false;\n\n  const membership = channel.state.membership;\n\n  return typeof membership.archived_at === 'string';\n};\n"],"mappings":";;;;;;AASA,SAAgB,2BAA2B,EAAE,YAAqC;CAChF,IAAI,yBAAwC;CAE5C,KAAK,MAAM,WAAW,UAAU;EAC9B,IAAI,CAAC,gBAAgB,OAAO,GAAG;EAE/B,IAAI,OAAO,2BAA2B,UACpC;OAEA,yBAAyB;CAE7B;CAEA,OAAO;AACT;AAaA,IAAa,sBAAsB,EACjC,UACA,eACA,kCACA,WAC8B;CAE9B,MAAM,qBACJ,oCACA,SAAS,WAAW,YAAY,QAAQ,QAAQ,cAAc,GAAG;CAEnE,MAAM,gCAAgC,sBAAsB;CAC5D,MAAM,+BAA+B,uBAAuB;CAK5D,MAAM,yBAAyB,6BAA6B,IAAI;CAChE,MAAM,wBAAwB,gBAAgB,aAAa;CAE3D,IAAI,gCAAiC,0BAA0B,uBAC7D,OAAO;CAGT,MAAM,cAAc,CAAC,GAAG,QAAQ;CAGhC,IAAI,+BACF,YAAY,OAAO,oBAAoB,CAAC;CAK1C,IAAI,yBAAwC;CAC5C,IAAI,wBACF,yBAAyB,2BAA2B,EAAE,UAAU,YAAY,CAAC;CAI/E,YAAY,OACV,OAAO,2BAA2B,WAAW,yBAAyB,IAAI,GAC1E,GACA,aACF;CAEA,OAAO;AACT;;;;;;AAOA,IAAa,gCAAgC,SAAmC;CAC9E,MAAM,QAAQ,iBAAiB;EAAE,SAAS;EAAG;EAAM,WAAW;CAAY,CAAC;CAE3E,IAAI,OAAO,UAAU,UAAU,OAAO;CAEtC,OAAO,KAAK,IAAI,KAAK,MAAM;AAC7B;AAEA,IAAa,oBAAoB,EAC/B,SACA,MACA,gBAKI;CACJ,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,SAAiC;CAErC,IAAI,MAAM,QAAQ,IAAI,GACpB,SAAS,KAAK,YAAY;MACrB;EACL,IAAI,QAAQ;EACZ,KAAK,MAAM,OAAO,MAAM;GACtB,IAAI,UAAU,SAAS;IACrB;IACA;GACF;GAEA,IAAI,QAAQ,WACV,OAAO;GAGT,SAAS;GAET;EACF;CACF;CAEA,OAAO,SAAS,cAAc;AAChC;;;;AAKA,IAAa,kCAAkC,YAAyC;CACtF,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,OAAO,QAAQ,aAAa;AACrC;;;;AAKA,IAAa,mBAAmB,YAAqB;CACnD,IAAI,CAAC,SAAS,OAAO;CAIrB,OAAO,OAFY,QAAQ,MAAM,WAER,cAAc;AACzC;;;;AAKA,IAAa,qBAAqB,YAAqB;CACrD,IAAI,CAAC,SAAS,OAAO;CAIrB,OAAO,OAFY,QAAQ,MAAM,WAER,gBAAgB;AAC3C"}

package/dist/es/components/ChannelListItem/ChannelListItem.mjs

@@ -0,0 +1,116 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { getLatestMessagePreview } from "./utils.mjs";
+import { useChannelPreviewInfo } from "./hooks/useChannelPreviewInfo.mjs";
+import { useChannelMembershipState } from "../ChannelList/hooks/useChannelMembershipState.mjs";
+import { useIsChannelMuted } from "./hooks/useIsChannelMuted.mjs";
+import { useMessageDeliveryStatus } from "./hooks/useMessageDeliveryStatus.mjs";
+import { ChannelListItemUI } from "./ChannelListItemUI.mjs";
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import throttle from "lodash.throttle";
+//#region src/components/ChannelListItem/ChannelListItem.tsx
+var ChannelListItemContext = React.createContext({ channel: null });
+var useChannelListItemContext = () => useContext(ChannelListItemContext);
+var ChannelListItem = (props) => {
+	const { active, channel, channelUpdateCount, getLatestMessagePreview: getLatestMessagePreview$1 = getLatestMessagePreview } = props;
+	const { ChannelListItemUI: ChannelListItemUI$1 = ChannelListItemUI } = useComponentContext();
+	const { channel: activeChannel, client, isMessageAIGenerated, setActiveChannel } = useChatContext("ChannelPreview");
+	const { t, userLanguage } = useTranslationContext("ChannelPreview");
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({ channel });
+	const membership = useChannelMembershipState(channel);
+	const [lastMessage, setLastMessage] = useState(channel.state.messages[channel.state.messages.length - 1]);
+	const [latestMessagePreview, setLatestMessagePreview] = useState(() => getLatestMessagePreview$1(channel, t, userLanguage, isMessageAIGenerated));
+	const [unread, setUnread] = useState(0);
+	const { messageDeliveryStatus } = useMessageDeliveryStatus({
+		channel,
+		lastMessage
+	});
+	const isActive = typeof active === "undefined" ? activeChannel?.cid === channel.cid : active;
+	const { muted } = useIsChannelMuted(channel);
+	useEffect(() => {
+		const handleChannelReadStateChange = (event) => {
+			if (channel.cid !== event.cid) return;
+			if (event.user?.id !== client.user?.id) return;
+			setUnread(channel.countUnread());
+		};
+		const handleMarkRead = (event) => {
+			if (event.thread_id) return;
+			if (event.user && client.user && event.user.id !== client.user.id) return;
+			if (!event.cid) return setUnread(0);
+			if (channel.cid !== event.cid) return;
+			setUnread(0);
+		};
+		client.on("notification.mark_read", handleMarkRead);
+		channel.on("notification.mark_unread", handleChannelReadStateChange);
+		channel.on("message.read_locally", handleChannelReadStateChange);
+		channel.on("message.read", handleChannelReadStateChange);
+		return () => {
+			client.off("notification.mark_read", handleMarkRead);
+			channel.off("notification.mark_unread", handleChannelReadStateChange);
+			channel.off("message.read_locally", handleChannelReadStateChange);
+			channel.off("message.read", handleChannelReadStateChange);
+		};
+	}, [channel, client]);
+	const refreshUnreadCount = useMemo(() => throttle(() => {
+		if (muted) setUnread(0);
+		else setUnread(channel.countUnread());
+	}, 400), [channel, muted]);
+	useEffect(() => {
+		refreshUnreadCount();
+		setLatestMessagePreview(getLatestMessagePreview$1(channel, t, userLanguage, isMessageAIGenerated));
+		const handleEvent = (event) => {
+			if (event.type === "user.messages.deleted" && event.cid && event.cid !== channel.cid) return;
+			setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
+			setLatestMessagePreview(getLatestMessagePreview$1(channel, t, userLanguage, isMessageAIGenerated));
+			refreshUnreadCount();
+		};
+		channel.on("message.new", handleEvent);
+		channel.on("message.updated", handleEvent);
+		channel.on("message.deleted", handleEvent);
+		client.on("user.messages.deleted", handleEvent);
+		channel.on("message.undeleted", handleEvent);
+		channel.on("channel.truncated", handleEvent);
+		return () => {
+			channel.off("message.new", handleEvent);
+			channel.off("message.updated", handleEvent);
+			channel.off("message.deleted", handleEvent);
+			client.off("user.messages.deleted", handleEvent);
+			channel.off("message.undeleted", handleEvent);
+			channel.off("channel.truncated", handleEvent);
+		};
+	}, [
+		channel,
+		client,
+		refreshUnreadCount,
+		channelUpdateCount,
+		getLatestMessagePreview$1,
+		t,
+		userLanguage,
+		isMessageAIGenerated
+	]);
+	const channelPreviewContextValue = useMemo(() => ({ channel }), [channel]);
+	if (!ChannelListItemUI$1) return null;
+	return /* @__PURE__ */ jsx(ChannelListItemContext.Provider, {
+		value: channelPreviewContextValue,
+		children: /* @__PURE__ */ jsx(ChannelListItemUI$1, {
+			...props,
+			active: isActive,
+			displayImage,
+			displayTitle,
+			groupChannelDisplayInfo,
+			lastMessage,
+			latestMessagePreview,
+			messageDeliveryStatus,
+			muted,
+			pinned: !!membership.pinned_at,
+			setActiveChannel,
+			unread
+		})
+	});
+};
+//#endregion
+export { ChannelListItem, useChannelListItemContext };
+
+//# sourceMappingURL=ChannelListItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItem.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItem.tsx"],"sourcesContent":["import throttle from 'lodash.throttle';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { Channel, Event, LocalMessage } from 'stream-chat';\n\nimport { ChannelListItemUI as DefaultChannelListItemUI } from './ChannelListItemUI';\nimport { useIsChannelMuted } from './hooks/useIsChannelMuted';\nimport { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';\nimport { getLatestMessagePreview as defaultGetLatestMessagePreview } from './utils';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';\nimport type { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';\nimport type { GroupChannelDisplayInfo } from './utils';\nimport type { ChannelListItemLabelConfig } from './utils.a11y';\nimport {\n  type ChatContextValue,\n  type TranslationContextValue,\n  useChatContext,\n  useComponentContext,\n} from '../../context';\nimport { useChannelMembershipState } from '../ChannelList';\n\nexport type ChannelListItemUIProps = ChannelListItemProps & {\n  /**\n   * Configures the row's composed accessible name (part overrides, order, separator, or a full\n   * `build`). Supply it from a `ComponentContext`-provided `ChannelListItemUI` to customize the\n   * announcement. See `composeChannelListItemAccessibleLabel`.\n   */\n  accessibleLabelConfig?: ChannelListItemLabelConfig;\n  /** Image of Channel to display */\n  displayImage?: string;\n  /** Title of Channel to display */\n  displayTitle?: string;\n  /** Title of Channel to display */\n  groupChannelDisplayInfo?: GroupChannelDisplayInfo;\n  /** The last message received in a channel */\n  lastMessage?: LocalMessage;\n  /** Latest message preview to display, will be a string or JSX element supporting markdown. */\n  latestMessagePreview?: ReactNode;\n  /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n  /** Whether the channel is muted by the current user */\n  muted?: boolean;\n  /** Whether the channel is pinned by the current user */\n  pinned?: boolean;\n  /** Number of unread Messages */\n  unread?: number;\n};\n\nexport type ChannelListItemProps = {\n  /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */\n  channel: Channel;\n  /** If the component's channel is the active (selected) Channel */\n  active?: boolean;\n  /** Current selected channel object */\n  activeChannel?: Channel;\n  /** Forces the update of preview component on channel update */\n  channelUpdateCount?: number;\n  /** Custom class for the channel preview root */\n  className?: string;\n  /** Custom function that generates the message preview in ChannelListItem component */\n  getLatestMessagePreview?: (\n    channel: Channel,\n    t: TranslationContextValue['t'],\n    userLanguage: TranslationContextValue['userLanguage'],\n    isMessageAIGenerated: ChatContextValue['isMessageAIGenerated'],\n  ) => ReactNode;\n  key?: string;\n  /** Custom ChannelListItem click handler function */\n  onSelect?: (event: React.MouseEvent) => void;\n  /** Setter for selected Channel */\n  setActiveChannel?: ChatContextValue['setActiveChannel'];\n  /** Object containing watcher parameters */\n  watchers?: { limit?: number; offset?: number };\n};\n\nconst ChannelListItemContext = React.createContext<{ channel: Channel }>({\n  channel: null as unknown as Channel,\n});\n\nexport const useChannelListItemContext = () => useContext(ChannelListItemContext);\n\nexport const ChannelListItem = (props: ChannelListItemProps) => {\n  const {\n    active,\n    channel,\n    channelUpdateCount,\n    getLatestMessagePreview = defaultGetLatestMessagePreview,\n  } = props;\n  const { ChannelListItemUI = DefaultChannelListItemUI } = useComponentContext();\n  const {\n    channel: activeChannel,\n    client,\n    isMessageAIGenerated,\n    setActiveChannel,\n  } = useChatContext('ChannelPreview');\n  const { t, userLanguage } = useTranslationContext('ChannelPreview');\n  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({\n    channel,\n  });\n  const membership = useChannelMembershipState(channel);\n\n  const [lastMessage, setLastMessage] = useState<LocalMessage>(\n    channel.state.messages[channel.state.messages.length - 1],\n  );\n  const [latestMessagePreview, setLatestMessagePreview] = useState<ReactNode>(() =>\n    getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated),\n  );\n\n  const [unread, setUnread] = useState(0);\n  const { messageDeliveryStatus } = useMessageDeliveryStatus({\n    channel,\n    lastMessage,\n  });\n\n  const isActive =\n    typeof active === 'undefined' ? activeChannel?.cid === channel.cid : active;\n  const { muted } = useIsChannelMuted(channel);\n\n  useEffect(() => {\n    // Channel-scoped read-state events. These are delivered after\n    // `Channel._handleChannelEvent` has already updated `channel.state.unreadCount`,\n    // so recomputing from `countUnread()` here always sees fresh state.\n    const handleChannelReadStateChange = (event: Event) => {\n      if (channel.cid !== event.cid) return;\n      if (event.user?.id !== client.user?.id) return;\n      setUnread(channel.countUnread());\n    };\n\n    // `notification.mark_read` is a personal event and needs separate handling:\n    // `cid` and `user` are both optional on it, and — unlike `message.read` — it has no\n    // case in `Channel._handleChannelEvent`, so `channel.state.unreadCount` may still be\n    // stale when it arrives. Zero the badge directly instead of recomputing, which keeps\n    // the result independent of the `message.read` / `notification.mark_read` arrival order.\n    const handleMarkRead = (event: Event) => {\n      // a thread was marked read, which does not clear the channel's unread count\n      if (event.thread_id) return;\n      if (event.user && client.user && event.user.id !== client.user.id) return;\n      // a missing `cid` means every channel was marked read\n      if (!event.cid) return setUnread(0);\n      if (channel.cid !== event.cid) return;\n      setUnread(0);\n    };\n\n    client.on('notification.mark_read', handleMarkRead);\n    channel.on('notification.mark_unread', handleChannelReadStateChange);\n    channel.on('message.read_locally', handleChannelReadStateChange);\n    channel.on('message.read', handleChannelReadStateChange);\n    return () => {\n      client.off('notification.mark_read', handleMarkRead);\n      channel.off('notification.mark_unread', handleChannelReadStateChange);\n      channel.off('message.read_locally', handleChannelReadStateChange);\n      channel.off('message.read', handleChannelReadStateChange);\n    };\n  }, [channel, client]);\n\n  const refreshUnreadCount = useMemo(\n    () =>\n      throttle(() => {\n        if (muted) {\n          setUnread(0);\n        } else {\n          setUnread(channel.countUnread());\n        }\n      }, 400),\n    [channel, muted],\n  );\n\n  useEffect(() => {\n    refreshUnreadCount();\n    setLatestMessagePreview(\n      getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated),\n    );\n\n    const handleEvent = (event: Event) => {\n      const deletedMessagesInAnotherChannel =\n        event.type === 'user.messages.deleted' && event.cid && event.cid !== channel.cid;\n\n      if (deletedMessagesInAnotherChannel) return;\n\n      setLastMessage(\n        channel.state.latestMessages[channel.state.latestMessages.length - 1],\n      );\n      setLatestMessagePreview(\n        getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated),\n      );\n      refreshUnreadCount();\n    };\n\n    channel.on('message.new', handleEvent);\n    channel.on('message.updated', handleEvent);\n    channel.on('message.deleted', handleEvent);\n    client.on('user.messages.deleted', handleEvent);\n    channel.on('message.undeleted', handleEvent);\n    channel.on('channel.truncated', handleEvent);\n\n    return () => {\n      channel.off('message.new', handleEvent);\n      channel.off('message.updated', handleEvent);\n      channel.off('message.deleted', handleEvent);\n      client.off('user.messages.deleted', handleEvent);\n      channel.off('message.undeleted', handleEvent);\n      channel.off('channel.truncated', handleEvent);\n    };\n  }, [\n    channel,\n    client,\n    refreshUnreadCount,\n    channelUpdateCount,\n    getLatestMessagePreview,\n    t,\n    userLanguage,\n    isMessageAIGenerated,\n  ]);\n\n  const channelPreviewContextValue = useMemo(() => ({ channel }), [channel]);\n\n  if (!ChannelListItemUI) return null;\n\n  return (\n    <ChannelListItemContext.Provider value={channelPreviewContextValue}>\n      <ChannelListItemUI\n        {...props}\n        active={isActive}\n        displayImage={displayImage}\n        displayTitle={displayTitle}\n        groupChannelDisplayInfo={groupChannelDisplayInfo}\n        lastMessage={lastMessage}\n        latestMessagePreview={latestMessagePreview}\n        messageDeliveryStatus={messageDeliveryStatus}\n        muted={muted}\n        pinned={!!membership.pinned_at}\n        setActiveChannel={setActiveChannel}\n        unread={unread}\n      />\n    </ChannelListItemContext.Provider>\n  );\n};\n"],"mappings":"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"}