From 72df08e0401511de83b275570031752c7b818042 Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Thu, 9 Apr 2026 00:51:15 +0200
Subject: [PATCH 1/6] Initial commit

---
 src/components/Dialog/hooks/useDialog.ts      | 11 ++-
 .../Dialog/service/DialogManager.ts           | 47 ++++++---
 src/components/Icons/icons.tsx                | 26 +++++
 src/components/Message/styling/Message.scss   |  8 +-
 .../Reactions/MessageReactionsDetail.tsx      | 50 ++++++++--
 src/components/Reactions/ReactionSelector.tsx | 97 +++++++++++++------
 .../styling/MessageReactionsDetail.scss       | 25 ++++-
 .../Reactions/styling/ReactionSelector.scss   | 23 -----
 .../styling/ReactionSelectorExtendedList.scss | 22 +++++
 src/components/Reactions/styling/index.scss   |  1 +
 10 files changed, 220 insertions(+), 90 deletions(-)
 create mode 100644 src/components/Reactions/styling/ReactionSelectorExtendedList.scss

diff --git a/src/components/Dialog/hooks/useDialog.ts b/src/components/Dialog/hooks/useDialog.ts
index e81ec1ae5..75a713af4 100644
--- a/src/components/Dialog/hooks/useDialog.ts
+++ b/src/components/Dialog/hooks/useDialog.ts
@@ -22,16 +22,17 @@ export const useDialog = ({
 }: UseDialogParams) => {
   const { dialogManager } = useDialogManager({ dialogManagerId });
 
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    dialogManager.cancelPendingRemoval(id);
+
+    return () => {
       // Since this cleanup can run even if the component is still mounted
       // and dialog id is unchanged (e.g. in <StrictMode />), it's safer to
       // mark state as unused and only remove it after a timeout, rather than
       // to remove it immediately.
       dialogManager.markForRemoval(id);
-    },
-    [dialogManager, id],
-  );
+    };
+  }, [dialogManager, id]);
 
   return dialogManager.getOrCreate({ closeOnClickOutside, id });
 };
diff --git a/src/components/Dialog/service/DialogManager.ts b/src/components/Dialog/service/DialogManager.ts
index 6fb2470e2..1f11a826c 100644
--- a/src/components/Dialog/service/DialogManager.ts
+++ b/src/components/Dialog/service/DialogManager.ts
@@ -70,12 +70,12 @@ export class DialogManager {
     );
   }
 
-  get(id: DialogId) {
+  get(id: DialogId): Dialog | undefined {
     return this.state.getLatestValue().dialogsById[id];
   }
 
   getOrCreate({ closeOnClickOutside, id }: GetOrCreateDialogParams) {
-    let dialog = this.state.getLatestValue().dialogsById[id];
+    let dialog = this.get(id);
     if (!dialog) {
       dialog = {
         close: () => {
@@ -97,7 +97,7 @@ export class DialogManager {
       };
       this.state.next((current) => ({
         ...current,
-        dialogsById: { ...current.dialogsById, [id]: dialog },
+        dialogsById: { ...current.dialogsById, [id]: dialog as Dialog },
       }));
     }
 
@@ -106,16 +106,15 @@ export class DialogManager {
 
     if (shouldUpdateDialogSettings) {
       if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
-      dialog = {
-        ...dialog,
-        closeOnClickOutside,
-        removalTimeout: undefined,
-      };
       this.state.next((current) => ({
         ...current,
         dialogsById: {
           ...current.dialogsById,
-          [id]: dialog,
+          [id]: {
+            ...current.dialogsById[id],
+            closeOnClickOutside,
+            removalTimeout: undefined,
+          },
         },
       }));
     }
@@ -158,9 +157,8 @@ export class DialogManager {
     }
   }
 
-  remove(id: DialogId) {
-    const state = this.state.getLatestValue();
-    const dialog = state.dialogsById[id];
+  remove = (id: DialogId) => {
+    const dialog = this.get(id);
     if (!dialog) return;
 
     if (dialog.removalTimeout) {
@@ -175,7 +173,7 @@ export class DialogManager {
         dialogsById: newDialogs,
       };
     });
-  }
+  };
 
   /**
    * Marks the dialog state as unused. If the dialog id is referenced again quickly,
@@ -183,7 +181,7 @@ export class DialogManager {
    * a short timeout.
    */
   markForRemoval(id: DialogId) {
-    const dialog = this.state.getLatestValue().dialogsById[id];
+    const dialog = this.get(id);
 
     if (!dialog) {
       return;
@@ -202,4 +200,25 @@ export class DialogManager {
       },
     }));
   }
+
+  cancelPendingRemoval(id: DialogId) {
+    const dialog = this.get(id);
+
+    if (!dialog?.removalTimeout) {
+      return;
+    }
+
+    clearTimeout(dialog.removalTimeout);
+
+    this.state.next((current) => ({
+      ...current,
+      dialogsById: {
+        ...current.dialogsById,
+        [id]: {
+          ...current.dialogsById[id],
+          removalTimeout: undefined,
+        },
+      },
+    }));
+  }
 }
diff --git a/src/components/Icons/icons.tsx b/src/components/Icons/icons.tsx
index 1722cd406..4acbac479 100644
--- a/src/components/Icons/icons.tsx
+++ b/src/components/Icons/icons.tsx
@@ -495,6 +495,32 @@ export const IconEmoji = createIcon(
   </>,
 );
 
+export const IconEmojiAdd = createIcon(
+  'IconEmojiAdd',
+  <>
+    <path
+      d='M1.75 10C1.75 5.44365 5.44365 1.75 10 1.75C10.4142 1.75 10.75 2.08579 10.75 2.5C10.75 2.91421 10.4142 3.25 10 3.25C6.27208 3.25 3.25 6.27208 3.25 10C3.25 13.7279 6.27208 16.75 10 16.75C13.7279 16.75 16.75 13.7279 16.75 10C16.75 9.58579 17.0858 9.25 17.5 9.25C17.9142 9.25 18.25 9.58579 18.25 10C18.25 14.5563 14.5563 18.25 10 18.25C5.44365 18.25 1.75 14.5563 1.75 10Z'
+      fill='currentColor'
+    />
+    <path
+      d='M7.1875 9.375C7.70527 9.375 8.125 8.95527 8.125 8.4375C8.125 7.91973 7.70527 7.5 7.1875 7.5C6.66973 7.5 6.25 7.91973 6.25 8.4375C6.25 8.95527 6.66973 9.375 7.1875 9.375Z'
+      fill='currentColor'
+    />
+    <path
+      d='M12.8125 9.375C13.3303 9.375 13.75 8.95527 13.75 8.4375C13.75 7.91973 13.3303 7.5 12.8125 7.5C12.2947 7.5 11.875 7.91973 11.875 8.4375C11.875 8.95527 12.2947 9.375 12.8125 9.375Z'
+      fill='currentColor'
+    />
+    <path
+      d='M12.4756 11.499C12.683 11.1407 13.1425 11.0182 13.501 11.2256C13.8593 11.433 13.9818 11.8925 13.7744 12.251C13.0125 13.568 11.6947 14.5 10 14.5C8.30531 14.5 6.98748 13.568 6.22559 12.251C6.01825 11.8925 6.14067 11.433 6.49902 11.2256C6.85749 11.0182 7.31695 11.1407 7.52441 11.499C8.05942 12.424 8.91824 13 10 13C11.0818 13 11.9406 12.424 12.4756 11.499Z'
+      fill='currentColor'
+    />
+    <path
+      d='M15.083 6.87524V4.91626H13.125C12.7108 4.91626 12.375 4.58047 12.375 4.16626C12.3752 3.7522 12.7109 3.41626 13.125 3.41626H15.083V1.45825C15.083 1.04415 15.4189 0.708427 15.833 0.708252C16.2472 0.708252 16.583 1.04404 16.583 1.45825V3.41626H18.542C18.9559 3.41644 19.2918 3.7523 19.292 4.16626C19.292 4.58036 18.9561 4.91608 18.542 4.91626H16.583V6.87524C16.5828 7.28931 16.2471 7.62524 15.833 7.62524C15.4191 7.62507 15.0832 7.2892 15.083 6.87524Z'
+      fill='currentColor'
+    />
+  </>,
+);
+
 // was: IconExclamation
 export const IconExclamationMarkFill = createIcon(
   'IconExclamationMarkFill',
diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss
index 07d94fb22..06d23b456 100644
--- a/src/components/Message/styling/Message.scss
+++ b/src/components/Message/styling/Message.scss
@@ -278,9 +278,7 @@
             var(--str-chat__message-reactions-host-offset-x) * -1
           );
 
-          &:has(.str-chat__message-reactions--flipped-horizontally) {
-            margin-inline-end: var(--str-chat__message-reactions-host-offset-x);
-          }
+          margin-inline-end: var(--str-chat__message-reactions-host-offset-x);
         }
 
         .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom
@@ -323,9 +321,7 @@
         &:has(.str-chat__message-reactions--top) {
           padding-inline-end: calc(var(--str-chat__message-reactions-host-offset-x) * -1);
 
-          &:has(.str-chat__message-reactions--flipped-horizontally) {
-            margin-inline-start: var(--str-chat__message-reactions-host-offset-x);
-          }
+          margin-inline-start: var(--str-chat__message-reactions-host-offset-x);
         }
 
         .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom
diff --git a/src/components/Reactions/MessageReactionsDetail.tsx b/src/components/Reactions/MessageReactionsDetail.tsx
index b4afddee2..22e6a3367 100644
--- a/src/components/Reactions/MessageReactionsDetail.tsx
+++ b/src/components/Reactions/MessageReactionsDetail.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import type { ReactionSummary, ReactionType } from './types';
 
