MessageComposer

fun MessageComposer(viewModel: MessageComposerViewModel, modifier: Modifier = Modifier, onSendMessage: (Message) -> Unit = { viewModel.sendMessage(it) }, onAttachmentsClick: () -> Unit = {}, onCommandsClick: () -> Unit = {}, onValueChange: (String) -> Unit = { viewModel.setMessageInput(it) }, onAttachmentRemoved: (Attachment) -> Unit = { viewModel.removeSelectedAttachment(it) }, onCancelAction: () -> Unit = { viewModel.dismissMessageActions() }, onLinkPreviewClick: (LinkPreview) -> Unit? = null, onMentionSelected: (User) -> Unit = { viewModel.selectMention(it) }, onCommandSelected: (Command) -> Unit = { viewModel.selectCommand(it) }, onAlsoSendToChannelSelected: (Boolean) -> Unit = { viewModel.setAlsoSendToChannel(it) }, recordingActions: AudioRecordingActions = AudioRecordingActions.defaultActions(viewModel), headerContent: @Composable ColumnScope.(MessageComposerState) -> Unit = { DefaultMessageComposerHeaderContent( messageComposerState = it, onCancelAction = onCancelAction, onLinkPreviewClick = onLinkPreviewClick, ) }, footerContent: @Composable ColumnScope.(MessageComposerState) -> Unit = { DefaultMessageComposerFooterContent( messageComposerState = it, onAlsoSendToChannelSelected = onAlsoSendToChannelSelected, ) }, mentionPopupContent: @Composable (List<User>) -> Unit = { DefaultMentionPopupContent( mentionSuggestions = it, onMentionSelected = onMentionSelected, ) }, commandPopupContent: @Composable (List<Command>) -> Unit = { DefaultCommandPopupContent( commandSuggestions = it, onCommandSelected = onCommandSelected, ) }, integrations: @Composable RowScope.(MessageComposerState) -> Unit = { DefaultComposerIntegrations( messageInputState = it, onAttachmentsClick = onAttachmentsClick, onCommandsClick = onCommandsClick, ownCapabilities = it.ownCapabilities, ) }, label: @Composable (MessageComposerState) -> Unit = { DefaultComposerLabel(it.ownCapabilities) }, input: @Composable RowScope.(MessageComposerState) -> Unit = { DefaultComposerInputContent( messageComposerState = it, onValueChange = onValueChange, onAttachmentRemoved = onAttachmentRemoved, label = label, ) }, audioRecordingContent: @Composable RowScope.(MessageComposerState) -> Unit = { DefaultMessageComposerRecordingContent( messageComposerState = it, recordingActions = recordingActions, ) }, trailingContent: @Composable (MessageComposerState) -> Unit = { DefaultMessageComposerTrailingContent( messageComposerState = it, onSendMessage = { input, attachments -> val message = viewModel.buildNewMessage(input, attachments) onSendMessage(message) }, recordingActions = recordingActions, ) })

Default MessageComposer component that relies on MessageComposerViewModel to handle data and communicate various events.

Parameters

viewModel

The ViewModel that provides pieces of data to show in the composer, like the currently selected integration data or the user input. It also handles sending messages.

modifier

Modifier for styling.

onSendMessage

Handler when the user sends a message. By default it delegates this to the ViewModel, but the user can override if they want more custom behavior.

onAttachmentsClick

Handler for the default Attachments integration.

onCommandsClick

Handler for the default Commands integration.

onValueChange

Handler when the input field value changes.

onAttachmentRemoved

Handler when the user taps on the cancel/delete attachment action.

onCancelAction

Handler for the cancel button on Message actions, such as Edit and Reply.

onLinkPreviewClick

Handler when the user taps on a link preview.

onMentionSelected

Handler when the user taps on a mention suggestion item.

onCommandSelected

Handler when the user taps on a command suggestion item.

onAlsoSendToChannelSelected

Handler when the user checks the also send to channel checkbox.

recordingActions

The actions that can be performed on an audio recording.

headerContent

The content shown at the top of the message composer.

footerContent

The content shown at the bottom of the message composer.

mentionPopupContent

Customizable composable that represents the mention suggestions popup.

commandPopupContent

Customizable composable that represents the instant command suggestions popup.

integrations

A view that represents custom integrations. By default, we provide DefaultComposerIntegrations, which show Attachments & Giphy, but users can override this with their own integrations, which they need to hook up to their own data providers and UI.

label

