feature: Add showcase of list models on Android Sample

Author: osugikoji

sample/android/src/main/java/co/yml/ychat/android/di/AppModule.kt

@@ -4,11 +4,13 @@ import co.yml.ychat.YChat
 import co.yml.ychat.android.BuildConfig
 import co.yml.ychat.android.presentation.chatcompletions.viewmodel.ChatCompletionsViewModel
 import co.yml.ychat.android.presentation.home.viewmodel.HomeViewModel
+import co.yml.ychat.android.presentation.models.viewmodel.ModelsViewModel
 import org.koin.androidx.viewmodel.dsl.viewModelOf
 import org.koin.dsl.module
 
 val appModule = module {
     single { YChat.create(BuildConfig.API_KEY) }
     viewModelOf(::HomeViewModel)
     viewModelOf(::ChatCompletionsViewModel)
+    viewModelOf(::ModelsViewModel)
 }

sample/android/src/main/java/co/yml/ychat/android/presentation/models/ModelsScreen.kt

@@ -1,32 +1,78 @@
 package co.yml.ychat.android.presentation.models
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import co.yml.ychat.YChat
+import co.yml.ychat.android.BuildConfig
+import co.yml.ychat.android.presentation.models.viewmodel.ModelsViewModel
+import co.yml.ychat.android.presentation.models.viewmodel.ModelsViewModel.State
 import co.yml.ychat.android.ui.components.feedback.Feedback
 import co.yml.ychat.android.ui.components.feedback.model.FeedbackState
+import co.yml.ychat.android.ui.components.itemmenu.ItemMenu
+import co.yml.ychat.android.ui.theme.Dimens
 import co.yml.ychat.android.ui.theme.YChatTheme
+import co.yml.ychat.domain.model.AIModel
+import org.koin.androidx.compose.getViewModel
 
 @Composable
-internal fun ModelsScreen() {
-    Column(
+internal fun ModelsScreen(viewModel: ModelsViewModel = getViewModel()) {
+    val state = viewModel.state.collectAsState().value
+    Box(
         modifier = Modifier
             .background(YChatTheme.colors.background)
-            .fillMaxHeight(),
-        verticalArrangement = Arrangement.Center,
+            .fillMaxHeight()
+            .fillMaxWidth()
     ) {
-        Feedback(feedbackState = FeedbackState.CONSTRUCTION)
+        when (state) {
+            is State.Loading ->
+                CircularProgressIndicator(
+                    modifier = Modifier.align(Alignment.Center)
+                )
+            is State.Error ->
+                Feedback(
+                    modifier = Modifier.align(Alignment.Center),
+                    feedbackState = FeedbackState.ERROR,
+                    onButtonClick = { viewModel.fetchModels() }
+                )
+            is State.Success ->
+                ModelListContent(state.models)
+        }
+    }
+}
+
+@Composable
+private fun ModelListContent(models: List<AIModel>) {
+    LazyColumn {
+        item { Spacer(modifier = Modifier.padding(top = Dimens.MD)) }
+        items(models) {
+            val enableDivider = models.last() != it
+            ItemMenu(
+                startText = it.id,
+                caption = it.ownedBy,
+                isDividerVisible = enableDivider,
+            )
+        }
     }
 }
 
 @Preview
 @Composable
 private fun ModelsScreenPreview() {
     YChatTheme {
-        ModelsScreen()
+        val yChat = YChat.create(BuildConfig.API_KEY)
+        val viewModel = ModelsViewModel(yChat)
+        ModelsScreen(viewModel)
     }
 }

sample/android/src/main/java/co/yml/ychat/android/presentation/models/viewmodel/ModelsViewModel.kt

@@ -0,0 +1,35 @@
+package co.yml.ychat.android.presentation.models.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import co.yml.ychat.YChat
+import co.yml.ychat.domain.model.AIModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+
+internal class ModelsViewModel(private val yChat: YChat) : ViewModel() {
+
+    private val yChatListModels by lazy { yChat.listModels() }
+
+    private val _state = MutableStateFlow<State>(State.Loading)
+    val state: StateFlow<State> = _state.asStateFlow()
+
+    init {
+        fetchModels()
+    }
+
+    fun fetchModels() = viewModelScope.launch {
+        _state.value = State.Loading
+        runCatching { yChatListModels.execute() }
+            .onSuccess { _state.value = State.Success(it) }
+            .onFailure { _state.value = State.Error }
+    }
+
+    sealed class State {
+        object Loading : State()
+        data class Success(val models: List<AIModel>) : State()
+        object Error : State()
+    }
+}

sample/android/src/main/java/co/yml/ychat/android/ui/components/feedback/Feedback.kt

@@ -24,9 +24,11 @@ private const val ICON_SIZE = 128
 @Composable
 fun Feedback(
     feedbackState: FeedbackState,
+    modifier: Modifier = Modifier,
     onButtonClick: (() -> Unit)? = null,
 ) {
     Feedback(
+        modifier = modifier,
         icons = feedbackState.icon,
         title = stringResource(id = feedbackState.title),
         message = stringResource(id = feedbackState.message),
@@ -37,6 +39,7 @@ fun Feedback(
 
 @Composable
 fun Feedback(
+    modifier: Modifier,
     icons: Icons,
     title: String,
     message: String,
@@ -45,7 +48,7 @@ fun Feedback(
 ) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = Modifier.padding(horizontal = Dimens.XXXL)
+        modifier = modifier.padding(horizontal = Dimens.XXXL)
     ) {
         icons.Icon(
             modifier = Modifier

sample/android/src/main/java/co/yml/ychat/android/ui/components/itemmenu/ItemMenu.kt

@@ -0,0 +1,52 @@
+package co.yml.ychat.android.ui.components.itemmenu
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import co.yml.ychat.android.ui.components.divider.HorizontalDivider
+import co.yml.ychat.android.ui.theme.Dimens
+import co.yml.ychat.android.ui.theme.TypographyStyle
+import co.yml.ychat.android.ui.theme.YChatTheme
+
+@Composable
+fun ItemMenu(
+    startText: String,
+    caption: String,
+    isDividerVisible: Boolean = true,
+) {
+    Column {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = Dimens.MD, vertical = 14.dp),
+            verticalArrangement = Arrangement.spacedBy(Dimens.XXS)
+        ) {
+            TypographyStyle.MediumBody.Text(text = startText)
+            TypographyStyle.SmallBody.Text(text = caption, color = YChatTheme.colors.text2)
+        }
+        if (isDividerVisible) {
+            HorizontalDivider(modifier = Modifier.padding(horizontal = Dimens.MD))
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ItemMenuPreview() {
+    YChatTheme {
+        Column(
+            modifier = Modifier
+                .background(YChatTheme.colors.background)
+                .fillMaxHeight()
+        ) {
+            ItemMenu(startText = "Label one line", caption = "Caption one line")
+        }
+    }
+}