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

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

契约属性（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 拉取后传入，组件只做排序、角标、格式化与渲染。

平台绑定​

该组件在本平台绑定中未单独声明公开符号；按 IDL 契约由平台实现映射（详见功能列表与快速开始）。

使用示例​

JavaScript（宿主渲染）
// macOS：宿主自渲染 MessageBubble（SDK 不导出该组件）
// 契约 props：message, isMine, showStatus?, showReadCount?
function bubble(message, isMine) {
  return `<div class="bubble ${isMine ? 'mine' : 'other'}">${message.content?.text || '[消息]'}</div>`;
}

相关文档​