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

Code before:
        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))
                    }
                    Column {
                        Row(verticalAlignment = Alignment.Bottom) {
                            Text(
                                text = message.user.name,
                                style = MaterialTheme.typography.h5
                            )
                            Spacer(Modifier.size(10.dp))
                            Text(
                                text = timeToString(message.timeMs),
                                style = MaterialTheme.typography.h6
                            )

Review comment (suggestion):
Can you invert the alignment in the modifier below so that it right-aligns `isMyMessage`? That's how almost all messengers layout their messages.

Code after:
    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) {
                            Text(
                                text = message.user.name,
                                style = MaterialTheme.typography.h5
                            )
                            Spacer(Modifier.size(10.dp))
                            Text(
                                text = timeToString(message.timeMs),
                                style = MaterialTheme.typography.h6
                            )
                        }
                        Text(