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.

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.

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

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

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.

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.

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 FormMessages 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 CardMessages 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);

​Overview

​Methods

​Init

​getLoggedInUser

​Login using Auth Key

​Login using Auth Token

​Logout

​Create user

​Update user

​Send text message

​Send media message

​Send custom message

​Send Form message

​Send Card Message

​Send Custom Interactive message

Overview

Methods

Init

getLoggedInUser

Login using Auth Key

Login using Auth Token

Logout

Create user

Update user

Send text message

Send media message

Send custom message

Send Form message

Send Card Message

Send Custom Interactive message