跳到主要内容

消息回应

IMKit 从 26.6.0 开始支持消息回应（Message Reaction）UI。开启后，用户可以在会话页面长按消息，选择表情回应，用 emoji 对消息进行回应；消息气泡下方会展示回应摘要，并支持查看回应详情。

提示

IMKit 消息回应默认关闭，需要通过配置开启。

IMKit 仅提供会话页面 UI。回应的增删、查询和监听能力由 IMLib 的消息回应接口提供。

使用限制​

  • IMKit 内置会话页面仅支持单聊和群聊中的消息回应。
  • 支持的内置消息类型包括文本（RC:TxtMsg）、图片（RC:ImgMsg）、高清语音（RC:HQVCMsg）、小视频（RC:SightMsg）、文件（RC:FileMsg）、位置（RC:LBSMsg）、图文（RC:ImgTextMsg）、引用消息（RC:ReferenceMsg）和合并转发消息（RC:CombineMsg）。
  • 发送中、发送失败、取消发送、本地尚未生成 UID、阅后即焚模式中的消息，不展示默认回应入口。
  • IMKit 不在会话列表中展示消息回应。

开启消息回应​

建议在打开会话页面前开启消息回应，以确保会话页按预期展示回应入口和状态。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setEnableMessageReaction(true);
RongIM.getInstance().conversationService().setConversationConfig(config);

关闭时传入 false。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setEnableMessageReaction(false);
RongIM.getInstance().conversationService().setConversationConfig(config);

设置展示模式​

消息回应展示在消息气泡下方。IMKit 提供两种展示模式，默认使用 ReactionBarStyle.Detail。

展示模式说明
ReactionBarStyle.Detail详细模式，显示回应表情和用户名称摘要；当名称过长或摘要无法完整展示时，会截断并补充人数信息。
ReactionBarStyle.Number数字模式，仅显示回应表情和人数，例如 ❤️｜3人。
TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReactionBarStyle(ReactionBarStyle.Number);
RongIM.getInstance().conversationService().setConversationConfig(config);

Detail 模式下，用户名称会优先使用群成员资料或用户资料中的展示名；获取失败时使用 userId。

默认交互​

开启消息回应后，IMKit 内置会话页面提供以下默认交互：

  1. 用户长按支持的消息，长按菜单中显示表情回应。
  2. 点击表情回应后，底部弹出回应表情选择器。
  3. 用户选择表情后，IMKit 会调用 IMLib 的 addMessageReaction 或 removeMessageReaction。
  4. 消息气泡下方展示回应项。当前用户已回应的项会高亮。
  5. 点击回应项中的 emoji 区域会添加或移除对应回应。
  6. 点击回应项中的人数或用户摘要区域会打开回应详情。

表情选择器​

表情选择器包含两个区域：

区域说明
最常使用用户成功添加过回应后显示。最多展示配置数量的常用表情，按本地使用统计排序。
默认表情使用 IMKit 内置 emoji 数据。

首次使用时没有常用数据，只显示默认表情。常用表情数据保存在本地应用安装中，卸载重装后会重新统计。IMKit 仅在成功添加回应时记录使用次数，移除回应或操作失败不会记录。

设置常用表情显示数量​

默认显示 14 个常用表情。有效范围为 1 到 20；小于 1 时按 1 处理，大于 20 时按 20 处理。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setRecentReactionDisplayCount(14);
RongIM.getInstance().conversationService().setConversationConfig(config);

业务侧也可以直接获取本地记录的常用回应列表：

TypeScript
let recentReactions = RongIM.getInstance()
  .conversationService()
  .getRecentReactions(14);

回应详情​

用户点击回应人数或用户摘要后，IMKit 会打开回应详情弹层：

  • 顶部按回应类型展示标签页。
  • 默认选中用户点击的回应。
  • 下方分页展示添加该回应的用户列表。
  • 用户列表中显示用户头像、名称和回应时间。

用户列表会按需分页加载更多数据，分页能力来自 IMLib 的 getMessageReactionUsers 接口。

拦截回应事件​

可以通过 addMessageReactionClickListener 拦截 IMKit 部分默认交互。监听器不再使用时，需要调用 removeMessageReactionClickListener 移除。

TypeScript
let listener: MessageReactionClickListener = {
  onReactionClick: (message: Message, reaction: MessageReaction): boolean => {
    // 返回 true 表示已处理，IMKit 不再执行默认添加或移除逻辑。
    return false;
  },
  onReactionDetailClick: (message: Message, reaction: MessageReaction): boolean => {
    // 返回 true 表示已处理，IMKit 不再展示默认详情页。
    return false;
  },
  onReactionUserClick: (message: Message, reaction: MessageReaction, userKey: string): boolean => {
    // 返回 true 表示已处理。IMKit 默认无额外动作。
    return false;
  }
};

RongIM.getInstance().conversationService().addMessageReactionClickListener(listener);

// 不再需要监听时移除。
RongIM.getInstance().conversationService().removeMessageReactionClickListener(listener);

各回调说明如下：

回调触发时机
onReactionClick用户点击消息下方已有回应项中的 emoji 区域时触发。
onReactionDetailClick用户点击回应人数或用户摘要区域时触发。
onReactionUserClick用户点击回应详情中的用户时触发。

添加或移除回应失败时，IMKit 会展示默认失败提示；当 IMLib 返回回应类型数量超限或回应用户数量超限时，长按表情选择器流程会展示默认超限提示。如需完全自定义错误处理，可通过 onReactionClick 拦截后自行调用 IMLib 消息回应接口。

与 IMLib 数据的关系​

IMKit 会在消息列表加载时，根据 Message.hasReactions 批量查询可见消息的回应摘要。即使 hasReactions 为 true，如果 IMLib 摘要查询返回空结果，IMKit 也会隐藏该消息的回应区域。

相关文档​