stream-chat-react 14.11.1 → 14.12.0

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

@@ -0,0 +1,752 @@
+import { ChannelActionProvider } from "../../context/ChannelActionContext.mjs";
+import { ChannelStateProvider } from "../../context/ChannelStateContext.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 { 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");
+	const { channelClass, chatClass } = useChannelContainerClasses({ customClasses });
+	const className = clsx(chatClass, theme, channelClass, additionalClassName);
+	return /* @__PURE__ */ jsx("div", {
+		id: CHANNEL_CONTAINER_ID,
+		...props,
+		className,
+		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);
+	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.
+			*/
+			await channel.query({
+				messages: {
+					id_lt: oldestID,
+					limit: 25
+				},
+				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);
+		};
+	}, [
+		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, {
+		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
+						})
+					})
+				})
+			})
+		})
+	});
+};
+/**
+* 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 };
+
+//# sourceMappingURL=Channel.mjs.map