stream-chat-react 13.0.4 → 13.1.0

package/dist/components/Channel/Channel.d.ts

@@ -5,7 +5,7 @@ import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import type { LoadingErrorIndicatorProps } from '../Loading';
 import type { ComponentContextValue } from '../../context';
 import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
-type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;

package/dist/components/Channel/Channel.js

@@ -69,6 +69,7 @@ const ChannelInner = (props) => {
         ...initialState,
         hasMore: channel.state.messagePagination.hasPrev,
         loading: !channel.initialized,
+        messages: channel.state.messages,
     });
     const jumpToMessageFromSearch = useSearchFocusedMessage();
     const isMounted = useIsMounted();
@@ -731,6 +732,7 @@ const ChannelInner = (props) => {
         MessageBlocked: props.MessageBlocked,
         MessageBouncePrompt: props.MessageBouncePrompt,
         MessageDeleted: props.MessageDeleted,
+        MessageIsThreadReplyInChannelButtonIndicator: props.MessageIsThreadReplyInChannelButtonIndicator,
         MessageListNotifications: props.MessageListNotifications,
         MessageNotification: props.MessageNotification,
         MessageOptions: props.MessageOptions,
@@ -752,7 +754,9 @@ const ChannelInner = (props) => {
         ReactionSelector: props.ReactionSelector,
         ReactionsList: props.ReactionsList,
         ReactionsListModal: props.ReactionsListModal,
+        ReminderNotification: props.ReminderNotification,
         SendButton: props.SendButton,
+        SendToChannelCheckbox: props.SendToChannelCheckbox,
         StartRecordingAudioButton: props.StartRecordingAudioButton,
         StopAIGenerationButton: props.StopAIGenerationButton,
         StreamedMessageText: props.StreamedMessageText,
@@ -793,6 +797,7 @@ const ChannelInner = (props) => {
         props.MessageBlocked,
         props.MessageBouncePrompt,
         props.MessageDeleted,
+        props.MessageIsThreadReplyInChannelButtonIndicator,
         props.MessageListNotifications,
         props.MessageNotification,
         props.MessageOptions,
@@ -814,7 +819,9 @@ const ChannelInner = (props) => {
         props.ReactionSelector,
         props.ReactionsList,
         props.ReactionsListModal,
+        props.ReminderNotification,
         props.SendButton,
+        props.SendToChannelCheckbox,
         props.StartRecordingAudioButton,
         props.StopAIGenerationButton,
         props.StreamedMessageText,

package/dist/components/ChannelList/hooks/useChannelListShape.js

@@ -162,13 +162,13 @@ export const useChannelListShapeDefaults = () => {
         if (typeof customHandler === 'function') {
             return customHandler(setChannels, event);
         }
-        if (!event.channel) {
+        if (!event.channel_id && !event.channel_type) {
             return;
         }
         const channel = await getChannel({
             client,
-            id: event.channel.id,
-            type: event.channel.type,
+            id: event.channel_id,
+            type: event.channel_type,
         });
         const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
         if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) {

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

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { defaultDateTimeParser, isLanguageSupported, Streami18n } from '../../../i18n';
+import { defaultDateTimeParser, defaultTranslatorFunction, isLanguageSupported, Streami18n, } from '../../../i18n';
 export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialNavOpen, }) => {
     const [translators, setTranslators] = useState({
-        t: (key) => key,
+        t: defaultTranslatorFunction,
         tDateTimeParser: defaultDateTimeParser,
         userLanguage: 'en',
     });
@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.0.4";
+        const version = "13.1.0";
         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'
@@ -33,9 +33,13 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();
+        client.reminders.registerSubscriptions();
+        client.reminders.initTimers();
         return () => {
             client.threads.unregisterSubscriptions();
             client.polls.unregisterSubscriptions();
+            client.reminders.unregisterSubscriptions();
+            client.reminders.clearTimers();
         };
     }, [client]);
     useEffect(() => {

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ComponentProps, ComponentType } from 'react';
+import type { Placement } from '@popperjs/core';
+type ButtonWithSubmenu = ComponentProps<'button'> & {
+    children: React.ReactNode;
+    placement: Placement;
+    Submenu: ComponentType;
+    submenuContainerProps?: ComponentProps<'div'>;
+};
+export declare const ButtonWithSubmenu: ({ children, className, placement, Submenu, submenuContainerProps, ...buttonProps }: ButtonWithSubmenu) => React.JSX.Element;
+export {};

package/dist/components/Dialog/ButtonWithSubmenu.js

@@ -0,0 +1,88 @@
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDialog, useDialogIsOpen } from './hooks';
+import { useDialogAnchor } from './DialogAnchor';
+export const ButtonWithSubmenu = ({ children, className, placement, Submenu, submenuContainerProps, ...buttonProps }) => {
+    const buttonRef = useRef(null);
+    const [dialogContainer, setDialogContainer] = useState(null);
+    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({
+        open: dialogIsOpen,
+        placement,
+        referenceElement: buttonRef.current,
+    });
+    const closeDialogLazily = useCallback(() => {
+        if (dialogCloseTimeout.current)
+            clearTimeout(dialogCloseTimeout.current);
+        dialogCloseTimeout.current = setTimeout(() => {
+            if (keepSubmenuOpen.current)
+                return;
+            dialog.close();
+        }, 100);
+    }, [dialog]);
+    const handleClose = useCallback((event) => {
+        const parentButton = buttonRef.current;
+        if (!dialogIsOpen || !parentButton)
+            return;
+        event.stopPropagation();
+        closeDialogLazily();
+        parentButton.focus();
+    }, [closeDialogLazily, dialogIsOpen, buttonRef]);
+    const handleFocusParentButton = () => {
+        if (dialogIsOpen)
+            return;
+        dialog.open();
+        keepSubmenuOpen.current = true;
+    };
+    useEffect(() => {
+        const parentButton = buttonRef.current;
+        if (!dialogIsOpen || !parentButton)
+            return;
+        const hideOnEscape = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            handleClose(event);
+            keepSubmenuOpen.current = false;
+        };
+        document.addEventListener('keyup', hideOnEscape, { capture: true });
+        return () => {
+            document.removeEventListener('keyup', hideOnEscape, { capture: true });
+        };
+    }, [dialogIsOpen, handleClose]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { "aria-selected": 'false', className: clsx(className, 'str_chat__button-with-submenu', {
+                'str_chat__button-with-submenu--submenu-open': dialogIsOpen,
+            }), onBlur: () => {
+                keepSubmenuOpen.current = false;
+                closeDialogLazily();
+            }, onClick: (event) => {
+                event.stopPropagation();
+                dialog.toggle();
+            }, onFocus: handleFocusParentButton, onMouseEnter: handleFocusParentButton, onMouseLeave: () => {
+                keepSubmenuOpen.current = false;
+                closeDialogLazily();
+            }, ref: buttonRef, role: 'option', ...buttonProps }, children),
+        dialogIsOpen && (React.createElement("div", { ...attributes.popper, onBlur: (event) => {
+                const isBlurredDescendant = event.relatedTarget instanceof Node &&
+                    dialogContainer?.contains(event.relatedTarget);
+                if (isBlurredDescendant)
+                    return;
+                keepSubmenuOpen.current = false;
+                closeDialogLazily();
+            }, onFocus: () => {
+                keepSubmenuOpen.current = true;
+            }, onMouseEnter: () => {
+                keepSubmenuOpen.current = true;
+            }, onMouseLeave: () => {
+                keepSubmenuOpen.current = false;
+                closeDialogLazily();
+            }, ref: (element) => {
+                setPopperElement(element);
+                setDialogContainer(element);
+            }, style: styles.popper, tabIndex: -1, ...submenuContainerProps },
+            React.createElement(Submenu, null)))));
+};

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

