feat: new MessageActions component (#2543)

## The Problem(s)

`MessageActions`/`MessageOptions`/`MessageActionsBox` are a poorly
designed set of components which we were trying to patch over the time
with things like `CustomMessageActionsList` but with each new patchy
addition, the component set got heavier and worse to navigate in when it
came to customization.

- `messageActions` prop on `MessageList` and `VirtualizedMessageList`
components allow for key/handler customization:
  ```tsx
  { "Custom Action": () => doThing() }
  ```
Solution like this falls face first when integrators need to access
`MessageContext` or use translations for different languages (the key is
used as button text).
- Solution to patch those shortcomings was to introduce
`CustomMessageActionsList` which allows to render custom buttons within
actions dropdown but... when buttons are rendered conditionally, the
"..." is still rendered and upon clicking on it, it opens up an empty
actions dropdown. This solution also does not allow to adjust "quick
actions" (like reply or react).
 
## Steps Taken

1. pre-define default set of actions with buttons as components with own
logic and click handlers, separate into "quick" and "dropdown" types
2. define default filter which takes care of user capabilities and
whether the actions are allowed within reply type of a message (and some
other stuff based on message type or status)
3. allow integrators to override the default set and to override the
default filter function, alow reusing defaults too

```
access action set -> filter action set based on filter function criteria -> separate into quick and dropdown -> render
```

## From Integrator's POV

```tsx
import { Channel, } from 'stream-chat-react';
import {
  MessageActions,
  defaultMessageActionSet,
  DefaultDropdownActionButton,
} from 'stream-chat-react/experimental';

const CustomMessageActions = () => {
  const customFilter = () => {
    /*...*/
  };

  return (
    <MessageActions
      // though not recommended, it's completely possible to disable default filter...
      disableBaseMessageActionSetFilter
      messageActionSet={[
        ...defaultMessageActionSet,
        {
          type: 'myCustomTypeDropdown',
          placement: 'dropdown',
          // we can enforce non-null return type (at least through TS)
          Component: () => <DefaultDropdownActionButton>🚀 Custom</DefaultDropdownActionButton>,
        },
        {
          type: 'myCustomTypeQuick',
          placement: 'quick',
          Component: () => <button>a</button>,
        },
        // ...and apply custom filter here with access to CustomMessageActions scope (contexts + other hooks)
      ].filter(customFilter)}
    />
  );
};

<Channel MessageActions={CustomMessageActions}>...</Channel>;
```


![image](https://github.com/user-attachments/assets/ba75ee2c-50f8-45c5-8a1e-bb5e063d9e80)

## Next Steps

- [x] review and release
- [ ] allow overriding certain components within default
`MessageActions_UNSTABLE`
- [ ] tests

Author: arnautov-anton

package.json

@@ -50,6 +50,18 @@
       },
       "default": "./dist/plugins/encoders/mp3.js"
     },
+    "./experimental": {
+      "types": "./dist/experimental/index.d.ts",
+      "node": {
+        "require": "./dist/experimental/index.node.cjs",
+        "import": "./dist/experimental/index.js"
+      },
+      "browser": {
+        "require": "./dist/experimental/index.browser.cjs",
+        "import": "./dist/experimental/index.js"
+      },
+      "default": "./dist/experimental/index.js"
+    },
     "./dist/css/*": {
       "default": "./dist/css/*"
     },
@@ -70,6 +82,9 @@
       ],
       "mp3-encoder": [
         "./dist/plugins/encoders/mp3.d.ts"
+      ],
+      "experimental": [
+        "./dist/experimental/index.d.ts"
       ]
     }
   },

scripts/bundle.mjs

@@ -10,6 +10,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const sdkEntrypoint = resolve(__dirname, '../src/index.ts');
 const emojiEntrypoint = resolve(__dirname, '../src/plugins/Emojis/index.ts');
 const mp3EncoderEntrypoint = resolve(__dirname, '../src/plugins/encoders/mp3.ts');
+const experimentalEntrypoint = resolve(__dirname, '../src/experimental/index.ts');
 const outDir = resolve(__dirname, '../dist');
 
 // Those dependencies are distributed as ES modules, and cannot be externalized
