Add a text field to send messages

app/src/main/java/dev/lonami/talaria/ui/ChatScreen.kt

@@ -1,19 +1,22 @@
 package dev.lonami.talaria.ui
 
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.Button
 import androidx.compose.material.Card
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.material.TextField
-import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.*
-import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import dev.lonami.talaria.R
 import dev.lonami.talaria.model.Message
 import dev.lonami.talaria.ui.theme.TalariaTheme
 
@@ -37,16 +40,53 @@ fun MessageCard(message: Message) {
 }
 
 @Composable
-fun MessageList(messages: List<Message>) {
+fun MessageList(messages: List<Message>, modifier: Modifier) {
-    LazyColumn {
+    LazyColumn(modifier) {
         items(messages.size) { MessageCard(messages[it]) }
     }
 }
 
+@Composable
+fun MessageInputField(
+    messageText: String,
+    onMessageChanged: (String) -> Unit,
+    onSendMessage: () -> Unit
+) {
+    Row {
+        TextField(
+            messageText,
+            placeholder = { Text(stringResource(R.string.write_message)) },
+            keyboardOptions = KeyboardOptions(
+                imeAction = ImeAction.Send
+            ),
+            keyboardActions = KeyboardActions(
+                onDone = { onSendMessage() }
+            ),
+            modifier = Modifier.weight(1.0f),
+            onValueChange = onMessageChanged
+        )
+        Button(
+            onClick = onSendMessage
+        ) {
+            Text(stringResource(R.string.send_message))
+        }
+    }
+}
+
 @Composable
 fun ChatScreen(chatViewModel: ChatViewModel = viewModel()) {
     val chatUiState by chatViewModel.uiState.collectAsState()
-    MessageList(chatUiState.messages)
+    var messageText by remember { mutableStateOf("") }
+
+    Column(modifier = Modifier.fillMaxSize()) {
+        MessageList(chatUiState.messages, modifier = Modifier.weight(1.0f))
+        MessageInputField(messageText, onMessageChanged = {
+            messageText = it
+        }, onSendMessage = {
+            chatViewModel.sendMessage(messageText)
+            messageText = ""
+        })
+    }
 }
 
 @Preview

app/src/main/java/dev/lonami/talaria/ui/ChatUiState.kt

@@ -2,4 +2,4 @@ package dev.lonami.talaria.ui
 
 import dev.lonami.talaria.model.Message
 
-data class ChatUiState(val messages: List<Message> = listOf())
+data class ChatUiState(val messages: MutableList<Message> = mutableListOf())

app/src/main/java/dev/lonami/talaria/ui/ChatViewModel.kt

@@ -2,6 +2,7 @@ package dev.lonami.talaria.ui
 
 import androidx.lifecycle.ViewModel
 import dev.lonami.talaria.data.MessageSource
+import dev.lonami.talaria.model.Message
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -11,7 +12,11 @@ class ChatViewModel : ViewModel() {
     val uiState: StateFlow<ChatUiState> = _uiState.asStateFlow()
 
     private fun loadMessages() {
-        _uiState.value = ChatUiState(MessageSource.loadMessages())
+        _uiState.value = ChatUiState(MessageSource.loadMessages().toMutableList())
+    }
+
+    fun sendMessage(message: String) {
+        _uiState.value.messages.add(Message("You", message))
     }
 
     init {

app/src/main/res/values/strings.xml

@@ -10,4 +10,6 @@
     <string name="otp_example">12345</string>
     <string name="do_login">Login</string>
     <string name="profile_photo">Profile Picture</string>
+    <string name="write_message">Write a message…</string>
+    <string name="send_message">Send</string>
 </resources>