会话详情（消息流 + 输入区）（ChatView）
会话详情（消息流 + 输入区）：ChatView 是 IDL 定义的跨端 UI 组件，props / events / behaviors 在各平台语义一致。本页给出契约属性、事件、渲染行为、数据源与 Web 端绑定/示例。
契约属性（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 拉取后传入，组件只做排序、角标、格式化与渲染。
平台绑定
| 项 | 值 |
|---|---|
| 公开符号 / 签名 | IMKit.mount(container, 'ChatView', props) |
| 导出列表包含 | 是 |
| UI 框架 | 纯 DOM 组件（无框架依赖），CSS 变量主题，IMKit.mount(container, component, props) |
使用示例
JavaScript (ESM)
IMKit.mount(document.getElementById('chat'), 'ChatView', {
conversationType: 1,
targetId: 'user2',
messages,
currentUserId: 'alice',
hasMore: true,
showReadCount: true,
onLoadMore: () => loadMore(),
onSendText: (text, extras) => client.sendTextMessage(1, 'user2', text),
onTyping: (typing) => client.sendTypingStatus(1, 'user2', typing),
});