fix: post-review MessageReactionsDetail adjustments (#3082)

## Breaking Changes

### Removed deprecated `sortReactionDetails` prop and
`ReactionDetailsComparator` type

The `sortReactionDetails` prop has been removed from the following
components and contexts:

- `MessageProps` (and by extension `Message` component)
- `MessageContextValue` (and by extension `MessageContext`)
- `MessageReactionsProps` (and by extension `MessageReactions`
component)
- `MessageReactionsDetailProps` (and by extension
`MessageReactionsDetail` component)
- `MessageListProps` (and by extension `MessageList` component)
- `VirtualizedMessageListProps` (and by extension
`VirtualizedMessageList` component)

The `ReactionDetailsComparator` type export has been removed from
`src/components/Reactions/types.ts`.

**Migration:** Replace all usages of `sortReactionDetails` with the
`reactionDetailsSort` prop, which accepts a `ReactionSort` object
(server-side sort) instead of a client-side comparator function.

### Removed deprecated `reaction_counts` prop from
`MessageReactionsProps`

The `reaction_counts` prop on `MessageReactions` has been removed. It
was previously ignored at runtime.

**Migration:** Use `reaction_groups` instead, which provides richer
per-reaction-type summary data (including `count`).

### Removed deprecated `reactionOptions` prop from
`MessageReactionsProps`

The `reactionOptions` prop on `MessageReactions` has been removed. The
component now reads `reactionOptions` exclusively from
`ComponentContext`.

**Migration:** Pass `reactionOptions` via `<WithComponents overrides={{
reactionOptions }}>...</WithComponents>` instead of directly on
`<MessageReactions>`.

### `UseProcessReactionsParams` no longer accepts `reaction_counts` or
`reactionOptions`

The `UseProcessReactionsParams` type (used by the `useProcessReactions`
hook) no longer includes `reaction_counts` or `reactionOptions` fields,
consistent with the prop removals above.

## New Features

### `capLimit` prop on `MessageReactions`

A new optional `capLimit` prop allows configuring how many reaction
types are displayed before overflow in each visual style:

```ts
capLimit?: {
  clustered?: number; // default: 5
  segmented?: number; // default: 4
};
```

Previously, only the `segmented` style (in `top` position) capped
reactions at a hardcoded limit of 4. Now the `clustered` style also caps
displayed reaction types (default: 5), and both limits are configurable.

### `reactionGroups` added to `useProcessReactions` return value

The `useProcessReactions` hook now returns `reactionGroups` (the
resolved `Record<string, ReactionGroupResponse> | undefined`) alongside
the existing return fields.

### `reactionGroups` prop on `MessageReactionsDetail`

`MessageReactionsDetail` now accepts a `reactionGroups` prop used to
determine reaction counts when removing a reaction. This enables the
component to switch to the "all reactions" view when the last reaction
of a given type is removed, instead of attempting to refetch an empty
list.

### `UseProcessReactionsParams` type is now exported

The `UseProcessReactionsParams` type is now exported from
`src/components/Reactions/hooks/useProcessReactions.tsx`, making it
available for consumers who build custom reaction processing logic.

Author: arnautov-anton

src/components/Message/Message.tsx

@@ -52,8 +52,7 @@ type MessageContextPropsToPick =
   | 'onMentionsClickMessage'
   | 'onMentionsHoverMessage'
   | 'reactionDetailsSort'
-  | 'sortReactions'
-  | 'sortReactionDetails';
+  | 'sortReactions';
 
 type MessageWithContextProps = Omit<MessageProps, MessagePropsToOmit> &
   Pick<MessageContextValue, MessageContextPropsToPick> & {
@@ -211,7 +210,6 @@ export const Message = (props: MessageProps) => {
     pinPermissions,
     reactionDetailsSort,
     retrySendMessage: propRetrySendMessage,
-    sortReactionDetails,
     sortReactions,
   } = props;
 
@@ -316,7 +314,6 @@ export const Message = (props: MessageProps) => {
       readBy={props.readBy}
       renderText={props.renderText}
       returnAllReadData={props.returnAllReadData}
-      sortReactionDetails={sortReactionDetails}
       sortReactions={sortReactions}
       threadList={props.threadList}
       unsafeHTML={props.unsafeHTML}

src/components/Message/types.ts

@@ -5,7 +5,7 @@ import type { PinPermissions, UserEventHandler } from './hooks';
 import type { MessageActionsArray } from './utils';
 import type { GroupStyle } from '../MessageList/utils';
 import type { MessageComposerProps } from '../MessageComposer';
-import type { ReactionDetailsComparator, ReactionsComparator } from '../Reactions/types';
+import type { ReactionsComparator } from '../Reactions/types';
 import type { ChannelActionContextValue } from '../../context/ChannelActionContext';
 import type { ComponentContextValue } from '../../context/ComponentContext';
 import type { MessageContextValue } from '../../context/MessageContext';
@@ -101,10 +101,6 @@ export type MessageProps = {
   retrySendMessage?: ChannelActionContextValue['retrySendMessage'];
   /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */
   returnAllReadData?: boolean;
-  /** Comparator function to sort the list of reacted users
-   * @deprecated use `reactionDetailsSort` instead
-   */
-  sortReactionDetails?: ReactionDetailsComparator;
   /** Comparator function to sort reactions, defaults to chronological order */
   sortReactions?: ReactionsComparator;
   /** Whether the Message is in a Thread */

src/components/MessageList/MessageList.tsx

@@ -92,7 +92,6 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
     returnAllReadData = false,
     reviewProcessedMessage,
     showUnreadNotificationAlways,
-    sortReactionDetails,
     sortReactions,
     suppressAutoscroll,
     threadList = false,
@@ -232,7 +231,6 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
       renderText: props.renderText,
       retrySendMessage: props.retrySendMessage,
       showAvatar: props.showAvatar,
-      sortReactionDetails,
       sortReactions,
       unsafeHTML,
     },
@@ -500,7 +498,6 @@ type PropsDrilledToMessage =
   | 'retrySendMessage'
   | 'showAvatar'
   | 'sortReactions'
-  | 'sortReactionDetails'
   | 'unsafeHTML';
 
 export type MessageListProps = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {

src/components/MessageList/VirtualizedMessageList.tsx

@@ -86,8 +86,7 @@ type PropsDrilledToMessage =
   | 'reactionDetailsSort'
   | 'renderText'
   | 'showAvatar'
-  | 'sortReactions'
-  | 'sortReactionDetails';
+  | 'sortReactions';
 
 type VirtualizedMessageListPropsForContext =
   | PropsDrilledToMessage
@@ -230,7 +229,6 @@ const VirtualizedMessageListWithContext = (
     shouldGroupByUser = false,
     showAvatar,
     showUnreadNotificationAlways,
-    sortReactionDetails,
     sortReactions,
     stickToBottomScrollBehavior = 'smooth',
     suppressAutoscroll,
@@ -558,7 +556,6 @@ const VirtualizedMessageListWithContext = (
                   returnAllReadData,
                   shouldGroupByUser,
                   showAvatar,
-                  sortReactionDetails,
                   sortReactions,
                   threadList,
                   unreadMessageCount: channelUnreadUiState?.unread_messages,

src/components/MessageList/VirtualizedMessageListComponents.tsx

@@ -130,7 +130,6 @@ export const messageRenderer = (
     renderText,
     returnAllReadData,
     showAvatar,
-    sortReactionDetails,
     sortReactions,
     threadList,
     unreadMessageCount = 0,
@@ -193,7 +192,6 @@ export const messageRenderer = (
         renderText={renderText}
         returnAllReadData={returnAllReadData}
         showAvatar={showAvatar}
-        sortReactionDetails={sortReactionDetails}
         sortReactions={sortReactions}
         threadList={threadList}
       />

src/components/Reactions/MessageReactions.tsx

@@ -19,48 +19,31 @@ import {
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-import type { ReactionOptions } from './reactionOptions';
-import type {
-  ReactionDetailsComparator,
-  ReactionsComparator,
-  ReactionType,
-} from './types';
+import type { ReactionsComparator, ReactionType } from './types';
 import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 
 export type MessageReactionsProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
 > & {
   /** An array of the own reaction objects to distinguish own reactions visually */
   own_reactions?: ReactionResponse[];
-  /**
-   * An object that keeps track of the count of each type of reaction on a message
-   * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
-   * */
-  reaction_counts?: Record<string, number>;
   /** An object containing summary for each reaction type on a message */
   reaction_groups?: Record<string, ReactionGroupResponse>;
-  /**
-   * @deprecated
-   * A list of the currently supported reactions on a message
-   * */
-  reactionOptions?: ReactionOptions;
   /** An array of the reaction objects to display in the list */
   reactions?: ReactionResponse[];
   /** Display the reactions in the list in reverse order, defaults to false */
   reverse?: boolean;
-  /** Comparator function to sort the list of reacted users
-   * @deprecated use `reactionDetailsSort` instead
-   */
-  sortReactionDetails?: ReactionDetailsComparator;
   /** Comparator function to sort reactions, defaults to chronological order */
   sortReactions?: ReactionsComparator;
-
   /**
    * Positioning of the reactions list relative to the message. Position is flipped by default for the messages of other users.
    */
   flipHorizontalPosition?: boolean;
   verticalPosition?: 'top' | 'bottom' | null;
   visualStyle?: 'clustered' | 'segmented' | null;
+  capLimit?: {
+    [key in Extract<MessageReactionsProps['visualStyle'], string>]?: number;
+  };
 };
 
 /**
@@ -80,18 +63,23 @@ const FragmentOrButton = ({
 
 const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
   const {
+    capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},
     flipHorizontalPosition = false,
     handleFetchReactions,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     reactionDetailsSort,
-    sortReactionDetails,
     verticalPosition = 'top',
     visualStyle = 'clustered',
     ...rest
   } = props;
 
-  const { existingReactions, hasReactions, totalReactionCount, uniqueReactionTypeCount } =
-    useProcessReactions(rest);
+  const {
+    existingReactions,
+    hasReactions,
+    reactionGroups,
+    totalReactionCount,
+    uniqueReactionTypeCount,
+  } = useProcessReactions(rest);
   const [selectedReactionType, setSelectedReactionType] = useState<ReactionType | null>(
     null,
   );
@@ -118,20 +106,36 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
   /**
    * In segmented style with top position we show max 4 reactions and a
    * count of the rest, so we need to cap the existing reactions to display
-   * at 4 and calculate the count of the rest.
+   * at 4 and calculate the count of the rest. For clustered(top/bottom) we cap
+   * the existing reactions to 5 but we don't calculate the count of the rest
+   * because we show the total count instead. For segmented style with bottom
+   * position we don't cap the existing reactions and we show all of them.
    */
   const cappedExistingReactions = useMemo(() => {
-    if (visualStyle !== 'segmented' || verticalPosition !== 'top') return null;
+    if (visualStyle === 'segmented' && verticalPosition !== 'top') return null;
+
+    const capLimit = visualStyle === 'segmented' ? capLimitSegmented : capLimitClustered;
+
+    const sliced = existingReactions.slice(0, capLimit);
 
-    const sliced = existingReactions.slice(0, 4);
     return {
+      /**
+       * Accumulated reaction count of capped reaction types, first four in case of
+       * segmented(top) and first five in case of clustered(top/bottom) variations.
+       */
       reactionCountToDisplay: sliced.reduce(
         (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,
         0,
       ),
       reactionsToDisplay: sliced,
-    };
-  }, [existingReactions, verticalPosition, visualStyle]);
+    } as const;
+  }, [
+    capLimitClustered,
+    capLimitSegmented,
+    existingReactions,
+    verticalPosition,
+    visualStyle,
+  ]);
 
   if (!hasReactions) return null;
 
@@ -154,9 +158,7 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
           aria-pressed={isDialogOpen}
           buttonIf={visualStyle === 'clustered'}
           className='str-chat__message-reactions__list-button'
-          onClick={() =>
-            handleReactionButtonClick(existingReactions[0]?.reactionType ?? null)
-          }
+          onClick={() => handleReactionButtonClick(null)}
         >
           <ul className='str-chat__message-reactions__list'>
             {(cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(
@@ -186,18 +188,22 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
                   </li>
                 ),
             )}
-            {uniqueReactionTypeCount > 4 && cappedExistingReactions && (
-              <li className='str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more'>
-                <button
-                  className='str-chat__message-reactions__list-item-button'
-                  onClick={() => handleReactionButtonClick(null)}
-                >
-                  <span className='str-chat__message-reactions__overflow-count'>
-                    +{totalReactionCount - cappedExistingReactions.reactionCountToDisplay}
-                  </span>
-                </button>
-              </li>
-            )}
+            {uniqueReactionTypeCount > 4 &&
+              cappedExistingReactions &&
+              visualStyle === 'segmented' && (
+                <li className='str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more'>
+                  <button
+                    className='str-chat__message-reactions__list-item-button'
+                    onClick={() => handleReactionButtonClick(null)}
+                  >
+                    <span className='str-chat__message-reactions__overflow-count'>
+                      +
+                      {totalReactionCount -
+                        cappedExistingReactions.reactionCountToDisplay}
+                    </span>
+                  </button>
+                </li>
+              )}
           </ul>
           {visualStyle === 'clustered' && (
             <span className='str-chat__message-reactions__total-count'>
@@ -219,9 +225,9 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
         <MessageReactionsDetail
           handleFetchReactions={handleFetchReactions}
           onSelectedReactionTypeChange={setSelectedReactionType}
+          reactionGroups={reactionGroups}
           reactions={existingReactions}
           selectedReactionType={selectedReactionType}
-          sortReactionDetails={sortReactionDetails}
           totalReactionCount={totalReactionCount}
         />
       </DialogAnchor>

src/components/Reactions/MessageReactionsDetail.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import type { ReactionDetailsComparator, ReactionSummary, ReactionType } from './types';
+import type { ReactionSummary, ReactionType } from './types';
 
 import { useFetchReactions } from './hooks/useFetchReactions';
 import { Avatar as DefaultAvatar } from '../Avatar';
@@ -13,6 +13,7 @@ import {
 } from '../../context';
 import type { ReactionSort } from 'stream-chat';
 import { defaultReactionOptions } from './reactionOptions';
+import type { useProcessReactions } from './hooks/useProcessReactions';
 
 export type MessageReactionsDetailProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -21,9 +22,8 @@ export type MessageReactionsDetailProps = Partial<
   selectedReactionType: ReactionType | null;
   onSelectedReactionTypeChange?: (reactionType: ReactionType | null) => void;
   sort?: ReactionSort;
-  /** @deprecated use `sort` instead */
-  sortReactionDetails?: ReactionDetailsComparator;
   totalReactionCount?: number;
+  reactionGroups?: ReturnType<typeof useProcessReactions>['reactionGroups'];
 };
 
 const defaultReactionDetailsSort = { created_at: -1 } as const;
@@ -47,9 +47,9 @@ export function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
   reactionDetailsSort: propReactionDetailsSort,
+  reactionGroups,
   reactions,
   selectedReactionType,
-  sortReactionDetails: propSortReactionDetails,
   totalReactionCount,
 }: MessageReactionsDetailProps) {
   const { client } = useChatContext();
@@ -63,11 +63,8 @@ export function MessageReactionsDetail({
   const {
     handleReaction: contextHandleReaction,
     reactionDetailsSort: contextReactionDetailsSort,
-    sortReactionDetails: contextSortReactionDetails,
   } = useMessageContext(MessageReactionsDetail.name);
 
-  const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
-
   const reactionDetailsSort =
     propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
 
@@ -82,14 +79,6 @@ export function MessageReactionsDetail({
     sort: reactionDetailsSort,
   });
 
-  const reactionDetailsWithLegacyFallback = useMemo(
-    () =>
-      legacySortReactionDetails
-        ? [...reactionDetails].sort(legacySortReactionDetails)
-        : reactionDetails,
-    [legacySortReactionDetails, reactionDetails],
-  );
-
   return (
     <div
       className='str-chat__message-reactions-detail'
@@ -142,7 +131,7 @@ export function MessageReactionsDetail({
         {areReactionsLoading && <LoadingIndicator />}
         {!areReactionsLoading && (
           <>
-            {reactionDetailsWithLegacyFallback.map(({ type, user }) => {
+            {reactionDetails.map(({ type, user }) => {
               const belongsToCurrentUser = client.user?.id === user?.id;
               const EmojiComponent = Array.isArray(reactionOptions)
                 ? undefined
@@ -173,8 +162,17 @@ export function MessageReactionsDetail({
                         className='str-chat__message-reactions-detail__user-list-item-button'
                         data-testid='remove-reaction-button'
                         onClick={async (e) => {
+                          const reactionCountBeforeRemoval =
+                            reactionGroups?.[type]?.count ?? 0;
+
                           await contextHandleReaction(type, e);
-                          refetch();
+
+                          // was 1, should be 0 after removal, display all reactions
+                          if (reactionCountBeforeRemoval <= 1) {
+                            onSelectedReactionTypeChange?.(null);
+                          } else {
+                            refetch();
+                          }
                         }}
                       >
                         {t('Tap to remove')}