Chat UI

The chat UI is the chat page within the application. Global IM UIKit provides the RCChatViewController class, which is implemented based on the UIKit UIViewController class. It consists of three parts: the navigation bar, the message list, and the input area.

Chat Interface

The chat UI displays all message objects and serves as the entry point for all messages. Common message types in Global IM UIKit include text, images, videos, files, voice messages, stickers, etc. It supports quick interactions such as replying, forwarding, and copying.

Navigation Bar

Global IM UIKit's RCChatViewController uses the system's navigation bar. RCChatHeaderView, which inherits from RCBaseHeaderView, is used to configure the navigation bar properties. RCChatHeaderView provides the following default properties:

• The backItem corresponds to the left button, which displays the conversation name and avatar. Clicking it will exit the current page. It supports connection status and typing status change prompts.
• The moreItem corresponds to the right button, which opens a menu with more options. By default, it supports enabling/disabling notifications and deleting messages.

Message List

The message list in Global IM UIKit's RCMessageListView displays all messages in chronological order and can be positioned to the first unread message, the latest message, or a specific historical message based on RCChatViewConfig.

The message list view is implemented based on UITableView. Different message types such as text, images, and videos are displayed by inheriting from RCMessageCell. For example, RCTextMessageCell, RCFileMessageCell, and RCImageMessageCell inherit from RCMessageCell to display RCTextMessage, RCFileMessage, and RCImageMessage in the conversation. If you customize a message Cell, you must register the message Cell based on the message type.

Initialization

When developing with Global IM UIKit, it is recommended to inherit from the RCChatViewController class to create a custom chat page. When troubleshooting or reproducing issues related to the chat page, you can directly use the RCChatViewController class.

RCChatViewController provides two initialization methods:

/// Initialization method
/// - Parameter chatModel: The conversation
- (instancetype)initWithChatModel:(RCChatModel *)chatModel;

/// Initialization method
/// - Parameter conversationIdentifier: The conversation identifier
- (instancetype)initWithConversationIdentifier:(RCConversationIdentifier *)conversationIdentifier;

By default, when navigating from the conversation list to the chat page, the initWithChatModel: method is called to construct the chat page. If navigating from other pages such as the address book, the initWithConversationIdentifier: method can be used to construct the chat page.

To create a class that inherits from the chat page, TestChatViewController : RCChatViewController:

if (self.navigationController) {
    TestChatViewController *controller = [[TestChatViewController alloc] initWithChatModel:chatModel];
    [self.navigationController pushViewController:controller animated:YES];
} else {
    // If there is no UINavigationController externally, create one
    TestChatViewController *controller = [[TestChatViewController alloc] initWithChatModel:chatModel];
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:controller];
    navigationController.modalPresentationStyle = UIModalPresentationOverFullScreen;
    navigationController.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    [self presentViewController:navigationController animated:YES completion:nil];
}

The chat page must have a navigation controller. If there is no controller, refer to the code example to create one.

Chat Page View Controller

In the RCChatViewController class, the chat page mainly consists of three parts:

Property Name	Type	Description
headerView	RCChatHeaderView	UI component, the navigation header of the chat view, implemented based on the system navigation.
listView	RCMessageListView	UI component, the list view that displays messages.
inputBar	RCInputBar	UI component, the input panel for typing messages.
viewModel	RCChatViewModel	The ViewModel associated with this ViewController.
config	RCChatViewConfig	The configuration class for the chat view in the chat page. Some styles and behaviors in the chat page are influenced by Global IM UIKit's global configuration. For global configuration, see [UIKit Configuration Guide].

The view structure is as follows:

Customizing the Navigation Bar

Global IM UIKit's RCChatViewController uses the system's navigation bar. RCChatHeaderView, which inherits from RCBaseHeaderView, is used to configure the navigation bar properties.

Modifying Navigation Bar Buttons

RCChatHeaderView has two default properties:

/// The BarItem corresponding to the left button
@property (nonatomic, strong) RCBarItem *backItem;

/// The BarItem corresponding to the right button
@property (nonatomic, strong) RCBarItem *moreItem;

• The backItem corresponds to the left button, which displays the conversation name and avatar. Clicking it will exit the current page. It supports connection status and typing status change prompts.

• The moreItem corresponds to the right button, which opens a menu with more options:

  • Enable or disable notifications: Set notification reminders for the current conversation.
  • Search: The SDK throws the didClickSearchBarItem event, which you can handle by overriding the method.
  • Delete messages: Clear all messages in the current conversation.

The chat page, like the conversation list, supports modifying buttons and titles. For the default two buttons, you can customize them.

In the conversation class, override the willDisplayMoreMenu:forChatModel: method to customize more events:

- (NSArray<RCChatMoreBarItem *> *)willDisplayMoreMenu:(NSArray<RCChatMoreBarItem *> *)items
                                            forChatModel:(RCChatModel *)chatModel {
    NSArray *items = [super willDisplayMoreMenu:items forChatModel:chatModel];
    // Custom items
    return items;
}

Disabling Navigation Bar Status Display

The navigation bar status display is enabled by default, showing the connection status and typing status. You can disable the sending and connection status display in the global configuration:

/// Whether to display the network status, default is YES
[RCIMKitConfig shared].displayNetStatus = NO;
/// Whether to display the sending status, default is YES
[RCIMKitConfig shared].displaySendStatus = NO;

Customizing the Message List

The message list in Global IM UIKit's RCMessageListView displays all messages in chronological order. The message list view is implemented based on UITableView. Different message types are displayed by inheriting from RCMessageCell, and the corresponding RCMessageCell is registered based on the message type.

For example, RCTextMessageCell, RCFileMessageCell, and RCImageMessageCell inherit from RCMessageCell to display RCTextMessage, RCFileMessage, and RCImageMessage in the conversation.

The message list data source can be obtained through the ViewModel's messageModels property.

Customizing Message Cells

RCMessageListView supports registering custom message display Cells. You can register custom message display templates using the registerClass:forMessageClass: method. For detailed usage, see Message Display Style.

tip

To learn about events related to the message list, go to [Page Event Listening].

Input Component

RCInputBar is Global IM UIKit's message input component, where users can type and send messages. It supports message types such as text, files, voice, images, and videos. The input area view is created and controlled in RCInputBar.

Global IM UIKit has provided some input component-related event callbacks in RCChatViewController.

Other Customizations

Modifying Default Navigation Behavior

The chat page supports three navigation modes:

• RCChatDisplayModeFirstUnreadMessage: Navigate to the first unread message.
• RCChatDisplayModeLastUnreadMessage: Navigate to the latest message (default).
• RCChatDisplayModeHistoryMessage: Navigate to a specific historical message.

@property (nonatomic, assign) RCChatDisplayMode displayMode;

When displayMode is set to RCChatDisplayModeHistoryMessage, the application also needs to set the locatedTime in RCChatViewConfig to the time of the message to be navigated to. Global IM UIKit will then navigate to the specified message. The default locatedTime = 0.

@property (nonatomic, assign) long locatedTime;

Modifying Message Recall Time Limit

RCChatViewConfig has two properties for configuring message recall-related limits.

• recallDuration: Controls the time limit for recalling a message after it is sent, default is 120 seconds.

For more details, see Delete Messages.

Configuring Message Display Style

The chat page model is RCMessageModel. The following properties in RCMessageModel can be used to configure the display style of message cells:

More Features

You can continue to learn how to customize the chat page in the following documents:

• Unread Message Count
• Message Display Style
• Input Area
• Page Event Listening