消息气泡（按内容类型渲染）（MessageBubble）

消息气泡（按内容类型渲染）：MessageBubble 是 IDL 定义的跨端 UI 组件，props / events / behaviors 在各平台语义一致。本页给出契约属性、事件、渲染行为、数据源与 Android 端绑定/示例。

契约属性（props）​

属性类型必填说明
messageMessage是消息实体（IDL Message）
isMinebool是是否为当前用户发送
showStatusbool否是否显示发送状态
showReadCountbool否是否显示已读人数（群聊 n/m）
reactionsMessageReactionSummary[]否—
expansionRecord<string,string>否—
onReactionClick(reactionId:string)=>void否—
onReactionLongPress(message:Message)=>void否—
streamingbool否—

事件​

事件参数说明
longpressmessage长按会话，宿主展示操作菜单（置顶 / 免打扰 / 删除）
reaction_clickreactionId宿主回调（参数见 IDL 事件定义）
reaction_longpressmessage宿主回调（参数见 IDL 事件定义）
tapImageurl点击图片消息
tapFileurl,name点击文件消息
tapVoiceurl,duration点击语音消息
tapLocationlatitude,longitude点击位置消息
stream_chunkstreamId, text, complete宿主回调（参数见 IDL 事件定义）

渲染行为​

  • 回应 chip 按 reactionTime 升序排列（同值保持输入顺序）
  • hasCurrentUserReacted=true 的 chip 高亮为 active 态（主题色描边 + aria-pressed=true）
  • chip 计数 >99 显示 99+；计数<=0 或 reactionId 空的 chip 不渲染
  • 消息扩展徽标按 key:value 渲染，最多 3 对，超出部分显示 +N（N=未展示对数）
  • 气泡长按（pointerdown >=500ms）或右键触发 reaction_longpress(message) / onReactionLongPress，由宿主打开回应选择器
  • streaming=true 时 content.type=stream 渲染增量文本 + 生成中光标；complete 后收敛为普通文本气泡（streaming:false 可关闭）

数据源​

未在 IDL 声明 dataSource；由宿主从 IMLib 拉取（getConversationList / getHistoryMessages / MESSAGES / CONVERSATION 事件）。

依赖边界

组件不直连网络与数据库：会话/消息由宿主从 IMLib 拉取后传入，组件只做排序、角标、格式化与渲染。

平台绑定​

项值
公开符号 / 签名io.nipaas.imkit.conversation.provider.MessageItemProvider — renderType(): ContentType / bindView(holder: MessageViewHolder, message: Message, isMine: Boolean, showStatus: Boolean, showReadCount: Boolean) / onLongPress(message): Boolean / on…
导出列表包含—
UI 框架View 体系：Fragment + RecyclerView + XML；Provider 注册表驱动消息气泡渲染

使用示例​

Kotlin
// 自定义消息类型：注册 Provider 后由 RecyclerView 统一渲染
IMKit.registerProvider(ContentType.CUSTOM, object : MessageItemProvider {
    override fun renderType(): ContentType = ContentType.CUSTOM
    override fun bindView(
        holder: MessageViewHolder,
        message: Message,
        isMine: Boolean,
        showStatus: Boolean,
        showReadCount: Boolean,
    ) {
        // 绑定自定义气泡
    }
})

相关文档​