stream-chat-react 14.11.1 → 14.12.0

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

@@ -0,0 +1,156 @@
+import { ErrorFromResponse, isLocalImageAttachment, isPendingUpload } from "stream-chat";
+//#region src/components/Channel/utils.ts
+/** Writes the resolved URL onto the attachment and releases its local preview. */
+var applyUploadResult = (attachment, response) => {
+	const enriched = { ...attachment };
+	if (isLocalImageAttachment(enriched)) enriched.image_url = response.file;
+	else enriched.asset_url = response.file;
+	if (response.thumb_url) enriched.thumb_url = response.thumb_url;
+	const { previewUri } = attachment.localMetadata;
+	if (previewUri?.startsWith("blob:")) URL.revokeObjectURL?.(previewUri);
+	const { localMetadata, ...rest } = enriched;
+	return rest;
+};
+/**
+* Utility function for jumpToFirstUnreadMessage
+* @param targetId
+* @param msgSet
+*/
+var findInMsgSetById = (targetId, msgSet) => {
+	for (let i = msgSet.length - 1; i >= 0; i--) {
+		const item = msgSet[i];
+		if (item.id === targetId) return {
+			index: i,
+			target: item
+		};
+	}
+	return { index: -1 };
+};
+/**
+* Utility function for jumpToFirstUnreadMessage
+* @param targetDate
+* @param msgSet
+* @param exact
+*/
+var findInMsgSetByDate = (targetDate, msgSet, exact = false) => {
+	const targetTimestamp = targetDate.getTime();
+	let left = 0;
+	let middle = 0;
+	let right = msgSet.length - 1;
+	while (left <= right) {
+		middle = Math.floor((right + left) / 2);
+		const middleTimestamp = new Date(msgSet[middle].created_at).getTime();
+		const middleLeftTimestamp = msgSet[middle - 1]?.created_at && new Date(msgSet[middle - 1].created_at).getTime();
+		const middleRightTimestamp = msgSet[middle + 1]?.created_at && new Date(msgSet[middle + 1].created_at).getTime();
+		if (middleTimestamp === targetTimestamp || middleLeftTimestamp && middleRightTimestamp && middleLeftTimestamp < targetTimestamp && targetTimestamp < middleRightTimestamp) return {
+			index: middle,
+			target: msgSet[middle]
+		};
+		if (middleTimestamp < targetTimestamp) left = middle + 1;
+		else right = middle - 1;
+	}
+	if (!exact || new Date(msgSet[left].created_at).getTime() === targetTimestamp) return {
+		index: left,
+		target: msgSet[left]
+	};
+	return { index: -1 };
+};
+/**
+* Compatibility adapter:
+* LocalMessage.error expects ErrorFromResponse<APIErrorResponse>, but some transport failures
+* (for example Axios ERR_NETWORK while offline) do not have an HTTP response payload.
+*/
+var adaptMessageSendErrorToErrorFromResponse = (error) => {
+	if (error instanceof ErrorFromResponse) return error;
+	let message = error instanceof Error ? error.message : "Message send failed";
+	let status = 0;
+	let code = null;
+	if (typeof error === "object" && error !== null) {
+		const maybeAxiosError = error;
+		if (maybeAxiosError.name === "AxiosError" && maybeAxiosError.code === "ERR_NETWORK") {
+			message = typeof maybeAxiosError.message === "string" ? maybeAxiosError.message : "Network Error";
+			status = maybeAxiosError.response?.status ?? 0;
+			return new ErrorFromResponse(message, {
+				code: null,
+				response: maybeAxiosError.response ?? {
+					data: {
+						duration: "",
+						message,
+						more_info: "",
+						StatusCode: status
+					},
+					status
+				},
+				status
+			});
+		}
+		try {
+			const stringError = JSON.stringify(error);
+			const parsedError = stringError ? JSON.parse(stringError) : {};
+			if (typeof parsedError.message === "string") message = parsedError.message;
+			if (typeof parsedError.status === "number") status = parsedError.status;
+			if (typeof parsedError.code === "number") code = parsedError.code;
+		} catch {}
+	}
+	return new ErrorFromResponse(message, {
+		code,
+		response: {
+			data: {
+				duration: "",
+				message,
+				more_info: "",
+				StatusCode: status
+			},
+			status
+		},
+		status
+	});
+};
+/**
+* Settles the uploads of any attachment that is still in flight, and reports the outcome.
+*
+* A message only ever reaches the send path with a pending attachment when
+* `createSendWithPendingUploadsAttachmentsMiddleware` is installed — the default composition
+* middleware discards such a composition instead. `UploadManager.upload()` is idempotent by
+* `localMetadata.id`, so this awaits the request the composer already started rather than
+* starting a second one; an attachment whose upload never started (a retry, an offline replay)
+* is uploaded here for the first time.
+*
+* Resolved attachments come back carrying their URL and **without** `localMetadata`, and their
+* local preview is revoked. Failed ones are returned untouched, `localMetadata` and all, so a
+* retry re-uploads only what is still missing.
+*/
+var settlePendingAttachmentUploads = async ({ attachments, channelCid, client }) => {
+	const pendingIndexes = attachments.reduce((indexes, attachment, index) => {
+		if (isPendingUpload(attachment)) indexes.push(index);
+		return indexes;
+	}, []);
+	if (!pendingIndexes.length) return { attachments };
+	const settled = await Promise.allSettled(pendingIndexes.map((index) => {
+		const { file, id } = attachments[index].localMetadata;
+		return client.uploadManager.upload({
+			channelCid,
+			file,
+			id
+		});
+	}));
+	const nextAttachments = [...attachments];
+	let failureReason;
+	settled.forEach((result, position) => {
+		const index = pendingIndexes[position];
+		const attachment = nextAttachments[index];
+		if (result.status === "fulfilled" && result.value) {
+			nextAttachments[index] = applyUploadResult(attachment, result.value);
+			return;
+		}
+		if (!failureReason) failureReason = result.status === "rejected" ? result.reason : /* @__PURE__ */ new Error("Attachment upload returned no result");
+	});
+	return {
+		attachments: nextAttachments,
+		failureReason
+	};
+};
+//#endregion
+export { adaptMessageSendErrorToErrorFromResponse, findInMsgSetByDate, findInMsgSetById, settlePendingAttachmentUploads };
+
+//# sourceMappingURL=utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/Channel/utils.ts"],"sourcesContent":["import {\n  type APIErrorResponse,\n  type ChannelState,\n  ErrorFromResponse,\n  isLocalImageAttachment,\n  isPendingUpload,\n  type LocalMessage,\n  type LocalNotImageAttachment,\n  type LocalUploadAttachment,\n  type MessageResponse,\n  type MinimumUploadRequestResult,\n  type StreamChat,\n} from 'stream-chat';\n\n/** Writes the resolved URL onto the attachment and releases its local preview. */\nconst applyUploadResult = (\n  attachment: LocalUploadAttachment,\n  response: MinimumUploadRequestResult,\n) => {\n  const enriched: LocalUploadAttachment = { ...attachment };\n\n  // Narrow on the copy, not the original, so the assignment type-checks.\n  if (isLocalImageAttachment(enriched)) {\n    enriched.image_url = response.file;\n  } else {\n    (enriched as LocalNotImageAttachment).asset_url = response.file;\n  }\n  if (response.thumb_url) {\n    (enriched as LocalNotImageAttachment).thumb_url = response.thumb_url;\n  }\n\n  // The message has owned this preview since the composition was handed over — see\n  // `createPostUploadAttachmentEnrichmentMiddleware`, which stops revoking once the composer\n  // no longer holds the attachment.\n  const { previewUri } = attachment.localMetadata;\n  if (previewUri?.startsWith('blob:')) URL.revokeObjectURL?.(previewUri);\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- omit-by-destructure\n  const { localMetadata, ...rest } = enriched;\n  return rest;\n};\n\n/**\n * Utility function for jumpToFirstUnreadMessage\n * @param targetId\n * @param msgSet\n */\nexport const findInMsgSetById = (\n  targetId: string,\n  msgSet: ReturnType<ChannelState['formatMessage']>[],\n) => {\n  for (let i = msgSet.length - 1; i >= 0; i--) {\n    const item = msgSet[i];\n    if (item.id === targetId) {\n      return {\n        index: i,\n        target: item,\n      };\n    }\n  }\n  return {\n    index: -1,\n  };\n};\n\n/**\n * Utility function for jumpToFirstUnreadMessage\n * @param targetDate\n * @param msgSet\n * @param exact\n */\nexport const findInMsgSetByDate = (\n  targetDate: Date,\n  msgSet: MessageResponse[] | ReturnType<ChannelState['formatMessage']>[],\n  exact = false,\n) => {\n  const targetTimestamp = targetDate.getTime();\n  let left = 0;\n  let middle = 0;\n  let right = msgSet.length - 1;\n  while (left <= right) {\n    middle = Math.floor((right + left) / 2);\n    const middleTimestamp = new Date(\n      msgSet[middle].created_at as string | Date,\n    ).getTime();\n    const middleLeftTimestamp =\n      msgSet[middle - 1]?.created_at &&\n      new Date(msgSet[middle - 1].created_at as string | Date).getTime();\n    const middleRightTimestamp =\n      msgSet[middle + 1]?.created_at &&\n      new Date(msgSet[middle + 1].created_at as string | Date).getTime();\n    if (\n      middleTimestamp === targetTimestamp ||\n      (middleLeftTimestamp &&\n        middleRightTimestamp &&\n        middleLeftTimestamp < targetTimestamp &&\n        targetTimestamp < middleRightTimestamp)\n    ) {\n      return { index: middle, target: msgSet[middle] };\n    }\n    if (middleTimestamp < targetTimestamp) left = middle + 1;\n    else right = middle - 1;\n  }\n\n  if (\n    !exact ||\n    new Date(msgSet[left].created_at as string | Date).getTime() === targetTimestamp\n  ) {\n    return { index: left, target: msgSet[left] };\n  }\n  return { index: -1 };\n};\n/**\n * Compatibility adapter:\n * LocalMessage.error expects ErrorFromResponse<APIErrorResponse>, but some transport failures\n * (for example Axios ERR_NETWORK while offline) do not have an HTTP response payload.\n */\nexport const adaptMessageSendErrorToErrorFromResponse = (\n  error: unknown,\n): ErrorFromResponse<APIErrorResponse> => {\n  if (error instanceof ErrorFromResponse) {\n    return error;\n  }\n\n  const fallbackMessage = error instanceof Error ? error.message : 'Message send failed';\n  let message = fallbackMessage;\n  let status = 0;\n  let code: number | null = null;\n\n  if (typeof error === 'object' && error !== null) {\n    const maybeAxiosError = error as {\n      code?: unknown;\n      message?: unknown;\n      name?: unknown;\n      response?: ErrorFromResponse<APIErrorResponse>['response'];\n      status?: unknown;\n    };\n\n    if (maybeAxiosError.name === 'AxiosError' && maybeAxiosError.code === 'ERR_NETWORK') {\n      message =\n        typeof maybeAxiosError.message === 'string'\n          ? maybeAxiosError.message\n          : 'Network Error';\n      status = maybeAxiosError.response?.status ?? 0;\n\n      return new ErrorFromResponse<APIErrorResponse>(message, {\n        code: null,\n        response:\n          maybeAxiosError.response ??\n          ({\n            // Compatibility shim: this is an intentionally incomplete AxiosResponse-like object.\n            data: {\n              duration: '',\n              message,\n              more_info: '',\n              StatusCode: status,\n            },\n            status,\n          } as ErrorFromResponse<APIErrorResponse>['response']),\n        status,\n      });\n    }\n\n    try {\n      // error response isn't usable so needs to be stringified then parsed\n      const stringError = JSON.stringify(error);\n      const parsedError = stringError\n        ? (JSON.parse(stringError) as Record<string, unknown>)\n        : {};\n\n      if (typeof parsedError.message === 'string') {\n        message = parsedError.message;\n      }\n      if (typeof parsedError.status === 'number') {\n        status = parsedError.status;\n      }\n      if (typeof parsedError.code === 'number') {\n        code = parsedError.code;\n      }\n    } catch {\n      // keep fallback values\n    }\n  }\n\n  return new ErrorFromResponse<APIErrorResponse>(message, {\n    code,\n    response: {\n      // Compatibility shim: this is an intentionally incomplete AxiosResponse-like object.\n      data: {\n        duration: '',\n        message,\n        more_info: '',\n        StatusCode: status,\n      },\n      status,\n    } as ErrorFromResponse<APIErrorResponse>['response'],\n    status,\n  });\n};\n\n/**\n * Settles the uploads of any attachment that is still in flight, and reports the outcome.\n *\n * A message only ever reaches the send path with a pending attachment when\n * `createSendWithPendingUploadsAttachmentsMiddleware` is installed — the default composition\n * middleware discards such a composition instead. `UploadManager.upload()` is idempotent by\n * `localMetadata.id`, so this awaits the request the composer already started rather than\n * starting a second one; an attachment whose upload never started (a retry, an offline replay)\n * is uploaded here for the first time.\n *\n * Resolved attachments come back carrying their URL and **without** `localMetadata`, and their\n * local preview is revoked. Failed ones are returned untouched, `localMetadata` and all, so a\n * retry re-uploads only what is still missing.\n */\nexport const settlePendingAttachmentUploads = async ({\n  attachments,\n  channelCid,\n  client,\n}: {\n  attachments: NonNullable<LocalMessage['attachments']>;\n  channelCid: string;\n  client: StreamChat;\n}): Promise<{\n  attachments: NonNullable<LocalMessage['attachments']>;\n  failureReason?: unknown;\n}> => {\n  const pendingIndexes = attachments.reduce<number[]>((indexes, attachment, index) => {\n    if (isPendingUpload(attachment)) indexes.push(index);\n    return indexes;\n  }, []);\n\n  if (!pendingIndexes.length) return { attachments };\n\n  const settled = await Promise.allSettled(\n    pendingIndexes.map((index) => {\n      const { file, id } = (attachments[index] as LocalUploadAttachment).localMetadata;\n      return client.uploadManager.upload({ channelCid, file, id });\n    }),\n  );\n\n  const nextAttachments = [...attachments];\n  let failureReason: unknown;\n\n  settled.forEach((result, position) => {\n    const index = pendingIndexes[position];\n    const attachment = nextAttachments[index] as LocalUploadAttachment;\n\n    if (result.status === 'fulfilled' && result.value) {\n      nextAttachments[index] = applyUploadResult(attachment, result.value);\n      return;\n    }\n\n    // Deliberately `allSettled`, and the resolved URLs above are kept even though the message as\n    // a whole now fails: a retry then only re-uploads what did not make it.\n    if (!failureReason) {\n      failureReason =\n        result.status === 'rejected'\n          ? result.reason\n          : new Error('Attachment upload returned no result');\n    }\n  });\n\n  return { attachments: nextAttachments, failureReason };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.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 { TypingIndicatorHeader } from "../TypingIndicator/TypingIndicatorHeader.mjs";
+import { useChannelHeaderOnlineStatus } from "./hooks/useChannelHeaderOnlineStatus.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChannelHeader/ChannelHeader.tsx
+var ChannelHeaderSubtitle = () => {
+	const { channelConfig } = useChannelStateContext("ChannelHeaderSubtitle");
+	const { client } = useChatContext("ChannelHeaderSubtitle");
+	const { typing = {} } = useTypingContext("ChannelHeaderSubtitle");
+	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;
+	if (!hasTyping && !onlineStatusText) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__channel-header__data__subtitle",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "str-chat__subtitle-content-transition",
+			children: hasTyping ? /* @__PURE__ */ jsx(TypingIndicatorHeader, {}) : onlineStatusText
+		}, hasTyping ? "typing" : "default")
+	});
+};
+/**
+* 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 { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
+		channel,
+		overrideImage,
+		overrideTitle
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-header",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__channel-header__start",
+				children: HeaderStartContent && /* @__PURE__ */ jsx(HeaderStartContent, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-header__data",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__channel-header__data__title",
+					children: displayTitle
+				}), /* @__PURE__ */ jsx(ChannelHeaderSubtitle, {})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__channel-header__end",
+				children: /* @__PURE__ */ jsx(Avatar, {
+					className: "str-chat__avatar--channel-header",
+					displayMembers: groupChannelDisplayInfo?.members,
+					imageUrl: displayImage,
+					size: "lg",
+					userName: displayTitle
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ChannelHeader };
+
+//# sourceMappingURL=ChannelHeader.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,51 @@
+import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useEffect, useState } from "react";
+//#region src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts
+var getOtherWatchers = (watchers, ownUserId) => {
+	const next = Object.assign({}, watchers ?? {});
+	if (ownUserId) delete next[ownUserId];
+	return next;
+};
+var useChannelHasMembersOnline = ({ channel: channelOverride, enabled = true } = {}) => {
+	const { channel: contextChannel } = useChannelStateContext();
+	const { client } = useChatContext();
+	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
+	]);
+	if (!enabled) return false;
+	return Object.keys(watchers).length > 0;
+};
+//#endregion
+export { useChannelHasMembersOnline };
+
+//# sourceMappingURL=useChannelHasMembersOnline.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,33 @@
+import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { isDmChannel } from "../../../utils/isDmChannel.mjs";
+import { useChannelHasMembersOnline } from "./useChannelHasMembersOnline.mjs";
+//#region src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts
+/**
+* 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).
+*/
+function useChannelHeaderOnlineStatus({ channel: channelOverride, watcherCount: watcherCountOverride } = {}) {
+	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
+	});
+	if (!memberCount) return null;
+	if (isDirectMessagingChannel) return hasMembersOnline ? t("Online") : t("Offline");
+	return `${t("{{ memberCount }} members", { memberCount })} · ${t("{{ watcherCount }} online", { watcherCount })}`;
+}
+//#endregion
+export { useChannelHeaderOnlineStatus };
+
+//# sourceMappingURL=useChannelHeaderOnlineStatus.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,143 @@
+import { ChannelListContextProvider } from "../../context/ChannelListContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { DialogManagerProvider } from "../../context/DialogManagerContext.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
+import { useConnectionRecoveredListener } from "./hooks/useConnectionRecoveredListener.mjs";
+import { usePaginatedChannels } from "./hooks/usePaginatedChannels.mjs";
+import { moveChannelUpwards } from "./utils.mjs";
+import { useChannelListShape, usePrepareShapeHandlers } from "./hooks/useChannelListShape.mjs";
+import { ChannelListUI } from "./ChannelListUI.mjs";
+import { Search } from "../Search/Search.mjs";
+import { LoadMorePaginator } from "../LoadMore/LoadMorePaginator.mjs";
+import { ChannelListHeader } from "./ChannelListHeader.mjs";
+import { ChannelListItem } from "../ChannelListItem/ChannelListItem.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/ChannelList/ChannelList.tsx
+var DEFAULT_FILTERS = {};
+var DEFAULT_OPTIONS = {};
+var DEFAULT_SORT = {};
+var searchControllerStateSelector = (nextValue) => ({ searchIsActive: nextValue.isActive });
+var UnMemoizedChannelList = (props) => {
+	const { allowNewMessagesFromUnfilteredChannels = true, channelRenderFilterFn, customActiveChannel, customQueryChannels, EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator, filters = {}, getLatestMessagePreview, lockChannelOrder = false, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {} } = props;
+	const stableId = useStableId();
+	const { channel, channelsQueryState, client, customClasses, searchController, setActiveChannel, theme, useImageFlagEmojisOnWindows } = useChatContext("ChannelList");
+	const { ChannelListHeader: ChannelListHeader$1 = ChannelListHeader, ChannelListUI: ChannelListUI$1 = ChannelListUI, NotificationList: NotificationList$1 = NotificationList, Search: Search$1 = Search } = useComponentContext();
+	const channelListRef = useRef(null);
+	const [channelUpdateCount, setChannelUpdateCount] = useState(0);
+	const { searchIsActive } = useStateStore(searchController.state, searchControllerStateSelector);
+	/**
+	* Set a channel with id {customActiveChannel} as active and move it to the top of the list.
+	* If customActiveChannel prop is absent, then set the first channel in list as active channel.
+	*/
+	const activeChannelHandler = async (channels, setChannels, effectiveQueryParams) => {
+		if (!channels.length) return;
+		if (customActiveChannel) {
+			let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
+			if (!customActiveChannelObject) [customActiveChannelObject] = await client.queryChannels({ id: customActiveChannel });
+			if (customActiveChannelObject) {
+				setActiveChannel(customActiveChannelObject, watchers);
+				setChannels(moveChannelUpwards({
+					channels,
+					channelToMove: customActiveChannelObject,
+					sort: effectiveQueryParams.sort
+				}));
+				return;
+			}
+		}
+		if (setActiveChannelOnMount) setActiveChannel(channels[0], watchers);
+	};
+	/**
+	* For some events, inner properties on the channel will update but the shallow comparison will not
+	* force a re-render. Incrementing this dummy variable ensures the channel previews update.
+	*/
+	const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);
+	const { channels, effectiveFilters, effectiveSort, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels);
+	const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
+	const { customHandler, defaultHandler } = usePrepareShapeHandlers({
+		allowNewMessagesFromUnfilteredChannels,
+		filters: effectiveFilters,
+		lockChannelOrder,
+		onAddedToChannel,
+		onChannelDeleted,
+		onChannelHidden,
+		onChannelTruncated,
+		onChannelUpdated,
+		onChannelVisible,
+		onMessageNew,
+		onMessageNewHandler,
+		onRemovedFromChannel,
+		setChannels,
+		sort: effectiveSort
+	});
+	useChannelListShape(customHandler ?? defaultHandler);
+	useConnectionRecoveredListener(forceUpdate);
+	useEffect(() => {
+		const handleEvent = (event) => {
+			if (event.cid === channel?.cid) setActiveChannel();
+		};
+		client.on("channel.deleted", handleEvent);
+		client.on("channel.hidden", handleEvent);
+		return () => {
+			client.off("channel.deleted", handleEvent);
+			client.off("channel.hidden", handleEvent);
+		};
+	}, [channel?.cid]);
+	const renderChannel = (item) => {
+		return /* @__PURE__ */ jsx(ChannelListItem, {
+			activeChannel: channel,
+			channel: item,
+			channelUpdateCount,
+			getLatestMessagePreview,
+			setActiveChannel,
+			watchers
+		}, item.cid);
+	};
+	const className = clsx(customClasses?.chat ?? "str-chat", theme, customClasses?.channelList ?? `str-chat__channel-list`, { "str-chat--windows-flags": useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/) });
+	const showChannelList = !searchIsActive;
+	return /* @__PURE__ */ jsx(ChannelListContextProvider, {
+		value: {
+			channels,
+			hasNextPage,
+			loadNextPage,
+			setChannels
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			ref: channelListRef,
+			children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
+				id: `channel-list-dialog-manager-${stableId}`,
+				children: [
+					/* @__PURE__ */ jsx(ChannelListHeader$1, {}),
+					showChannelSearch && /* @__PURE__ */ jsx(Search$1, {}),
+					showChannelList && /* @__PURE__ */ jsx(ChannelListUI$1, {
+						error: channelsQueryState.error,
+						loadedChannels: sendChannelsToList ? loadedChannels : void 0,
+						loading: !!channelsQueryState.queryInProgress && ["reload", "uninitialized"].includes(channelsQueryState.queryInProgress),
+						setChannels,
+						children: !loadedChannels?.length ? /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: "channel" }) : /* @__PURE__ */ jsx(Paginator, {
+							hasNextPage,
+							isLoading: channelsQueryState.queryInProgress === "load-more",
+							loadNextPage,
+							children: renderChannels ? renderChannels(loadedChannels, renderChannel) : loadedChannels.map((channel) => renderChannel(channel))
+						})
+					}),
+					/* @__PURE__ */ jsx(NotificationList$1, { panel: "channel-list" })
+				]
+			})
+		})
+	});
+};
+/**
+* Renders a preview list of Channels, allowing you to select the Channel you want to open
+*/
+var ChannelList = React.memo(UnMemoizedChannelList);
+//#endregion
+export { ChannelList };
+
+//# sourceMappingURL=ChannelList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelList.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport type {\n  Channel,\n  ChannelFilters,\n  ChannelOptions,\n  ChannelSort,\n  Event,\n  SearchControllerState,\n} from 'stream-chat';\n\nimport { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';\nimport type {\n  CustomQueryChannelsFn,\n  EffectiveQueryParams,\n} from './hooks/usePaginatedChannels';\nimport { usePaginatedChannels } from './hooks/usePaginatedChannels';\nimport {\n  useChannelListShape,\n  usePrepareShapeHandlers,\n} from './hooks/useChannelListShape';\nimport { useStateStore } from '../../store';\nimport { ChannelListUI as DefaultChannelListUI } from './ChannelListUI';\nimport { ChannelListItem } from '../ChannelListItem/ChannelListItem';\nimport { Search as DefaultSearch } from '../Search';\nimport type { EmptyStateIndicatorProps } from '../EmptyStateIndicator';\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport type { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';\nimport { LoadMorePaginator } from '../LoadMore/LoadMorePaginator';\nimport { NotificationList as DefaultNotificationList } from '../Notifications';\nimport type { ChatContextValue } from '../../context';\nimport {\n  ChannelListContextProvider,\n  DialogManagerProvider,\n  useChatContext,\n  useComponentContext,\n} from '../../context';\nimport { moveChannelUpwards } from './utils';\nimport type { TranslationContextValue } from '../../context/TranslationContext';\nimport type { PaginatorProps } from '../../types/types';\nimport { ChannelListHeader as DefaultChannelListHeader } from './ChannelListHeader';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nconst DEFAULT_FILTERS = {};\nconst DEFAULT_OPTIONS = {};\nconst DEFAULT_SORT = {};\n\nconst searchControllerStateSelector = (nextValue: SearchControllerState) => ({\n  searchIsActive: nextValue.isActive,\n});\n\nexport type ChannelListProps = {\n  /**\n   * When the client receives `message.new`, `notification.message_new`, and `notification.added_to_channel` events, we automatically\n   * push that channel to the top of the list. If the channel doesn't currently exist in the list, we grab the channel from\n   * `client.activeChannels` and push it to the top of the list. You can disable this behavior by setting this prop\n   * to false, which will prevent channels not in the list from incrementing the list. The default is true.\n   */\n  allowNewMessagesFromUnfilteredChannels?: boolean;\n  /** Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */\n  channelRenderFilterFn?: (channels: Array<Channel>) => Array<Channel>;\n  // FIXME: how is this even legal (WHY IS IT STRING?!)\n  /** Set a channel (with this ID) to active and manually move it to the top of the list */\n  customActiveChannel?: string;\n  /** Custom function that handles the channel pagination. Has to build query filters, sort and options and query and append channels to the current channels state and update the hasNext pagination flag after each query. */\n  customQueryChannels?: CustomQueryChannelsFn;\n  /** Custom UI component for rendering an empty list, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) */\n  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;\n  /** An object containing channel query filters */\n  filters?: ChannelFilters;\n  /** Custom function that generates the message preview in ChannelPreview component */\n  getLatestMessagePreview?: (\n    channel: Channel,\n    t: TranslationContextValue['t'],\n    userLanguage: TranslationContextValue['userLanguage'],\n    isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'],\n  ) => ReactNode;\n  /** When true, channels won't dynamically sort by most recent message */\n  lockChannelOrder?: boolean;\n  /** Function to override the default behavior when a user is added to a channel, corresponds to [notification.added\\_to\\_channel](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onAddedToChannel?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is deleted, corresponds to [channel.deleted](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelDeleted?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is hidden, corresponds to [channel.hidden](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelHidden?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is truncated, corresponds to [channel.truncated](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelTruncated?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is updated, corresponds to [channel.updated](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelUpdated?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default channel visible behavior, corresponds to [channel.visible](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelVisible?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a message is received on a channel not being watched, corresponds to [notification.message\\_new](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onMessageNew?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a message is received on a channel being watched, handles [message.new](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onMessageNewHandler?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a user gets removed from a channel, corresponds to [notification.removed\\_from\\_channel](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onRemovedFromChannel?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** An object containing channel query options */\n  options?: ChannelOptions;\n  /** Custom UI component to handle channel pagination logic, defaults to and accepts same props as: [LoadMorePaginator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMorePaginator.tsx) */\n  Paginator?: React.ComponentType<PaginatorProps | LoadMorePaginatorProps>;\n  /**\n   * Custom interval during which the recovery channel list queries will be prevented.\n   * This is to avoid firing unnecessary queries during internet connection fluctuation.\n   * Recovery channel query is triggered upon `connection.recovered` and leads to complete channel list reload with pagination offset 0.\n   * The minimum throttle interval is 2000ms. The default throttle interval is 5000ms.\n   */\n  recoveryThrottleIntervalMs?: number;\n  /** Function to override the default behavior when rendering channels, so this function is called instead of rendering the Preview directly */\n  renderChannels?: (\n    channels: Channel[],\n    channelPreview: (item: Channel) => React.ReactNode,\n  ) => React.ReactNode;\n  /** If true, sends the list's currently loaded channels to the `List` component as the `loadedChannels` prop */\n  sendChannelsToList?: boolean;\n  /** Last channel will be set as active channel if true, defaults to true */\n  setActiveChannelOnMount?: boolean;\n  /** Whether or not to load the list with a search component, defaults to false */\n  showChannelSearch?: boolean;\n  /** An object containing channel query sort parameters */\n  sort?: ChannelSort;\n  /** An object containing query parameters for fetching channel watchers */\n  watchers?: { limit?: number; offset?: number };\n};\n\nconst UnMemoizedChannelList = (props: ChannelListProps) => {\n  const {\n    allowNewMessagesFromUnfilteredChannels = true,\n    channelRenderFilterFn,\n    customActiveChannel,\n    customQueryChannels,\n    EmptyStateIndicator = DefaultEmptyStateIndicator,\n    filters = {},\n    getLatestMessagePreview,\n    lockChannelOrder = false,\n    onAddedToChannel,\n    onChannelDeleted,\n    onChannelHidden,\n    onChannelTruncated,\n    onChannelUpdated,\n    onChannelVisible,\n    onMessageNew,\n    onMessageNewHandler,\n    onRemovedFromChannel,\n    options,\n    Paginator = LoadMorePaginator,\n    recoveryThrottleIntervalMs,\n    renderChannels,\n    sendChannelsToList = false,\n    setActiveChannelOnMount = true,\n    showChannelSearch = false,\n    sort = DEFAULT_SORT,\n    watchers = {},\n  } = props;\n\n  const stableId = useStableId();\n\n  const {\n    channel,\n    channelsQueryState,\n    client,\n    customClasses,\n    searchController,\n    setActiveChannel,\n    theme,\n    useImageFlagEmojisOnWindows,\n  } = useChatContext('ChannelList');\n  const {\n    ChannelListHeader = DefaultChannelListHeader,\n    ChannelListUI = DefaultChannelListUI,\n    NotificationList = DefaultNotificationList,\n    Search = DefaultSearch,\n  } = useComponentContext();\n\n  const channelListRef = useRef<HTMLDivElement | null>(null);\n  const [channelUpdateCount, setChannelUpdateCount] = useState(0);\n\n  // Indicator relevant when Search component that relies on SearchController is used\n  const { searchIsActive } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n  /**\n   * Set a channel with id {customActiveChannel} as active and move it to the top of the list.\n   * If customActiveChannel prop is absent, then set the first channel in list as active channel.\n   */\n  const activeChannelHandler = async (\n    channels: Array<Channel>,\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    effectiveQueryParams: EffectiveQueryParams,\n  ) => {\n    if (!channels.length) {\n      return;\n    }\n\n    if (customActiveChannel) {\n      // FIXME: this is wrong...\n      let customActiveChannelObject = channels.find(\n        (chan) => chan.id === customActiveChannel,\n      );\n\n      if (!customActiveChannelObject) {\n        [customActiveChannelObject] = await client.queryChannels({\n          id: customActiveChannel,\n        });\n      }\n\n      if (customActiveChannelObject) {\n        setActiveChannel(customActiveChannelObject, watchers);\n\n        const newChannels = moveChannelUpwards({\n          channels,\n          channelToMove: customActiveChannelObject,\n          sort: effectiveQueryParams.sort,\n        });\n\n        setChannels(newChannels);\n        return;\n      }\n    }\n\n    if (setActiveChannelOnMount) {\n      setActiveChannel(channels[0], watchers);\n    }\n  };\n\n  /**\n   * For some events, inner properties on the channel will update but the shallow comparison will not\n   * force a re-render. Incrementing this dummy variable ensures the channel previews update.\n   */\n  const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);\n\n  const {\n    channels,\n    effectiveFilters,\n    effectiveSort,\n    hasNextPage,\n    loadNextPage,\n    setChannels,\n  } = usePaginatedChannels(\n    client,\n    filters || DEFAULT_FILTERS,\n    sort || DEFAULT_SORT,\n    options || DEFAULT_OPTIONS,\n    activeChannelHandler,\n    recoveryThrottleIntervalMs,\n    customQueryChannels,\n  );\n\n  const loadedChannels = channelRenderFilterFn\n    ? channelRenderFilterFn(channels)\n    : channels;\n\n  const { customHandler, defaultHandler } = usePrepareShapeHandlers({\n    allowNewMessagesFromUnfilteredChannels,\n    // `effectiveFilters`/`effectiveSort` reflect the backend-resolved\n    // `predefined_filter` metadata when `options.predefined_filter` is in use.\n    // For non-predefined queries they fall back to the caller-supplied\n    // `filters`/`sort` props so behavior is unchanged.\n    filters: effectiveFilters,\n    lockChannelOrder,\n    onAddedToChannel,\n    onChannelDeleted,\n    onChannelHidden,\n    onChannelTruncated,\n    onChannelUpdated,\n    onChannelVisible,\n    onMessageNew,\n    onMessageNewHandler,\n    onRemovedFromChannel,\n    setChannels,\n    sort: effectiveSort,\n    // TODO: implement\n    // customHandleChannelListShape\n  });\n\n  useChannelListShape(customHandler ?? defaultHandler);\n\n  // TODO: maybe move this too\n  useConnectionRecoveredListener(forceUpdate);\n\n  useEffect(() => {\n    const handleEvent = (event: Event) => {\n      if (event.cid === channel?.cid) {\n        setActiveChannel();\n      }\n    };\n\n    client.on('channel.deleted', handleEvent);\n    client.on('channel.hidden', handleEvent);\n\n    return () => {\n      client.off('channel.deleted', handleEvent);\n      client.off('channel.hidden', handleEvent);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [channel?.cid]);\n\n  const renderChannel = (item: Channel) => {\n    const previewProps = {\n      activeChannel: channel,\n      channel: item,\n      // forces the update of preview component on channel update\n      channelUpdateCount,\n      getLatestMessagePreview,\n      setActiveChannel,\n      watchers,\n    };\n\n    return <ChannelListItem key={item.cid} {...previewProps} />;\n  };\n\n  const baseClass = 'str-chat__channel-list';\n  const className = clsx(\n    customClasses?.chat ?? 'str-chat',\n    theme,\n    customClasses?.channelList ?? `${baseClass}`,\n    {\n      'str-chat--windows-flags':\n        useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),\n    },\n  );\n\n  const showChannelList = !searchIsActive;\n  return (\n    <ChannelListContextProvider\n      value={{ channels, hasNextPage, loadNextPage, setChannels }}\n    >\n      <div className={className} ref={channelListRef}>\n        <DialogManagerProvider id={`channel-list-dialog-manager-${stableId}`}>\n          <ChannelListHeader />\n          {showChannelSearch && <Search />}\n          {showChannelList && (\n            <ChannelListUI\n              error={channelsQueryState.error}\n              loadedChannels={sendChannelsToList ? loadedChannels : undefined}\n              loading={\n                !!channelsQueryState.queryInProgress &&\n                ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress)\n              }\n              setChannels={setChannels}\n            >\n              {!loadedChannels?.length ? (\n                <EmptyStateIndicator listType='channel' />\n              ) : (\n                <Paginator\n                  hasNextPage={hasNextPage}\n                  isLoading={channelsQueryState.queryInProgress === 'load-more'}\n                  loadNextPage={loadNextPage}\n                >\n                  {renderChannels\n                    ? renderChannels(loadedChannels, renderChannel)\n                    : loadedChannels.map((channel) => renderChannel(channel))}\n                </Paginator>\n              )}\n            </ChannelListUI>\n          )}\n          <NotificationList panel='channel-list' />\n        </DialogManagerProvider>\n      </div>\n    </ChannelListContextProvider>\n  );\n};\n\n/**\n * Renders a preview list of Channels, allowing you to select the Channel you want to open\n */\nexport const ChannelList = React.memo(\n  UnMemoizedChannelList,\n) as typeof UnMemoizedChannelList;\n"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelListHeader.tsx
+var ChannelListHeader = () => {
+	const { t } = useTranslationContext();
+	const { channel } = useChatContext();
+	const { HeaderEndContent } = useComponentContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-list__header",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__channel-list__header__title",
+			children: t("Chats")
+		}), channel && HeaderEndContent && /* @__PURE__ */ jsx(HeaderEndContent, {})]
+	});
+};
+//#endregion
+export { ChannelListHeader };
+
+//# sourceMappingURL=ChannelListHeader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListHeader.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../context';\n\nexport const ChannelListHeader = () => {\n  const { t } = useTranslationContext();\n  const { channel } = useChatContext();\n  const { HeaderEndContent } = useComponentContext();\n  return (\n    <div className='str-chat__channel-list__header'>\n      <div className='str-chat__channel-list__header__title'>{t('Chats')}</div>\n      {channel && HeaderEndContent && <HeaderEndContent />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,0BAA0B;CACrC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EAAE,qBAAqB,oBAAoB;CACjD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aAAyC,EAAE,OAAO;EAAO,CAAA,GACvE,WAAW,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,CAChD;;AAET"}

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

