stream-chat-react 13.9.0 → 13.10.1

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -8,9 +8,13 @@ export const useCreateChannelStateContext = (value) => {
     const notificationsLength = notifications.length;
     const readUsers = Object.values(read);
     const readUsersLength = readUsers.length;
-    const readUsersLastReads = readUsers
-        .map(({ last_read }) => last_read.toISOString())
-        .join();
+    const readUsersLastReadDateStrings = [];
+    for (const { last_read } of readUsers) {
+        if (!lastRead)
+            continue;
+        readUsersLastReadDateStrings.push(last_read?.toISOString());
+    }
+    const readUsersLastReads = readUsersLastReadDateStrings.join();
     const threadMessagesLength = threadMessages?.length;
     const channelCapabilities = {};
     channelCapabilitiesArray.forEach((capability) => {

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js

@@ -22,12 +22,17 @@ export const useMessageDeliveryStatus = ({ channel, lastMessage, }) => {
             msgId: lastMessage.id,
             timestampMs: lastMessage.created_at.getTime(),
         };
-        setMessageDeliveryStatus(channel.messageReceiptsTracker.readersForMessage(msgRef).length > 0
+        const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
+        const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
+        setMessageDeliveryStatus(readersForMessage.length > 1 ||
+            (readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id)
             ? MessageDeliveryStatus.READ
-            : channel.messageReceiptsTracker.deliveredForMessage(msgRef).length > 0
+            : deliveredForMessage.length > 1 ||
+                (deliveredForMessage.length === 1 &&
+                    deliveredForMessage[0].id !== client.user?.id)
                 ? MessageDeliveryStatus.DELIVERED
                 : MessageDeliveryStatus.SENT);
-    }, [channel, isOwnMessage, lastMessage]);
+    }, [channel, client, isOwnMessage, lastMessage]);
     useEffect(() => {
         const handleMessageNew = (event) => {
             // the last message is not mine, so do not show the delivery status

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.9.0";
+        const version = "13.10.1";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Dialog/ButtonWithSubmenu.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ComponentProps, ComponentType } from 'react';
-import type { Placement } from '@popperjs/core';
+import type { PopperLikePlacement } from './hooks';
 type ButtonWithSubmenu = ComponentProps<'button'> & {
     children: React.ReactNode;
-    placement: Placement;
+    placement: PopperLikePlacement;
     Submenu: ComponentType;
     submenuContainerProps?: ComponentProps<'div'>;
 };

package/dist/components/Dialog/ButtonWithSubmenu.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useDialog, useDialogIsOpen } from './hooks';
+import { useDialogIsOpen, useDialogOnNearestManager } from './hooks';
 import { useDialogAnchor } from './DialogAnchor';
 export const ButtonWithSubmenu = ({ children, className, placement, Submenu, submenuContainerProps, ...buttonProps }) => {
     const buttonRef = useRef(null);
@@ -8,9 +8,9 @@ export const ButtonWithSubmenu = ({ children, className, placement, Submenu, sub
     const keepSubmenuOpen = useRef(false);
     const dialogCloseTimeout = useRef(null);
     const dialogId = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
-    const dialog = useDialog({ id: dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId);
-    const { attributes, setPopperElement, styles } = useDialogAnchor({
+    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+    const { setPopperElement, styles } = useDialogAnchor({
         open: dialogIsOpen,
         placement,
         referenceElement: buttonRef.current,
@@ -66,7 +66,7 @@ export const ButtonWithSubmenu = ({ children, className, placement, Submenu, sub
                 keepSubmenuOpen.current = false;
                 closeDialogLazily();
             }, ref: buttonRef, role: 'option', ...buttonProps }, children),
-        dialogIsOpen && (React.createElement("div", { ...attributes.popper, onBlur: (event) => {
+        dialogIsOpen && (React.createElement("div", { onBlur: (event) => {
                 const isBlurredDescendant = event.relatedTarget instanceof Node &&
                     dialogContainer?.contains(event.relatedTarget);
                 if (isBlurredDescendant)
@@ -83,6 +83,6 @@ export const ButtonWithSubmenu = ({ children, className, placement, Submenu, sub
             }, ref: (element) => {
                 setPopperElement(element);
                 setDialogContainer(element);
-            }, style: styles.popper, tabIndex: -1, ...submenuContainerProps },
+            }, style: styles, tabIndex: -1, ...submenuContainerProps },
             React.createElement(Submenu, null)))));
 };

package/dist/components/Dialog/DialogAnchor.d.ts

@@ -1,26 +1,20 @@
-import type { Placement } from '@popperjs/core';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
+import type { PopperLikePlacement } from './hooks';
 export interface DialogAnchorOptions {
     open: boolean;
-    placement: Placement;
+    placement: PopperLikePlacement;
     referenceElement: HTMLElement | null;
     allowFlip?: boolean;
 }
 export declare function useDialogAnchor<T extends HTMLElement>({ allowFlip, open, placement, referenceElement, }: DialogAnchorOptions): {
-    attributes: {
-        [key: string]: {
-            [key: string]: string;
-        } | undefined;
-    };
     setPopperElement: React.Dispatch<React.SetStateAction<T | null>>;
-    styles: {
-        [key: string]: React.CSSProperties;
-    };
+    styles: React.CSSProperties;
 };
 export type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {
     id: string;
+    dialogManagerId?: string;
     focus?: boolean;
     trapFocus?: boolean;
 } & ComponentProps<'div'>;
-export declare const DialogAnchor: ({ allowFlip, children, className, focus, id, placement, referenceElement, tabIndex, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;
+export declare const DialogAnchor: ({ allowFlip, children, className, dialogManagerId, focus, id, placement, referenceElement, tabIndex, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;

package/dist/components/Dialog/DialogAnchor.js

@@ -1,29 +1,22 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FocusScope } from '@react-aria/focus';
-import { usePopper } from 'react-popper';
 import { DialogPortalEntry } from './DialogPortal';
 import { useDialog, useDialogIsOpen } from './hooks';
+import { usePopoverPosition } from './hooks/usePopoverPosition';
 export function useDialogAnchor({ allowFlip, open, placement, referenceElement, }) {
     const [popperElement, setPopperElement] = useState(null);
-    const { attributes, styles, update } = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            {
-                enabled: !!allowFlip, // Prevent flipping
-                name: 'flip',
-            },
-            {
-                name: 'eventListeners',
-                options: {
-                    // It's not safe to update popper position on resize and scroll, since popper's
-                    // reference element might not be visible at the time.
-                    resize: false,
-                    scroll: false,
-                },
-            },
-        ],
+    const { refs, strategy, update, x, y } = usePopoverPosition({
+        allowFlip,
+        freeze: true,
         placement,
     });
+    useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    useEffect(() => {
+        refs.setFloating(popperElement);
+    }, [popperElement, refs]);
     useEffect(() => {
         if (open && popperElement) {
             // Since the popper's reference element might not be (and usually is not) visible
@@ -31,20 +24,23 @@ export function useDialogAnchor({ allowFlip, open, placement, referenceElement,
             // update is non-null only if popperElement is non-null
             update?.();
         }
-    }, [open, popperElement, update]);
+    }, [open, placement, popperElement, update]);
     if (popperElement && !open) {
         setPopperElement(null);
     }
     return {
-        attributes,
         setPopperElement,
-        styles,
+        styles: {
+            left: x ?? 0,
+            position: strategy,
+            top: y ?? 0,
+        },
     };
 }
-export const DialogAnchor = ({ allowFlip = true, children, className, focus = true, id, placement = 'auto', referenceElement = null, tabIndex, trapFocus, ...restDivProps }) => {
-    const dialog = useDialog({ id });
-    const open = useDialogIsOpen(id);
-    const { attributes, setPopperElement, styles } = useDialogAnchor({
+export const DialogAnchor = ({ allowFlip = true, children, className, dialogManagerId, focus = true, id, placement = 'auto', referenceElement = null, tabIndex, trapFocus, ...restDivProps }) => {
+    const dialog = useDialog({ dialogManagerId, id });
+    const open = useDialogIsOpen(id, dialogManagerId);
+    const { setPopperElement, styles } = useDialogAnchor({
         allowFlip,
         open,
         placement,
@@ -67,7 +63,7 @@ export const DialogAnchor = ({ allowFlip = true, children, className, focus = tr
     if (!open) {
         return null;
     }
-    return (React.createElement(DialogPortalEntry, { dialogId: id },
+    return (React.createElement(DialogPortalEntry, { dialogId: id, dialogManagerId: dialogManagerId },
         React.createElement(FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true },
-            React.createElement("div", { ...restDivProps, ...attributes.popper, className: clsx('str-chat__dialog-contents', className), "data-testid": 'str-chat__dialog-contents', ref: setPopperElement, style: styles.popper, tabIndex: typeof tabIndex !== 'undefined' ? tabIndex : 0 }, children))));
+            React.createElement("div", { ...restDivProps, className: clsx('str-chat__dialog-contents', className), "data-testid": 'str-chat__dialog-contents', ref: setPopperElement, style: styles, tabIndex: typeof tabIndex !== 'undefined' ? tabIndex : 0 }, children))));
 };

package/dist/components/Dialog/DialogPortal.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 export declare const DialogPortalDestination: () => React.JSX.Element | null;
 type DialogPortalEntryProps = {
     dialogId: string;
+    dialogManagerId?: string;
 };
-export declare const DialogPortalEntry: ({ children, dialogId, }: PropsWithChildren<DialogPortalEntryProps>) => React.JSX.Element;
+export declare const DialogPortalEntry: ({ children, dialogId, dialogManagerId, }: PropsWithChildren<DialogPortalEntryProps>) => React.JSX.Element;
 export {};

package/dist/components/Dialog/DialogPortal.js

@@ -1,19 +1,35 @@
 import React, { useCallback } from 'react';
 import { useDialogIsOpen, useOpenedDialogCount } from './hooks';
 import { Portal } from '../Portal/Portal';
-import { useDialogManager } from '../../context';
+import { useDialogManager, useNearestDialogManagerContext } from '../../context';
 export const DialogPortalDestination = () => {
-    const { dialogManager } = useDialogManager();
-    const openedDialogCount = useOpenedDialogCount();
+    const { dialogManager } = useNearestDialogManagerContext() ?? {};
+    const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
+    // const [destinationRoot, setDestinationRoot] = useState<HTMLDivElement | null>(null);
+    // todo: allow to configure and then enable
+    // useEffect(() => {
+    //   if (!destinationRoot) return;
+    //   const handleClickOutside = (event: MouseEvent) => {
+    //     if (!destinationRoot?.contains(event.target as Node)) {
+    //       dialogManager?.closeAll();
+    //     }
+    //   };
+    //   document.addEventListener('click', handleClickOutside, { capture: true });
+    //   return () => {
+    //     document.removeEventListener('click', handleClickOutside, { capture: true });
+    //   };
+    // }, [destinationRoot, dialogManager]);
     if (!openedDialogCount)
         return null;
-    return (React.createElement("div", { className: 'str-chat__dialog-overlay', "data-str-chat__portal-id": dialogManager.id, "data-testid": 'str-chat__dialog-overlay', onClick: () => dialogManager.closeAll(), style: {
+    return (React.createElement("div", { className: 'str-chat__dialog-overlay', "data-str-chat__portal-id": dialogManager?.id, "data-testid": 'str-chat__dialog-overlay', onClick: () => dialogManager?.closeAll(), 
+        // ref={setDestinationRoot}
+        style: {
             '--str-chat__dialog-overlay-height': openedDialogCount > 0 ? '100%' : '0',
         } }));
 };
-export const DialogPortalEntry = ({ children, dialogId, }) => {
-    const { dialogManager } = useDialogManager({ dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager.id);
+export const DialogPortalEntry = ({ children, dialogId, dialogManagerId, }) => {
+    const { dialogManager } = useDialogManager({ dialogId, dialogManagerId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);
     const getPortalDestination = useCallback(() => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`), [dialogManager.id]);
     return (React.createElement(Portal, { getPortalDestination: getPortalDestination, isOpen: dialogIsOpen }, children));
 };

package/dist/components/Dialog/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useDialog';
+export type { PopperLikePlacement } from './usePopoverPosition';

package/dist/components/Dialog/hooks/useDialog.d.ts

@@ -3,6 +3,10 @@ export type UseDialogParams = GetOrCreateDialogParams & {
     dialogManagerId?: string;
 };
 export declare const useDialog: ({ dialogManagerId, id }: UseDialogParams) => import("../DialogManager").Dialog;
+export declare const useDialogOnNearestManager: ({ id }: Pick<UseDialogParams, 'id'>) => {
+    dialog: import("../DialogManager").Dialog;
+    dialogManager: import("../DialogManager").DialogManager | undefined;
+};
 export declare const modalDialogId: "modal-dialog";
 export declare const useModalDialog: () => import("../DialogManager").Dialog;
 export declare const useDialogIsOpen: (id: string, dialogManagerId?: string) => boolean;

package/dist/components/Dialog/hooks/useDialog.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { modalDialogManagerId, useDialogManager } from '../../../context';
+import { modalDialogManagerId, useDialogManager, useNearestDialogManagerContext, } from '../../../context';
 import { useStateStore } from '../../../store';
 export const useDialog = ({ dialogManagerId, id }) => {
     const { dialogManager } = useDialogManager({ dialogManagerId });
@@ -12,6 +12,14 @@ export const useDialog = ({ dialogManagerId, id }) => {
     }, [dialogManager, id]);
     return dialogManager.getOrCreate({ id });
 };
+export const useDialogOnNearestManager = ({ id }) => {
+    const { dialogManager } = useNearestDialogManagerContext() ?? {};
+    const dialog = useDialog({ dialogManagerId: dialogManager?.id, id });
+    return {
+        dialog,
+        dialogManager,
+    };
+};
 export const modalDialogId = 'modal-dialog';
 export const useModalDialog = () => useDialog({ dialogManagerId: modalDialogManagerId, id: modalDialogId });
 export const useDialogIsOpen = (id, dialogManagerId) => {

package/dist/components/Dialog/hooks/usePopoverPosition.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { autoUpdate, type Placement } from '@floating-ui/react';
+export type PopperLikePlacement = Placement | 'auto' | 'auto-start' | 'auto-end';
+type OffsetOpt = number | {
+    mainAxis?: number;
+    crossAxis?: number;
+    alignmentAxis?: number;
+} | [crossAxis: number, mainAxis: number];
+export type UsePopoverParams = {
+    placement?: PopperLikePlacement;
+    /** Add flip() when placement is not 'auto*' */
+    allowFlip?: boolean;
+    /** Keep in viewport; default true to match common popper setups */
+    allowShift?: boolean;
+    /** The floating UI is fitted to the available space (by constraining its max size) instead of letting it overflow; default false */
+    fitAvailableSpace?: boolean;
+    /** Offset (number, object, or [crossAxis, mainAxis] tuple) */
+    offset?: OffsetOpt;
+    /**
+     * Freeze behavior like Popper's eventListeners: { scroll:false, resize:false }.
+     * If true → no autoUpdate (you can call `update()` manually).
+     */
+    freeze?: boolean;
+    /**
+     * Fine-grained control of autoUpdate triggers (only if freeze=false).
+     * Defaults match Popper's "disabled" example when all set to false.
+     */
+    autoUpdateOptions?: Partial<Parameters<typeof autoUpdate>[3]>;
+};
+export declare function usePopoverPosition({ allowFlip, allowShift, autoUpdateOptions, fitAvailableSpace, freeze, offset, placement, }: UsePopoverParams): {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    y: number;
+    x: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: import("react").CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        y: number;
+        x: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+};
+export {};

package/dist/components/Dialog/hooks/usePopoverPosition.js

@@ -0,0 +1,54 @@
+import { autoPlacement, autoUpdate, flip as flipMw, offset as offsetMw, shift as shiftMw, size as sizeMw, useFloating, } from '@floating-ui/react';
+const hasResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window;
+function autoMiddlewareFor(p) {
+    if (!String(p).startsWith('auto'))
+        return null;
+    const alignment = p === 'auto-start' ? 'start' : p === 'auto-end' ? 'end' : undefined;
+    return autoPlacement({ alignment });
+}
+function toOffsetMw(opt) {
+    if (opt == null)
+        return null;
+    if (Array.isArray(opt)) {
+        const [crossAxis, mainAxis] = opt;
+        return offsetMw({ crossAxis, mainAxis });
+    }
+    if (typeof opt === 'number')
+        return offsetMw(opt);
+    return offsetMw(opt);
+}
+export function usePopoverPosition({ allowFlip = true, allowShift = true, autoUpdateOptions, fitAvailableSpace = false, freeze = false, offset, placement = 'bottom-start', }) {
+    const autoMw = autoMiddlewareFor(placement);
+    const offsetMiddleware = toOffsetMw(offset);
+    const isSidePlacement = placement.startsWith('left') || placement.startsWith('right');
+    const middleware = [
+        // offset first (mirrors common Popper setups)
+        ...(offsetMiddleware ? [offsetMiddleware] : []),
+        // choose between autoPlacement (Popper's "auto*") OR flip()
+        // only allow flip when not explicitly 'left*' or 'right*'
+        ...(autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flipMw()] : []),
+        // viewport collision adjustments
+        ...(allowShift ? [shiftMw({ padding: 8 })] : []),
+        // optional size constraining
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        ...(fitAvailableSpace ? [sizeMw({ apply: () => { } })] : []),
+    ];
+    // if placement is 'auto*', seed with any static placement; autoPlacement will pick the final one
+    const seedPlacement = String(placement).startsWith('auto')
+        ? 'bottom'
+        : placement;
+    return useFloating({
+        middleware,
+        placement: seedPlacement,
+        strategy: 'fixed',
+        whileElementsMounted: freeze
+            ? undefined
+            : (reference, floating, update) => autoUpdate(reference, floating, update, {
+                ancestorResize: true,
+                ancestorScroll: true,
+                animationFrame: false,
+                elementResize: hasResizeObserver,
+                ...autoUpdateOptions,
+            }),
+    });
+}

package/dist/components/Form/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { Placement } from '@popperjs/core';
+import type { PopperLikePlacement } from '../Dialog';
 type DropdownContextValue = {
     close(): void;
 };
@@ -8,7 +8,7 @@ export declare const useDropdownContext: () => DropdownContextValue;
 export type DropdownProps = PropsWithChildren<{
     className?: string;
     openButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
-    placement?: Placement;
+    placement?: PopperLikePlacement;
 }>;
 export declare const Dropdown: (props: DropdownProps) => React.JSX.Element;
 export {};

package/dist/components/Message/Message.js

@@ -116,5 +116,5 @@ export const Message = (props) => {
         notify: addNotification,
     });
     const highlighted = highlightedMessageId === message.id;
-    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, deliveredTo: props.deliveredTo, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, readBy: props.readBy, renderText: props.renderText, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
+    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, deliveredTo: props.deliveredTo, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, lastOwnMessage: props.lastOwnMessage, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, readBy: props.readBy, renderText: props.renderText, returnAllReadData: props.returnAllReadData, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };

package/dist/components/Message/MessageRepliesCountButton.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { useChannelStateContext } from '../../context';
 const UnMemoizedMessageRepliesCountButton = (props) => {
     const { labelPlural, labelSingle, onClick, reply_count = 0 } = props;
+    const { channelCapabilities } = useChannelStateContext();
     const { t } = useTranslationContext('MessageRepliesCountButton');
     if (!reply_count)
         return null;
@@ -13,6 +15,6 @@ const UnMemoizedMessageRepliesCountButton = (props) => {
         replyCountText = `1 ${labelSingle}`;
     }
     return (React.createElement("div", { className: 'str-chat__message-replies-count-button-wrapper' },
-        React.createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick }, replyCountText)));
+        React.createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', disabled: !channelCapabilities['send-reply'], onClick: onClick }, replyCountText)));
 };
 export const MessageRepliesCountButton = React.memo(UnMemoizedMessageRepliesCountButton);

package/dist/components/Message/MessageStatus.js

@@ -15,7 +15,7 @@ const UnMemoizedMessageStatus = (props) => {
     const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
     const { client } = useChatContext('MessageStatus');
     const { Avatar: contextAvatar } = useComponentContext('MessageStatus');
-    const { deliveredTo, isMyMessage, message, readBy, threadList } = useMessageContext('MessageStatus');
+    const { deliveredTo, isMyMessage, lastOwnMessage, message, readBy, returnAllReadData, threadList, } = useMessageContext('MessageStatus');
     const { t } = useTranslationContext('MessageStatus');
     const [referenceElement, setReferenceElement] = useState(null);
     const Avatar = propAvatar || contextAvatar || DefaultAvatar;
@@ -26,7 +26,11 @@ const UnMemoizedMessageStatus = (props) => {
     const sending = message.status === 'sending';
     const read = !!(readBy?.length && !justReadByMe && !threadList);
     const delivered = !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);
-    const sent = message.status === 'received' && !delivered && !read && !threadList;
+    const sent = (returnAllReadData || lastOwnMessage?.id === message.id) &&
+        message.status === 'received' &&
+        !delivered &&
+        !read &&
+        !threadList;
     const readersWithoutOwnUser = read
         ? readBy.filter((item) => item.id !== client.user?.id)
         : [];

package/dist/components/Message/renderText/remarkPlugins/index.d.ts

@@ -2,3 +2,4 @@ export * from './htmlToTextPlugin';
 export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
 export * from './plusPlusToEmphasis';
+export * from './remarkIgnoreMarkdown';

package/dist/components/Message/renderText/remarkPlugins/index.js

@@ -2,3 +2,4 @@ export * from './htmlToTextPlugin';
 export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
 export * from './plusPlusToEmphasis';
+export * from './remarkIgnoreMarkdown';

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.d.ts

@@ -1,2 +1,10 @@
-import type { Nodes } from 'hast-util-find-and-replace/lib';
-export declare const keepLineBreaksPlugin: () => (tree: Nodes) => void;
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+/**
+ * Inserts runs of <br> between sibling block nodes to preserve the exact
+ * number of *blank source lines* between them. No paragraph wrappers are added.
+ *
+ * Works because `mdast-util-to-hast` respects `data.hName`, turning our
+ * `thematicBreak` into `<br>`. Multiple blank lines -> multiple `<br>` siblings.
+ */
+export declare const keepLineBreaksPlugin: Plugin<[], Root>;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.js

@@ -1,28 +1,48 @@
 import { visit } from 'unist-util-visit';
-import { u } from 'unist-builder';
-const visitor = (node, index, parent) => {
-    if (!(index && parent && node.position))
-        return;
-    const prevSibling = parent.children.at(index - 1);
-    if (!prevSibling?.position)
-        return;
-    if (node.position.start.line === prevSibling.position.start.line)
-        return;
-    const ownStartLine = node.position.start.line;
-    const prevEndLine = prevSibling.position.end.line;
-    // the -1 is adjustment for the single line break into which multiple line breaks are converted
-    const countTruncatedLineBreaks = ownStartLine - prevEndLine - 1;
-    if (countTruncatedLineBreaks < 1)
-        return;
-    const lineBreaks = Array.from({ length: countTruncatedLineBreaks }, () => u('break', { tagName: 'br' }));
-    parent.children = [
-        ...parent.children.slice(0, index),
-        ...lineBreaks,
-        ...parent.children.slice(index),
-    ];
-    return;
+/** Type guard: does the node have mdast children? */
+function isParentWithChildren(node) {
+    const maybe = node;
+    return Array.isArray(maybe.children);
+}
+/** Build a single <br> by mapping a standard mdast node via data.hName */
+function brNode() {
+    return { data: { hName: 'br' }, type: 'thematicBreak' };
+}
+/**
+ * Inserts runs of <br> between sibling block nodes to preserve the exact
+ * number of *blank source lines* between them. No paragraph wrappers are added.
+ *
+ * Works because `mdast-util-to-hast` respects `data.hName`, turning our
+ * `thematicBreak` into `<br>`. Multiple blank lines -> multiple `<br>` siblings.
+ */
+export const keepLineBreaksPlugin = () => (tree) => {
+    visit(tree, // visit needs a Unist parent-like root
+    isParentWithChildren, // limit to parents with children
+    (parent) => {
+        const children = parent.children;
+        if (children.length < 2)
+            return;
+        const out = [];
+        for (let i = 0; i < children.length; i++) {
+            const curr = children[i];
+            out.push(curr);
+            if (i === children.length - 1)
+                break;
+            const next = children[i + 1];
+            const currEndLine = curr.position && curr.position.end ? curr.position.end.line : undefined;
+            const nextStartLine = next.position && next.position.start ? next.position.start.line : undefined;
+            if (typeof currEndLine !== 'number' || typeof nextStartLine !== 'number') {
+                continue;
+            }
+            // Markdown already separates blocks by at least one visual gap.
+            // We add back only the *extra* blank lines from the source.
+            const extraBlankLines = Math.max(0, nextStartLine - currEndLine - 1);
+            if (extraBlankLines > 0) {
+                for (let k = 0; k < extraBlankLines; k++) {
+                    out.push(brNode());
+                }
+            }
+        }
+        parent.children = out;
+    });
 };
-const transform = (tree) => {
-    visit(tree, visitor);
-};
-export const keepLineBreaksPlugin = () => transform;

package/dist/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+/**
+ * Replace the parsed Markdown tree with a single paragraph containing the
+ * original source as a plain text node. No Markdown formatting is interpreted.
+ * React will escape it.
+ */
+export declare const remarkIgnoreMarkdown: Plugin<[], Root>;

package/dist/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.js

@@ -0,0 +1,11 @@
+/**
+ * Replace the parsed Markdown tree with a single paragraph containing the
+ * original source as a plain text node. No Markdown formatting is interpreted.
+ * React will escape it.
+ */
+export const remarkIgnoreMarkdown = () => (tree, file) => {
+    const source = String(file.value ?? '');
+    const text = { type: 'text', value: source };
+    const paragraph = { children: [text], type: 'paragraph' };
+    tree.children = [paragraph];
+};