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

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

@@ -1,12 +1,12 @@
-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 { 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({ channelUnreadUiState, components, customClasses, lastOwnMessage, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownMessagesDeliveredToOthers, readData, sharedMessageProps: messageProps }) {
+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;
@@ -33,23 +33,22 @@ function defaultRenderMessages({ channelUnreadUiState, components, customClasses
 				message,
 				unsafeHTML: messageProps.unsafeHTML
 			})
-		}, message.id || message.created_at.toISOString()));
+		}, 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({
-				firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
+				...channelUnreadUiState,
+				channel,
+				firstUnreadMessageId: channelUnreadUiState?.firstUnreadMessageId,
 				isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,
-				lastReadDate: channelUnreadUiState?.last_read,
-				lastReadMessageId: channelUnreadUiState?.last_read_message_id,
 				message,
-				previousMessage,
-				unreadMessageCount: channelUnreadUiState?.unread_messages
+				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?.unread_messages })
+				children: /* @__PURE__ */ jsx(UnreadMessagesSeparator$1, { unreadCount: channelUnreadUiState?.unreadCount })
 			}), /* @__PURE__ */ jsx(MessageListItem, {
 				className: messageClass,
 				"data-index": index,
@@ -58,13 +57,14 @@ function defaultRenderMessages({ channelUnreadUiState, components, customClasses
 				children: /* @__PURE__ */ jsx(Message, {
 					deliveredTo: ownMessagesDeliveredToOthers[message.id] || [],
 					groupStyles: [groupStyles],
+					highlighted: focusedMessageId === message.id,
 					lastOwnMessage,
 					lastReceivedId,
 					message,
 					readBy: readData[message.id] || [],
 					...messageProps
 				})
-			})] }, message.id || message.created_at.toISOString()));
+			})] }, message.id || String(message.created_at)));
 			previousMessage = message;
 		}
 	}

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

