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

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

契约预留

本平台尚未实现：以下绑定声明来自已冻结契约，示例标注为契约样例。

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

平台绑定

项	值
公开符号 / 签名	`struct MessageBubble（@Component）：props message/isMine/showStatus/showReadCount；回调 onLongPress(message)/onTapImage(url)/onTapFile(url,name)/onTapVoice(url,duration)/onTapLocation(latitude,longitude)；渲染器 text/image/file/voice/location/custom/…`
导出列表包含	是
UI 框架	ArkUI 声明式组件（@Component struct），预留命名路由

使用示例

// HarmonyOS 绑定为契约预留，以下为声明（bindings.harmony.imkit.methodMap）
// struct MessageBubble（@Component）：props message/isMine/showStatus/showReadCount；回调 onLongPress(message)/onTapImage(url)/onTapFile(url,name)/onTapVoice(url,duration)/onTapLocation(latitude,longitude)；渲染器 text/image/file/voice/location/custom/recall/system

const kit = new IMKitFacade();
kit.mount(container); // 组件：MessageBubble
kit.update({ locale: 'zh-CN' });

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

契约属性（props）​

事件​

渲染行为​

数据源​

平台绑定​

使用示例​

相关文档​

契约属性（props）

事件

渲染行为

数据源

平台绑定

使用示例

相关文档