Mesibo Open Source Chat, Voice and Video Calls UI Modules

Estimated reading time: 7 minutes

mesibo provides a variety of pre-built open-source UI components that allow you to quickly add messaging, voice & video call graphical user interface in your app in just a few lines of code. mesibo UI components are optional and provided to aid in the app development process. You can completely design your own UI components using mesibo Core APIs.

messaging group chat mesibo voice and video calls

mesibo UI modules are completely customizable. You can not only customize colors, icons, etc but also customize how each message is rendered. This enables you to create powerful apps, chatbots in no-time. In addition to that, the entire source code of UI modules is available on GitHub if you need to customize them as per your needs

Since each App has different UI requirements, we DO NOT claim that these UI modules will meet all your needs. However, they can get you started quickly and since they are open-source, you can download the entire source code of UI modules and modify it to suit your needs.

Using UI Modules

In this document, we will briefly describe how to use and customize UI modules.

Note that, mesibo UI modules are developed by our partners and hence, unlike mesibo APIs,

  • they do not follow the common API signature and other mesibo coding guidelines
  • You will find some differences in Android and iOS UI modules. Refer to the source code.

Hence, use this document as high-level reference only. The best way to learn how to use mesibo UI modules is to refer to the open-source messenger app for Android, iOS, and Javascript source code which uses mesibo UI modules for various functionalities like welcome screen, login, media picker, one-to-one and group messaging, user list, group management, showing profiles, etc.

Type of UI Modules

Following are types of UI modules, you can use one or more as required by you:

  • Messaging - UI module for entire messaging/chat like WhatsApp/Telegram
  • Call and Conferencing - Video and Voice Calls, and Conferencing
  • MediaPicker - UI module to select images, video, files, etc. from the phone, and optionally crop, rotate. Messaging module uses MediaPicker module.
  • Helper - UI module for login and app welcome screens modules

UI Modules Source Code

You can download the entire source code from GitHub. Refer to the source code page to know about all mesibo source code repositories.

Android UI Modules

iOS UI Modules

Launching Messaging UI

Messaging UI opens up with a screen that shows the last message from each user and group. Clicking on any of the users or the groups will open the screen to chat with that user or a group.

There are primarily two types of Messaging UI components (fragment in Android, UIViewController in iOS):

  • User List, which displays a list of users in different modes. The modes are explained below.
  • Messaging, which renders all the messages for a particular user or a group and allows users to send messages, images, video, file, etc.

The different modes for User List are:

  • MODE_MESSAGELIST shows a list of latest messages, one per user, sorted by time
  • MODE_SELECTCONTACT shows Mesibo Contact List - a list of Mesibo Users in the application
  • MODE_SELECTCONTACT_FORWARD shows a list of users to whom you can forward message(s)
  • MODE_SELECTGROUP shows UI for selecting and creating a group
  • MODE_EDITGROUP shows UI for editing different attributes of a group such as - Group Member List, Group Profile Picture, Group Title or Group Name

The code examples are taken from the first app source code available on GitHub - First Mesibo App for Android and First Mesibo App for iOS

Launching Messaging UI in Android

  1. Install Mesibo UI Modules by following Instructions for Android

  2. Import the messaging-UI Module.

import com.mesibo.messaging.MesiboUI;

One you have imported, you can either create following fragments and use in your app or use utility functions to launch UI.

  • MesiboUserListFragment, User List Fragment as mentioned above.
  • MesiboMessagingFragment, Messaging Fragment as mentioned above.

Alternatively, you can launch UI by calling:

MesiboUI.launch(this, 0, false, true);

You can also launch chat UI for a particular user or a group directly. For example,

In Java and Kotlin,

MesiboUI.launchMessageView(this, address, 0);

Launching Messaging UI in iOS

  1. Install Mesibo UI Modules by following Instructions for iOS

  2. Import the Mesibo UI Module.

In Objective-C,

#import "MesiboUi/MesiboUi.h"

In Swift,

import MesiboUI

You can then get User List Controller by

let mesiboController = MesiboUI.getViewController()

You can also launch chat UI for a particular user or a group directly. For example,

To launch the messaging UI for a user, you need to pass the address for that user.

[MesiboUI launchMessageViewController:self profile:mProfile];

MesiboUI.launchMessageViewController(self, profile: mProfile)

Adding Buttons to Messaging UI

You can add buttons (for example, voice and video call buttons) to the top bar in the user list and messaging component by implementing the following listener functions and using Mesibo.addListener to set the listener.

For Android, defined in Mesibo.UIHelperListner

int Mesibo_onGetMenuResourceId(Context context, int type, MesiboProfile profile, Menu menu);
boolean Mesibo_onMenuItemSelected(Context context, int type, MesiboProfile profile, int item);

For iOS, defined in MesiboDelegate

-(NSArray *) Mesibo_onGetMenu:(id)parent type:(int) type profile:(MesiboProfile *)profile;
-(BOOL) Mesibo_onMenuItemSelected:(id)parent type:(int)type profile:(MesiboProfile *)profile item:(int)item;

Messaging UI will call these functions with type as 0 for User List and 1 for Messaging component.

For Android, you should return menu resource with buttons. Refer to the messenger code here for usage example.

For Android, you should return Button array. Refer to the messenger code here for usage example.

Localization, Changing Default Texts, Colors, and other UI elements

MesiboUI.Config allows you to change default texts and other UI elements to suit your need. You should configure it once at the start. It is NOT RECOMMENDED to change these values at runtime.

Below is the example of config. Refer to the source code for the complete definition

public static class Config {
	...
	public String messageListTitle = "Messages";
	public String userListTitle = "Contacts";
	public String createGroupTitle = "Create a New Group";
	public String modifyGroupTitle = "Modify Group details";
	public String selectContactTitle = "Select a contact";
	public String selectGroupContactsTitle = "Select group members";
	...
}

All you have to do is to get the config instance and change necessary variable.

For Android,

MesiboUI.Config config = MesiboUI.getConfig();
config.messageListTitle = "New Messages";

For iOS,

MesiboUiOptions *ops = [MesiboUI getUiOptions];
opts.messageListTitle = @"New Messages";
mesibo, ui-modules, chat ui components, messaging app ui, voice, video call ui