Im building a messaging application using jetpack compose, and I’m trying to align the row a user sends chats to at the bottom. It should sit upon the soft keyboard. I want to avoid whitespace when the soft keyboard appears, so the conversation should not shift up unless it needs to. It should work similar to normal messaging apps. I tried

class MainActivity : ComponentActivity() {

    private val viewModel: MainViewModel by viewModels { ViewModelFactory() }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    conversationState = viewModel.convo.observeAsState().value
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(8.dp)
                    ) {
                        Conversation(
                            modifier = Modifier.weight(1f),
                            messages = conversationState
                        )
                        Spacer(modifier = Modifier.height(8.dp))
                        UserInput { inputStr ->
                            viewModel.onSubmit(inputStr)
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun UserInput(onSend: (String)->Unit) {
    var currentMessage by rememberSaveable { mutableStateOf("") }
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        verticalAlignment = Alignment.Bottom
    ) {
        BasicTextField(
            value = currentMessage,
            onValueChange = { newMessage -> currentMessage = newMessage },
            textStyle = TextStyle(color = Color.Black),
            modifier = Modifier
                .weight(1f)
                .padding(8.dp)
        )
        Button(onClick = {
            onSend(currentMessage)
            currentMessage = ""
        }) {
            Text(text = "Send")
        }
    }
}

2 issues I’m seeing:

My send button is overlapping my soft keyboard. My chats are shifting up even if it can if the kwyboard appears.