fun MessageComposer(viewModel: MessageComposerViewModel, modifier: Modifier = Modifier, statefulStreamMediaRecorder: StatefulStreamMediaRecorder? = null, 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) }, onRecordingSaved: (Attachment) -> Unit = { viewModel.addSelectedAttachments(listOf(it)) }, 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.(StatefulStreamMediaRecorder) -> Unit = {
DefaultMessageComposerAudioRecordingContent(it)
}, trailingContent: @Composable (MessageComposerState) -> Unit = {
DefaultMessageComposerTrailingContent(
value = it.inputValue,
coolDownTime = it.coolDownTime,
validationErrors = it.validationErrors,
attachments = it.attachments,
ownCapabilities = it.ownCapabilities,
isInEditMode = it.action is Edit,
onSendMessage = { input, attachments ->
val message = viewModel.buildNewMessage(input, attachments)
onSendMessage(message)
},
onRecordingSaved = onRecordingSaved,
statefulStreamMediaRecorder = statefulStreamMediaRecorder,
)
}) Default MessageComposer component that relies on MessageComposerViewModel to handle data and communicate various events.
Parameters
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.
statefulStreamMediaRecorder
Used for recording audio messages. Passing in null will disable audio recording.
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.
Handler for the default Attachments integration.
Handler for the default Commands integration.
Handler when the input field value changes.
Handler when the user taps on the cancel/delete attachment action.
Handler for the cancel button on Message actions, such as Edit and Reply.
Handler when the user taps on a link preview.
Handler when the user taps on a mention suggestion item.
Handler when the user taps on a command suggestion item.
onAlsoSendToChannelSelected
Handler when the user checks the also send to channel checkbox.
The content shown at the top of the message composer.
The content shown at the bottom of the message composer.
Customizable composable that represents the mention suggestions popup.
Customizable composable that represents the instant command suggestions popup.
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.
Customizable composable that represents the input field label (hint).
Customizable composable that represents the input field for the composer, MessageInput by default.
Customizable composable used for displaying audio recording information while audio recording is in progress.
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, statefulStreamMediaRecorder: StatefulStreamMediaRecorder? = null, 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 = {}, onRecordingSaved: (Attachment) -> Unit = {}, 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.(StatefulStreamMediaRecorder) -> Unit = {
DefaultMessageComposerAudioRecordingContent(it)
}, trailingContent: @Composable (MessageComposerState) -> Unit = {
DefaultMessageComposerTrailingContent(
value = it.inputValue,
coolDownTime = it.coolDownTime,
validationErrors = it.validationErrors,
attachments = it.attachments,
onSendMessage = onSendMessage,
ownCapabilities = messageComposerState.ownCapabilities,
isInEditMode = it.action is Edit,
onRecordingSaved = onRecordingSaved,
statefulStreamMediaRecorder = statefulStreamMediaRecorder,
)
}) 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
The state of the message input.
Handler when the user wants to send a message.
statefulStreamMediaRecorder
Used for recording audio messages. Passing in null will disable audio recording.
Handler for the default Attachments integration.
Handler for the default Commands integration.
Handler when the input field value changes.
Handler when the user taps on the cancel/delete attachment action.
Handler for the cancel button on Message actions, such as Edit and Reply.
Handler when the user taps on a mention suggestion item.
Handler when the user taps on a command suggestion item.
onAlsoSendToChannelSelected
Handler when the user checks the also send to channel checkbox.
The content shown at the top of the message composer.
The content shown at the bottom of the message composer.
Customizable composable that represents the mention suggestions popup.
Customizable composable that represents the instant command suggestions popup.
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.
Customizable composable that represents the input field label (hint).
Customizable composable that represents the input field for the composer, MessageInput by default.
Customizable composable used for displaying audio recording information while audio recording is in progress.
Customizable composable that represents the trailing content of the composer, send button by default.