Methods - CometChat Docs

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

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

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

Create a User via the CometChat API when the user signs up in your app.
Create an Auth Token via the CometChat API for the new user and save the token in your database.
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();

AI Assistant Events

The UI Kit provides a UI-level event system for AI assistant interactions via CometChatAIAssistantEvents. These events mirror the SDK-level AIAssistantListener but are scoped to the UI layer for component-level reactions.

Add Listener

CometChatAIAssistantEvents.addAIAssistantListener(
  "unique_listener_id",
  myListener,
);

Remove Listener

CometChatAIAssistantEvents.removeAIAssistantListener("unique_listener_id");

Listener Interface

Implement CometChatAIAssistantEventsListener to receive events:

class MyListener with CometChatAIAssistantEventsListener {
  @override
  void onAIAssistantEventReceived(AIAssistantBaseEvent event) {
    // Handle AI assistant streaming events at the UI layer
  }
}

The UIKit’s CometChatMessageList automatically handles AI events internally. Use CometChatAIAssistantEvents only if you need additional custom UI reactions to AI streaming events.

UI Events — Card Actions

When a user interacts with a card button inside an AI agent response or a standalone card message, the UIKit emits a ccCardActionClicked event:

CometChatUIEvents.addUiListener("card_listener", myUIListener);

class MyUIListener with CometChatUIEventListener {
  @override
  void ccCardActionClicked(BaseMessage message, dynamic action) {
    if (action is CometChatCardActionEvent) {
      debugPrint("Element ID: ${action.elementId}");
      debugPrint("Action: ${action.action}");
      debugPrint("Card JSON: ${action.cardJson}");
      // Handle navigation, API calls, etc.
    }
  }
}

​Overview

​Init

​Login using Auth Key

​Login using Auth Token

​Logout

​Create User

​Base Message

​Text Message

​Media Message

​Custom Message

​Interactive Message

​Form Message

​Card Message

​Scheduler Message

​Custom Interactive Message

​DateFormatter

​AI Assistant Events

​Add Listener

​Remove Listener

​Listener Interface

​UI Events — Card Actions

Overview

Init

Login using Auth Key

Login using Auth Token

Logout

Create User

Base Message

Text Message

Media Message

Custom Message

Interactive Message

Form Message

Card Message

Scheduler Message

Custom Interactive Message

DateFormatter

AI Assistant Events

Add Listener

Remove Listener

Listener Interface

UI Events — Card Actions