Recent Chats List

The MFUIRecentChatListViewController is a class that is used to build a recent chats list view. Once the client app is connected to MirrorFly server, the class is called and a list of Chats in the client app is displayed. All chat services built with MirrorFly UIKit begin from the recent chats list.

Module Components#

In the MFUIRecentChatListViewController class, MFUIRecentChatListModule and its components are used to create and display the chat list view. The module is composed of two components: headerComponent and listComponent.

Property nameType
headerComponentMFUIRecentChatListModule.Header
listComponentMFUIRecentChatListModule.List

When the loadView() method of the view controller is called, the module components get added to the view in the setupView() method of the MirrorFly UIKit's view life cycle. Then, the configure() method of each module component is called to set the property values and display the view.

Header Component#

The headerComponent includes a Recent chat title, a back button that takes the user to the previous view. Each property corresponds to the module elements in the navigation bar of MFUIRecentChatViewController.

The following table shows the parameters of the configure() method of the headerComponent.

Parameter nameType
delegateMFUIRecentChatListModuleHeaderDelegate
themeMFChannelListTheme

List Component#

The listComponent shows a list of all recent chat that the current user has. The following table shows the parameters of the configure() method of the listComponent.

Parameter nameType
delegateMFUIRecentChatListModuleListDelegate
datasourceMFUIRecentChatListModuleListDataSource
themeMFChannelListTheme

View Model#

The MFUIRecentChatListViewController class uses a view model that is a type of the MFUIRecentChatListViewModel class. The view model is created in the initializer of the view controller through the createViewModel(recentChatList) method. When the view model object is created, it retrieves message list data from Chat SDK to the view controller and updates the view through the ChatListViewModel(_:didChangeChatList:needsToReload) event.

The following table shows the parameters list of the createViewModel method

Parameter nameType
recentChatListRecentChat

Customisation Of Recent Chat Cell#

The UI components of the Recent Chat Cell can be customised by using the MFChannelCellTheme in MFUITheme.

Unread Message Counts#

The Unread Message Counts appears in the list component of the MFUIRecentChatListViewController. The number of unread messages is displayed below the timestamp of the last received message. If the unread count exceeds 100, it will show as 99+.

Customisation#

Customisation of the unread message count could be done by the following theme properties.

CategoryPropertyDescription
Unread countunreadCountBackgroundColorThe background color of the unread message count element
Unread countunreadCountFontThe font of the unread message count element
Unread countunreadCountTextColorThe text color of the unread message count element

Last Update Time#

The Last Update Time in the list component of the MFUIRecentChatListViewController shows the timestamp of the last received message.

Customisation#

Customisation of the Last Update Time could be done by the following theme properties.

CategoryPropertyDescription
Last Update TimelastUpdatedTimeTextColorThe text color of the timestamp count element
Last Update TimelastUpdatedTimeFontThe font of the timestamp element

Message Customisation#

The message of the Recent Chat could be customised by the following theme Properties.

CategoryPropertyDescription
MessagemessageFontThe font of the message element
MessagemessageTextColorThe text color of the message element

Title Customisation#

Title represents the profile name from the recent chats. The Title could be customised by the following theme properties.

CategoryPropertyDescription
TitletitleFontThe font of the title element
TitletitleTextColorThe text color of the title element

Separator Line Customisation#

CategoryPropertyDescription
Separator lineseparatorLineColorThe color of the separator line element