Define Your UI For Each Entry Type

Define your UI for each entry type you replaced in the Hide or Replace Messages in a Chat Feed section.

Sample Code for Defining Your Own UI for the Text Message Entry Type

@Composable
internal fun TextMessageReplacementEntry(
   isLocal: Boolean,
   text: String?
) {
   val shape = RoundedCornerShape(16)
   ReplacementMessageContainer(isLocal = isLocal) {
       Card(
           modifier = Modifier
               .wrapContentSize()
               .border(shape = shape, width = 1.dp, color = Color.Green),
           shape = shape
       ) {
           Box(
               contentAlignment = Alignment.Center,
               modifier = Modifier
                   .wrapContentSize(),
           ) {
               Text(
                   text = text ?: "",
                   color = Color.Green,
                   modifier = Modifier.padding(horizontal = 30.dp, vertical = 10.dp),
               )
           }
       }
   }
}

Sample Code for Defining Your Own UI for the Choices Message Entry Type

@Composable
internal fun DisplayableOptionsReplacementEntry(
   title: String,
   optionItems: List<OptionItem.TypedOptionItem.TitleOptionItem>,
   onSelection: ((OptionItem) -> Unit)
) {
   val shape = RoundedCornerShape(16)
   Card(
       modifier = Modifier
           .wrapContentSize()
           .border(shape = shape, width = 1.dp, color = Color.Green),
       shape = shape
   ) {
       Text(
           modifier = Modifier.fillMaxWidth().padding(16.dp),
           text = title, color = Color.Green
       )
       optionItems.forEach {
           TextButton(
               modifier = Modifier.fillMaxWidth().border(1.dp, Color.Green, shape), onClick = {
                   onSelection(OptionItem.SelectionsOptionItem(it.optionId))
               }
           ) {
               Text(text = (it.titleItem.title), color = Color.Green)
           }
       }
   }
}

In the Replace All Entries section, ‌this code snippet intercepts the reply and sends it by using the ConversationClient.

CoroutineScope(Dispatchers.Main).launch {
   conversationClient?.sendReply(it)
}

In the sample code for defining your own UI for the choices message entry type above, this code snippet defines the click handler for the intercepted reply.

onClick = {
   onSelection(OptionItem.SelectionsOptionItem(it.optionId))
}