feat: reaction list bottom redesign (#3424)

This pull request introduces a new `reactionListType` prop to the
message and channel components, allowing the bottom reaction list to be
displayed in either a "segmented" or "clustered" style. It also
refactors the `ReactionListBottom` component for improved flexibility
and code clarity, and adds support for selecting reactions and
customizing their appearance.

**Key changes:**

**1. Reaction List Type and Propagation**
- Added a new `reactionListType` prop (default: `'segmented'`) to
`Channel`, `Message`, and `MessageSimple` components, and ensured it is
passed through all relevant contexts and props. This enables consumers
to control the visual style of the bottom reaction list.
[[1]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R389)
[[2]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R712)
[[3]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R1965)
[[4]](diffhunk://#diff-d3e4f4cdcef10807a38eab86f6ead6bbfe01980e7326f3cadfeb8186760d7af1R89)
[[5]](diffhunk://#diff-d3e4f4cdcef10807a38eab86f6ead6bbfe01980e7326f3cadfeb8186760d7af1R202)
[[6]](diffhunk://#diff-6c4943fcf0d32148b663091935ac039195d602cef7654b16bb93514ca2b3ba83R78)
[[7]](diffhunk://#diff-6c4943fcf0d32148b663091935ac039195d602cef7654b16bb93514ca2b3ba83R117)
[[8]](diffhunk://#diff-6c4943fcf0d32148b663091935ac039195d602cef7654b16bb93514ca2b3ba83R457)
[[9]](diffhunk://#diff-6c4943fcf0d32148b663091935ac039195d602cef7654b16bb93514ca2b3ba83R492)
[[10]](diffhunk://#diff-2335969a90d85933b956775f38af8bf0485cd538b0e73115b8087467d7ed116aR242)

**2. ReactionListBottom Component Refactor**
- Refactored `ReactionListBottom` to support both "segmented" and
"clustered" layouts, with the new `type` prop determining the style. The
component now uses a more flexible rendering approach and improved
styling, including item separators and alignment based on message
direction.
[[1]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L1-R4)
[[2]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L193-R178)
[[3]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6R188-R193)
[[4]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6R206-R232)
[[5]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L257-R357)

**3. Reaction Selection and Overlay Improvements**
- Improved the reaction selection logic by adding a `selectedReaction`
state and updating the `showReactionsOverlay` callback to accept an
optional reaction type. This allows the overlay to highlight the
selected reaction.
[[1]](diffhunk://#diff-4234b2ddfee0f9e29e7b465026e851cf75f5d16f03a175c86374168589335d8eL251-L253)
[[2]](diffhunk://#diff-4234b2ddfee0f9e29e7b465026e851cf75f5d16f03a175c86374168589335d8eL352-R354)
[[3]](diffhunk://#diff-4234b2ddfee0f9e29e7b465026e851cf75f5d16f03a175c86374168589335d8eR882)

**4. ReactionListBottom Item Enhancements**
- Updated `ReactionListBottomItem` to accept `selected` and `showCount`
props, and refactored its rendering to use a wrapper component and
remove unnecessary animation code. The icon and count display logic has
been simplified and improved for accessibility and maintainability.
[[1]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6R50-R51)
[[2]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6R64-R79)
[[3]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L127)
[[4]](diffhunk://#diff-926ded9f8a41b99e3b915a72424b44c11631585a26cfc0fa236d68979dafddb6L140-R132)

**5. Styling and Theming Updates**
- Introduced a new `useStyles` hook for `ReactionListBottom` to handle
dynamic styling based on message alignment and theme, and improved the
structure of style definitions for better consistency and flexibility.

These changes collectively improve the flexibility, usability, and
maintainability of the reaction list feature in the messaging UI.

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -386,6 +386,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageUserReactionsItem'
       | 'ReactionListBottom'
       | 'reactionListPosition'
+      | 'reactionListType'
       | 'ReactionListTop'
       | 'Reply'
       | 'shouldShowUnreadUnderlay'
@@ -708,6 +709,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     PollContent,
     ReactionListBottom = ReactionListBottomDefault,
     reactionListPosition = 'top',
+    reactionListType = 'segmented',
     ReactionListTop = ReactionListTopDefault,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
@@ -1960,6 +1962,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     PollContent,
     ReactionListBottom,
     reactionListPosition,
+    reactionListType,
     ReactionListTop,
     removeMessage,
     Reply,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -86,6 +86,7 @@ export const useCreateMessagesContext = ({
   PollContent,
   ReactionListBottom,
   reactionListPosition,
+  reactionListType,
   ReactionListTop,
   removeMessage,
   Reply,
@@ -198,6 +199,7 @@ export const useCreateMessagesContext = ({
       PollContent,
       ReactionListBottom,
       reactionListPosition,
+      reactionListType,
       ReactionListTop,
       removeMessage,
       Reply,

package/src/components/Message/Message.tsx

@@ -248,9 +248,9 @@ export type MessagePropsWithContext = Pick<
  */
 const MessageWithContext = (props: MessagePropsWithContext) => {
   const [isErrorInMessage, setIsErrorInMessage] = useState(false);
-  const [showMessageReactions, setShowMessageReactions] = useState(false);
+  const [showMessageReactions, setShowMessageReactions] = useState<boolean>(false);
+  const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
-  // const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
 
   const {
     channel,
@@ -349,10 +349,9 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
   });
 
-  const showReactionsOverlay = useStableCallback(() => {
-    if (!showMessageReactions) {
-      setShowMessageReactions(true);
-    }
+  const showReactionsOverlay = useStableCallback((reactionType?: string) => {
+    setShowMessageReactions(true);
+    setSelectedReaction(reactionType);
   });
 
   const { setNativeScrollability } = useMessageListItemContext();
@@ -880,6 +879,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                 message={message}
                 MessageUserReactionsAvatar={MessageUserReactionsAvatar}
                 MessageUserReactionsItem={MessageUserReactionsItem}
+                selectedReaction={selectedReaction}
               />
             </BottomSheetModal>
           ) : null}

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -75,6 +75,7 @@ export type MessageSimplePropsWithContext = Pick<
     | 'messageSwipeToReplyHitSlop'
     | 'ReactionListBottom'
     | 'reactionListPosition'
+    | 'reactionListType'
     | 'ReactionListTop'
   > & {
     /**
@@ -113,6 +114,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
     otherAttachments,
     ReactionListBottom,
     reactionListPosition,
+    reactionListType,
     ReactionListTop,
     shouldRenderSwipeableWrapper,
     setQuotedMessage,
@@ -274,7 +276,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
             </View>
 
             {reactionListPosition === 'bottom' && ReactionListBottom ? (
-              <ReactionListBottom />
+              <ReactionListBottom type={reactionListType} />
             ) : null}
             <MessageFooter date={message.created_at} isDeleted={!!isMessageTypeDeleted} />
           </View>
@@ -452,6 +454,7 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
     myMessageTheme,
     ReactionListBottom,
     reactionListPosition,
+    reactionListType,
     ReactionListTop,
   } = useMessagesContext();
   const isAIGenerated = useMemo(
@@ -486,6 +489,7 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
         otherAttachments,
         ReactionListBottom,
         reactionListPosition,
+        reactionListType,
         ReactionListTop,
         setQuotedMessage,
         shouldRenderSwipeableWrapper,