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

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

@@ -1,38 +1,18 @@
-import { ChannelActionProvider } from "../../context/ChannelActionContext.mjs";
-import { ChannelStateProvider } from "../../context/ChannelStateContext.mjs";
+import { ChannelInstanceProvider } from "../../context/ChannelInstanceContext.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
-import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { TypingProvider } from "../../context/TypingContext.mjs";
-import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
-import { initialState, makeChannelReducer } from "./channelState.mjs";
-import { useCreateChannelStateContext } from "./hooks/useCreateChannelStateContext.mjs";
-import { useCreateTypingContext } from "./hooks/useCreateTypingContext.mjs";
-import { useEditMessageHandler } from "./hooks/useEditMessageHandler.mjs";
-import { useIsMounted } from "./hooks/useIsMounted.mjs";
-import { useMentionsHandlers } from "./hooks/useMentionsHandlers.mjs";
-import { LoadingChannel } from "../Loading/LoadingChannel.mjs";
-import { LoadingErrorIndicator } from "../Loading/LoadingErrorIndicator.mjs";
-import { CHANNEL_CONTAINER_ID } from "./constants.mjs";
 import { WithAudioPlayback } from "../AudioPlayback/WithAudioPlayback.mjs";
-import { getChannelConfig } from "../../utils/getChannelConfig.mjs";
-import { hasMoreMessagesProbably } from "../MessageList/utils.mjs";
-import { getChatContainerClass, useChannelContainerClasses, useImageFlagEmojisOnWindowsClass } from "./hooks/useChannelContainerClasses.mjs";
-import { adaptMessageSendErrorToErrorFromResponse, findInMsgSetByDate, findInMsgSetById, settlePendingAttachmentUploads } from "./utils.mjs";
-import { getChannel } from "../../utils/getChannel.mjs";
-import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration } from "../Attachment/attachment-sizing.mjs";
-import { useSearchFocusedMessage } from "../Search/hooks/useSearchFocusedMessage.mjs";
-import { useThreadContext } from "../Threads/ThreadContext.mjs";
-import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
-import React, { createElement, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { CHANNEL_CONTAINER_ID } from "./constants.mjs";
+import { useChannelContainerClasses, useImageFlagEmojisOnWindowsClass } from "./hooks/useChannelContainerClasses.mjs";
+import { useEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { localMessageToNewMessagePayload, withoutConcurrency } from "stream-chat";
-import debounce from "lodash.debounce";
-import throttle from "lodash.throttle";
 //#region src/components/Channel/Channel.tsx
-var ChannelContainer = ({ children, className: additionalClassName, ...props }) => {
-	const { customClasses, theme } = useChatContext("Channel");
+/**
+* The channel's content column (`.str-chat__channel`) with no channel bound, for filling the same
+* layout slot while none is selected.
+*/
+var ChannelPlaceholder = ({ children, className: additionalClassName, ...props }) => {
+	const { customClasses, theme } = useChatContext();
 	const { channelClass, chatClass } = useChannelContainerClasses({ customClasses });
 	const className = clsx(chatClass, theme, channelClass, additionalClassName);
 	return /* @__PURE__ */ jsx("div", {
@@ -42,128 +22,21 @@ var ChannelContainer = ({ children, className: additionalClassName, ...props })
 		children
 	});
 };
-var UnMemoizedChannel = (props) => {
-	const { channel: propsChannel, EmptyPlaceholder } = props;
-	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator, LoadingErrorIndicator, LoadingIndicator = LoadingChannel } = useComponentContext("Channel");
-	const { channel: contextChannel, channelsQueryState } = useChatContext("Channel");
-	const channel = propsChannel || contextChannel;
-	const emptyPlaceholder = "EmptyPlaceholder" in props ? EmptyPlaceholder : EmptyStateIndicator$1 && /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: "message" });
-	if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator) return /* @__PURE__ */ jsx(ChannelContainer, { children: /* @__PURE__ */ jsx(LoadingIndicator, {}) });
-	if (channelsQueryState.error && !channel && LoadingErrorIndicator) return /* @__PURE__ */ jsx(ChannelContainer, { children: /* @__PURE__ */ jsx(LoadingErrorIndicator, { error: channelsQueryState.error }) });
-	if (channelsQueryState.error && !channel) return /* @__PURE__ */ jsx(ChannelContainer, {});
-	if (!channel?.cid) return /* @__PURE__ */ jsx(ChannelContainer, { children: emptyPlaceholder });
-	return /* @__PURE__ */ createElement(ChannelInner, {
-		...props,
-		channel,
-		key: channel.cid
-	});
-};
-var ChannelInner = (props) => {
-	const { activeUnreadHandler, allowConcurrentAudioPlayback, channel, channelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, initializeOnMount = true, markReadOnMount = true, onMentionsClick, onMentionsHover, skipMessageDataMemoization } = props;
-	const { LoadingErrorIndicator: LoadingErrorIndicator$1 = LoadingErrorIndicator, LoadingIndicator = LoadingChannel } = useComponentContext();
-	const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext();
-	const { addNotification } = useNotificationApi();
-	const { t } = useTranslationContext("Channel");
-	const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
+var Channel = (props) => {
+	const { channel, children } = props;
+	const { client } = useChatContext();
 	const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
-	const thread = useThreadContext();
-	const [channelConfig, setChannelConfig] = useState(() => getChannelConfig(channel));
-	const [channelUnreadUiState, _setChannelUnreadUiState] = useState();
-	const [state, dispatch] = useReducer(useMemo(() => makeChannelReducer(), []), {
-		...initialState,
-		hasMore: channel.state.messagePagination.hasPrev,
-		loading: !channel.initialized,
-		messages: channel.state.messages
-	});
-	const jumpToMessageFromSearch = useSearchFocusedMessage();
-	const isMounted = useIsMounted();
-	const originalTitle = useRef("");
-	const lastRead = useRef(void 0);
-	const online = useRef(true);
-	const clearHighlightedMessageTimeoutId = useRef(null);
-	const channelCapabilitiesArray = channel.data?.own_capabilities;
-	const throttledCopyStateFromChannel = useMemo(() => throttle(() => dispatch({
-		channel,
-		type: "copyStateFromChannelOnEvent"
-	}), 500, {
-		leading: true,
-		trailing: true
-	}), [channel]);
-	const setChannelUnreadUiState = useMemo(() => throttle(_setChannelUnreadUiState, 200, {
-		leading: true,
-		trailing: false
-	}), []);
-	const markRead = useMemo(() => throttle(async (options) => {
-		const { updateChannelUiUnreadState = true } = options ?? {};
-		if (channel.disconnected) return;
-		if (!channelConfig?.read_events && client.options.isLocalUnreadCountEnabled) {
-			const event = channel.markReadLocally();
-			if (updateChannelUiUnreadState && event) {
-				lastRead.current = /* @__PURE__ */ new Date();
-				_setChannelUnreadUiState({
-					last_read: lastRead.current,
-					last_read_message_id: event.last_read_message_id,
-					unread_messages: 0
-				});
-			}
-		} else if (channelConfig?.read_events) {
-			lastRead.current = /* @__PURE__ */ new Date();
-			if (doMarkReadRequest) doMarkReadRequest(channel, updateChannelUiUnreadState ? setChannelUnreadUiState : void 0);
-			else {
-				const markReadResponse = await channel.markRead();
-				if (updateChannelUiUnreadState && markReadResponse?.event) _setChannelUnreadUiState({
-					last_read: lastRead.current,
-					last_read_message_id: markReadResponse.event.last_read_message_id,
-					unread_messages: 0
-				});
-			}
-		}
-		if (activeUnreadHandler) activeUnreadHandler(0, originalTitle.current);
-		else if (originalTitle.current) document.title = originalTitle.current;
-	}, 500, {
-		leading: true,
-		trailing: false
-	}), [
-		activeUnreadHandler,
-		channel,
-		channelConfig,
-		client,
-		doMarkReadRequest,
-		setChannelUnreadUiState
-	]);
-	const handleEvent = async (event) => {
-		if (channel.disconnected) return;
-		if (event.message) dispatch({
-			channel,
-			message: event.message,
-			type: "updateThreadOnEvent"
-		});
-		if (event.type === "user.messages.deleted" && event.cid && event.cid !== channel.cid) return;
-		if (event.type === "user.watching.start" || event.type === "user.watching.stop") return;
-		if (event.type === "typing.start" || event.type === "typing.stop") return dispatch({
-			channel,
-			type: "setTyping"
-		});
-		if (event.type === "connection.changed" && typeof event.online === "boolean") online.current = event.online;
-		if (event.type === "message.new") {
-			if (!event.message?.parent_id || event.message?.show_in_channel) {
-				if (document.hidden && (channelConfig?.read_events || client.options.isLocalUnreadCountEnabled) && !channel.muteStatus().muted) {
-					const unread = channel.countUnread(lastRead.current);
-					if (activeUnreadHandler) activeUnreadHandler(unread, originalTitle.current);
-					else document.title = `(${unread}) ${originalTitle.current}`;
-				}
-			}
-			if (event.message?.user?.id === client.userID && event?.message?.created_at && event?.message?.cid) {
-				const messageDate = new Date(event.message.created_at);
-				const cid = event.message.cid;
-				if (!latestMessageDatesByChannels[cid] || latestMessageDatesByChannels[cid].getTime() < messageDate.getTime()) latestMessageDatesByChannels[cid] = messageDate;
-			}
-		}
-		if (event.type === "user.deleted") {
-			const oldestID = channel.state?.messages?.[0]?.id;
-			/**
-			* As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
-			*/
+	useEffect(() => {
+		channel.activate();
+		return () => {
+			channel.deactivate();
+		};
+	}, [channel]);
+	const channelInstanceContextValue = useMemo(() => ({ channel }), [channel]);
+	useEffect(() => {
+		if (!channel.messagePaginator.unreadStateSnapshot.getLatestValue().firstUnreadMessageId) channel.messagePaginator.seedUnreadSnapshot();
+		const subscriptions = [client.on("user.deleted", async () => {
+			const oldestID = channel.messagePaginator.items?.[0]?.id;
 			await channel.query({
 				messages: {
 					id_lt: oldestID,
@@ -171,582 +44,23 @@ var ChannelInner = (props) => {
 				},
 				watchers: { limit: 25 }
 			});
-		}
-		if (event.type === "message.read_locally") return;
-		if (event.type === "notification.mark_unread") _setChannelUnreadUiState((prev) => {
-			if (!(event.last_read_at && event.user)) return prev;
-			return {
-				first_unread_message_id: event.first_unread_message_id,
-				last_read: new Date(event.last_read_at),
-				last_read_message_id: event.last_read_message_id,
-				unread_messages: event.unread_messages ?? 0
-			};
-		});
-		if (event.type === "channel.truncated" && event.cid === channel.cid) _setChannelUnreadUiState(void 0);
-		throttledCopyStateFromChannel();
-	};
-	useLayoutEffect(() => {
-		let errored = false;
-		let done = false;
-		(async () => {
-			if (!channel.initialized && initializeOnMount) try {
-				const members = [];
-				if (!channel.id && channel.data?.members) for (const member of channel.data.members) {
-					let userId;
-					if (typeof member === "string") userId = member;
-					else if (typeof member === "object") {
-						const { user, user_id } = member;
-						userId = user_id || user?.id;
-					}
-					if (userId) members.push(userId);
-				}
-				await getChannel({
-					channel,
-					client,
-					members,
-					options: channelQueryOptions
-				});
-				setChannelConfig(channel.getConfig());
-			} catch (e) {
-				dispatch({
-					error: e,
-					type: "setError"
-				});
-				errored = true;
-			}
-			done = true;
-			originalTitle.current = document.title;
-			if (!errored) {
-				dispatch({
-					channel,
-					hasMore: channel.state.messagePagination.hasPrev,
-					type: "initStateFromChannel"
-				});
-				if (client.user?.id && channel.state.read[client.user.id]) {
-					const { user, ...ownReadState } = channel.state.read[client.user.id];
-					_setChannelUnreadUiState((existingState) => {
-						if (existingState) return existingState;
-						return ownReadState;
-					});
-				}
-				/**
-				* TODO: maybe pass last_read to the countUnread method to get proper value
-				* combined with channel.countUnread adjustment (_countMessageAsUnread)
-				* to allow counting own messages too
-				*
-				* const lastRead = channel.state.read[client.userID as string].last_read;
-				*/
-				if (channel.countUnread() > 0 && markReadOnMount) markRead({ updateChannelUiUnreadState: false });
-				client.on("connection.changed", handleEvent);
-				client.on("connection.recovered", handleEvent);
-				client.on("user.updated", handleEvent);
-				client.on("user.deleted", handleEvent);
-				client.on("user.messages.deleted", handleEvent);
-				channel.on(handleEvent);
-			}
-		})();
+		})];
 		return () => {
-			if (errored || !done) return;
-			channel?.off(handleEvent);
-			client.off("connection.changed", handleEvent);
-			client.off("connection.recovered", handleEvent);
-			client.off("user.deleted", handleEvent);
+			subscriptions.forEach((subscription) => subscription.unsubscribe());
 		};
-	}, [
-		channel.cid,
-		channelQueryOptions,
-		doMarkReadRequest,
-		channelConfig?.read_events,
-		initializeOnMount
-	]);
-	useEffect(() => {
-		if (!state.thread) return;
-		const message = state.messages?.find((m) => m.id === state.thread?.id);
-		if (message) dispatch({
-			message,
-			type: "setThread"
-		});
-	}, [state.messages, state.thread]);
-	const handleHighlightedMessageChange = useCallback(({ highlightDuration, highlightedMessageId }) => {
-		dispatch({
-			channel,
-			highlightedMessageId,
-			type: "jumpToMessageFinished"
-		});
-		if (clearHighlightedMessageTimeoutId.current) clearTimeout(clearHighlightedMessageTimeoutId.current);
-		clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-			if (searchController._internalState.getLatestValue().focusedMessage) searchController._internalState.partialNext({ focusedMessage: void 0 });
-			clearHighlightedMessageTimeoutId.current = null;
-			dispatch({ type: "clearHighlightedMessage" });
-		}, highlightDuration ?? 500);
-	}, [channel, searchController]);
-	useEffect(() => {
-		if (!jumpToMessageFromSearch?.id) return;
-		handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
-	}, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
-	/** MESSAGE */
-	const notifyJumpToFirstUnreadError = useCallback(() => {
-		addNotification({
-			context: { feature: "jumpToFirstUnread" },
-			emitter: "Channel",
-			message: t("Failed to jump to the first unread message"),
-			severity: "error",
-			targetPanels: ["channel"],
-			type: "channel:jumpToFirstUnread:failed"
-		});
-	}, [addNotification, t]);
-	const loadMoreFinished = useCallback(debounce((hasMore, messages) => {
-		if (!isMounted.current) return;
-		dispatch({
-			hasMore,
-			messages,
-			type: "loadMoreFinished"
-		});
-	}, 2e3, {
-		leading: true,
-		trailing: true
-	}), []);
-	const finishLoadMore = useCallback((hasMore, messages) => {
-		if (!isMounted.current) return;
-		dispatch({
-			hasMore,
-			messages,
-			type: "loadMoreFinished"
-		});
-	}, [isMounted]);
-	const loadMore = async (limit = 25) => {
-		if (channel.disconnected || !online.current || !window.navigator.onLine || !channel.state.messagePagination.hasPrev) return 0;
-		const oldestMessage = state?.messages?.[0];
-		if (state.loadingMore || state.loadingMoreNewer || oldestMessage?.status !== "received") return 0;
-		dispatch({
-			loadingMore: true,
-			type: "setLoadingMore"
-		});
-		const oldestID = oldestMessage?.id;
-		const perPage = limit;
-		let queryResponse;
-		try {
-			queryResponse = await channel.query({
-				messages: {
-					id_lt: oldestID,
-					limit: perPage
-				},
-				watchers: { limit: perPage }
-			});
-		} catch (e) {
-			console.warn("message pagination request failed with error", e);
-			dispatch({
-				loadingMore: false,
-				type: "setLoadingMore"
-			});
-			return 0;
-		}
-		loadMoreFinished.cancel();
-		finishLoadMore(channel.state.messagePagination.hasPrev, channel.state.messages);
-		return queryResponse.messages.length;
-	};
-	const loadMoreNewer = async (limit = 25) => {
-		if (channel.disconnected || !online.current || !window.navigator.onLine || !channel.state.messagePagination.hasNext) return 0;
-		const newestMessage = state?.messages?.[state?.messages?.length - 1];
-		if (state.loadingMore || state.loadingMoreNewer) return 0;
-		dispatch({
-			loadingMoreNewer: true,
-			type: "setLoadingMoreNewer"
-		});
-		const newestId = newestMessage?.id;
-		const perPage = limit;
-		let queryResponse;
-		try {
-			queryResponse = await channel.query({
-				messages: {
-					id_gt: newestId,
-					limit: perPage
-				},
-				watchers: { limit: perPage }
-			});
-		} catch (e) {
-			console.warn("message pagination request failed with error", e);
-			dispatch({
-				loadingMoreNewer: false,
-				type: "setLoadingMoreNewer"
-			});
-			return 0;
-		}
-		dispatch({
-			hasMoreNewer: channel.state.messagePagination.hasNext,
-			messages: channel.state.messages,
-			type: "loadMoreNewerFinished"
-		});
-		return queryResponse.messages.length;
-	};
-	const jumpToMessage = useCallback(async (messageId, messageLimit = 25, highlightDuration = 500) => {
-		dispatch({
-			loadingMoreForJumpToChannelMessage: true,
-			type: "setLoadingMoreForJumpToChannelMessage"
-		});
-		loadMoreFinished.cancel();
-		try {
-			await channel.state.loadMessageIntoState(messageId, void 0, messageLimit);
-			handleHighlightedMessageChange({
-				highlightDuration,
-				highlightedMessageId: messageId
-			});
-		} catch (error) {
-			dispatch({
-				loadingMoreForJumpToChannelMessage: false,
-				type: "setLoadingMoreForJumpToChannelMessage"
-			});
-			throw error;
-		}
-	}, [
-		channel,
-		handleHighlightedMessageChange,
-		loadMoreFinished
-	]);
-	const jumpToLatestMessage = useCallback(async () => {
-		loadMoreFinished.cancel();
-		await channel.state.loadMessageIntoState("latest");
-		dispatch({
-			hasMore: channel.state.messagePagination.hasPrev,
-			hasMoreNewer: channel.state.messagePagination.hasNext,
-			messages: channel.state.messages,
-			type: "jumpToLatestMessageFinished"
-		});
-	}, [channel, loadMoreFinished]);
-	const jumpToFirstUnreadMessage = useCallback(async (queryMessageLimit = 25, highlightDuration = 500) => {
-		if (!channelUnreadUiState?.unread_messages) return;
-		let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
-		let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
-		let isInCurrentMessageSet = false;
-		if (firstUnreadMessageId) isInCurrentMessageSet = findInMsgSetById(firstUnreadMessageId, channel.state.messages).index !== -1;
-		else if (lastReadMessageId) {
-			const result = findInMsgSetById(lastReadMessageId, channel.state.messages);
-			isInCurrentMessageSet = !!result.target;
-			firstUnreadMessageId = result.index > -1 ? channel.state.messages[result.index + 1]?.id : void 0;
-		} else {
-			const lastReadTimestamp = channelUnreadUiState.last_read.getTime();
-			const { index: lastReadMessageIndex, target: lastReadMessage } = findInMsgSetByDate(channelUnreadUiState.last_read, channel.state.messages, true);
-			if (lastReadMessage) {
-				firstUnreadMessageId = channel.state.messages[lastReadMessageIndex + 1]?.id;
-				isInCurrentMessageSet = !!firstUnreadMessageId;
-				lastReadMessageId = lastReadMessage.id;
-			} else {
-				dispatch({
-					loadingMore: true,
-					type: "setLoadingMore"
-				});
-				let messages;
-				try {
-					messages = (await channel.query({ messages: {
-						created_at_around: channelUnreadUiState.last_read.toISOString(),
-						limit: queryMessageLimit
-					} }, "new")).messages;
-				} catch (e) {
-					notifyJumpToFirstUnreadError();
-					finishLoadMore(channel.state.messagePagination.hasPrev, channel.state.messages);
-					return;
-				}
-				const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
-				if (!firstMessageWithCreationDate) {
-					notifyJumpToFirstUnreadError();
-					finishLoadMore(channel.state.messagePagination.hasPrev, channel.state.messages);
-					return;
-				}
-				if (lastReadTimestamp < new Date(firstMessageWithCreationDate.created_at).getTime()) firstUnreadMessageId = firstMessageWithCreationDate.id;
-				else lastReadMessageId = findInMsgSetByDate(channelUnreadUiState.last_read, messages).target?.id;
-				finishLoadMore(channel.state.messagePagination.hasPrev, channel.state.messages);
-			}
-		}
-		if (!firstUnreadMessageId && !lastReadMessageId) {
-			notifyJumpToFirstUnreadError();
-			return;
-		}
-		if (!isInCurrentMessageSet) {
-			dispatch({
-				loadingMore: true,
-				type: "setLoadingMore"
-			});
-			try {
-				const targetId = firstUnreadMessageId ?? lastReadMessageId;
-				await channel.state.loadMessageIntoState(targetId, void 0, queryMessageLimit);
-				/**
-				* if the index of the last read message on the page is beyond the half of the page,
-				* we have arrived to the oldest page of the channel
-				*/
-				const indexOfTarget = channel.state.messages.findIndex((message) => message.id === targetId);
-				finishLoadMore(channel.state.messagePagination.hasPrev, channel.state.messages);
-				firstUnreadMessageId = firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
-			} catch (e) {
-				notifyJumpToFirstUnreadError();
-				finishLoadMore(channel.state.messagePagination.hasPrev, channel.state.messages);
-				return;
-			}
-		}
-		if (!firstUnreadMessageId) {
-			notifyJumpToFirstUnreadError();
-			return;
-		}
-		if (!channelUnreadUiState.first_unread_message_id) _setChannelUnreadUiState({
-			...channelUnreadUiState,
-			first_unread_message_id: firstUnreadMessageId,
-			last_read_message_id: lastReadMessageId
-		});
-		handleHighlightedMessageChange({
-			highlightDuration,
-			highlightedMessageId: firstUnreadMessageId
-		});
-	}, [
-		channel,
-		finishLoadMore,
-		handleHighlightedMessageChange,
-		notifyJumpToFirstUnreadError,
-		channelUnreadUiState
-	]);
-	const deleteMessage = useCallback(async (message, options) => {
-		if (!message?.id) throw new Error("Cannot delete a message - missing message ID.");
-		let deletedMessage;
-		if (doDeleteMessageRequest) deletedMessage = await doDeleteMessageRequest(message, options);
-		else deletedMessage = (await client.deleteMessage(message.id, options)).message;
-		return deletedMessage;
-	}, [client, doDeleteMessageRequest]);
-	const updateMessage = (updatedMessage) => {
-		channel.state.addMessageSorted(updatedMessage, true);
-		dispatch({
-			channel,
-			parentId: state.thread && updatedMessage.parent_id,
-			type: "copyMessagesFromChannel"
-		});
-	};
-	const sendMessageRequest = async ({ localMessage, message, options }) => {
-		try {
-			const { attachments: settledAttachments, failureReason } = await settlePendingAttachmentUploads({
-				attachments: localMessage.attachments ?? [],
-				channelCid: channel.cid,
-				client
-			});
-			if (failureReason) {
-				const failedMessage = {
-					...localMessage,
-					attachments: settledAttachments,
-					error: adaptMessageSendErrorToErrorFromResponse(failureReason),
-					status: "failed"
-				};
-				updateMessage(failedMessage);
-				thread?.upsertReplyLocally({ message: failedMessage });
-				return;
-			}
-			const messageToSend = settledAttachments === localMessage.attachments ? message : {
-				...message,
-				attachments: settledAttachments
-			};
-			let messageResponse;
-			if (doSendMessageRequest) messageResponse = await doSendMessageRequest(channel, messageToSend, options);
-			else messageResponse = await channel.sendMessage(messageToSend, options);
-			let existingMessage = void 0;
-			for (let i = channel.state.messages.length - 1; i >= 0; i--) {
-				const msg = channel.state.messages[i];
-				if (msg.id && msg.id === message.id) {
-					existingMessage = msg;
-					break;
-				}
-			}
-			const responseIsTheNewest = new Date(messageResponse?.message?.updated_at || 0).getTime() > (existingMessage?.updated_at?.getTime() || 0);
-			if (messageResponse?.message && (responseIsTheNewest || existingMessage?.status === "sending")) updateMessage({
-				...messageResponse.message,
-				status: "received"
-			});
-		} catch (error) {
-			const parsedError = adaptMessageSendErrorToErrorFromResponse(error);
-			if (parsedError.code === 4 && error instanceof Error && error.message.includes("already exists")) updateMessage({
-				...localMessage,
-				status: "received"
-			});
-			else {
-				updateMessage({
-					...localMessage,
-					error: parsedError,
-					status: "failed"
-				});
-				thread?.upsertReplyLocally({ message: {
-					...localMessage,
-					error: parsedError,
-					status: "failed"
-				} });
-			}
-		}
-	};
-	/**
-	* Sends are serialised per channel while a composition middleware declaring
-	* `allowsPendingUploads` is installed. Without it a text-only message would reach the server
-	* while an earlier message was still uploading, and since `created_at` is stamped when the
-	* request arrives, the channel would end up in a different order than the user watched happen.
-	* `withoutConcurrency` lets a failed send through without blocking the ones behind it.
-	*
-	* Read off the channel's composer, which is what the composer setup function configures — so
-	* whoever installs the middleware gets the matching send path with nothing else to switch on.
-	*/
-	const doSendMessage = (params) => channel.messageComposer.allowsPendingUploads ? withoutConcurrency(`stream-chat-react/send-message/${channel.cid}`, () => sendMessageRequest(params)) : sendMessageRequest(params);
-	const sendMessage = async ({ localMessage, message, options }) => {
-		channel.state.filterErrorMessages();
-		thread?.upsertReplyLocally({ message: localMessage });
-		updateMessage(localMessage);
-		await doSendMessage({
-			localMessage,
-			message,
-			options
-		});
-	};
-	const retrySendMessage = async (localMessage) => {
-		/**
-		* If type is not checked, and we for example send message.type === 'error',
-		* then request fails with error: "message.type must be one of ['' regular system]".
-		* For now, we re-send any other type to prevent breaking behavior.
-		*/
-		const type = localMessage.type === "error" ? "regular" : localMessage.type;
-		updateMessage({
-			...localMessage,
-			error: void 0,
-			status: "sending",
-			type
-		});
-		await doSendMessage({
-			localMessage,
-			message: localMessageToNewMessagePayload({
-				...localMessage,
-				type
-			})
-		});
-	};
-	const removeMessage = (message) => {
-		channel.state.removeMessage(message);
-		dispatch({
-			channel,
-			parentId: state.thread && message.parent_id,
-			type: "copyMessagesFromChannel"
-		});
-	};
-	/** THREAD */
-	const openThread = (message, event) => {
-		event?.preventDefault();
-		dispatch({
-			channel,
-			message,
-			type: "openThread"
-		});
-	};
-	const closeThread = (event) => {
-		event?.preventDefault();
-		dispatch({ type: "closeThread" });
-	};
-	const loadMoreThreadFinished = useCallback(debounce((threadHasMore, threadMessages) => {
-		dispatch({
-			threadHasMore,
-			threadMessages,
-			type: "loadMoreThreadFinished"
-		});
-	}, 2e3, {
-		leading: true,
-		trailing: true
-	}), []);
-	const loadMoreThread = async (limit = 25) => {
-		if (state.threadLoadingMore || !state.thread || !state.threadHasMore) return;
-		dispatch({ type: "startLoadingThread" });
-		const parentId = state.thread.id;
-		if (!parentId) return dispatch({ type: "closeThread" });
-		const oldMessages = channel.state.threads[parentId] || [];
-		const oldestMessageId = oldMessages[0]?.id;
-		try {
-			loadMoreThreadFinished(hasMoreMessagesProbably((await channel.getReplies(parentId, {
-				id_lt: oldestMessageId,
-				limit
-			})).messages.length, limit), channel.state.threads[parentId] || []);
-		} catch (e) {
-			loadMoreThreadFinished(false, oldMessages);
-		}
-	};
-	const onMentionsHoverOrClick = useMentionsHandlers(onMentionsHover, onMentionsClick);
-	const editMessage = useEditMessageHandler(doUpdateMessageRequest);
-	const { typing, ...restState } = state;
-	const channelStateContextValue = useCreateChannelStateContext({
-		...restState,
-		channel,
-		channelCapabilitiesArray,
-		channelConfig,
-		channelUnreadUiState,
-		giphyVersion: props.giphyVersion || "fixed_height",
-		imageAttachmentSizeHandler: props.imageAttachmentSizeHandler || getImageAttachmentConfiguration,
-		mutes,
-		notifications: [],
-		shouldGenerateVideoThumbnail: props.shouldGenerateVideoThumbnail ?? true,
-		videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
-		watcher_count: state.watcherCount
-	});
-	const channelActionContextValue = useMemo(() => ({
-		closeThread,
-		deleteMessage,
-		dispatch,
-		editMessage,
-		jumpToFirstUnreadMessage,
-		jumpToLatestMessage,
-		jumpToMessage,
-		loadMore,
-		loadMoreNewer,
-		loadMoreThread,
-		markRead,
-		onMentionsClick: onMentionsHoverOrClick,
-		onMentionsHover: onMentionsHoverOrClick,
-		openThread,
-		removeMessage,
-		retrySendMessage,
-		sendMessage,
-		setChannelUnreadUiState,
-		skipMessageDataMemoization,
-		updateMessage
-	}), [
-		channel.cid,
-		deleteMessage,
-		loadMore,
-		loadMoreNewer,
-		markRead,
-		jumpToFirstUnreadMessage,
-		jumpToMessage,
-		jumpToLatestMessage,
-		setChannelUnreadUiState
-	]);
-	const typingContextValue = useCreateTypingContext({ typing });
-	if (state.error) return /* @__PURE__ */ jsx(ChannelContainer, { children: /* @__PURE__ */ jsx(LoadingErrorIndicator$1, { error: state.error }) });
-	if (state.loading) return /* @__PURE__ */ jsx(ChannelContainer, { children: /* @__PURE__ */ jsx(LoadingIndicator, {}) });
-	if (!channel.watch) return /* @__PURE__ */ jsx(ChannelContainer, { children: /* @__PURE__ */ jsx("div", { children: t("Channel Missing") }) });
-	return /* @__PURE__ */ jsx(ChannelContainer, {
+	}, [channel, client]);
+	return /* @__PURE__ */ jsx(ChannelPlaceholder, {
 		className: windowsEmojiClass,
-		children: /* @__PURE__ */ jsx(ChannelStateProvider, {
-			value: channelStateContextValue,
-			children: /* @__PURE__ */ jsx(ChannelActionProvider, {
-				value: channelActionContextValue,
-				children: /* @__PURE__ */ jsx(TypingProvider, {
-					value: typingContextValue,
-					children: /* @__PURE__ */ jsx(WithAudioPlayback, {
-						allowConcurrentPlayback: allowConcurrentAudioPlayback,
-						children: /* @__PURE__ */ jsx("div", {
-							className: clsx(chatContainerClass),
-							children
-						})
-					})
-				})
+		children: /* @__PURE__ */ jsx(ChannelInstanceProvider, {
+			value: channelInstanceContextValue,
+			children: /* @__PURE__ */ jsx(WithAudioPlayback, {
+				playbackScope: channel,
+				children
 			})
 		})
 	});
 };
-/**
-* A wrapper component that provides channel data and renders children.
-* The Channel component provides the following contexts:
-* - [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/)
-* - [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/)
-* - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
-* - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
-*/
-var Channel = React.memo(UnMemoizedChannel);
 //#endregion
-export { Channel };
+export { Channel, ChannelPlaceholder };
 
 //# sourceMappingURL=Channel.mjs.map