> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Methods

> Methods — CometChat documentation.

## Overview

The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), 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](/sdk/javascript/overview) 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](/sdk/javascript/overview). First, ensure UIKitSettings is set and then call the `init()` method on the app startup.

<Note>
  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](#login-using-auth-token) method to log in securely.
</Note>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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
    })
    ```
  </Tab>
</Tabs>

### Setting Session Storage Mode

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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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);
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-angular";//import uikit package


    CometChatUIKit.getLoggedinUser().then(user => {
      __Login user
    }).catch(console.log);
    ```
  </Tab>
</Tabs>

### 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](#login-using-auth-token) instead of Auth Key.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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);
    ```
  </Tab>
</Tabs>

### 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](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](/rest-api/chat-apis) 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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););
    ```
  </Tab>
</Tabs>

### Logout

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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package

    CometChatUIKit.logout();
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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);
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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);
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="1:1 chat">
    ```js theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```js theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
    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);
    ```
  </Tab>
</Tabs>

### 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.

<Note>
  Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://developer.mozilla.org/en-US/docs/Web/API/File).
</Note>

<Tabs>
  <Tab title="1:1 chat">
    ```js theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```js theme={null}
    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 = "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);
    ```
  </Tab>
</Tabs>

### Send custom message

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

<Tabs>
  <Tab title="1:1 chat">
    ```js theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```js theme={null}
    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 = "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);
    ```
  </Tab>
</Tabs>

### Send Form message

This method allows you to send [Form](/web-shared/form-message)Messages which are the extension of Interactive Message

<Tabs>
  <Tab title="1:1 chat">
    ```js theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```js theme={null}
    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 = "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",
      CometChatUIKitConstants.MessageReceiverType.group,
      "Title",
      [nameInput],
      submitButton
    );

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

### Send Card Message

This method allows you to send [Card](/web-shared/card-message)Messages which are the extension of Interactive Message

<Tabs>
  <Tab title="1:1 chat">
    ```js theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```js theme={null}
    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 = "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);
    ```
  </Tab>
</Tabs>

### Send Custom Interactive message

This method allows you to send [Custom Interactive Messages](/web-shared/custom-interactive-message) which are the extension of Interactive Message

<Tabs>
  <Tab title="1:1 chat">
    ```js theme={null}
    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);
    ```
  </Tab>

  <Tab title="Group chat">
    ```js theme={null}
    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 = "GUID";
    // Create a new instance of CardMessage
    let customMessage = new CustomInteractiveMessage(
      "receiverId",
      CometChatUIKitConstants.MessageReceiverType.group,
      json
    );

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