Implementation:Mlc ai Mlc llm StartView

Knowledge Sources	Mlc_ai_Mlc_llm
Domains	Android, UI, Jetpack Compose
Last Updated	2026-02-09 19:00 GMT

Overview

StartView is a Jetpack Compose screen that displays the model selection list in the MLCChat Android application, allowing users to download, manage, and start chat sessions with available LLM models.

Description

The file defines three composable functions that together form the start screen of the MLCChat app:

StartView is the top-level composable that renders a Scaffold with a themed TopAppBar displaying "MLCChat". The body contains a LazyColumn that iterates over appViewModel.modelList, rendering a ModelView for each model. It also displays an AlertDialog when the app view model signals an error, with options to copy the error text or dismiss it.

AlertDialog is a helper composable that wraps Material3's AlertDialog to present error messages with "Copy" and "Dismiss" buttons.

ModelView renders an individual model entry showing:

• The model ID as a text label
• State-dependent action icons:
  • Paused state: A download icon to start downloading
  • Downloading state: A pause icon to pause the download
  • Finished state: A chat icon to start a chat session (navigates to the "chat" route)
  • Other states: A schedule (pending) icon, disabled
• A delete icon (available when the model is in Paused, Downloading, or Finished state)
• A LinearProgressIndicator showing download progress
• A deletion confirmation row with "cancel", "clear data", and "delete model" options

Usage

This composable is used as the home screen of the MLCChat app. It is invoked from the navigation graph and receives a NavController for navigation and the AppViewModel for data and state management.

Code Reference

Source Location

• Repository: Mlc_ai_Mlc_llm
• File: android/MLCChat/app/src/main/java/ai/mlc/mlcchat/StartView.kt

Signature

@ExperimentalMaterial3Api
@Composable
fun StartView(navController: NavController, appViewModel: AppViewModel)

@ExperimentalMaterial3Api
@Composable
fun AlertDialog(onDismissRequest: () -> Unit, onConfirmation: () -> Unit, error: String)

@Composable
fun ModelView(navController: NavController, modelState: AppViewModel.ModelState, appViewModel: AppViewModel)

Import

import ai.mlc.mlcchat.StartView
import ai.mlc.mlcchat.ModelView

I/O Contract

Composable	Input	Type	Description
StartView	navController	NavController	Navigation controller for screen transitions
StartView	appViewModel	AppViewModel	Application-level view model providing model list and chat state
AlertDialog	onDismissRequest	() -> Unit	Callback invoked when the dialog is dismissed
AlertDialog	onConfirmation	() -> Unit	Callback invoked when the user clicks "Copy"
AlertDialog	error	String	The error message to display
ModelView	navController	NavController	Navigation controller for navigating to the chat screen
ModelView	modelState	AppViewModel.ModelState	State object for a single model, including download progress and init state
ModelView	appViewModel	AppViewModel	The app view model, used to check if chat is interruptable

Output / Side Effect	Description
Navigation to "chat"	When a finished model's chat icon is tapped, modelState.startChat() is called and navigation to "chat" occurs
Model download control	Tapping download/pause icons calls modelState.handleStart() or modelState.handlePause()
Model deletion	"clear data" calls modelState.handleClear(); "delete model" calls modelState.handleDelete()
Error display	Displays an alert dialog when appViewModel.isShowingAlert() returns true

Usage Examples

// Used within a NavHost composable setup:
composable("start") {
    StartView(
        navController = navController,
        appViewModel = appViewModel
    )
}