stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrependMessagesCount.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport type { RenderedMessage } from '../../utils';\nimport { isLocalMessage } from '../../utils';\n\nconst STATUSES_EXCLUDED_FROM_PREPEND = {\n  failed: true,\n  sending: true,\n} as const as Record<string, boolean>;\n\nexport function usePrependedMessagesCount(\n  messages: RenderedMessage[],\n  hasDateSeparator: boolean,\n) {\n  const firstRealMessageIndex = hasDateSeparator ? 1 : 0;\n  const firstMessageOnFirstLoadedPage = useRef<RenderedMessage>(undefined);\n  const previousFirstMessageOnFirstLoadedPage = useRef<RenderedMessage>(undefined);\n  const previousNumItemsPrepended = useRef(0);\n\n  const numItemsPrepended = useMemo(() => {\n    if (!messages || !messages.length) {\n      previousNumItemsPrepended.current = 0;\n      return 0;\n    }\n\n    const currentFirstMessage = messages?.[firstRealMessageIndex];\n\n    const noNewMessages =\n      currentFirstMessage?.id === previousFirstMessageOnFirstLoadedPage.current?.id;\n\n    // This is possible only, when sending messages very quickly (basically single char messages submitted like a crazy) in empty channel (first page)\n    // Optimistic UI update, when sending messages, can lead to a situation, when\n    // the order of the messages changes for a moment. This can happen, when a user\n    // sends multiple messages withing few milliseconds. E.g. we send a message A\n    // then message B. At first we have message array with both messages of status \"sending\"\n    // then response for message A is received with a new - later - created_at timestamp\n    // this leads to rearrangement of 1.B (\"sending\"), 2.A (\"received\"). Still firstMessageOnFirstLoadedPage.current\n    // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1\n    // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message\n    // at non-existent index. Therefore, we ignore messages of status \"sending\" / \"failed\" in order they are\n    // not considered as prepended messages.\n    const currentFirstMessageStatus = isLocalMessage(currentFirstMessage)\n      ? currentFirstMessage.status\n      : undefined;\n    const firstMsgMovedAfterMessagesInExcludedStatus = !!(\n      currentFirstMessageStatus &&\n      STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessageStatus]\n    );\n\n    if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {\n      return previousNumItemsPrepended.current;\n    }\n\n    if (!firstMessageOnFirstLoadedPage.current) {\n      firstMessageOnFirstLoadedPage.current = currentFirstMessage;\n    }\n    previousFirstMessageOnFirstLoadedPage.current = currentFirstMessage;\n    // if new messages were prepended, find out how many\n    // start with this number because there cannot be fewer prepended items than before\n    for (\n      let prependedMessageCount = previousNumItemsPrepended.current;\n      prependedMessageCount < messages.length;\n      prependedMessageCount += 1\n    ) {\n      const messageIsFirstOnFirstLoadedPage =\n        messages[prependedMessageCount].id === firstMessageOnFirstLoadedPage.current?.id;\n\n      if (messageIsFirstOnFirstLoadedPage) {\n        previousNumItemsPrepended.current = prependedMessageCount - firstRealMessageIndex;\n        return previousNumItemsPrepended.current;\n      }\n    }\n\n    // if no match has found, we have jumped - reset the prepended item count.\n    firstMessageOnFirstLoadedPage.current = currentFirstMessage;\n    previousNumItemsPrepended.current = 0;\n    return 0;\n    // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)\n    // that's why the second dependency is necessary\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [firstRealMessageIndex, messages, messages?.length]);\n\n  return numItemsPrepended;\n}\n"],"mappings":";;;AAIA,IAAM,iCAAiC;CACrC,QAAQ;CACR,SAAS;AACX;AAEA,SAAgB,0BACd,UACA,kBACA;CACA,MAAM,wBAAwB,mBAAmB,IAAI;CACrD,MAAM,gCAAgC,OAAwB,KAAA,CAAS;CACvE,MAAM,wCAAwC,OAAwB,KAAA,CAAS;CAC/E,MAAM,4BAA4B,OAAO,CAAC;CAiE1C,OA/D0B,cAAc;EACtC,IAAI,CAAC,YAAY,CAAC,SAAS,QAAQ;GACjC,0BAA0B,UAAU;GACpC,OAAO;EACT;EAEA,MAAM,sBAAsB,WAAW;EAEvC,MAAM,gBACJ,qBAAqB,OAAO,sCAAsC,SAAS;EAa7E,MAAM,4BAA4B,eAAe,mBAAmB,IAChE,oBAAoB,SACpB,KAAA;EACJ,MAAM,6CAA6C,CAAC,EAClD,6BACA,+BAA+B;EAGjC,IAAI,iBAAiB,4CACnB,OAAO,0BAA0B;EAGnC,IAAI,CAAC,8BAA8B,SACjC,8BAA8B,UAAU;EAE1C,sCAAsC,UAAU;EAGhD,KACE,IAAI,wBAAwB,0BAA0B,SACtD,wBAAwB,SAAS,QACjC,yBAAyB,GAKzB,IAFE,SAAS,sBAAsB,CAAC,OAAO,8BAA8B,SAAS,IAE3C;GACnC,0BAA0B,UAAU,wBAAwB;GAC5D,OAAO,0BAA0B;EACnC;EAIF,8BAA8B,UAAU;EACxC,0BAA0B,UAAU;EACpC,OAAO;CAIT,GAAG;EAAC;EAAuB;EAAU,UAAU;CAAM,CAE9C;AACT"}

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.mjs

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
+var useScrollToBottomOnNewMessage = ({ messages, scrollToBottom, scrollToLatestMessageOnFocus }) => {
+	const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
+	const scrollToBottomIfConfigured = useRef(void 0);
+	scrollToBottomIfConfigured.current = (event) => {
+		if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) return;
+		setTimeout(scrollToBottom, 100);
+	};
+	useEffect(() => {
+		setNewMessagesReceivedInBackground(true);
+	}, [messages]);
+	useEffect(() => {
+		const handleFocus = (event) => {
+			scrollToBottomIfConfigured.current?.(event);
+		};
+		const handleBlur = () => {
+			setNewMessagesReceivedInBackground(false);
+		};
+		if (typeof window !== "undefined") {
+			window.addEventListener("focus", handleFocus);
+			window.addEventListener("blur", handleBlur);
+		}
+		return () => {
+			window.removeEventListener("focus", handleFocus);
+			window.removeEventListener("blur", handleBlur);
+		};
+	}, []);
+};
+//#endregion
+export { useScrollToBottomOnNewMessage };
+
+//# sourceMappingURL=useScrollToBottomOnNewMessage.mjs.map

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollToBottomOnNewMessage.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { RenderedMessage } from '../../utils';\n\ntype UseScrollToBottomOnNewMessageParams = {\n  scrollToBottom: () => void;\n  messages?: RenderedMessage[];\n  /** When `true`, the list will scroll to the latest message when the window regains focus */\n  scrollToLatestMessageOnFocus?: boolean;\n};\n\nexport const useScrollToBottomOnNewMessage = ({\n  messages,\n  scrollToBottom,\n  scrollToLatestMessageOnFocus,\n}: UseScrollToBottomOnNewMessageParams) => {\n  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] =\n    useState(false);\n\n  const scrollToBottomIfConfigured = useRef<(e: Event) => void>(undefined);\n\n  scrollToBottomIfConfigured.current = (event: Event) => {\n    if (\n      !scrollToLatestMessageOnFocus ||\n      !newMessagesReceivedInBackground ||\n      event.target !== window\n    ) {\n      return;\n    }\n\n    setTimeout(scrollToBottom, 100);\n  };\n\n  useEffect(() => {\n    setNewMessagesReceivedInBackground(true);\n  }, [messages]);\n\n  useEffect(() => {\n    const handleFocus = (event: Event) => {\n      scrollToBottomIfConfigured.current?.(event);\n    };\n\n    const handleBlur = () => {\n      setNewMessagesReceivedInBackground(false);\n    };\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('focus', handleFocus);\n      window.addEventListener('blur', handleBlur);\n    }\n\n    return () => {\n      window.removeEventListener('focus', handleFocus);\n      window.removeEventListener('blur', handleBlur);\n    };\n  }, []);\n};\n"],"mappings":";;AAUA,IAAa,iCAAiC,EAC5C,UACA,gBACA,mCACyC;CACzC,MAAM,CAAC,iCAAiC,sCACtC,SAAS,KAAK;CAEhB,MAAM,6BAA6B,OAA2B,KAAA,CAAS;CAEvE,2BAA2B,WAAW,UAAiB;EACrD,IACE,CAAC,gCACD,CAAC,mCACD,MAAM,WAAW,QAEjB;EAGF,WAAW,gBAAgB,GAAG;CAChC;CAEA,gBAAgB;EACd,mCAAmC,IAAI;CACzC,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACd,MAAM,eAAe,UAAiB;GACpC,2BAA2B,UAAU,KAAK;EAC5C;EAEA,MAAM,mBAAmB;GACvB,mCAAmC,KAAK;EAC1C;EAEA,IAAI,OAAO,WAAW,aAAa;GACjC,OAAO,iBAAiB,SAAS,WAAW;GAC5C,OAAO,iBAAiB,QAAQ,UAAU;EAC5C;EAEA,aAAa;GACX,OAAO,oBAAoB,SAAS,WAAW;GAC/C,OAAO,oBAAoB,QAAQ,UAAU;EAC/C;CACF,GAAG,CAAC,CAAC;AACP"}

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.mjs

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
+function useShouldForceScrollToBottom(messages, currentUserId) {
+	const lastFocusedOwnMessage = useRef("");
+	const initialFocusRegistered = useRef(false);
+	function recheckForNewOwnMessage() {
+		if (messages && messages.length > 0) {
+			const lastMessage = messages[messages.length - 1];
+			if (lastMessage.user?.id === currentUserId && lastFocusedOwnMessage.current !== lastMessage.id) {
+				lastFocusedOwnMessage.current = lastMessage.id;
+				return true;
+			}
+		}
+		return false;
+	}
+	useEffect(() => {
+		if (messages && messages.length && !initialFocusRegistered.current) {
+			initialFocusRegistered.current = true;
+			recheckForNewOwnMessage();
+		}
+	}, [messages, messages?.length]);
+	return recheckForNewOwnMessage;
+}
+//#endregion
+export { useShouldForceScrollToBottom };
+
+//# sourceMappingURL=useShouldForceScrollToBottom.mjs.map

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShouldForceScrollToBottom.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { RenderedMessage } from '../../utils';\nimport type { LocalMessage } from 'stream-chat';\n\nexport function useShouldForceScrollToBottom(\n  messages: RenderedMessage[],\n  currentUserId?: string,\n) {\n  const lastFocusedOwnMessage = useRef('');\n  const initialFocusRegistered = useRef(false);\n\n  function recheckForNewOwnMessage() {\n    if (messages && messages.length > 0) {\n      const lastMessage = messages[messages.length - 1];\n\n      if (\n        (lastMessage as LocalMessage).user?.id === currentUserId &&\n        lastFocusedOwnMessage.current !== lastMessage.id\n      ) {\n        lastFocusedOwnMessage.current = lastMessage.id;\n        return true;\n      }\n    }\n    return false;\n  }\n\n  useEffect(() => {\n    if (messages && messages.length && !initialFocusRegistered.current) {\n      initialFocusRegistered.current = true;\n      recheckForNewOwnMessage();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messages, messages?.length]);\n\n  return recheckForNewOwnMessage;\n}\n"],"mappings":";;AAIA,SAAgB,6BACd,UACA,eACA;CACA,MAAM,wBAAwB,OAAO,EAAE;CACvC,MAAM,yBAAyB,OAAO,KAAK;CAE3C,SAAS,0BAA0B;EACjC,IAAI,YAAY,SAAS,SAAS,GAAG;GACnC,MAAM,cAAc,SAAS,SAAS,SAAS;GAE/C,IACG,YAA6B,MAAM,OAAO,iBAC3C,sBAAsB,YAAY,YAAY,IAC9C;IACA,sBAAsB,UAAU,YAAY;IAC5C,OAAO;GACT;EACF;EACA,OAAO;CACT;CAEA,gBAAgB;EACd,IAAI,YAAY,SAAS,UAAU,CAAC,uBAAuB,SAAS;GAClE,uBAAuB,UAAU;GACjC,wBAAwB;EAC1B;CAEF,GAAG,CAAC,UAAU,UAAU,MAAM,CAAC;CAE/B,OAAO;AACT"}

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.mjs

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
+/**
+* Controls the logic when an `UnreadMessagesNotification` component should be shown.
+* In virtualized message list there is no notion of being scrolled below or above `UnreadMessagesSeparator`.
+* Therefore, the `UnreadMessagesNotification` component is rendered based on timestamps.
+* If the there are unread messages in the channel and the `VirtualizedMessageList` renders
+* messages created later than the last read message in the channel, then the
+* `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being
+* scrolled below the `UnreadMessagesNotification` component.
+* @param lastRead
+* @param showAlways
+* @param unreadCount
+*/
+var useUnreadMessagesNotificationVirtualized = ({ lastRead, showAlways, unreadCount }) => {
+	const [show, setShow] = useState(false);
+	const toggleShowUnreadMessagesNotification = useCallback((renderedMessages) => {
+		if (!unreadCount) return;
+		const firstRenderedMessage = renderedMessages[0];
+		const lastRenderedMessage = renderedMessages.slice(-1)[0];
+		if (!(firstRenderedMessage && lastRenderedMessage)) return;
+		const firstRenderedMessageTime = new Date(firstRenderedMessage.created_at ?? 0).getTime();
+		const lastRenderedMessageTime = new Date(lastRenderedMessage.created_at ?? 0).getTime();
+		const lastReadTime = new Date(lastRead ?? 0).getTime();
+		const scrolledBelowSeparator = !!lastReadTime && firstRenderedMessageTime > lastReadTime;
+		setShow(showAlways ? scrolledBelowSeparator || !!lastReadTime && lastRenderedMessageTime < lastReadTime : scrolledBelowSeparator);
+	}, [
+		lastRead,
+		showAlways,
+		unreadCount
+	]);
+	useEffect(() => {
+		if (!unreadCount) setShow(false);
+	}, [unreadCount]);
+	return {
+		show,
+		toggleShowUnreadMessagesNotification
+	};
+};
+//#endregion
+export { useUnreadMessagesNotificationVirtualized };
+
+//# sourceMappingURL=useUnreadMessagesNotificationVirtualized.mjs.map

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUnreadMessagesNotificationVirtualized.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { RenderedMessage } from '../../utils';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type UseUnreadMessagesNotificationParams = {\n  showAlways: boolean;\n  unreadCount: number;\n  lastRead?: Date | null;\n};\n\n/**\n * Controls the logic when an `UnreadMessagesNotification` component should be shown.\n * In virtualized message list there is no notion of being scrolled below or above `UnreadMessagesSeparator`.\n * Therefore, the `UnreadMessagesNotification` component is rendered based on timestamps.\n * If the there are unread messages in the channel and the `VirtualizedMessageList` renders\n * messages created later than the last read message in the channel, then the\n * `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being\n * scrolled below the `UnreadMessagesNotification` component.\n * @param lastRead\n * @param showAlways\n * @param unreadCount\n */\nexport const useUnreadMessagesNotificationVirtualized = ({\n  lastRead,\n  showAlways,\n  unreadCount,\n}: UseUnreadMessagesNotificationParams) => {\n  const [show, setShow] = useState(false);\n\n  const toggleShowUnreadMessagesNotification = useCallback(\n    (renderedMessages: RenderedMessage[]) => {\n      if (!unreadCount) return;\n      const firstRenderedMessage = renderedMessages[0];\n      const lastRenderedMessage = renderedMessages.slice(-1)[0];\n      if (!(firstRenderedMessage && lastRenderedMessage)) return;\n\n      const firstRenderedMessageTime = new Date(\n        (firstRenderedMessage as LocalMessage).created_at ?? 0,\n      ).getTime();\n      const lastRenderedMessageTime = new Date(\n        (lastRenderedMessage as LocalMessage).created_at ?? 0,\n      ).getTime();\n      const lastReadTime = new Date(lastRead ?? 0).getTime();\n\n      const scrolledBelowSeparator =\n        !!lastReadTime && firstRenderedMessageTime > lastReadTime;\n      const scrolledAboveSeparator =\n        !!lastReadTime && lastRenderedMessageTime < lastReadTime;\n\n      setShow(\n        showAlways\n          ? scrolledBelowSeparator || scrolledAboveSeparator\n          : scrolledBelowSeparator,\n      );\n    },\n    [lastRead, showAlways, unreadCount],\n  );\n\n  useEffect(() => {\n    if (!unreadCount) setShow(false);\n  }, [unreadCount]);\n\n  return { show, toggleShowUnreadMessagesNotification };\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAa,4CAA4C,EACvD,UACA,YACA,kBACyC;CACzC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,uCAAuC,aAC1C,qBAAwC;EACvC,IAAI,CAAC,aAAa;EAClB,MAAM,uBAAuB,iBAAiB;EAC9C,MAAM,sBAAsB,iBAAiB,MAAM,EAAE,CAAC,CAAC;EACvD,IAAI,EAAE,wBAAwB,sBAAsB;EAEpD,MAAM,2BAA2B,IAAI,KAClC,qBAAsC,cAAc,CACvD,CAAC,CAAC,QAAQ;EACV,MAAM,0BAA0B,IAAI,KACjC,oBAAqC,cAAc,CACtD,CAAC,CAAC,QAAQ;EACV,MAAM,eAAe,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ;EAErD,MAAM,yBACJ,CAAC,CAAC,gBAAgB,2BAA2B;EAI/C,QACE,aACI,0BAJJ,CAAC,CAAC,gBAAgB,0BAA0B,eAKxC,sBACN;CACF,GACA;EAAC;EAAU;EAAY;CAAW,CACpC;CAEA,gBAAgB;EACd,IAAI,CAAC,aAAa,QAAQ,KAAK;CACjC,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAO;EAAE;EAAM;CAAqC;AACtD"}

package/dist/es/components/MessageList/hooks/useLastDeliveredData.mjs

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from "react";
+//#region src/components/MessageList/hooks/useLastDeliveredData.ts
+var useLastDeliveredData = (props) => {
+	const { channel, lastOwnMessage, messages, returnAllReadData } = props;
+	const calculateForAll = useCallback(() => messages.reduce((acc, msg) => {
+		acc[msg.id] = channel.messageReceiptsTracker.deliveredForMessage({
+			msgId: msg.id,
+			timestampMs: msg.created_at.getTime()
+		});
+		return acc;
+	}, {}), [channel, messages]);
+	const calculateForLastOwn = useCallback(() => {
+		if (!lastOwnMessage) return {};
+		return { [lastOwnMessage.id]: channel.messageReceiptsTracker.deliveredForMessage({
+			msgId: lastOwnMessage.id,
+			timestampMs: lastOwnMessage.created_at.getTime()
+		}) };
+	}, [channel, lastOwnMessage]);
+	const [deliveredTo, setDeliveredTo] = useState(returnAllReadData ? calculateForAll : calculateForLastOwn);
+	useEffect(() => {
+		if (!returnAllReadData) return;
+		setDeliveredTo(calculateForAll);
+		return channel.on("message.delivered", () => setDeliveredTo(calculateForAll)).unsubscribe;
+	}, [
+		channel,
+		calculateForAll,
+		returnAllReadData
+	]);
+	useEffect(() => {
+		if (returnAllReadData) return;
+		else setDeliveredTo(calculateForLastOwn);
+		return channel.on("message.delivered", () => setDeliveredTo(calculateForLastOwn)).unsubscribe;
+	}, [
+		channel,
+		calculateForLastOwn,
+		returnAllReadData
+	]);
+	return deliveredTo;
+};
+//#endregion
+export { useLastDeliveredData };
+
+//# sourceMappingURL=useLastDeliveredData.mjs.map

package/dist/es/components/MessageList/hooks/useLastDeliveredData.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLastDeliveredData.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastDeliveredData.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { Channel, LocalMessage, UserResponse } from 'stream-chat';\n\ntype UseLastDeliveredDataParams = {\n  channel: Channel;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nexport const useLastDeliveredData = (\n  props: UseLastDeliveredDataParams,\n): Record<string, UserResponse[]> => {\n  const { channel, lastOwnMessage, messages, returnAllReadData } = props;\n\n  const calculateForAll = useCallback(\n    () =>\n      messages.reduce(\n        (acc, msg) => {\n          acc[msg.id] = channel.messageReceiptsTracker.deliveredForMessage({\n            msgId: msg.id,\n            timestampMs: msg.created_at.getTime(),\n          });\n          return acc;\n        },\n        {} as Record<string, UserResponse[]>,\n      ),\n    [channel, messages],\n  );\n\n  const calculateForLastOwn = useCallback(() => {\n    if (!lastOwnMessage) return {};\n    return {\n      [lastOwnMessage.id]: channel.messageReceiptsTracker.deliveredForMessage({\n        msgId: lastOwnMessage.id,\n        timestampMs: lastOwnMessage.created_at.getTime(),\n      }),\n    };\n  }, [channel, lastOwnMessage]);\n\n  const [deliveredTo, setDeliveredTo] = useState<Record<string, UserResponse[]>>(\n    returnAllReadData ? calculateForAll : calculateForLastOwn,\n  );\n\n  useEffect(() => {\n    if (!returnAllReadData) return;\n    setDeliveredTo(calculateForAll);\n    return channel.on('message.delivered', () => setDeliveredTo(calculateForAll))\n      .unsubscribe;\n  }, [channel, calculateForAll, returnAllReadData]);\n\n  useEffect(() => {\n    if (returnAllReadData) return;\n    else setDeliveredTo(calculateForLastOwn);\n    return channel.on('message.delivered', () => setDeliveredTo(calculateForLastOwn))\n      .unsubscribe;\n  }, [channel, calculateForLastOwn, returnAllReadData]);\n\n  return deliveredTo;\n};\n"],"mappings":";;AAUA,IAAa,wBACX,UACmC;CACnC,MAAM,EAAE,SAAS,gBAAgB,UAAU,sBAAsB;CAEjE,MAAM,kBAAkB,kBAEpB,SAAS,QACN,KAAK,QAAQ;EACZ,IAAI,IAAI,MAAM,QAAQ,uBAAuB,oBAAoB;GAC/D,OAAO,IAAI;GACX,aAAa,IAAI,WAAW,QAAQ;EACtC,CAAC;EACD,OAAO;CACT,GACA,CAAC,CACH,GACF,CAAC,SAAS,QAAQ,CACpB;CAEA,MAAM,sBAAsB,kBAAkB;EAC5C,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,OAAO,GACJ,eAAe,KAAK,QAAQ,uBAAuB,oBAAoB;GACtE,OAAO,eAAe;GACtB,aAAa,eAAe,WAAW,QAAQ;EACjD,CAAC,EACH;CACF,GAAG,CAAC,SAAS,cAAc,CAAC;CAE5B,MAAM,CAAC,aAAa,kBAAkB,SACpC,oBAAoB,kBAAkB,mBACxC;CAEA,gBAAgB;EACd,IAAI,CAAC,mBAAmB;EACxB,eAAe,eAAe;EAC9B,OAAO,QAAQ,GAAG,2BAA2B,eAAe,eAAe,CAAC,CAAC,CAC1E;CACL,GAAG;EAAC;EAAS;EAAiB;CAAiB,CAAC;CAEhD,gBAAgB;EACd,IAAI,mBAAmB;OAClB,eAAe,mBAAmB;EACvC,OAAO,QAAQ,GAAG,2BAA2B,eAAe,mBAAmB,CAAC,CAAC,CAC9E;CACL,GAAG;EAAC;EAAS;EAAqB;CAAiB,CAAC;CAEpD,OAAO;AACT"}

package/dist/es/components/MessageList/hooks/useLastOwnMessage.mjs

@@ -0,0 +1,8 @@
+import { findReverse } from "../../../utils/findReverse.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/useLastOwnMessage.ts
+var useLastOwnMessage = ({ messages, ownUserId }) => useMemo(() => messages && findReverse(messages, (msg) => (msg.user && msg.user.id) === ownUserId), [messages, ownUserId]);
+//#endregion
+export { useLastOwnMessage };
+
+//# sourceMappingURL=useLastOwnMessage.mjs.map

package/dist/es/components/MessageList/hooks/useLastOwnMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLastOwnMessage.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastOwnMessage.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { findReverse } from '../../../utils/findReverse';\nimport type { LocalMessage } from 'stream-chat';\n\n// fixme: we should be able to retrieve last own message quickly from the LLC. Should be done when refactoring the LLC Channel state to reactive.\nexport const useLastOwnMessage = ({\n  messages,\n  ownUserId,\n}: {\n  messages?: LocalMessage[];\n  ownUserId?: string;\n}) =>\n  useMemo(\n    () =>\n      messages && findReverse(messages, (msg) => (msg.user && msg.user.id) === ownUserId),\n    [messages, ownUserId],\n  );\n"],"mappings":";;;AAKA,IAAa,qBAAqB,EAChC,UACA,gBAKA,cAEI,YAAY,YAAY,WAAW,SAAS,IAAI,QAAQ,IAAI,KAAK,QAAQ,SAAS,GACpF,CAAC,UAAU,SAAS,CACtB"}

package/dist/es/components/MessageList/hooks/useLastReadData.mjs

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/useLastReadData.ts
+var useLastReadData = (props) => {
+	const { channel, lastOwnMessage, messages, returnAllReadData } = props;
+	return useMemo(() => {
+		if (returnAllReadData) return messages.reduce((acc, msg) => {
+			acc[msg.id] = channel.messageReceiptsTracker.readersForMessage({
+				msgId: msg.id,
+				timestampMs: msg.created_at.getTime()
+			});
+			return acc;
+		}, {});
+		if (!lastOwnMessage) return {};
+		return { [lastOwnMessage.id]: channel.messageReceiptsTracker.readersForMessage({
+			msgId: lastOwnMessage.id,
+			timestampMs: lastOwnMessage.created_at.getTime()
+		}) };
+	}, [
+		channel,
+		lastOwnMessage,
+		messages,
+		returnAllReadData
+	]);
+};
+//#endregion
+export { useLastReadData };
+
+//# sourceMappingURL=useLastReadData.mjs.map

package/dist/es/components/MessageList/hooks/useLastReadData.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLastReadData.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastReadData.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Channel, LocalMessage, UserResponse } from 'stream-chat';\n\ntype UseLastReadDataParams = {\n  channel: Channel;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nexport const useLastReadData = (props: UseLastReadDataParams) => {\n  const { channel, lastOwnMessage, messages, returnAllReadData } = props;\n\n  return useMemo(() => {\n    if (returnAllReadData) {\n      return messages.reduce(\n        (acc, msg) => {\n          acc[msg.id] = channel.messageReceiptsTracker.readersForMessage({\n            msgId: msg.id,\n            timestampMs: msg.created_at.getTime(),\n          });\n          return acc;\n        },\n        {} as Record<string, UserResponse[]>,\n      );\n    }\n\n    if (!lastOwnMessage) return {};\n    return {\n      [lastOwnMessage.id]: channel.messageReceiptsTracker.readersForMessage({\n        msgId: lastOwnMessage.id,\n        timestampMs: lastOwnMessage.created_at.getTime(),\n      }),\n    };\n  }, [channel, lastOwnMessage, messages, returnAllReadData]);\n};\n"],"mappings":";;AAUA,IAAa,mBAAmB,UAAiC;CAC/D,MAAM,EAAE,SAAS,gBAAgB,UAAU,sBAAsB;CAEjE,OAAO,cAAc;EACnB,IAAI,mBACF,OAAO,SAAS,QACb,KAAK,QAAQ;GACZ,IAAI,IAAI,MAAM,QAAQ,uBAAuB,kBAAkB;IAC7D,OAAO,IAAI;IACX,aAAa,IAAI,WAAW,QAAQ;GACtC,CAAC;GACD,OAAO;EACT,GACA,CAAC,CACH;EAGF,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,OAAO,GACJ,eAAe,KAAK,QAAQ,uBAAuB,kBAAkB;GACpE,OAAO,eAAe;GACtB,aAAa,eAAe,WAAW,QAAQ;EACjD,CAAC,EACH;CACF,GAAG;EAAC;EAAS;EAAgB;EAAU;CAAiB,CAAC;AAC3D"}

package/dist/es/components/MessageList/hooks/useMarkRead.mjs

@@ -0,0 +1,75 @@
+import { useChannelActionContext } from "../../../context/ChannelActionContext.mjs";
+import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { getChannelConfig } from "../../../utils/getChannelConfig.mjs";
+import { useEffect } from "react";
+//#region src/components/MessageList/hooks/useMarkRead.ts
+var hasReadLastMessage = (channel, userId) => {
+	return channel.state.latestMessages.slice(-1)[0]?.id === channel.state.read[userId]?.last_read_message_id;
+};
+/**
+* Takes care of marking a channel read. The channel is read only if all the following applies:
+* 1. the message list is not rendered in a thread
+* 2. the message list is scrolled to the bottom
+* 3. the channel was not marked unread by the user
+* @param isMessageListScrolledToBottom
+* @param messageListIsThread
+* @param wasChannelMarkedUnread
+*/
+var useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread }) => {
+	const { client } = useChatContext("useMarkRead");
+	const { markRead, setChannelUnreadUiState } = useChannelActionContext("useMarkRead");
+	const { channel } = useChannelStateContext("useMarkRead");
+	useEffect(() => {
+		if (!(getChannelConfig(channel)?.read_events || client.options.isLocalUnreadCountEnabled)) return;
+		const shouldMarkRead = () => !document.hidden && !wasMarkedUnread && !messageListIsThread && isMessageListScrolledToBottom && client.user?.id && !hasReadLastMessage(channel, client.user.id);
+		const onVisibilityChange = () => {
+			if (shouldMarkRead()) markRead();
+		};
+		const handleMessageNew = (event) => {
+			if (!(!event.message?.parent_id || event.message?.show_in_channel)) return;
+			if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) setChannelUnreadUiState((prev) => {
+				const previousUnreadCount = prev?.unread_messages ?? 0;
+				const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+				return {
+					...prev || {},
+					last_read: prev?.last_read ?? (previousUnreadCount === 0 && previousLastMessage?.created_at ? new Date(previousLastMessage.created_at) : /* @__PURE__ */ new Date(0)),
+					unread_messages: previousUnreadCount + 1
+				};
+			});
+			else if (shouldMarkRead()) markRead();
+		};
+		channel.on("message.new", handleMessageNew);
+		document.addEventListener("visibilitychange", onVisibilityChange);
+		if (shouldMarkRead()) markRead();
+		return () => {
+			channel.off("message.new", handleMessageNew);
+			document.removeEventListener("visibilitychange", onVisibilityChange);
+		};
+	}, [
+		channel,
+		client,
+		isMessageListScrolledToBottom,
+		markRead,
+		messageListIsThread,
+		setChannelUnreadUiState,
+		wasMarkedUnread
+	]);
+};
+function getPreviousLastMessage(messages, newMessage) {
+	if (!newMessage) return;
+	let previousLastMessage;
+	for (let i = messages.length - 1; i >= 0; i--) {
+		const msg = messages[i];
+		if (!msg?.id) break;
+		if (msg.id !== newMessage.id) {
+			previousLastMessage = msg;
+			break;
+		}
+	}
+	return previousLastMessage;
+}
+//#endregion
+export { useMarkRead };
+
+//# sourceMappingURL=useMarkRead.mjs.map

