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

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

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

平台绑定​

项值
公开符号 / 签名MessageBubble(props: {message: Message; isMine: boolean; showStatus?: boolean; showReadCount?: boolean; onLongPress?: (m: Message) => void; onTapImage?: (url: string) => void; onTapFile?: (url: string, name: string) => void; onTapVoice?: (u…
导出列表包含是
UI 框架React 组件（props 契约），宿主渲染；组件不直连网络 / DB / IPC

使用示例​

JavaScript / TypeScript
IMKit.mount(container, 'MessageBubble', {
  message,
  isMine: message.senderId === 'alice',
  showStatus: true,
  showReadCount: true,
  onTapImage: (url) => openPreview(url),
});

相关文档​