@@ -1,3 +1,4 @@
+export * from './ButtonWithSubmenu';
 export * from './DialogAnchor';
 export * from './DialogManager';
 export * from './DialogPortal';

package/dist/components/Dialog/index.js

@@ -1,3 +1,4 @@
+export * from './ButtonWithSubmenu';
 export * from './DialogAnchor';
 export * from './DialogManager';
 export * from './DialogPortal';

package/dist/components/Loading/LoadingErrorIndicator.js

@@ -7,6 +7,6 @@ const UnMemoizedLoadingErrorIndicator = ({ error }) => {
     const { t } = useTranslationContext('LoadingErrorIndicator');
     if (!error)
         return null;
-    return (React.createElement("div", null, t('Error: {{ errorMessage }}', { errorMessage: error.message })));
+    return React.createElement("div", null, t('Error: {{ errorMessage }}', { errorMessage: error.message }));
 };
 export const LoadingErrorIndicator = React.memo(UnMemoizedLoadingErrorIndicator, (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message);

package/dist/components/Message/Message.js

@@ -6,7 +6,7 @@ import { MessageSimple as DefaultMessage } from './MessageSimple';
 const MessageWithContext = (props) => {
     const { canPin, groupedByUser, Message: propMessage, message, messageActions = Object.keys(MESSAGE_ACTIONS), onUserClick: propOnUserClick, onUserHover: propOnUserHover, userRoles, } = props;
     const { client, isMessageAIGenerated } = useChatContext('Message');
-    const { read } = useChannelStateContext('Message');
+    const { channelConfig, read } = useChannelStateContext('Message');
     const { Message: contextMessage } = useComponentContext('Message');
     const actionsEnabled = message.type === 'regular' && message.status === 'received';
     const MessageUIComponent = propMessage ?? contextMessage ?? DefaultMessage;
@@ -33,7 +33,7 @@ const MessageWithContext = (props) => {
         canQuote,
         canReact,
         canReply,
-    }), [
+    }, channelConfig), [
         messageActions,
         canDelete,
         canEdit,
@@ -44,6 +44,7 @@ const MessageWithContext = (props) => {
         canQuote,
         canReact,
         canReply,
+        channelConfig,
     ]);
     const { canPin: canPinPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
     messageActions: messageActionsPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars

package/dist/components/Message/MessageSimple.js

@@ -9,6 +9,11 @@ import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from '.
 import { MessageStatus as DefaultMessageStatus } from './MessageStatus';
 import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
+import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
+import { isDateSeparatorMessage } from '../MessageList';
+import { MessageThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageThreadReplyInChannelButtonIndicator';
+import { ReminderNotification as DefaultReminderNotification } from './ReminderNotification';
+import { useMessageReminder } from './hooks';
 import { areMessageUIPropsEqual, isMessageBlocked, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
@@ -21,18 +26,17 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useChatContext, useTranslationContext } from '../../context';
 import { MessageEditedTimestamp } from './MessageEditedTimestamp';
-import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
-import { isDateSeparatorMessage } from '../MessageList';
 const MessageSimpleWithContext = (props) => {
     const { additionalMessageInputProps, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMessageAIGenerated, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
     const { client } = useChatContext('MessageSimple');
     const { t } = useTranslationContext('MessageSimple');
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
     const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
+    const reminder = useMessageReminder(message.id);
     const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, MessageOptions = DefaultMessageOptions, 
     // TODO: remove this "passthrough" in the next
     // major release and use the new default instead
-    MessageActions = MessageOptions, MessageBlocked = DefaultMessageBlocked, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
+    MessageActions = MessageOptions, MessageBlocked = DefaultMessageBlocked, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageDeleted = DefaultMessageDeleted, MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, ReminderNotification = DefaultReminderNotification, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
@@ -47,6 +51,7 @@ const MessageSimpleWithContext = (props) => {
     }
     const showMetadata = !groupedByUser || endOfGroup;
     const showReplyCountButton = !threadList && !!message.reply_count;
+    const showIsReplyInChannel = !threadList && message.show_in_channel && message.parent_id;
     const allowRetry = message.status === 'failed' && message.error?.status !== 403;
     const isBounced = isMessageBounced(message);
     const isEdited = isMessageEdited(message) && !isAIGenerated;
@@ -68,7 +73,7 @@ const MessageSimpleWithContext = (props) => {
         'str-chat__message--pinned pinned-message': message.pinned,
         'str-chat__message--with-reactions': hasReactions,
         'str-chat__message-send-can-be-retried': message?.status === 'failed' && message?.error?.status !== 403,
-        'str-chat__message-with-thread-link': showReplyCountButton,
+        'str-chat__message-with-thread-link': showReplyCountButton || showIsReplyInChannel,
         'str-chat__virtual-message__wrapper--end': endOfGroup,
         'str-chat__virtual-message__wrapper--first': firstOfGroup,
         'str-chat__virtual-message__wrapper--group': groupedByUser,
@@ -79,6 +84,7 @@ const MessageSimpleWithContext = (props) => {
         isBounceDialogOpen && (React.createElement(MessageBounceModal, { MessageBouncePrompt: MessageBouncePrompt, onClose: () => setIsBounceDialogOpen(false), open: isBounceDialogOpen })),
         React.createElement("div", { className: rootClassName, key: message.id },
             PinIndicator && React.createElement(PinIndicator, null),
+            !!reminder && React.createElement(ReminderNotification, { reminder: reminder }),
             message.user && (React.createElement(Avatar, { image: message.user.image, name: message.user.name || message.user.id, onClick: onUserClick, onMouseOver: onUserHover, user: message.user })),
             React.createElement("div", { className: clsx('str-chat__message-inner', {
                     'str-chat__simple-message--error-failed': allowRetry || isBounced,
@@ -92,6 +98,7 @@ const MessageSimpleWithContext = (props) => {
                     message.mml && (React.createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),
                     React.createElement(MessageErrorIcon, null))),
             showReplyCountButton && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),
+            showIsReplyInChannel && React.createElement(MessageIsThreadReplyInChannelButtonIndicator, null),
             showMetadata && (React.createElement("div", { className: 'str-chat__message-metadata' },
                 React.createElement(MessageStatus, null),
                 !isMyMessage() && !!message.user && (React.createElement("span", { className: 'str-chat__message-simple-name' }, message.user.name || message.user.id)),

package/dist/components/Message/MessageThreadReplyInChannelButtonIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MessageThreadReplyInChannelButtonIndicator: () => React.JSX.Element | null;

package/dist/components/Message/MessageThreadReplyInChannelButtonIndicator.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import { formatMessage } from 'stream-chat';
+import { useChannelActionContext, useChannelStateContext, useChatContext, useMessageContext, useTranslationContext, } from '../../context';
+export const MessageThreadReplyInChannelButtonIndicator = () => {
+    const { client } = useChatContext();
+    const { t } = useTranslationContext();
+    const { channel } = useChannelStateContext();
+    const { openThread } = useChannelActionContext();
+    const { message } = useMessageContext();
+    const parentMessageRef = useRef(undefined);
+    const querySearchParent = () => channel
+        .getClient()
+        .search({ cid: channel.cid }, { id: message.parent_id })
+        .then(({ results }) => {
+        if (!results.length) {
+            throw new Error('Thread has not been found');
+        }
+        parentMessageRef.current = formatMessage(results[0].message);
+    })
+        .catch((error) => {
+        client.notifications.addError({
+            message: t('Thread has not been found'),
+            options: {
+                originalError: error,
+                type: 'api:message:search:not-found',
+            },
+            origin: {
+                context: { threadReply: message },
+                emitter: 'MessageThreadReplyInChannelButtonIndicator',
+            },
+        });
+    });
+    useEffect(() => {
+        if (parentMessageRef.current ||
+            parentMessageRef.current === null ||
+            !message.parent_id)
+            return;
+        const localMessage = channel.state.findMessage(message.parent_id);
+        if (localMessage) {
+            parentMessageRef.current = localMessage;
+            return;
+        }
+    }, [channel, message]);
+    if (!message.parent_id)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__message-is-thread-reply-button-wrapper' },
+        React.createElement("button", { className: 'str-chat__message-is-thread-reply-button', "data-testid": 'message-is-thread-reply-button', onClick: async () => {
+                if (!parentMessageRef.current) {
+                    // search query is performed here in order to prevent multiple search queries in useEffect
+                    // due to the message list 3x remounting its items
+                    await querySearchParent();
+                    if (parentMessageRef.current) {
+                        openThread(parentMessageRef.current);
+                    }
+                    else {
+                        // prevent further search queries if the message is not found in the DB
+                        parentMessageRef.current = null;
+                    }
+                    return;
+                }
+                openThread(parentMessageRef.current);
+            }, type: 'button' }, t('Thread reply'))));
+};

package/dist/components/Message/ReminderNotification.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Reminder } from 'stream-chat';
+export type ReminderNotificationProps = {
+    reminder?: Reminder;
+};
+export declare const ReminderNotification: ({ reminder }: ReminderNotificationProps) => React.JSX.Element;

package/dist/components/Message/ReminderNotification.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTranslationContext } from '../../context';
+import { useStateStore } from '../../store';
+const reminderStateSelector = (state) => ({
+    timeLeftMs: state.timeLeftMs,
+});
+export const ReminderNotification = ({ reminder }) => {
+    const { t } = useTranslationContext();
+    const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
+    const stopRefreshBoundaryMs = reminder?.timer.stopRefreshBoundaryMs;
+    const stopRefreshTimeStamp = reminder?.remindAt && stopRefreshBoundaryMs
+        ? reminder?.remindAt.getTime() + stopRefreshBoundaryMs
+        : undefined;
+    const isBehindRefreshBoundary = !!stopRefreshTimeStamp && new Date().getTime() > stopRefreshTimeStamp;
+    return (React.createElement("p", { className: 'str-chat__message-reminder' },
+        React.createElement("span", null, t('Saved for later')),
+        reminder?.remindAt && timeLeftMs !== null && (React.createElement(React.Fragment, null,
+            React.createElement("span", null, " | "),
+            React.createElement("span", null, isBehindRefreshBoundary
+                ? t('Due since {{ dueSince }}', {
+                    dueSince: t(`timestamp/ReminderNotification`, {
+                        timestamp: reminder.remindAt,
+                    }),
+                })
+                : t(`Due {{ timeLeft }}`, {
+                    timeLeft: t('duration/Message reminder', {
+                        milliseconds: timeLeftMs,
+                    }),
+                }))))));
+};

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

@@ -13,3 +13,4 @@ export * from './useUserHandler';
 export * from './useUserRole';
 export * from './useReactionsFetcher';
 export * from './useMessageTextStreaming';
+export * from './useMessageReminder';

package/dist/components/Message/hooks/index.js

@@ -13,3 +13,4 @@ export * from './useUserHandler';
 export * from './useUserRole';
 export * from './useReactionsFetcher';
 export * from './useMessageTextStreaming';
+export * from './useMessageReminder';

package/dist/components/Message/hooks/useMessageReminder.d.ts

@@ -0,0 +1 @@
+export declare const useMessageReminder: (messageId: string) => import("stream-chat").Reminder | undefined;

package/dist/components/Message/hooks/useMessageReminder.js

@@ -0,0 +1,11 @@
+import { useCallback } from 'react';
+import { useChatContext } from '../../../context';
+import { useStateStore } from '../../../store';
+export const useMessageReminder = (messageId) => {
+    const { client } = useChatContext();
+    const reminderSelector = useCallback((state) => ({
+        reminder: state.reminders.get(messageId),
+    }), [messageId]);
+    const { reminder } = useStateStore(client.reminders.state, reminderSelector);
+    return reminder;
+};

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

@@ -10,6 +10,7 @@ export * from './MessageStatus';
 export * from './MessageText';
 export * from './MessageTimestamp';
 export * from './QuotedMessage';
+export * from './ReminderNotification';
 export * from './renderText';
 export * from './types';
 export * from './utils';

package/dist/components/Message/index.js

@@ -10,6 +10,7 @@ export * from './MessageStatus';
 export * from './MessageText';
 export * from './MessageTimestamp';
 export * from './QuotedMessage';
+export * from './ReminderNotification';
 export * from './renderText';
 export * from './types';
 export * from './utils';

package/dist/components/Message/utils.d.ts

@@ -1,5 +1,5 @@
 import type { TFunction } from 'i18next';
-import type { LocalMessage, MessageResponse, Mute, StreamChat, UserResponse } from 'stream-chat';
+import type { ChannelConfigWithInfo, LocalMessage, MessageResponse, Mute, StreamChat, UserResponse } from 'stream-chat';
 import type { PinPermissions } from './hooks';
 import type { MessageProps } from './types';
 import type { ComponentContextValue, CustomMessageActions, MessageContextValue } from '../../context';
@@ -21,7 +21,9 @@ export declare const MESSAGE_ACTIONS: {
     pin: string;
     quote: string;
     react: string;
+    remindMe: string;
     reply: string;
+    saveForLater: string;
 };
 export type MessageActionsArray<T extends string = string> = Array<keyof typeof MESSAGE_ACTIONS | T>;
 export declare const defaultPinPermissions: PinPermissions;
@@ -36,7 +38,7 @@ export type Capabilities = {
     canReact?: boolean;
     canReply?: boolean;
 };
-export declare const getMessageActions: (actions: MessageActionsArray | boolean, { canDelete, canEdit, canFlag, canMarkUnread, canMute, canPin, canQuote, canReact, canReply, }: Capabilities) => MessageActionsArray<string>;
+export declare const getMessageActions: (actions: MessageActionsArray | boolean, { canDelete, canEdit, canFlag, canMarkUnread, canMute, canPin, canQuote, canReact, canReply, }: Capabilities, channelConfig?: ChannelConfigWithInfo) => MessageActionsArray<string>;
 export declare const ACTIONS_NOT_WORKING_IN_THREAD: string[];
 /**
  * @deprecated use `shouldRenderMessageActions` instead

package/dist/components/Message/utils.js

@@ -35,7 +35,9 @@ export const MESSAGE_ACTIONS = {
     pin: 'pin',
     quote: 'quote',
     react: 'react',
+    remindMe: 'remindMe',
     reply: 'reply',
+    saveForLater: 'saveForLater',
 };
 // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
 export const defaultPinPermissions = {
@@ -95,7 +97,7 @@ export const defaultPinPermissions = {
         user: false,
     },
 };
-export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMarkUnread, canMute, canPin, canQuote, canReact, canReply, }) => {
+export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMarkUnread, canMute, canPin, canQuote, canReact, canReply, }, channelConfig) => {
     const messageActionsAfterPermission = [];
     let messageActions = [];
     if (actions && typeof actions === 'boolean') {
@@ -132,9 +134,17 @@ export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMar
     if (canReact && messageActions.indexOf(MESSAGE_ACTIONS.react) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.react);
     }
+    if (channelConfig?.['user_message_reminders'] &&
+        messageActions.indexOf(MESSAGE_ACTIONS.remindMe)) {
+        messageActionsAfterPermission.push(MESSAGE_ACTIONS.remindMe);
+    }
     if (canReply && messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.reply);
     }
+    if (channelConfig?.['user_message_reminders'] &&
+        messageActions.indexOf(MESSAGE_ACTIONS.saveForLater)) {
+        messageActionsAfterPermission.push(MESSAGE_ACTIONS.saveForLater);
+    }
     return messageActionsAfterPermission;
 };
 export const ACTIONS_NOT_WORKING_IN_THREAD = [

package/dist/components/MessageActions/MessageActionsBox.js

@@ -1,17 +1,19 @@
 import clsx from 'clsx';
 import React from 'react';
-import { MESSAGE_ACTIONS } from '../Message/utils';
-import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
+import { RemindMeActionButton } from './RemindMeSubmenu';
+import { useMessageReminder } from '../Message';
 import { useMessageComposer } from '../MessageInput';
+import { useChatContext, useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
+import { MESSAGE_ACTIONS } from '../Message/utils';
 const UnMemoizedMessageActionsBox = (props) => {
-    const { className, getMessageActions, handleDelete, handleEdit, handleFlag, handleMarkUnread, handleMute, handlePin, isUserMuted, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    mine, open, ...restDivProps } = props;
+    const { className, getMessageActions, handleDelete, handleEdit, handleFlag, handleMarkUnread, handleMute, handlePin, isUserMuted, mine, open, ...restDivProps } = props;
+    const { client } = useChatContext();
     const { CustomMessageActionsList = DefaultCustomMessageActionsList } = useComponentContext('MessageActionsBox');
     const { customMessageActions, message, threadList } = useMessageContext('MessageActionsBox');
     const { t } = useTranslationContext('MessageActionsBox');
     const messageComposer = useMessageComposer();
+    const reminder = useMessageReminder(message.id);
     const messageActions = getMessageActions();
     const handleQuote = () => {
         messageComposer.setQuotedMessage(message);
@@ -38,7 +40,11 @@ const UnMemoizedMessageActionsBox = (props) => {
             messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleFlag, role: 'option' }, t('Flag'))),
             messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
             messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleEdit, role: 'option' }, t('Edit Message'))),
-            messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleDelete, role: 'option' }, t('Delete'))))));
+            messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleDelete, role: 'option' }, t('Delete'))),
+            messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1 && (React.createElement(RemindMeActionButton, { className: buttonClassName, isMine: mine })),
+            messageActions.indexOf(MESSAGE_ACTIONS.saveForLater) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: () => reminder
+                    ? client.reminders.deleteReminder(reminder.id)
+                    : client.reminders.createReminder({ messageId: message.id }), role: 'option' }, reminder ? t('Remove reminder') : t('Save for later'))))));
 };
 /**
  * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.

package/dist/components/MessageActions/RemindMeSubmenu.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+export declare const RemindMeActionButton: ({ className, isMine, }: {
+    isMine: boolean;
+} & ComponentProps<'button'>) => React.JSX.Element;
+export declare const RemindMeSubmenu: () => React.JSX.Element;

package/dist/components/MessageActions/RemindMeSubmenu.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useChatContext, useMessageContext, useTranslationContext } from '../../context';
+import { ButtonWithSubmenu } from '../Dialog';
+export const RemindMeActionButton = ({ className, isMine, }) => {
+    const { t } = useTranslationContext();
+    return (React.createElement(ButtonWithSubmenu, { "aria-selected": 'false', className: className, placement: isMine ? 'left-start' : 'right-start', Submenu: RemindMeSubmenu }, t('Remind Me')));
+};
+export const RemindMeSubmenu = () => {
+    const { t } = useTranslationContext();
+    const { client } = useChatContext();
+    const { message } = useMessageContext();
+    return (React.createElement("div", { "aria-label": t('aria/Remind Me Options'), className: 'str-chat__message-actions-box__submenu', role: 'listbox' }, client.reminders.scheduledOffsetsMs.map((offsetMs) => (React.createElement("button", { className: 'str-chat__message-actions-list-item-button', key: `reminder-offset-option--${offsetMs}`, onClick: () => {
+            client.reminders.upsertReminder({
+                messageId: message.id,
+                remind_at: new Date(new Date().getTime() + offsetMs).toISOString(),
+            });
+        } }, t('duration/Remind Me', { milliseconds: offsetMs }))))));
+};