消息气泡

Web IMKit 支持配置消息气泡样式、头像和昵称展示规则。5.42.0 起，你还可以通过预设开关启用消息回应能力。

定制化消息气泡

IRCKitMessageBubbleCfg 提供以下属性：

配置项	类型	默认值	说明
radius	Number	20	气泡圆角半径。
layout	RCKitBubbleLayout	RCKitBubbleLayout.LEFT_RIGHT	气泡布局方式。有效值为 RCKitBubbleLayout.LEFT_RIGHT (左右布局)、RCKitBubbleLayout.LEFT_JUSTIFYING (靠左对齐)。
backgroundColorForMyself	String/Number	#D2E1FE	自己发送的消息气泡背景色。
backgroundColorForOthers	String/Number	#F3F5FA	其他人发送的消息气泡背景色。
textColorForMyself	String/Number	#020814	自己发送的消息气泡文字颜色。
textColorForOthers	String/Number	#020814	其他人发送的消息气泡文字颜色。
showMyProfileInPrivateConversation	Boolean	true	在单聊会话中，是否显示自己的头像。
showMyNameInPrivateConversation	Boolean	false	在单聊会话中，是否显示自己的名称。
showMyProfileInGroupConversation	Boolean	true	在群聊会话中，是否显示自己的头像。
showMyNameInGroupConversation	Boolean	false	在群聊会话中，是否显示自己的名称。
showOthersProfileInPrivateConversation	Boolean	true	在单聊会话中，是否显示他人的头像。
showOthersNameInPrivateConversation	Boolean	false	在单聊会话中，是否显示他人的名称。
showOthersProfileInGroupConversation	Boolean	true	在群聊会话中，是否显示他人的头像。
showOthersNameInGroupConversation	Boolean	true	在群聊会话中，是否显示他人的名称。

消息回应

从 5.42.0 开始，Web IMKit 支持消息回应能力。开启后，消息气泡中可展示回应入口、回应统计、回应用户列表和回应详情入口。

important

消息回应功能默认关闭，需要在 kitApp.ready() 前通过 RCKitCommand.MESSAGE_REACTION_ENABLED 显式开启。如需在消息气泡中展示回应用户名称列表，还需要同时开启 RCKitCommand.SHOW_MESSAGE_REACT_USERS。

JavaScript

import { RCKitCommand } from '@rongcloud/im-kit';

kitApp.setCommandSwitch(RCKitCommand.MESSAGE_REACTION_ENABLED, true);
kitApp.setCommandSwitch(RCKitCommand.SHOW_MESSAGE_REACT_USERS, true);

当用户点击消息回应详情入口时，Web IMKit 会派发 RCKitEvents.REACTIONS_DETAIL_EVENT 事件。你可以通过该事件获取当前消息和回应 ID，并展示业务自定义的详情面板。

JavaScript

import { RCKitEvents } from '@rongcloud/im-kit';

kitApp.addEventListener(RCKitEvents.REACTIONS_DETAIL_EVENT, (evt) => {
  console.log('消息：', evt.data.message);
  console.log('回应 ID：', evt.data.reactionId);
});

获取当前气泡配置

JavaScript

const config = kitApp.cloneMessageBubbleCfg();

更新气泡配置

提示

气泡配置仅在 kitApp.ready() 调用前设置有效。

JavaScript

kitApp.setMessageBubbleCfg(config);