package/dist/es/components/MessageList/hooks/useMarkRead.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMarkRead.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useMarkRead.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n  useChannelActionContext,\n  useChannelStateContext,\n  useChatContext,\n} from '../../../context';\nimport type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';\nimport { getChannelConfig } from '../../../utils/getChannelConfig';\n\nconst hasReadLastMessage = (channel: Channel, userId: string) => {\n  const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;\n  const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;\n  return latestMessageIdInChannel === lastReadMessageIdServer;\n};\n\ntype UseMarkReadParams = {\n  isMessageListScrolledToBottom: boolean;\n  messageListIsThread: boolean;\n  wasMarkedUnread?: boolean;\n};\n\n/**\n * Takes care of marking a channel read. The channel is read only if all the following applies:\n * 1. the message list is not rendered in a thread\n * 2. the message list is scrolled to the bottom\n * 3. the channel was not marked unread by the user\n * @param isMessageListScrolledToBottom\n * @param messageListIsThread\n * @param wasChannelMarkedUnread\n */\nexport const useMarkRead = ({\n  isMessageListScrolledToBottom,\n  messageListIsThread,\n  wasMarkedUnread,\n}: UseMarkReadParams) => {\n  const { client } = useChatContext('useMarkRead');\n  const { markRead, setChannelUnreadUiState } = useChannelActionContext('useMarkRead');\n  const { channel } = useChannelStateContext('useMarkRead');\n\n  useEffect(() => {\n    const unreadNotificationSupported =\n      getChannelConfig(channel)?.read_events || client.options.isLocalUnreadCountEnabled;\n\n    if (!unreadNotificationSupported) return;\n\n    const shouldMarkRead = () =>\n      !document.hidden &&\n      !wasMarkedUnread &&\n      !messageListIsThread &&\n      isMessageListScrolledToBottom &&\n      client.user?.id &&\n      !hasReadLastMessage(channel, client.user.id);\n\n    const onVisibilityChange = () => {\n      if (shouldMarkRead()) markRead();\n    };\n\n    const handleMessageNew = (event: Event) => {\n      const mainChannelUpdated =\n        !event.message?.parent_id || event.message?.show_in_channel;\n\n      // Thread replies that are not shown in the channel must not affect the\n      // main channel's unread UI state (count / notification).\n      if (!mainChannelUpdated) return;\n\n      if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) {\n        setChannelUnreadUiState((prev) => {\n          const previousUnreadCount = prev?.unread_messages ?? 0;\n          const previousLastMessage = getPreviousLastMessage(\n            channel.state.messages,\n            event.message,\n          );\n          return {\n            ...(prev || {}),\n            last_read:\n              prev?.last_read ??\n              (previousUnreadCount === 0 && previousLastMessage?.created_at\n                ? new Date(previousLastMessage.created_at)\n                : new Date(0)), // not having information about the last read message means the whole channel is unread,\n            unread_messages: previousUnreadCount + 1,\n          };\n        });\n      } else if (shouldMarkRead()) {\n        markRead();\n      }\n    };\n\n    channel.on('message.new', handleMessageNew);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    if (shouldMarkRead()) {\n      markRead();\n    }\n\n    return () => {\n      channel.off('message.new', handleMessageNew);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n    };\n  }, [\n    channel,\n    client,\n    isMessageListScrolledToBottom,\n    markRead,\n    messageListIsThread,\n    setChannelUnreadUiState,\n    wasMarkedUnread,\n  ]);\n};\n\nfunction getPreviousLastMessage(messages: LocalMessage[], newMessage?: MessageResponse) {\n  if (!newMessage) return;\n  let previousLastMessage;\n  for (let i = messages.length - 1; i >= 0; i--) {\n    const msg = messages[i];\n    if (!msg?.id) break;\n    if (msg.id !== newMessage.id) {\n      previousLastMessage = msg;\n      break;\n    }\n  }\n  return previousLastMessage;\n}\n"],"mappings":";;;;;;AASA,IAAM,sBAAsB,SAAkB,WAAmB;CAG/D,OAFiC,QAAQ,MAAM,eAAe,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,OAC5C,QAAQ,MAAM,KAAK,OAAO,EAAE;AAE9D;;;;;;;;;;AAiBA,IAAa,eAAe,EAC1B,+BACA,qBACA,sBACuB;CACvB,MAAM,EAAE,WAAW,eAAe,aAAa;CAC/C,MAAM,EAAE,UAAU,4BAA4B,wBAAwB,aAAa;CACnF,MAAM,EAAE,YAAY,uBAAuB,aAAa;CAExD,gBAAgB;EAId,IAAI,EAFF,iBAAiB,OAAO,CAAC,EAAE,eAAe,OAAO,QAAQ,4BAEzB;EAElC,MAAM,uBACJ,CAAC,SAAS,UACV,CAAC,mBACD,CAAC,uBACD,iCACA,OAAO,MAAM,MACb,CAAC,mBAAmB,SAAS,OAAO,KAAK,EAAE;EAE7C,MAAM,2BAA2B;GAC/B,IAAI,eAAe,GAAG,SAAS;EACjC;EAEA,MAAM,oBAAoB,UAAiB;GAMzC,IAAI,EAJF,CAAC,MAAM,SAAS,aAAa,MAAM,SAAS,kBAIrB;GAEzB,IAAI,CAAC,iCAAiC,mBAAmB,SAAS,QAChE,yBAAyB,SAAS;IAChC,MAAM,sBAAsB,MAAM,mBAAmB;IACrD,MAAM,sBAAsB,uBAC1B,QAAQ,MAAM,UACd,MAAM,OACR;IACA,OAAO;KACL,GAAI,QAAQ,CAAC;KACb,WACE,MAAM,cACL,wBAAwB,KAAK,qBAAqB,aAC/C,IAAI,KAAK,oBAAoB,UAAU,oBACvC,IAAI,KAAK,CAAC;KAChB,iBAAiB,sBAAsB;IACzC;GACF,CAAC;QACI,IAAI,eAAe,GACxB,SAAS;EAEb;EAEA,QAAQ,GAAG,eAAe,gBAAgB;EAC1C,SAAS,iBAAiB,oBAAoB,kBAAkB;EAEhE,IAAI,eAAe,GACjB,SAAS;EAGX,aAAa;GACX,QAAQ,IAAI,eAAe,gBAAgB;GAC3C,SAAS,oBAAoB,oBAAoB,kBAAkB;EACrE;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH;AAEA,SAAS,uBAAuB,UAA0B,YAA8B;CACtF,IAAI,CAAC,YAAY;CACjB,IAAI;CACJ,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK;EAC7C,MAAM,MAAM,SAAS;EACrB,IAAI,CAAC,KAAK,IAAI;EACd,IAAI,IAAI,OAAO,WAAW,IAAI;GAC5B,sBAAsB;GACtB;EACF;CACF;CACA,OAAO;AACT"}

package/dist/es/components/MessageList/hooks/useReducedMotionPreference.mjs

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+//#region src/components/MessageList/hooks/useReducedMotionPreference.ts
+var REDUCED_MOTION_MEDIA_QUERY = "(prefers-reduced-motion: reduce)";
+var getReducedMotionSnapshot = () => {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia(REDUCED_MOTION_MEDIA_QUERY).matches;
+};
+var subscribeToReducedMotion = (onStoreChange) => {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => void 0;
+	const mediaQueryList = window.matchMedia(REDUCED_MOTION_MEDIA_QUERY);
+	const handleChange = () => onStoreChange();
+	if (typeof mediaQueryList.addEventListener === "function") {
+		mediaQueryList.addEventListener("change", handleChange);
+		return () => mediaQueryList.removeEventListener("change", handleChange);
+	}
+	mediaQueryList.addListener(handleChange);
+	return () => mediaQueryList.removeListener(handleChange);
+};
+var useReducedMotionPreference = () => useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, () => false);
+//#endregion
+export { useReducedMotionPreference };
+
+//# sourceMappingURL=useReducedMotionPreference.mjs.map

package/dist/es/components/MessageList/hooks/useReducedMotionPreference.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotionPreference.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useReducedMotionPreference.ts"],"sourcesContent":["import { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nconst REDUCED_MOTION_MEDIA_QUERY = '(prefers-reduced-motion: reduce)';\n\nconst getReducedMotionSnapshot = () => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return false;\n  }\n\n  return window.matchMedia(REDUCED_MOTION_MEDIA_QUERY).matches;\n};\n\nconst subscribeToReducedMotion = (onStoreChange: () => void) => {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return () => undefined;\n  }\n\n  const mediaQueryList = window.matchMedia(REDUCED_MOTION_MEDIA_QUERY);\n  const handleChange = () => onStoreChange();\n\n  if (typeof mediaQueryList.addEventListener === 'function') {\n    mediaQueryList.addEventListener('change', handleChange);\n    return () => mediaQueryList.removeEventListener('change', handleChange);\n  }\n\n  mediaQueryList.addListener(handleChange);\n  return () => mediaQueryList.removeListener(handleChange);\n};\n\nexport const useReducedMotionPreference = () =>\n  useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, () => false);\n"],"mappings":";;AAEA,IAAM,6BAA6B;AAEnC,IAAM,iCAAiC;CACrC,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,OAAO;CAGT,OAAO,OAAO,WAAW,0BAA0B,CAAC,CAAC;AACvD;AAEA,IAAM,4BAA4B,kBAA8B;CAC9D,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,aAAa,KAAA;CAGf,MAAM,iBAAiB,OAAO,WAAW,0BAA0B;CACnE,MAAM,qBAAqB,cAAc;CAEzC,IAAI,OAAO,eAAe,qBAAqB,YAAY;EACzD,eAAe,iBAAiB,UAAU,YAAY;EACtD,aAAa,eAAe,oBAAoB,UAAU,YAAY;CACxE;CAEA,eAAe,YAAY,YAAY;CACvC,aAAa,eAAe,eAAe,YAAY;AACzD;AAEA,IAAa,mCACX,qBAAqB,0BAA0B,gCAAgC,KAAK"}

