> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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**.

[<img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/R-mrzo_AxVZMXils/images/30d34521-play-codesandbox.svg?fit=max&auto=format&n=R-mrzo_AxVZMXils&q=85&s=719f2f667589e0991584e435e7936741" width="165" height="32" data-path="images/30d34521-play-codesandbox.svg" />](https://link.cometchat.com/react-one-on-one)

> **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**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-G4WbAhFV_nFm5lW/images/4d640baf-chat_experience_one_on_one-db9d6d7716241c59bb026625b05019fe.png?fit=max&auto=format&n=-G4WbAhFV_nFm5lW&q=85&s=52b47727a652341a9265f70884e0a36a" width="1282" height="802" data-path="images/4d640baf-chat_experience_one_on_one-db9d6d7716241c59bb026625b05019fe.png" />
</Frame>

### **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).

```js theme={null}
<CometChatMessageHeader user={selectedUser} group={selectedGroup} />
```

### **Step 2: Build the Message View**

* Load **chat history** and **real-time messages**.
* Ensure **smooth scrolling and timestamp visibility**.

```js theme={null}
<CometChatMessageList user={selectedUser} group={selectedGroup} />
```

### **Step 3: Add the Message Composer**

* Include a **text input field**.
* Support **media uploads, file attachments, emojis, and reactions**.

```js theme={null}
<CometChatMessageComposer user={selectedUser} group={selectedGroup} />
```

***

#### **Implementation**

<Tabs>
  <Tab title="TypeScript">
    ```tsx App.tsx theme={null}
    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;
    ```
  </Tab>

  <Tab title="CSS">
    ```css App.css theme={null}
    #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;
    }
    ```
  </Tab>
</Tabs>

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)**

```tsx theme={null}
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)**

```tsx theme={null}
const GUID = "GUID";
CometChat.getGroup(GUID)
  .then(group => setSelectedGroup(group))
  .catch(error => console.error("Failed to fetch group:", error));
```

***

### **Step 4: Run the project**

```powershell theme={null}
npm start
```

## **Next Steps**

### **Enhance the User Experience**

* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.

***