Sign In

Mesibo Messaging UI Module

There are primarily two categories of Messaging UI screens:

Messaging Screen

The Messaging Screen displays all messages for a specific user or group. It enables users to send and receive a wide variety of messages, including but not limited to:

  • Text messages
  • Rich messages containing images, videos, documents, audio, and more
  • Location sharing
  • URL preview
  • etc.

It addition, it also shows

  • Send, Delivery and read indicator for sent messages
  • Typing Indicators
  • Other presence status indicators such as online or actively chatting
  • Message date and time

The entire messaging screen can be customized, allowing adjustments to text styles, colors, and other elements, as elaborated in subsequent sections.

User List Screen

The User List Screen displays a list of users in various modes and typically serves as the main screen. It may also provide an option to launch the Messaging Screen for a selected user. The different modes available for the User List Screen include:

  • MODE_MESSAGES: This mode presents a list of the latest messages, one per user, sorted by time. It usually functions as the initial screen for messaging.
  • MODE_CONTACTS: This mode displays a list of users
  • MODE_FORWARD: In this mode, users can browse a list of individuals to whom they can forward messages.
  • MODE_GROUPS: This mode offers a list of users for forming new group conversations.
  • MODE_EDITGROUP: This mode presents a user interface for editing various attributes of a group, such as the Group Member List, Group Profile Picture, Group Title, or Group Name.

Please refer to the first app source code available on GitHub - First Mesibo App for Androidopen_in_new and First Mesibo App for iOSopen_in_new to learn how to use UI modules.

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;

You can create the following fragments and use them in your app.

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

Alternatively, you can launch UI by calling:

MesiboUserListScreenOptions launchOptions = new MesiboUserListScreenOptions();

MesiboUI.launchUserList(this, launchOptions);

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

MesiboMessageScreenOptions launchOptions = new MesiboMessageScreenOptions();
launchOptions.profile = profile.
MesiboUI.launchMessaging(this, launchOptions);

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.getUserListViewController()

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.

MesiboMessageScreenOptions *opts = [MesiboMessageScreenOptions new];
opts.profile = profile;
opts.navigation = YES;
[MesiboUI launchMessaging:self opts:opts];
var opts:MesiboMessageScreenOptions = MesiboMessageScreenOptions();
opts.profile = profile;
opts.navigation = true;
MesiboUI.launchMessaging(self, opts:opts)

In the next section, we will learn how to add custom buttons to UI screens and customize the way messages are rendered.