ui: show device RAM usage in the chat screen

shubham0204 · shubham0204 · commit 94d2d05136bc · 2025-05-16T08:07:02.000+05:30
- add a new method getCurrentRAMUsage() in the ChatScreenViewModel which uses the ActivityManager API to get the current MemoryInfo

- Add a new dropdown menu item which toggles the visibility of the RAM usage label
diff --git a/app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatActivity.kt b/app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatActivity.kt
@@ -110,6 +110,7 @@ import io.shubham0204.smollmandroid.ui.screens.chat.ChatScreenViewModel.ModelLoa
 import io.shubham0204.smollmandroid.ui.screens.manage_tasks.ManageTasksActivity
 import io.shubham0204.smollmandroid.ui.screens.manage_tasks.TasksList
 import io.shubham0204.smollmandroid.ui.theme.SmolLMAndroidTheme
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import org.koin.android.ext.android.inject
 
@@ -305,6 +306,7 @@ private fun ColumnScope.ScreenUI(
     currChat: Chat,
 ) {
     val isGeneratingResponse by viewModel.isGeneratingResponse.collectAsStateWithLifecycle()
+    RAMUsageLabel(viewModel)
     MessagesList(
         viewModel,
         isGeneratingResponse,
@@ -316,6 +318,30 @@ private fun ColumnScope.ScreenUI(
     )
 }
 
+@Composable
+private fun RAMUsageLabel(viewModel: ChatScreenViewModel) {
+    val showRAMUsageLabel by viewModel.showRAMUsageLabel.collectAsStateWithLifecycle()
+    val context = LocalContext.current
+    var labelText by remember { mutableStateOf("") }
+    LaunchedEffect(showRAMUsageLabel) {
+        if (showRAMUsageLabel) {
+            while (true) {
+                val (used, total) = viewModel.getCurrentMemoryUsage()
+                labelText = context.getString(R.string.label_device_ram).format(used, total)
+                delay(3000L)
+            }
+        }
+    }
+    if (showRAMUsageLabel) {
+        Text(
+            labelText,
+            style = MaterialTheme.typography.labelSmall,
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
 @Composable
 private fun ColumnScope.MessagesList(
     viewModel: ChatScreenViewModel,
diff --git a/app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatMoreOptionsPopup.kt b/app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatMoreOptionsPopup.kt
@@ -17,21 +17,29 @@
 package io.shubham0204.smollmandroid.ui.screens.chat
 
 import android.widget.Toast
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ShortText
 import androidx.compose.material.icons.filled.Assistant
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.Folder
+import androidx.compose.material.icons.filled.Memory
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import io.shubham0204.smollmandroid.R
 import io.shubham0204.smollmandroid.ui.components.createAlertDialog
@@ -42,46 +50,39 @@ fun ChatMoreOptionsPopup(
     onEditChatSettingsClick: () -> Unit,
 ) {
     val expanded by viewModel.showMoreOptionsPopupState.collectAsStateWithLifecycle()
+    val showRAMUsageLabel by viewModel.showRAMUsageLabel.collectAsStateWithLifecycle()
     val context = LocalContext.current
     DropdownMenu(
         expanded = expanded,
         onDismissRequest = { viewModel.hideMoreOptionsPopup() },
     ) {
         DropdownMenuItem(
             leadingIcon = { Icon(Icons.Default.Settings, contentDescription = "Edit Chat Name") },
-            text = { Text(stringResource(R.string.chat_options_edit_settings)) },
+            text = { Text(stringResource(R.string.chat_options_edit_settings), style = MaterialTheme.typography.labelMedium) },
             onClick = {
                 onEditChatSettingsClick()
                 viewModel.hideMoreOptionsPopup()
             },
         )
         DropdownMenuItem(
             leadingIcon = { Icon(Icons.Default.Folder, contentDescription = "Change Folder") },
-            text = { Text(stringResource(R.string.chat_options_change_folder)) },
+            text = { Text(stringResource(R.string.chat_options_change_folder), style = MaterialTheme.typography.labelMedium) },
             onClick = {
                 viewModel.showChangeFolderDialog()
                 viewModel.hideMoreOptionsPopup()
             },
         )
         DropdownMenuItem(
             leadingIcon = { Icon(Icons.Default.Assistant, contentDescription = "Change Model") },
-            text = { Text(stringResource(R.string.chat_options_change_model)) },
+            text = { Text(stringResource(R.string.chat_options_change_model), style = MaterialTheme.typography.labelMedium) },
             onClick = {
                 viewModel.showSelectModelListDialog()
                 viewModel.hideMoreOptionsPopup()
             },
         )
-        DropdownMenuItem(
-            leadingIcon = { Icon(Icons.AutoMirrored.Filled.ShortText, contentDescription = "Context Usage") },
-            text = { Text(stringResource(R.string.chat_options_ctx_length_usage)) },
-            onClick = {
-                viewModel.showContextLengthUsageDialog()
-                viewModel.hideMoreOptionsPopup()
-            },
-        )
         DropdownMenuItem(
             leadingIcon = { Icon(Icons.Default.Delete, contentDescription = "Delete Chat") },
-            text = { Text(stringResource(R.string.dialog_title_delete_chat)) },
+            text = { Text(stringResource(R.string.dialog_title_delete_chat), style = MaterialTheme.typography.labelMedium) },
             onClick = {
                 viewModel.currChatState.value?.let { chat ->
                     createAlertDialog(
@@ -106,7 +107,7 @@ fun ChatMoreOptionsPopup(
         )
         DropdownMenuItem(
             leadingIcon = { Icon(Icons.Default.Clear, contentDescription = "Clear Chat Messages") },
-            text = { Text(stringResource(R.string.chat_options_clear_messages)) },
+            text = { Text(stringResource(R.string.chat_options_clear_messages), style = MaterialTheme.typography.labelMedium) },
             onClick = {
                 viewModel.currChatState.value?.let { chat ->
                     createAlertDialog(
@@ -129,5 +130,29 @@ fun ChatMoreOptionsPopup(
                 viewModel.hideMoreOptionsPopup()
             },
         )
+        Spacer(modifier = Modifier.height(4.dp))
+        HorizontalDivider(modifier = Modifier.fillMaxWidth())
+        Spacer(modifier = Modifier.height(4.dp))
+        DropdownMenuItem(
+            leadingIcon = { Icon(Icons.AutoMirrored.Filled.ShortText, contentDescription = "Context Usage") },
+            text = { Text(stringResource(R.string.chat_options_ctx_length_usage), style = MaterialTheme.typography.labelMedium) },
+            onClick = {
+                viewModel.showContextLengthUsageDialog()
+                viewModel.hideMoreOptionsPopup()
+            },
+        )
+        DropdownMenuItem(
+            leadingIcon = { Icon(Icons.Default.Memory, contentDescription = "RAM Usage") },
+            text = {
+                Text(
+                    if (showRAMUsageLabel) "Hide RAM usage" else "Show RAM usage",
+                    style = MaterialTheme.typography.labelMedium,
+                )
+            },
+            onClick = {
+                viewModel.toggleRAMUsageLabelVisibility()
+                viewModel.hideMoreOptionsPopup()
+            },
+        )
     }
 }
diff --git a/app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatScreenViewModel.kt b/app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatScreenViewModel.kt
@@ -17,6 +17,8 @@
 package io.shubham0204.smollmandroid.ui.screens.chat
 
 import android.annotation.SuppressLint
+import android.app.ActivityManager
+import android.app.ActivityManager.MemoryInfo
 import android.content.Context
 import android.graphics.Color
 import android.text.util.Linkify
@@ -48,7 +50,9 @@ import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import org.koin.android.annotation.KoinViewModel
+import java.lang.Math.pow
 import java.util.Date
+import kotlin.math.pow
 
 private const val LOGTAG = "[SmolLMAndroid-Kt]"
 private val LOGD: (String) -> Unit = { Log.d(LOGTAG, it) }
@@ -92,6 +96,9 @@ class ChatScreenViewModel(
     private val _showTaskListBottomListState = MutableStateFlow(false)
     val showTaskListBottomListState: StateFlow<Boolean> = _showTaskListBottomListState
 
+    private val _showRAMUsageLabel = MutableStateFlow(false)
+    val showRAMUsageLabel: StateFlow<Boolean> = _showRAMUsageLabel
+
     // Used to pre-set a value in the query text-field of the chat screen
     // It is set when a query comes from a 'share-text' intent in ChatActivity
     var questionTextDefaultVal: String? = null
@@ -103,8 +110,11 @@ class ChatScreenViewModel(
     var responseGenerationTimeSecs: Int? = null
     val markwon: Markwon
 
+    private var activityManager: ActivityManager
+
     init {
         _currChatState.value = appDB.loadDefaultChat()
+        activityManager = context.getSystemService(Context.ACTIVITY_SERVICE) as ActivityManager
         val prism4j = Prism4j(PrismGrammarLocator())
         markwon =
             Markwon
@@ -331,6 +341,19 @@ class ChatScreenViewModel(
             false
         }
 
+    /**
+     * Get the current memory usage of the device.
+     * This method returns the memory consumed (in GBs) and the total
+     * memory available on the device (in GBs)
+     */
+    fun getCurrentMemoryUsage(): Pair<Float, Float> {
+        val memoryInfo = MemoryInfo()
+        activityManager.getMemoryInfo(memoryInfo)
+        val totalMemory = (memoryInfo.totalMem) / 1024.0.pow(3.0)
+        val usedMemory = (memoryInfo.availMem) / 1024.0.pow(3.0)
+        return Pair(usedMemory.toFloat(), totalMemory.toFloat())
+    }
+
     @SuppressLint("StringFormatMatches")
     fun showContextLengthUsageDialog() {
         _currChatState.value?.let { chat ->
@@ -381,4 +404,8 @@ class ChatScreenViewModel(
     fun hideTaskListBottomList() {
         _showTaskListBottomListState.value = false
     }
+
+    fun toggleRAMUsageLabelVisibility() {
+        _showRAMUsageLabel.value = !_showRAMUsageLabel.value
+    }
 }
diff --git a/app/src/main/res/values-zh-rCN/strings.xml b/app/src/main/res/values-zh-rCN/strings.xml
@@ -116,4 +116,5 @@
     <string name="dialog_edit_folder_name_title">编辑文件夹名称</string>
     <string name="dialog_edit_folder_button_text">编辑</string>
     <string name="edit_chat_message_done">完成</string>
+    <string name="label_device_ram">设备内存：%.2f GB 已用，总计 %.2f GB</string>
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -101,4 +101,5 @@
     <string name="dialog_edit_folder_name_title">Edit Folder Name</string>
     <string name="dialog_edit_folder_button_text">Edit</string>
     <string name="edit_chat_message_done">Done</string>
+    <string name="label_device_ram">Device RAM: %.2f GB used of %.2f GB total</string>
 </resources>