@@ -0,0 +1,35 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { LoadingChannels } from "../Loading/LoadingChannels.mjs";
+import { NullComponent } from "../UtilityComponents/NullComponent.mjs";
+import { useChannelListKeyboardNavigation } from "./hooks/useChannelListKeyboardNavigation.mjs";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelListUI.tsx
+/**
+* A preview list of channels, allowing you to select the channel you want to open
+*/
+var ChannelListUI = (props) => {
+	const { children, error = null, loading = false } = props;
+	const { LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels } = useComponentContext("ChannelListUI");
+	const { t } = useTranslationContext("ChannelListUI");
+	const listboxRef = useRef(null);
+	const { onClickCapture, onKeyDown } = useChannelListKeyboardNavigation(listboxRef);
+	if (error) return /* @__PURE__ */ jsx(LoadingErrorIndicator, { error });
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__channel-list-inner",
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-label": t("aria/Channel list"),
+			className: "str-chat__channel-list-inner__main",
+			onClickCapture,
+			onKeyDown,
+			ref: listboxRef,
+			role: "listbox",
+			children: loading ? /* @__PURE__ */ jsx(LoadingIndicator, {}) : children
+		})
+	});
+};
+//#endregion
+export { ChannelListUI };
+
+//# sourceMappingURL=ChannelListUI.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListUI.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelListUI.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type { APIErrorResponse, Channel, ErrorFromResponse } from 'stream-chat';\n\nimport { LoadingChannels } from '../Loading/LoadingChannels';\nimport { NullComponent } from '../UtilityComponents';\nimport { useChannelListKeyboardNavigation } from './hooks/useChannelListKeyboardNavigation';\nimport { useComponentContext, useTranslationContext } from '../../context';\n\nexport type ChannelListUIProps = {\n  /** Whether the channel query request returned an errored response */\n  error: ErrorFromResponse<APIErrorResponse> | null;\n  /** The channels currently loaded in the list, only defined if `sendChannelsToList` on `ChannelList` is true */\n  loadedChannels?: Channel[];\n  /** Whether the channels are currently loading */\n  loading?: boolean;\n  /** Local state hook that resets the currently loaded channels */\n  setChannels?: React.Dispatch<React.SetStateAction<Channel[]>>;\n};\n\n/**\n * A preview list of channels, allowing you to select the channel you want to open\n */\nexport const ChannelListUI = (props: PropsWithChildren<ChannelListUIProps>) => {\n  const { children, error = null, loading = false } = props;\n  const { LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels } =\n    useComponentContext('ChannelListUI');\n  const { t } = useTranslationContext('ChannelListUI');\n\n  const listboxRef = useRef<HTMLDivElement>(null);\n  const { onClickCapture, onKeyDown } = useChannelListKeyboardNavigation(listboxRef);\n\n  if (error) {\n    return <LoadingErrorIndicator error={error} />;\n  }\n\n  return (\n    <div className='str-chat__channel-list-inner'>\n      <div\n        aria-label={t('aria/Channel list')}\n        className='str-chat__channel-list-inner__main'\n        onClickCapture={onClickCapture}\n        onKeyDown={onKeyDown}\n        ref={listboxRef}\n        role='listbox'\n      >\n        {loading ? <LoadingIndicator /> : children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAuBA,IAAa,iBAAiB,UAAiD;CAC7E,MAAM,EAAE,UAAU,QAAQ,MAAM,UAAU,UAAU;CACpD,MAAM,EAAE,wBAAwB,eAAe,mBAAmB,oBAChE,oBAAoB,eAAe;CACrC,MAAM,EAAE,MAAM,sBAAsB,eAAe;CAEnD,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,gBAAgB,cAAc,iCAAiC,UAAU;CAEjF,IAAI,OACF,OAAO,oBAAC,uBAAD,EAA8B,MAAQ,CAAA;CAG/C,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GACE,cAAY,EAAE,mBAAmB;GACjC,WAAU;GACM;GACL;GACX,KAAK;GACL,MAAK;aAEJ,UAAU,oBAAC,kBAAD,CAAmB,CAAA,IAAI;EAC/B,CAAA;CACF,CAAA;AAET"}