Activity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        // Calling our Refactored function
        ChatScreen(SampleListData.conversationSample)
    }
}
@Composable
private fun ChatScreen(messages: List<Message>) {
    LazyColumn {
        items(messages.size) { index ->
            ChatCard(name = messages[index].title)
        }
    }
}
@Composable
private fun ChatCard(title: String, body: String) {
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 8.dp,
        modifier = Modifier.padding(all = 8.dp)
    ) {
        Row(modifier = Modifier.padding(all = 8.dp)) {
            Image(
                painter = painterResource(
                    id = R.drawable.ic_launcher_background
                ), contentDescription = "Some cool image",
                // Image Modifier
                modifier = Modifier
                    // Set image size to 40 dp
                    .size(48.dp)
                    // Clip image to be shaped as a circle
                    .clip(CircleShape)
                    .border(1.dp, MaterialTheme.colors.secondary, CircleShape)
            )

            Spacer(modifier = Modifier.width(8.dp))

            Column {
                Text(text = title, style = MaterialTheme.typography.subtitle2)
                // Adding a vertical space
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = body,
                    color = MaterialTheme.colors.secondaryVariant,
                    style = MaterialTheme.typography.body2
                )
            }

        }
    }
}