cometchat-pro-tutorials / nextjs-cometchat

How to Build a WhatsApp-like Chat App Using Next.js

CometChat React UI Kit

CometChat React UI Kit is a collection of custom UI Components designed to build text chat and voice/video calling features in your application.

The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.

---

Features

• Private(1-1) & Group Conversations
• Voice & video calling & conferencing
• Rich Media Attachments
• Typing Indicators
• Text, Media and Custom messages
• Read receipts
• Online Presence Indicators
• Message History
• Users & Friends List
• Search by users and groups
• Groups List
• Conversations List
• Threaded Conversations

Extensions

Thumbnail Generation | Link Preview | Rich Media Preview | Smart Reply| Emojis | Polls | Reactions | Stickers

---

Prerequisites

Before you begin, ensure you have met the following requirements:

• A text editor, to write code in. This could be a text editor (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)

• Node

• npm

• React npm install [email protected]

• React DOM npm install [email protected]

• React scripts npm install [email protected]

---

Installing React UI Kit

1. Setup 🔧

i. Register on CometChat 🔧

To install React UI Kit, you need to first register on CometChat Dashboard. Click here to sign up

ii. Get your Application Keys 🔑

• Create a new app
• Head over to the Quick Start or API & Auth Keys section and note the App ID, Auth Key, and Region.

iii. Add the CometChat Dependency

  npm install @cometchat-pro/chat@2.4.0 --save

2. Configure CometChat inside your app

i. Import CometChat SDK

  import { CometChat } from "@cometchat-pro/chat";

ii. Initialize CometChat 🌟

The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the onCreate() method of the Application class.

const appID = "APP_ID";
const region = "REGION";
const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();
CometChat.init(appID, appSetting).then(
  () => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  },
  error => {
    console.log("Initialization failed with error:", error);
    // Check the reason for error and take appropriate action.
  }
);

Note:

• Replace APP_ID and REGION with your CometChat App ID and Region in the above code.

iii. Login your user 👤

This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user..

const authKey = "AUTH_KEY";
const uid = "SUPERHERO1";

CometChat.login(uid, authKey).then(
  user => {
    console.log("Login Successful:", { user });    
  },
  error => {
    console.log("Login failed with exception:", { error });    
  }
);

Note:

• Replace AUTH_KEY with your CometChat Auth Key in the above code.

• We have setup 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3,SUPERHERO4 and SUPERHERO5.

3. Add UI Kit to your project

• Clone this repository git clone https://github.com/cometchat-pro/cometchat-pro-react-ui-kit.git
• Copy the cloned repository to your source folder

• Copy all the dependencies from package.json into your project's package.json and install them

4. Launch CometChat

Using the CometChatUI component, you can launch a fully functional chat application. In this component all the UI Screens and UI Components are interlinked and work together to launch a fully functional chat on your website/application.

Usage

• Import CometChatUI component
• Embed CometChatUI component in container and provide an appropriate width and height to the container

  import { CometChatUI } from "./CometChatWorkspace/src";

  class App extends React.Component {

    render() {

      return (
        <div style={{width: '800px', height:'800px' }}>
          <CometChatUI />
        </div>
      )
    }
  }

Checkout our sample app

Visit our React sample app repo to run the React sample app.

---

Troubleshooting

• To read the full documentation on UI Kit integration visit our Documentation.

• Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in CometChat Dashboard.

---

Contributors

Thanks to the following people who have contributed to this project:

👨‍💻 @priyadarshininadar
👨‍💻 @ajaygajra
👨‍💻 @prathamesh-majgaonkar
👨‍💻 @mayur-bhandari

---

Contact 📫

Contact us via real time support present in CometChat Dashboard.

---

License

---

This project uses the following license.