@@ -1 +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"}
+{"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

@@ -1,6 +1,7 @@
 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
 /**
@@ -21,7 +22,7 @@ import { nanoid } from "nanoid";
 */
 var processMessages = (params) => {
 	const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;
-	const { enableDateSeparator, hideDeletedMessages, hideNewMessageSeparator, lastRead, userId } = context;
+	const { hideDeletedMessages, hideNewMessageSeparator, lastRead, userId, withDateSeparator } = context;
 	let unread = false;
 	let ephemeralMessagePresent = false;
 	let lastDateSeparator;
@@ -35,26 +36,31 @@ var processMessages = (params) => {
 			continue;
 		}
 		const changes = [];
-		const messageDate = message.created_at && isDate(message.created_at) && message.created_at.toDateString() || "";
+		const messageCreatedAt = convertTimestampToDate(message.created_at);
+		const messageDate = messageCreatedAt ? messageCreatedAt.toDateString() : "";
 		const previousMessage = messages[i - 1];
-		let prevMessageDate = messageDate;
-		if (enableDateSeparator && previousMessage?.created_at && isDate(previousMessage.created_at)) prevMessageDate = previousMessage.created_at.toDateString();
+		const previousCreatedAt = withDateSeparator ? convertTimestampToDate(previousMessage?.created_at) : void 0;
+		const prevMessageDate = previousCreatedAt ? previousCreatedAt.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
-			});
+			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 (enableDateSeparator && (i === 0 || messageDate !== prevMessageDate || hideDeletedMessages && previousMessage?.type === "deleted" && lastDateSeparator !== messageDate) && !isDateSeparatorMessage(changes[changes.length - 1])) {
+		if (withDateSeparator && (i === 0 || messageDate !== prevMessageDate || hideDeletedMessages && previousMessage?.type === "deleted" && lastDateSeparator !== messageDate) && !isDateSeparatorMessage(changes[changes.length - 1])) {
 			lastDateSeparator = messageDate;
-			changes.push({
+			const separator = messageCreatedAt && {
 				customType: CUSTOM_MESSAGE_TYPE.date,
-				date: message.created_at,
-				id: makeDateMessageId(message.created_at)
-			}, message);
+				date: messageCreatedAt,
+				id: makeDateMessageId(messageCreatedAt)
+			};
+			changes.push(...separator ? [separator] : [], message);
 		} else changes.push(message);
 		newMessages.push(...reviewProcessedMessage?.({
 			changes,
@@ -87,7 +93,7 @@ var getLastReceived = (messages) => {
 var insertIntro = (messages, headerPosition) => {
 	const newMessages = messages;
 	const intro = makeIntroMessage();
-	if (!headerPosition) {
+	if (headerPosition == null) {
 		newMessages.unshift(intro);
 		return newMessages;
 	}
@@ -96,19 +102,16 @@ var insertIntro = (messages, headerPosition) => {
 		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) {
+		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;
-			if (!nextMessageTime) {
-				newMessages.push(intro);
-				return newMessages;
-			}
 		} else {
 			newMessages.splice(i + 1, 0, intro);
 			return newMessages;
 		}
 	}
+	newMessages.unshift(intro);
 	return newMessages;
 };
 var isNonEmptyRecord = (record) => {
@@ -118,8 +121,8 @@ var isNonEmptyRecord = (record) => {
 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;
+	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";
@@ -141,15 +144,19 @@ function isDateSeparatorMessage(message) {
 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;
+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 || !!unreadMessageCount && messageIsUnread && (isFirstMessage || previousMessageIsLastRead);
+	return firstUnreadMessageId === message.id || messageIsUnread && (isFirstMessage || previousMessageIsLastRead);
 };
 //#endregion
-export { getGroupStyles, getIsFirstUnreadMessage, getLastReceived, hasMoreMessagesProbably, insertIntro, isDateSeparatorMessage, isIntroMessage, isLocalMessage, makeDateMessageId, makeIntroMessage, processMessages };
+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

@@ -1 +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 { LocalMessage, MessageLabel } 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  date: Date;\n  id: string;\n  type: MessageLabel;\n  unread: boolean;\n};\n\nexport type RenderedMessage = LocalMessage | DateSeparatorMessage | IntroMessage;\n\ntype ProcessMessagesContext = {\n  /** the connected user ID */\n  userId: string;\n  /** Enable date separator */\n  enableDateSeparator?: boolean;\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 */\n  lastRead?: Date | null;\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    enableDateSeparator,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    lastRead,\n    userId,\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    const messageDate =\n      (message.created_at &&\n        isDate(message.created_at) &&\n        message.created_at.toDateString()) ||\n      '';\n    const previousMessage = messages[i - 1];\n    let prevMessageDate = messageDate;\n\n    if (\n      enableDateSeparator &&\n      previousMessage?.created_at &&\n      isDate(previousMessage.created_at)\n    ) {\n      prevMessageDate = previousMessage.created_at.toDateString();\n    }\n\n    if (!unread && !hideNewMessageSeparator) {\n      unread =\n        (lastRead && message.created_at && new Date(lastRead) < message.created_at) ||\n        false;\n\n      // do not show date separator for current user's messages\n      if (enableDateSeparator && unread && message.user?.id !== userId) {\n        changes.push({\n          customType: CUSTOM_MESSAGE_TYPE.date,\n          date: message.created_at,\n          id: makeDateMessageId(message.created_at),\n          unread,\n        } as DateSeparatorMessage);\n      }\n    }\n\n    if (\n      enableDateSeparator &&\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      changes.push(\n        {\n          customType: CUSTOM_MESSAGE_TYPE.date,\n          date: message.created_at,\n          id: makeDateMessageId(message.created_at),\n        } as DateSeparatorMessage,\n        message,\n      );\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 = (messages: RenderedMessage[], headerPosition?: number) => {\n  const newMessages = messages;\n  const intro = makeIntroMessage();\n\n  // if no headerPosition is set, HeaderComponent will go at the top\n  if (!headerPosition) {\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 = isDate((messages[i] as LocalMessage).created_at)\n      ? (messages[i] as LocalMessage).created_at.getTime()\n      : null;\n\n    const nextMessageTime = isDate((messages[i + 1] as LocalMessage).created_at)\n      ? (messages[i + 1] as LocalMessage).created_at.getTime()\n      : null;\n\n    // header position is smaller than message time so comes after;\n    if (messageTime && messageTime < headerPosition) {\n      // if header position is also smaller than message time continue;\n      if (nextMessageTime && nextMessageTime < headerPosition) {\n        if (messages[i + 1] && isDateSeparatorMessage(messages[i + 1])) continue;\n        if (!nextMessageTime) {\n          newMessages.push(intro);\n          return newMessages;\n        }\n      } else {\n        newMessages.splice(i + 1, 0, intro);\n        return newMessages;\n      }\n    }\n  }\n\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      previousMessage.created_at &&\n      message.created_at &&\n      new Date(message.created_at).getTime() -\n        new Date(previousMessage.created_at).getTime() >\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 &&\n      message.created_at &&\n      new Date(nextMessage.created_at).getTime() -\n        new Date(message.created_at).getTime() >\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 const getIsFirstUnreadMessage = ({\n  firstUnreadMessageId,\n  isFirstMessage,\n  lastReadDate,\n  lastReadMessageId,\n  message,\n  previousMessage,\n  unreadMessageCount = 0,\n}: {\n  isFirstMessage: boolean;\n  message: LocalMessage;\n  firstUnreadMessageId?: string;\n  lastReadDate?: Date;\n  lastReadMessageId?: string;\n  previousMessage?: RenderedMessage;\n  unreadMessageCount?: number;\n}) => {\n  // prevent showing unread indicator in threads\n  if (message.parent_id) return false;\n\n  const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();\n  const lastReadTimestamp = lastReadDate?.getTime();\n\n  const messageIsUnread =\n    !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;\n\n  const previousMessageIsLastRead =\n    !!lastReadMessageId && lastReadMessageId === previousMessage?.id;\n\n  return (\n    firstUnreadMessageId === message.id ||\n    (!!unreadMessageCount &&\n      messageIsUnread &&\n      (isFirstMessage || previousMessageIsLastRead))\n  );\n};\n"],"mappings":"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"}
+{"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":"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"}

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

@@ -3,11 +3,11 @@ 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 { ModalContextProvider } from "../../context/ModalContext.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 { NotificationList } from "../Notifications/NotificationList.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";

package/dist/es/components/Notifications/Notification.mjs

@@ -1,32 +1,33 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { Button } from "../Button/Button.mjs";
 import { useNotificationApi } from "./hooks/useNotificationApi.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { forwardRef } from "react";
+import "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import "stream-chat";
 //#region src/components/Notifications/Notification.tsx
 var DefaultNotificationIcon = ({ notification }) => {
 	const { IconCheckmark, IconExclamationMark, IconExclamationTriangleFill, IconRefresh } = useComponentContextIcons();
-	if (!notification.severity) return null;
-	const Icon = {
+	const IconsBySeverity = {
 		error: IconExclamationMark,
 		info: null,
 		loading: IconRefresh,
 		success: IconCheckmark,
 		warning: IconExclamationTriangleFill
-	}[notification.severity] ?? null;
+	};
+	if (!notification.severity) return null;
+	const Icon = IconsBySeverity[notification.severity] ?? null;
 	return Icon && /* @__PURE__ */ jsx("div", {
 		className: "str-chat__notification-icon",
 		children: /* @__PURE__ */ jsx(Icon, {})
 	});
 };
 var Notification = forwardRef(({ className, entryDirection, Icon = DefaultNotificationIcon, notification, onDismiss, showClose = false, transitionState }, ref) => {
-	const { IconXmark } = useComponentContextIcons();
 	const { removeNotification } = useNotificationApi();
 	const { t } = useTranslationContext();
-	const displayMessage = t("translationBuilderTopic/notification", {
+	const { IconXmark } = useComponentContextIcons();
+	const displayMessage = t("translationBuilderTopic.notification", {
 		notification,
 		value: notification.message
 	});
@@ -72,7 +73,7 @@ var Notification = forwardRef(({ className, entryDirection, Icon = DefaultNotifi
 			}),
 			(showClose || isPersistent) && /* @__PURE__ */ jsx(Button, {
 				appearance: "ghost",
-				"aria-label": t("aria/Dismiss notification"),
+				"aria-label": t("notification.dismissNotification.ariaLabel", "Dismiss notification"),
 				circular: true,
 				className: "str-chat__notification-close-button",
 				inverseTheme: true,

package/dist/es/components/Notifications/Notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.mjs","names":[],"sources":["../../../../src/components/Notifications/Notification.tsx"],"sourcesContent":["import React, { type ComponentType, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NotificationSeverity } from 'stream-chat';\nimport { type Notification as NotificationType } from 'stream-chat';\n\nimport { useComponentContextIcons } from '../../context';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { Button } from '../Button';\nimport { useNotificationApi } from './hooks/useNotificationApi';\n\ntype NotificationEntryDirection = 'bottom' | 'left' | 'right' | 'top';\ntype NotificationTransitionState = 'enter' | 'exit';\n\nexport type NotificationIconProps = {\n  notification: NotificationType;\n};\n\nconst DefaultNotificationIcon = ({ notification }: NotificationIconProps) => {\n  const { IconCheckmark, IconExclamationMark, IconExclamationTriangleFill, IconRefresh } =\n    useComponentContextIcons();\n  if (!notification.severity) return null;\n\n  const iconsBySeverity: Record<NotificationSeverity, ComponentType | null> = {\n    error: IconExclamationMark,\n    info: null,\n    loading: IconRefresh,\n    success: IconCheckmark,\n    warning: IconExclamationTriangleFill,\n  };\n\n  const Icon = iconsBySeverity[notification.severity] ?? null;\n  return (\n    Icon && (\n      <div className='str-chat__notification-icon'>\n        <Icon />\n      </div>\n    )\n  );\n};\n\nexport type NotificationProps = {\n  /** Notification from client.notifications state */\n  notification: NotificationType;\n  /** Optional class name */\n  className?: string;\n  /** Direction from which the notification enters. */\n  entryDirection?: NotificationEntryDirection;\n  /** Optional custom icon component. */\n  Icon?: React.ComponentType<NotificationIconProps>;\n  /** Optional dismiss handler */\n  onDismiss?: () => void;\n  /** Show close button (for persistent notifications) */\n  showClose?: boolean;\n  /** Optional transition state applied by NotificationList. */\n  transitionState?: NotificationTransitionState;\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      className,\n      entryDirection,\n      Icon = DefaultNotificationIcon,\n      notification,\n      onDismiss,\n      showClose = false,\n      transitionState,\n    }: NotificationProps,\n    ref,\n  ) => {\n    const { IconXmark } = useComponentContextIcons();\n\n    const { removeNotification } = useNotificationApi();\n    const { t } = useTranslationContext();\n\n    const displayMessage = t('translationBuilderTopic/notification', {\n      notification,\n      value: notification.message,\n    });\n\n    const handleDismiss = () => {\n      if (onDismiss) {\n        onDismiss();\n        return;\n      }\n\n      removeNotification(notification.id);\n    };\n\n    const isPersistent = !notification.duration;\n\n    const severity = notification.severity;\n    // Priority defaults from severity (errors interrupt; everything else is polite), but a\n    // notification may explicitly opt into a different aria-live priority via\n    // `metadata.ariaLive` — e.g. a success confirmation that should be heard promptly rather than\n    // queued behind a focus-change announcement (see `addNotification`'s `ariaLive` option).\n    const ariaLiveOverride = notification.metadata?.ariaLive;\n    const livePriority: 'assertive' | 'polite' =\n      ariaLiveOverride === 'assertive' || ariaLiveOverride === 'polite'\n        ? ariaLiveOverride\n        : severity === 'error'\n          ? 'assertive'\n          : 'polite';\n\n    return (\n      <div\n        className={clsx(\n          'str-chat__notification',\n          entryDirection && `str-chat__notification--enter-from-${entryDirection}`,\n          transitionState === 'enter' && 'str-chat__notification--is-entering',\n          transitionState === 'exit' && 'str-chat__notification--is-exiting',\n          severity && `str-chat__notification--${severity}`,\n          severity === 'loading' && 'str-chat__notification--loading',\n          className,\n        )}\n        data-testid='notification'\n        ref={ref}\n      >\n        <div className='str-chat__notification-content'>\n          {Icon && <Icon notification={notification} />}\n          <div\n            aria-atomic='true'\n            aria-live={livePriority}\n            className='str-chat__notification-message'\n            role={livePriority === 'assertive' ? 'alert' : 'status'}\n          >\n            {displayMessage}\n          </div>\n        </div>\n        {notification.actions && notification.actions.length > 0 && (\n          <div className='str-chat__notification-actions'>\n            {notification.actions.map((action, index) => (\n              <Button\n                appearance='outline'\n                className='str-chat__notification-action'\n                inverseTheme\n                key={index}\n                onClick={() => {\n                  action.handler();\n                }}\n                size='sm'\n                variant='secondary'\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n        {(showClose || isPersistent) && (\n          <Button\n            appearance='ghost'\n            aria-label={t('aria/Dismiss notification')}\n            circular\n            className='str-chat__notification-close-button'\n            inverseTheme\n            onClick={handleDismiss}\n            size='sm'\n            variant='secondary'\n          >\n            <IconXmark />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nNotification.displayName = 'Notification';\n"],"mappings":";;;;;;;;;AAiBA,IAAM,2BAA2B,EAAE,mBAA0C;CAC3E,MAAM,EAAE,eAAe,qBAAqB,6BAA6B,gBACvE,yBAAyB;CAC3B,IAAI,CAAC,aAAa,UAAU,OAAO;CAUnC,MAAM,OAAO;EAPX,OAAO;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,SAAS;CAGE,EAAgB,aAAa,aAAa;CACvD,OACE,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,MAAD,CAAO,CAAA;CACJ,CAAA;AAGX;AAmBA,IAAa,eAAe,YAExB,EACE,WACA,gBACA,OAAO,yBACP,cACA,WACA,YAAY,OACZ,mBAEF,QACG;CACH,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,EAAE,uBAAuB,mBAAmB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,iBAAiB,EAAE,wCAAwC;EAC/D;EACA,OAAO,aAAa;CACtB,CAAC;CAED,MAAM,sBAAsB;EAC1B,IAAI,WAAW;GACb,UAAU;GACV;EACF;EAEA,mBAAmB,aAAa,EAAE;CACpC;CAEA,MAAM,eAAe,CAAC,aAAa;CAEnC,MAAM,WAAW,aAAa;CAK9B,MAAM,mBAAmB,aAAa,UAAU;CAChD,MAAM,eACJ,qBAAqB,eAAe,qBAAqB,WACrD,mBACA,aAAa,UACX,cACA;CAER,OACE,qBAAC,OAAD;EACE,WAAW,KACT,0BACA,kBAAkB,sCAAsC,kBACxD,oBAAoB,WAAW,uCAC/B,oBAAoB,UAAU,sCAC9B,YAAY,2BAA2B,YACvC,aAAa,aAAa,mCAC1B,SACF;EACA,eAAY;EACP;YAXP;GAaE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,QAAQ,oBAAC,MAAD,EAAoB,aAAe,CAAA,GAC5C,oBAAC,OAAD;KACE,eAAY;KACZ,aAAW;KACX,WAAU;KACV,MAAM,iBAAiB,cAAc,UAAU;eAE9C;IACE,CAAA,CACF;;GACJ,aAAa,WAAW,aAAa,QAAQ,SAAS,KACrD,oBAAC,OAAD;IAAK,WAAU;cACZ,aAAa,QAAQ,KAAK,QAAQ,UACjC,oBAAC,QAAD;KACE,YAAW;KACX,WAAU;KACV,cAAA;KAEA,eAAe;MACb,OAAO,QAAQ;KACjB;KACA,MAAK;KACL,SAAQ;eAEP,OAAO;IACF,GARD,KAQC,CACT;GACE,CAAA;IAEL,aAAa,iBACb,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EAAE,2BAA2B;IACzC,UAAA;IACA,WAAU;IACV,cAAA;IACA,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EAEP;;AAET,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"Notification.mjs","names":[],"sources":["../../../../src/components/Notifications/Notification.tsx"],"sourcesContent":["import React, { type ComponentType, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NotificationSeverity } from 'stream-chat';\nimport { type Notification as NotificationType } from 'stream-chat';\n\nimport { useComponentContextIcons } from '../../context';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { Button } from '../Button';\nimport { useNotificationApi } from './hooks/useNotificationApi';\n\ntype NotificationEntryDirection = 'bottom' | 'left' | 'right' | 'top';\ntype NotificationTransitionState = 'enter' | 'exit';\n\nexport type NotificationIconProps = {\n  notification: NotificationType;\n};\n\nconst DefaultNotificationIcon = ({ notification }: NotificationIconProps) => {\n  const { IconCheckmark, IconExclamationMark, IconExclamationTriangleFill, IconRefresh } =\n    useComponentContextIcons();\n\n  const IconsBySeverity: Record<NotificationSeverity, ComponentType | null> = {\n    error: IconExclamationMark,\n    info: null,\n    loading: IconRefresh,\n    success: IconCheckmark,\n    warning: IconExclamationTriangleFill,\n  };\n\n  if (!notification.severity) return null;\n\n  const Icon = IconsBySeverity[notification.severity] ?? null;\n  return (\n    Icon && (\n      <div className='str-chat__notification-icon'>\n        <Icon />\n      </div>\n    )\n  );\n};\n\nexport type NotificationProps = {\n  /** Notification from client.notifications state */\n  notification: NotificationType;\n  /** Optional class name */\n  className?: string;\n  /** Direction from which the notification enters. */\n  entryDirection?: NotificationEntryDirection;\n  /** Optional custom icon component. */\n  Icon?: React.ComponentType<NotificationIconProps>;\n  /** Optional dismiss handler */\n  onDismiss?: () => void;\n  /** Show close button (for persistent notifications) */\n  showClose?: boolean;\n  /** Optional transition state applied by NotificationList. */\n  transitionState?: NotificationTransitionState;\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      className,\n      entryDirection,\n      Icon = DefaultNotificationIcon,\n      notification,\n      onDismiss,\n      showClose = false,\n      transitionState,\n    }: NotificationProps,\n    ref,\n  ) => {\n    const { removeNotification } = useNotificationApi();\n    const { t } = useTranslationContext();\n    const { IconXmark } = useComponentContextIcons();\n\n    const displayMessage = t('translationBuilderTopic.notification', {\n      notification,\n      value: notification.message,\n    });\n\n    const handleDismiss = () => {\n      if (onDismiss) {\n        onDismiss();\n        return;\n      }\n\n      removeNotification(notification.id);\n    };\n\n    const isPersistent = !notification.duration;\n\n    const severity = notification.severity;\n    // Priority defaults from severity (errors interrupt; everything else is polite), but a\n    // notification may explicitly opt into a different aria-live priority via\n    // `metadata.ariaLive` — e.g. a success confirmation that should be heard promptly rather than\n    // queued behind a focus-change announcement (see `addNotification`'s `ariaLive` option).\n    const ariaLiveOverride = notification.metadata?.ariaLive;\n    const livePriority: 'assertive' | 'polite' =\n      ariaLiveOverride === 'assertive' || ariaLiveOverride === 'polite'\n        ? ariaLiveOverride\n        : severity === 'error'\n          ? 'assertive'\n          : 'polite';\n\n    return (\n      <div\n        className={clsx(\n          'str-chat__notification',\n          entryDirection && `str-chat__notification--enter-from-${entryDirection}`,\n          transitionState === 'enter' && 'str-chat__notification--is-entering',\n          transitionState === 'exit' && 'str-chat__notification--is-exiting',\n          severity && `str-chat__notification--${severity}`,\n          severity === 'loading' && 'str-chat__notification--loading',\n          className,\n        )}\n        data-testid='notification'\n        ref={ref}\n      >\n        <div className='str-chat__notification-content'>\n          {Icon && <Icon notification={notification} />}\n          <div\n            aria-atomic='true'\n            aria-live={livePriority}\n            className='str-chat__notification-message'\n            role={livePriority === 'assertive' ? 'alert' : 'status'}\n          >\n            {displayMessage}\n          </div>\n        </div>\n        {notification.actions && notification.actions.length > 0 && (\n          <div className='str-chat__notification-actions'>\n            {notification.actions.map((action, index) => (\n              <Button\n                appearance='outline'\n                className='str-chat__notification-action'\n                inverseTheme\n                key={index}\n                onClick={() => {\n                  action.handler();\n                }}\n                size='sm'\n                variant='secondary'\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n        {(showClose || isPersistent) && (\n          <Button\n            appearance='ghost'\n            aria-label={t(\n              'notification.dismissNotification.ariaLabel',\n              'Dismiss notification',\n            )}\n            circular\n            className='str-chat__notification-close-button'\n            inverseTheme\n            onClick={handleDismiss}\n            size='sm'\n            variant='secondary'\n          >\n            <IconXmark />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nNotification.displayName = 'Notification';\n"],"mappings":";;;;;;;;;AAiBA,IAAM,2BAA2B,EAAE,mBAA0C;CAC3E,MAAM,EAAE,eAAe,qBAAqB,6BAA6B,gBACvE,yBAAyB;CAE3B,MAAM,kBAAsE;EAC1E,OAAO;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,SAAS;CACX;CAEA,IAAI,CAAC,aAAa,UAAU,OAAO;CAEnC,MAAM,OAAO,gBAAgB,aAAa,aAAa;CACvD,OACE,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,MAAD,CAAO,CAAA;CACJ,CAAA;AAGX;AAmBA,IAAa,eAAe,YAExB,EACE,WACA,gBACA,OAAO,yBACP,cACA,WACA,YAAY,OACZ,mBAEF,QACG;CACH,MAAM,EAAE,uBAAuB,mBAAmB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,iBAAiB,EAAE,wCAAwC;EAC/D;EACA,OAAO,aAAa;CACtB,CAAC;CAED,MAAM,sBAAsB;EAC1B,IAAI,WAAW;GACb,UAAU;GACV;EACF;EAEA,mBAAmB,aAAa,EAAE;CACpC;CAEA,MAAM,eAAe,CAAC,aAAa;CAEnC,MAAM,WAAW,aAAa;CAK9B,MAAM,mBAAmB,aAAa,UAAU;CAChD,MAAM,eACJ,qBAAqB,eAAe,qBAAqB,WACrD,mBACA,aAAa,UACX,cACA;CAER,OACE,qBAAC,OAAD;EACE,WAAW,KACT,0BACA,kBAAkB,sCAAsC,kBACxD,oBAAoB,WAAW,uCAC/B,oBAAoB,UAAU,sCAC9B,YAAY,2BAA2B,YACvC,aAAa,aAAa,mCAC1B,SACF;EACA,eAAY;EACP;YAXP;GAaE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,QAAQ,oBAAC,MAAD,EAAoB,aAAe,CAAA,GAC5C,oBAAC,OAAD;KACE,eAAY;KACZ,aAAW;KACX,WAAU;KACV,MAAM,iBAAiB,cAAc,UAAU;eAE9C;IACE,CAAA,CACF;;GACJ,aAAa,WAAW,aAAa,QAAQ,SAAS,KACrD,oBAAC,OAAD;IAAK,WAAU;cACZ,aAAa,QAAQ,KAAK,QAAQ,UACjC,oBAAC,QAAD;KACE,YAAW;KACX,WAAU;KACV,cAAA;KAEA,eAAe;MACb,OAAO,QAAQ;KACjB;KACA,MAAK;KACL,SAAQ;eAEP,OAAO;IACF,GARD,KAQC,CACT;GACE,CAAA;IAEL,aAAa,iBACb,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EACV,8CACA,sBACF;IACA,UAAA;IACA,WAAU;IACV,cAAA;IACA,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EAEP;;AAET,CACF;AAEA,aAAa,cAAc"}

package/dist/es/components/Notifications/NotificationList.mjs

@@ -117,15 +117,13 @@ var defaultPickNext = createDefaultPickNext(pickOldest);
 var NotificationList = ({ className, enterFrom = "bottom", fallbackPanel, filter, minDisplayMs = DEFAULT_MIN_DISPLAY_MS, panel, pickNext = defaultPickNext, verticalAlignment = "bottom" }) => {
 	const { Notification: NotificationComponent = Notification } = useComponentContext();
 	const { t } = useTranslationContext();
-	const { removeNotification, startNotificationTimeout } = useNotificationApi();
+	const { ensureNotificationTimeout, removeNotification } = useNotificationApi();
 	const exitTimeoutRef = useRef(null);
 	const replacementTimeoutRef = useRef(null);
 	const candidateRef = useRef(null);
 	const displayedAtRef = useRef(null);
 	const listRef = useRef(null);
 	const observedElementRef = useRef(null);
-	const startedTimeoutIdsRef = useRef(null);
-	if (!startedTimeoutIdsRef.current) startedTimeoutIdsRef.current = /* @__PURE__ */ new Set();
 	const [displayedNotification, setDisplayedNotification] = useState(null);
 	const [transitionState, setTransitionState] = useState("enter");
 	const notifications = useNotifications({
@@ -138,15 +136,8 @@ var NotificationList = ({ className, enterFrom = "bottom", fallbackPanel, filter
 		panel
 	});
 	const dismiss = useCallback((id) => {
-		startedTimeoutIdsRef.current?.delete(id);
 		removeNotification(id);
 	}, [removeNotification]);
-	useEffect(() => {
-		const notificationIds = new Set(notifications.map(({ id }) => id));
-		startedTimeoutIdsRef.current?.forEach((id) => {
-			if (!notificationIds.has(id)) startedTimeoutIdsRef.current?.delete(id);
-		});
-	}, [notifications]);
 	const clearReplacementTimeout = useCallback(() => {
 		if (replacementTimeoutRef.current !== null) {
 			window.clearTimeout(replacementTimeoutRef.current);
@@ -202,10 +193,7 @@ var NotificationList = ({ className, enterFrom = "bottom", fallbackPanel, filter
 			const wasInStore = displayedInStore;
 			exitTimeoutRef.current = window.setTimeout(() => {
 				exitTimeoutRef.current = null;
-				if (wasInStore) {
-					startedTimeoutIdsRef.current?.delete(previousId);
-					removeNotification(previousId);
-				}
+				if (wasInStore) removeNotification(previousId);
 				const next = candidateRef.current;
 				if (next && next.id !== previousId) {
 					displayedAtRef.current = Date.now();
@@ -249,9 +237,7 @@ var NotificationList = ({ className, enterFrom = "bottom", fallbackPanel, filter
 		const element = observedElementRef.current;
 		if (!element || !notification || transitionState === "exit") return;
 		const startTimeout = () => {
-			if (!startedTimeoutIdsRef.current || startedTimeoutIdsRef.current.has(notification.id)) return;
-			startedTimeoutIdsRef.current.add(notification.id);
-			startNotificationTimeout(notification.id);
+			ensureNotificationTimeout(notification.id);
 		};
 		if (typeof IntersectionObserver === "undefined") {
 			startTimeout();
@@ -271,13 +257,13 @@ var NotificationList = ({ className, enterFrom = "bottom", fallbackPanel, filter
 			observer.disconnect();
 		};
 	}, [
+		ensureNotificationTimeout,
 		notification,
-		startNotificationTimeout,
 		transitionState
 	]);
 	if (!notification) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		"aria-label": t("aria/Notifications"),
+		"aria-label": t("notification.list.notifications.ariaLabel", "Notifications"),
 		className: clsx("str-chat__notification-list", `str-chat__notification-list--enter-from-${notificationEnterFrom}`, `str-chat__notification-list--position-${verticalAlignment}`, panel && `str-chat__notification-list--${panel}`, className),
 		"data-testid": "notification-list",
 		ref: listRef,