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

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

@@ -0,0 +1,71 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/useReceiptsByMessageId.ts
+var snapshotSelector = (next) => ({
+	deliveredByMessageId: next.deliveredByMessageId,
+	readersByMessageId: next.readersByMessageId,
+	revision: next.revision
+});
+var refOf = (message) => ({
+	msgId: message.id,
+	timestamp: message.created_at
+});
+/**
+* Expands the tracker's cursor buckets into "who has this message" for each rendered message.
+*
+* The tracker stores one entry per user — the message their cursor stopped on. The question the UI
+* asks is the other way round: everyone at or past a given message. Those two differ, and reading
+* the buckets as though they were the answer is what made an older message report less than a newer
+* one, which cannot happen to a cursor that only moves forward.
+*
+* Derived in one reverse pass rather than a query per message, because each answer is the next one
+* plus that message's bucket. Messages with no cursor on them — most of them — keep the array
+* identity of the message after them, so the number of allocations follows the number of readers
+* rather than the length of the list.
+*/
+var expandBuckets = ({ buckets, messages, seed }) => {
+	const result = {};
+	const seen = new Map(seed.map((user) => [user.id, user]));
+	let current = Array.from(seen.values());
+	for (let i = messages.length - 1; i >= 0; i -= 1) {
+		const message = messages[i];
+		let grew = false;
+		for (const user of buckets[message.id] ?? []) {
+			if (seen.has(user.id)) continue;
+			seen.set(user.id, user);
+			grew = true;
+		}
+		if (grew) current = Array.from(seen.values());
+		result[message.id] = current;
+	}
+	return result;
+};
+var useReceiptsByMessageId = ({ channel, kind, lastOwnMessage, messages, returnAllReadData }) => {
+	const trackerSnapshot = useStateStore(channel.messageReceiptsTracker.snapshotStore, snapshotSelector);
+	return useMemo(() => {
+		if (!trackerSnapshot) return {};
+		const tracker = channel.messageReceiptsTracker;
+		const usersForMessage = (ref) => kind === "read" ? tracker.readersForMessage(ref) : tracker.deliveredForMessage(ref);
+		if (!returnAllReadData) {
+			if (!lastOwnMessage) return {};
+			return { [lastOwnMessage.id]: usersForMessage(refOf(lastOwnMessage)) };
+		}
+		if (!messages.length) return {};
+		return expandBuckets({
+			buckets: kind === "read" ? trackerSnapshot.readersByMessageId : trackerSnapshot.deliveredByMessageId,
+			messages,
+			seed: usersForMessage(refOf(messages[messages.length - 1]))
+		});
+	}, [
+		channel,
+		kind,
+		lastOwnMessage,
+		messages,
+		returnAllReadData,
+		trackerSnapshot
+	]);
+};
+//#endregion
+export { useReceiptsByMessageId };
+
+//# sourceMappingURL=useReceiptsByMessageId.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useReceiptsByMessageId.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useReceiptsByMessageId.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type {\n  Channel,\n  LocalMessage,\n  MessageReceiptsSnapshot,\n  MsgRef,\n  UserResponse,\n} from 'stream-chat';\n\nimport { useStateStore } from '../../../store/hooks/useStateStore';\n\nexport type ReceiptKind = 'delivered' | 'read';\n\ntype UseReceiptsByMessageIdParams = {\n  channel: Channel;\n  kind: ReceiptKind;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nconst snapshotSelector = (next: MessageReceiptsSnapshot) => ({\n  deliveredByMessageId: next.deliveredByMessageId,\n  readersByMessageId: next.readersByMessageId,\n  revision: next.revision,\n});\n\nconst refOf = (message: LocalMessage): MsgRef => ({\n  msgId: message.id,\n  timestamp: message.created_at,\n});\n\n/**\n * Expands the tracker's cursor buckets into \"who has this message\" for each rendered message.\n *\n * The tracker stores one entry per user — the message their cursor stopped on. The question the UI\n * asks is the other way round: everyone at or past a given message. Those two differ, and reading\n * the buckets as though they were the answer is what made an older message report less than a newer\n * one, which cannot happen to a cursor that only moves forward.\n *\n * Derived in one reverse pass rather than a query per message, because each answer is the next one\n * plus that message's bucket. Messages with no cursor on them — most of them — keep the array\n * identity of the message after them, so the number of allocations follows the number of readers\n * rather than the length of the list.\n */\nconst expandBuckets = ({\n  buckets,\n  messages,\n  seed,\n}: {\n  buckets: Record<string, UserResponse[]>;\n  messages: LocalMessage[];\n  seed: UserResponse[];\n}): Record<string, UserResponse[]> => {\n  const result: Record<string, UserResponse[]> = {};\n  const seen = new Map<string, UserResponse>(seed.map((user) => [user.id, user]));\n  let current = Array.from(seen.values());\n\n  for (let i = messages.length - 1; i >= 0; i -= 1) {\n    const message = messages[i];\n    let grew = false;\n\n    for (const user of buckets[message.id] ?? []) {\n      if (seen.has(user.id)) continue;\n      seen.set(user.id, user);\n      grew = true;\n    }\n\n    if (grew) current = Array.from(seen.values());\n    result[message.id] = current;\n  }\n\n  return result;\n};\n\nexport const useReceiptsByMessageId = ({\n  channel,\n  kind,\n  lastOwnMessage,\n  messages,\n  returnAllReadData,\n}: UseReceiptsByMessageIdParams): Record<string, UserResponse[]> => {\n  const trackerSnapshot = useStateStore(\n    channel.messageReceiptsTracker.snapshotStore,\n    snapshotSelector,\n  );\n\n  return useMemo(() => {\n    // Nothing has been published yet, so nobody is past anything.\n    if (!trackerSnapshot) return {};\n\n    const tracker = channel.messageReceiptsTracker;\n    const usersForMessage = (ref: MsgRef) =>\n      kind === 'read' ? tracker.readersForMessage(ref) : tracker.deliveredForMessage(ref);\n\n    if (!returnAllReadData) {\n      if (!lastOwnMessage) return {};\n      return { [lastOwnMessage.id]: usersForMessage(refOf(lastOwnMessage)) };\n    }\n\n    if (!messages.length) return {};\n\n    return expandBuckets({\n      buckets:\n        kind === 'read'\n          ? trackerSnapshot.readersByMessageId\n          : trackerSnapshot.deliveredByMessageId,\n      messages,\n      // Whoever is already past the newest rendered message; the buckets below it do the rest.\n      seed: usersForMessage(refOf(messages[messages.length - 1])),\n    });\n  }, [channel, kind, lastOwnMessage, messages, returnAllReadData, trackerSnapshot]);\n};\n"],"mappings":";;;AAqBA,IAAM,oBAAoB,UAAmC;CAC3D,sBAAsB,KAAK;CAC3B,oBAAoB,KAAK;CACzB,UAAU,KAAK;AACjB;AAEA,IAAM,SAAS,aAAmC;CAChD,OAAO,QAAQ;CACf,WAAW,QAAQ;AACrB;;;;;;;;;;;;;;AAeA,IAAM,iBAAiB,EACrB,SACA,UACA,WAKoC;CACpC,MAAM,SAAyC,CAAC;CAChD,MAAM,OAAO,IAAI,IAA0B,KAAK,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;CAC9E,IAAI,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;CAEtC,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG;EAChD,MAAM,UAAU,SAAS;EACzB,IAAI,OAAO;EAEX,KAAK,MAAM,QAAQ,QAAQ,QAAQ,OAAO,CAAC,GAAG;GAC5C,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG;GACvB,KAAK,IAAI,KAAK,IAAI,IAAI;GACtB,OAAO;EACT;EAEA,IAAI,MAAM,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;EAC5C,OAAO,QAAQ,MAAM;CACvB;CAEA,OAAO;AACT;AAEA,IAAa,0BAA0B,EACrC,SACA,MACA,gBACA,UACA,wBACkE;CAClE,MAAM,kBAAkB,cACtB,QAAQ,uBAAuB,eAC/B,gBACF;CAEA,OAAO,cAAc;EAEnB,IAAI,CAAC,iBAAiB,OAAO,CAAC;EAE9B,MAAM,UAAU,QAAQ;EACxB,MAAM,mBAAmB,QACvB,SAAS,SAAS,QAAQ,kBAAkB,GAAG,IAAI,QAAQ,oBAAoB,GAAG;EAEpF,IAAI,CAAC,mBAAmB;GACtB,IAAI,CAAC,gBAAgB,OAAO,CAAC;GAC7B,OAAO,GAAG,eAAe,KAAK,gBAAgB,MAAM,cAAc,CAAC,EAAE;EACvE;EAEA,IAAI,CAAC,SAAS,QAAQ,OAAO,CAAC;EAE9B,OAAO,cAAc;GACnB,SACE,SAAS,SACL,gBAAgB,qBAChB,gBAAgB;GACtB;GAEA,MAAM,gBAAgB,MAAM,SAAS,SAAS,SAAS,EAAE,CAAC;EAC5D,CAAC;CACH,GAAG;EAAC;EAAS;EAAM;EAAgB;EAAU;EAAmB;CAAe,CAAC;AAClF"}

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

