Generate Smart Replies using Jetpack Compose

Published in

DSC KIET

5 min readDec 18, 2022

What are Smart Replies?

The Smart Replies are available on almost every Android app out there. This model generates reply suggestions based on the context of a conversation. Integrating the Smart Reply model in the app ensures that the user gets suggestions quickly since no remote server is involved.

ML Kit makes Google’s machine learning skills available to mobile developers in a user-friendly package. The kit provides an easy-to-use Smart Reply API which uses Natural Language Processing to generate smart replies.

How does the model work?

The model currently supports only the English language.
It analyzes the 10 most recent messages to generate up to 3 useful replies.
The model won’t provide any suggestions if it detects any sensitive topic.

Let’s see how you can generate Smart Replies in the android application using Jetpack Compose.

Prerequisites

Before starting, I assume that you’re already familiar with the following concepts:

It would be great if you follow the github repository along with this article.

Now, let us generate smart replies for your app together😉

Firebase Project

To begin with, set up a new firebase project.

Open the Firebase Console.
Add a new project and follow the instructions.
Click on the android icon to add your app.
Go through all the steps carefully.

Yay! We’re done with the first step! 🎉 Isn’t it easy? Let’s find it out in the next.

Startup‍🚀

Firstly, add the following dependencies to the app-level build.gradle file.

Since the model will be downloaded on the device, add the internet permission in the Android Manifest file.

<uses-permission android:name="android.permission.INTERNET" />

Also, add the following metadata in the Manifest file to enable the app to automatically download the ML Model.

 <meta-data
            android:name="com.google.mlkit.vision.DEPENDENCIES"
            android:value="smart_reply" />

Now, add the following plugins and dependencies in the project-level build.gradle file.

Conversation History Object

Create a Kotlin class for a file called MainViewModel.kt where all the methods will be defined. These methods will be used in UI.
To generate smart replies, a list of messages is passed to the ML Kit.

var conversation : ArrayList<TextMessage> = ArrayList<TextMessage>()

For now, define a dummy data source for messages.

Create a private function addConvo() to add the timestamped messages to that list.

The ML Kit will generate suggestions for the last message in the conversation object. Now, in order to add messages to the conversation, do the following.

Smart Reply Generator😎

Now, create a new function getReply() to get the message replies. Firstly, create an instance of the smartReplyGenerator.
Thereafter, a conversation object is passed into the smartReplies method in order to generate replies. The function looks like this:

Initialize the Conversation

Now, initialize the conversation between users. The ViewModel will now look like this:

This was all about the implementation of the Smart Reply ML Model and now we’ll see how to connect this model to the UI of the android application.

Creating UI with Jetpack Compose 🤩

Let’s begin with the most exciting part!!

Jetpack Compose is a modern toolkit that is used to build native Android UI. So, let’s see how you can integrate the Smart Reply ML model using this all-new UI toolkit.
First and Foremost, initialize the ViewModel in the MainActivity.kt file.

private val viewModel by viewModels<MainViewModel>()

Now, Create the surface of your app. Initialize the message over here.

Create a composable function TextInputField(). This function will take the ViewModel as a parameter. Also, initialize the text using the viewmodel. So, the function looks like this:

fun TextInputField(viewModel: MainViewModel){
    val textChangeVal = viewModel.txt
}

Now, create a box having one row. A box is a composable which is capable of overlapping other composables. Now this composable will have icons and an input text field, like this :

Inside the row, add Icons using the Icon() from compose UI.
The line Icons.Default.AddCircle adds the type of icon you want to use and to add padding, use the Modifier like this:
Modifier.padding(end = 15.dp, top = 15.dp)
To add the input text field, there are several TextField options available in Jetpack Compose. Here, just use the OutlinedTextField() composable.
The Send button will depend on whether the value is provided. Only if the enableSend.value is not null, the send button will be activated.

The composable UI for TextInputField :

Now, add this part of UI into the bottombar of Surface to make it visible on the screen.

bottomBar = {
Column() {
          SuggestionList(viewModel = viewModel)
          Spacer(modifier = Modifier.height(10.dp))
          TextInputField(viewModel = viewModel)
      }
}

To create a UI for the suggestion list of replies, add a composable function SuggestionList() and pass the ViewModel into it.

Add a row to display the suggested replies on the screen. If the suggestion list is not empty, then add values to the CustomChip which will display the smart reply.

Now, design a UI for the CustomChip. Create a surface of the chip as shown in the image above and add a row in order to display the text.

The next step is to add the body of our message. To do so, add the Chat items in the content part of Scaffold.

content = {
           LazyColumn {
                       items(msg.value.size){ i ->
                       ChatItem(msg = msg.value[i])
                      }
           }
          }

At last, Design the Chat Item which will display the messages of the remote user. Create a composable function ChatItem() and pass the Conversation message into it.