Initial commit

Author: arnautov-anton

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

@@ -215,9 +215,6 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
             onKeyUp={handleClick}
           >
             <MessageActions />
-            <div className='str-chat__message-reactions-host'>
-              {hasReactions && <ReactionsList reverse />}
-            </div>
             <div className='str-chat__message-bubble'>
               {poll && <Poll poll={poll} />}
               {message.quoted_message && <QuotedMessage />}
@@ -230,6 +227,9 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
                 <MessageText message={message} renderText={renderText} />
               )}
             </div>
+            <div className='str-chat__message-reactions-host'>
+              {hasReactions && <ReactionsList reverse />}
+            </div>
             <MessageErrorIcon />
             {showReplyCountButton && (
               <MessageRepliesCountButton

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

@@ -393,7 +393,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;
   }
 
@@ -411,7 +413,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/ReactionsList.tsx

@@ -1,11 +1,20 @@
-import React, { type ComponentPropsWithoutRef, useState } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import clsx from 'clsx';
 
-import type { ReactionsListModalProps } from './ReactionsListModal';
 import { ReactionsListModal as DefaultReactionsListModal } from './ReactionsListModal';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import type { MessageContextValue } from '../../context';
-import { useComponentContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 
@@ -16,6 +25,7 @@ import type {
   ReactionsComparator,
   ReactionType,
 } from './types';
+import { DialogAnchor, useDialogOnNearestManager } from '../Dialog';
 
 export type ReactionsListProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -53,6 +63,9 @@ export type ReactionsListProps = Partial<
   visualStyle?: 'clustered' | 'segmented' | null;
 };
 
+/**
+ * Renders a button if `buttonIf` is true, otherwise renders a fragment. No props but children are passed to fragment, but all props are passed to button if it's rendered.
+ */
 const FragmentOrButton = ({
   buttonIf: renderButton = false,
   children,
@@ -77,22 +90,47 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
     ...rest
   } = props;
 
-  const { existingReactions, hasReactions, totalReactionCount } =
+  const { existingReactions, hasReactions, totalReactionCount, uniqueReactionTypeCount } =
     useProcessReactions(rest);
   const [selectedReactionType, setSelectedReactionType] = useState<ReactionType | null>(
     null,
   );
   const { t } = useTranslationContext('ReactionsList');
   const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext();
+  const { isMyMessage, message } = useMessageContext('ReactionsList');
+
+  const divRef = useRef<ComponentRef<'div'>>(null);
+  const dialogId = `message-reactions-detail-${message.id}`;
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
 
-  const handleReactionButtonClick = (reactionType: ReactionType) => {
+  const handleReactionButtonClick = (reactionType: ReactionType | null) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
       return;
     }
 
     setSelectedReactionType(reactionType);
+
+    dialog.open();
   };
 
+  /**
+   * 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.
+   */
+  const cappedExistingReactions = useMemo(() => {
+    if (visualStyle !== 'segmented' || verticalPosition !== 'top') return null;
+
+    const sliced = existingReactions.slice(0, 4);
+    return {
+      reactionCountToDisplay: sliced.reduce(
+        (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,
+        0,
+      ),
+      reactionsToDisplay: sliced,
+    };
+  }, [existingReactions, verticalPosition, visualStyle]);
+
   if (!hasReactions) return null;
 
   return (
@@ -106,17 +144,18 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
           [`str-chat__message-reactions--${visualStyle}`]:
             typeof visualStyle === 'string',
         })}
+        ref={divRef}
         role='figure'
       >
         <FragmentOrButton
           buttonIf={visualStyle === 'clustered'}
           className='str-chat__message-reactions__list-button'
           onClick={() =>
-            setSelectedReactionType(existingReactions[0]?.reactionType ?? null)
+            handleReactionButtonClick(existingReactions[0]?.reactionType ?? null)
           }
         >
           <ul className='str-chat__message-reactions__list'>
-            {existingReactions.map(
+            {(cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(
               ({ EmojiComponent, reactionCount, reactionType }) =>
                 EmojiComponent && (
                   <li
@@ -128,12 +167,12 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
                       className='str-chat__message-reactions__list-item-button'
                       onClick={() => handleReactionButtonClick(reactionType)}
                     >
-                      <span className='str-chat__message-reactions__item-icon'>
+                      <span className='str-chat__message-reactions__list-item-icon'>
                         <EmojiComponent />
                       </span>
-                      {visualStyle === 'segmented' && (
+                      {visualStyle === 'segmented' && reactionCount > 1 && (
                         <span
-                          className='str-chat__message-reactions__item-count'
+                          className='str-chat__message-reactions__list-item-count'
                           data-testclass='message-reactions-item-count'
                         >
                           {reactionCount}
@@ -143,6 +182,22 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
                   </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(
+                      existingReactions.at(-1)?.reactionType ?? 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'>
@@ -151,19 +206,25 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
           )}
         </FragmentOrButton>
       </div>
-      {selectedReactionType !== null && (
+
+      <DialogAnchor
+        dialogManagerId={dialogManager?.id}
+        id={dialogId}
+        offset={8}
+        placement={isMyMessage() ? 'bottom-end' : 'bottom-start'}
+        referenceElement={divRef.current}
+        trapFocus
+        updatePositionOnContentResize
+      >
         <ReactionsListModal
           handleFetchReactions={handleFetchReactions}
-          onClose={() => setSelectedReactionType(null)}
-          onSelectedReactionTypeChange={
-            setSelectedReactionType as ReactionsListModalProps['onSelectedReactionTypeChange']
-          }
-          open={selectedReactionType !== null}
+          onSelectedReactionTypeChange={setSelectedReactionType}
           reactions={existingReactions}
           selectedReactionType={selectedReactionType}
           sortReactionDetails={sortReactionDetails}
+          totalReactionCount={totalReactionCount}
         />
-      )}
+      </DialogAnchor>
     </>
   );
 };