stream-chat-react 14.11.1 → 14.12.0

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

@@ -0,0 +1,93 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
+import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
+import { Message } from "../Message/Message.mjs";
+import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from "./utils.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import throttle from "lodash.throttle";
+//#region src/components/MessageList/VirtualizedMessageListComponents.tsx
+var PREPEND_OFFSET = 10 ** 7;
+function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
+	return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
+}
+function calculateFirstItemIndex(numItemsPrepended) {
+	return PREPEND_OFFSET - numItemsPrepended;
+}
+var makeItemsRenderedHandler = (renderedItemsActions, processedMessages) => throttle((items) => {
+	const renderedMessages = items.map((item) => {
+		if (!item.originalIndex) return void 0;
+		return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];
+	}).filter((msg) => !!msg);
+	renderedItemsActions.forEach((action) => action(renderedMessages));
+}, 200);
+var Item = ({ context, ...props }) => {
+	if (!context) return /* @__PURE__ */ jsx(Fragment$1, {});
+	const message = context.processedMessages[calculateItemIndex(props["data-item-index"], context.numItemsPrepended)];
+	const groupStyles = context.messageGroupStyles[message.id];
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: context?.customClasses?.virtualMessage || clsx("str-chat__virtual-list-message-wrapper str-chat__li", { [`str-chat__li--${groupStyles}`]: groupStyles })
+	});
+};
+var Header = ({ context }) => {
+	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = useComponentContext("VirtualizedMessageListHeader");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [context?.head, context?.loadingMore && LoadingIndicator$1 && /* @__PURE__ */ jsx("div", {
+		className: "str-chat__virtual-list__loading",
+		children: /* @__PURE__ */ jsx(LoadingIndicator$1, {})
+	})] });
+};
+var EmptyPlaceholder = ({ context }) => {
+	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator } = useComponentContext("VirtualizedMessageList");
+	if (typeof context?.processedMessages !== "undefined" && context.processedMessages.length > 0) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: EmptyStateIndicator$1 && /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: context?.threadList ? "thread" : "message" }) });
+};
+var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
+	const { additionalMessageComposerProps, closeReactionSelectorOnClick, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastOwnMessage, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, openThread, ownMessagesDeliveredToOthers, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, renderText, returnAllReadData, showAvatar, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef } = virtuosoContext;
+	const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
+	if (customMessageRenderer) return customMessageRenderer(messageList, streamMessageIndex);
+	const message = messageList[streamMessageIndex];
+	if (!message || isIntroMessage(message)) return /* @__PURE__ */ jsx("div", { style: { height: "1px" } });
+	if (isDateSeparatorMessage(message)) return DateSeparator ? /* @__PURE__ */ jsx(DateSeparator, {
+		date: message.date,
+		unread: message.unread
+	}) : null;
+	if (message.type === "system") return MessageSystem ? /* @__PURE__ */ jsx(MessageSystem, { message }) : null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [getIsFirstUnreadMessage({
+		firstUnreadMessageId,
+		isFirstMessage: streamMessageIndex === 0,
+		lastReadDate,
+		lastReadMessageId,
+		message,
+		previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : void 0,
+		unreadMessageCount
+	}) && /* @__PURE__ */ jsx("div", {
+		className: "str-chat__unread-messages-separator-wrapper",
+		children: /* @__PURE__ */ jsx(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })
+	}), /* @__PURE__ */ jsx(Message, {
+		additionalMessageComposerProps,
+		autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom,
+		closeReactionSelectorOnClick,
+		deliveredTo: ownMessagesDeliveredToOthers[message.id] || [],
+		formatDate,
+		groupStyles: [messageGroupStyles[message.id] ?? ""],
+		lastOwnMessage,
+		lastReceivedId: lastReceivedMessageId,
+		message,
+		Message: MessageUIComponent,
+		messageActions,
+		openThread,
+		reactionDetailsSort,
+		readBy: ownMessagesReadByOthers[message.id] || [],
+		renderText,
+		returnAllReadData,
+		showAvatar,
+		sortReactions,
+		threadList
+	})] });
+};
+//#endregion
+export { EmptyPlaceholder, Header, Item, calculateFirstItemIndex, calculateItemIndex, makeItemsRenderedHandler, messageRenderer };
+
+//# sourceMappingURL=VirtualizedMessageListComponents.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedMessageListComponents.mjs","names":[],"sources":["../../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport throttle from 'lodash.throttle';\nimport React from 'react';\nimport type { ItemProps, ListItem } from 'react-virtuoso';\n\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';\nimport { Message } from '../Message';\n\nimport { useComponentContext } from '../../context';\nimport type { GroupStyle, RenderedMessage } from './utils';\nimport { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';\nimport type { VirtuosoContext } from './VirtualizedMessageList';\nimport type { UnknownType } from '../../types/types';\n\nconst PREPEND_OFFSET = 10 ** 7;\n\nexport function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number) {\n  return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;\n}\n\nexport function calculateFirstItemIndex(numItemsPrepended: number) {\n  return PREPEND_OFFSET - numItemsPrepended;\n}\n\nexport const makeItemsRenderedHandler = (\n  renderedItemsActions: Array<(msg: RenderedMessage[]) => void>,\n  processedMessages: RenderedMessage[],\n) =>\n  throttle((items: ListItem<UnknownType>[]) => {\n    const renderedMessages = items\n      .map((item) => {\n        if (!item.originalIndex) return undefined;\n        return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];\n      })\n      .filter((msg) => !!msg);\n    renderedItemsActions.forEach((action) =>\n      action(renderedMessages as RenderedMessage[]),\n    );\n  }, 200);\n\ntype CommonVirtuosoComponentProps = {\n  context?: VirtuosoContext;\n};\n// using 'display: inline-block'\n// traps CSS margins of the item elements, preventing incorrect item measurements\nexport const Item = ({ context, ...props }: ItemProps & CommonVirtuosoComponentProps) => {\n  if (!context) return <></>;\n\n  const message =\n    context.processedMessages[\n      calculateItemIndex(props['data-item-index'], context.numItemsPrepended)\n    ];\n  const groupStyles: GroupStyle = context.messageGroupStyles[message.id];\n\n  return (\n    <div\n      {...props}\n      className={\n        context?.customClasses?.virtualMessage ||\n        clsx('str-chat__virtual-list-message-wrapper str-chat__li', {\n          [`str-chat__li--${groupStyles}`]: groupStyles,\n        })\n      }\n    />\n  );\n};\nexport const Header = ({ context }: CommonVirtuosoComponentProps) => {\n  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext(\n    'VirtualizedMessageListHeader',\n  );\n\n  return (\n    <>\n      {context?.head}\n      {context?.loadingMore && LoadingIndicator && (\n        <div className='str-chat__virtual-list__loading'>\n          <LoadingIndicator />\n        </div>\n      )}\n    </>\n  );\n};\nexport const EmptyPlaceholder = ({ context }: CommonVirtuosoComponentProps) => {\n  const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext(\n    'VirtualizedMessageList',\n  );\n  // prevent showing that there are no messages if there actually are messages (for some reason virtuoso decides to render empty placeholder first, even though it has the totalCount prop > 0)\n  if (\n    typeof context?.processedMessages !== 'undefined' &&\n    context.processedMessages.length > 0\n  )\n    return null;\n\n  return (\n    <>\n      {EmptyStateIndicator && (\n        <EmptyStateIndicator listType={context?.threadList ? 'thread' : 'message'} />\n      )}\n    </>\n  );\n};\n\nexport const messageRenderer = (\n  virtuosoIndex: number,\n  _data: UnknownType,\n  virtuosoContext: VirtuosoContext,\n) => {\n  const {\n    additionalMessageComposerProps,\n    closeReactionSelectorOnClick,\n    customMessageRenderer,\n    DateSeparator,\n    firstUnreadMessageId,\n    formatDate,\n    lastOwnMessage,\n    lastReadDate,\n    lastReadMessageId,\n    lastReceivedMessageId,\n    Message: MessageUIComponent,\n    messageActions,\n    messageGroupStyles,\n    MessageSystem,\n    numItemsPrepended,\n    openThread,\n    ownMessagesDeliveredToOthers,\n    ownMessagesReadByOthers,\n    processedMessages: messageList,\n    reactionDetailsSort,\n    renderText,\n    returnAllReadData,\n    showAvatar,\n    sortReactions,\n    threadList,\n    unreadMessageCount = 0,\n    UnreadMessagesSeparator,\n    virtuosoRef,\n  } = virtuosoContext;\n\n  const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);\n\n  if (customMessageRenderer) {\n    return customMessageRenderer(messageList, streamMessageIndex);\n  }\n\n  const message = messageList[streamMessageIndex];\n\n  if (!message || isIntroMessage(message)) return <div style={{ height: '1px' }}></div>; // returning null or zero height breaks the virtuoso\n\n  if (isDateSeparatorMessage(message)) {\n    return DateSeparator ? (\n      <DateSeparator date={message.date} unread={message.unread} />\n    ) : null;\n  }\n\n  if (message.type === 'system') {\n    return MessageSystem ? <MessageSystem message={message} /> : null;\n  }\n\n  const isFirstUnreadMessage = getIsFirstUnreadMessage({\n    firstUnreadMessageId,\n    isFirstMessage: streamMessageIndex === 0,\n    lastReadDate,\n    lastReadMessageId,\n    message,\n    previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : undefined,\n    unreadMessageCount,\n  });\n\n  return (\n    <>\n      {isFirstUnreadMessage && (\n        <div className='str-chat__unread-messages-separator-wrapper'>\n          <UnreadMessagesSeparator unreadCount={unreadMessageCount} />\n        </div>\n      )}\n      <Message\n        additionalMessageComposerProps={additionalMessageComposerProps}\n        autoscrollToBottom={virtuosoRef.current?.autoscrollToBottom}\n        closeReactionSelectorOnClick={closeReactionSelectorOnClick}\n        deliveredTo={ownMessagesDeliveredToOthers[message.id] || []}\n        formatDate={formatDate}\n        groupStyles={[messageGroupStyles[message.id] ?? '']}\n        lastOwnMessage={lastOwnMessage}\n        lastReceivedId={lastReceivedMessageId}\n        message={message}\n        Message={MessageUIComponent}\n        messageActions={messageActions}\n        openThread={openThread}\n        reactionDetailsSort={reactionDetailsSort}\n        readBy={ownMessagesReadByOthers[message.id] || []}\n        renderText={renderText}\n        returnAllReadData={returnAllReadData}\n        showAvatar={showAvatar}\n        sortReactions={sortReactions}\n        threadList={threadList}\n      />\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAeA,IAAM,iBAAiB,MAAM;AAE7B,SAAgB,mBAAmB,eAAuB,mBAA2B;CACnF,OAAO,gBAAgB,oBAAoB;AAC7C;AAEA,SAAgB,wBAAwB,mBAA2B;CACjE,OAAO,iBAAiB;AAC1B;AAEA,IAAa,4BACX,sBACA,sBAEA,UAAU,UAAmC;CAC3C,MAAM,mBAAmB,MACtB,KAAK,SAAS;EACb,IAAI,CAAC,KAAK,eAAe,OAAO,KAAA;EAChC,OAAO,kBAAkB,mBAAmB,KAAK,eAAe,cAAc;CAChF,CAAC,CAAC,CACD,QAAQ,QAAQ,CAAC,CAAC,GAAG;CACxB,qBAAqB,SAAS,WAC5B,OAAO,gBAAqC,CAC9C;AACF,GAAG,GAAG;AAOR,IAAa,QAAQ,EAAE,SAAS,GAAG,YAAsD;CACvF,IAAI,CAAC,SAAS,OAAO,oBAAA,YAAA,CAAI,CAAA;CAEzB,MAAM,UACJ,QAAQ,kBACN,mBAAmB,MAAM,oBAAoB,QAAQ,iBAAiB;CAE1E,MAAM,cAA0B,QAAQ,mBAAmB,QAAQ;CAEnE,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WACE,SAAS,eAAe,kBACxB,KAAK,uDAAuD,GACzD,iBAAiB,gBAAgB,YACpC,CAAC;CAEJ,CAAA;AAEL;AACA,IAAa,UAAU,EAAE,cAA4C;CACnE,MAAM,EAAE,kBAAA,qBAAmB,qBAA4B,oBACrD,8BACF;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,SAAS,MACT,SAAS,eAAe,sBACvB,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,oBAAD,CAAmB,CAAA;CAChB,CAAA,CAEP,EAAA,CAAA;AAEN;AACA,IAAa,oBAAoB,EAAE,cAA4C;CAC7E,MAAM,EAAE,qBAAA,wBAAsB,wBAA+B,oBAC3D,wBACF;CAEA,IACE,OAAO,SAAS,sBAAsB,eACtC,QAAQ,kBAAkB,SAAS,GAEnC,OAAO;CAET,OACE,oBAAA,YAAA,EAAA,UACG,yBACC,oBAAC,uBAAD,EAAqB,UAAU,SAAS,aAAa,WAAW,UAAY,CAAA,EAE9E,CAAA;AAEN;AAEA,IAAa,mBACX,eACA,OACA,oBACG;CACH,MAAM,EACJ,gCACA,8BACA,uBACA,eACA,sBACA,YACA,gBACA,cACA,mBACA,uBACA,SAAS,oBACT,gBACA,oBACA,eACA,mBACA,YACA,8BACA,yBACA,mBAAmB,aACnB,qBACA,YACA,mBACA,YACA,eACA,YACA,qBAAqB,GACrB,yBACA,gBACE;CAEJ,MAAM,qBAAqB,mBAAmB,eAAe,iBAAiB;CAE9E,IAAI,uBACF,OAAO,sBAAsB,aAAa,kBAAkB;CAG9D,MAAM,UAAU,YAAY;CAE5B,IAAI,CAAC,WAAW,eAAe,OAAO,GAAG,OAAO,oBAAC,OAAD,EAAK,OAAO,EAAE,QAAQ,MAAM,EAAQ,CAAA;CAEpF,IAAI,uBAAuB,OAAO,GAChC,OAAO,gBACL,oBAAC,eAAD;EAAe,MAAM,QAAQ;EAAM,QAAQ,QAAQ;CAAS,CAAA,IAC1D;CAGN,IAAI,QAAQ,SAAS,UACnB,OAAO,gBAAgB,oBAAC,eAAD,EAAwB,QAAU,CAAA,IAAI;CAa/D,OACE,qBAAA,YAAA,EAAA,UAAA,CAX2B,wBAAwB;EACnD;EACA,gBAAgB,uBAAuB;EACvC;EACA;EACA;EACA,iBAAiB,qBAAqB,YAAY,qBAAqB,KAAK,KAAA;EAC5E;CACF,CAIK,KACC,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,yBAAD,EAAyB,aAAa,mBAAqB,CAAA;CACxD,CAAA,GAEP,oBAAC,SAAD;EACkC;EAChC,oBAAoB,YAAY,SAAS;EACX;EAC9B,aAAa,6BAA6B,QAAQ,OAAO,CAAC;EAC9C;EACZ,aAAa,CAAC,mBAAmB,QAAQ,OAAO,EAAE;EAClC;EAChB,gBAAgB;EACP;EACT,SAAS;EACO;EACJ;EACS;EACrB,QAAQ,wBAAwB,QAAQ,OAAO,CAAC;EACpC;EACO;EACP;EACG;EACH;CACb,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,39 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { getGroupStyles, insertIntro, processMessages } from "../../utils.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
+var useEnrichedMessages = (args) => {
+	const { channel, disableDateSeparator, groupStyles, headerPosition, hideDeletedMessages, hideNewMessageSeparator, maxTimeBetweenGroupedMessages, messages, noGroupByUser, reviewProcessedMessage } = args;
+	const { client } = useChatContext("useEnrichedMessages");
+	const { HeaderComponent } = useComponentContext("useEnrichedMessages");
+	const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
+	const enableDateSeparator = !disableDateSeparator;
+	let messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
+		enableDateSeparator,
+		hideDeletedMessages,
+		hideNewMessageSeparator,
+		lastRead,
+		messages,
+		reviewProcessedMessage,
+		userId: client.userID || ""
+	});
+	if (HeaderComponent) messagesWithDates = insertIntro(messagesWithDates, headerPosition);
+	const groupStylesFn = groupStyles || getGroupStyles;
+	return {
+		messageGroupStyles: useMemo(() => messagesWithDates.reduce((acc, message, i) => {
+			const style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser, maxTimeBetweenGroupedMessages);
+			if (style) acc[message.id] = style;
+			return acc;
+		}, {}), [
+			maxTimeBetweenGroupedMessages,
+			messagesWithDates,
+			noGroupByUser
+		]),
+		messages: messagesWithDates
+	};
+};
+//#endregion
+export { useEnrichedMessages };
+
+//# sourceMappingURL=useEnrichedMessages.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEnrichedMessages.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from '../../utils';\nimport { getGroupStyles, insertIntro, processMessages } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { Channel, LocalMessage } from 'stream-chat';\n\nexport const useEnrichedMessages = (args: {\n  channel: Channel;\n  disableDateSeparator: boolean;\n  hideDeletedMessages: boolean;\n  hideNewMessageSeparator: boolean;\n  messages: LocalMessage[];\n  noGroupByUser: boolean;\n  groupStyles?: (\n    message: RenderedMessage,\n    previousMessage: RenderedMessage,\n    nextMessage: RenderedMessage,\n    noGroupByUser: boolean,\n    maxTimeBetweenGroupedMessages?: number,\n  ) => GroupStyle;\n  headerPosition?: number;\n  maxTimeBetweenGroupedMessages?: number;\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n}) => {\n  const {\n    channel,\n    disableDateSeparator,\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    maxTimeBetweenGroupedMessages,\n    messages,\n    noGroupByUser,\n    reviewProcessedMessage,\n  } = args;\n\n  const { client } = useChatContext('useEnrichedMessages');\n  const { HeaderComponent } = useComponentContext('useEnrichedMessages');\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  const enableDateSeparator = !disableDateSeparator;\n\n  let messagesWithDates =\n    !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator\n      ? messages\n      : processMessages({\n          enableDateSeparator,\n          hideDeletedMessages,\n          hideNewMessageSeparator,\n          lastRead,\n          messages,\n          reviewProcessedMessage,\n          userId: client.userID || '',\n        });\n\n  if (HeaderComponent) {\n    messagesWithDates = insertIntro(messagesWithDates, headerPosition);\n  }\n\n  const groupStylesFn = groupStyles || getGroupStyles;\n  const messageGroupStyles = useMemo(\n    () =>\n      messagesWithDates.reduce<Record<string, GroupStyle>>((acc, message, i) => {\n        const style = groupStylesFn(\n          message,\n          messagesWithDates[i - 1],\n          messagesWithDates[i + 1],\n          noGroupByUser,\n          maxTimeBetweenGroupedMessages,\n        );\n        if (style) acc[message.id] = style;\n        return acc;\n      }, {}),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [maxTimeBetweenGroupedMessages, messagesWithDates, noGroupByUser],\n  );\n\n  return { messageGroupStyles, messages: messagesWithDates };\n};\n"],"mappings":";;;;;AAUA,IAAa,uBAAuB,SAiB9B;CACJ,MAAM,EACJ,SACA,sBACA,aACA,gBACA,qBACA,yBACA,+BACA,UACA,eACA,2BACE;CAEJ,MAAM,EAAE,WAAW,eAAe,qBAAqB;CACvD,MAAM,EAAE,oBAAoB,oBAAoB,qBAAqB;CAErE,MAAM,WAAW,cAAc,QAAQ,WAAW,GAAG,CAAC,OAAO,CAAC;CAE9D,MAAM,sBAAsB,CAAC;CAE7B,IAAI,oBACF,CAAC,uBAAuB,CAAC,uBAAuB,0BAC5C,WACA,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,OAAO,UAAU;CAC3B,CAAC;CAEP,IAAI,iBACF,oBAAoB,YAAY,mBAAmB,cAAc;CAGnE,MAAM,gBAAgB,eAAe;CAkBrC,OAAO;EAAE,oBAjBkB,cAEvB,kBAAkB,QAAoC,KAAK,SAAS,MAAM;GACxE,MAAM,QAAQ,cACZ,SACA,kBAAkB,IAAI,IACtB,kBAAkB,IAAI,IACtB,eACA,6BACF;GACA,IAAI,OAAO,IAAI,QAAQ,MAAM;GAC7B,OAAO;EACT,GAAG,CAAC,CAAC,GAEP;GAAC;GAA+B;GAAmB;EAAa,CAGzD;EAAoB,UAAU;CAAkB;AAC3D"}

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

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useState } from "react";
+import throttle from "lodash.throttle";
+//#region src/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.ts
+var DATE_SEPARATOR_SELECTOR = ".str-chat__date-separator:not(.str-chat__date-separator--floating)";
+var THROTTLE_MS = 100;
+/**
+* For non-virtualized MessageList: keeps the floating date synced with the
+* separator currently pinned to the top boundary of the list viewport.
+*/
+var useFloatingDateSeparatorMessageList = ({ disableDateSeparator, listElement, processedMessages }) => {
+	const [state, setState] = useState({
+		date: null,
+		visible: false
+	});
+	const update = useCallback(() => {
+		if (disableDateSeparator || !listElement || processedMessages.length === 0) {
+			setState({
+				date: null,
+				visible: false
+			});
+			return;
+		}
+		const separators = listElement.querySelectorAll(DATE_SEPARATOR_SELECTOR);
+		if (separators.length === 0) {
+			setState({
+				date: null,
+				visible: false
+			});
+			return;
+		}
+		const containerRect = listElement.getBoundingClientRect();
+		let bestDate = null;
+		let bestTop = -Infinity;
+		for (const el of separators) {
+			const rect = el.getBoundingClientRect();
+			const dataDate = el.getAttribute("data-date");
+			if (!dataDate) continue;
+			if (rect.top <= containerRect.top && rect.top > bestTop) {
+				bestTop = rect.top;
+				const d = new Date(dataDate);
+				if (!isNaN(d.getTime())) bestDate = d;
+			}
+		}
+		setState({
+			date: bestDate,
+			visible: bestDate !== null
+		});
+	}, [
+		disableDateSeparator,
+		listElement,
+		processedMessages
+	]);
+	useEffect(() => {
+		if (!listElement) return;
+		const throttled = throttle(update, THROTTLE_MS);
+		throttled();
+		listElement.addEventListener("scroll", throttled);
+		if (typeof ResizeObserver === "undefined") return () => {
+			listElement.removeEventListener("scroll", throttled);
+			throttled.cancel();
+		};
+		const resizeObserver = new ResizeObserver(throttled);
+		resizeObserver.observe(listElement);
+		return () => {
+			listElement.removeEventListener("scroll", throttled);
+			resizeObserver.disconnect();
+			throttled.cancel();
+		};
+	}, [listElement, update]);
+	return {
+		floatingDate: state.date,
+		showFloatingDate: state.visible
+	};
+};
+//#endregion
+export { useFloatingDateSeparatorMessageList };
+
+//# sourceMappingURL=useFloatingDateSeparatorMessageList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingDateSeparatorMessageList.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport throttle from 'lodash.throttle';\n\nimport type { RenderedMessage } from '../../utils';\n\nconst DATE_SEPARATOR_SELECTOR =\n  '.str-chat__date-separator:not(.str-chat__date-separator--floating)';\nconst THROTTLE_MS = 100;\n\nexport type UseFloatingDateSeparatorMessageListParams = {\n  disableDateSeparator: boolean;\n  listElement: HTMLDivElement | null;\n  processedMessages: RenderedMessage[];\n};\n\nexport type UseFloatingDateSeparatorMessageListResult = {\n  floatingDate: Date | null;\n  showFloatingDate: boolean;\n};\n\n/**\n * For non-virtualized MessageList: keeps the floating date synced with the\n * separator currently pinned to the top boundary of the list viewport.\n */\nexport const useFloatingDateSeparatorMessageList = ({\n  disableDateSeparator,\n  listElement,\n  processedMessages,\n}: UseFloatingDateSeparatorMessageListParams): UseFloatingDateSeparatorMessageListResult => {\n  const [state, setState] = useState<{ date: Date | null; visible: boolean }>({\n    date: null,\n    visible: false,\n  });\n\n  const update = useCallback(() => {\n    if (disableDateSeparator || !listElement || processedMessages.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const separators = listElement.querySelectorAll<HTMLElement>(DATE_SEPARATOR_SELECTOR);\n    if (separators.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const containerRect = listElement.getBoundingClientRect();\n    let bestDate: Date | null = null;\n    let bestTop = -Infinity;\n\n    for (const el of separators) {\n      const rect = el.getBoundingClientRect();\n      const dataDate = el.getAttribute('data-date');\n      if (!dataDate) continue;\n\n      const isAtOrAboveTopBoundary = rect.top <= containerRect.top;\n\n      if (isAtOrAboveTopBoundary && rect.top > bestTop) {\n        bestTop = rect.top;\n        const d = new Date(dataDate);\n        if (!isNaN(d.getTime())) bestDate = d;\n      }\n    }\n\n    setState({\n      date: bestDate,\n      visible: bestDate !== null,\n    });\n  }, [disableDateSeparator, listElement, processedMessages]);\n\n  useEffect(() => {\n    if (!listElement) return;\n\n    const throttled = throttle(update, THROTTLE_MS);\n\n    throttled();\n    listElement.addEventListener('scroll', throttled);\n\n    if (typeof ResizeObserver === 'undefined') {\n      return () => {\n        listElement.removeEventListener('scroll', throttled);\n        throttled.cancel();\n      };\n    }\n\n    const resizeObserver = new ResizeObserver(throttled);\n    resizeObserver.observe(listElement);\n\n    return () => {\n      listElement.removeEventListener('scroll', throttled);\n      resizeObserver.disconnect();\n      throttled.cancel();\n    };\n  }, [listElement, update]);\n\n  return {\n    floatingDate: state.date,\n    showFloatingDate: state.visible,\n  };\n};\n"],"mappings":";;;AAKA,IAAM,0BACJ;AACF,IAAM,cAAc;;;;;AAiBpB,IAAa,uCAAuC,EAClD,sBACA,aACA,wBAC0F;CAC1F,MAAM,CAAC,OAAO,YAAY,SAAkD;EAC1E,MAAM;EACN,SAAS;CACX,CAAC;CAED,MAAM,SAAS,kBAAkB;EAC/B,IAAI,wBAAwB,CAAC,eAAe,kBAAkB,WAAW,GAAG;GAC1E,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,aAAa,YAAY,iBAA8B,uBAAuB;EACpF,IAAI,WAAW,WAAW,GAAG;GAC3B,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,gBAAgB,YAAY,sBAAsB;EACxD,IAAI,WAAwB;EAC5B,IAAI,UAAU;EAEd,KAAK,MAAM,MAAM,YAAY;GAC3B,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,WAAW,GAAG,aAAa,WAAW;GAC5C,IAAI,CAAC,UAAU;GAIf,IAF+B,KAAK,OAAO,cAAc,OAE3B,KAAK,MAAM,SAAS;IAChD,UAAU,KAAK;IACf,MAAM,IAAI,IAAI,KAAK,QAAQ;IAC3B,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,WAAW;GACtC;EACF;EAEA,SAAS;GACP,MAAM;GACN,SAAS,aAAa;EACxB,CAAC;CACH,GAAG;EAAC;EAAsB;EAAa;CAAiB,CAAC;CAEzD,gBAAgB;EACd,IAAI,CAAC,aAAa;EAElB,MAAM,YAAY,SAAS,QAAQ,WAAW;EAE9C,UAAU;EACV,YAAY,iBAAiB,UAAU,SAAS;EAEhD,IAAI,OAAO,mBAAmB,aAC5B,aAAa;GACX,YAAY,oBAAoB,UAAU,SAAS;GACnD,UAAU,OAAO;EACnB;EAGF,MAAM,iBAAiB,IAAI,eAAe,SAAS;EACnD,eAAe,QAAQ,WAAW;EAElC,aAAa;GACX,YAAY,oBAAoB,UAAU,SAAS;GACnD,eAAe,WAAW;GAC1B,UAAU,OAAO;EACnB;CACF,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,OAAO;EACL,cAAc,MAAM;EACpB,kBAAkB,MAAM;CAC1B;AACF"}

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