@@ -0,0 +1,26 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useThreadContext } from "../../Threads/ThreadContext.mjs";
+import { ThreadHead } from "../../Thread/ThreadHead.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageList/hooks/useThreadHead.tsx
+var parentMessageSelector = ({ parentMessage }) => ({ parentMessage });
+/**
+* The parent message a thread list renders above its replies, or `null` outside a thread.
+*
+* The head belongs to the list rather than to `Thread` because it has to sit inside the scroll
+* container -- a sibling of the list could not be placed there. Style choices stay with the
+* caller; only this structural one is resolved from context.
+*/
+var useThreadHead = () => {
+	const thread = useThreadContext();
+	const { ThreadHead: ThreadHead$1 = ThreadHead } = useComponentContext();
+	const { parentMessage } = useStateStore(thread?.state, parentMessageSelector) ?? {};
+	if (!parentMessage) return null;
+	return /* @__PURE__ */ jsx(ThreadHead$1, { message: parentMessage }, parentMessage.id);
+};
+//#endregion
+export { useThreadHead };
+
+//# sourceMappingURL=useThreadHead.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useThreadHead.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useThreadHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ThreadHead as DefaultThreadHead } from '../../Thread/ThreadHead';\nimport { useComponentContext } from '../../../context';\nimport { useThreadContext } from '../../Threads';\nimport { useStateStore } from '../../../store';\n\nimport type { ThreadState } from 'stream-chat';\n\nconst parentMessageSelector = ({ parentMessage }: ThreadState) => ({ parentMessage });\n\n/**\n * The parent message a thread list renders above its replies, or `null` outside a thread.\n *\n * The head belongs to the list rather than to `Thread` because it has to sit inside the scroll\n * container -- a sibling of the list could not be placed there. Style choices stay with the\n * caller; only this structural one is resolved from context.\n */\nexport const useThreadHead = () => {\n  const thread = useThreadContext();\n  const { ThreadHead = DefaultThreadHead } = useComponentContext();\n  const { parentMessage } = useStateStore(thread?.state, parentMessageSelector) ?? {};\n\n  if (!parentMessage) return null;\n\n  return <ThreadHead key={parentMessage.id} message={parentMessage} />;\n};\n"],"mappings":";;;;;;;AASA,IAAM,yBAAyB,EAAE,qBAAkC,EAAE,cAAc;;;;;;;;AASnF,IAAa,sBAAsB;CACjC,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,YAAA,eAAa,eAAsB,oBAAoB;CAC/D,MAAM,EAAE,kBAAkB,cAAc,QAAQ,OAAO,qBAAqB,KAAK,CAAC;CAElF,IAAI,CAAC,eAAe,OAAO;CAE3B,OAAO,oBAAC,cAAD,EAAmC,SAAS,cAAgB,GAA3C,cAAc,EAA6B;AACrE"}

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

