feat: add recording state to chat screen

app/src/main/java/com/wearconnectivityexample/ui/WearApp.kt

@@ -7,7 +7,6 @@ import androidx.wear.compose.navigation.SwipeDismissableNavHost
 import androidx.wear.compose.navigation.composable
 import androidx.navigation.navArgument
 import com.example.mywearosapp.ui.screens.ChatDetailScreen
-import com.example.wearconnectivityexample.ui.screens.RecordVoiceScreen
 import com.wearconnectivityexample.ui.screens.ChatListScreen
 
 @Composable
@@ -31,16 +30,7 @@ fun WearApp() {
         ) { backStackEntry ->
             val phoneNumber = backStackEntry.arguments?.getString("phoneNumber") ?: ""
             ChatDetailScreen(
-                phoneNumber = phoneNumber,
-                onRecordClick = { navController.navigate("recordVoice") }
-            )
-        }
-        composable("recordVoice") {
-            RecordVoiceScreen(
-                onStopRecording = {
-                    // Go back to the previous screen, or handle differently
-                    navController.popBackStack()
-                }
+                phoneNumber = phoneNumber
             )
         }
     }

app/src/main/java/com/wearconnectivityexample/ui/screens/ChatDetailScreen.kt

@@ -5,19 +5,20 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Mic
 import androidx.compose.material3.Surface
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.*
 import androidx.wear.compose.material.Text
+import com.example.wearconnectivityexample.ui.screens.RecordVoiceScreen
 
 @Composable
 fun ChatDetailScreen(
-    phoneNumber: String,
-    onRecordClick: () -> Unit
+    phoneNumber: String
 ) {
+    var isRecording by remember { mutableStateOf(false) }
     val listState = rememberScalingLazyListState()
     val messageList = listOf("Hello, How are you?", "I'm good. And you?", "I'm great. What did you do today?")
 
@@ -54,10 +55,35 @@ fun ChatDetailScreen(
                 }
             }
 
+            if (isRecording) {
+                item {
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 0.dp, vertical = 4.dp),
+                        horizontalArrangement = Arrangement.End
+                    ) {
+                        Surface(
+                            shape = RoundedCornerShape(16.dp),
+                            color = Color(0xFF97B1DA),
+                            modifier = Modifier
+                                .wrapContentWidth()
+                                .padding(0.dp)
+                        ) {
+                            Text(
+                                text = "Recording...",
+                                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                                color = Color.Black
+                            )
+                        }
+                    }
+                }
+            }
+
             item {
                 // Record button at the bottom
                 Button(
-                    onClick = onRecordClick,
+                    onClick = { isRecording = true },
                     modifier = Modifier
                         .align(Alignment.BottomCenter)
                         .padding(bottom = 20.dp)
@@ -69,5 +95,9 @@ fun ChatDetailScreen(
                 }
             }
         }
+
+        if (isRecording) {
+            RecordVoiceScreen(onStopRecording = { isRecording = false })
+        }
     }
 }