fun MessageList(viewModel: MessageListViewModel, modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues(vertical = 16.dp), messagesLazyListState: MessagesLazyListState = rememberMessageListState(parentMessageId = viewModel.currentMessagesState.parentMessageId), threadMessagesStart: ThreadMessagesStart = ThreadMessagesStart.BOTTOM, onThreadClick: (Message) -> Unit = { viewModel.openMessageThread(it) }, onLongItemClick: (Message) -> Unit = { viewModel.selectMessage(it) }, onReactionsClick: (Message) -> Unit = { viewModel.selectReactions(it) }, onMessagesPageStartReached: () -> Unit = { viewModel.loadOlderMessages() }, onLastVisibleMessageChanged: (Message) -> Unit = { viewModel.updateLastSeenMessage(it) }, onScrollToBottom: () -> Unit = { viewModel.clearNewMessageState() }, onGiphyActionClick: (GiphyAction) -> Unit = { viewModel.performGiphyAction(it) }, onQuotedMessageClick: (Message) -> Unit = { message ->
viewModel.scrollToMessage(
messageId = message.id,
parentMessageId = message.parentId,
)
}, onMediaGalleryPreviewResult: (MediaGalleryPreviewResult?) -> Unit = {
if (it?.resultType == MediaGalleryPreviewResultType.SHOW_IN_CHAT) {
viewModel.scrollToMessage(
messageId = it.messageId,
parentMessageId = it.parentMessageId,
)
}
}, onMessagesPageEndReached: (String) -> Unit = { viewModel.onBottomEndRegionReached(it) }, onScrollToBottomClicked: (() -> Unit) -> Unit = { viewModel.scrollToBottom(scrollToBottom = it) }, loadingContent: @Composable () -> Unit = { DefaultMessageListLoadingIndicator(modifier) }, emptyContent: @Composable () -> Unit = { DefaultMessageListEmptyContent(modifier) }, helperContent: @Composable BoxScope.() -> Unit = {
DefaultMessagesHelperContent(
messagesState = viewModel.currentMessagesState,
messagesLazyListState = messagesLazyListState,
scrollToBottom = onScrollToBottomClicked,
)
}, loadingMoreContent: @Composable () -> Unit = { DefaultMessagesLoadingMoreIndicator() }, itemContent: @Composable (MessageListItemState) -> Unit = { messageListItem ->
DefaultMessageContainer(
messageListItemState = messageListItem,
onMediaGalleryPreviewResult = onMediaGalleryPreviewResult,
onThreadClick = onThreadClick,
onLongItemClick = onLongItemClick,
onReactionsClick = onReactionsClick,
onGiphyActionClick = onGiphyActionClick,
onQuotedMessageClick = onQuotedMessageClick,
)
}) Default MessageList component, that relies on MessageListViewModel to connect all the data handling operations. It also delegates events to the ViewModel to handle, like long item clicks and pagination.
Parameters
The ViewModel that stores all the data and business logic required to show a list of messages. The user has to provide one in this case, as we require the channelId to start the operations.
Padding values to be applied to the message list surrounding the content inside.
State of the lazy list that represents the list of messages. Useful for controlling the scroll state and focused message offset.
Handler when the user taps on the message, while there's a thread going.
Handler for when the user long taps on a message and selects it.
Handler when the user taps on message reactions and selects them.
onMessagesPageStartReached
Handler for pagination when the end of the oldest messages has been reached.
onLastVisibleMessageChanged
Handler that notifies us when the user scrolls and the last visible message changes.
Handler when the user reaches the bottom.
Handler when the user clicks on a giphy action such as shuffle, send or cancel.
Handler for quoted message click action.
onMediaGalleryPreviewResult
Handler when the user selects an option in the Media Gallery Preview screen.
Handler for pagination when the end of newest messages have been reached.
Handler when the user requests to scroll to the bottom of the messages list.
Composable that represents the loading content, when we're loading the initial data.
Composable that represents the empty content if there are no messages.
Composable that, by default, represents the helper content featuring scrolling behavior based on the list state.
Composable that represents the loading more content, when we're loading the next page.
Composable that represents each item in a list. By default, we provide the MessageContainer which sets up different message types. Users can override this to provide fully custom UI and behavior.
fun MessageList(currentState: MessageListState, threadMessagesStart: ThreadMessagesStart = ThreadMessagesStart.BOTTOM, modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues(vertical = 16.dp), messagesLazyListState: MessagesLazyListState = rememberMessageListState(parentMessageId = currentState.parentMessageId), onMessagesPageStartReached: () -> Unit = {}, onLastVisibleMessageChanged: (Message) -> Unit = {}, onScrolledToBottom: () -> Unit = {}, onThreadClick: (Message) -> Unit = {}, onLongItemClick: (Message) -> Unit = {}, onReactionsClick: (Message) -> Unit = {}, onMediaGalleryPreviewResult: (MediaGalleryPreviewResult?) -> Unit = {}, onGiphyActionClick: (GiphyAction) -> Unit = {}, onQuotedMessageClick: (Message) -> Unit = {}, onMessagesPageEndReached: (String) -> Unit = {}, onScrollToBottom: (() -> Unit) -> Unit = {}, loadingContent: @Composable () -> Unit = { DefaultMessageListLoadingIndicator(modifier) }, emptyContent: @Composable () -> Unit = { DefaultMessageListEmptyContent(modifier) }, helperContent: @Composable BoxScope.() -> Unit = {
DefaultMessagesHelperContent(
messagesState = currentState,
messagesLazyListState = messagesLazyListState,
scrollToBottom = onScrollToBottom,
)
}, loadingMoreContent: @Composable () -> Unit = { DefaultMessagesLoadingMoreIndicator() }, itemModifier: (index: Int, item: MessageListItemState) -> Modifier = { _, _ ->
Modifier
}, itemContent: @Composable (MessageListItemState) -> Unit = {
DefaultMessageContainer(
messageListItemState = it,
onLongItemClick = onLongItemClick,
onThreadClick = onThreadClick,
onReactionsClick = onReactionsClick,
onGiphyActionClick = onGiphyActionClick,
onMediaGalleryPreviewResult = onMediaGalleryPreviewResult,
onQuotedMessageClick = onQuotedMessageClick,
)
}) Clean representation of the MessageList that is decoupled from ViewModels. This components allows users to connect the UI to their own data providers, as it relies on pure state.
Parameters
Padding values to be applied to the message list surrounding the content inside.
State of the lazy list that represents the list of messages. Useful for controlling the scroll state and focused message offset.
onMessagesPageStartReached
onLastVisibleMessageChanged
Handler that notifies us when the user scrolls and the last visible message changes.
Handler when the user scrolls to the bottom.
Handler for when the user taps on a message with an active thread.
Handler for when the user long taps on an item.
Handler when the user taps on message reactions and selects them.
onMediaGalleryPreviewResult
Handler when the user selects an option in the Media Gallery Preview screen.
Handler when the user clicks on a giphy action such as shuffle, send or cancel.
Handler for quoted message click action.
Handler for pagination when the end of newest messages have been reached.
Handler when the user requests to scroll to the bottom of the messages list.
Composable that represents the loading content, when we're loading the initial data.
Composable that represents the empty content if there are no messages.
Composable that, by default, represents the helper content featuring scrolling behavior based on the list state.
Composable that represents the loading more content, when we're loading the next page.
Modifier for styling the item container.
Composable that represents each item in the list, that the user can override for custom UI and behavior.