Input Area

The input area in IMKit is uniformly created and controlled by RCChatSessionInputBarControl, supporting custom input modes, custom extension areas (plugins), and custom emojis.

tip

The input area in the following image includes (from left to right): voice/text toggle button, content input box, emoji panel button, and extension panel button.

Modify Input Bar Layout

IMKit's input bar provides voice/text toggle, content input, and extension area functionalities, with support for modifying the layout. For example, you can remove the voice/text toggle button and extension panel, retaining only the content input feature.

IMKit defines multiple layout combinations in RCChatSessionInputBarControlStyle:

Layout Combination	Enum
Voice/Text Toggle - Input Box - Extensions	RC_CHAT_INPUT_BAR_STYLE_SWITCH_CONTAINER_EXTENTION
Extensions - Input Box - Toggle	RC_CHAT_INPUT_BAR_STYLE_EXTENTION_CONTAINER_SWITCH
Input Box - Voice/Text Toggle - Extensions	RC_CHAT_INPUT_BAR_STYLE_CONTAINER_SWITCH_EXTENTION
Input Box - Extensions - Toggle	RC_CHAT_INPUT_BAR_STYLE_CONTAINER_EXTENTION_SWITCH
Voice/Text Toggle - Input Box	RC_CHAT_INPUT_BAR_STYLE_SWITCH_CONTAINER
Input Box - Toggle	RC_CHAT_INPUT_BAR_STYLE_CONTAINER_SWITCH
Extensions - Input Box	RC_CHAT_INPUT_BAR_STYLE_EXTENTION_CONTAINER
Input Box - Extensions	RC_CHAT_INPUT_BAR_STYLE_CONTAINER_EXTENTION
Input Box	RC_CHAT_INPUT_BAR_STYLE_CONTAINER

You can modify the input bar style after viewDidLoad in the subclass of RCConversationViewController. Use the setInputBarType method of chatSessionInputBarControl to adjust the order or disable certain input modes. IMKit provides various layout combinations in RCChatSessionInputBarControlStyle.

RCChatSessionInputBarControlStyle style = RC_CHAT_INPUT_BAR_STYLE_SWITCH_CONTAINER_EXTENTION;
[self.yourChatVC.chatSessionInputBarControl setInputBarType:RCChatSessionInputBarControlDefaultType style:style];

Hide the Emoji Panel Button in the Input Bar

tip

This feature is available starting from IMKit SDK version 5.3.2.

You can hide the emoji button in the input bar after viewDidLoad in the subclass of RCConversationViewController:

[self.yourChatVC.chatSessionInputBarControl.inputContainerView.hideEmojiButton = YES];

Input Area Extension Panel

IMKit refers to the panel displayed when clicking the + button in the input bar as the extension panel, which showcases currently available plugins.

Extension Panel Plugin List

The complete plugin list in IMKit is shown below. By default, the extension panel includes only built-in plugins (Photo and File). For other plugins, integrate the corresponding plugin libraries provided by IMKit, which will be automatically loaded and displayed after integration.

Module Name	Plugin Name	Description
Built-in Plugins	Photo	Includes album and camera plugins, supporting photo capture and sending from the album by default. Supports short video sending and recording when integrated with the Sight plugin.
Built-in Plugins	File	File plugin, requires manual activation. Enables file sending.
RongLocationKit	LocationKit	Location message sending. Available when the LocationKit library is integrated.
RongSight	Sight	Short video plugin. Available when the Sight library is integrated.
RongContactCard	ContactCard	Contact card plugin. Available when the ContactCard library is integrated. Requires contact list configuration.
RongIFlyKit	IFly	Voice input plugin. Available when the IFly library is integrated. Requires replacing with your own iFlytek Framework (including your iFlytek App Key).
RCCallKitExtensionModule	CallKit Voice Call Plugin	Voice call plugin. Available when CallKit is integrated.
RCCallKitExtensionModule	CallKit Video Call Plugin	Video call plugin. Available when CallKit is integrated.

Add Voice-to-Text Input Plugin

IMKit has developed a voice-to-text plugin library IFly based on the iFlytek SDK. After integrating the IFly library, IMKit automatically generates a voice input entry in the extension panel. Users can click the voice input button to convert recorded voice into text and display it in the input bar.

IMKit's IFly library depends on the iFlytek SDK iflyMSC.framework. Since the iFlytek SDK is a paid service, the plugin does not include an iFlytek App Key. Due to the strong binding between iFlytek's App Key and iflyMSC.framework, you must replace iflyMSC.framework when integrating the plugin.

Download the iflyMSC.framework SDK from the iFlytek official website to replace the one in the voice input plugin.

