Methods

Overview

The UI Kit’s core function is to extend the Chat SDK, translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.

The CometChat UI Kit has encapsulated the critical Chat SDK methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK.

You can access the methods using the CometChatUIKit class. This class provides access to all the public methods exposed by the CometChat UI Kit.

Init

As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.

The UIKitSettings is an important parameter of the init() function. It functions as a base settings object, housing properties such as appId, region, and authKey.

Method	Type	Description
appId	String	Sets the unique ID for the app, available on dashboard
region	String	Sets the region for the app (‘us’ or ‘eu’ or ‘in’)
authKey	String	Sets the auth key for the app, available on dashboard
subscriptionType	String	Sets subscription type for tracking the presence of all users
roles	String	Sets subscription type for tracking the presence of users with specified roles
autoEstablishSocketConnection	Boolean	Configures if web socket connections will be established automatically on app initialization or be done manually, set to true by default

V6 Note: The extensions and aiFeature parameters from V5 have been removed. Extensions are built-in and handled automatically by MessageTemplateUtils. No registration is needed.

UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
  ..subscriptionType = CometChatSubscriptionType.allUsers
  ..autoEstablishSocketConnection = true
  ..region = "your_region"
  ..appId = "your_appID"
  ..authKey = "your_authKey"
).build();

CometChatUIKit.init(
  uiKitSettings: uiKitSettings,
  onSuccess: (successMessage) async {
    // Ready to use
  },
  onError: (error) {
    // Handle error
  },
);

Login using Auth Key

Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.

CometChatUIKit.login(uid, onSuccess: (user) {
  // Logged in successfully
}, onError: (e) {
  // Handle error
});

Login using Auth Token

This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.

1. Create a User via the CometChat API when the user signs up in your app.
2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the loginWithAuthToken() method.

CometChatUIKit.loginWithAuthToken("authToken", onSuccess: (user) {
  // Logged in successfully
}, onError: (e) {
  // Handle error
});

Logout

Before a new user logs in, it is crucial to clean session data to avoid potential conflicts. This can be achieved by invoking the .logout() function.

CometChatUIKit.logout(onSuccess: (s) {
  // Logged out successfully
}, onError: (e) {
  // Handle error
});

Create User

You can dynamically create users on CometChat using the .createUser() function.

CometChat.createUser(userObject, 'authKey', onSuccess: (user) {
  // User created
}, onError: (e) {
  // Handle error
});

Base Message

Text Message

Send a text message to a single user or a group using the sendTextMessage() function.

CometChatUIKit.sendTextMessage(textMessageObject, onSuccess: (msg) {
  // Message sent
}, onError: (e) {
  // Handle error
});

Media Message

Send a media message (image, video, audio, file) using the sendMediaMessage() function.

CometChatUIKit.sendMediaMessage(mediaMessageObject, onSuccess: (msg) {
  // Message sent
}, onError: (e) {
  // Handle error
});

Custom Message

Send a custom message using the sendCustomMessage() function.

CometChatUIKit.sendCustomMessage(customMessageObject, onSuccess: (msg) {
  // Message sent
}, onError: (e) {
  // Handle error
});

Interactive Message

Form Message

CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (msg) {
  // Form message sent
}, onError: (e) {
  // Handle error
});

Card Message

CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (msg) {
  // Card message sent
}, onError: (e) {
  // Handle error
});

Scheduler Message

CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (msg) {
  // Scheduler message sent
}, onError: (e) {
  // Handle error
});

Custom Interactive Message

CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (msg) {
  // Interactive message sent
}, onError: (e) {
  // Handle error
});

DateFormatter

By providing a custom implementation of the DateTimeFormatterCallback, you can globally configure how time and date values are displayed across all UI components.

UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
  ..subscriptionType = CometChatSubscriptionType.allUsers
  ..region = CometChatConfig.region
  ..appId = CometChatConfig.appId
  ..authKey = CometChatConfig.authKey
  ..dateTimeFormatterCallback = DateFormatter()
).build();