会话详情（消息流 + 输入区）（ChatView）

会话详情（消息流 + 输入区）：ChatView 是 IDL 定义的跨端 UI 组件，props / events / behaviors 在各平台语义一致。本页给出契约属性、事件、渲染行为、数据源与 HarmonyOS 端绑定/示例。

契约预留

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

契约属性（props）

属性	类型	必填	说明
`conversationType`	`ConversationType`	是	会话类型枚举（ConversationType）
`targetId`	`string`	是	目标会话 ID（单聊为 userId，群聊为 groupId）
`messages`	`Message[]`	是	消息数组（来自 IMLib getHistoryMessages / MESSAGES 事件）
`currentUserId`	`string`	是	当前登录用户 ID（用于区分气泡方向与已读）
`hasMore`	`bool`	是	是否还有更早历史（决定是否展示「加载更多」）
`showReadCount`	`bool`	否	是否显示已读人数（群聊 n/m）
`onReactionClick`	`(reactionId:string)=>void`	否	—
`onReactionLongPress`	`(message:Message)=>void`	否	—

事件

事件	参数	说明
`loadMore`	`—`	加载更多历史消息
`sendText`	`text,extras?`	发送文本（可选带 @ 提及 / 引用）
`sendImage`	`image`	发送图片
`sendFile`	`file`	发送文件
`sendVoice`	`voice`	发送语音
`sendLocation`	`location`	发送位置
`recall`	`messageId`	撤回消息
`resend`	`clientMsgId`	重发发送失败的消息
`typing`	`bool`	输入状态变化（true / false）
`readReceipt`	`messageIds`	上报已读回执
`reaction_click`	`reactionId`	宿主回调（参数见 IDL 事件定义）
`reaction_longpress`	`message`	宿主回调（参数见 IDL 事件定义）

渲染行为

倒序渲染（最新在底部）；新消息到达自动滚底（用户上翻时给出“有新消息”提示）
按 messageId 去重；本地先显示 pending 气泡，ack 后替换为服务端消息
时间分隔：同一会话间隔 >5 分钟显示时间条
撤回消息渲染为占位文案“消息已撤回”，不显示原文
引用消息渲染引用块；@提及在文本中高亮
已读回执：发送者可见已读人数/状态（群聊按 readCounts/totalMembers）
翻页加载历史，beforeSeq 游标，hasMore=false 时显示“没有更多”
向每个消息气泡透传 message.reactions / message.expansion，并转发 onReactionClick / onReactionLongPress（setMessages / appendMessages / 宿主变更消息后始终取最新值）

数据源

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

依赖边界

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

平台绑定

项	值
公开符号 / 签名	`struct ChatView（@Component）：props conversationType/targetId/messages/currentUserId/hasMore/showReadCount；回调 onLoadMore()/onSendText(text,extras?)/onSendImage(image)/onSendFile(file)/onSendVoice(voice)/onSendLocation(location)/onRecall(messa…`
导出列表包含	是
UI 框架	ArkUI 声明式组件（@Component struct），预留命名路由

使用示例

// HarmonyOS 绑定为契约预留，以下为声明（bindings.harmony.imkit.methodMap）
// struct ChatView（@Component）：props conversationType/targetId/messages/currentUserId/hasMore/showReadCount；回调 onLoadMore()/onSendText(text,extras?)/onSendImage(image)/onSendFile(file)/onSendVoice(voice)/onSendLocation(location)/onRecall(messageId)/onResend(clientMsgId)/onTyping(bool)/onReadReceipt(messageIds)

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

会话详情（消息流 + 输入区）（ChatView）

契约属性（props）​

事件​

渲染行为​

数据源​

平台绑定​

使用示例​

相关文档​

契约属性（props）

事件

渲染行为

数据源

平台绑定

使用示例

相关文档