feat: reaction list bottom redesign

[khushal87]

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] [2] [3] [4] [5] [6] [7] [8] [9] [10]

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] [2] [3] [4] [5]

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] [2] [3]

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] [2] [3] [4]

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.

[Stream-SDK-Bot]

SDK Size

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

[isekovanic]

🚀