Building A One To One/Group Chat Experience

Build a focused one-to-one or group chat experience in React.js with CometChat UI Kit.

AI Agent Component Spec

• Package: @cometchat/chat-uikit-react
• Framework: React.js
• Key components: CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer
• Required setup: CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
• Parent guide: React.js Integration

Single chat window without a conversation list. Supports both 1:1 and group messaging.

User Interface Preview

Key Components

1. Chat Header — recipient details and optional call/video buttons
2. Message View — real-time chat history
3. Message Composer — text input with media, emoji, and reaction support

Step-by-Step Guide

1. Implement the Chat Header

   <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
   
2. Build the Message View

   <CometChatMessageList user={selectedUser} group={selectedGroup} />
   
3. Add the Message Composer

   <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
   

   Implementation

   TypeScript

   App.tsx

   import { useEffect, useState } from "react";
   import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList } from "@cometchat/chat-uikit-react";
   import { CometChat } from "@cometchat/chat-sdk-javascript";
   import "./App.css";
   import '@cometchat/chat-uikit-react/css-variables.css';
   
   function App() {
     const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);
   
     useEffect(() => {
       // Fetch user or group from CometChat SDK whose chat you want to load. 
   
       /** Fetching User */
       const UID = "cometchat-uid-1";
   
       CometChat.getUser(UID).then(
         user => {
           setSelectedUser(user);
         }, error => {
           console.log("User fetching failed with error:", error);
         }
       );
   
       /** Fetching Group */
       // const GUID = "GUID"
       // CometChat.getGroup(GUID).then(
       //   group => {
       //     setSelectedGroup(group);
       //   }, error => {
       //     console.log("User fetching failed with error:", error);
       //   }
       // );
   
     }, []);
   
     return (
       <>
         {selectedUser || selectedGroup ? (
           <div className="messages-wrapper">
             <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
             <CometChatMessageList user={selectedUser} group={selectedGroup} />
             <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
           </div>
         ) : (
           <div className="empty-conversation">Please set a user or group in App.tsx.</div>
         )}
       </>
     );
   };
   
   export default App;
   

   CSS

   App.css

   #root {
     text-align: center;
     width: 100vw;
     height: 100vh;
     background-color: #282c34;
   }
   
   .conversations-with-messages {
     display: flex;
     height: 100%;
     width: 100%;
     flex-direction: row;
   }
   
   .conversations-wrapper {
     height: 100vh;
     width: 480px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
   }
   
   .conversations-wrapper>.cometchat {
     overflow: hidden;
   }
   
   .messages-wrapper {
     width: 100%;
     height: 100vh;
     display: flex;
     flex-direction: column;
   }
   
   .empty-conversation {
     height: 100vh;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: var(--cometchat-background-color-03, #F5F5F5);
     color: var(--cometchat-text-color-secondary, #727272);
     font: var(--cometchat-font-body-regular, 400 14px Roboto);
   }
   
   .cometchat .cometchat-message-composer {
     border-radius: 0px;
   }
   

   Select either a user or a group based on the chat requirement.

   Fetching a User (One-on-One Chat)

   const UID = "cometchat-uid-1";
   
   CometChat.getUser(UID)
     .then(user => setSelectedUser(user))
     .catch(error => console.error("Failed to fetch user:", error));
   

   Fetching a Group (Group Chat)

   const GUID = "GUID";
   
   CometChat.getGroup(GUID)
     .then(group => setSelectedGroup(group))
     .catch(error => console.error("Failed to fetch group:", error));
   

4. Run the Project

   Vite

   npm run dev
   

   Create React App

   npm start
   

For prop details and customization options, see the component reference pages: CometChatConversations, CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader.

Next Steps

Advanced Customizations

Customize colors, fonts, and styles.

Components Overview

Browse all available UI components.

React.js Integration

React.js setup guide.

Core Features

Core chat features.