会话页面自定义

消息点击事件

为了避免内存泄露，请将监听保存，在必要的时候移除

您可以通过调用 addMessageClickListener 方法监听消息的点击事件，消息点击监听 MessageClickListener 的所有方法均为可选方法，可以按需实现，此处为了方便展示，将所有方法都做了默认实现。

提示

从 1.4.3 版本开始，onMessageClick 支持语音消息。
从 1.4.3 版本开始，所有方法均增加 Context、ClickEvent/GestureEvent 参数。

示例代码

TypeScript
let msgClickListener : MessageClickListener = {
  onMessagePortraitClick: (message: Message, userId: string, context?: Context, event?: ClickEvent) => {
    // 消息头像点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessagePortraitLongClick: (message: Message, user: UserInfoModel, context?: Context, event?: GestureEvent) => {
    // 消息头像长按事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageClick: (message: Message, context?: Context, event?: ClickEvent) => {
    // 消息点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageLongClick: (message: Message, context?: Context, event?: GestureEvent) => {
    // 消息长按事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageRecallEditClick: (message: Message, context?: Context, event?: ClickEvent) => {
    // 消息撤回编辑事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageLinkClick: (message: Message, url: string, context?: Context, event?: ClickEvent) => {
    // 文本消息超链接点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageEmailClick: (message: Message, email: string, context?: Context, event?: ClickEvent) => {
    // 文本消息 email 点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessagePhoneClick: (message: Message, phone: string, context?: Context, event?: ClickEvent) => {
    // 文本消息手机号点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
}
RongIM.getInstance().conversationService().addMessageClickListener(msgClickListener);

增加消息气泡的长按事件

您可以通过 addMessageItemLongClickAction 方法设置会话页面的长按消息事件监听，在相关监听方法中自定义事件：

示例代码

TypeScript
let msgLongClickAction :ItemLongClickAction<Message> = {
  obtainTitle: (context: Context, data: Message): string | Resource => {
    return "自定义的消息长按事件"
  },
  onClick: (context: Context, data: Message): void => {
    promptAction.showToast({message : "点击了自定义的消息长按事件"})
  },
  onFilter: (data: Message): boolean => {
    // 是否显示该长按事件？true 显示；false 不显示
    // 开发者可以根据 Message 对象的会话类型或者消息类型决定是否显示
    return true;
  },
  // 自定义的消息长按事件 Id，相同的 Id 的长按事件只会增加一次
  actionId: 'CustomMessageActionId'
}
RongIM.getInstance().conversationService().addMessageItemLongClickAction(msgLongClickAction);

参数说明

ItemLongClickAction 类属性如下表所示。

属性	类型	描述
obtainTitle	string	显示名称。
onClick	(context: Context, data: Message): void	长按消息监听函数。
onFilter	int	控制是否会被显示出来的过滤器。
actionId	Filter	自定义的消息长按事件 Id，相同的 Id 的长按事件只会增加一次

配置消息气泡的长按更多选项

在长按消息弹窗的菜单选项选择更多后，SDK 进入消息多选模式，多选模式下默认提供了删除按钮。您可以增删已有按钮、添加自定义按钮。

IMKit SDK没有内置消息转发功能，实现可以参照：转发消息实现。

示例代码

TypeScript
let msgMoreAction : MessageMoreAction = {
  actionId: 'message_more_forward',// 动作 Id
  location: 100, // 按钮将放置在底部，根据 location 值，按照从小到大的顺序依次向右排列。
  icon: $r("app.media.rc_message_more_forward"), // 图标

  onClick: (context: Context, data: Message[]): boolean => {
    // 处理自定义的点击事件
    // return true ：聊天页面依旧处于多选状态
    // return false : 聊天页面退出多选状态
    promptAction.showToast({message : "点击了聊天页面底部的更多按钮"});
    return true
  },
  onFilter: (data: Message[]): boolean => {
    // 是否显示该按钮，true 显示，false 不显示
    return true;
  }
}
RongIM.getInstance().conversationService().addMessageMoreAction(msgMoreAction)

修改消息气泡的 UI 配置

IMKit 从 1.4.3 版本开始支持通过 setConversationConfig 方法传入对应的 ConversationConfig 对象修改消息气泡的 UI 配置。支持设置的属性：边框圆角大小、边框色、背景色。

提示

仅支持初始化前的配置，若初始化后开发者设置，则不会生效。

修改边框圆角大小

边框圆角大小支持按消息方向来设置：

设置/获取接收的消息气泡边框圆角大小：setReceivedMessageBorderRadius、getReceivedMessageBorderRadius。
设置/获取发送的消息气泡边框圆角大小：setSentMessageBorderRadius、getSentMessageBorderRadius。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
let receivedMessageBorderRadius: BorderRadiuses = {
  topLeft: 4,
  topRight: 8,
  bottomLeft: 8,
  bottomRight: 8
}
config.setReceivedMessageBorderRadius(receivedMessageBorderRadius);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改边框色

边框色支持按消息方向来设置：

设置/获取接收的消息气泡边框色：setReceivedMessageBorderColor、getReceivedMessageBorderColor。
设置/获取发送的消息气泡边框色：setSentMessageBorderColor、getSentMessageBorderColor。

通过指定消息的 objectName 仅修改文本消息类型的边框色为灰色，其他消息类型不修改。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBorderColor("RC:TxtMsg", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改全部消息类型的边框色为灰色。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBorderColor("", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

通过指定消息的 objectName 仅修改文本消息类型的边框色为灰色，同时修改其余消息类型的边框色为蓝色，与接口调用顺序无关。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBorderColor("RC:TxtMsg", Color.Gray);
config.setReceivedMessageBorderColor("", Color.Blue);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改背景色

背景色支持按消息方向来设置：

设置/获取接收的消息气泡背景色：setReceivedMessageBackgroundColor、getReceivedMessageBackgroundColor。
设置/获取发送的消息气泡背景色：setSentMessageBackgroundColor、getSentMessageBackgroundColor。

通过指定消息的 objectName 仅修改文本消息类型的背景色为灰色，其他消息类型不修改。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBackgroundColor("RC:TxtMsg", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改全部消息类型的背景色为灰色。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBackgroundColor("", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

通过指定消息的 objectName 仅修改文本消息类型的背景色为灰色，同时修改其余消息类型的背景色为蓝色，，与接口调用顺序无关。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBackgroundColor("RC:TxtMsg", Color.Gray);
config.setReceivedMessageBackgroundColor("", Color.Blue);
RongIM.getInstance().conversationService().setConversationConfig(config);

自定义输入框按钮UI

从 1.5.1 版本开始，IMKit 默认允许配置会话页面输入框的一些UI组件。可通过 setInputAreaComponentConfig(InputAreaComponentConfig) 接口设置自定义组件配置。

TypeScript
export interface InputAreaComponentConfig {
  /**
   * 组件标识
   */
  identifier: ComponentIdentifier,
  /**
   * 组件WrappedBuilder
   * @since 1.6.0
   */
  component: WrappedBuilder<[InputAreaComponentData]> | null,
}

/**
 * 输入区域自定义组件数据，封装必要的参数透传给自定义组件
 * @since 1.6.0
 */
export class InputAreaComponentData {
  /**
   * 上下文
   */
  context: Context | undefined;
  /**
   * 会话标识
   */
  convId: ConversationIdentifier | undefined;
  /**
   * 透传参数
   *
   *```
   * 当 `identifier` 为某些枚举类型的情况下有值，其余情况下为空。详细说明如下
   *  1. ComponentIdentifier.InputBarVoiceButton: "Voice" 语音类型、"Text" 文本类型。
   *  2. ComponentIdentifier.InputBarEmoticonButton: "Emoticon" 表情类型、"Text" 文本类型。
   *  3. ComponentIdentifier.DestructBarVoiceButton: "Voice" 语音类型、"Text" 文本类型。
   *```
   */
  data: string = "";
}

identifier 支持的组件类型说明:

组件类型	说明
`InputBarVoiceButton`	输入框左侧语音按钮
`InputBarEmoticonButton`	输入框表情按钮
`InputBarSendButton`	输入框发送按钮
`InputBarPluginButton`	输入框插件加号按钮
`InputBarExpandTextAreaButton`	文本输入组件输入了大于2行文本时，输入框左侧的展开输入按钮
`EmoticonBoardAddButton`	表情面板左下角的添加按钮

TypeScript
// 设置接口
let InputBarPluginButton: InputAreaComponentConfig = {
  identifier: ComponentIdentifier.InputBarPluginButton,
  component: wrapBuilder(buildCustomInputBarPluginView),
}
RongIM.getInstance().conversationService().setInputAreaComponentConfig(InputBarPluginButton)
  
// 组件
@Builder
export function buildCustomInputBarPluginView(componentData: InputAreaComponentData) {
  CustomInputBarPluginView({ context: componentData.context, convId: componentData.convId, type: componentData.data })
}

@Component
export struct CustomInputBarPluginView {
  @Prop context: Context;
  @Prop convId: ConversationIdentifier;
  @Prop type: string;

  aboutToAppear(): void {
    console.log("CustomInputBarPluginView  aboutToAppear " + this.type)
  }

  build() {
    Image($r('app.media.default_fmessage'))
      .size({ width: 30, height: 30 })
      .onTouch(() => {
        promptAction.showToast({ message: `点击了按钮` })
      })
  }
}

自定义会话页面按钮UI

从 1.6.0 版本开始，IMKit 默认允许配置会话页面的一些UI组件。可通过 setConversationContentComponentConfig(ConversationContentComponentConfig) 接口设置自定义组件配置。

ConversationContentComponentConfig 相关接口说明:

TypeScript
export interface ConversationContentComponentConfig {
  /**
   * 组件标识
   *
   *```
   * 注意：
   * ConversationContentComponentConfig 支持的类型：
   * - ConversationUnreadMessageButton;
   * - ConversationUnreadMentionedMessageButton;
   * - ConversationNewReceivedUnreadMessageButton
   *```
   */
  identifier: ComponentIdentifier,

  /**
   * 组件WrappedBuilder。
   */
  component: WrappedBuilder<[ConversationContentComponentData]> | null,
}

// 会话自定义组件数据
export class ConversationContentComponentData {
  /**
   * 上下文
   */
  context: Context | undefined;
  /**
   * 会话标识
   */
  convId: ConversationIdentifier | undefined;
  /**
   * 透传参数
   *
   *```
   * 与 `ConversationContentComponentConfig` 的 identifier` 参数具备对应关系，使用说明如下：
   *  1. 当 `identifier` 是 ConversationNewReceivedUnreadMessageButton， 代表在会话中新收到的未读消息的数量；
   *  2. 当 `identifier` 是 ConversationUnreadMessageButton， 代表会话中的未读消息数量；
   *  3. 当 `identifier` 是 ConversationUnreadMentionedMessageButton， 代表当前@自己的未读消息的数量；
   *```
   */
  data: number = 0;
  /**
   * 会话页面ViewModel，用来执行后续的事件
   *
   *```
   * 与 `ConversationContentComponentConfig` 的 identifier` 参数具备对应关系，使用说明如下：
   *  1. 当 `identifier` 是 ConversationNewReceivedUnreadMessageButton， 调用 `onClickNewReceivedUnreadMessageButton` 执行新收到未读消息的点击事件；
   *  2. 当 `identifier` 是 ConversationUnreadMessageButton，调用 `onClickUnreadMessageButton` 执行未读消息的点击事件；
   *  3. 当 `identifier` 是 ConversationUnreadMentionedMessageButton， 调用 `onClickUnreadMentionedMessageButton` 执行未读@我的消息的点击事件；
   *```
   *
   */
  conversationViewModel: IConversationViewModel | undefined
}

// ConversationViewModel的能力接口
export interface IConversationViewModel {
  /**
   * 进入会话时展示的未读消息的组件点击事件
   */
  onClickUnreadMessageButton(): void;
  /**
   * 进入会话时展示的未读@我的消息的组件点击事件
   */
  onClickUnreadMentionedMessageButton(): void;
  /**
   * 在进入会话后收到未读新消息的组件点击事件
   */
  onClickNewReceivedUnreadMessageButton(): void;
  /**
   * 获取输入框当前的文本输入组件的内容
   * @since 1.7.1
   */
  getInputTextAreaContent?():string;
  /**
   * 获取消息列表
   *
   * 注意：改返回列表仅用于读取，不建议修改。
   *
   * @returns 消息列表
   * @since 1.7.1
   */
  getMessageList?(): UiMessage[];
  /**
   * 刷新某条消息
   * @since 1.7.1
   */
  refreshUiMessage?(message: Message): void;
}

以下展示了进入会话后收到未读新消息的组件的自定义示例：

使用 alignRules 控制在屏幕中的位置。
使用 ConversationContentComponentData#data 观察未读消息数，具体描述见注释。
使用 ConversationContentComponentData#conversationViewModel 暴露会话页面能力，用来开发者处理点击事件，具体描述见注释。

TypeScript
@Builder
export function buildCustomConversationTopUnreadMessageButton(data: ConversationContentComponentData) {
  CustomConversationTopUnreadMessageButton({ context: data.context, convId: data.convId, unreadMessageCount: data.data, viewModel:data.conversationViewModel })
}

@Component
export struct CustomConversationTopUnreadMessageButton {
  @Prop context: Context;
  @Prop convId: ConversationIdentifier;
  @Prop unreadMessageCount: number;
  @Prop viewModel: IConversationViewModel;

  build() {
    if (this.unreadMessageCount > 10) {
      Row() {
        Image($r('app.media.rc_arrow')).width(12).height(9).objectFit(ImageFit.Contain)
        Text((this.unreadMessageCount > 99 ? "99+" : this.unreadMessageCount) + "条新消息")
          .fontSize(14)
          .fontColor($r('app.color.rc_color_111F2C'))
          .margin({ left: 6 })
      }
      .borderRadius({ topLeft: 24, bottomLeft: 24 })
      .height(48)
      .padding({ left: 10, right: 10 })
      .backgroundColor($r('app.color.rc_color_FFFFFF'))
      .alignRules({
        center: { anchor: "__container__", align: VerticalAlign.Center },
        right: { anchor: "__container__", align: HorizontalAlign.End }
      })
      .margin({ top: 14 })
      .onClick(() => {
        this.viewModel.onClickUnreadMessageButton()
      })
    }
  }
}

// 设置UI组件
let ConversationUnreadMessageButton: ConversationContentComponentConfig = {
  identifier: ComponentIdentifier.ConversationUnreadMessageButton,
  component: wrapBuilder(buildCustomConversationTopUnreadMessageButton),
}
RongIM.getInstance().conversationService().setConversationContentComponentConfig(ConversationUnreadMessageButton)

进入会话后收到未读新消息的组件、顶部未读@我的消息的组件设置如下

TypeScript
// 自定义收到新的未读消息的UI组件
let ConversationNewReceivedUnreadMessageButton: ConversationContentComponentConfig = {
  identifier: ComponentIdentifier.ConversationNewReceivedUnreadMessageButton,
  component: wrapBuilder(buildCustomConversationBottomUnreadMessageButton),
}
RongIM.getInstance().conversationService().setConversationContentComponentConfig(ConversationNewReceivedUnreadMessageButton)

// 自定义顶部未读@我的消息的UI组件
let ConversationUnreadMentionedMessageButton: ConversationContentComponentConfig = {
  identifier: ComponentIdentifier.ConversationUnreadMentionedMessageButton,
  component: wrapBuilder(buildCustomConversationTopUnreadMentionedMessageButton),
}
RongIM.getInstance().conversationService().setConversationContentComponentConfig(ConversationUnreadMentionedMessageButton)

增加 + 号扩展栏插件

内置插件说明

IMKit 内置插件列表如下所示。其中位置插件 SDK 仅定义，实际需要 App 侧来实现。

插件	插件名称	说明
图片插件	ImagePlugin	ImagePluginName "RC:ImagePlugin"
小视频插件	CameraPlugin	CameraPluginName "RC:CameraPlugin"
文件插件	FilePlugin	FilePluginName "RC:FilePlugin"
阅后即焚插件	DestructPlugin	DestructPluginName "RC:DestructPlugin"
位置插件	LocationPlugin	LocationPluginName "RC:LocationPlugin"

实现自定义插件

TypeScript
import { IBoardPlugin } from '@rongcloud/imkit';
import { ConversationIdentifier } from '@rongcloud/imlib';
import { promptAction } from '@kit.ArkUI';

/**
 * 自定义插件
 */
export class CustomInfoMessagePlugin implements IBoardPlugin {

  /**
   * 插件名，用来判断插件唯一标识。如果不设置则无法查找、替换操作
   * @returns 插件名
   * @version 1.4.3 新增
   */
  pluginName(): string {
    return "CustomInfoMessagePlugin"
  }
  
  /**
   * 返回插件的标题
   * @param context 上下文
   * @returns 标题
   */
  obtainTitle(context: Context): string | Resource {
    return "自定义小灰条消息"
  }

  /**
   * 返回插件的图片
   * @param context 上下文
   * @returns 图片
   */
  obtainImage(context: Context): Resource {
    return $r("app.media.startIcon");
  }

  /**
   * 插件的点击事件
   * @param context 上下文
   */
  onClick(context: Context, conId: ConversationIdentifier): void {
    if (!conId) {
      return;
    }

    // 处理具体的点击事件
    // 开发者按照实际情况处理
    promptAction.showToast({ message: '点击了自定义插件' })
  }

  /**
   * 是否在会话中显示该插件
   * @param conId 会话标识
   * @returns 是否显示，true 显示；false 不显示
   */
  onFilter(conId: ConversationIdentifier): boolean {
    return true;
  }
}

自定义插件UI

从 1.5.1 版本开始，IMKit 默认允许配置插件的UI组件。可以根据插件名替换自定义插件的UI，如果想替换SDK内置的插件UI，插件名参照内置插件说明。

TypeScript
@Builder
export function buildCustomMessagePluginView(context: Context, convId: ConversationIdentifier) {
  CustomMessagePluginView({ context: context, convId: convId })
}

@Component
export struct CustomMessagePluginView {
  @Prop context: Context;
  @Prop convId: ConversationIdentifier;

  build() {
    Column() {
      Text("自定义插件名").width("100%").fontSize(12).textAlign(TextAlign.Center)
      Image($r("app.media.rc_file_apk_icon")).width(40).height(40)
    }.width("100%").height("100%")
    .justifyContent(FlexAlign.SpaceEvenly).alignItems(HorizontalAlign.Center)
  }
}

// 替换自定义插件的UI组件
RongIM.getInstance().conversationService().setBoardPluginView("CustomInfoMessagePlugin", wrapBuilder(buildCustomMessagePluginView))

将插件放到扩展栏里面

需要在聊天页面出现前调用

添加插件

TypeScript
let customInfoMessagePlugin = new CustomInfoMessagePlugin();
RongIM.getInstance().conversationService().addBoardPlugin(customInfoMessagePlugin);

将插件放到指定位置

提示

1.4.3 版本起，如果想调整 SDK 默认展示的插件以及插件的顺序，需要通过动态配置扩展面板插件功能配置。

TypeScript
let index : number = 0
let customInfoMessagePlugin = new CustomInfoMessagePlugin();
RongIM.getInstance().conversationService().insertBoardPlugin(index, customInfoMessagePlugin);

替换指定位置的插件，如果没有对应的索引，会将插件放到最后

提示

1.4.3 版本起，如果想调整 SDK 默认展示的插件以及插件的顺序，需要通过动态配置扩展面板插件功能配置。

TypeScript
let index : number = 0
let customInfoMessagePlugin = new CustomInfoMessagePlugin();
RongIM.getInstance().conversationService().replaceBoardPlugin(index, customInfoMessagePlugin);

移除特定的插件

提示

1.4.3 版本起，如果想调整 SDK 默认展示的插件以及插件的顺序，需要通过动态配置扩展面板插件功能配置

TypeScript
let customInfoMessagePlugin = new CustomInfoMessagePlugin();
RongIM.getInstance().conversationService().removeBoardPlugin(customInfoMessagePlugin);

根据插件名移除特定的插件

自定义插件实现 pluginName() 接口返回插件名，便可以通过 removeBoardPluginByName 来移除插件。
系统插件均实现了 pluginName()，可以参照上面表格中插件对应的名字，通过 removeBoardPluginByName 来移除插件。

TypeScript
RongIM.getInstance().conversationService().removeBoardPluginByName("插件名");

清空当前的插件。

提示

该接口只能清空通过 addBoardPlugin、insertBoardPlugin、replaceBoardPlugin 添加的插件。通过动态配置扩展面板插件可以做到彻底清空。

TypeScript
RongIM.getInstance().conversationService().clearBoardPlugin();

动态配置扩展面板插件

如果应用程序需要动态添加、删除扩展面板插件，或者调整插件位置，建议通过创建自定义的扩展面板配置实现这些自定义需求。

您需要实现 IExtensionConfig，创建自定义的扩展面板配置类，重写 getPluginModules() 方法。您可以增加或删除扩展项，也可以调整各插件的位置。在 SDK 初始化之后，调用 setExtensionConfig 方法设置好自定义的输入配置，SDK 会根据此配置展示扩展面板。

示例代码

TypeScript
// 获取当前的插件配置
let config = RongIM.getInstance().conversationService().getExtensionConfig()

let mCustomExtensionConfig: IExtensionConfig = {
  getPluginModules: (convId: ConversationIdentifier) => {
    // 根据插件配置获取对应会话标识的插件
    let currentPlugins = config.getPluginModules(ConversationIdentifier.createWith2(ConversationType.Private, "TargetID"))
    let plugins: ArrayList<IBoardPlugin> = new ArrayList<IBoardPlugin>()
    // 这里示范了去除文件插件的操作。当然也可以根据 pluginName 来重新排序插件等操作。
    for (let plugin of currentPlugins) {
      if (plugin.pluginName && plugin.pluginName() !== FilePluginName) {
        plugins.add(plugin)
      }
    }
    // 添加业务侧自定义的插件
    plugins.add(new TestPlugin1())
    plugins.add(new TestPlugin2())
    return plugins
  }
}

/// 在 SDK 初始化之后调用
RongIM.getInstance().conversationService().setExtensionConfig(mCustomExtensionConfig)

消息头像圆角控制

您可以通过全局配置控制消息头像圆角展示，需要在会话页面展示前设置。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setMessageAvatarStyle(AvatarStyle.Cycle);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改消息可撤回的最大时间

IMKit 默认允许在消息发送后 180 秒内撤回。您可以通过全局配置调整该上限，需要在会话页面展示前设置。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setMaxRecallDuration(180)
RongIM.getInstance().conversationService().setConversationConfig(config)

修改撤回后可重新编辑的时间

IMKit 默认允许在消息撤回后 30 秒内可点击重新编辑，仅文本消息支持撤回再编辑。您可以通过全局配置调整该上限，需要在会话页面展示前设置。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setMaxEditableDuration(30)
RongIM.getInstance().conversationService().setConversationConfig(config)

文本消息字体高亮颜色

IMKit 默认允许配置 SDK 内置文本消息中的 url、手机号、@ 信息等高亮字体颜色，默认黑色。您可以通过全局配置调整，需要在会话页面展示前设置。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setStyleFontColor(Color.Blue)
RongIM.getInstance().conversationService().setConversationConfig(config)

文本和引用消息内容自定义渲染

从 1.6.0 版本开始，IMKit 默认允许配置 SDK 内置文本、引用消息的文本内容渲染拦截事件接口。您可以通过全局配置调整，需要在会话页面展示前设置。

该接口如果返回 true ，那么文本消息字体高亮颜色则不会生效。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
let interceptor = (controller: TextController, content: string) => {
  if ("不需要拦截的场景") {
    return false
  }
  let styledString: MutableStyledString = new MutableStyledString(content)
  // 内容匹配到regContent则变成红色高亮
  let regContent = "融云"
  let matches = content.matchAll(new RegExp(regContent, 'g'));
  // 是否匹配到内容
  let hasMatch = false
  for (let match of matches) {
    hasMatch = true
    const index = match.index
    if (index != undefined) {
      styledString.setStyle({
        start: index,
        length: regContent.length,
        styledKey: StyledStringKey.FONT,
        styledValue: new TextStyle({ fontColor: Color.Red })
      })
    }
  }
  controller.setStyledString(styledString)
  return true
}
config.setMessageRenderTextInterceptor(interceptor)
RongIM.getInstance().conversationService().setConversationConfig(config)

设置文件消息的文件类型图标

IMKit 默认允许配置 SDK 内置文件消息的文件类型图标。您可以通过全局配置调整，需要在会话页面展示前设置。

设置文件消息的文件类型图标

您可以通过 setFileMessageIcons 覆盖默认的文件消息的文件类型图标。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
//设置图片
let iconsMap: Map<string, Resource> = new Map<string, Resource>();
//覆盖SDK默认图片
iconsMap.set('doc', $r("app.media.doc_icon"));
iconsMap.set('mp3', $r("app.media.mp3_icon"));
iconsMap.set('pdf', $r("app.media.pdf_icon"));
iconsMap.set('rmvb', $r("app.media.rmvb_icon"));
iconsMap.set('default', $r("app.media.rc_default_icon"));
config.setFileMessageIcons(iconsMap);
RongIM.getInstance().conversationService().setConversationConfig(config)

获取文件消息内的文件类型图标 map

您可以通过 getFileMessageIcons 获取文件消息内的文件类型图标 map。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.getFileMessageIcons();

可以通过 getFileMessageIcon 获取文件消息内的文件类型图标，如果找不到，返回 SDK 内置的默认图标。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.getFileMessageIcon('doc');

修改消息重发开关

IMKit 从 1.4.3 版本开始支持消息发送失败时自动消息重发。

提示

为了跟 iOS、Android 端现有逻辑保持一致，该配置默认值为为 true。

从 1.4.3 以下版本升级的客户，会改变默认行为，如果不想消息重发，需要主动设置为 false。

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

群消息回执配置

IMKit 从 1.7.1 版本开始支持群消息回执支持配置每条消息都显示已读未读信息。该配置默认为false。

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

引用消息点击跳转行为配置

从 1.6.0 版本开始，IMKit 默认允许配置 SDK 内置引用消息的引用消息点击跳转行为。您可以通过全局配置调整，需要在会话页面展示前设置。

SDK 配置默认为 JumpToDetailPage。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setReferencedMessageClickType(ReferencedMessageClickType.ScrollToReferencedMessage)
RongIM.getInstance().conversationService().setConversationConfig(config)

ReferencedMessageClickType 说明

TypeScript
// 引用消息的被引用消息体点击后的处理方式
export enum ReferencedMessageClickType {
  /**
   * 跳转到预览页面。
   */
  JumpToDetailPage,
  /**
   * 滚动到被引用消息，如果被引用消息在本地数据库中不存在，则不会进行跳转，并提示"未找到被引用消息"
   */
  ScrollToReferencedMessage
}

会话页面事件

IMKit 提供了会话页面事件监听器 ConversationEventListener，可监听会话页面中输入 @ 时跳转用户列表选择用户事件、当输入状态变化时的事件。需要在会话页面展示前设置。

示例代码

TypeScript
import {
  ConversationEventListener
} from '@rongcloud/imkit';

export interface ConversationEventListener {
  /**
   * 输入@时，跳转用户列表选择用户
   * @param select 选中的用户信息
   */
  onInputMention?: (select: (user: UserInfoModel) => void) => void;

  /**
   * 当输入状态变化时
   * @param isEditing
   */
  onEditChange?: (isEditing: boolean) => void;
}

设置/移除会话页面事件监听

您可以使用 RongIM 的 addConversationEventListener、removeConversationEventListener 方法添加或者监听器。

建议添加监听后，在合适的时机移除，避免内存泄露。如果在页面中监听，建议在 aboutToAppear 调用，在 aboutToDisappear 移除监听。

示例代码

TypeScript
// 添加监听器
RongIM.getInstance().conversationService().addConversationEventListener(listener);
// 移除监听器
RongIM.getInstance().conversationService().removeConversationEventListener(listener);

输入@时跳转页面并返回数据

当会话页面输入框输入 @ 时，会触发以下方法。如果未设置，SDK 默认不处理该事件。

处理流程：

收到 onInputMention 时跳转到用户列表页面选择用户；
返回到当前页面后，调用 select 回传 UserInfoModel 给 SDK。

TypeScript
let conversationEventListener: ConversationEventListener = {
  onInputMention: (select: (user: UserInfoModel) => void) => {
    if (this.conId.conversationType === ConversationType.Group) {
      // 1. 跳转到用户列表页面选择用户;
      // new NavPathStack().pushPath();
      // 2. 调用 select 回传 UserInfoModel 给SDK。
      const userInfo = new UserInfoModel('userId', 'userName', '')
      select(userInfo);
    }
  }
}

输入状态发生变化

当会话页面输入状态发生变化时，会触发 onEditChange 方法。如果未设置，SDK 默认不处理该事件。

TypeScript
let conversationEventListener: ConversationEventListener = {
    onEditChange: (isEditing: boolean) => {
      // isEditing代表输入状态发生变化
    }
}

会话页面代理接口

IMKit 提供了会话页面代理接口 ConversationComponentDelegate，可监听会话页面生命周期。

TypeScript
export interface ConversationComponentDelegate {
  /**
   * IConversationViewModel的创建回调
   * @version 1.7.1
   */
  onViewModelBind?: (vm: IConversationViewModel) => void;

  /**
   * IConversationViewModel的清理回调
   * @version 1.7.1
   */
  onViewModelClear?: () => void;
}

获取ViewModel

构建 ConversationComponentDelegate 接口传给 ConversationComponent，在 onViewModelBind 方法中可以拿到 IConversationViewModel。

代码示例

TypeScript
@Component
struct CustomChatPage {
  private vm: IConversationViewModel | undefined
  private delegate: ConversationComponentDelegate = {
    onViewModelBind: (vm: IConversationViewModel) => {
      this.vm = vm;
    },
    onViewModelClear: () => {
      this.vm = undefined
    }
  }

  build() {
    ConversationComponent({
      conversationData: this.conversationComponentData,
      pageShow: this.pageShow,
      isEdit: this.isEdit,
      delegate: this.delegate,
    }).layoutWeight(1)
  }
}

ViewModel能力说明

以下是 IConversationViewModel 接口的能力说明，具备常见的能力如：更新或获取输入框内容、获取消息列表、刷新某条消息，具体见下方代码示例。

TypeScript
export interface IConversationViewModel {
  /**
   * 进入会话时展示的未读消息的组件点击事件
   */
  onClickUnreadMessageButton(): void;
  /**
   * 进入会话时展示的未读@我的消息的组件点击事件
   */
  onClickUnreadMentionedMessageButton(): void;
  /**
   * 在进入会话后收到未读新消息的组件点击事件
   */
  onClickNewReceivedUnreadMessageButton(): void;

  /**
   * 更新输入框的文本组件的内容
   * @since 1.7.0
   */
  onChangeInputTextAreaContent?(text: string): void;
  /**
   * 获取输入框当前的文本输入组件的内容
   * @since 1.7.0
   */
  getInputTextAreaContent?():string;

  /**
   * 获取消息列表
   *
   * 注意：改返回列表仅用于读取，不建议修改。
   *
   * @returns 消息列表
   * @since 1.7.1
   */
  getMessageList?(): UiMessage[];

  /**
   * 刷新某条消息
   * @since 1.7.1
   */
  refreshUiMessage?(message: Message): void;
}

IMLib

IMKit

Global IM UIKit

推送服务

IMLib

IMKit

Global IM UIKit

CallLib

CallKit

CallPlus

RTCLib

CallLib

CallPlus

RTCLib

IM 服务端

IM Server SDK

RTC 服务端

消息点击事件​

示例代码​

增加消息气泡的长按事件​

示例代码​

参数说明​

配置消息气泡的长按更多选项​

示例代码​

修改消息气泡的 UI 配置​

修改边框圆角大小​

示例代码​

修改边框色​

示例代码​

示例代码​

示例代码​

修改背景色​

示例代码​

示例代码​

示例代码​

自定义输入框按钮UI​

自定义会话页面按钮UI​

增加 + 号扩展栏插件​

内置插件说明​

实现自定义插件​

自定义插件UI​

将插件放到扩展栏里面​

添加插件​

将插件放到指定位置​

替换指定位置的插件，如果没有对应的索引，会将插件放到最后​

移除特定的插件​

根据插件名移除特定的插件​

清空当前的插件。​

动态配置扩展面板插件​

示例代码​

消息头像圆角控制​

示例代码​

修改消息可撤回的最大时间​

示例代码​

修改撤回后可重新编辑的时间​

示例代码​

文本消息字体高亮颜色​

示例代码​

文本和引用消息内容自定义渲染​

设置文件消息的文件类型图标​

设置文件消息的文件类型图标​

示例代码​

获取文件消息内的文件类型图标 map​

示例代码​

修改消息重发开关​

群消息回执配置​

引用消息点击跳转行为配置​

会话页面事件​

示例代码​

设置/移除会话页面事件监听​

示例代码​

输入@时跳转页面并返回数据​

输入状态发生变化​

会话页面代理接口​

获取ViewModel​

ViewModel能力说明​

消息点击事件

示例代码

增加消息气泡的长按事件

示例代码

参数说明

配置消息气泡的长按更多选项

示例代码

修改消息气泡的 UI 配置

修改边框圆角大小

示例代码

修改边框色

示例代码

示例代码

示例代码

修改背景色

示例代码

示例代码

示例代码

自定义输入框按钮UI

自定义会话页面按钮UI

增加 + 号扩展栏插件

内置插件说明

实现自定义插件

自定义插件UI

将插件放到扩展栏里面

添加插件

将插件放到指定位置

替换指定位置的插件，如果没有对应的索引，会将插件放到最后

移除特定的插件

根据插件名移除特定的插件

清空当前的插件。

动态配置扩展面板插件

示例代码

消息头像圆角控制

示例代码

修改消息可撤回的最大时间

示例代码

修改撤回后可重新编辑的时间

示例代码

文本消息字体高亮颜色

示例代码

文本和引用消息内容自定义渲染

设置文件消息的文件类型图标

设置文件消息的文件类型图标

示例代码

获取文件消息内的文件类型图标 map

示例代码

修改消息重发开关

群消息回执配置

引用消息点击跳转行为配置

会话页面事件

示例代码

设置/移除会话页面事件监听

示例代码

输入@时跳转页面并返回数据

输入状态发生变化

会话页面代理接口

获取ViewModel

ViewModel能力说明