package/dist/es/components/MessageList/renderMessages.mjs

@@ -0,0 +1,76 @@
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
+import { Message } from "../Message/Message.mjs";
+import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from "./utils.mjs";
+import { UnreadMessagesSeparator } from "./UnreadMessagesSeparator.mjs";
+import { EventComponent } from "../EventComponent/EventComponent.mjs";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageList/renderMessages.tsx
+function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastOwnMessage, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownMessagesDeliveredToOthers, readData, sharedMessageProps: messageProps }) {
+	const { DateSeparator: DateSeparator$1 = DateSeparator, HeaderComponent, MessageListItem = "li", MessageSystem = EventComponent, UnreadMessagesSeparator: UnreadMessagesSeparator$1 = UnreadMessagesSeparator } = components;
+	const renderedMessages = [];
+	let firstMessage;
+	let previousMessage = void 0;
+	for (let index = 0; index < messages.length; index++) {
+		const message = messages[index];
+		if (isDateSeparatorMessage(message)) renderedMessages.push(/* @__PURE__ */ jsx(MessageListItem, {
+			"data-index": index,
+			children: /* @__PURE__ */ jsx(DateSeparator$1, {
+				date: message.date,
+				formatDate: messageProps.formatDate,
+				unread: message.unread
+			})
+		}, `${message.date.toISOString()}-i`));
+		else if (isIntroMessage(message)) {
+			if (HeaderComponent) renderedMessages.push(/* @__PURE__ */ jsx(MessageListItem, {
+				"data-index": index,
+				children: /* @__PURE__ */ jsx(HeaderComponent, {})
+			}, "intro"));
+		} else if (message.type === "system") renderedMessages.push(/* @__PURE__ */ jsx(MessageListItem, {
+			"data-index": index,
+			"data-message-id": message.id,
+			children: /* @__PURE__ */ jsx(MessageSystem, {
+				message,
+				unsafeHTML: messageProps.unsafeHTML
+			})
+		}, message.id || message.created_at.toISOString()));
+		else {
+			if (!firstMessage) firstMessage = message;
+			const groupStyles = messageGroupStyles[message.id] || "";
+			const messageClass = customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
+			const isFirstUnreadMessage = getIsFirstUnreadMessage({
+				firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
+				isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,
+				lastReadDate: channelUnreadUiState?.last_read,
+				lastReadMessageId: channelUnreadUiState?.last_read_message_id,
+				message,
+				previousMessage,
+				unreadMessageCount: channelUnreadUiState?.unread_messages
+			});
+			renderedMessages.push(/* @__PURE__ */ jsxs(Fragment, { children: [isFirstUnreadMessage && UnreadMessagesSeparator$1 && /* @__PURE__ */ jsx(MessageListItem, {
+				className: "str-chat__li str-chat__unread-messages-separator-wrapper",
+				children: /* @__PURE__ */ jsx(UnreadMessagesSeparator$1, { unreadCount: channelUnreadUiState?.unread_messages })
+			}), /* @__PURE__ */ jsx(MessageListItem, {
+				className: messageClass,
+				"data-index": index,
+				"data-message-id": message.id,
+				"data-testid": messageClass,
+				children: /* @__PURE__ */ jsx(Message, {
+					deliveredTo: ownMessagesDeliveredToOthers[message.id] || [],
+					groupStyles: [groupStyles],
+					lastOwnMessage,
+					lastReceivedId,
+					message,
+					readBy: readData[message.id] || [],
+					...messageProps
+				})
+			})] }, message.id || message.created_at.toISOString()));
+			previousMessage = message;
+		}
+	}
+	return renderedMessages;
+}
+//#endregion
+export { defaultRenderMessages };
+
+//# sourceMappingURL=renderMessages.mjs.map