@@ -14,6 +14,8 @@ import {
 import type { ReactionSort } from 'stream-chat';
 import { defaultReactionOptions } from './reactionOptions';
 import type { useProcessReactions } from './hooks/useProcessReactions';
+import { IconEmojiAdd } from '../Icons';
+import { ReactionSelector, type ReactionSelectorProps } from './ReactionSelector';
 
 export type MessageReactionsDetailProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -24,7 +26,7 @@ export type MessageReactionsDetailProps = Partial<
   sort?: ReactionSort;
   totalReactionCount?: number;
   reactionGroups?: ReturnType<typeof useProcessReactions>['reactionGroups'];
-};
+} & ReactionSelectorProps;
 
 const defaultReactionDetailsSort = { created_at: -1 } as const;
 
@@ -45,13 +47,16 @@ export const MessageReactionsDetailLoadingIndicator = () => {
 
 export function MessageReactionsDetail({
   handleFetchReactions,
+  handleReaction,
   onSelectedReactionTypeChange,
+  own_reactions,
   reactionDetailsSort: propReactionDetailsSort,
   reactionGroups,
   reactions,
   selectedReactionType,
   totalReactionCount,
 }: MessageReactionsDetailProps) {
+  const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);
   const { client } = useChatContext();
   const {
     Avatar = DefaultAvatar,
@@ -62,6 +67,7 @@ export function MessageReactionsDetail({
 
   const {
     handleReaction: contextHandleReaction,
+    message,
     reactionDetailsSort: contextReactionDetailsSort,
   } = useMessageContext(MessageReactionsDetail.name);
 
@@ -79,6 +85,21 @@ export function MessageReactionsDetail({
     sort: reactionDetailsSort,
   });
 
+  if (extendedReactionListOpen) {
+    return (
+      <div
+        className='str-chat__message-reactions-detail'
+        data-testid='message-reactions-detail'
+      >
+        <ReactionSelector.ExtendedList
+          dialogId={`message-reactions-detail-${message.id}`}
+          handleReaction={handleReaction}
+          own_reactions={own_reactions}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
       className='str-chat__message-reactions-detail'
@@ -91,6 +112,17 @@ export function MessageReactionsDetail({
       )}
       <div className='str-chat__message-reactions-detail__reaction-type-list-container'>
         <ul className='str-chat__message-reactions-detail__reaction-type-list'>
+          <li className='str-chat__message-reactions-detail__reaction-type-list-item'>
+            <button
+              className='str-chat__message-reactions-detail__reaction-type-list-item-button'
+              onClick={() => setExtendedReactionListOpen(true)}
+            >
+              <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>
+                <IconEmojiAdd />
+              </span>
+            </button>
+          </li>
+
           {reactions.map(
             ({ EmojiComponent, reactionCount, reactionType }) =>
               EmojiComponent && (
@@ -110,14 +142,12 @@ export function MessageReactionsDetail({
                     <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>
-                    )}
+                    <span
+                      className='str-chat__message-reactions-detail__reaction-type-list-item-count'
+                      data-testclass='message-reactions-item-count'
+                    >
+                      {reactionCount}
+                    </span>
                   </button>
                 </li>
               ),
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index 9679fa0e8..ca16cd0e8 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -1,7 +1,7 @@
 import React, { type ReactNode, useMemo, useState } from 'react';
 import clsx from 'clsx';
 
-import { useDialog } from '../Dialog';
+import { useDialogOnNearestManager } from '../Dialog';
 import { defaultReactionOptions } from './reactionOptions';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
@@ -24,6 +24,7 @@ interface ReactionSelectorInterface {
   (props: ReactionSelectorProps): ReactNode;
   getDialogId: (_: { messageId: string; threadList?: boolean }) => string;
   displayName: string;
+  ExtendedList: React.ComponentType<ReactionSelectorProps & { dialogId?: string }>;
 }
 
 const stableOwnReactions: ReactionResponse[] = [];
@@ -45,7 +46,7 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
     messageId: message.id,
     threadList,
   });
-  const dialog = useDialog({ id: dialogId });
+  const { dialog } = useDialogOnNearestManager({ id: dialogId });
 
   const handleReaction = propHandleReaction ?? contextHandleReaction;
   const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;
@@ -114,34 +115,9 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
           </Button>
         </>
       )}
-      {extendedListOpen &&
-        !Array.isArray(reactionOptions) &&
-        reactionOptions.extended && (
-          <div className='str-chat__reaction-selector-extended-list'>
-            {Object.entries(reactionOptions.extended).map(
-              ([reactionType, { Component, name: reactionName }]) => (
-                <button
-                  aria-label={`Select Reaction: ${reactionName || reactionType}`}
-                  aria-pressed={typeof ownReactionByType[reactionType] !== 'undefined'}
-                  className='str-chat__reaction-selector-extended-list__button str-chat__button str-chat__button--ghost str-chat__button--size-sm str-chat__button--circular'
-                  data-testid='select-reaction-button'
-                  data-text={reactionType}
-                  key={reactionType}
-                  onClick={(event) => {
-                    handleReaction(reactionType, event);
-                    if (closeReactionSelectorOnClick) {
-                      dialog.close();
-                    }
-                  }}
-                >
-                  <span className='str-chat__reaction-icon'>
-                    <Component />
-                  </span>
-                </button>
-              ),
-            )}
-          </div>
-        )}
+      {extendedListOpen && (
+        <ReactionSelector.ExtendedList {...props} dialogId={dialogId} />
+      )}
     </div>
   );
 };
@@ -152,3 +128,64 @@ ReactionSelector.getDialogId = ({ messageId, threadList }) => {
 };
 
 ReactionSelector.displayName = 'ReactionSelector';
+
+ReactionSelector.ExtendedList = function ReactionSelectorExtendedList({
+  dialogId,
+  handleReaction: propHandleReaction,
+  own_reactions: propOwnReactions,
+}) {
+  const { reactionOptions = defaultReactionOptions } = useComponentContext(
+    'ReactionSelector.ExtendedList',
+  );
+  const {
+    closeReactionSelectorOnClick,
+    handleReaction: contextHandleReaction,
+    message,
+  } = useMessageContext('ReactionSelector');
+
+  const handleReaction = propHandleReaction ?? contextHandleReaction;
+  const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;
+
+  const { dialog } = useDialogOnNearestManager({ id: dialogId || '' });
+
+  const ownReactionByType = useMemo(() => {
+    const map: { [key: string]: ReactionResponse } = {};
+
+    for (const reaction of ownReactions) {
+      map[reaction.type] ??= reaction;
+    }
+
+    return map;
+  }, [ownReactions]);
+
+  if (Array.isArray(reactionOptions) || !reactionOptions.extended) {
+    return null;
+  }
+
+  return (
+    <div className='str-chat__reaction-selector-extended-list'>
+      {Object.entries(reactionOptions.extended).map(
+        ([reactionType, { Component, name: reactionName }]) => (
+          <button
+            aria-label={`Select Reaction: ${reactionName || reactionType}`}
+            aria-pressed={typeof ownReactionByType[reactionType] !== 'undefined'}
+            className='str-chat__reaction-selector-extended-list__button str-chat__button str-chat__button--ghost str-chat__button--size-sm str-chat__button--circular'
+            data-testid='select-reaction-button'
+            data-text={reactionType}
+            key={reactionType}
+            onClick={(event) => {
+              handleReaction(reactionType, event);
+              if (closeReactionSelectorOnClick) {
+                dialog.close();
+              }
+            }}
+          >
+            <span className='str-chat__reaction-icon'>
+              <Component />
+            </span>
+          </button>
+        ),
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Reactions/styling/MessageReactionsDetail.scss b/src/components/Reactions/styling/MessageReactionsDetail.scss
index 809dcdd07..d567c3dc8 100644
--- a/src/components/Reactions/styling/MessageReactionsDetail.scss
+++ b/src/components/Reactions/styling/MessageReactionsDetail.scss
@@ -11,8 +11,17 @@
 .str-chat__message-reactions-detail {
   border-radius: var(--radius-lg);
   background: var(--background-core-elevation-2);
-  max-width: 256px;
-  min-width: min(90vw, 256px);
+  max-width: 278px;
+  min-width: min(90vw, 278px);
+
+  &:has(.str-chat__reaction-selector-extended-list) {
+    padding: 0;
+    display: block;
+    @include utils.scrollable-y;
+    scrollbar-width: none;
+    border-radius: var(--radius-lg);
+    max-height: 250px;
+  }
 
   &::after {
     content: '';
@@ -68,12 +77,24 @@
       .str-chat__message-reactions-detail__reaction-type-list-item-button {
         @include common.reaction-button;
         box-shadow: unset;
+        min-width: var(--size-48);
 
         .str-chat__message-reactions-detail__reaction-type-list-item-icon {
           font-family: system-ui;
           font-size: var(--font-size-size-17);
           font-style: normal;
           line-height: var(--typography-line-height-normal);
+
+          .str-chat__icon {
+            width: var(--icon-size-sm);
+            height: var(--icon-size-sm);
+          }
+
+          &:has(.str-chat__icon) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
         }
 
         .str-chat__message-reactions-detail__reaction-type-list-item-count {
diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss
index 499764caa..40bf42f99 100644
--- a/src/components/Reactions/styling/ReactionSelector.scss
+++ b/src/components/Reactions/styling/ReactionSelector.scss
@@ -33,29 +33,6 @@
     }
   }
 
-  .str-chat__reaction-selector-extended-list {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    height: 100%;
-    padding-block: var(--spacing-md);
-    padding-inline: var(--spacing-sm);
-
-    .str-chat__reaction-selector-extended-list__button {
-      .str-chat__reaction-icon {
-        height: var(--emoji-md);
-        width: var(--emoji-md);
-        font-size: var(--emoji-md);
-        letter-spacing: var(--typography-letter-spacing-default);
-        font-style: normal;
-        line-height: 0;
-        font-family: system-ui;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-
   .str-chat__reaction-selector-list {
     list-style: none;
     margin: var(--spacing-none, 0);
diff --git a/src/components/Reactions/styling/ReactionSelectorExtendedList.scss b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss
new file mode 100644
index 000000000..fb0ca14a5
--- /dev/null
+++ b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss
@@ -0,0 +1,22 @@
+.str-chat__reaction-selector-extended-list {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  height: 100%;
+  padding-block: var(--spacing-md);
+  padding-inline: var(--spacing-sm);
+
+  .str-chat__reaction-selector-extended-list__button {
+    .str-chat__reaction-icon {
+      height: var(--emoji-md);
+      width: var(--emoji-md);
+      font-size: var(--emoji-md);
+      letter-spacing: var(--typography-letter-spacing-default);
+      font-style: normal;
+      line-height: 0;
+      font-family: system-ui;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/components/Reactions/styling/index.scss b/src/components/Reactions/styling/index.scss
index 364ea1d65..4490d7d54 100644
--- a/src/components/Reactions/styling/index.scss
+++ b/src/components/Reactions/styling/index.scss
@@ -1,3 +1,4 @@
 @use 'ReactionSelector';
+@use 'ReactionSelectorExtendedList';
 @use 'MessageReactions';
 @use 'MessageReactionsDetail';

From c598a702e196a4db132c52896621bf707a703d0e Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Thu, 9 Apr 2026 12:59:36 +0200
Subject: [PATCH 2/6] Finalize

---
 src/components/Reactions/MessageReactions.tsx |  7 ++++--
 .../Reactions/MessageReactionsDetail.tsx      | 22 ++++++++++++++-----
 src/components/Reactions/ReactionSelector.tsx |  8 ++++---
 src/context/ComponentContext.tsx              |  7 +++++-
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/Reactions/MessageReactions.tsx b/src/components/Reactions/MessageReactions.tsx
index 036444422..7ee0b0ec6 100644
--- a/src/components/Reactions/MessageReactions.tsx
+++ b/src/components/Reactions/MessageReactions.tsx
@@ -21,6 +21,7 @@ import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { ReactionsComparator, ReactionType } from './types';
 import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
+import { ReactionSelector } from './ReactionSelector';
 
 export type MessageReactionsProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -66,7 +67,6 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
     capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},
     flipHorizontalPosition = false,
     handleFetchReactions,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     reactionDetailsSort,
     verticalPosition = 'top',
     visualStyle = 'clustered',
@@ -89,7 +89,9 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
   const { isMyMessage, message } = useMessageContext('MessageReactions');
 
   const divRef = useRef<ComponentRef<'div'>>(null);
-  const dialogId = `message-reactions-detail-${message.id}`;
+  const dialogId = DefaultMessageReactionsDetail.getDialogId({
+    messageId: message.id,
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
   const isDialogOpen = useDialogIsOpen(dialogId, dialogManager?.id);
 
@@ -225,6 +227,7 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
         <MessageReactionsDetail
           handleFetchReactions={handleFetchReactions}
           onSelectedReactionTypeChange={setSelectedReactionType}
+          reactionDetailsSort={reactionDetailsSort}
           reactionGroups={reactionGroups}
           reactions={existingReactions}
           selectedReactionType={selectedReactionType}
diff --git a/src/components/Reactions/MessageReactionsDetail.tsx b/src/components/Reactions/MessageReactionsDetail.tsx
index 22e6a3367..7cdeb66d3 100644
--- a/src/components/Reactions/MessageReactionsDetail.tsx
+++ b/src/components/Reactions/MessageReactionsDetail.tsx
@@ -45,7 +45,13 @@ export const MessageReactionsDetailLoadingIndicator = () => {
   return <>{elements}</>;
 };
 
-export function MessageReactionsDetail({
+interface MessageReactionsDetailInterface {
+  (props: MessageReactionsDetailProps): React.ReactNode;
+  displayName: string;
+  getDialogId: (_: { messageId: string }) => string;
+}
+
+export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
   handleFetchReactions,
   handleReaction,
   onSelectedReactionTypeChange,
@@ -55,13 +61,14 @@ export function MessageReactionsDetail({
   reactions,
   selectedReactionType,
   totalReactionCount,
-}: MessageReactionsDetailProps) {
+}) => {
   const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);
   const { client } = useChatContext();
   const {
     Avatar = DefaultAvatar,
     LoadingIndicator = MessageReactionsDetailLoadingIndicator,
     reactionOptions = defaultReactionOptions,
+    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,
   } = useComponentContext(MessageReactionsDetail.name);
   const { t } = useTranslationContext();
 
@@ -91,8 +98,8 @@ export function MessageReactionsDetail({
         className='str-chat__message-reactions-detail'
         data-testid='message-reactions-detail'
       >
-        <ReactionSelector.ExtendedList
-          dialogId={`message-reactions-detail-${message.id}`}
+        <ReactionSelectorExtendedList
+          dialogId={MessageReactionsDetail.getDialogId({ messageId: message.id })}
           handleReaction={handleReaction}
           own_reactions={own_reactions}
         />
@@ -220,4 +227,9 @@ export function MessageReactionsDetail({
       </div>
     </div>
   );
-}
+};
+
+MessageReactionsDetail.displayName = 'MessageReactionsDetail';
+
+MessageReactionsDetail.getDialogId = ({ messageId }) =>
+  `message-reactions-detail-${messageId}`;
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index ca16cd0e8..b96f3eb1f 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -33,8 +33,10 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
   const { handleReaction: propHandleReaction, own_reactions: propOwnReactions } = props;
   const [extendedListOpen, setExtendedListOpen] = useState(false);
 
-  const { reactionOptions = defaultReactionOptions } =
-    useComponentContext('ReactionSelector');
+  const {
+    reactionOptions = defaultReactionOptions,
+    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,
+  } = useComponentContext('ReactionSelector');
 
   const {
     closeReactionSelectorOnClick,
@@ -116,7 +118,7 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
         </>
       )}
       {extendedListOpen && (
-        <ReactionSelector.ExtendedList {...props} dialogId={dialogId} />
+        <ReactionSelectorExtendedList {...props} dialogId={dialogId} />
       )}
     </div>
   );
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 8effb1042..b9440a8d8 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -1,6 +1,7 @@
-import type { PropsWithChildren } from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
 import React, { useContext } from 'react';
 
+
 import {
   type AttachmentPreviewListProps,
   type AttachmentProps,
@@ -43,6 +44,7 @@ import {
   type PollOptionSelectorProps,
   type QuotedMessagePreviewProps,
   type ReactionOptions,
+  type ReactionSelector,
   type ReactionSelectorProps,
   type RecordingPermissionDeniedNotificationProps,
   type ReminderNotificationProps,
@@ -211,6 +213,9 @@ export type ComponentContextValue = {
   reactionOptions?: ReactionOptions;
   /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
   ReactionSelector?: React.ForwardRefExoticComponent<ReactionSelectorProps>;
+  ReactionSelectorExtendedList?: React.ComponentType<
+    ComponentProps<(typeof ReactionSelector)['ExtendedList']>
+  >;
   /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [MessageReactions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/MessageReactions.tsx) */
   MessageReactions?: React.ComponentType<MessageReactionsProps>;
   /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [MessageReactionsDetail](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/MessageReactionsDetail.tsx) */

From cffb7d566d0466f009c4e2e3551175244fa4a129 Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Thu, 9 Apr 2026 14:44:25 +0200
Subject: [PATCH 3/6] Add tests

---
 src/components/Reactions/MessageReactions.tsx |  13 +-
 .../Reactions/MessageReactionsDetail.tsx      |   9 +-
 src/components/Reactions/ReactionSelector.tsx |  11 +-
 .../__tests__/MessageReactions.test.tsx       |  95 ++++---
 .../__tests__/MessageReactionsDetail.test.tsx | 201 ++++++++++++---
 .../__tests__/ReactionSelector.test.tsx       | 237 +++++++++++++++---
 src/context/ComponentContext.tsx              |   1 -
 7 files changed, 453 insertions(+), 114 deletions(-)

diff --git a/src/components/Reactions/MessageReactions.tsx b/src/components/Reactions/MessageReactions.tsx
index 7ee0b0ec6..165646e1c 100644
--- a/src/components/Reactions/MessageReactions.tsx
+++ b/src/components/Reactions/MessageReactions.tsx
@@ -21,7 +21,6 @@ import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { ReactionsComparator, ReactionType } from './types';
 import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
-import { ReactionSelector } from './ReactionSelector';
 
 export type MessageReactionsProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -160,6 +159,7 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
           aria-pressed={isDialogOpen}
           buttonIf={visualStyle === 'clustered'}
           className='str-chat__message-reactions__list-button'
+          data-testid='message-reactions-list-button'
           onClick={() => handleReactionButtonClick(null)}
         >
           <ul className='str-chat__message-reactions__list'>
@@ -168,6 +168,7 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
                 EmojiComponent && (
                   <li
                     className='str-chat__message-reactions__list-item'
+                    data-testid='message-reactions-list-item'
                     key={reactionType}
                   >
                     <FragmentOrButton
@@ -175,7 +176,10 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
                       className='str-chat__message-reactions__list-item-button'
                       onClick={() => handleReactionButtonClick(reactionType)}
                     >
-                      <span className='str-chat__message-reactions__list-item-icon'>
+                      <span
+                        className='str-chat__message-reactions__list-item-icon'
+                        data-testid='message-reactions-list-item-icon'
+                      >
                         <EmojiComponent />
                       </span>
                       {visualStyle === 'segmented' && reactionCount > 1 && (
@@ -208,7 +212,10 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
               )}
           </ul>
           {visualStyle === 'clustered' && (
-            <span className='str-chat__message-reactions__total-count'>
+            <span
+              className='str-chat__message-reactions__total-count'
+              data-testid='message-reactions-total-count'
+            >
               {totalReactionCount}
             </span>
           )}
diff --git a/src/components/Reactions/MessageReactionsDetail.tsx b/src/components/Reactions/MessageReactionsDetail.tsx
index 7cdeb66d3..3c6dca72a 100644
--- a/src/components/Reactions/MessageReactionsDetail.tsx
+++ b/src/components/Reactions/MessageReactionsDetail.tsx
@@ -118,10 +118,15 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
         </div>
       )}
       <div className='str-chat__message-reactions-detail__reaction-type-list-container'>
-        <ul className='str-chat__message-reactions-detail__reaction-type-list'>
+        <ul
+          className='str-chat__message-reactions-detail__reaction-type-list'
+          data-testid='reaction-type-list'
+        >
           <li className='str-chat__message-reactions-detail__reaction-type-list-item'>
             <button
+              aria-label={t('Add reaction')}
               className='str-chat__message-reactions-detail__reaction-type-list-item-button'
+              data-testid='add-reaction-button'
               onClick={() => setExtendedReactionListOpen(true)}
             >
               <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>
@@ -151,7 +156,7 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
                     </span>
                     <span
                       className='str-chat__message-reactions-detail__reaction-type-list-item-count'
-                      data-testclass='message-reactions-item-count'
+                      data-testid='reaction-type-count'
                     >
                       {reactionCount}
                     </span>
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index b96f3eb1f..2d348b1fd 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -80,7 +80,10 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
     <div className='str-chat__reaction-selector' data-testid='reaction-selector'>
       {!extendedListOpen && (
         <>
-          <ul className='str-chat__reaction-selector-list'>
+          <ul
+            className='str-chat__reaction-selector-list'
+            data-testid='reaction-selector-list'
+          >
             {adjustedQuickReactionOptions.map(
               ({ Component, name: reactionName, type: reactionType }) => (
                 <li className='str-chat__reaction-list-selector__item' key={reactionType}>
@@ -109,6 +112,7 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
             appearance='outline'
             circular
             className='str-chat__reaction-selector__add-button'
+            data-testid='reaction-selector-add-button'
             onClick={() => setExtendedListOpen(true)}
             size='sm'
             variant='secondary'
@@ -165,7 +169,10 @@ ReactionSelector.ExtendedList = function ReactionSelectorExtendedList({
   }
 
   return (
-    <div className='str-chat__reaction-selector-extended-list'>
+    <div
+      className='str-chat__reaction-selector-extended-list'
+      data-testid='reaction-selector-extended-list'
+    >
       {Object.entries(reactionOptions.extended).map(
         ([reactionType, { Component, name: reactionName }]) => (
           <button
diff --git a/src/components/Reactions/__tests__/MessageReactions.test.tsx b/src/components/Reactions/__tests__/MessageReactions.test.tsx
index 6cc3d9ca7..e97961c83 100644
--- a/src/components/Reactions/__tests__/MessageReactions.test.tsx
+++ b/src/components/Reactions/__tests__/MessageReactions.test.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 import { axe } from '../../../../axe-helper';
 
-import { MessageReactions } from '../MessageReactions';
+import { MessageReactions, type MessageReactionsProps } from '../MessageReactions';
 import { MessageProvider } from '../../../context/MessageContext';
 
 import { generateReaction, mockMessageContext } from '../../../mock-builders';
 import { DialogManagerProvider, WithComponents } from '../../../context';
-import { defaultReactionOptions } from '../reactionOptions';
+import { defaultReactionOptions, type ReactionOptions } from '../reactionOptions';
+
+import type { ReactionGroupResponse } from 'stream-chat';
+import type { ReactionsComparator } from '../types';
 
 const USER_ID = 'mark';
 
@@ -16,8 +20,12 @@ const renderComponent = ({
   reaction_groups = {},
   reactionOptions = defaultReactionOptions,
   ...props
-}: any = {}) => {
-  const reactions = Object.entries(reaction_groups).flatMap(([type, { count }]: any) =>
+}: {
+  reaction_groups?: Record<string, ReactionGroupResponse>;
+  reactionOptions?: ReactionOptions;
+  sortReactions?: ReactionsComparator;
+} & Partial<Omit<MessageReactionsProps, 'reaction_groups' | 'reactions'>> = {}) => {
+  const reactions = Object.entries(reaction_groups).flatMap(([type, { count }]) =>
     Array.from({ length: count }, (_, i) =>
       generateReaction({ type, user: { id: `${USER_ID}-${i}` } }),
     ),
@@ -50,13 +58,13 @@ describe('MessageReactions', () => {
   vi.spyOn(console, 'warn').mockImplementation(null);
 
   it('should render the total reaction count in clustered mode', async () => {
-    const { container } = renderComponent({
+    const { container, getByTestId } = renderComponent({
       reaction_groups: {
-        haha: { count: 2 },
-        love: { count: 5 },
+        haha: fromPartial<ReactionGroupResponse>({ count: 2 }),
+        love: fromPartial<ReactionGroupResponse>({ count: 5 }),
       },
     });
-    const countEl = container.querySelector('.str-chat__message-reactions__total-count');
+    const countEl = getByTestId('message-reactions-total-count');
     expect(countEl).toBeInTheDocument();
     expect(countEl).toHaveTextContent('7');
 
@@ -73,16 +81,14 @@ describe('MessageReactions', () => {
   });
 
   it('should render an emoji for each type of reaction', async () => {
-    const reaction_groups = {
-      haha: { count: 2 },
-      love: { count: 5 },
-    };
-
-    const { container } = renderComponent({ reaction_groups });
+    const { container, getAllByTestId } = renderComponent({
+      reaction_groups: {
+        haha: fromPartial<ReactionGroupResponse>({ count: 2 }),
+        love: fromPartial<ReactionGroupResponse>({ count: 5 }),
+      },
+    });
 
-    const listItems = container.querySelectorAll(
-      '.str-chat__message-reactions__list-item',
-    );
+    const listItems = getAllByTestId('message-reactions-list-item');
     expect(listItems).toHaveLength(2);
 
     const results = await axe(container);
@@ -90,22 +96,18 @@ describe('MessageReactions', () => {
   });
 
   it('should handle custom reaction options', async () => {
-    const reaction_groups = {
-      banana: { count: 1 },
-      cowboy: { count: 2 },
-    };
-
-    const { container } = renderComponent({
-      reaction_groups,
+    const { container, getAllByTestId } = renderComponent({
+      reaction_groups: {
+        banana: fromPartial<ReactionGroupResponse>({ count: 1 }),
+        cowboy: fromPartial<ReactionGroupResponse>({ count: 2 }),
+      },
       reactionOptions: [
         { Component: () => <>🍌</>, type: 'banana' },
         { Component: () => <>🤠</>, type: 'cowboy' },
       ],
     });
 
-    const listItems = container.querySelectorAll(
-      '.str-chat__message-reactions__list-item',
-    );
+    const listItems = getAllByTestId('message-reactions-list-item');
     expect(listItems).toHaveLength(2);
 
     const results = await axe(container);
@@ -113,26 +115,25 @@ describe('MessageReactions', () => {
   });
 
   it('should order reactions by first reaction timestamp by default', () => {
-    const { container } = renderComponent({
+    const { getAllByTestId } = renderComponent({
       reaction_groups: {
-        haha: { count: 2, first_reaction_at: new Date().toISOString() },
-        like: {
+        haha: fromPartial<ReactionGroupResponse>({
+          count: 2,
+          first_reaction_at: new Date().toISOString(),
+        }),
+        like: fromPartial<ReactionGroupResponse>({
           count: 8,
           first_reaction_at: new Date(Date.now() + 60_000).toISOString(),
-        },
-        love: {
+        }),
+        love: fromPartial<ReactionGroupResponse>({
           count: 5,
           first_reaction_at: new Date(Date.now() + 120_000).toISOString(),
-        },
+        }),
       },
     });
 
-    const listItems = container.querySelectorAll(
-      '.str-chat__message-reactions__list-item',
-    );
-    const icons = Array.from(listItems).map(
-      (item) =>
-        item.querySelector('.str-chat__message-reactions__list-item-icon')?.textContent,
+    const icons = getAllByTestId('message-reactions-list-item-icon').map(
+      (el) => el.textContent,
     );
 
     // haha (😂) should come first, then like (👍), then love (❤️)
@@ -142,21 +143,17 @@ describe('MessageReactions', () => {
   });
 
   it('should use custom comparator if provided', () => {
-    const { container } = renderComponent({
+    const { getAllByTestId } = renderComponent({
       reaction_groups: {
-        haha: { count: 2 },
-        like: { count: 8 },
-        love: { count: 5 },
+        haha: fromPartial<ReactionGroupResponse>({ count: 2 }),
+        like: fromPartial<ReactionGroupResponse>({ count: 8 }),
+        love: fromPartial<ReactionGroupResponse>({ count: 5 }),
       },
       sortReactions: (a, b) => b.reactionCount - a.reactionCount,
     });
 
-    const listItems = container.querySelectorAll(
-      '.str-chat__message-reactions__list-item',
-    );
-    const icons = Array.from(listItems).map(
-      (item) =>
-        item.querySelector('.str-chat__message-reactions__list-item-icon')?.textContent,
+    const icons = getAllByTestId('message-reactions-list-item-icon').map(
+      (el) => el.textContent,
     );
 
     // like (8) > love (5) > haha (2)
diff --git a/src/components/Reactions/__tests__/MessageReactionsDetail.test.tsx b/src/components/Reactions/__tests__/MessageReactionsDetail.test.tsx
index 68e64e298..6c94de33c 100644
--- a/src/components/Reactions/__tests__/MessageReactionsDetail.test.tsx
+++ b/src/components/Reactions/__tests__/MessageReactionsDetail.test.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { axe } from '../../../../axe-helper';
 
-import { MessageReactionsDetail } from '../MessageReactionsDetail';
+import {
+  MessageReactionsDetail,
+  type MessageReactionsDetailProps,
+} from '../MessageReactionsDetail';
 import { MessageProvider } from '../../../context/MessageContext';
 
 import {
@@ -11,15 +13,20 @@ import {
   generateUser,
   getTestClient,
   mockChatContext,
-  mockComponentContext,
   mockMessageContext,
 } from '../../../mock-builders';
-import { ChatProvider, ComponentProvider, DialogManagerProvider } from '../../../context';
-import { defaultReactionOptions } from '../reactionOptions';
+import { ChatProvider, DialogManagerProvider, WithComponents } from '../../../context';
+import type { ComponentContextValue } from '../../../context/ComponentContext';
+import { defaultReactionOptions, type ReactionOptions } from '../reactionOptions';
 import { useProcessReactions } from '../hooks/useProcessReactions';
 
-const generateReactionsFromReactionGroups = (reactionGroups: any) =>
-  Object.entries(reactionGroups).flatMap(([type, { count }]: any) =>
+import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+import type { ReactionsComparator } from '../types';
+
+const generateReactionsFromReactionGroups = (
+  reactionGroups: Record<string, Pick<ReactionGroupResponse, 'count'>>,
+) =>
+  Object.entries(reactionGroups).flatMap(([type, { count }]) =>
     generateReactions(count, (i) => ({
       type,
       user: generateUser({ id: `mark-${i}`, name: `Mark Number ${i}` }),
@@ -34,12 +41,21 @@ const MessageReactionsDetailWrapper = ({
   handleFetchReactions,
   reaction_groups,
   reactions,
-  sortReactionDetails,
   sortReactions,
   ...rest
-}: any) => {
+}: {
+  handleFetchReactions?: MessageReactionsDetailProps['handleFetchReactions'];
+  reaction_groups?: Record<string, Pick<ReactionGroupResponse, 'count'>>;
+  reactions?: ReactionResponse[];
+  sortReactions?: ReactionsComparator;
+} & Partial<
+  Omit<
+    MessageReactionsDetailProps,
+    'handleFetchReactions' | 'reactions' | 'totalReactionCount'
+  >
+>) => {
   const { existingReactions, totalReactionCount } = useProcessReactions({
-    reaction_groups,
+    reaction_groups: reaction_groups as Record<string, ReactionGroupResponse>,
     reactions,
     sortReactions,
   });
@@ -51,7 +67,6 @@ const MessageReactionsDetailWrapper = ({
       selectedReactionType={
         rest.selectedReactionType ?? existingReactions[0]?.reactionType ?? null
       }
-      sortReactionDetails={sortReactionDetails}
       totalReactionCount={totalReactionCount}
       {...rest}
     />
@@ -60,20 +75,23 @@ const MessageReactionsDetailWrapper = ({
 
 const chatClient = getTestClient();
 
-const renderComponent = ({ handleFetchReactions, ...props }: any) =>
+const renderComponent = ({
+  handleFetchReactions,
+  ...props
+}: {
+  handleFetchReactions?: MessageReactionsDetailProps['handleFetchReactions'];
+} & Record<string, unknown>) =>
   render(
     <ChatProvider value={mockChatContext({ client: chatClient })}>
       <DialogManagerProvider>
-        <ComponentProvider
-          value={mockComponentContext({ reactionOptions: defaultReactionOptions })}
-        >
+        <WithComponents overrides={{ reactionOptions: defaultReactionOptions }}>
           <MessageProvider value={mockMessageContext()}>
             <MessageReactionsDetailWrapper
               handleFetchReactions={handleFetchReactions}
               {...props}
             />
           </MessageProvider>
-        </ComponentProvider>
+        </WithComponents>
       </DialogManagerProvider>
     </ChatProvider>,
   );
@@ -94,7 +112,7 @@ describe('MessageReactionsDetail', () => {
       love: { count: 5 },
     };
     const reactions = generateReactionsFromReactionGroups(reactionGroups);
-    const fetchReactions = vi.fn((type) =>
+    const fetchReactions = vi.fn((type: string) =>
       Promise.resolve(reactions.filter((r) => r.type === type)),
     );
 
@@ -115,7 +133,7 @@ describe('MessageReactionsDetail', () => {
       love: { count: 5 },
     };
     const reactions = generateReactionsFromReactionGroups(reactionGroups);
-    const fetchReactions = vi.fn((type) =>
+    const fetchReactions = vi.fn((type: string) =>
       Promise.resolve(reactions.filter((r) => r.type === type)),
     );
 
@@ -137,16 +155,14 @@ describe('MessageReactionsDetail', () => {
       love: { count: 5 },
     };
     const reactions = generateReactionsFromReactionGroups(reactionGroups);
-    const fetchReactions = vi.fn((type) =>
+    const fetchReactions = vi.fn((type: string) =>
       Promise.resolve(reactions.filter((r) => r.type === type)),
     );
 
     const { getAllByTestId, rerender } = render(
       <ChatProvider value={mockChatContext({ client: chatClient })}>
         <DialogManagerProvider>
-          <ComponentProvider
-            value={mockComponentContext({ reactionOptions: defaultReactionOptions })}
-          >
+          <WithComponents overrides={{ reactionOptions: defaultReactionOptions }}>
             <MessageProvider value={mockMessageContext()}>
               <MessageReactionsDetailWrapper
                 handleFetchReactions={fetchReactions}
@@ -155,7 +171,7 @@ describe('MessageReactionsDetail', () => {
                 selectedReactionType='haha'
               />
             </MessageProvider>
-          </ComponentProvider>
+          </WithComponents>
         </DialogManagerProvider>
       </ChatProvider>,
     );
@@ -167,9 +183,7 @@ describe('MessageReactionsDetail', () => {
     rerender(
       <ChatProvider value={mockChatContext({ client: chatClient })}>
         <DialogManagerProvider>
-          <ComponentProvider
-            value={mockComponentContext({ reactionOptions: defaultReactionOptions })}
-          >
+          <WithComponents overrides={{ reactionOptions: defaultReactionOptions }}>
             <MessageProvider value={mockMessageContext()}>
               <MessageReactionsDetailWrapper
                 handleFetchReactions={fetchReactions}
@@ -178,7 +192,7 @@ describe('MessageReactionsDetail', () => {
                 selectedReactionType='love'
               />
             </MessageProvider>
-          </ComponentProvider>
+          </WithComponents>
         </DialogManagerProvider>
       </ChatProvider>,
     );
@@ -218,7 +232,6 @@ describe('MessageReactionsDetail', () => {
       reaction_groups: reactionGroups,
       reactions,
       selectedReactionType: 'haha',
-      sortReactionDetails: (a, b) => -a.user.name.localeCompare(b.user.name),
     });
 
     await waitFor(() => {
@@ -269,4 +282,134 @@ describe('MessageReactionsDetail', () => {
       );
     });
   });
+
+  it('should always display reaction count for each reaction type', () => {
+    const reactionGroups = {
+      haha: { count: 1 },
+      love: { count: 3 },
+    };
+    const reactions = generateReactionsFromReactionGroups(reactionGroups);
+    const fetchReactions = vi.fn(() => Promise.resolve([]));
+
+    const { getAllByTestId } = renderComponent({
+      handleFetchReactions: fetchReactions,
+      reaction_groups: reactionGroups,
+      reactions,
+    });
+
+    const counts = getAllByTestId('reaction-type-count');
+    expect(counts).toHaveLength(2);
+    expect(counts[0]).toHaveTextContent('1');
+    expect(counts[1]).toHaveTextContent('3');
+  });
+
+  it('should render add emoji button in the reaction type list', () => {
+    const reactionGroups = {
+      love: { count: 2 },
+    };
+    const reactions = generateReactionsFromReactionGroups(reactionGroups);
+    const fetchReactions = vi.fn(() => Promise.resolve([]));
+
+    const { getByTestId } = renderComponent({
+      handleFetchReactions: fetchReactions,
+      reaction_groups: reactionGroups,
+      reactions,
+    });
+
+    expect(getByTestId('add-reaction-button')).toBeInTheDocument();
+  });
+
+  it('should show extended reaction list when add emoji button is clicked', () => {
+    const reactionGroups = {
+      love: { count: 2 },
+    };
+    const reactions = generateReactionsFromReactionGroups(reactionGroups);
+    const fetchReactions = vi.fn(() => Promise.resolve([]));
+
+    const extendedReactionOptions: ReactionOptions = {
+      extended: {
+        rocket: { Component: () => <>🚀</>, name: 'Rocket' },
+        star: { Component: () => <>⭐</>, name: 'Star' },
+      },
+      quick: {
+        love: { Component: () => <>❤️</>, name: 'Heart' },
+      },
+    };
+
+    const { getByTestId, queryByTestId } = render(
+      <ChatProvider value={mockChatContext({ client: chatClient })}>
+        <DialogManagerProvider>
+          <WithComponents overrides={{ reactionOptions: extendedReactionOptions }}>
+            <MessageProvider
+              value={mockMessageContext({ message: { id: 'test-detail-msg' } })}
+            >
+              <MessageReactionsDetailWrapper
+                handleFetchReactions={fetchReactions}
+                reaction_groups={reactionGroups}
+                reactions={reactions}
+              />
+            </MessageProvider>
+          </WithComponents>
+        </DialogManagerProvider>
+      </ChatProvider>,
+    );
+
+    fireEvent.click(getByTestId('add-reaction-button'));
+
+    // Extended list should be visible
+    expect(getByTestId('reaction-selector-extended-list')).toBeInTheDocument();
+
+    // The detail panel should still be present
+    expect(getByTestId('message-reactions-detail')).toBeInTheDocument();
+
+    // The reaction type list should NOT be visible
+    expect(queryByTestId('reaction-type-list')).not.toBeInTheDocument();
+  });
+
+  it('should use custom ReactionSelectorExtendedList from ComponentContext', () => {
+    const reactionGroups = {
+      love: { count: 2 },
+    };
+    const reactions = generateReactionsFromReactionGroups(reactionGroups);
+    const fetchReactions = vi.fn(() => Promise.resolve([]));
+
+    const CustomExtendedList = vi.fn(() => (
+      <div data-testid='custom-extended-list'>Custom</div>
+    ));
+
+    const overrides: Partial<ComponentContextValue> = {
+      reactionOptions: {
+        extended: {
+          rocket: { Component: () => <>🚀</>, name: 'Rocket' },
+        },
+        quick: {
+          love: { Component: () => <>❤️</>, name: 'Heart' },
+        },
+      },
+      ReactionSelectorExtendedList: CustomExtendedList,
+    };
+
+    const { getByTestId } = render(
+      <ChatProvider value={mockChatContext({ client: chatClient })}>
+        <DialogManagerProvider>
+          <WithComponents overrides={overrides}>
+            <MessageProvider
+              value={mockMessageContext({ message: { id: 'test-detail-msg' } })}
+            >
+              <MessageReactionsDetailWrapper
+                handleFetchReactions={fetchReactions}
+                reaction_groups={reactionGroups}
+                reactions={reactions}
+              />
+            </MessageProvider>
+          </WithComponents>
+        </DialogManagerProvider>
+      </ChatProvider>,
+    );
+
+    fireEvent.click(getByTestId('add-reaction-button'));
+
+    expect(getByTestId('custom-extended-list')).toBeInTheDocument();
+    expect(CustomExtendedList).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/Reactions/__tests__/ReactionSelector.test.tsx b/src/components/Reactions/__tests__/ReactionSelector.test.tsx
index c7c6fc7f1..1dd325fdf 100644
--- a/src/components/Reactions/__tests__/ReactionSelector.test.tsx
+++ b/src/components/Reactions/__tests__/ReactionSelector.test.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import { ReactionSelector, type ReactionSelectorProps } from '../ReactionSelector';
+import { defaultReactionOptions, type ReactionOptions } from '../reactionOptions';
 
-import { ReactionSelector } from '../ReactionSelector';
-import { defaultReactionOptions } from '../reactionOptions';
-
-import { ComponentProvider } from '../../../context/ComponentContext';
 import { MessageProvider } from '../../../context/MessageContext';
-import { DialogManagerProvider } from '../../../context';
+import { DialogManagerProvider, WithComponents } from '../../../context';
+import type { ComponentContextValue } from '../../../context/ComponentContext';
 
 import {
   generateMessage,
@@ -16,16 +15,71 @@ import {
 
 const handleReactionMock = vi.fn();
 
-const renderComponent = ({ reactionOptions, ...props }: any = {}) =>
+const defaultMessage = generateMessage();
+
+const renderComponent = ({
+  reactionOptions,
+  ReactionSelectorExtendedList,
+  ...props
+}: Partial<ReactionSelectorProps> & {
+  reactionOptions?: ReactionOptions;
+  ReactionSelectorExtendedList?: ComponentContextValue['ReactionSelectorExtendedList'];
+} = {}) =>
   render(
     <DialogManagerProvider>
-      <ComponentProvider
-        value={{ reactionOptions: reactionOptions ?? defaultReactionOptions }}
+      <WithComponents
+        overrides={{
+          reactionOptions: reactionOptions ?? defaultReactionOptions,
+          ReactionSelectorExtendedList,
+        }}
       >
-        <MessageProvider value={mockMessageContext({ message: generateMessage() })}>
+        <MessageProvider value={mockMessageContext({ message: defaultMessage })}>
           <ReactionSelector handleReaction={handleReactionMock} {...props} />
         </MessageProvider>
-      </ComponentProvider>
+      </WithComponents>
+    </DialogManagerProvider>,
+  );
+
+const extendedReactionOptions: ReactionOptions = {
+  extended: {
+    rocket: { Component: () => <>🚀</>, name: 'Rocket' },
+    star: { Component: () => <>⭐</>, name: 'Star' },
+    thumbsdown: { Component: () => <>👎</>, name: 'Thumbs down' },
+  },
+  quick: {
+    love: { Component: () => <>❤️</>, name: 'Heart' },
+  },
+};
+
+const renderExtendedList = ({
+  componentOverrides = {},
+  messageOverrides = {},
+  ...props
+}: Partial<ReactionSelectorProps> & {
+  componentOverrides?: Partial<ComponentContextValue>;
+  messageOverrides?: Record<string, unknown>;
+  dialogId?: string;
+} = {}) =>
+  render(
+    <DialogManagerProvider>
+      <WithComponents
+        overrides={{
+          reactionOptions: extendedReactionOptions,
+          ...componentOverrides,
+        }}
+      >
+        <MessageProvider
+          value={mockMessageContext({
+            message: defaultMessage,
+            ...messageOverrides,
+          })}
+        >
+          <ReactionSelector.ExtendedList
+            dialogId={`test-dialog-${defaultMessage.id}`}
+            {...props}
+          />
+        </MessageProvider>
+      </WithComponents>
     </DialogManagerProvider>,
   );
 
@@ -43,17 +97,17 @@ describe('ReactionSelector', () => {
   });
 
   it('should render each of reactionOptions if specified as an array (legacy format)', () => {
-    const reactionOptions = [
-      { Component: vi.fn(() => <span>test1</span>), type: 'test1' },
-      { Component: vi.fn(() => <span>test2</span>), type: 'test2' },
+    const reactionOptions: ReactionOptions = [
+      { Component: () => <span>test1</span>, type: 'test1' },
+      { Component: () => <span>test2</span>, type: 'test2' },
     ];
     const { getAllByTestId } = renderComponent({ reactionOptions });
 
     const buttons = getAllByTestId('select-reaction-button');
     expect(buttons).toHaveLength(2);
 
-    reactionOptions.forEach((option) => {
-      expect(option.Component).toHaveBeenCalledTimes(1);
+    buttons.forEach((button, index) => {
+      expect(button).toHaveTextContent(reactionOptions[index].type);
     });
   });
 
@@ -83,13 +137,12 @@ describe('ReactionSelector', () => {
   });
 
   it('should render the add button for extended reactions', () => {
-    const { container } = renderComponent();
-    const addButton = container.querySelector('.str-chat__reaction-selector__add-button');
-    expect(addButton).toBeInTheDocument();
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('reaction-selector-add-button')).toBeInTheDocument();
   });
 
   it('should show extended reaction list when add button is clicked', () => {
-    const reactionOptions = {
+    const reactionOptions: ReactionOptions = {
       extended: {
         rocket: { Component: () => <>🚀</>, name: 'Rocket' },
         star: { Component: () => <>⭐</>, name: 'Star' },
@@ -98,19 +151,14 @@ describe('ReactionSelector', () => {
         love: { Component: () => <>❤️</>, name: 'Heart' },
       },
     };
-    const { container } = renderComponent({ reactionOptions });
+    const { getByTestId, queryByTestId } = renderComponent({ reactionOptions });
 
-    const addButton = container.querySelector('.str-chat__reaction-selector__add-button');
-    fireEvent.click(addButton);
+    fireEvent.click(getByTestId('reaction-selector-add-button'));
 
-    const extendedList = container.querySelector(
-      '.str-chat__reaction-selector-extended-list',
-    );
-    expect(extendedList).toBeInTheDocument();
+    expect(getByTestId('reaction-selector-extended-list')).toBeInTheDocument();
 
     // Quick list should be hidden when extended list is open
-    const quickList = container.querySelector('.str-chat__reaction-selector-list');
-    expect(quickList).not.toBeInTheDocument();
+    expect(queryByTestId('reaction-selector-list')).not.toBeInTheDocument();
   });
 
   it('should have correct data-text attribute on each button', () => {
@@ -123,4 +171,137 @@ describe('ReactionSelector', () => {
       expect.arrayContaining(['haha', 'like', 'love', 'sad', 'wow', 'fire']),
     );
   });
+
+  it('should use custom ReactionSelectorExtendedList from ComponentContext', () => {
+    const CustomExtendedList = vi.fn(() => (
+      <div data-testid='custom-extended-list'>Custom</div>
+    ));
+
+    const { getByTestId } = renderComponent({
+      reactionOptions: extendedReactionOptions,
+      ReactionSelectorExtendedList: CustomExtendedList,
+    });
+
+    fireEvent.click(getByTestId('reaction-selector-add-button'));
+
+    expect(getByTestId('custom-extended-list')).toBeInTheDocument();
+    expect(CustomExtendedList).toHaveBeenCalled();
+  });
+});
+
+describe('ReactionSelector.ExtendedList', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render extended reaction buttons', () => {
+    const { getAllByTestId } = renderExtendedList();
+
+    const buttons = getAllByTestId('select-reaction-button');
+    expect(buttons).toHaveLength(3);
+
+    const dataTexts = buttons.map((btn) => btn.getAttribute('data-text'));
+    expect(dataTexts).toEqual(expect.arrayContaining(['rocket', 'star', 'thumbsdown']));
+  });
+
+  it('should render null when reactionOptions is a legacy array', () => {
+    const legacyOptions: ReactionOptions = [{ Component: () => <>❤️</>, type: 'love' }];
+
+    const { queryByTestId } = renderExtendedList({
+      componentOverrides: { reactionOptions: legacyOptions },
+    });
+
+    expect(queryByTestId('reaction-selector-extended-list')).not.toBeInTheDocument();
+  });
+
+  it('should render null when reactionOptions has no extended field', () => {
+    const quickOnly: ReactionOptions = {
+      quick: {
+        love: { Component: () => <>❤️</>, name: 'Heart' },
+      },
+    };
+
+    const { queryByTestId } = renderExtendedList({
+      componentOverrides: { reactionOptions: quickOnly },
+    });
+
+    expect(queryByTestId('reaction-selector-extended-list')).not.toBeInTheDocument();
+  });
+
+  it('should mark own reactions with aria-pressed', () => {
+    const ownReaction = generateReaction({ type: 'rocket' });
+    const { getAllByTestId } = renderExtendedList({
+      own_reactions: [ownReaction],
+    });
+
+    const buttons = getAllByTestId('select-reaction-button');
+    const rocketButton = buttons.find(
+      (btn) => btn.getAttribute('data-text') === 'rocket',
+    );
+    const starButton = buttons.find((btn) => btn.getAttribute('data-text') === 'star');
+
+    expect(rocketButton).toHaveAttribute('aria-pressed', 'true');
+    expect(starButton).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('should call prop handleReaction over context handleReaction', () => {
+    const propHandleReaction = vi.fn();
+    const { getAllByTestId } = renderExtendedList({
+      handleReaction: propHandleReaction,
+    });
+
+    const buttons = getAllByTestId('select-reaction-button');
+    fireEvent.click(buttons[0]);
+
+    expect(propHandleReaction).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(Object),
+    );
+  });
+
+  it('should fall back to context handleReaction when prop is not provided', () => {
+    const contextHandleReaction = vi.fn();
+    const { getAllByTestId } = renderExtendedList({
+      messageOverrides: { handleReaction: contextHandleReaction },
+    });
+
+    const buttons = getAllByTestId('select-reaction-button');
+    fireEvent.click(buttons[0]);
+
+    expect(contextHandleReaction).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(Object),
+    );
+  });
+
+  it('should render correct aria-label using reaction name', () => {
+    const { getAllByTestId } = renderExtendedList();
+
+    const buttons = getAllByTestId('select-reaction-button');
+    const rocketButton = buttons.find(
+      (btn) => btn.getAttribute('data-text') === 'rocket',
+    );
+
+    expect(rocketButton).toHaveAttribute('aria-label', 'Select Reaction: Rocket');
+  });
+
+  it('should use reaction type as aria-label fallback when name is missing', () => {
+    const optionsWithoutName: ReactionOptions = {
+      extended: {
+        custom: { Component: () => <>🎯</> },
+      },
+      quick: {
+        love: { Component: () => <>❤️</>, name: 'Heart' },
+      },
+    };
+
+    const { getByTestId } = renderExtendedList({
+      componentOverrides: { reactionOptions: optionsWithoutName },
+    });
+
+    expect(getByTestId('select-reaction-button')).toHaveAttribute(
+      'aria-label',
+      'Select Reaction: custom',
+    );
+  });
 });
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index b9440a8d8..322197a65 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -1,7 +1,6 @@
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React, { useContext } from 'react';
 
-
 import {
   type AttachmentPreviewListProps,
   type AttachmentProps,

From 5d806000dba63a2868a3999a62ce91c8bc596173 Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Thu, 9 Apr 2026 16:38:06 +0200
Subject: [PATCH 4/6] Add translations

---
 src/i18n/de.json | 1 +
 src/i18n/en.json | 1 +
 src/i18n/es.json | 1 +
 src/i18n/fr.json | 1 +
 src/i18n/hi.json | 1 +
 src/i18n/it.json | 1 +
 src/i18n/ja.json | 1 +
 src/i18n/ko.json | 1 +
 src/i18n/nl.json | 1 +
 src/i18n/pt.json | 1 +
 src/i18n/ru.json | 1 +
 src/i18n/tr.json | 1 +
 12 files changed, 12 insertions(+)

diff --git a/src/i18n/de.json b/src/i18n/de.json
index 05f9b4225..ff81ac8e6 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -38,6 +38,7 @@
   "📍Shared location": "📍Geteilter Standort",
   "Add a comment": "Einen Kommentar hinzufügen",
   "Add an option": "Eine Option hinzufügen",
+  "Add reaction": "Reaktion hinzufügen",
   "All results loaded": "Alle Ergebnisse geladen",
   "Allow access to camera": "Zugriff auf Kamera erlauben",
   "Allow access to microphone": "Zugriff auf Mikrofon erlauben",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 00b2660f0..36a4fed93 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -38,6 +38,7 @@
   "📍Shared location": "📍Shared location",
   "Add a comment": "Add a Comment",
   "Add an option": "Add an Option",
+  "Add reaction": "Add reaction",
   "All results loaded": "All results loaded",
   "Allow access to camera": "Allow access to camera",
   "Allow access to microphone": "Allow access to microphone",
diff --git a/src/i18n/es.json b/src/i18n/es.json
index 18c6a1deb..7bab77976 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -46,6 +46,7 @@
   "📍Shared location": "📍Ubicación compartida",
   "Add a comment": "Agregar un comentario",
   "Add an option": "Agregar una opción",
+  "Add reaction": "Añadir reacción",
   "All results loaded": "Todos los resultados cargados",
   "Allow access to camera": "Permitir acceso a la cámara",
   "Allow access to microphone": "Permitir acceso al micrófono",
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 1aefa165a..a4fe0fa7b 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -46,6 +46,7 @@
   "📍Shared location": "📍Emplacement partagé",
   "Add a comment": "Ajouter un commentaire",
   "Add an option": "Ajouter une option",
+  "Add reaction": "Ajouter une réaction",
   "All results loaded": "Tous les résultats sont chargés",
   "Allow access to camera": "Autoriser l'accès à la caméra",
   "Allow access to microphone": "Autoriser l'accès au microphone",
diff --git a/src/i18n/hi.json b/src/i18n/hi.json
index dfedcdd9b..4b896a4a1 100644
--- a/src/i18n/hi.json
+++ b/src/i18n/hi.json
@@ -38,6 +38,7 @@
   "📍Shared location": "📍साझा किया गया स्थान",
   "Add a comment": "एक टिप्पणी जोड़ें",
   "Add an option": "एक विकल्प जोड़ें",
+  "Add reaction": "प्रतिक्रिया जोड़ें",
   "All results loaded": "सभी परिणाम लोड हो गए",
   "Allow access to camera": "कैमरा तक पहुँच दें",
   "Allow access to microphone": "माइक्रोफ़ोन तक पहुँच दें",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index 2d6b1d9ce..c7017103a 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -46,6 +46,7 @@
   "📍Shared location": "📍Posizione condivisa",
   "Add a comment": "Aggiungi un commento",
   "Add an option": "Aggiungi un'opzione",
+  "Add reaction": "Aggiungi reazione",
   "All results loaded": "Tutti i risultati caricati",
   "Allow access to camera": "Consenti l'accesso alla fotocamera",
   "Allow access to microphone": "Consenti l'accesso al microfono",
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
index 7c1b21166..32b201084 100644
--- a/src/i18n/ja.json
+++ b/src/i18n/ja.json
@@ -37,6 +37,7 @@
   "📍Shared location": "📍共有された位置情報",
   "Add a comment": "コメントを追加",
   "Add an option": "オプションを追加",
+  "Add reaction": "リアクションを追加",
   "All results loaded": "すべての結果が読み込まれました",
   "Allow access to camera": "カメラへのアクセスを許可する",
   "Allow access to microphone": "マイクロフォンへのアクセスを許可する",
diff --git a/src/i18n/ko.json b/src/i18n/ko.json
index 601798b16..ed8a861c5 100644
--- a/src/i18n/ko.json
+++ b/src/i18n/ko.json
@@ -37,6 +37,7 @@
   "📍Shared location": "📍공유된 위치",
   "Add a comment": "댓글 추가",
   "Add an option": "옵션 추가",
+  "Add reaction": "반응 추가",
   "All results loaded": "모든 결과가 로드되었습니다",
   "Allow access to camera": "카메라에 대한 액세스 허용",
   "Allow access to microphone": "마이크로폰에 대한 액세스 허용",
diff --git a/src/i18n/nl.json b/src/i18n/nl.json
index 0bc74d805..b40d30e0a 100644
--- a/src/i18n/nl.json
+++ b/src/i18n/nl.json
@@ -38,6 +38,7 @@
   "📍Shared location": "📍Gedeelde locatie",
   "Add a comment": "Voeg een opmerking toe",
   "Add an option": "Voeg een optie toe",
+  "Add reaction": "Reactie toevoegen",
   "All results loaded": "Alle resultaten geladen",
   "Allow access to camera": "Toegang tot camera toestaan",
   "Allow access to microphone": "Toegang tot microfoon toestaan",
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
index e47de7aeb..d4927b696 100644
--- a/src/i18n/pt.json
+++ b/src/i18n/pt.json
@@ -46,6 +46,7 @@
   "📍Shared location": "📍Localização compartilhada",
   "Add a comment": "Adicionar um comentário",
   "Add an option": "Adicionar uma opção",
+  "Add reaction": "Adicionar reação",
   "All results loaded": "Todos os resultados carregados",
   "Allow access to camera": "Permitir acesso à câmera",
   "Allow access to microphone": "Permitir acesso ao microfone",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index 3f9569b1a..e0902f0b0 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -55,6 +55,7 @@
   "📍Shared location": "📍Общее местоположение",
   "Add a comment": "Добавить комментарий",
   "Add an option": "Добавить вариант",
+  "Add reaction": "Добавить реакцию",
   "All results loaded": "Все результаты загружены",
   "Allow access to camera": "Разрешить доступ к камере",
   "Allow access to microphone": "Разрешить доступ к микрофону",
diff --git a/src/i18n/tr.json b/src/i18n/tr.json
index 94db22366..90bd87c36 100644
--- a/src/i18n/tr.json
+++ b/src/i18n/tr.json
@@ -38,6 +38,7 @@
   "📍Shared location": "📍Paylaşılan konum",
   "Add a comment": "Yorum ekle",
   "Add an option": "Bir seçenek ekle",
+  "Add reaction": "Tepki ekle",
   "All results loaded": "Tüm sonuçlar yüklendi",
   "Allow access to camera": "Kameraya erişime izin ver",
   "Allow access to microphone": "Mikrofona erişime izin ver",

From 5235a2fddd6cbae128c080c74968a5fe0fd40ecf Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Thu, 9 Apr 2026 17:50:07 +0200
Subject: [PATCH 5/6] Post-review adjustments

---
 src/components/Reactions/MessageReactionsDetail.tsx    |  7 +++++--
 .../Reactions/styling/MessageReactionsDetail.scss      | 10 +++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Reactions/MessageReactionsDetail.tsx b/src/components/Reactions/MessageReactionsDetail.tsx
index 3c6dca72a..b241e70d3 100644
--- a/src/components/Reactions/MessageReactionsDetail.tsx
+++ b/src/components/Reactions/MessageReactionsDetail.tsx
@@ -210,7 +210,10 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
                           await contextHandleReaction(type, e);
 
                           // was 1, should be 0 after removal, display all reactions
-                          if (reactionCountBeforeRemoval <= 1) {
+                          if (
+                            selectedReactionType !== null &&
+                            reactionCountBeforeRemoval <= 1
+                          ) {
                             onSelectedReactionTypeChange?.(null);
                           } else {
                             refetch();
@@ -222,7 +225,7 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
                     )}
                   </div>
                   <span className='str-chat__message-reactions-detail__user-list-item-icon'>
-                    {EmojiComponent && !selectedReactionType && <EmojiComponent />}
+                    {!selectedReactionType && EmojiComponent && <EmojiComponent />}
                   </span>
                 </div>
               );
diff --git a/src/components/Reactions/styling/MessageReactionsDetail.scss b/src/components/Reactions/styling/MessageReactionsDetail.scss
index d567c3dc8..37c297df1 100644
--- a/src/components/Reactions/styling/MessageReactionsDetail.scss
+++ b/src/components/Reactions/styling/MessageReactionsDetail.scss
@@ -29,10 +29,14 @@
     width: 100%;
     bottom: 0;
     inset-inline-start: 0;
-    height: var(--size-12);
+    height: var(--size-16);
     border-end-end-radius: inherit;
     border-end-start-radius: inherit;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 130%);
+    background: linear-gradient(
+      to bottom,
+      transparent 5%,
+      var(--background-core-elevation-0) 95%
+    );
   }
 
   font-family: var(--typography-font-family-sans);
@@ -65,7 +69,7 @@
   .str-chat__message-reactions-detail__reaction-type-list {
     list-style: none;
     margin: 0;
-    padding-inline: var(--spacing-xs);
+    padding-inline: var(--spacing-md);
     padding-block: var(--spacing-xs);
     display: flex;
     flex-wrap: wrap;

From 9ad6b561ac3ff06b4d62aff42a5b61830d90254a Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Thu, 9 Apr 2026 20:23:51 +0200
Subject: [PATCH 6/6] Post-review adjustments vol.2

---
 .../Reactions/MessageReactionsDetail.tsx      | 130 +++++++++---------
 .../styling/MessageReactionsDetail.scss       |  54 +++-----
 .../Reactions/styling/ReactionSelector.scss   |  10 +-
 src/components/Reactions/styling/common.scss  |  35 +++++
 4 files changed, 127 insertions(+), 102 deletions(-)

diff --git a/src/components/Reactions/MessageReactionsDetail.tsx b/src/components/Reactions/MessageReactionsDetail.tsx
index b241e70d3..d2fc8d6d7 100644
--- a/src/components/Reactions/MessageReactionsDetail.tsx
+++ b/src/components/Reactions/MessageReactionsDetail.tsx
@@ -166,72 +166,74 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
           )}
         </ul>
       </div>
-      <div
-        className='str-chat__message-reactions-detail__user-list'
-        data-testid='all-reacting-users'
-      >
-        {areReactionsLoading && <LoadingIndicator />}
-        {!areReactionsLoading && (
-          <>
-            {reactionDetails.map(({ type, user }) => {
-              const belongsToCurrentUser = client.user?.id === user?.id;
-              const EmojiComponent = Array.isArray(reactionOptions)
-                ? undefined
-                : (reactionOptions.quick[type]?.Component ??
-                  reactionOptions.extended?.[type]?.Component);
-
-              return (
-                <div
-                  className='str-chat__message-reactions-detail__user-list-item'
-                  key={`${user?.id}-${type}`}
-                >
-                  <Avatar
-                    className='str-chat__avatar--with-border'
-                    data-testid='avatar'
-                    imageUrl={user?.image as string | undefined}
-                    size='md'
-                    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 && (
-                      <button
-                        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);
-
-                          // was 1, should be 0 after removal, display all reactions
-                          if (
-                            selectedReactionType !== null &&
-                            reactionCountBeforeRemoval <= 1
-                          ) {
-                            onSelectedReactionTypeChange?.(null);
-                          } else {
-                            refetch();
-                          }
-                        }}
+      <div className='str-chat__message-reactions-detail__user-list-container'>
+        <div
+          className='str-chat__message-reactions-detail__user-list'
+          data-testid='all-reacting-users'
+        >
+          {areReactionsLoading && <LoadingIndicator />}
+          {!areReactionsLoading && (
+            <>
+              {reactionDetails.map(({ type, user }) => {
+                const belongsToCurrentUser = client.user?.id === user?.id;
+                const EmojiComponent = Array.isArray(reactionOptions)
+                  ? undefined
+                  : (reactionOptions.quick[type]?.Component ??
+                    reactionOptions.extended?.[type]?.Component);
+
+                return (
+                  <div
+                    className='str-chat__message-reactions-detail__user-list-item'
+                    key={`${user?.id}-${type}`}
+                  >
+                    <Avatar
+                      className='str-chat__avatar--with-border'
+                      data-testid='avatar'
+                      imageUrl={user?.image as string | undefined}
+                      size='md'
+                      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'
                       >
-                        {t('Tap to remove')}
-                      </button>
-                    )}
+                        {belongsToCurrentUser ? t('You') : user?.name || user?.id}
+                      </span>
+                      {belongsToCurrentUser && (
+                        <button
+                          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);
+
+                            // was 1, should be 0 after removal, display all reactions
+                            if (
+                              selectedReactionType !== null &&
+                              reactionCountBeforeRemoval <= 1
+                            ) {
+                              onSelectedReactionTypeChange?.(null);
+                            } else {
+                              refetch();
+                            }
+                          }}
+                        >
+                          {t('Tap to remove')}
+                        </button>
+                      )}
+                    </div>
+                    <span className='str-chat__message-reactions-detail__user-list-item-icon'>
+                      {!selectedReactionType && EmojiComponent && <EmojiComponent />}
+                    </span>
                   </div>
-                  <span className='str-chat__message-reactions-detail__user-list-item-icon'>
-                    {!selectedReactionType && EmojiComponent && <EmojiComponent />}
-                  </span>
-                </div>
-              );
-            })}
-          </>
-        )}
+                );
+              })}
+            </>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Reactions/styling/MessageReactionsDetail.scss b/src/components/Reactions/styling/MessageReactionsDetail.scss
index 37c297df1..3ddfba238 100644
--- a/src/components/Reactions/styling/MessageReactionsDetail.scss
+++ b/src/components/Reactions/styling/MessageReactionsDetail.scss
@@ -11,40 +11,24 @@
 .str-chat__message-reactions-detail {
   border-radius: var(--radius-lg);
   background: var(--background-core-elevation-2);
-  max-width: 278px;
-  min-width: min(90vw, 278px);
+  max-width: 256px;
+  min-width: min(90vw, 256px);
 
   &:has(.str-chat__reaction-selector-extended-list) {
+    @include common.clipping-fade;
+    @include utils.scrollable-y;
+
     padding: 0;
     display: block;
-    @include utils.scrollable-y;
     scrollbar-width: none;
-    border-radius: var(--radius-lg);
-    max-height: 250px;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    inset-inline-start: 0;
-    height: var(--size-16);
-    border-end-end-radius: inherit;
-    border-end-start-radius: inherit;
-    background: linear-gradient(
-      to bottom,
-      transparent 5%,
-      var(--background-core-elevation-0) 95%
-    );
+    max-height: 320px;
+    max-width: unset;
+    min-width: unset;
   }
 
   font-family: var(--typography-font-family-sans);
 
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0 4px 8px 0 rgba(0, 0, 0, 0.14),
-    0 12px 24px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--light-elevation-3);
 
   padding-block-start: var(--spacing-xxs);
 
@@ -109,19 +93,21 @@
     }
   }
 
+  .str-chat__message-reactions-detail__user-list-container {
+    position: relative;
+    border-radius: inherit;
+    @include common.clipping-fade;
+    &::before {
+      display: none;
+    }
+  }
+
   .str-chat__message-reactions-detail__user-list {
     @include utils.scrollable-y;
     scrollbar-width: none;
     position: relative;
     padding-block-end: var(--spacing-xxs);
-    max-height: 100px;
-
-    &:has(
-        .str-chat__message-reactions-detail__user-list-item
-          .str-chat__message-reactions-detail__user-list-item-button:nth-child(-n + 3)
-      ) {
-      max-height: 106px;
-    }
+    max-height: 180px;
 
     .str-chat__message-reactions-detail__skeleton-item {
       padding-block: var(--spacing-xxs);
@@ -152,6 +138,7 @@
       align-items: center;
       gap: var(--spacing-xs);
       padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs));
+      max-height: var(--size-40);
 
       .str-chat__message-reactions-detail__user-list-item-icon {
         font-family: system-ui;
@@ -163,7 +150,6 @@
       .str-chat__message-reactions-detail__user-list-item-info {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-xxxs);
         flex-grow: 1;
         min-width: 0;
 
diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss
index 40bf42f99..5e6c00b2c 100644
--- a/src/components/Reactions/styling/ReactionSelector.scss
+++ b/src/components/Reactions/styling/ReactionSelector.scss
@@ -1,4 +1,5 @@
-@use '../../../styling/utils';
+@use '../../../styling/utils' as utils;
+@use './common' as common;
 
 .str-chat__reaction-selector {
   display: flex;
@@ -9,10 +10,9 @@
   gap: var(--spacing-xs);
 
   border-radius: var(--radius-4xl, 32px);
-  border: 1px solid var(--border-core-surface-subtle, #e2e6ea);
   background: var(--background-core-elevation-2, #fff);
 
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--light-elevation-3);
 
   &:has(.str-chat__reaction-selector-extended-list) {
     padding: 0;
@@ -20,7 +20,9 @@
     @include utils.scrollable-y;
     scrollbar-width: none;
     border-radius: var(--radius-lg);
-    max-height: 250px;
+    max-height: 320px;
+
+    @include common.clipping-fade;
   }
 
   .str-chat__reaction-selector__add-button {
diff --git a/src/components/Reactions/styling/common.scss b/src/components/Reactions/styling/common.scss
index 617f178c7..4b5b9ca05 100644
--- a/src/components/Reactions/styling/common.scss
+++ b/src/components/Reactions/styling/common.scss
@@ -46,3 +46,38 @@
     }
   }
 }
+
+@mixin clipping-fade() {
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    inset-inline-start: 0;
+    height: var(--size-16);
+  }
+
+  &::after {
+    bottom: 0;
+    border-end-end-radius: inherit;
+    border-end-start-radius: inherit;
+    background: linear-gradient(
+      to bottom,
+      transparent 5%,
+      var(--background-core-elevation-0) 95%
+    );
+  }
+
+  &::before {
+    // TODO: figure out a better way (z-index isn't optimal)
+    z-index: 1;
+    top: 0;
+    border-start-end-radius: inherit;
+    border-start-start-radius: inherit;
+    background: linear-gradient(
+      to top,
+      transparent 5%,
+      var(--background-core-elevation-0) 95%
+    );
+  }
+}