The voice plugin (IFly) supports only source code integration. To use the voice plugin, you must integrate the IMKit SDK in source code mode. Refer to Import SDK.

pod 'RongCloudOpenSource/IFly','~> x.y.z'            # Voice input

tip

x.y.z represents the specific version. Check the latest version on the RC official website SDK download page or CocoaPods repository.

Integration steps:

1. Visit the iFlytek official website, apply for an account, and download the SDK.

2. Set the iFlytek App Key.

   1. Reference the voice input module.

      #import <RongCloudOpenSource/RongiFlyKit.h>

2. Call the following interface before initWithAppKey in RCIM.

   [RCiFlyKit setiFlyAppKey:@"iFlytek appkey"];

3. Delete iflyMSC.framework from RongCloudOpenSource. The path in the Xcode project is: Pods -> Pods -> RongCloudOpenSource -> IFly -> Frameworks -> iflyMSC.framework.

   

4. Configure the app to depend on the iflyMSC.framework you downloaded.

   

Add Other Plugins

To learn how to add other plugins to the extension panel, refer to the following documentation:

• Voice Messages
• Short Video Messages
• Location Messages
• Contact Card Messages
• Integrate CallKit

Dynamically Configure Extension Panel Plugins

You can add, remove, update items displayed on the extension panel, or customize click events.

The default extension items in IMKit SDK have unique identifiers in the range 1XXX. If you add custom extension items, avoid using 1XXX for tag values to prevent conflicts with SDK-reserved identifiers.

Plugin	Extension Item Definition Name	Tag Value
Photo	PLUGIN_BOARD_ITEM_ALBUM_TAG	1001
Camera	PLUGIN_BOARD_ITEM_CAMERA_TAG	1002
Location	PLUGIN_BOARD_ITEM_LOCATION_TAG	1003
File	PLUGIN_BOARD_ITEM_FILE_TAG	1006
Voice Call	PLUGIN_BOARD_ITEM_VOIP_TAG	1101
Video Call	PLUGIN_BOARD_ITEM_VIDEO_VOIP_TAG	1102
Voice Input	PLUGIN_BOARD_ITEM_VOICE_INPUT_TAG	1105
Contact Card	PLUGIN_BOARD_ITEM_CARD_TAG	1107

For more identifier definitions, refer to the RCChatSessionInputBarControl class.

Add an Extension Item

You can insert an extension item into the extension panel after viewdidload in the subclass of RCConversationViewController. Avoid using tag values in the 1XXX range to prevent conflicts with SDK-reserved identifiers.

Parameter Description

Parameter	Type	Description
normalImage	UIImage	Display image of the extension item
highlightedImage	UIImage	Highlighted image when touched
title	NSString	Display title of the extension item
index	NSInteger	Index where the item will be added
tag	NSInteger	Unique identifier of the extension item

Sample Code

[self.chatSessionInputBarControl.pluginBoardView insertItem:[UIImage imageNamed:@"plugin_item_poke"] highlightedImage:[UIImage imageNamed:@"plugin_item_poke_highlighted"] title:RCDLocalizedString(@"Poke") tag:20090];

Update a Specific Extension Item

You can update a specific extension item in the extension panel based on its tag, including both RC-provided and custom extension items.

Parameter Description

Parameter	Type	Description
tag	NSInteger	Unique identifier of the extension item
normalImage	UIImage	Display image of the extension item
highlightedImage	UIImage	Highlighted image when touched
title	NSString	Display title of the extension item

Sample Code

[self.chatSessionInputBarControl.pluginBoardView updateItemWithTag:101 normalImage:[UIImage imageNamed:@"plugin_item_poke"] highlightedImage:[UIImage imageNamed:@"plugin_item_poke_highlighted"] title:newTitle];

Remove a Specific Extension Item

You can remove a specific extension item from the extension panel based on its tag, including both RC-provided and custom extension items.

Parameter Description

Parameter	Type	Description
tag	NSInteger	Unique identifier of the extension item

Sample Code

[self.chatSessionInputBarControl.pluginBoardView removeItemWithTag:PLUGIN_BOARD_ITEM_LOCATION_TAG];

Handle Extension Item Click Events

You can override the pluginBoardView: method in the conversation page to determine if the click event belongs to a custom extension item based on the tag. If not, call the super method of the same name to avoid affecting default extension functionalities.

Parameter Description

Parameter	Type	Description
pluginBoardView	RCPluginBoardView	Extension panel view
tag	NSInteger	Unique identifier of the extension item

Sample Code

- (void)pluginBoardView:(RCPluginBoardView *)pluginBoardView clickedItemWithTag:(NSInteger)tag;