Single Chat/ Group Chat

Initialize#

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)
}

Usage#

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
headerComponentMFUIChatViewParentModule.Header
listComponentMFUIChatViewParentModule.List
inputComponentMFUIChatViewParentModule.Input

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)

HeaderRecentChat

Customisation of Message Cell#

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

MessageCellCustom

Background Color#

It represents the background color of the message list.

CategoryPropertyDescription
Background colorbackgroundColorbackground color of the message list

Receiver cell Background#

Receiver cell background can be customised using the below property

CategoryPropertyDescription
Background colorrightBackgroundColorbackground color of the receiver message cell

Receiver cell Text color#

Receiver cell text color can be customised using the below property

CategoryPropertyDescription
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)

InputChat

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

MessageCellCustomisation