CometChat UI Kit

CometChat UI Kit — CometChat documentation.

CometChatUIKit is a class that contains all necessary methods to help initialise the CometChat SDK with valid credentials for the UI Kit to utilise.

Init

This method initialises the settings required for CometChat SDK. First, ensure UIKitSettings is set and then call the init() method on 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.

JavaScript

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

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()
  .setExtensions() //pass an array of extensions to enable. By default all the extensions will be enabled
  .build();

//Initialize CometChat
CometChatUIKit.init(UIKitSettings)?.then(() => {
  //login your user
});

Setting Session Storage Mode

If you want to use session storage instead of the default local storage, you can configure it during initialization:

JavaScript

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";

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

const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForAllUsers()
  .setStorageMode(CometChat.StorageMode.SESSION)
  .build();

//Initialize CometChat UI Kit with Session Storage
CometChatUIKit.init(UIKitSettings)?.then(() => {
    console.log("Initialization completed successfully with session storage");
    // You can now call login function.
  })
  .catch(console.log);

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.

JavaScript

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

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

Login

The login() method returns the User object containing all the information of the logged-in user.

Login using Auth Key

This straightforward authentication method is ideal for proof-of-concept (POC) development or during the early stages of application development. For production environments, however, we strongly recommend using an Auth Token instead of an Auth Key to ensure enhanced security.

JavaScript

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

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

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      //Login user
      CometChatUIKit.login(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);

• Make sure you replace the UID with a genuine UID in the above code.

• We have set up 5 users for testing having UIDs: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, and cometchat-uid-5.

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.

JavaScript

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

const authToken = "AUTH_TOKEN";

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      //Login user
      CometChatUIKit.loginWithAuthToken(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 for ending user session of the logged in user

JavaScript

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

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.

JavaScript

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

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.

JavaScript

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

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.

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-vue";
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);

Group chat

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

const receiverID = "GUID";
const messageText = "Hello world!";
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
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.

1:1 chat

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

const receiverID = "UID";
const messageType = CometChat.MESSAGE_TYPE.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);

Group chat

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

const receiverID = "GUID";
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
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.

1:1 chat

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

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

Group chat

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

const receiverID = "GUID";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
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 Message which are the extension of Interactive Message

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-vue"; //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.group,
  "Title",
  [nameInput],
  submitButton
);

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

Group chat

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

const receiverID = "GUID";
// 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",
  CometChat.RECEIVER_TYPE.GROUP,
  "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 Message which are the extension of Interactive Message

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-vue"; //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);

Group chat

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

const receiverID = "GUID";
// 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.group,
  "This is a card",
  [cardAction]
);

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

Send CustomInteractive message

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

1:1 chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-vue"; //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);

Group chat

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

const receiverID = "GUID";
// 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.group,
  "This is a card",
  [cardAction]
);

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