Building A One To One/Group Chat Experience

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

AI Agent Component Spec

• Package: @cometchat/chat-uikit-react
• Framework: React Router
• Key components: CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer
• Required setup: CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
• Parent guide: React Router 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

   Create CometChatNoSSR.tsx and CometChatNoSSR.css files to initialize the UI Kit, log in a user, and render the messaging experience.

   src/
   │── CometChatNoSSR/
   │   ├── CometChatNoSSR.tsx
   │   ├── CometChatNoSSR.css
   

   TypeScript

   CometChatNoSSR.tsx

   import React, { useEffect, useState } from "react";
   import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
   import { CometChat } from "@cometchat/chat-sdk-javascript";
   import "./CometChatNoSSR.css";
   
   const COMETCHAT_CONSTANTS = {
     APP_ID: "",       // Replace with your App ID
     REGION: "",       // Replace with your Region
     AUTH_KEY: "",     // Replace with your Auth Key
   };
   
   const CometChatNoSSR: React.FC = () => {
     const [user, setUser] = useState<CometChat.User | undefined>(undefined);
     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(() => {
       const UIKitSettings = new UIKitSettingsBuilder()
         .setAppId(COMETCHAT_CONSTANTS.APP_ID)
         .setRegion(COMETCHAT_CONSTANTS.REGION)
         .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
         .subscribePresenceForAllUsers()
         .build();
   
       CometChatUIKit.init(UIKitSettings)
         ?.then(() => {
           CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
             if (!loggedInUser) {
               CometChatUIKit.login("cometchat-uid-2") // Replace with dynamic UID
                 .then((user) => setUser(user))
                 .catch((error) => console.error("Login failed", error));
             } else {
               setUser(loggedInUser);
             }
           });
         })
         .catch((error) => console.error("Initialization failed", error));
     }, []);
   
     useEffect(() => {
       if (user) {
         const UID = "cometchat-uid-1";
         CometChat.getUser(UID).then(
           user => {
             setSelectedUser(user);
           }, error => {
             console.log("User fetching failed with error:", error);
           }
         );
   
         // To fetch a group instead:
         // const GUID = "GUID"
         // CometChat.getGroup(GUID).then(
         //   group => setSelectedGroup(group),
         //   error => console.log("Group fetching failed:", error)
         // );
       }
     }, [user]);
   
     return user ? (
       <>
         {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">Start a conversation by passing valid user or group IDs.</div>
         )}
       </>
     ) : undefined;
   };
   
   export default CometChatNoSSR;
   

   CSS

   CometChatNoSSR.css

   .messages-wrapper {
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
   }
   
   .empty-conversation {
       height: 100%;
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       background: white;
       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);
       }, error => {
           console.log("User fetching failed with error:", error);
       }
   );
   

   Fetching a Group (Group Chat)

   const GUID = "GUID"
   
   CometChat.getGroup(GUID).then(
       group => {
           setSelectedGroup(group);
       }, error => {
           console.log("User fetching failed with error:", error);
       }
   );
   

4. Disable SSR and Render the CometChat Component

   Create a file CometChat.tsx inside the routes folder:

   import React, { lazy, Suspense, useEffect, useState } from "react";
   import "@cometchat/chat-uikit-react/css-variables.css";
   
   const CometChatNoSSR = lazy(() => import("../CometChatNoSSR/CometChatNoSSR"));
   
   export default function CometChatRoute() {
     const [mounted, setMounted] = useState(false);
   
     useEffect(() => {
       setMounted(true);
     }, []);
   
     return mounted ? (
       <Suspense fallback={<div>Loading...</div>}>
         <CometChatNoSSR />
       </Suspense>
     ) : (
       <div>Loading...</div>
     );
   }
   

   Create a route for CometChat in the routes file:

   import { type RouteConfig, index, route } from "@react-router/dev/routes";
   
   export default [
     index("routes/home.tsx"),
     route("chat", "routes/CometChat.tsx"),
   ] satisfies RouteConfig;
   

   CometChat UI Kit relies on browser APIs (window, document, WebSockets). Since React Router renders on the server by default, disabling SSR for this component prevents runtime errors.

5. Update App CSS

   Add the following styles to app.css:

   app.css

   :root {
     --background: #ffffff;
     --foreground: #171717;
   }
   
   @media (prefers-color-scheme: dark) {
     :root {
       --background: #0a0a0a;
       --foreground: #ededed;
     }
   }
   
   .root {
     height: 100%;
   }
   
   html,
   body {
     height: 100%;
   }
   
   html,
   body {
     max-width: 100vw;
     overflow-x: hidden;
   }
   
   body {
     color: var(--foreground);
     background: var(--background);
     font-family: Arial, Helvetica, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   * {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   @media (prefers-color-scheme: dark) {
     html {
       color-scheme: dark;
     }
   }
   
6. Run the Application

   1. Start the development server:

      npm

      npm run dev
      

      pnpm

      pnpm dev
      

      yarn

      yarn dev
      

   2. Navigate to /chat (e.g., http://localhost:3000/chat) and verify the chat interface loads.

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 Router Integration

React Router setup guide.

Core Features

Core chat features.