Implementation:Mlc ai Mlc llm ChatView

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

Overview

ChatView is a Jetpack Compose UI component that provides the main chat interface for the MLCChat Android application, including message display, markdown rendering, image support, and message input controls.

Description

The ChatView file implements the primary chat screen for the MLC LLM Android application using Jetpack Compose and Material 3 design components. It is composed of three main composable functions:

ChatView is the top-level composable that constructs the full chat screen. It includes a top app bar displaying the model name (extracted from chatState.modelName), a back navigation button, and a reset chat button. The main content area contains a status report text, a scrollable message list rendered via LazyColumn, and a message input area at the bottom. The LazyColumn automatically scrolls to the latest message using animateScrollToItem. Each message is keyed by its unique id for efficient recomposition.

MessageView renders individual messages differently based on the sender role. Assistant messages are displayed on the left side with a secondary container color and support toggling between raw text and Markdown rendering via a Switch control. The Markdown rendering uses the third-party MarkdownText library. User messages are displayed on the right side with a primary container color. User messages may also include images: when an imageUri is present, the image is decoded from the content resolver, scaled to 224x224 pixels, and displayed. If the image has not been processed yet, requestImageBitmap is called to send the image to the model.

SendMessageView provides the input area at the bottom of the screen with an OutlinedTextField for text entry, camera and gallery icon buttons for image input, and a send button. The camera and gallery buttons are disabled once an image has already been attached (hasImage flag). The send button is enabled only when text is non-empty and the chat state is in a "chatable" condition.

Usage

Use ChatView as the main chat screen in the MLCChat Android application. It is navigated to from the model selection screen via NavController. It requires an AppViewModel.ChatState instance for managing the conversation state, and a reference to the host Activity for camera and gallery access.

Code Reference

Source Location

• Repository: Mlc_ai_Mlc_llm
• File: android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ChatView.kt
• Lines: 1-343

Signature

@ExperimentalMaterial3Api
@Composable
fun ChatView(
    navController: NavController,
    chatState: AppViewModel.ChatState,
    activity: Activity
)

@Composable
fun MessageView(messageData: MessageData, activity: Activity?)

@ExperimentalMaterial3Api
@Composable
fun SendMessageView(chatState: AppViewModel.ChatState, activity: Activity)

Import

import ai.mlc.mlcchat.ChatView
import ai.mlc.mlcchat.MessageView
import ai.mlc.mlcchat.SendMessageView

I/O Contract

Inputs

Name	Type	Required	Description
navController	NavController	Yes	Navigation controller for back navigation
chatState	AppViewModel.ChatState	Yes	The chat state managing messages, model name, and chat lifecycle
activity	Activity	Yes	The host Activity, cast to MainActivity for camera/gallery access
messageData	MessageData	Yes (MessageView)	Data for a single message including role, text, and optional imageUri

Outputs

Name	Type	Description
Composable UI	Unit	Renders the chat interface as Jetpack Compose UI elements

Usage Examples

// Navigating to ChatView from a NavHost
composable("chat") {
    ChatView(
        navController = navController,
        chatState = viewModel.chatState,
        activity = activity
    )
}

// Previewing a message with markdown content
@Preview
@Composable
fun MessageViewPreviewWithMarkdown() {
    MessageView(
        messageData = MessageData(
            role = MessageRole.Assistant,
            text = "# Sample Header\n* Markdown\n* [Link](https://example.com)"
        ),
        null
    )
}