Customizing Message Actions in React - Chat – getstream.io

This guide will familiarize you with the messageActions prop and allow you to customize the available actions on a message.

By default, messages in a MessageList component will have 'actions' that a channel member can perform on a message ('edit', 'delete', 'flag', 'mute', 'pin', 'react', 'reply', 'quote').

You're able to customize the availability of these actions in the MessageList component by taking advantage of the messageActions prop. This prop takes an array that can include any of the actions listed above.

By default...

- If a member has the role of 'admin', all of the above actions will be available.

- If a member has the role of 'user', they will have the options to flag, mute, reply, quote, and react.

In the case that you want to customize these actions, you can pass the messageActions prop an array.

In the case you want to customize actions based on the user role, a good practice is to create a function that conditionally returns the desired array of actions depending on the role.

const getMessageActions = () => {
  if (client.user.role === "admin") {
    return ["delete", "flag", "mute", "pin", "react", "reply"];
  }

  if (client.user.role === "user") {
    return ["flag", "mute"];
  }
};

In your MessageList component...

<MessageList messageActions={getMessageActions()}/>

Say, you want to disable the flag option in threaded replies. You can customize the thread message actions by doing something like this:

const threadMessageActions = 
  ['edit', 'delete', 'mute', 'pin', 'quote', 'react', 'reply'];

<Thread additionalMessageListProps={{ messageActions: threadMessageActions }} />

Create an array of the actions you want allowed on the thread and then pass as additionalMessageListProps

The default message actions value is the above array plus flag

As of stream-chat-react v6, you may also create your own custom actions using the customMessageActions prop. You can find more here at the React Chat Docs.

Related articles