Repository: JetBrains/compose-multiplatform
File: experimental/examples/chat-mpp/shared/src/commonMain/kotlin/Messages.kt (Kotlin)

Code before:
import androidx.compose.ui.unit.dp

@Composable
internal inline fun Messages(messages: List<Message>, displayStub: Boolean) {
    val listState = rememberLazyListState()
    if (messages.isNotEmpty()) {
        LaunchedEffect(messages.last()) {
            listState.animateScrollToItem(messages.lastIndex, scrollOffset = 2)
        }
    }
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        state = listState,
    ) {
        messages.forEach { message ->
            item(key = message.id) {
                ChatMessage(isMyMessage = message.user == myUser, message)
            }
        }
        if (displayStub) {
            item {
                // TODO temporary workaround here
                // Stub if temporary workaround for better Compose display with SwiftUI interop
                // For now, Compose view is bigger, then it should be.
                Box(Modifier.height(250.dp))
            }
        }
    }
}

@Composable
private inline fun ChatMessage(isMyMessage: Boolean, message: Message) {
    val focusManager = LocalFocusManager.current
    Box(modifier = Modifier.fillMaxWidth()) {
        Surface(
            modifier = Modifier.padding(4.dp)
                .align(if (isMyMessage) Alignment.CenterStart else Alignment.CenterEnd),
            shape = RoundedCornerShape(size = 20.dp),
            elevation = 8.dp
        ) {
            Box(
                Modifier.background(brush = Brush.horizontalGradient(
                    ChatColors.GRADIENT_2.map { Color(it) })
                ).padding(10.dp),
            ) {
                Row(verticalAlignment = Alignment.Top) {
                    if (isMyMessage) {
                        UserPic(message.user)
                        Spacer(Modifier.size(8.dp))
                    }

Review comment (suggestion):
To make it easier for now, I used a little workaround. It corrects the size of ScrollableView content. In the future, we will calculate the size of Compose View correctly

Code after:
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.unit.dp

@Composable
internal inline fun Messages(messages: List<Message>) {
    val listState = rememberLazyListState()
    if (messages.isNotEmpty()) {
        LaunchedEffect(messages.last()) {
            listState.animateScrollToItem(messages.lastIndex, scrollOffset = 2)
        }
    }
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        state = listState,
    ) {
        messages.forEach { message ->
            item(key = message.id) {
                ChatMessage(isMyMessage = message.user == myUser, message)
            }
        }
        item {
            Box(Modifier.height(50.dp))
        }
    }
}

@Composable
private inline fun ChatMessage(isMyMessage: Boolean, message: Message) {
    val focusManager = LocalFocusManager.current
    Box(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = if (isMyMessage) Alignment.CenterEnd else Alignment.CenterStart
    ) {
        Surface(
            modifier = Modifier.padding(4.dp),
            shape = RoundedCornerShape(size = 20.dp),
            elevation = 8.dp
        ) {
            Box(
                Modifier.background(brush = Brush.horizontalGradient(
                    ChatColors.GRADIENT_2.map { Color(it) })
                ).padding(10.dp),
            ) {
                Row(verticalAlignment = Alignment.Top) {
                    if (!isMyMessage) {
                        UserPic(message.user)
                        Spacer(Modifier.size(8.dp))
                    }
                    Column {
                        Row(verticalAlignment = Alignment.Bottom) {