feat: reaction details menu

[isekovanic]

This pull request refactors the message reaction overlay and emoji picker functionality to improve user experience and code clarity. The main changes include replacing the previous overlay for message reactions with a dedicated bottom sheet modal, updating the reaction list components to use a new callback (showReactionsOverlay), and enhancing the emoji picker to visually indicate selected emojis and streamline its API.

Message Reaction Overlay Refactor:

• Replaced the inline overlay for message reactions with a BottomSheetModal that displays MessageUserReactions, providing a more consistent and modern UI for viewing reactions. (package/src/components/Message/Message.tsx, package/src/components/Message/Message.tsxL886-R915)
• Introduced showReactionsOverlay callback (using useStableCallback) to handle opening the reactions modal, separating it from the general message overlay logic. (package/src/components/Message/Message.tsx, [1] [2] [3] [4]

Reaction List API Update:

• Refactored ReactionListTop and ReactionListBottom components and their props to use showReactionsOverlay instead of showMessageOverlay, clarifying intent and improving maintainability. (package/src/components/MessageSimple/ReactionList/ReactionListBottom.tsx, [1] [2] [3] [4] [5] [6] [7] [8]; package/src/components/MessageSimple/ReactionList/ReactionListTop.tsx, [9] [10] [11] [12] [13] [14]

Emoji Picker Improvements:

• Updated EmojiPickerList to visually highlight emojis the user has already reacted with, using a new selectedEmoji style. (package/src/components/MessageMenu/EmojiPickerList.tsx, [1] [2]
• Changed the emoji picker API to use onSelectReaction instead of onSelectEmoji, simplifying integration with the reaction handler and improving clarity. (package/src/components/MessageMenu/EmojiPickerList.tsx, [1] [2]; package/src/components/MessageMenu/MessageReactionPicker.tsx, [3] [4]

Supporting Changes:

• Added missing imports for useStableCallback and BottomSheetModal to relevant files. (package/src/components/Message/Message.tsx, [1] [2]
• Changed the default state for showMessageReactions to false, so reactions overlay is only shown when explicitly triggered. (package/src/components/Message/Message.tsx, package/src/components/Message/Message.tsxL244-R246)

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
js_bundle_size	417 KB	420 KB	+2112 B	🔴