消息气泡（按内容类型渲染）（MessageBubble）
消息气泡（按内容类型渲染）：MessageBubble 是 IDL 定义的跨端 UI 组件，props / events / behaviors 在各平台语义一致。本页给出契约属性、事件、渲染行为、数据源与 Web 端绑定/示例。
契约属性（props）
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
message | Message | 是 | 消息实体（IDL Message） |
isMine | bool | 是 | 是否为当前用户发送 |
showStatus | bool | 否 | 是否显示发送状态 |
showReadCount | bool | 否 | 是否显示已读人数（群聊 n/m） |
reactions | MessageReactionSummary[] | 否 | — |
expansion | Record<string,string> | 否 | — |
onReactionClick | (reactionId:string)=>void | 否 | — |
onReactionLongPress | (message:Message)=>void | 否 | — |
streaming | bool | 否 | — |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
longpress | message | 长按会话，宿主展示操作菜单（置顶 / 免打扰 / 删除） |
reaction_click | reactionId | 宿主回调（参数见 IDL 事件定义） |
reaction_longpress | message | 宿主回调（参数见 IDL 事件定义） |
tapImage | url | 点击图片消息 |
tapFile | url,name | 点击文件消息 |
tapVoice | url,duration | 点击语音消息 |
tapLocation | latitude,longitude | 点击位置消息 |
stream_chunk | streamId, 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 拉取后传入，组件只做排序、角标、格式化与渲染。
平台绑定
| 项 | 值 |
|---|---|
| 公开符号 / 签名 | IMKit.mount(container, 'MessageBubble', props) |
| 导出列表包含 | 是 |
| UI 框架 | 纯 DOM 组件（无框架依赖），CSS 变量主题，IMKit.mount(container, component, props) |
使用示例
JavaScript (ESM)
IMKit.mount(document.getElementById('message-10001'), 'MessageBubble', {
message,
isMine: message.senderId === 'alice',
showStatus: true,
showReadCount: true,
});