Android（Compose）

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import io.trtc.tuikit.chat.uikit.components.messagelist.ui.MessageList

@Composable
fun MessageListScreen(conversationID: String, onOpenUserProfile: (userID: String) -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .systemBarsPadding()
    ) {
        MessageList(conversationID = conversationID) { userID ->
            // 点击用户头像响应事件
            onOpenUserProfile(userID)
        }
    }
}

import androidx.activity.compose.BackHandler
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import io.trtc.tuikit.chat.uikit.components.messageinput.ui.MessageInput
import io.trtc.tuikit.chat.uikit.components.messagelist.ui.MessageList
import io.trtc.tuikit.chat.uikit.components.messagelist.ui.rememberMessageListController

@Composable
fun ChatScreen(conversationID: String) {
    val messageListController = rememberMessageListController()
    var isPeerTyping by remember { mutableStateOf(false) }
    var isMultiSelectMode by remember { mutableStateOf(false) }

    // 多选模式下，按返回键退出多选
    BackHandler(enabled = isMultiSelectMode) {
        messageListController.exitMultiSelectMode()
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .systemBarsPadding()
    ) {
        if (isPeerTyping) {
            Text(text = "对方正在输入...", modifier = Modifier.padding(16.dp))
        }
        MessageList(
            conversationID = conversationID,
            modifier = Modifier.weight(1f),
            controller = messageListController,
            onTypingStatusChanged = { isTyping -> isPeerTyping = isTyping },
            onMultiSelectStateChanged = { isMultiSelect -> isMultiSelectMode = isMultiSelect },
            onUserClick = { userID ->
                // 点击用户头像响应事件
            }
        )
        // 多选模式下隐藏输入框
        if (!isMultiSelectMode) {
            MessageInput(
                conversationID = conversationID,
                typingStatusSender = { isTyping ->
                    // 把自己的输入状态发送给对方
                    messageListController.sendTypingStatus(isTyping)
                }
            )
        }
    }
}

import androidx.compose.ui.unit.dp
import io.trtc.tuikit.chat.uikit.components.config.MessageAlignment
import io.trtc.tuikit.chat.uikit.components.messagelist.config.ChatMessageListConfig
import io.trtc.tuikit.chat.uikit.components.messagelist.ui.MessageList

val messageListConfig = ChatMessageListConfig(
    alignment = MessageAlignment.TWO_SIDED, // 自己发送的消息在右侧，其他人的消息在左侧
    isShowRightAvatar = false,              // 不显示右侧（自己发送的消息）的头像
    isShowTimeMessage = false,              // 不显示时间分隔
    cellSpacing = 16.dp,                    // 消息之间的间距
    horizontalPadding = 12.dp               // 消息列表的左右边距
)

MessageList(conversationID = conversationID, config = messageListConfig) { userID ->
    // 点击用户头像响应事件
}

import io.trtc.tuikit.chat.uikit.components.messagelist.config.ChatMessageListConfig
import io.trtc.tuikit.chat.uikit.components.messagelist.config.MessageListBackground

// 纯色背景
val colorBackgroundConfig = ChatMessageListConfig()
    .setBackgroundColor(0xFFF5F6F8.toInt())

// 渐变背景，至少需要 2 个颜色
val gradientBackgroundConfig = ChatMessageListConfig()
    .setBackgroundGradient(
        colors = intArrayOf(0xFFE8F0FE.toInt(), 0xFFFFFFFF.toInt()),
        direction = MessageListBackground.GradientDirection.TOP_BOTTOM
    )

// 图片背景
val imageBackgroundConfig = ChatMessageListConfig()
    .setBackgroundImage("https://example.com/chat_background.png")

import io.trtc.tuikit.chat.uikit.components.messagelist.config.ChatMessageListConfig
import io.trtc.tuikit.chat.uikit.components.messagelist.config.MessageBubbleAppearance
import io.trtc.tuikit.chat.uikit.components.messagelist.config.MessageBubbleBackground
import io.trtc.tuikit.chat.uikit.components.messagelist.config.MessageBubbleCornerRadius
import io.trtc.tuikit.chat.uikit.components.messagelist.config.MessageBubbleStroke

val bubbleConfig = ChatMessageListConfig()
    // 所有气泡的基础外观：四个角的圆角均为 12dp
    .setDefaultBubbleAppearance(
        MessageBubbleAppearance(
            cornerRadius = MessageBubbleCornerRadius.all(12)
        )
    )
    // 自己发送的消息：渐变背景，右下角为直角，其余圆角沿用基础外观
    .setOwnBubbleAppearance(
        MessageBubbleAppearance(
            background = MessageBubbleBackground.Gradient(
                colors = listOf(0xFF4F8BFF.toInt(), 0xFF1C66E5.toInt()),
                direction = MessageBubbleBackground.GradientDirection.LEFT_RIGHT
            ),
            cornerRadius = MessageBubbleCornerRadius(bottomRight = 0)
        )
    )
    // 收到的消息：白色背景，1dp 描边
    .setIncomingBubbleAppearance(
        MessageBubbleAppearance(
            background = MessageBubbleBackground.Color(0xFFFFFFFF.toInt()),
            stroke = MessageBubbleStroke(width = 1, color = 0xFFE5E6EB.toInt())
        )
    )

import io.trtc.tuikit.chat.uikit.components.messagelist.config.ChatMessageListConfig
import io.trtc.tuikit.chat.uikit.components.messagelist.ui.MessageList

MessageList(
    conversationID = conversationID,
    config = ChatMessageListConfig(isSupportCopy = false) // 不展示“复制”
) { userID ->
    // 点击用户头像响应事件
}

import io.trtc.tuikit.chat.uikit.components.messagelist.model.MessageCustomAction
import io.trtc.tuikit.chat.uikit.components.messagelist.ui.MessageList

MessageList(
    conversationID = conversationID,
    customActions = listOf(
        MessageCustomAction(
            ID = "custom.message.share",
            title = "Share",
            iconResID = android.R.drawable.ic_menu_share,
            action = { message ->
                println("Share Message: ${message.msgID}")
            }
        )
    )
)

import io.trtc.tuikit.atomicxcore.api.message.MessageType
import io.trtc.tuikit.chat.uikit.components.messagelist.config.ChatMessageListConfig
import io.trtc.tuikit.chat.uikit.components.messagelist.model.MessageActionIDs
import io.trtc.tuikit.chat.uikit.components.messagelist.model.MessageCustomAction

val editActionsConfig = ChatMessageListConfig().customizeActions {
    // 当前长按的消息
    val message = editorContext.message
    // 移除“多选”
    remove(MessageActionIDs.MULTI_SELECT)
    // 修改“删除”的标题。ID 保持不变，点击后仍会先弹出确认框
    replace(MessageActionIDs.DELETE) { action ->
        action.copy(title = "删除消息")
    }
    // 文本消息增加“收藏”
    if (message.messageType == MessageType.TEXT) {
        val favoriteAction = MessageCustomAction(
            ID = "custom.message.favorite",
            title = "收藏",
            iconResID = android.R.drawable.star_off,
            action = { target ->
                // 收藏消息 target
            }
        )
        // 放在“转发”之后；当前消息没有“转发”（例如发送失败）时，追加到末尾
        if (!insertAfter(MessageActionIDs.FORWARD, favoriteAction)) {
            add(favoriteAction)
        }
    }
}

MessageList(conversationID = conversationID, config = editActionsConfig)