feat: message reactions detail redesign

src/components/Avatar/styling/AvatarStack.scss

@@ -49,6 +49,6 @@
     background: var(--badge-bg-default);
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
     line-height: 1;
-    z-index: 1;
+    position: relative;
   }
 }

src/components/Dialog/hooks/usePopoverPosition.ts

@@ -21,7 +21,7 @@ function autoMiddlewareFor(p: PopperLikePlacement) {
   return autoPlacement({ alignment });
 }
 
-type OffsetOpt =
+export type OffsetOpt =
   | number
   | { mainAxis?: number; crossAxis?: number; alignmentAxis?: number }
   | [crossAxis: number, mainAxis: number]; // keep your tuple compat

src/components/Dialog/service/DialogAnchor.tsx

@@ -4,31 +4,54 @@ import React, { useEffect, useRef, useState } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { DialogPortalEntry } from './DialogPortal';
 import { useDialog, useDialogIsOpen } from '../hooks';
-import { usePopoverPosition } from '../hooks/usePopoverPosition';
+import { type OffsetOpt, usePopoverPosition } from '../hooks/usePopoverPosition';
 import type { PopperLikePlacement } from '../hooks';
+import type { Placement } from '@floating-ui/react';
 
 export interface DialogAnchorOptions {
   open: boolean;
   placement: PopperLikePlacement;
   referenceElement: HTMLElement | null;
   allowFlip?: boolean;
   updateKey?: unknown;
+  updatePositionOnContentResize?: boolean;
+  offset?: OffsetOpt;
 }
 
 export function useDialogAnchor<T extends HTMLElement>({
   allowFlip,
+  offset,
   open,
   placement,
   referenceElement,
   updateKey,
+  updatePositionOnContentResize = false,
 }: DialogAnchorOptions) {
   const [popperElement, setPopperElement] = useState<T | null>(null);
-  const { refs, strategy, update, x, y } = usePopoverPosition({
+  // keeps track of the first "chosen" placement (after popperElement is set) to avoid popper "jumping" to a different placement when it updates and finds a better fit; resets when popperElement is unset (!open)
+  const [stabilisedChosenPlacement, setStabilisedChosenPlacement] =
+    useState<Placement | null>(null);
+
+  const {
+    placement: chosenPlacement,
+    refs,
+    strategy,
+    update,
+    x,
+    y,
+  } = usePopoverPosition({
     allowFlip,
     freeze: true,
-    placement,
+    offset,
+    placement: stabilisedChosenPlacement ?? placement,
   });
 
+  if (!stabilisedChosenPlacement && popperElement && placement !== chosenPlacement) {
+    setStabilisedChosenPlacement(chosenPlacement);
+  } else if (stabilisedChosenPlacement && !popperElement) {
+    setStabilisedChosenPlacement(null);
+  }
+
   // Freeze reference when dialog opens so submenus (e.g. ContextMenu level 2+) stay aligned to the original anchor
   const frozenReferenceRef = useRef<HTMLElement | null>(null);
   if (open && referenceElement && !frozenReferenceRef.current) {
@@ -57,6 +80,18 @@ export function useDialogAnchor<T extends HTMLElement>({
     }
   }, [open, placement, popperElement, update, updateKey, effectiveReference]);
 
+  useEffect(() => {
+    if (!popperElement || !updatePositionOnContentResize) return;
+
+    const resizeObserver = new ResizeObserver(update);
+
+    resizeObserver.observe(popperElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [popperElement, update, updatePositionOnContentResize]);
+
   if (popperElement && !open) {
     setPopperElement(null);
   }
@@ -85,22 +120,26 @@ export const DialogAnchor = ({
   dialogManagerId,
   focus = true,
   id,
+  offset,
   placement = 'auto',
   referenceElement = null,
   tabIndex,
   trapFocus,
   updateKey,
+  updatePositionOnContentResize,
   ...restDivProps
 }: DialogAnchorProps) => {
   const dialog = useDialog({ dialogManagerId, id });
   const open = useDialogIsOpen(id, dialogManagerId);
 
   const { setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
     allowFlip,
+    offset,
     open,
     placement,
     referenceElement,
     updateKey,
+    updatePositionOnContentResize,
   });
 
   useEffect(() => {

src/components/Message/MessageSimple.tsx

@@ -219,9 +219,6 @@ const MessageSimpleWithContext = ({
           onKeyUp={handleClick}
         >
           {!isDeleted && <MessageActions />}
-          <div className='str-chat__message-reactions-host'>
-            {hasReactions && <ReactionsList reverse />}
-          </div>
           {message.deleted_at ? (
             <MessageDeletedBubble />
           ) : (
@@ -241,6 +238,9 @@ const MessageSimpleWithContext = ({
                   <MessageText message={message} renderText={renderText} />
                 )}
               </MessageBubble>
+              <div className='str-chat__message-reactions-host'>
+                {hasReactions && <ReactionsList reverse />}
+              </div>
               <MessageErrorIcon />
             </>
           )}

src/components/Message/hooks/useReactionsFetcher.ts

@@ -1,4 +1,5 @@
 import { useChatContext, useTranslationContext } from '../../../context';
+import { useStableCallback } from '../../../utils/useStableCallback';
 import type {
   LocalMessage,
   ReactionResponse,
@@ -22,15 +23,15 @@ export function useReactionsFetcher(
   const { t } = useTranslationContext('useReactionFetcher');
   const { getErrorNotification, notify } = notifications;
 
-  return async (reactionType?: ReactionType, sort?: ReactionSort) => {
+  return useStableCallback(async (reactionType?: ReactionType, sort?: ReactionSort) => {
     try {
       return await fetchMessageReactions(client, message.id, reactionType, sort);
     } catch (e) {
       const errorMessage = getErrorNotification?.(message);
       notify?.(errorMessage || t('Error fetching reactions'), 'error');
       throw e;
     }
-  };
+  });
 }
 
 async function fetchMessageReactions(

src/components/Message/styling/Message.scss

@@ -376,7 +376,9 @@
     align-self: end;
   }
 
-  &:not(.str-chat__message--with-avatar) .str-chat__avatar {
+  &:not(.str-chat__message--with-avatar)
+    .str-chat__avatar:has(~ .str-chat__message-inner) {
+    // hide only avatars next to message bubble, not the rest of them down the tree
     display: none;
   }
 
@@ -394,7 +396,6 @@
     .str-chat__message-reactions-host {
       display: flex;
       grid-area: reactions;
-      z-index: 1;
 
       &:has(.str-chat__message-reactions--top) {
         margin-bottom: calc(var(--spacing-xxs) * -1);

src/components/Reactions/MessageReactionsDetail.tsx

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react';
+
+import type { ReactionDetailsComparator, ReactionSummary, ReactionType } from './types';
+
+import { useFetchReactions } from './hooks/useFetchReactions';
+import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
+import { Avatar as DefaultAvatar } from '../Avatar';
+import {
+  useChatContext,
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
+import type { ReactionSort } from 'stream-chat';
+import type { MessageContextValue } from '../../context';
+
+export type MessageReactionsDetailProps = Partial<
+  Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
+> & {
+  reactions: ReactionSummary[];
+  selectedReactionType: ReactionType | null;
+  onSelectedReactionTypeChange?: (reactionType: ReactionType | null) => void;
+  sort?: ReactionSort;
+  /** @deprecated use `sort` instead */
+  sortReactionDetails?: ReactionDetailsComparator;
+  totalReactionCount?: number;
+};
+
+const defaultReactionDetailsSort = { created_at: -1 } as const;
+
+export function MessageReactionsDetail({
+  handleFetchReactions,
+  onSelectedReactionTypeChange,
+  reactionDetailsSort: propReactionDetailsSort,
+  reactions,
+  selectedReactionType,
+  sortReactionDetails: propSortReactionDetails,
+  totalReactionCount,
+}: MessageReactionsDetailProps) {
+  const { client } = useChatContext();
+  const { Avatar = DefaultAvatar, LoadingIndicator = DefaultLoadingIndicator } =
+    useComponentContext(MessageReactionsDetail.name);
+  const { t } = useTranslationContext();
+
+  const {
+    handleReaction: contextHandleReaction,
+    reactionDetailsSort: contextReactionDetailsSort,
+    sortReactionDetails: contextSortReactionDetails,
+  } = useMessageContext(MessageReactionsDetail.name);
+
+  const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
+
+  const reactionDetailsSort =
+    propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
+
+  const {
+    isLoading: areReactionsLoading,
+    reactions: reactionDetails,
+    refetch,
+  } = useFetchReactions({
+    handleFetchReactions,
+    reactionType: selectedReactionType,
+    shouldFetch: true,
+    sort: reactionDetailsSort,
+  });
+
+  const reactionDetailsWithLegacyFallback = useMemo(
+    () =>
+      legacySortReactionDetails
+        ? [...reactionDetails].sort(legacySortReactionDetails)
+        : reactionDetails,
+    [legacySortReactionDetails, reactionDetails],
+  );
+
+  return (
+    <div
+      className='str-chat__message-reactions-detail'
+      data-testid='reactions-list-modal'
+    >
+      {typeof totalReactionCount === 'number' && (
+        <div className='str-chat__message-reactions-detail__total-count'>
+          {t('{{ count }} reactions', { count: totalReactionCount })}
+        </div>
+      )}
+      <div className='str-chat__message-reactions-detail__reaction-type-list-container'>
+        <ul className='str-chat__message-reactions-detail__reaction-type-list'>
+          {reactions.map(
+            ({ EmojiComponent, reactionCount, reactionType }) =>
+              EmojiComponent && (
+                <li
+                  className='str-chat__message-reactions-detail__reaction-type-list-item'
+                  key={reactionType}
+                >
+                  <button
+                    aria-pressed={reactionType === selectedReactionType}
+                    className='str-chat__message-reactions-detail__reaction-type-list-item-button'
+                    onClick={() => onSelectedReactionTypeChange?.(reactionType)}
+                  >
+                    <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>
+                      <EmojiComponent />
+                    </span>
+                    {reactionCount > 1 && (
+                      <span
+                        className='str-chat__message-reactions-detail__reaction-type-list-item-count'
+                        data-testclass='message-reactions-item-count'
+                      >
+                        {reactionCount}
+                      </span>
+                    )}
+                  </button>
+                </li>
+              ),
+          )}
+        </ul>
+      </div>
+      <div
+        className='str-chat__message-reactions-detail__user-list'
+        data-testid='all-reacting-users'
+      >
+        {areReactionsLoading && (
+          <div className='str-chat__message-reactions-detail__loading-overlay'>
+            <LoadingIndicator />
+          </div>
+        )}
+        {reactionDetailsWithLegacyFallback.map(({ user }) => {
+          const belongsToCurrentUser = client.user?.id === user?.id;
+          return (
+            <div
+              className='str-chat__message-reactions-detail__user-list-item'
+              key={user?.id}
+            >
+              <Avatar
+                className='str-chat__avatar--with-border'
+                data-testid='avatar'
+                imageUrl={user?.image as string | undefined}
+                size='sm'
+                userName={user?.name || user?.id}
+              />
+              <div className='str-chat__message-reactions-detail__user-list-item-info'>
+                <span
+                  className='str-chat__message-reactions-detail__user-list-item-username'
+                  data-testid='reaction-user-username'
+                >
+                  {belongsToCurrentUser ? t('You') : user?.name || user?.id}
+                </span>
+                {belongsToCurrentUser && selectedReactionType && (
+                  <button
+                    className='str-chat__message-reactions-detail__user-list-item-button'
+                    data-testid='remove-reaction-button'
+                    onClick={(e) => {
+                      contextHandleReaction(selectedReactionType, e).then(() => {
+                        refetch();
+                      });
+                    }}
+                  >
+                    {t('Tap to remove')}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}