Building a One-to-One/Group Chat Experience

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

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;
}

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

• Advanced Customizations – Personalize the chat UI to align with your brand.

---