Customizable composable that represents the input field label (hint).

input

Customizable composable that represents the input field for the composer, MessageInput by default.

audioRecordingContent

Customizable composable used for displaying audio recording information while audio recording is in progress.

trailingContent

Customizable composable that represents the trailing content of the composer, send button by default.


fun MessageComposer(messageComposerState: MessageComposerState, onSendMessage: (String, List<Attachment>) -> Unit, modifier: Modifier = Modifier, onAttachmentsClick: () -> Unit = {}, onCommandsClick: () -> Unit = {}, onValueChange: (String) -> Unit = {}, onAttachmentRemoved: (Attachment) -> Unit = {}, onCancelAction: () -> Unit = {}, onLinkPreviewClick: (LinkPreview) -> Unit? = null, onMentionSelected: (User) -> Unit = {}, onCommandSelected: (Command) -> Unit = {}, onAlsoSendToChannelSelected: (Boolean) -> Unit = {}, recordingActions: AudioRecordingActions = AudioRecordingActions.None, headerContent: @Composable ColumnScope.(MessageComposerState) -> Unit = { DefaultMessageComposerHeaderContent( messageComposerState = it, onCancelAction = onCancelAction, onLinkPreviewClick = onLinkPreviewClick, ) }, footerContent: @Composable ColumnScope.(MessageComposerState) -> Unit = { DefaultMessageComposerFooterContent( messageComposerState = it, onAlsoSendToChannelSelected = onAlsoSendToChannelSelected, ) }, mentionPopupContent: @Composable (List<User>) -> Unit = { DefaultMentionPopupContent( mentionSuggestions = it, onMentionSelected = onMentionSelected, ) }, commandPopupContent: @Composable (List<Command>) -> Unit = { DefaultCommandPopupContent( commandSuggestions = it, onCommandSelected = onCommandSelected, ) }, integrations: @Composable RowScope.(MessageComposerState) -> Unit = { DefaultComposerIntegrations( messageInputState = it, onAttachmentsClick = onAttachmentsClick, onCommandsClick = onCommandsClick, ownCapabilities = messageComposerState.ownCapabilities, ) }, label: @Composable (MessageComposerState) -> Unit = { DefaultComposerLabel(messageComposerState.ownCapabilities) }, input: @Composable RowScope.(MessageComposerState) -> Unit = { DefaultComposerInputContent( messageComposerState = messageComposerState, onValueChange = onValueChange, onAttachmentRemoved = onAttachmentRemoved, label = label, ) }, audioRecordingContent: @Composable RowScope.(MessageComposerState) -> Unit = { DefaultMessageComposerRecordingContent( messageComposerState = it, recordingActions = recordingActions, ) }, trailingContent: @Composable (MessageComposerState) -> Unit = { DefaultMessageComposerTrailingContent( messageComposerState = it, onSendMessage = onSendMessage, recordingActions = recordingActions, ) })

Clean version of the MessageComposer that doesn't rely on ViewModels, so the user can provide a manual way to handle and represent data and various operations.

Parameters

messageComposerState

The state of the message input.

onSendMessage

Handler when the user wants to send a message.

modifier

Modifier for styling.

onAttachmentsClick

Handler for the default Attachments integration.

onCommandsClick

Handler for the default Commands integration.

onValueChange

Handler when the input field value changes.

onAttachmentRemoved

Handler when the user taps on the cancel/delete attachment action.

onCancelAction

Handler for the cancel button on Message actions, such as Edit and Reply.

onMentionSelected

Handler when the user taps on a mention suggestion item.

onCommandSelected

Handler when the user taps on a command suggestion item.

onAlsoSendToChannelSelected

Handler when the user checks the also send to channel checkbox.

recordingActions

The actions that can be performed on an audio recording.

headerContent

The content shown at the top of the message composer.

footerContent

The content shown at the bottom of the message composer.

mentionPopupContent

Customizable composable that represents the mention suggestions popup.

commandPopupContent

Customizable composable that represents the instant command suggestions popup.

integrations

A view that represents custom integrations. By default, we provide DefaultComposerIntegrations, which show Attachments & Giphy, but users can override this with their own integrations, which they need to hook up to their own data providers and UI.

label

Customizable composable that represents the input field label (hint).

input

Customizable composable that represents the input field for the composer, MessageInput by default.

audioRecordingContent

Customizable composable used for displaying audio recording information while audio recording is in progress.

trailingContent

Customizable composable that represents the trailing content of the composer, send button by default.