@@ -0,0 +1,37 @@
+//#region src/components/MessageList/messageSourceKey.ts
+/**
+* Identity of the object a message list renders -- a `Channel` or a `Thread` -- as a string usable
+* as a React key.
+*
+* Keyed on the *instance*, not on `cid` or a thread id. Those name a conversation; they do not name
+* the object representing it. Two different `Channel` instances can carry the same `cid` (the
+* client's cache is dropped on `disconnectUser`, an app can hold channels from more than one
+* client, and re-created channels come back as new objects), so keying on the id treats them as the
+* same thing and the list keeps state belonging to an instance nobody uses any more: subscriptions
+* to the previous instance's stores, scroll position, virtualization accounting.
+*
+* The readable prefix is there for React DevTools; the counter is what identifies the instance.
+*/
+var instanceKeys = /* @__PURE__ */ new WeakMap();
+var nextInstanceKey = 0;
+var getInstanceKey = (instance, label) => {
+	const existing = instanceKeys.get(instance);
+	if (existing) return existing;
+	nextInstanceKey += 1;
+	const key = `${label}#${nextInstanceKey}`;
+	instanceKeys.set(instance, key);
+	return key;
+};
+/**
+* Key for the source a message list is bound to.
+*
+* Mirrors `useMessagePaginator()` -- `thread?.messagePaginator ?? channel.messagePaginator` -- so
+* the list resets exactly when the paginator it reads from changes. A thread list bound to the
+* channel would not reset between two threads of the same channel, which is what keying on the
+* channel alone used to do.
+*/
+var getMessageSourceKey = ({ channel, thread }) => thread ? getInstanceKey(thread, `thread:${thread.id}`) : getInstanceKey(channel, channel.cid);
+//#endregion
+export { getMessageSourceKey };
+
+//# sourceMappingURL=messageSourceKey.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messageSourceKey.mjs","names":[],"sources":["../../../../src/components/MessageList/messageSourceKey.ts"],"sourcesContent":["import type { Channel, Thread } from 'stream-chat';\n\n/**\n * Identity of the object a message list renders -- a `Channel` or a `Thread` -- as a string usable\n * as a React key.\n *\n * Keyed on the *instance*, not on `cid` or a thread id. Those name a conversation; they do not name\n * the object representing it. Two different `Channel` instances can carry the same `cid` (the\n * client's cache is dropped on `disconnectUser`, an app can hold channels from more than one\n * client, and re-created channels come back as new objects), so keying on the id treats them as the\n * same thing and the list keeps state belonging to an instance nobody uses any more: subscriptions\n * to the previous instance's stores, scroll position, virtualization accounting.\n *\n * The readable prefix is there for React DevTools; the counter is what identifies the instance.\n */\nconst instanceKeys = new WeakMap<object, string>();\nlet nextInstanceKey = 0;\n\nconst getInstanceKey = (instance: object, label: string): string => {\n  const existing = instanceKeys.get(instance);\n  if (existing) return existing;\n\n  nextInstanceKey += 1;\n  const key = `${label}#${nextInstanceKey}`;\n  instanceKeys.set(instance, key);\n\n  return key;\n};\n\n/**\n * Key for the source a message list is bound to.\n *\n * Mirrors `useMessagePaginator()` -- `thread?.messagePaginator ?? channel.messagePaginator` -- so\n * the list resets exactly when the paginator it reads from changes. A thread list bound to the\n * channel would not reset between two threads of the same channel, which is what keying on the\n * channel alone used to do.\n */\nexport const getMessageSourceKey = ({\n  channel,\n  thread,\n}: {\n  channel: Channel;\n  thread?: Thread;\n}): string =>\n  thread\n    ? getInstanceKey(thread, `thread:${thread.id}`)\n    : getInstanceKey(channel, channel.cid);\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAM,+BAAe,IAAI,QAAwB;AACjD,IAAI,kBAAkB;AAEtB,IAAM,kBAAkB,UAAkB,UAA0B;CAClE,MAAM,WAAW,aAAa,IAAI,QAAQ;CAC1C,IAAI,UAAU,OAAO;CAErB,mBAAmB;CACnB,MAAM,MAAM,GAAG,MAAM,GAAG;CACxB,aAAa,IAAI,UAAU,GAAG;CAE9B,OAAO;AACT;;;;;;;;;AAUA,IAAa,uBAAuB,EAClC,SACA,aAKA,SACI,eAAe,QAAQ,UAAU,OAAO,IAAI,IAC5C,eAAe,SAAS,QAAQ,GAAG"}

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

