Single Chat/ Group Chat


You start building the chat service by calling the MFUIChatViewParentController class. It uses MFUIUserMessageCell class to display the messages in chat.

The MFUIChatViewParentController should get initialised with the recent chat obtained from the previous screen.

open func chatListModule(_ listComponent: MFUIRecentChatListModule.List,
didSelectRowAt indexPath: IndexPath) {
guard let chat = self.viewModel?.recentChatList[indexPath.row] else { return }
let vc = MFUIChatViewParentController.init(chat: chat)
self.navigationController?.pushViewController(vc, animated: true)


The following items are key elements of MFUIChatViewParentController that are used to create a functional chat.

Module components#

In the MFUIChatViewParentController class, MFUIChatViewParentModule and its components are used to create and display the chat view. The module is composed of three components: headerComponent, listComponent, and inputComponent.

Property nameType

Customisation Of Header Component#

The Header component can be customised using the MFComponentTheme as below

let compTheme = MFComponentTheme()
compTheme.titleColor = .red
compTheme.titleFont = MFUIFontSet.h1
let theme = MFUITheme(componentTheme: compTheme )
MFUITheme.set(theme: theme)


Customisation of Message Cell#

The UI components of the Message Cell can be customised by using the MFMessageCellTheme in MFUITheme.


Background Color#

It represents the background color of the message list.

Background colorbackgroundColorbackground color of the message list

Receiver cell Background#

Receiver cell background can be customised using the below property

Background colorrightBackgroundColorbackground color of the receiver message cell

Receiver cell Text color#

Receiver cell text color can be customised using the below property

Background coloruserMessageRightTextColortext color of the receiver message cell

Customisation Of Input Component#

The Input component can be customised using the MFMessageInputTheme as below

let messageInputTheme = MFMessageInputTheme()
messageInputTheme.textFieldBackgroundColor = .lightGray
let theme = MFUITheme(messageInputTheme: messageInputTheme)
MFUITheme.set(theme: theme)


The following screenshot shows the message cell before and after the customisation