package/dist/es/components/MessageList/renderMessages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderMessages.mjs","names":[],"sources":["../../../../src/components/MessageList/renderMessages.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { Fragment } from 'react';\nimport type { GroupStyle, RenderedMessage } from './utils';\nimport { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';\nimport type { MessageProps } from '../Message';\nimport { Message } from '../Message';\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { EventComponent as DefaultMessageSystem } from '../EventComponent';\nimport { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';\nimport type { LocalMessage, UserResponse } from 'stream-chat';\nimport type { ComponentContextValue, CustomClasses } from '../../context';\nimport type { ChannelUnreadUiState } from '../../types';\n\nexport interface RenderMessagesOptions {\n  components: ComponentContextValue;\n  lastReceivedMessageId: string | null;\n  messageGroupStyles: Record<string, GroupStyle>;\n  messages: Array<RenderedMessage>;\n  ownMessagesDeliveredToOthers: Record<string, UserResponse[]>;\n  /**\n   * Object mapping message IDs of own messages to the users who read those messages.\n   */\n  readData: Record<string, Array<UserResponse>>;\n  /**\n   * Props forwarded to the Message component.\n   */\n  sharedMessageProps: SharedMessageProps;\n  /** Latest own message in currently displayed message set. */\n  lastOwnMessage?: LocalMessage;\n  /**\n   * Current user's channel read state used to render components reflecting unread state.\n   * It does not reflect the back-end state if a channel is marked read on mount.\n   * This is in order to keep the unread UI when an unread channel is open.\n   */\n  channelUnreadUiState?: ChannelUnreadUiState;\n  customClasses?: CustomClasses;\n}\n\nexport type SharedMessageProps = Omit<MessageProps, MessagePropsToOmit>;\n\nexport type MessageRenderer = (options: RenderMessagesOptions) => Array<ReactNode>;\n\ntype MessagePropsToOmit =\n  | 'channel'\n  | 'deliveredTo'\n  | 'groupStyles'\n  | 'initialMessage'\n  | 'lastReceivedId'\n  | 'message'\n  | 'readBy';\n\nexport function defaultRenderMessages({\n  channelUnreadUiState,\n  components,\n  customClasses,\n  lastOwnMessage,\n  lastReceivedMessageId: lastReceivedId,\n  messageGroupStyles,\n  messages,\n  ownMessagesDeliveredToOthers,\n  readData,\n  sharedMessageProps: messageProps,\n}: RenderMessagesOptions) {\n  const {\n    DateSeparator = DefaultDateSeparator,\n    HeaderComponent,\n    MessageListItem = 'li',\n    MessageSystem = DefaultMessageSystem,\n    UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,\n  } = components;\n\n  const renderedMessages = [];\n  let firstMessage;\n  let previousMessage = undefined;\n  for (let index = 0; index < messages.length; index++) {\n    const message = messages[index];\n    if (isDateSeparatorMessage(message)) {\n      renderedMessages.push(\n        <MessageListItem data-index={index} key={`${message.date.toISOString()}-i`}>\n          <DateSeparator\n            date={message.date}\n            formatDate={messageProps.formatDate}\n            unread={message.unread}\n          />\n        </MessageListItem>,\n      );\n    } else if (isIntroMessage(message)) {\n      if (HeaderComponent) {\n        renderedMessages.push(\n          <MessageListItem data-index={index} key='intro'>\n            <HeaderComponent />\n          </MessageListItem>,\n        );\n      }\n    } else if (message.type === 'system') {\n      renderedMessages.push(\n        <MessageListItem\n          data-index={index}\n          data-message-id={message.id}\n          key={message.id || message.created_at.toISOString()}\n        >\n          <MessageSystem message={message} unsafeHTML={messageProps.unsafeHTML} />\n        </MessageListItem>,\n      );\n    } else {\n      if (!firstMessage) {\n        firstMessage = message;\n      }\n      const groupStyles: GroupStyle = messageGroupStyles[message.id] || '';\n      const messageClass =\n        customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;\n\n      const isFirstUnreadMessage = getIsFirstUnreadMessage({\n        firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,\n        isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,\n        lastReadDate: channelUnreadUiState?.last_read,\n        lastReadMessageId: channelUnreadUiState?.last_read_message_id,\n        message,\n        previousMessage,\n        unreadMessageCount: channelUnreadUiState?.unread_messages,\n      });\n\n      renderedMessages.push(\n        <Fragment key={message.id || message.created_at.toISOString()}>\n          {isFirstUnreadMessage && UnreadMessagesSeparator && (\n            <MessageListItem className='str-chat__li str-chat__unread-messages-separator-wrapper'>\n              <UnreadMessagesSeparator\n                unreadCount={channelUnreadUiState?.unread_messages}\n              />\n            </MessageListItem>\n          )}\n          <MessageListItem\n            className={messageClass}\n            data-index={index}\n            data-message-id={message.id}\n            data-testid={messageClass}\n          >\n            <Message\n              deliveredTo={ownMessagesDeliveredToOthers[message.id] || []}\n              groupStyles={[groupStyles]} /* TODO: convert to simple string */\n              lastOwnMessage={lastOwnMessage}\n              lastReceivedId={lastReceivedId}\n              message={message}\n              readBy={readData[message.id] || []}\n              {...messageProps}\n            />\n          </MessageListItem>\n        </Fragment>,\n      );\n      previousMessage = message;\n    }\n  }\n  return renderedMessages;\n}\n"],"mappings":";;;;;;;;AAmDA,SAAgB,sBAAsB,EACpC,sBACA,YACA,eACA,gBACA,uBAAuB,gBACvB,oBACA,UACA,8BACA,UACA,oBAAoB,gBACI;CACxB,MAAM,EACJ,eAAA,kBAAgB,eAChB,iBACA,kBAAkB,MAClB,gBAAgB,gBAChB,yBAAA,4BAA0B,4BACxB;CAEJ,MAAM,mBAAmB,CAAC;CAC1B,IAAI;CACJ,IAAI,kBAAkB,KAAA;CACtB,KAAK,IAAI,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS;EACpD,MAAM,UAAU,SAAS;EACzB,IAAI,uBAAuB,OAAO,GAChC,iBAAiB,KACf,oBAAC,iBAAD;GAAiB,cAAY;aAC3B,oBAAC,iBAAD;IACE,MAAM,QAAQ;IACd,YAAY,aAAa;IACzB,QAAQ,QAAQ;GACjB,CAAA;EACc,GANwB,GAAG,QAAQ,KAAK,YAAY,EAAE,GAMtD,CACnB;OACK,IAAI,eAAe,OAAO;OAC3B,iBACF,iBAAiB,KACf,oBAAC,iBAAD;IAAiB,cAAY;cAC3B,oBAAC,iBAAD,CAAkB,CAAA;GACH,GAFuB,OAEvB,CACnB;EAAA,OAEG,IAAI,QAAQ,SAAS,UAC1B,iBAAiB,KACf,oBAAC,iBAAD;GACE,cAAY;GACZ,mBAAiB,QAAQ;aAGzB,oBAAC,eAAD;IAAwB;IAAS,YAAY,aAAa;GAAa,CAAA;EACxD,GAHV,QAAQ,MAAM,QAAQ,WAAW,YAAY,CAGnC,CACnB;OACK;GACL,IAAI,CAAC,cACH,eAAe;GAEjB,MAAM,cAA0B,mBAAmB,QAAQ,OAAO;GAClE,MAAM,eACJ,eAAe,WAAW,8BAA8B;GAE1D,MAAM,uBAAuB,wBAAwB;IACnD,sBAAsB,sBAAsB;IAC5C,gBAAgB,CAAC,CAAC,cAAc,MAAM,aAAa,OAAO,QAAQ;IAClE,cAAc,sBAAsB;IACpC,mBAAmB,sBAAsB;IACzC;IACA;IACA,oBAAoB,sBAAsB;GAC5C,CAAC;GAED,iBAAiB,KACf,qBAAC,UAAD,EAAA,UAAA,CACG,wBAAwB,6BACvB,oBAAC,iBAAD;IAAiB,WAAU;cACzB,oBAAC,2BAAD,EACE,aAAa,sBAAsB,gBACpC,CAAA;GACc,CAAA,GAEnB,oBAAC,iBAAD;IACE,WAAW;IACX,cAAY;IACZ,mBAAiB,QAAQ;IACzB,eAAa;cAEb,oBAAC,SAAD;KACE,aAAa,6BAA6B,QAAQ,OAAO,CAAC;KAC1D,aAAa,CAAC,WAAW;KACT;KACA;KACP;KACT,QAAQ,SAAS,QAAQ,OAAO,CAAC;KACjC,GAAI;IACL,CAAA;GACc,CAAA,CACT,EAAA,GAxBK,QAAQ,MAAM,QAAQ,WAAW,YAAY,CAwBlD,CACZ;GACA,kBAAkB;EACpB;CACF;CACA,OAAO;AACT"}

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

@@ -0,0 +1,155 @@
+import { isDate } from "../../i18n/utils.mjs";
+import { isMessageEdited } from "../Message/utils.mjs";
+import { CUSTOM_MESSAGE_TYPE } from "../../constants/messageTypes.mjs";
+import { nanoid } from "nanoid";
+//#region src/components/MessageList/utils.ts
+/**
+* processMessages - Transform the input message list according to config parameters
+*
+* Inserts date separators btw. messages created on different dates or before unread incoming messages. By default:
+* - enabled in main message list
+* - disabled in virtualized message list
+* - disabled in thread
+*
+* Allows to filter out deleted messages, contolled by hideDeletedMessages param. This is disabled by default.
+*
+* Sets Giphy preview message for VirtualizedMessageList
+*
+* The only required params are messages and userId, the rest are config params:
+*
+* @return {LocalMessage[]} Transformed list of messages
+*/
+var processMessages = (params) => {
+	const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;
+	const { enableDateSeparator, hideDeletedMessages, hideNewMessageSeparator, lastRead, userId } = context;
+	let unread = false;
+	let ephemeralMessagePresent = false;
+	let lastDateSeparator;
+	const newMessages = [];
+	for (let i = 0; i < messages.length; i += 1) {
+		const message = messages[i];
+		if (hideDeletedMessages && message.type === "deleted") continue;
+		if (setGiphyPreviewMessage && message.type === "ephemeral" && message.command === "giphy") {
+			ephemeralMessagePresent = true;
+			setGiphyPreviewMessage(message);
+			continue;
+		}
+		const changes = [];
+		const messageDate = message.created_at && isDate(message.created_at) && message.created_at.toDateString() || "";
+		const previousMessage = messages[i - 1];
+		let prevMessageDate = messageDate;
+		if (enableDateSeparator && previousMessage?.created_at && isDate(previousMessage.created_at)) prevMessageDate = previousMessage.created_at.toDateString();
+		if (!unread && !hideNewMessageSeparator) {
+			unread = lastRead && message.created_at && new Date(lastRead) < message.created_at || false;
+			if (enableDateSeparator && unread && message.user?.id !== userId) changes.push({
+				customType: CUSTOM_MESSAGE_TYPE.date,
+				date: message.created_at,
+				id: makeDateMessageId(message.created_at),
+				unread
+			});
+		}
+		if (enableDateSeparator && (i === 0 || messageDate !== prevMessageDate || hideDeletedMessages && previousMessage?.type === "deleted" && lastDateSeparator !== messageDate) && !isDateSeparatorMessage(changes[changes.length - 1])) {
+			lastDateSeparator = messageDate;
+			changes.push({
+				customType: CUSTOM_MESSAGE_TYPE.date,
+				date: message.created_at,
+				id: makeDateMessageId(message.created_at)
+			}, message);
+		} else changes.push(message);
+		newMessages.push(...reviewProcessedMessage?.({
+			changes,
+			context,
+			index: i,
+			messages,
+			processedMessages: newMessages
+		}) || changes);
+	}
+	if (setGiphyPreviewMessage && !ephemeralMessagePresent) setGiphyPreviewMessage(void 0);
+	return newMessages;
+};
+var makeIntroMessage = () => ({
+	customType: CUSTOM_MESSAGE_TYPE.intro,
+	id: nanoid()
+});
+var makeDateMessageId = (date) => {
+	let idSuffix;
+	try {
+		idSuffix = !date ? nanoid() : date instanceof Date ? date.toISOString() : date;
+	} catch (e) {
+		idSuffix = nanoid();
+	}
+	return `${CUSTOM_MESSAGE_TYPE.date}-${idSuffix}`;
+};
+var getLastReceived = (messages) => {
+	for (let i = messages.length - 1; i > 0; i -= 1) if (messages[i].status === "received") return messages[i].id;
+	return null;
+};
+var insertIntro = (messages, headerPosition) => {
+	const newMessages = messages;
+	const intro = makeIntroMessage();
+	if (!headerPosition) {
+		newMessages.unshift(intro);
+		return newMessages;
+	}
+	if (!newMessages.length) {
+		newMessages.unshift(intro);
+		return newMessages;
+	}
+	for (let i = 0; i < messages.length; i += 1) {
+		const messageTime = isDate(messages[i].created_at) ? messages[i].created_at.getTime() : null;
+		const nextMessageTime = isDate(messages[i + 1].created_at) ? messages[i + 1].created_at.getTime() : null;
+		if (messageTime && messageTime < headerPosition) if (nextMessageTime && nextMessageTime < headerPosition) {
+			if (messages[i + 1] && isDateSeparatorMessage(messages[i + 1])) continue;
+			if (!nextMessageTime) {
+				newMessages.push(intro);
+				return newMessages;
+			}
+		} else {
+			newMessages.splice(i + 1, 0, intro);
+			return newMessages;
+		}
+	}
+	return newMessages;
+};
+var isNonEmptyRecord = (record) => {
+	for (const key in record) if (Object.prototype.hasOwnProperty.call(record, key)) return true;
+	return false;
+};
+var getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser, maxTimeBetweenGroupedMessages) => {
+	if (isDateSeparatorMessage(message) || isIntroMessage(message)) return "";
+	if (noGroupByUser || message.attachments?.length !== 0) return "single";
+	const isTopMessage = !previousMessage || isIntroMessage(previousMessage) || isDateSeparatorMessage(previousMessage) || previousMessage.type === "system" || previousMessage.type === "error" || previousMessage.attachments?.length !== 0 || message.user?.id !== previousMessage.user?.id || message.reaction_groups && isNonEmptyRecord(message.reaction_groups) || isMessageEdited(previousMessage) || maxTimeBetweenGroupedMessages !== void 0 && previousMessage.created_at && message.created_at && new Date(message.created_at).getTime() - new Date(previousMessage.created_at).getTime() > maxTimeBetweenGroupedMessages;
+	const isBottomMessage = !nextMessage || isIntroMessage(nextMessage) || isDateSeparatorMessage(nextMessage) || nextMessage.type === "system" || nextMessage.type === "error" || nextMessage.attachments?.length !== 0 || message.user?.id !== nextMessage.user?.id || nextMessage.reaction_groups && isNonEmptyRecord(nextMessage.reaction_groups) || isMessageEdited(message) || maxTimeBetweenGroupedMessages !== void 0 && nextMessage.created_at && message.created_at && new Date(nextMessage.created_at).getTime() - new Date(message.created_at).getTime() > maxTimeBetweenGroupedMessages;
+	if (!isTopMessage && !isBottomMessage) {
+		if (message.type === "error") return "single";
+		return "middle";
+	}
+	if (isBottomMessage) {
+		if (isTopMessage || message.type === "error") return "single";
+		return "bottom";
+	}
+	if (isTopMessage) return "top";
+	return "";
+};
+var hasMoreMessagesProbably = (returnedCountMessages, limit) => returnedCountMessages >= limit;
+function isIntroMessage(message) {
+	return message.customType === CUSTOM_MESSAGE_TYPE.intro;
+}
+function isDateSeparatorMessage(message) {
+	return message !== null && typeof message === "object" && message.customType === CUSTOM_MESSAGE_TYPE.date && isDate(message.date);
+}
+function isLocalMessage(message) {
+	return !isDateSeparatorMessage(message) && !isIntroMessage(message);
+}
+var getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount = 0 }) => {
+	if (message.parent_id) return false;
+	const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+	const lastReadTimestamp = lastReadDate?.getTime();
+	const messageIsUnread = !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;
+	const previousMessageIsLastRead = !!lastReadMessageId && lastReadMessageId === previousMessage?.id;
+	return firstUnreadMessageId === message.id || !!unreadMessageCount && messageIsUnread && (isFirstMessage || previousMessageIsLastRead);
+};
+//#endregion
+export { getGroupStyles, getIsFirstUnreadMessage, getLastReceived, hasMoreMessagesProbably, insertIntro, isDateSeparatorMessage, isIntroMessage, isLocalMessage, makeDateMessageId, makeIntroMessage, processMessages };
+
+//# sourceMappingURL=utils.mjs.map