@@ -33,7 +34,7 @@ const external = deps.filter((dep) => !bundledDeps.includes(dep));
 
 /** @type esbuild.BuildOptions */
 const cjsBundleConfig = {
-  entryPoints: [sdkEntrypoint, emojiEntrypoint, mp3EncoderEntrypoint],
+  entryPoints: [sdkEntrypoint, emojiEntrypoint, mp3EncoderEntrypoint, experimentalEntrypoint],
   bundle: true,
   format: 'cjs',
   target: 'es2020',

src/components/Channel/Channel.tsx

@@ -118,6 +118,7 @@ type ChannelPropsForwardedToComponentContext<
   | 'LinkPreviewList'
   | 'LoadingIndicator'
   | 'Message'
+  | 'MessageActions'
   | 'MessageBouncePrompt'
   | 'MessageDeleted'
   | 'MessageListNotifications'
@@ -1226,6 +1227,7 @@ const ChannelInner = <
       LinkPreviewList: props.LinkPreviewList,
       LoadingIndicator: props.LoadingIndicator,
       Message: props.Message,
+      MessageActions: props.MessageActions,
       MessageBouncePrompt: props.MessageBouncePrompt,
       MessageDeleted: props.MessageDeleted,
       MessageListNotifications: props.MessageListNotifications,
@@ -1275,6 +1277,7 @@ const ChannelInner = <
       props.LinkPreviewList,
       props.LoadingIndicator,
       props.Message,
+      props.MessageActions,
       props.MessageBouncePrompt,
       props.MessageDeleted,
       props.MessageListNotifications,

src/components/ChatAutoComplete/ChatAutoComplete.tsx

@@ -10,9 +10,8 @@ import { useComponentContext } from '../../context/ComponentContext';
 import type { CommandResponse, UserResponse } from 'stream-chat';
 
 import type { TriggerSettings } from '../MessageInput/DefaultTriggerProvider';
-
 import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-import { EmojiSearchIndex } from 'components/MessageInput';
+import type { EmojiSearchIndex } from '../MessageInput';
 
 type ObjectUnion<T> = T[keyof T];
 

src/components/Message/MessageOptions.tsx

@@ -95,9 +95,7 @@ const UnMemoizedMessageOptions = <
           <ThreadIcon className='str-chat__message-action-icon' />
         </button>
       )}
-      {shouldShowReactions && (
-        <ReactionSelectorWithButton ReactionIcon={ReactionIcon} theme={theme} />
-      )}
+      {shouldShowReactions && <ReactionSelectorWithButton ReactionIcon={ReactionIcon} />}
     </div>
   );
 };

src/components/Message/MessageSimple.tsx

@@ -70,13 +70,15 @@ const MessageSimpleWithContext = <
     Attachment = DefaultAttachment,
     Avatar = DefaultAvatar,
     EditMessageInput = DefaultEditMessageForm,
+    MessageOptions = DefaultMessageOptions,
+    // TODO: remove this "passthrough" in the next
+    // major release and use the new default instead
+    MessageActions = MessageOptions,
     MessageDeleted = DefaultMessageDeleted,
     MessageBouncePrompt = DefaultMessageBouncePrompt,
-    MessageOptions = DefaultMessageOptions,
     MessageRepliesCountButton = DefaultMessageRepliesCountButton,
     MessageStatus = DefaultMessageStatus,
     MessageTimestamp = DefaultMessageTimestamp,
-
     ReactionsList = DefaultReactionList,
     PinIndicator,
   } = useComponentContext<StreamChatGenerics>('MessageSimple');
@@ -171,7 +173,7 @@ const MessageSimpleWithContext = <
             onClick={handleClick}
             onKeyUp={handleClick}
           >
-            <MessageOptions />
+            <MessageActions />
             <div className='str-chat__message-reactions-host'>
               {hasReactions && <ReactionsList reverse />}
             </div>

src/components/Message/utils.tsx

@@ -65,7 +65,7 @@ export const MESSAGE_ACTIONS = {
 };
 
 export type MessageActionsArray<T extends string = string> = Array<
-  'delete' | 'edit' | 'flag' | 'mute' | 'pin' | 'quote' | 'react' | 'reply' | T
+  keyof typeof MESSAGE_ACTIONS | T
 >;
 
 // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release

src/components/MessageActions/MessageActions.tsx

@@ -147,7 +147,7 @@ export type MessageActionsWrapperProps = {
   toggleOpen?: () => void;
 };
 
-const MessageActionsWrapper = (props: PropsWithChildren<MessageActionsWrapperProps>) => {
+export const MessageActionsWrapper = (props: PropsWithChildren<MessageActionsWrapperProps>) => {
   const { children, customWrapperClass, inline, toggleOpen } = props;
 
   const defaultWrapperClass = clsx(

src/components/Reactions/ReactionSelectorWithButton.tsx

@@ -8,8 +8,6 @@ import type { IconProps } from '../../types/types';
 type ReactionSelectorWithButtonProps = {
   /* Custom component rendering the icon used in a button invoking reactions selector for a given message. */
   ReactionIcon: React.ComponentType<IconProps>;
-  /* Theme string to be added to CSS class names. */
-  theme: string;
 };
 
 /**
@@ -20,7 +18,6 @@ export const ReactionSelectorWithButton = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >({
   ReactionIcon,
-  theme,
 }: ReactionSelectorWithButtonProps) => {
   const { t } = useTranslationContext('ReactionSelectorWithButton');
   const { isMyMessage, message } = useMessageContext<StreamChatGenerics>('MessageOptions');
@@ -42,7 +39,7 @@ export const ReactionSelectorWithButton = <
       <button
         aria-expanded={dialogIsOpen}
         aria-label={t('aria/Open Reaction Selector')}
-        className={`str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--reactions str-chat__message-reactions-button`}
+        className='str-chat__message-reactions-button'
         data-testid='message-reaction-action'
         onClick={() => dialog?.toggle()}
         ref={buttonRef}

src/components/Threads/hooks/useThreadManagerState.ts

@@ -1,5 +1,6 @@
-import { useChatContext } from 'context';
 import { ThreadManagerState } from 'stream-chat';
+
+import { useChatContext } from '../../../context';
 import { useStateStore } from '../../../store';
 
 export const useThreadManagerState = <T extends readonly unknown[]>(