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

1@Composable
2internal fun TextMessageReplacementEntry(
3   isLocal: Boolean,
4   text: String?
5) {
6   val shape = RoundedCornerShape(16)
7   ReplacementMessageContainer(isLocal = isLocal) {
8       Card(
9           modifier = Modifier
10               .wrapContentSize()
11               .border(shape = shape, width = 1.dp, color = Color.Green),
12           shape = shape
13       ) {
14           Box(
15               contentAlignment = Alignment.Center,
16               modifier = Modifier
17                   .wrapContentSize(),
18           ) {
19               Text(
20                   text = text ?: "",
21                   color = Color.Green,
22                   modifier = Modifier.padding(horizontal = 30.dp, vertical = 10.dp),
23               )
24           }
25       }
26   }
27}

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

1@Composable
2internal fun DisplayableOptionsReplacementEntry(
3   title: String,
4   optionItems: List<OptionItem.TypedOptionItem.TitleOptionItem>,
5   onSelection: ((OptionItem) -> Unit)
6) {
7   val shape = RoundedCornerShape(16)
8   Card(
9       modifier = Modifier
10           .wrapContentSize()
11           .border(shape = shape, width = 1.dp, color = Color.Green),
12       shape = shape
13   ) {
14       Text(
15           modifier = Modifier.fillMaxWidth().padding(16.dp),
16           text = title, color = Color.Green
17       )
18       optionItems.forEach {
19           TextButton(
20               modifier = Modifier.fillMaxWidth().border(1.dp, Color.Green, shape), onClick = {
21                   onSelection(OptionItem.SelectionsOptionItem(it.optionId))
22               }
23           ) {
24               Text(text = (it.titleItem.title), color = Color.Green)
25           }
26       }
27   }
28}

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

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

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.

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