feat: add message reminders

src/components/Channel/Channel.tsx

@@ -141,6 +141,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'ReactionSelector'
   | 'ReactionsList'
   | 'ReactionsListModal'
+  | 'ReminderNotification'
   | 'SendButton'
   | 'SendToChannelCheckbox'
   | 'StartRecordingAudioButton'
@@ -1231,6 +1232,7 @@ const ChannelInner = (
       ReactionSelector: props.ReactionSelector,
       ReactionsList: props.ReactionsList,
       ReactionsListModal: props.ReactionsListModal,
+      ReminderNotification: props.ReminderNotification,
       SendButton: props.SendButton,
       SendToChannelCheckbox: props.SendToChannelCheckbox,
       StartRecordingAudioButton: props.StartRecordingAudioButton,
@@ -1296,6 +1298,7 @@ const ChannelInner = (
       props.ReactionSelector,
       props.ReactionsList,
       props.ReactionsListModal,
+      props.ReminderNotification,
       props.SendButton,
       props.SendToChannelCheckbox,
       props.StartRecordingAudioButton,

src/components/Channel/__tests__/Channel.test.js

@@ -1509,7 +1509,7 @@ describe('Channel', () => {
             if (!hasSent) {
               const m = generateMessage({
                 id: messageId,
-                status: 'sending', // FIXME: had to have been explicitly added
+                status: 'sending', // FIXME: had to be explicitly added
                 text: messageText,
               });
               sendMessage({ localMessage: { ...m, status: 'sending' }, message: m });

src/components/Chat/hooks/useChat.ts

@@ -66,10 +66,14 @@ export const useChat = ({
 
     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]);
 

src/components/Dialog/ButtonWithSubmenu.tsx

@@ -0,0 +1,137 @@
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDialog, useDialogIsOpen } from './hooks';
+import { useDialogAnchor } from './DialogAnchor';
+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 const ButtonWithSubmenu = ({
+  children,
+  className,
+  placement,
+  Submenu,
+  submenuContainerProps,
+  ...buttonProps
+}: ButtonWithSubmenu) => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const [dialogContainer, setDialogContainer] = useState<HTMLDivElement | null>(null);
+  const keepSubmenuOpen = useRef(false);
+  const dialogCloseTimeout = useRef<NodeJS.Timeout | null>(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<HTMLDivElement>({
+    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: 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: KeyboardEvent) => {
+      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 (
+    <>
+      <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}
+      </button>
+      {dialogIsOpen && (
+        <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}
+        >
+          <Submenu />
+        </div>
+      )}
+    </>
+  );
+};

src/components/Dialog/index.ts

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

src/components/Message/Message.tsx

@@ -40,13 +40,13 @@ type MessagePropsToOmit =
 type MessageContextPropsToPick =
   | 'handleAction'
   | 'handleDelete'
+  | 'handleFetchReactions'
   | 'handleFlag'
   | 'handleMarkUnread'
   | 'handleMute'
   | 'handleOpenThread'
   | 'handlePin'
   | 'handleReaction'
-  | 'handleFetchReactions'
   | 'handleRetry'
   | 'mutes'
   | 'onMentionsClickMessage'
@@ -74,7 +74,7 @@ const MessageWithContext = (props: MessageWithContextProps) => {
   } = 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';
@@ -115,17 +115,22 @@ const MessageWithContext = (props: MessageWithContextProps) => {
 
   const messageActionsHandler = useCallback(
     () =>
-      getMessageActions(messageActions, {
-        canDelete,
-        canEdit,
-        canFlag,
-        canMarkUnread,
-        canMute,
-        canPin,
-        canQuote,
-        canReact,
-        canReply,
-      }),
+      getMessageActions(
+        messageActions,
+        {
+          canDelete,
+          canEdit,
+          canFlag,
+          canMarkUnread,
+          canMute,
+          canPin,
+          canQuote,
+          canReact,
+          canReply,
+        },
+        channelConfig,
+      ),
+
     [
       messageActions,
       canDelete,
@@ -137,6 +142,7 @@ const MessageWithContext = (props: MessageWithContextProps) => {
       canQuote,
       canReact,
       canReply,
+      channelConfig,
     ],
   );
 

src/components/Message/MessageSimple.tsx

@@ -13,6 +13,8 @@ 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,
@@ -63,6 +65,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
   const { t } = useTranslationContext('MessageSimple');
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
   const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
+  const reminder = useMessageReminder(message.id);
 
   const {
     Attachment = DefaultAttachment,
@@ -79,6 +82,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
     MessageStatus = DefaultMessageStatus,
     MessageTimestamp = DefaultMessageTimestamp,
     ReactionsList = DefaultReactionList,
+    ReminderNotification = DefaultReminderNotification,
     StreamedMessageText = DefaultStreamedMessageText,
     PinIndicator,
   } = useComponentContext('MessageSimple');
@@ -158,6 +162,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
       {
         <div className={rootClassName} key={message.id}>
           {PinIndicator && <PinIndicator />}
+          {!!reminder && <ReminderNotification reminder={reminder} />}
           {message.user && (
             <Avatar
               image={message.user.image}

src/components/Message/ReminderNotification.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useTranslationContext } from '../../context';
+import { useStateStore } from '../../store';
+import type { Reminder, ReminderState } from 'stream-chat';
+
+export type ReminderNotificationProps = {
+  reminder?: Reminder;
+};
+
+const reminderStateSelector = (state: ReminderState) => ({
+  timeLeftMs: state.timeLeftMs,
+});
+
+export const ReminderNotification = ({ reminder }: ReminderNotificationProps) => {
+  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 (
+    <p className='str-chat__message-reminder'>
+      <span>{t<string>('Saved for later')}</span>
+      {reminder?.remindAt && timeLeftMs !== null && (
+        <>
+          <span> | </span>
+          <span>
+            {isBehindRefreshBoundary
+              ? t<string>('Due since {{ dueSince }}', {
+                  dueSince: t<string>(`timestamp/ReminderNotification`, {
+                    timestamp: reminder.remindAt,
+                  }),
+                })
+              : t<string>(`Due {{ timeLeft }}`, {
+                  timeLeft: t<string>('duration/Message reminder', {
+                    milliseconds: timeLeftMs,
+                  }),
+                })}
+          </span>
+        </>
+      )}
+    </p>
+  );
+};

src/components/Message/__tests__/MessageSimple.test.js

@@ -36,6 +36,7 @@ import {
   useMockedApis,
 } from '../../../mock-builders';
 import { MessageBouncePrompt } from '../../MessageBounce';
+import { generateReminderResponse } from '../../../mock-builders/generator/reminder';
 
 expect.extend(toHaveNoViolations);
 
@@ -267,6 +268,28 @@ describe('<MessageSimple />', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should render custom ReminderNotification component when one is given', async () => {
+    const message = generateAliceMessage({ reminder: generateReminderResponse() });
+    client.reminders.hydrateState([message]);
+    const testId = 'custom-reminder-notification';
+    const CustomReminderNotification = () => <div data-testid={testId} />;
+
+    const { container } = await renderMessageSimple({
+      channelConfigOverrides: {
+        user_message_reminder: true,
+      },
+      components: {
+        ReminderNotification: CustomReminderNotification,
+      },
+      message,
+    });
+
+    expect(await screen.findByTestId(testId)).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
   // FIXME: test relying on deprecated channel config parameter
   it('should render reaction list even though sending reactions is disabled in channel config', async () => {
     const reactions = [generateReaction({ user: bob })];