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

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

契约属性（props）​

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

事件​

事件参数说明
loadMore—加载更多历史消息
sendTexttext,extras?发送文本（可选带 @ 提及 / 引用）
sendImageimage发送图片
sendFilefile发送文件
sendVoicevoice发送语音
sendLocationlocation发送位置
recallmessageId撤回消息
resendclientMsgId重发发送失败的消息
typingbool输入状态变化（true / false）
readReceiptmessageIds上报已读回执
reaction_clickreactionId宿主回调（参数见 IDL 事件定义）
reaction_longpressmessage宿主回调（参数见 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 拉取后传入，组件只做排序、角标、格式化与渲染。

平台绑定​

该组件在本平台绑定中未单独声明公开符号；按 IDL 契约由平台实现映射（详见功能列表与快速开始）。

使用示例​

JavaScript（宿主渲染）
// macOS：宿主自渲染 ChatView（SDK 不导出该组件）
// 契约 props：conversationType, targetId, messages, currentUserId
const res = await window.niPaasIMBridge.imlib.getHistoryMessages(1, 'user2', 50, 0);
document.getElementById('messages').innerHTML = res.data
  .map((m) => `<div class="msg">${m.content?.text || '[' + m.content?.type + ']'}</div>`)
  .join('');

相关文档​