# Message Actions The `MessageActions` component allows you to show different message options to the user when they select a message in the `MessageList`. This is usually done by long tapping on a message item. Internally, it sets up the following content: - **Header**: Shows a row of reactions the user can use to react to the message. The visibility of reaction options is controlled by `ChatTheme.config.messageActions.reactionsEnabled` and the user's `SEND_REACTION` capability. - **Message preview**: Shows the selected message in a centered pop-out bubble. - **Options**: Shows a list of actions the user can take with the selected message, such as **delete**, **edit**, **reply to**, **flag**, **copy**, **pin** and **start a thread**. Let's see how to use it. ## Usage If you're using [`ChannelScreen`](/chat/docs/sdk/android/v7/compose/message-components/channel-screen/), `MessageActions` is already set up for you. To use `MessageActions` in your custom screens, simply add it to your UI, like so: ```kotlin // The rest of your UI if (selectedMessageState is SelectedMessageOptionsState) { val selectedMessage = selectedMessageState.message MessageActions( modifier = Modifier.align(Alignment.BottomCenter), // Define your message options messageOptions = defaultMessageOptionsState( selectedMessage = selectedMessage, currentUser = user, isInThread = listViewModel.isInThread, channel = channel, ), // The message you selected message = selectedMessage, // The capabilities the user has in a given channel ownCapabilities = selectedMessageState.ownCapabilities, onMessageAction = { action -> // Handle message action }, onShowMoreReactionsSelected = { // Handle show more reactions button click }, onDismiss = { // Handle dismiss } ) } ``` As you can see, showing the menu is very simple. If the `selectedMessageState` is an instance of `SelectedMessageOptionsState`, you pass in the message options you want to expose to the user, as well as the selected message. The reactions you show are taken from the [`ChatTheme`](/chat/docs/sdk/android/v7/compose/general-customization/chat-theme/) component and everything else required to show the component is taken care of internally. This produces the following UI: ![Default MessageActions component](@chat-sdk/android/v7-latest/_assets/compose_default_message_actions.png) The component shows reactions from the [`ChatTheme`](/chat/docs/sdk/android/v7/compose/general-customization/chat-theme/) on the top, followed by the message actions you passed in. The menu overlay has a darker background and tapping it will dismiss the component, as will pressing the system back button. ## Handling Actions `MessageActions` exposes the following actions as parameters: ```kotlin @Composable fun MessageActions( ..., // State and styling onMessageAction: (MessageAction) -> Unit, onShowMoreReactionsSelected: () -> Unit, onDismiss: () -> Unit = {}, ) ``` - `onMessageAction`: Handler used when the user triggers any message action, such as **reply**, **edit**, **delete**, **react** and others. - `onShowMoreReactionsSelected`: Handler used when the show more reactions button is clicked. - `onDismiss`: Handler used when the component is dismissed by clicking outside of the component UI or pressing the system back button. To handle these actions, you can override them like so: ```kotlin if (selectedMessageState is SelectedMessageOptionsState) { MessageActions( ..., // State and options onMessageAction = { action -> composerViewModel.performMessageAction(action) listViewModel.performMessageAction(action) }, onShowMoreReactionsSelected = { listViewModel.selectExtendedReactions(selectedMessage) }, onDismiss = { listViewModel.removeOverlay() } ) } ``` In the snippet above, you propagate the `action` to the `composerViewModel` and `listViewModel`, for them to store the latest action. This will update the UI accordingly. Alternatively, you call `listViewModel.removeOverlay()` to remove the overlay from the screen in `onDismiss()`. It's important to note that `onMessageAction()` calls `removeOverlay()` internally to hide the overlay. Next, let's see how to customize the menu. ## Customization You can customize the `MessageActions` component using the following parameters: ```kotlin @Composable fun MessageActions( message: Message, messageOptions: List, ownCapabilities: Set, onMessageAction: (MessageAction) -> Unit, onShowMoreReactionsSelected: () -> Unit, modifier: Modifier = Modifier, currentUser: User? = null, onDismiss: () -> Unit = {}, ) ``` - `message`: The selected message. - `messageOptions`: The available message options within the menu. See [below](#customizing-the-menu-option-list). - `ownCapabilities`: Set of capabilities the user is given for the current channel. For a full list see [ChannelCapabilities](https://github.com/GetStream/stream-chat-android/blob/develop/stream-chat-android-client/src/main/java/io/getstream/chat/android/models/ChannelCapabilities.kt). - `onMessageAction`: Handler for when the user selects a message option. - `onShowMoreReactionsSelected`: Handler for when the user taps the "show more reactions" button. - `modifier`: Modifier for styling the component. - `currentUser`: The currently logged-in user. - `onDismiss`: Handler for when the menu is dismissed. The menu is rendered as a `Dialog` overlay, displaying the message with reactions above and options below. ### Customizing the Menu Option List You can pass `defaultMessageOptionsState()` to the `messageOptions` parameter to get the default actions that we expose in our SDK. This function uses the [`ChatTheme.config.messageActions.optionsVisibility`](/chat/docs/sdk/android/v7/compose/general-customization/chat-theme#chatuiconfig/) property and [own capabilities](/chat/docs/sdk/android/v7/compose/guides/implementing-own-capabilities/) under the hood to control which action is visible to the user. The values that `defaultMessageOptionsState()` gets from `ChatTheme.config.messageActions.optionsVisibility` take precedence over own capabilities, so you can configure `MessageActionsConfig` via `ChatUiConfig` to control which options to show. This is useful when you are using `ChannelScreen`, for example, which sets up `MessageActions` automatically. ```kotlin ChatTheme( config = ChatUiConfig( messageActions = MessageActionsConfig( optionsVisibility = MessageActionsOptionsVisibility( isMarkAsUnreadVisible = false, isCopyTextVisible = false, ), ), ), ) { // Rest of the UI } ``` ### Customizing Reactions Reactions are resolved from [`ChatTheme.reactionResolver`](/chat/docs/sdk/android/v7/compose/general-customization/chat-theme#reactionresolver/). To customize reactions, override `ChatTheme.reactionResolver` with your own implementation of `ReactionResolver` so that all components wrapped inside `ChatTheme` draw from the same source. You can also control the reaction list visibility by setting `reactionsEnabled` in `MessageActionsConfig`: ```kotlin ChatTheme( config = ChatUiConfig( messageActions = MessageActionsConfig(reactionsEnabled = false), ), ) { // Your UI content } ``` ### Customizing the Appearance To customize the appearance of the `MessageActions` overlay, override the corresponding methods in `ChatComponentFactory`: - `MessageActions()` — Controls the overall menu rendering. - `MessageActionsHeader()` — Customizes the header (reaction options). - `MessageActionsOptions()` — Customizes the message options list. See the [Component Factory](/chat/docs/sdk/android/v7/compose/general-customization/component-factory/) page for details on overriding these methods. --- This page was last updated at 2026-04-14T15:35:13.744Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v7/compose/message-components/message-actions/](https://getstream.io/chat/docs/sdk/android/v7/compose/message-components/message-actions/).