@@ -0,0 +1,58 @@
+import { useChannelStateContext } from "../../../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { getLastReceived } from "../../utils.mjs";
+import { useLastReadData } from "../useLastReadData.mjs";
+import { useLastDeliveredData } from "../useLastDeliveredData.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
+var useMessageListElements = (props) => {
+	const { channelUnreadUiState, enrichedMessages, internalMessageProps, lastOwnMessage, messageGroupStyles, messages, renderMessages, returnAllReadData, threadList } = props;
+	const { customClasses } = useChatContext("useMessageListElements");
+	const { channel } = useChannelStateContext();
+	const components = useComponentContext("useMessageListElements");
+	const readData = useLastReadData({
+		channel,
+		lastOwnMessage,
+		messages,
+		returnAllReadData
+	});
+	const ownMessagesDeliveredToOthers = useLastDeliveredData({
+		channel,
+		lastOwnMessage,
+		messages,
+		returnAllReadData
+	});
+	const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [enrichedMessages]);
+	return useMemo(() => renderMessages({
+		channelUnreadUiState,
+		components,
+		customClasses,
+		lastOwnMessage,
+		lastReceivedMessageId,
+		messageGroupStyles,
+		messages: enrichedMessages,
+		ownMessagesDeliveredToOthers,
+		readData,
+		sharedMessageProps: {
+			...internalMessageProps,
+			returnAllReadData,
+			threadList
+		}
+	}), [
+		enrichedMessages,
+		internalMessageProps,
+		lastOwnMessage,
+		lastReceivedMessageId,
+		messageGroupStyles,
+		channelUnreadUiState,
+		readData,
+		renderMessages,
+		returnAllReadData,
+		threadList
+	]);
+};
+//#endregion
+export { useMessageListElements };
+
+//# sourceMappingURL=useMessageListElements.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageListElements.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx"],"sourcesContent":["import type React from 'react';\nimport { useMemo } from 'react';\n\nimport { useLastReadData } from '../useLastReadData';\nimport type { GroupStyle, RenderedMessage } from '../../utils';\nimport { getLastReceived } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { LocalMessage } from 'stream-chat';\nimport type { ChannelUnreadUiState } from '../../../../types/types';\nimport type { MessageRenderer, SharedMessageProps } from '../../renderMessages';\nimport { useChannelStateContext } from '../../../../context';\nimport { useLastDeliveredData } from '../useLastDeliveredData';\n\ntype UseMessageListElementsProps = {\n  messages: LocalMessage[];\n  enrichedMessages: RenderedMessage[];\n  internalMessageProps: SharedMessageProps;\n  messageGroupStyles: Record<string, GroupStyle>;\n  renderMessages: MessageRenderer;\n  returnAllReadData: boolean;\n  threadList: boolean;\n  channelUnreadUiState?: ChannelUnreadUiState;\n  lastOwnMessage?: LocalMessage;\n};\n\nexport const useMessageListElements = (props: UseMessageListElementsProps) => {\n  const {\n    channelUnreadUiState,\n    enrichedMessages,\n    internalMessageProps,\n    lastOwnMessage,\n    messageGroupStyles,\n    messages,\n    renderMessages,\n    returnAllReadData,\n    threadList,\n  } = props;\n\n  const { customClasses } = useChatContext('useMessageListElements');\n  const { channel } = useChannelStateContext();\n  const components = useComponentContext('useMessageListElements');\n\n  // get the readData, but only for messages submitted by the user themselves\n  const readData = useLastReadData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const ownMessagesDeliveredToOthers = useLastDeliveredData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const lastReceivedMessageId = useMemo(\n    () => getLastReceived(enrichedMessages),\n    [enrichedMessages],\n  );\n\n  const elements: React.ReactNode[] = useMemo(\n    () =>\n      renderMessages({\n        channelUnreadUiState,\n        components,\n        customClasses,\n        lastOwnMessage,\n        lastReceivedMessageId,\n        messageGroupStyles,\n        messages: enrichedMessages,\n        ownMessagesDeliveredToOthers,\n        readData,\n        sharedMessageProps: { ...internalMessageProps, returnAllReadData, threadList },\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      enrichedMessages,\n      internalMessageProps,\n      lastOwnMessage,\n      lastReceivedMessageId,\n      messageGroupStyles,\n      channelUnreadUiState,\n      readData,\n      renderMessages,\n      returnAllReadData,\n      threadList,\n    ],\n  );\n\n  return elements;\n};\n"],"mappings":";;;;;;;;AA4BA,IAAa,0BAA0B,UAAuC;CAC5E,MAAM,EACJ,sBACA,kBACA,sBACA,gBACA,oBACA,UACA,gBACA,mBACA,eACE;CAEJ,MAAM,EAAE,kBAAkB,eAAe,wBAAwB;CACjE,MAAM,EAAE,YAAY,uBAAuB;CAC3C,MAAM,aAAa,oBAAoB,wBAAwB;CAG/D,MAAM,WAAW,gBAAgB;EAC/B;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,+BAA+B,qBAAqB;EACxD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB,cACtB,gBAAgB,gBAAgB,GACtC,CAAC,gBAAgB,CACnB;CA+BA,OA7BoC,cAEhC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA,oBAAoB;GAAE,GAAG;GAAsB;GAAmB;EAAW;CAC/E,CAAC,GAEH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAGK;AACT"}

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

