feat: reaction list top redesign

[khushal87]

This pull request refactors the message reaction list UI components to simplify the codebase, improve maintainability, and enhance layout flexibility. The main changes include removing redundant code for reaction items, introducing a new clustered reaction list layout, and updating prop handling and styling for better alignment and customization.

Reaction List Refactor and UI Improvements:

• Replaced the segmented reaction list type with a new 'clustered' layout as the default for reactionListType, and updated all relevant components to support this change (Channel.tsx, MessageBubble.tsx). [1] [2]
• Refactored ReactionListBottom to delegate clustered reaction rendering to the new ReactionListClustered component, removing the old segmented logic and redundant icon/count code. Reaction items now consistently use ReactionListItem (ReactionListBottom.tsx). [1] [2] [3]
• Updated prop types and usage for reaction list components, ensuring consistent passing of reactionListType, alignment, and removing unused or redundant props such as hasReactions (MessageBubble.tsx, MessageSimple.tsx). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Styling and Layout Enhancements:

• Improved alignment and container structure for message bubbles and reaction lists, including new style properties for wrappers and containers to better support left/right alignment and error states (MessageBubble.tsx). [1] [2] [3]
• Cleaned up and simplified style hooks in ReactionListBottom, removing unused style properties and semantic color references for a leaner implementation (ReactionListBottom.tsx). [1] [2]

These changes collectively modernize the reaction list UI, reduce code duplication, and provide more flexibility for future customization.

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
js_bundle_size	424 KB	424 KB	0 B	🟢