Skip to main content
Version: v4

Methods

Overview​

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

To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real time and ensure that the UI reflects the most current state of data.

The CometChat UI Kit has thoughtfully 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, making it more user-friendly for developers.

Methods​

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​

This method initializes the settings required for CometChat Javascript SDK. First, ensure UIKitSettings is set and then call the init() method on the app startup.

info

Make sure you replace the APP_ID, REGION and AUTH_KEY with your CometChat App ID, Region and Auth Key in the below code. The Auth Key is an optional property of the UIKitSettings Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the Auth Token method to log in securely.

import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";//import shared package

const COMETCHAT_CONSTANTS = {
APP_ID: "APP_ID", __ Replace with your App ID
REGION: "REGION", __ Replace with your App Region ("eu" or "us")
AUTH_KEY: "AUTH_KEY" __ Replace with your Auth Key
}

__create the builder
const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForAllUsers()
  .build();


__Initialize CometChat
CometChatUIKit.init(UIKitSettings)?.then(()=>{
__login your user
})

getLoggedInUser​

You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.

import { CometChatUIKit } from "@cometchat/chat-uikit-angular";//import uikit package


CometChatUIKit.getLoggedinUser().then(user => {
  __Login user
}).catch(console.log);

Login using Auth Key​

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.

import { CometChatUIKit } from "@cometchat/chat-uikit-angular";

const UID = "UID";
const authKey = "AUTH_KEY";

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      //Login user
      CometChatUIKit.login({ uid: UID })
        .then((user) => {
          console.log("Login Successful:", { user });
          //mount your app
        })
        .catch(console.log);
    } else {
      //user already logged in
      //mount your app
    }
  })
  .catch(console.log);

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.
import { CometChatUIKit } from "@cometchat/chat-uikit-angular";

const authToken = "AUTH_TOKEN";

CometChatUIKit.getLoggedinUser().then(user => {
  if(!user){
    //Login user
    CometChatUIKit.login({authToken}).then(user => {

      console.log("Login Successful:", { user });
      //mount your app

    }).catch(console.log);
  } else {
    //user already logged in
    //mount your app
  }
}).catch(console.log););

Logout​

This method is used to end the user session of the logged-in user

import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package

CometChatUIKit.logout();

Create user​

This method takes a User object and the Auth Key as input parameters and returns the created User object if the request is successful.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-angular";

const authKey = "AUTH_KEY";
const UID = "user1";
const name = "Kevin";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
  .then((user) => {
    console.log("user created", user);

    CometChatUIKit.login(UID, authKey)
      .then((user) => {
        console.log("Login Successful:", { user });
        //mount your app
      })
      .catch(console.log);
  })
  .catch(console.log);

Update user​

This method takes a User object and the Auth Key as inputs and returns the updated User object on the successful execution of the request.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-angular";

const authKey = "AUTH_KEY";
const UID = "user1";
const name = "Kevin Fernandez";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
  .then((user) => {
    console.log("user updated", user);
  })
  .catch(console.log);

Send text message​

This method sends a text message in a 1:1 or group chat. You need to pass a TextMessage object to it.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
import { CometChatUIKitConstants } from "@cometchat/uikit-resources";

const receiverID = "UID";
const messageText = "Hello world!";
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendMessage(textMessage)
  .then((message) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

Send media message​

This method sends a media message in a 1:1 or group chat. You need to pass a MediaMessage object to it.

info

Make sure you replace the INPUT FILE OBJECT with the actual file.

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

Send custom message​

This method allows you to send custom messages which are neither text nor media messages.

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);

Send Form message​

This method allows you to send Form Messages which are the extension of Interactive Message

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
import {
  CometChatUIKitConstants,
  APIAction,
  ButtonElement,
  TextInput,
  FormMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
// Create an instance of APIAction
let apiAction = new APIAction("https://example.com/api", "POST");

// Create an instance of ButtonElement
let submitButton = new ButtonElement("1", apiAction, "Submit");

// Create an instance of TextInput
let nameInput = new TextInput("1", "Please enter your name");
// Create a new instance of FormMessage

let formMessage = new FormMessage(
  "receiverId",
  CometChatUIKitConstants.MessageReceiverType.user,
  "Title",
  [nameInput],
  submitButton
);

CometChatUIKit.sendFormMessage(formMessage)
  .then((message) => {
    console.log("Form message sent successfully", message);
  })
  .catch(console.log);

Send Card Message​

This method allows you to send Card Messages which are the extension of Interactive Message

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
import {
  CometChatUIKitConstants,
  ButtonElement,
  CardMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
// Create instance of ButtonElement for card actions
let cardAction = new ButtonElement(
  "1",
  new APIAction("https://example.com/api", "POST"),
  "Click Me"
);
// Create a new instance of CardMessage
let cardMessage = new CardMessage(
  "receiverId",
  CometChatUIKitConstants.MessageReceiverType.user,
  "This is a card",
  [cardAction]
);

CometChatUIKit.sendCardMessage(cardMessage)
  .then((message) => {
    console.log("card message sent successfully", message);
  })
  .catch(console.log);

Send Custom Interactive message​

This method allows you to send Custom Interactive Messages which are the extension of Interactive Message

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
import {
  CometChatUIKitConstants,
  ButtonElement,
  CardMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
// Create a new instance of CardMessage
let customMessage = new CustomInteractiveMessage(
  "receiverId",
  CometChatUIKitConstants.MessageReceiverType.user,
  json
);

CometChatUIKit.sendCustomInteractiveMessage(customMessage)
  .then((message) => {
    console.log("CustomInteractive message sent successfully", message);
  })
  .catch(console.log);