@@ -0,0 +1,76 @@
+import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from "./utils.mjs";
+import { UnreadMessagesSeparator } from "./UnreadMessagesSeparator.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
+import { EventComponent } from "../EventComponent/EventComponent.mjs";
+import { Message } from "../Message/Message.mjs";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageList/renderMessages.tsx
+function defaultRenderMessages({ channel, channelUnreadUiState, components, customClasses, focusedMessageId, 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 || String(message.created_at)));
+		else {
+			if (!firstMessage) firstMessage = message;
+			const groupStyles = messageGroupStyles[message.id] || "";
+			const messageClass = customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
+			const isFirstUnreadMessage = getIsFirstUnreadMessage({
+				...channelUnreadUiState,
+				channel,
+				firstUnreadMessageId: channelUnreadUiState?.firstUnreadMessageId,
+				isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,
+				message,
+				previousMessage
+			});
+			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?.unreadCount })
+			}), /* @__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],
+					highlighted: focusedMessageId === message.id,
+					lastOwnMessage,
+					lastReceivedId,
+					message,
+					readBy: readData[message.id] || [],
+					...messageProps
+				})
+			})] }, message.id || String(message.created_at)));
+			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 {\n  Channel,\n  LocalMessage,\n  UnreadSnapshotState,\n  UserResponse,\n} from 'stream-chat';\nimport type { ComponentContextValue, CustomClasses } from '../../context';\n// import type { ChannelUnreadUiState } from '../../types';\n\nexport interface RenderMessagesOptions {\n  channel: Channel;\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: UnreadSnapshotState;\n  components: ComponentContextValue;\n  lastReceivedMessageId: string | null;\n  messageGroupStyles: Record<string, GroupStyle>;\n  messages: Array<RenderedMessage>;\n  ownMessagesDeliveredToOthers: Record<string, UserResponse[]>;\n  /** The message id currently signaled for focus by the paginator. */\n  focusedMessageId?: string | null;\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  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  channel,\n  channelUnreadUiState,\n  components,\n  customClasses,\n  focusedMessageId,\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 || String(message.created_at)}\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        ...channelUnreadUiState,\n        channel,\n        firstUnreadMessageId: channelUnreadUiState?.firstUnreadMessageId,\n        isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,\n        message,\n        previousMessage,\n      });\n\n      renderedMessages.push(\n        <Fragment key={message.id || String(message.created_at)}>\n          {isFirstUnreadMessage && UnreadMessagesSeparator && (\n            <MessageListItem className='str-chat__li str-chat__unread-messages-separator-wrapper'>\n              <UnreadMessagesSeparator unreadCount={channelUnreadUiState?.unreadCount} />\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              highlighted={focusedMessageId === message.id}\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":";;;;;;;;AA2DA,SAAgB,sBAAsB,EACpC,SACA,sBACA,YACA,eACA,kBACA,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,OAAO,QAAQ,UAAU,CAG7B,CACnB;OACK;GACL,IAAI,CAAC,cACH,eAAe;GAEjB,MAAM,cAA0B,mBAAmB,QAAQ,OAAO;GAClE,MAAM,eACJ,eAAe,WAAW,8BAA8B;GAE1D,MAAM,uBAAuB,wBAAwB;IACnD,GAAG;IACH;IACA,sBAAsB,sBAAsB;IAC5C,gBAAgB,CAAC,CAAC,cAAc,MAAM,aAAa,OAAO,QAAQ;IAClE;IACA;GACF,CAAC;GAED,iBAAiB,KACf,qBAAC,UAAD,EAAA,UAAA,CACG,wBAAwB,6BACvB,oBAAC,iBAAD;IAAiB,WAAU;cACzB,oBAAC,2BAAD,EAAyB,aAAa,sBAAsB,YAAc,CAAA;GAC3D,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;KACzB,aAAa,qBAAqB,QAAQ;KAC1B;KACA;KACP;KACT,QAAQ,SAAS,QAAQ,OAAO,CAAC;KACjC,GAAI;IACL,CAAA;GACc,CAAA,CACT,EAAA,GAvBK,QAAQ,MAAM,OAAO,QAAQ,UAAU,CAuB5C,CACZ;GACA,kBAAkB;EACpB;CACF;CACA,OAAO;AACT"}

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

@@ -0,0 +1,162 @@
+import { isDate } from "../../i18n/utils.mjs";
+import { isMessageEdited } from "../Message/utils.mjs";
+import { CUSTOM_MESSAGE_TYPE } from "../../constants/messageTypes.mjs";
+import { convertTimestampToDate, nsToMs } from "stream-chat";
+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 { hideDeletedMessages, hideNewMessageSeparator, lastRead, userId, withDateSeparator } = 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 messageCreatedAt = convertTimestampToDate(message.created_at);
+		const messageDate = messageCreatedAt ? messageCreatedAt.toDateString() : "";
+		const previousMessage = messages[i - 1];
+		const previousCreatedAt = withDateSeparator ? convertTimestampToDate(previousMessage?.created_at) : void 0;
+		const prevMessageDate = previousCreatedAt ? previousCreatedAt.toDateString() : "";
+		if (!unread && !hideNewMessageSeparator) {
+			unread = lastRead != null && message.created_at != null && lastRead < message.created_at || false;
+			if (withDateSeparator && unread && messageCreatedAt && message.user?.id !== userId) {
+				const separator = {
+					customType: CUSTOM_MESSAGE_TYPE.date,
+					date: messageCreatedAt,
+					id: makeDateMessageId(messageCreatedAt),
+					unread
+				};
+				changes.push(separator);
+			}
+		}
+		if (withDateSeparator && (i === 0 || messageDate !== prevMessageDate || hideDeletedMessages && previousMessage?.type === "deleted" && lastDateSeparator !== messageDate) && !isDateSeparatorMessage(changes[changes.length - 1])) {
+			lastDateSeparator = messageDate;
+			const separator = messageCreatedAt && {
+				customType: CUSTOM_MESSAGE_TYPE.date,
+				date: messageCreatedAt,
+				id: makeDateMessageId(messageCreatedAt)
+			};
+			changes.push(...separator ? [separator] : [], 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 == null) {
+		newMessages.unshift(intro);
+		return newMessages;
+	}
+	if (!newMessages.length) {
+		newMessages.unshift(intro);
+		return newMessages;
+	}
+	for (let i = 0; i < messages.length; i += 1) {
+		const messageTime = messages[i].created_at;
+		const nextMessageTime = messages[i + 1]?.created_at ?? null;
+		if (messageTime < headerPosition) if (nextMessageTime != null && nextMessageTime < headerPosition) {
+			if (messages[i + 1] && isDateSeparatorMessage(messages[i + 1])) continue;
+		} else {
+			newMessages.splice(i + 1, 0, intro);
+			return newMessages;
+		}
+	}
+	newMessages.unshift(intro);
+	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 != null && message.created_at != null && nsToMs(message.created_at - previousMessage.created_at) > 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 != null && message.created_at != null && nsToMs(nextMessage.created_at - message.created_at) > 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);
+}
+function isDeletedMessage(message) {
+	return !!message && message.type === "deleted";
+}
+var getIsFirstUnreadMessage = ({ channel, firstUnreadMessageId, isFirstMessage, lastReadAt, lastReadMessageId, message, previousMessage, unreadCount = 0 }) => {
+	if (message.parent_id || !channel) return false;
+	if (!unreadCount) return false;
+	const createdAtTimestamp = message.created_at;
+	const lastReadTimestamp = lastReadAt;
+	const messageIsUnread = createdAtTimestamp != null && lastReadTimestamp != null && createdAtTimestamp > lastReadTimestamp;
+	const previousMessageIsLastRead = !!lastReadMessageId && lastReadMessageId === previousMessage?.id;
+	return firstUnreadMessageId === message.id || messageIsUnread && (isFirstMessage || previousMessageIsLastRead);
+};
+//#endregion
+export { getGroupStyles, getIsFirstUnreadMessage, getLastReceived, hasMoreMessagesProbably, insertIntro, isDateSeparatorMessage, isDeletedMessage, isIntroMessage, isLocalMessage, makeDateMessageId, makeIntroMessage, processMessages };
+
+//# sourceMappingURL=utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/MessageList/utils.ts"],"sourcesContent":["import { nanoid } from 'nanoid';\n\nimport { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';\nimport { isMessageEdited } from '../Message/utils';\nimport { isDate } from '../../i18n';\n\nimport type {\n  Channel,\n  LocalMessage,\n  TimestampNS,\n  UnreadSnapshotState,\n} from 'stream-chat';\nimport { convertTimestampToDate, nsToMs } from 'stream-chat';\n\ntype IntroMessage = {\n  customType: typeof CUSTOM_MESSAGE_TYPE.intro;\n  id: string;\n};\n\ntype DateSeparatorMessage = {\n  customType: typeof CUSTOM_MESSAGE_TYPE.date;\n  /**\n   * A `Date`, not the wire number: this is a view-model the separator renders from, and keeping it\n   * a `Date` is what lets `DateSeparator`, the render key and `isDateSeparatorMessage` stay as they\n   * are. Converted once, where core data enters the list.\n   */\n  date: Date;\n  id: string;\n  /**\n   * Only the unread separator sets this; the plain day divider leaves it absent. There is\n   * deliberately no `type`: a separator is a view-model, not a message, and `IntroMessage` declares\n   * none either — every consumer narrows the union with `isDateSeparatorMessage` first.\n   */\n  unread?: boolean;\n};\n\nexport type RenderedMessage = LocalMessage | DateSeparatorMessage | IntroMessage;\n\ntype ProcessMessagesContext = {\n  /** the connected user ID */\n  userId: string;\n  /** Enable deleted messages to be filtered out of resulting message list */\n  hideDeletedMessages?: boolean;\n  /** Disable date separator display for unread incoming messages */\n  hideNewMessageSeparator?: boolean;\n  /** Sets the threshold after everything is considered unread. Unix nanoseconds, as `channel.lastRead()` returns. */\n  lastRead?: TimestampNS | null;\n  /** Inject date separators between messages posted on different days */\n  withDateSeparator?: boolean;\n};\n\nexport type ProcessMessagesParams = ProcessMessagesContext & {\n  messages: LocalMessage[];\n  reviewProcessedMessage?: (params: {\n    /** array of messages representing the changes applied around a given processed message */\n    changes: RenderedMessage[];\n    /** configuration params and information forwarded from `processMessages` */\n    context: ProcessMessagesContext;\n    /** index of the processed message in the original messages array */\n    index: number;\n    /** array of messages retrieved from the back-end */\n    messages: LocalMessage[];\n    /** newly built array of messages to be later rendered */\n    processedMessages: RenderedMessage[];\n  }) => LocalMessage[];\n  /** Signals whether to separate giphy preview as well as used to set the giphy preview state */\n  setGiphyPreviewMessage?: React.Dispatch<React.SetStateAction<LocalMessage | undefined>>;\n};\n\n/**\n * processMessages - Transform the input message list according to config parameters\n *\n * Inserts date separators btw. messages created on different dates or before unread incoming messages. By default:\n * - enabled in main message list\n * - disabled in virtualized message list\n * - disabled in thread\n *\n * Allows to filter out deleted messages, contolled by hideDeletedMessages param. This is disabled by default.\n *\n * Sets Giphy preview message for VirtualizedMessageList\n *\n * The only required params are messages and userId, the rest are config params:\n *\n * @return {LocalMessage[]} Transformed list of messages\n */\nexport const processMessages = (params: ProcessMessagesParams) => {\n  const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;\n  const {\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    lastRead,\n    userId,\n    withDateSeparator,\n  } = context;\n\n  let unread = false;\n  let ephemeralMessagePresent = false;\n  let lastDateSeparator;\n  const newMessages: RenderedMessage[] = [];\n\n  for (let i = 0; i < messages.length; i += 1) {\n    const message = messages[i];\n\n    if (hideDeletedMessages && message.type === 'deleted') {\n      continue;\n    }\n\n    if (\n      setGiphyPreviewMessage &&\n      message.type === 'ephemeral' &&\n      message.command === 'giphy'\n    ) {\n      ephemeralMessagePresent = true;\n      setGiphyPreviewMessage(message);\n      continue;\n    }\n\n    const changes: RenderedMessage[] = [];\n    // `undefined` when the timestamp is unusable, so no separator is built for that message.\n    const messageCreatedAt = convertTimestampToDate(message.created_at);\n    const messageDate = messageCreatedAt ? messageCreatedAt.toDateString() : '';\n    const previousMessage = messages[i - 1];\n    // `''` when the previous message has no usable timestamp, so the current one still gets a\n    // separator.\n    const previousCreatedAt = withDateSeparator\n      ? convertTimestampToDate(previousMessage?.created_at)\n      : undefined;\n    const prevMessageDate = previousCreatedAt ? previousCreatedAt.toDateString() : '';\n\n    if (!unread && !hideNewMessageSeparator) {\n      unread =\n        (lastRead != null &&\n          message.created_at != null &&\n          lastRead < message.created_at) ||\n        false;\n\n      // do not show date separator for current user's messages\n      if (\n        withDateSeparator &&\n        unread &&\n        messageCreatedAt &&\n        message.user?.id !== userId\n      ) {\n        const separator: DateSeparatorMessage = {\n          customType: CUSTOM_MESSAGE_TYPE.date,\n          date: messageCreatedAt,\n          id: makeDateMessageId(messageCreatedAt),\n          unread,\n        };\n        changes.push(separator);\n      }\n    }\n\n    if (\n      withDateSeparator &&\n      (i === 0 || // always put date separator before the first message\n        messageDate !== prevMessageDate || // add date separator btw. 2 messages created on different date\n        // if hiding deleted messages replace the previous deleted message(s) with A separator if the last rendered message was created on different date\n        (hideDeletedMessages &&\n          previousMessage?.type === 'deleted' &&\n          lastDateSeparator !== messageDate)) &&\n      !isDateSeparatorMessage(changes[changes.length - 1]) // do not show two date separators in a row)\n    ) {\n      lastDateSeparator = messageDate;\n\n      const separator: DateSeparatorMessage | undefined = messageCreatedAt && {\n        customType: CUSTOM_MESSAGE_TYPE.date,\n        date: messageCreatedAt,\n        id: makeDateMessageId(messageCreatedAt),\n      };\n      changes.push(...(separator ? [separator] : []), message);\n    } else {\n      changes.push(message);\n    }\n\n    newMessages.push(\n      ...(reviewProcessedMessage?.({\n        changes,\n        context,\n        index: i,\n        messages,\n        processedMessages: newMessages,\n      }) || changes),\n    );\n  }\n\n  // clean up the giphy preview component state after a Cancel action\n  if (setGiphyPreviewMessage && !ephemeralMessagePresent) {\n    setGiphyPreviewMessage(undefined);\n  }\n\n  return newMessages;\n};\n\nexport const makeIntroMessage = (): IntroMessage => ({\n  customType: CUSTOM_MESSAGE_TYPE.intro,\n  id: nanoid(),\n});\n\nexport const makeDateMessageId = (date?: string | Date) => {\n  let idSuffix;\n  try {\n    idSuffix = !date ? nanoid() : date instanceof Date ? date.toISOString() : date;\n  } catch (e) {\n    idSuffix = nanoid();\n  }\n  return `${CUSTOM_MESSAGE_TYPE.date}-${idSuffix}`;\n};\n\n// fast since it usually iterates just the last few messages\nexport const getLastReceived = (messages: RenderedMessage[]) => {\n  for (let i = messages.length - 1; i > 0; i -= 1) {\n    if ((messages[i] as LocalMessage).status === 'received') {\n      return messages[i].id;\n    }\n  }\n\n  return null;\n};\n\nexport const insertIntro = (\n  messages: RenderedMessage[],\n  headerPosition?: TimestampNS,\n) => {\n  const newMessages = messages;\n  const intro = makeIntroMessage();\n\n  // if no headerPosition is set, HeaderComponent will go at the top\n  if (headerPosition == null) {\n    newMessages.unshift(intro);\n    return newMessages;\n  }\n\n  // if no messages, intro gets inserted\n  if (!newMessages.length) {\n    newMessages.unshift(intro);\n    return newMessages;\n  }\n\n  // else loop over the messages\n  for (let i = 0; i < messages.length; i += 1) {\n    const messageTime = (messages[i] as LocalMessage).created_at;\n\n    const nextMessageTime = (messages[i + 1] as LocalMessage)?.created_at ?? null;\n\n    // header position is smaller than message time so comes after;\n    if (messageTime < headerPosition) {\n      // if header position is also smaller than message time continue;\n      if (nextMessageTime != null && nextMessageTime < headerPosition) {\n        if (messages[i + 1] && isDateSeparatorMessage(messages[i + 1])) continue;\n      } else {\n        newMessages.splice(i + 1, 0, intro);\n        return newMessages;\n      }\n    }\n  }\n\n  // No message is older than the position, so it precedes the whole list and the intro goes first.\n  // Falling through without inserting dropped the intro entirely (what `headerPosition={0}` did).\n  newMessages.unshift(intro);\n  return newMessages;\n};\n\nexport type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';\n\n// Allocation-free, early-exiting emptiness check. Avoids the throwaway array\n// that `Object.keys(obj).length > 0` allocates per message inside getGroupStyles.\nconst isNonEmptyRecord = (record: Record<string, unknown>) => {\n  for (const key in record) {\n    if (Object.prototype.hasOwnProperty.call(record, key)) return true;\n  }\n  return false;\n};\n\nexport const getGroupStyles = (\n  message: RenderedMessage,\n  previousMessage: RenderedMessage,\n  nextMessage: RenderedMessage,\n  noGroupByUser: boolean,\n  maxTimeBetweenGroupedMessages?: number,\n): GroupStyle => {\n  if (isDateSeparatorMessage(message) || isIntroMessage(message)) return '';\n\n  if (noGroupByUser || message.attachments?.length !== 0) return 'single';\n\n  const isTopMessage =\n    !previousMessage ||\n    isIntroMessage(previousMessage) ||\n    isDateSeparatorMessage(previousMessage) ||\n    previousMessage.type === 'system' ||\n    previousMessage.type === 'error' ||\n    previousMessage.attachments?.length !== 0 ||\n    message.user?.id !== previousMessage.user?.id ||\n    (message.reaction_groups && isNonEmptyRecord(message.reaction_groups)) ||\n    isMessageEdited(previousMessage) ||\n    (maxTimeBetweenGroupedMessages !== undefined &&\n      // Nullish, not truthy: `0` is a legitimate wire timestamp (the epoch), and skipping the\n      // cutoff for it would keep messages grouped past `maxTimeBetweenGroupedMessages`.\n      previousMessage.created_at != null &&\n      message.created_at != null &&\n      nsToMs(message.created_at - previousMessage.created_at) >\n        maxTimeBetweenGroupedMessages);\n\n  const isBottomMessage =\n    !nextMessage ||\n    isIntroMessage(nextMessage) ||\n    isDateSeparatorMessage(nextMessage) ||\n    nextMessage.type === 'system' ||\n    nextMessage.type === 'error' ||\n    nextMessage.attachments?.length !== 0 ||\n    message.user?.id !== nextMessage.user?.id ||\n    (nextMessage.reaction_groups && isNonEmptyRecord(nextMessage.reaction_groups)) ||\n    isMessageEdited(message) ||\n    (maxTimeBetweenGroupedMessages !== undefined &&\n      nextMessage.created_at != null &&\n      message.created_at != null &&\n      nsToMs(nextMessage.created_at - message.created_at) >\n        maxTimeBetweenGroupedMessages);\n\n  if (!isTopMessage && !isBottomMessage) {\n    if (message.type === 'error') return 'single';\n    return 'middle';\n  }\n\n  if (isBottomMessage) {\n    if (isTopMessage || message.type === 'error') return 'single';\n    return 'bottom';\n  }\n\n  if (isTopMessage) return 'top';\n\n  return '';\n};\n\n// \"Probably\" included, because it may happen that the last page was returned and it has exactly the size of the limit\n// but the back-end cannot provide us with information on whether it has still more messages in the DB\n// FIXME: once the pagination state is moved from Channel to MessageList, these should be moved as well.\n//  The MessageList should have configurable the limit for performing the requests.\n//  This parameter would then be used within these functions\nexport const hasMoreMessagesProbably = (returnedCountMessages: number, limit: number) =>\n  returnedCountMessages >= limit;\n\nexport function isIntroMessage(message: unknown): message is IntroMessage {\n  return (message as IntroMessage).customType === CUSTOM_MESSAGE_TYPE.intro;\n}\n\nexport function isDateSeparatorMessage(\n  message: unknown,\n): message is DateSeparatorMessage {\n  return (\n    message !== null &&\n    typeof message === 'object' &&\n    (message as DateSeparatorMessage).customType === CUSTOM_MESSAGE_TYPE.date &&\n    isDate((message as DateSeparatorMessage).date)\n  );\n}\n\nexport function isLocalMessage(message: unknown): message is LocalMessage {\n  return !isDateSeparatorMessage(message) && !isIntroMessage(message);\n}\n\nexport function isDeletedMessage(\n  message: unknown,\n): message is LocalMessage & { type: 'deleted' } {\n  return !!message && (message as LocalMessage).type === 'deleted';\n}\n\n// todo: simplify the logic\nexport const getIsFirstUnreadMessage = ({\n  channel,\n  firstUnreadMessageId,\n  isFirstMessage,\n  lastReadAt,\n  lastReadMessageId,\n  message,\n  previousMessage,\n  unreadCount = 0,\n}: UnreadSnapshotState & {\n  channel?: Channel;\n  isFirstMessage: boolean;\n  message: LocalMessage;\n  previousMessage?: RenderedMessage;\n}) => {\n  // prevent showing unread indicator in threads\n  if (message.parent_id || !channel) return false;\n  // unread separator is snapshot-driven; if snapshot says there are no unread messages,\n  // the separator should not be rendered.\n  if (!unreadCount) return false;\n\n  const createdAtTimestamp = message.created_at;\n  const lastReadTimestamp = lastReadAt;\n\n  const messageIsUnread =\n    createdAtTimestamp != null &&\n    lastReadTimestamp != null &&\n    createdAtTimestamp > lastReadTimestamp;\n\n  const previousMessageIsLastRead =\n    !!lastReadMessageId && lastReadMessageId === previousMessage?.id;\n\n  return (\n    firstUnreadMessageId === message.id ||\n    (messageIsUnread && (isFirstMessage || previousMessageIsLastRead))\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqFA,IAAa,mBAAmB,WAAkC;CAChE,MAAM,EAAE,UAAU,wBAAwB,wBAAwB,GAAG,YAAY;CACjF,MAAM,EACJ,qBACA,yBACA,UACA,QACA,sBACE;CAEJ,IAAI,SAAS;CACb,IAAI,0BAA0B;CAC9B,IAAI;CACJ,MAAM,cAAiC,CAAC;CAExC,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;EAC3C,MAAM,UAAU,SAAS;EAEzB,IAAI,uBAAuB,QAAQ,SAAS,WAC1C;EAGF,IACE,0BACA,QAAQ,SAAS,eACjB,QAAQ,YAAY,SACpB;GACA,0BAA0B;GAC1B,uBAAuB,OAAO;GAC9B;EACF;EAEA,MAAM,UAA6B,CAAC;EAEpC,MAAM,mBAAmB,uBAAuB,QAAQ,UAAU;EAClE,MAAM,cAAc,mBAAmB,iBAAiB,aAAa,IAAI;EACzE,MAAM,kBAAkB,SAAS,IAAI;EAGrC,MAAM,oBAAoB,oBACtB,uBAAuB,iBAAiB,UAAU,IAClD,KAAA;EACJ,MAAM,kBAAkB,oBAAoB,kBAAkB,aAAa,IAAI;EAE/E,IAAI,CAAC,UAAU,CAAC,yBAAyB;GACvC,SACG,YAAY,QACX,QAAQ,cAAc,QACtB,WAAW,QAAQ,cACrB;GAGF,IACE,qBACA,UACA,oBACA,QAAQ,MAAM,OAAO,QACrB;IACA,MAAM,YAAkC;KACtC,YAAY,oBAAoB;KAChC,MAAM;KACN,IAAI,kBAAkB,gBAAgB;KACtC;IACF;IACA,QAAQ,KAAK,SAAS;GACxB;EACF;EAEA,IACE,sBACC,MAAM,KACL,gBAAgB,mBAEf,uBACC,iBAAiB,SAAS,aAC1B,sBAAsB,gBAC1B,CAAC,uBAAuB,QAAQ,QAAQ,SAAS,EAAE,GACnD;GACA,oBAAoB;GAEpB,MAAM,YAA8C,oBAAoB;IACtE,YAAY,oBAAoB;IAChC,MAAM;IACN,IAAI,kBAAkB,gBAAgB;GACxC;GACA,QAAQ,KAAK,GAAI,YAAY,CAAC,SAAS,IAAI,CAAC,GAAI,OAAO;EACzD,OACE,QAAQ,KAAK,OAAO;EAGtB,YAAY,KACV,GAAI,yBAAyB;GAC3B;GACA;GACA,OAAO;GACP;GACA,mBAAmB;EACrB,CAAC,KAAK,OACR;CACF;CAGA,IAAI,0BAA0B,CAAC,yBAC7B,uBAAuB,KAAA,CAAS;CAGlC,OAAO;AACT;AAEA,IAAa,0BAAwC;CACnD,YAAY,oBAAoB;CAChC,IAAI,OAAO;AACb;AAEA,IAAa,qBAAqB,SAAyB;CACzD,IAAI;CACJ,IAAI;EACF,WAAW,CAAC,OAAO,OAAO,IAAI,gBAAgB,OAAO,KAAK,YAAY,IAAI;CAC5E,SAAS,GAAG;EACV,WAAW,OAAO;CACpB;CACA,OAAO,GAAG,oBAAoB,KAAK,GAAG;AACxC;AAGA,IAAa,mBAAmB,aAAgC;CAC9D,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK,GAC5C,IAAK,SAAS,EAAE,CAAkB,WAAW,YAC3C,OAAO,SAAS,EAAE,CAAC;CAIvB,OAAO;AACT;AAEA,IAAa,eACX,UACA,mBACG;CACH,MAAM,cAAc;CACpB,MAAM,QAAQ,iBAAiB;CAG/B,IAAI,kBAAkB,MAAM;EAC1B,YAAY,QAAQ,KAAK;EACzB,OAAO;CACT;CAGA,IAAI,CAAC,YAAY,QAAQ;EACvB,YAAY,QAAQ,KAAK;EACzB,OAAO;CACT;CAGA,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;EAC3C,MAAM,cAAe,SAAS,EAAE,CAAkB;EAElD,MAAM,kBAAmB,SAAS,IAAI,EAAE,EAAmB,cAAc;EAGzE,IAAI,cAAc,gBAEhB,IAAI,mBAAmB,QAAQ,kBAAkB;OAC3C,SAAS,IAAI,MAAM,uBAAuB,SAAS,IAAI,EAAE,GAAG;EAAA,OAC3D;GACL,YAAY,OAAO,IAAI,GAAG,GAAG,KAAK;GAClC,OAAO;EACT;CAEJ;CAIA,YAAY,QAAQ,KAAK;CACzB,OAAO;AACT;AAMA,IAAM,oBAAoB,WAAoC;CAC5D,KAAK,MAAM,OAAO,QAChB,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,GAAG,GAAG,OAAO;CAEhE,OAAO;AACT;AAEA,IAAa,kBACX,SACA,iBACA,aACA,eACA,kCACe;CACf,IAAI,uBAAuB,OAAO,KAAK,eAAe,OAAO,GAAG,OAAO;CAEvE,IAAI,iBAAiB,QAAQ,aAAa,WAAW,GAAG,OAAO;CAE/D,MAAM,eACJ,CAAC,mBACD,eAAe,eAAe,KAC9B,uBAAuB,eAAe,KACtC,gBAAgB,SAAS,YACzB,gBAAgB,SAAS,WACzB,gBAAgB,aAAa,WAAW,KACxC,QAAQ,MAAM,OAAO,gBAAgB,MAAM,MAC1C,QAAQ,mBAAmB,iBAAiB,QAAQ,eAAe,KACpE,gBAAgB,eAAe,KAC9B,kCAAkC,KAAA,KAGjC,gBAAgB,cAAc,QAC9B,QAAQ,cAAc,QACtB,OAAO,QAAQ,aAAa,gBAAgB,UAAU,IACpD;CAEN,MAAM,kBACJ,CAAC,eACD,eAAe,WAAW,KAC1B,uBAAuB,WAAW,KAClC,YAAY,SAAS,YACrB,YAAY,SAAS,WACrB,YAAY,aAAa,WAAW,KACpC,QAAQ,MAAM,OAAO,YAAY,MAAM,MACtC,YAAY,mBAAmB,iBAAiB,YAAY,eAAe,KAC5E,gBAAgB,OAAO,KACtB,kCAAkC,KAAA,KACjC,YAAY,cAAc,QAC1B,QAAQ,cAAc,QACtB,OAAO,YAAY,aAAa,QAAQ,UAAU,IAChD;CAEN,IAAI,CAAC,gBAAgB,CAAC,iBAAiB;EACrC,IAAI,QAAQ,SAAS,SAAS,OAAO;EACrC,OAAO;CACT;CAEA,IAAI,iBAAiB;EACnB,IAAI,gBAAgB,QAAQ,SAAS,SAAS,OAAO;EACrD,OAAO;CACT;CAEA,IAAI,cAAc,OAAO;CAEzB,OAAO;AACT;AAOA,IAAa,2BAA2B,uBAA+B,UACrE,yBAAyB;AAE3B,SAAgB,eAAe,SAA2C;CACxE,OAAQ,QAAyB,eAAe,oBAAoB;AACtE;AAEA,SAAgB,uBACd,SACiC;CACjC,OACE,YAAY,QACZ,OAAO,YAAY,YAClB,QAAiC,eAAe,oBAAoB,QACrE,OAAQ,QAAiC,IAAI;AAEjD;AAEA,SAAgB,eAAe,SAA2C;CACxE,OAAO,CAAC,uBAAuB,OAAO,KAAK,CAAC,eAAe,OAAO;AACpE;AAEA,SAAgB,iBACd,SAC+C;CAC/C,OAAO,CAAC,CAAC,WAAY,QAAyB,SAAS;AACzD;AAGA,IAAa,2BAA2B,EACtC,SACA,sBACA,gBACA,YACA,mBACA,SACA,iBACA,cAAc,QAMV;CAEJ,IAAI,QAAQ,aAAa,CAAC,SAAS,OAAO;CAG1C,IAAI,CAAC,aAAa,OAAO;CAEzB,MAAM,qBAAqB,QAAQ;CACnC,MAAM,oBAAoB;CAE1B,MAAM,kBACJ,sBAAsB,QACtB,qBAAqB,QACrB,qBAAqB;CAEvB,MAAM,4BACJ,CAAC,CAAC,qBAAqB,sBAAsB,iBAAiB;CAEhE,OACE,yBAAyB,QAAQ,MAChC,oBAAoB,kBAAkB;AAE3C"}

package/dist/es/components/Modal/GlobalModal.mjs

@@ -0,0 +1,157 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useModalDialog, useModalDialogIsOpen, useModalDialogIsTopmost } from "../Dialog/hooks/useDialog.mjs";
+import { DialogPortalEntry } from "../Dialog/service/DialogPortal.mjs";
+import { DialogManagerProvider, modalDialogManagerId } from "../../context/DialogManagerContext.mjs";
+import { AriaLiveOutlet } from "../Accessibility/AriaLiveOutlet.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useResolvedModalAriaProps } from "../../a11y/hooks/useResolvedModalAriaProps.mjs";
+import { ModalContextProvider } from "../../context/ModalContext.mjs";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { FocusScope } from "@react-aria/focus";
+//#region src/components/Modal/GlobalModal.tsx
+var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, CloseButtonOnOverlay, dialogId, dialogRootProps, getInitialFocusElement, initialFocusStrategy, onClose, onCloseAttempt, open, role = "dialog" }) => {
+	const generatedDialogId = useStableId();
+	const resolvedDialogId = dialogId ?? `modal-dialog-${generatedDialogId}`;
+	const dialog = useModalDialog(resolvedDialogId);
+	const isOpen = useModalDialogIsOpen(resolvedDialogId);
+	const isTopmost = useModalDialogIsTopmost(resolvedDialogId);
+	const overlayRef = useRef(null);
+	const dialogRef = useRef(null);
+	const closeButtonRef = useRef(null);
+	const closingRef = useRef(false);
+	const { theme } = useChatContext();
+	const { NotificationList: NotificationList$1 = NotificationList } = useComponentContext();
+	const { className: dialogRootClassName, onKeyDown: dialogRootOnKeyDown, ...dialogRootPropsRest } = dialogRootProps ?? {};
+	const dialogLabelingBaseId = resolvedDialogId;
+	const resolvedInitialFocusStrategy = initialFocusStrategy ?? "firstElement";
+	const resolvedModalAriaProps = useResolvedModalAriaProps({
+		ariaDescribedby,
+		ariaLabel,
+		ariaLabelledby,
+		dialogId: dialogLabelingBaseId
+	});
+	const maybeClose = useCallback((source, event) => {
+		if (onCloseAttempt?.(source, event) !== false) {
+			dialog.close();
+			closingRef.current = true;
+			onClose?.(event);
+		}
+	}, [
+		dialog,
+		onClose,
+		onCloseAttempt
+	]);
+	const modalContextValue = useMemo(() => ({
+		close: () => maybeClose("button", {}),
+		dialogId: dialogLabelingBaseId
+	}), [dialogLabelingBaseId, maybeClose]);
+	const handleOverlayClick = (event) => {
+		if (!isTopmost) return;
+		const target = event.target;
+		if (overlayRef.current === target) maybeClose("overlay", event);
+	};
+	const handleCloseButtonClick = (event) => {
+		if (!isTopmost) return;
+		maybeClose("button", event);
+	};
+	const handleDialogKeyDown = (event) => {
+		dialogRootOnKeyDown?.(event);
+		if (event.defaultPrevented || !isTopmost) return;
+		if (event.key === "Escape") {
+			maybeClose("escape", event);
+			return;
+		}
+		if (event.key === "Enter" && event.target === dialogRef.current) {
+			const target = dialogRef.current?.querySelector("[data-autofocus]");
+			if (target) {
+				event.preventDefault();
+				target.focus();
+			}
+		}
+	};
+	useEffect(() => {
+		if (!open) {
+			closingRef.current = false;
+			if (isOpen) dialog.close();
+			return;
+		}
+		if (open && !isOpen && !closingRef.current) dialog.open();
+	}, [
+		dialog,
+		isOpen,
+		open
+	]);
+	useEffect(() => {
+		if (!open || !isOpen || !isTopmost || !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement") return;
+		const frame = requestAnimationFrame(() => {
+			const dialogElement = dialogRef.current;
+			if (!dialogElement) return;
+			(getInitialFocusElement?.(dialogElement) ?? dialogElement).focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		getInitialFocusElement,
+		isOpen,
+		isTopmost,
+		open,
+		resolvedInitialFocusStrategy
+	]);
+	if (!open || !isOpen) return null;
+	return /* @__PURE__ */ jsx(DialogPortalEntry, {
+		dialogId: resolvedDialogId,
+		dialogManagerId: modalDialogManagerId,
+		children: /* @__PURE__ */ jsx(ModalContextProvider, {
+			value: modalContextValue,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("str-chat", theme, "str-chat__modal str-chat-react__modal str-chat__modal--open", className),
+				onClick: handleOverlayClick,
+				ref: overlayRef,
+				children: [
+					/* @__PURE__ */ jsx(FocusScope, {
+						autoFocus: isTopmost && !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement",
+						contain: isTopmost,
+						restoreFocus: true,
+						children: /* @__PURE__ */ jsx("div", {
+							...dialogRootPropsRest,
+							"aria-describedby": resolvedModalAriaProps["aria-describedby"],
+							"aria-label": resolvedModalAriaProps["aria-label"],
+							"aria-labelledby": resolvedModalAriaProps["aria-labelledby"],
+							"aria-modal": isTopmost ? "true" : void 0,
+							className: clsx("str-chat__modal__dialog", dialogRootClassName),
+							inert: isTopmost ? void 0 : true,
+							onKeyDown: handleDialogKeyDown,
+							ref: dialogRef,
+							role,
+							tabIndex: isTopmost ? 0 : -1,
+							children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
+								id: `${resolvedDialogId}-floating-dialog-manager`,
+								portalDestinationProps: {
+									captureOutsideClicks: true,
+									className: "str-chat__modal__floating-dialog-overlay"
+								},
+								children: [children, isTopmost && /* @__PURE__ */ jsx(AriaLiveOutlet, { layer: 1 })]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(NotificationList$1, {
+						className: "str-chat__modal__notification-list",
+						panel: "modal",
+						verticalAlignment: "top"
+					}),
+					CloseButtonOnOverlay && /* @__PURE__ */ jsx(CloseButtonOnOverlay, {
+						onClick: handleCloseButtonClick,
+						ref: closeButtonRef
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { GlobalModal };
+
+//# sourceMappingURL=GlobalModal.mjs.map