@@ -0,0 +1,141 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
+var messageIdsMatchAsPrefix = (prevMessages, newMessages) => prevMessages.every((message, index) => message.id === newMessages[index]?.id);
+var messageIdsMatchAsSuffix = (prevMessages, newMessages) => prevMessages.every((message, index) => message.id === newMessages[newMessages.length - prevMessages.length + index]?.id);
+/**
+* Coordinates scroll-position preservation when the rendered message array changes.
+*
+* The hook distinguishes three broad cases:
+* 1. Older-page pagination prepends messages at the top of the list.
+*    This path either sticks to the top of the new page or restores a captured
+*    message anchor, depending on where the user was when pagination started.
+* 2. Newer messages append to the bottom of the list.
+*    This path preserves normal chat behavior by auto-scrolling only when the
+*    user was already near the bottom or the appended message is the user's own.
+* 3. Disjunct/overlapping page switches.
+*    These intentionally bypass prepend heuristics because the old and new arrays
+*    are not comparable as a single contiguous list.
+*/
+function useMessageListScrollManager(params) {
+	const { captureAnchor, disableScrollManagement = false, justReachedLatestMessageSet = false, loadingMore = false, loadMoreScrollThreshold, onScrollBy, onScrollToTop, restoreAnchor, scrollContainerMeasures, scrolledUpThreshold, scrollToBottom, showNewMessages } = params;
+	const { client } = useChatContext("useMessageListScrollManager");
+	const measures = useRef({
+		offsetHeight: 0,
+		scrollHeight: 0,
+		scrollTop: 0
+	});
+	const messages = useRef(void 0);
+	const olderPaginationState = useRef({
+		anchor: null,
+		mode: "idle"
+	});
+	const previousLoadingMoreRef = useRef(loadingMore);
+	const scrollTop = useRef(0);
+	useLayoutEffect(() => {
+		if (disableScrollManagement) {
+			messages.current = params.messages;
+			measures.current = scrollContainerMeasures();
+			previousLoadingMoreRef.current = loadingMore;
+			return;
+		}
+		const prevMeasures = measures.current;
+		const prevMessages = messages.current;
+		const newMessages = params.messages;
+		const lastNewMessage = newMessages[newMessages.length - 1] || {};
+		const lastPrevMessage = prevMessages?.[prevMessages.length - 1];
+		const newMeasures = scrollContainerMeasures();
+		const startedLoadingOlder = loadingMore && !previousLoadingMoreRef.current;
+		const finishedLoadingOlder = !loadingMore && previousLoadingMoreRef.current;
+		if (startedLoadingOlder) {
+			const liveMeasures = scrollContainerMeasures();
+			const hasOverflow = liveMeasures.scrollHeight > liveMeasures.offsetHeight;
+			const liveScrollTop = liveMeasures.scrollTop;
+			if (!hasOverflow) olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+			else if (liveScrollTop <= 1) olderPaginationState.current = {
+				anchor: null,
+				mode: "stick-to-top"
+			};
+			else if (liveScrollTop < loadMoreScrollThreshold) {
+				const capturedAnchor = captureAnchor();
+				if (capturedAnchor) olderPaginationState.current = {
+					anchor: capturedAnchor,
+					mode: "preserve-anchor"
+				};
+				else olderPaginationState.current = {
+					anchor: null,
+					mode: "idle"
+				};
+			} else olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+		}
+		const wasAtBottom = prevMeasures.scrollHeight - prevMeasures.offsetHeight - scrollTop.current < scrolledUpThreshold;
+		if (typeof prevMessages !== "undefined") if (prevMessages.length < newMessages.length) {
+			const messagesAddedToTop = messageIdsMatchAsSuffix(prevMessages, newMessages);
+			const messagesAddedToBottom = messageIdsMatchAsPrefix(prevMessages, newMessages);
+			if (messagesAddedToTop) {
+				const preservedAnchor = olderPaginationState.current.mode === "preserve-anchor" && olderPaginationState.current.anchor && (finishedLoadingOlder || loadingMore) ? olderPaginationState.current.anchor : null;
+				if (olderPaginationState.current.mode === "stick-to-top") onScrollToTop();
+				else if (preservedAnchor) restoreAnchor(preservedAnchor);
+				else if (scrollTop.current < loadMoreScrollThreshold) onScrollBy(newMeasures.scrollHeight - prevMeasures.scrollHeight);
+				olderPaginationState.current = {
+					anchor: null,
+					mode: "idle"
+				};
+			} else if (messagesAddedToBottom) {
+				if (justReachedLatestMessageSet) {
+					messages.current = newMessages;
+					measures.current = newMeasures;
+					previousLoadingMoreRef.current = loadingMore;
+					return;
+				}
+				if (lastNewMessage.user?.id === client.userID || wasAtBottom) scrollToBottom();
+				else showNewMessages();
+			} else olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+		} else {
+			const hasNewReactions = lastPrevMessage?.latest_reactions?.length !== lastNewMessage.latest_reactions?.length;
+			const hasNewReplies = lastPrevMessage?.reply_count !== lastNewMessage.reply_count;
+			if ((hasNewReactions || hasNewReplies) && wasAtBottom) scrollToBottom();
+			if (finishedLoadingOlder) olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+		}
+		messages.current = newMessages;
+		measures.current = newMeasures;
+		previousLoadingMoreRef.current = loadingMore;
+	}, [
+		captureAnchor,
+		disableScrollManagement,
+		justReachedLatestMessageSet,
+		loadingMore,
+		measures,
+		messages,
+		params.messages,
+		restoreAnchor,
+		scrollContainerMeasures
+	]);
+	return (scrollTopValue, getLatestAnchor = null) => {
+		scrollTop.current = scrollTopValue;
+		if (loadingMore && getLatestAnchor && olderPaginationState.current.mode === "preserve-anchor") {
+			const latestAnchor = getLatestAnchor();
+			if (!latestAnchor) return;
+			olderPaginationState.current = {
+				anchor: latestAnchor,
+				mode: "preserve-anchor"
+			};
+		}
+	};
+}
+//#endregion
+export { useMessageListScrollManager };
+
+//# sourceMappingURL=useMessageListScrollManager.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageListScrollManager.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type ContainerMeasures = {\n  offsetHeight: number;\n  scrollHeight: number;\n  scrollTop: number;\n};\n\nexport type UseMessageListScrollManagerParams = {\n  captureAnchor: () => { id: string; offsetTop: number } | null;\n  disableScrollManagement?: boolean;\n  justReachedLatestMessageSet?: boolean;\n  loadMoreScrollThreshold: number;\n  loadingMore?: boolean;\n  messages: LocalMessage[];\n  onScrollBy: (scrollBy: number) => void;\n  onScrollToTop: () => void;\n  restoreAnchor: (anchor: { id: string; offsetTop: number }) => void;\n  scrollContainerMeasures: () => ContainerMeasures;\n  scrolledUpThreshold: number;\n  scrollToBottom: () => void;\n  showNewMessages: () => void;\n};\n\n// Tracks how the current older-page pagination cycle should restore the viewport\n// once messages are prepended. The mode is chosen when loading starts and cleared\n// after the prepend has been handled.\n//\n// Modes:\n// - `idle`: there is no active older-page restoration strategy\n// - `stick-to-top`: pagination started from the absolute top, so keep the newly\n//   loaded page pinned to the top of the container\n// - `preserve-anchor`: pagination started near the top but not at the absolute\n//   top, so restore the captured anchor message to its previous viewport offset\ntype OlderPaginationState =\n  | { anchor: null; mode: 'idle' }\n  | { anchor: null; mode: 'stick-to-top' }\n  | { anchor: { id: string; offsetTop: number }; mode: 'preserve-anchor' };\n\n// An \"anchor\" is the currently visible message row we want to keep visually pinned\n// to the same spot in the viewport while older messages are inserted above it.\n// It stores:\n// - `id`: which rendered message row should stay stable\n// - `offsetTop`: how far that row sits from the top edge of the scroll container\n//\n// After a prepend, the DOM shifts downward. Restoring the anchor means finding the\n// same message row again and correcting scrollTop until it returns to that offset.\n\n// When all previous messages appear at the start of the new array, the growth\n// happened at the bottom of the list.\nconst messageIdsMatchAsPrefix = (\n  prevMessages: LocalMessage[],\n  newMessages: LocalMessage[],\n) => prevMessages.every((message, index) => message.id === newMessages[index]?.id);\n\n// When all previous messages appear at the end of the new array, the growth\n// happened at the top of the list.\nconst messageIdsMatchAsSuffix = (\n  prevMessages: LocalMessage[],\n  newMessages: LocalMessage[],\n) =>\n  prevMessages.every(\n    (message, index) =>\n      message.id === newMessages[newMessages.length - prevMessages.length + index]?.id,\n  );\n\n/**\n * Coordinates scroll-position preservation when the rendered message array changes.\n *\n * The hook distinguishes three broad cases:\n * 1. Older-page pagination prepends messages at the top of the list.\n *    This path either sticks to the top of the new page or restores a captured\n *    message anchor, depending on where the user was when pagination started.\n * 2. Newer messages append to the bottom of the list.\n *    This path preserves normal chat behavior by auto-scrolling only when the\n *    user was already near the bottom or the appended message is the user's own.\n * 3. Disjunct/overlapping page switches.\n *    These intentionally bypass prepend heuristics because the old and new arrays\n *    are not comparable as a single contiguous list.\n */\nexport function useMessageListScrollManager(params: UseMessageListScrollManagerParams) {\n  const {\n    captureAnchor,\n    disableScrollManagement = false,\n    justReachedLatestMessageSet = false,\n    loadingMore = false,\n    loadMoreScrollThreshold,\n    onScrollBy,\n    onScrollToTop,\n    restoreAnchor,\n    scrollContainerMeasures,\n    scrolledUpThreshold,\n    scrollToBottom,\n    showNewMessages,\n  } = params;\n\n  const { client } = useChatContext('useMessageListScrollManager');\n\n  const measures = useRef<ContainerMeasures>({\n    offsetHeight: 0,\n    scrollHeight: 0,\n    scrollTop: 0,\n  });\n  const messages = useRef<LocalMessage[]>(undefined);\n  const olderPaginationState = useRef<OlderPaginationState>({\n    anchor: null,\n    mode: 'idle',\n  });\n  const previousLoadingMoreRef = useRef(loadingMore);\n  const scrollTop = useRef(0);\n\n  useLayoutEffect(() => {\n    if (disableScrollManagement) {\n      // Even while management is disabled we still refresh the cached list shape,\n      // so the next enabled render compares against the most recent DOM state.\n      messages.current = params.messages;\n      measures.current = scrollContainerMeasures();\n      previousLoadingMoreRef.current = loadingMore;\n      return;\n    }\n\n    const prevMeasures = measures.current;\n    const prevMessages = messages.current;\n    const newMessages = params.messages;\n    const lastNewMessage = newMessages[newMessages.length - 1] || {};\n    const lastPrevMessage = prevMessages?.[prevMessages.length - 1];\n    const newMeasures = scrollContainerMeasures();\n    const startedLoadingOlder = loadingMore && !previousLoadingMoreRef.current;\n    const finishedLoadingOlder = !loadingMore && previousLoadingMoreRef.current;\n\n    if (startedLoadingOlder) {\n      // Read the live DOM scroll position instead of the cached ref so we get\n      // the correct value even when scrollToBottom() has been called but the\n      // async scroll event hasn't updated the ref yet (common on initial mount).\n      const liveMeasures = scrollContainerMeasures();\n      const hasOverflow = liveMeasures.scrollHeight > liveMeasures.offsetHeight;\n      const liveScrollTop = liveMeasures.scrollTop;\n\n      // Older-page pagination uses one of three modes:\n      // - `stick-to-top`: user hit the absolute top and wants to keep reading upward\n      // - `preserve-anchor`: user was only near the top, so keep the same message in view\n      // - `idle`: no restoration needed for this load cycle\n      //\n      // When the container doesn't overflow yet (e.g. content hasn't reached its\n      // final height due to font loading) the scroll position is meaningless, so\n      // default to idle to avoid a false stick-to-top that would jump the list.\n      if (!hasOverflow) {\n        olderPaginationState.current = {\n          anchor: null,\n          mode: 'idle',\n        };\n      } else if (liveScrollTop <= 1) {\n        olderPaginationState.current = {\n          anchor: null,\n          mode: 'stick-to-top',\n        };\n      } else if (liveScrollTop < loadMoreScrollThreshold) {\n        const capturedAnchor = captureAnchor();\n        if (capturedAnchor) {\n          olderPaginationState.current = {\n            anchor: capturedAnchor,\n            mode: 'preserve-anchor',\n          };\n        } else {\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n      } else {\n        olderPaginationState.current = {\n          anchor: null,\n          mode: 'idle',\n        };\n      }\n    }\n\n    // Evaluate bottom proximity from the previous render, before any new content\n    // changes the list height and invalidates the prior bottom distance.\n    const wasAtBottom =\n      prevMeasures.scrollHeight - prevMeasures.offsetHeight - scrollTop.current <\n      scrolledUpThreshold;\n\n    if (typeof prevMessages !== 'undefined') {\n      if (prevMessages.length < newMessages.length) {\n        const messagesAddedToTop = messageIdsMatchAsSuffix(prevMessages, newMessages);\n        const messagesAddedToBottom = messageIdsMatchAsPrefix(prevMessages, newMessages);\n\n        // A clean prepend means older messages were inserted ahead of the current\n        // viewport. Restore the viewport according to the mode chosen when loading\n        // started, then clear the mode for the next pagination cycle.\n        if (messagesAddedToTop) {\n          const preservedAnchor =\n            olderPaginationState.current.mode === 'preserve-anchor' &&\n            olderPaginationState.current.anchor &&\n            (finishedLoadingOlder || loadingMore)\n              ? olderPaginationState.current.anchor\n              : null;\n\n          // When pagination was triggered from absolute top, keep the newly\n          // loaded page pinned to top instead of restoring the old viewport.\n          if (olderPaginationState.current.mode === 'stick-to-top') {\n            onScrollToTop();\n          } else if (preservedAnchor) {\n            restoreAnchor(preservedAnchor);\n          } else if (scrollTop.current < loadMoreScrollThreshold) {\n            // Fallback for prepends when there is no stable DOM anchor to restore.\n            // This is less accurate than anchor restoration, but still avoids a full\n            // jump by compensating for the inserted page height.\n            const listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;\n            onScrollBy(listHeightDelta);\n          }\n\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n        // A clean append means the list grew downward. Preserve the usual chat\n        // semantics: auto-scroll only for self-sent messages or when the user was\n        // already close enough to bottom.\n        else if (messagesAddedToBottom) {\n          if (justReachedLatestMessageSet) {\n            // Merging into the latest page is handled by dedicated logic higher up.\n            // Returning here avoids undoing that behavior with a normal append scroll.\n            messages.current = newMessages;\n            measures.current = newMeasures;\n            previousLoadingMoreRef.current = loadingMore;\n            return;\n          }\n\n          const lastMessageIsFromCurrentUser = lastNewMessage.user?.id === client.userID;\n\n          if (lastMessageIsFromCurrentUser || wasAtBottom) {\n            scrollToBottom();\n          } else {\n            showNewMessages();\n          }\n        } else {\n          // If the new page is neither a pure prepend nor a pure append, treat it as\n          // a disjunct/overlapping page switch and avoid applying prepend heuristics.\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n      }\n      // message list length didn't change, but check if last message had reaction/reply update\n      else {\n        const hasNewReactions =\n          lastPrevMessage?.latest_reactions?.length !==\n          lastNewMessage.latest_reactions?.length;\n        const hasNewReplies = lastPrevMessage?.reply_count !== lastNewMessage.reply_count;\n\n        if ((hasNewReactions || hasNewReplies) && wasAtBottom) {\n          scrollToBottom();\n        }\n\n        if (finishedLoadingOlder) {\n          // Clear any older-page mode when the request ends without increasing the\n          // rendered list size, so the next pagination cycle starts from a clean slate.\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n      }\n    }\n\n    messages.current = newMessages;\n    measures.current = newMeasures;\n    previousLoadingMoreRef.current = loadingMore;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    captureAnchor,\n    disableScrollManagement,\n    justReachedLatestMessageSet,\n    loadingMore,\n    measures,\n    messages,\n    params.messages,\n    restoreAnchor,\n    scrollContainerMeasures,\n  ]);\n\n  return (\n    scrollTopValue: number,\n    getLatestAnchor: (() => { id: string; offsetTop: number } | null) | null = null,\n  ) => {\n    scrollTop.current = scrollTopValue;\n\n    if (\n      loadingMore &&\n      getLatestAnchor &&\n      olderPaginationState.current.mode === 'preserve-anchor'\n    ) {\n      // Keep the anchor fresh while the request is in flight so restoration matches\n      // the latest viewport position if the user keeps scrolling before data arrives.\n      // The getter keeps normal scroll events cheap by avoiding DOM anchor capture\n      // unless anchor preservation is actually active.\n      const latestAnchor = getLatestAnchor();\n      if (!latestAnchor) return;\n\n      olderPaginationState.current = {\n        anchor: latestAnchor,\n        mode: 'preserve-anchor',\n      };\n    }\n  };\n}\n"],"mappings":"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"}