The One-to-One Chat feature provides a streamlined direct messaging interface, making it ideal for support chats, dating apps, and private messaging platforms. This setup eliminates distractions by focusing solely on a dedicated chat window.
Tip: You can fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.

​
User Interface Preview

​
Key Components

  1. Chat Header – Displays recipient details and optional call/video call buttons.
  2. Message View – Shows real-time chat history.
  3. Message Input Box – Enables users to send messages, media, and reactions.

​
Step-by-Step Guide

​
Step 1: Implement the Chat Header

  • Display profile picture, name, and online status.
  • Add voice and video call buttons (optional).
<CometChatMessageHeader user={selectedUser} group={selectedGroup} />

​
Step 2: Build the Message View

  • Load chat history and real-time messages.
  • Ensure smooth scrolling and timestamp visibility.
<CometChatMessageList user={selectedUser} group={selectedGroup} />

​
Step 3: Add the Message Composer

  • Include a text input field.
  • Support media uploads, file attachments, emojis, and reactions.
<CometChatMessageComposer user={selectedUser} group={selectedGroup} />

​
Implementation

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;
In the code snippet above, ensure you select either a user or a group based on your chat requirement. You can also determine this dynamically depending on the conversation type.

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

​
Step 4: Run the project

npm start

​
Next Steps

​
Enhance the User Experience