stream-chat-android-compose/io.getstream.chat.android.compose.ui.messages.list/MessageList

MessageList

fun MessageList(viewModel: MessageListViewModel, modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues(), messagesLazyListState: MessagesLazyListState = rememberMessageListState(parentMessageId = viewModel.currentMessagesState.value.parentMessageId), verticalArrangement: Arrangement.Vertical = Arrangement.Bottom, threadsVerticalArrangement: Arrangement.Vertical = Arrangement.Bottom, onThreadClick: (Message) -> Unit = { if (viewModel.isInThread) { viewModel.leaveThread() } else { viewModel.openMessageThread(it) } }, onLongItemClick: (Message) -> Unit = { viewModel.selectMessage(it) }, onMessagesPageStartReached: () -> Unit = { viewModel.loadOlderMessages() }, onLastVisibleMessageChanged: (Message) -> Unit = { viewModel.updateLastSeenMessage(it) }, onScrollToBottom: () -> Unit = { viewModel.clearNewMessageState() }, onReply: (Message) -> Unit = {}, 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) }, onPauseAudioRecordingAttachments: () -> Unit = { viewModel.pauseAudioRecordingAttachments() })

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

viewModel

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.

modifier

Modifier for styling.

contentPadding

Padding values to be applied to the message list surrounding the content inside.

messagesLazyListState

State of the lazy list that represents the list of messages. Useful for controlling the scroll state and focused message offset.

verticalArrangement

Vertical arrangement of the regular message list. Default: Arrangement.Bottom.

threadsVerticalArrangement

Vertical arrangement of the thread message list. Default: Arrangement.Bottom.

onThreadClick

Handler when the user taps on the message, while there's a thread going.

onLongItemClick

Handler for when the user long taps on a message and selects it.

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.

onScrollToBottom

Handler when the user reaches the bottom.

onMediaGalleryPreviewResult

Handler when the user selects an option in the Media Gallery Preview screen.

onMessagesPageEndReached

Handler for pagination when the end of newest messages have been reached.

onScrollToBottomClicked

Handler when the user requests to scroll to the bottom of the messages list.

onPauseAudioRecordingAttachments

Handler for lifecycle events.

@Composable

fun MessageList(currentState: MessageListState, verticalArrangement: Arrangement.Vertical = Arrangement.Bottom, threadsVerticalArrangement: Arrangement.Vertical = Arrangement.Bottom, modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues(), messagesLazyListState: MessagesLazyListState = rememberMessageListState(parentMessageId = currentState.parentMessageId), onMessagesPageStartReached: () -> Unit = {}, onLastVisibleMessageChanged: (Message) -> Unit = {}, onScrolledToBottom: () -> Unit = {}, onMessagesPageEndReached: (String) -> Unit = {}, onScrollToBottom: (() -> Unit) -> Unit = {}, onPauseAudioRecordingAttachments: () -> Unit = {}, messageItemParams: (MessageListItemState) -> MessageItemParams = ::MessageItemParams)

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.