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

# New Chat

Enable users to create new conversations with individual users or join existing groups in your React chat app.

## Overview

The New Chat feature allows users to initiate conversations with other users or join group conversations, providing a seamless way to start new communications.

* Allows users to initiate conversations with other users or join group conversations.
* Enables users to expand their network, join group discussions, and create new chat threads without navigating through complex menus.
* Your app will provide an intuitive interface for users to discover and connect with other users, join groups, and start new conversations with proper navigation and state management.

***

## Prerequisites

* React v18.2.0+
* CometChat React UI Kit v6.1.0+
* CometChat Chat SDK JavaScript v4.0.13+
* Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
* TypeScript support (recommended)
* User authentication and basic chat functionality implemented
* User and group management components available

***

## Components

| Component / Class        | Role                                               |
| ------------------------ | -------------------------------------------------- |
| **CometChatNewChatView** | Main container for new chat creation interface     |
| **CometChatUsers**       | Displays list of available users for chat creation |
| **CometChatGroups**      | Shows available groups for joining                 |
| **CometChatJoinGroup**   | Handles protected group joining process            |
| **CometChatSelector**    | Navigation component with new chat button          |

***

## Integration Steps

### 1. New Chat State Management Setup

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const [showNewChat, setShowNewChat] = useState<boolean>(false);
const [newChat, setNewChat] = useState<{
    user?: CometChat.User,
    group?: CometChat.Group
} | undefined>();

const onNewChatClicked = () => {
    setShowNewChat(true);
    setAppState({ type: "updateSideComponent", payload: { type: "", visible: false } });
}
```

Manages the new chat view visibility and resets side components when opening new chat.

***

### 2. New Chat View Component Integration

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const InformationComponent = useCallback(() => {
    return (
        <>
            {showNewChat ? <CometChatNewChatView />
                :
                (selectedItem || newChat?.user || newChat?.group) ? (<CometChatMessagesViewComponent />)
                    :
                    (<CometChatEmptyStateView activeTab={activeTab} />)
            }
        </>
    )
}, [activeTab, showNewChat, selectedItem, newChat, appState.goToMessageId]);
```

Conditionally renders the new chat view or message view based on application state.

***

### 3. New Chat View Implementation

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const CometChatNewChatView: React.FC = () => {
    const [selectedTab, setSelectedTab] = useState<string>('user');
    const [group, setGroup] = useState<CometChat.Group>();
    const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();

    const handleTabClick = (tab: string) => {
        setSelectedTab(tab);
    };

    return (
        <div className='cometchat-new-chat-view'>
            {/* Header */}
            <div className='cometchat-new-chat-view__header'>
                <CometChatButton iconURL={backbutton} onClick={() => {
                    setShowNewChat(false);
                }} />
                <div className='cometchat-new-chat-view__header-title'>New Chat</div>
            </div>

            {/* Tabs */}
            <div className='cometchat-new-chat-view__tabs'>
                <div className={`cometchat-new-chat-view__tabs-tab ${selectedTab == 'user' ? "cometchat-new-chat-view__tabs-tab-active" : ""}`} onClick={() => handleTabClick('user')}> {getLocalizedString("user_title")}</div>
                <div className={`cometchat-new-chat-view__tabs-tab ${selectedTab == 'group' ? "cometchat-new-chat-view__tabs-tab-active" : ""}`} onClick={() => handleTabClick('group')}> {getLocalizedString("group_title")}</div>
            </div>

            {/* Content */}
            <div style={{ overflow: "hidden" }}>
                <TabContent selectedTab={selectedTab} />
            </div>
        </div>
    );
};
```

***

### 4. User Selection and Chat Creation

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const TabContent: React.FC<TabContentProps> = ({ selectedTab }) => {
    return selectedTab === 'user' ? <CometChatUsers
        onItemClick={(user: CometChat.User) => {
            setNewChat({ user, group: undefined });
            setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } });
            setShowNewChat(false);
            setAppState({ type: "updateSelectedItemUser", payload: user });
            setAppState({ type: "updateSelectedItemGroup", payload: undefined });
        }}
    />
        : <CometChatGroups
            groupsRequestBuilder={new CometChat.GroupsRequestBuilder().joinedOnly(true).setLimit(30)}
            onItemClick={(e: CometChat.Group) => {
                setAppState({ type: "updateSelectedItemUser", payload: undefined });
                setAppState({ type: "updateSelectedItemGroup", payload: e });
                joinGroup(e)
            }} />;
};
```

***

## Implementation Flow

* **Fetch Data / Available Users and Groups**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
<CometChatUsers onItemClick={(user) => { /* handle */ }} />
<CometChatGroups groupsRequestBuilder={...} onItemClick={(group) => { /* handle */ }} />
```

* **Load User/Group Data / Associated Information**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const joinGroup = (e) => { /* join group logic */ }
```

* **Create Conversation / Action Handler**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
onItemClick={(user) => { setNewChat({ user }); }}
onItemClick={(group) => { joinGroup(group); }}
```

* **Live Updates / State Management**

*Files: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)*

```tsx theme={null}
useEffect(() => { /* update message target */ }, [activeTab, selectedItem]);
```

***

## Customization Options

* Override CSS styles
* Configure tabs
* Customize list UI
* Add search
* Handle group types
* Adjust navigation

***

## Filtering / Edge Cases

* User availability
* Group permissions
* Duplicate chats prevention
* Blocking logic
* Membership checks
* Empty states

***

## Error Handling & State Management

```tsx theme={null}
const joinGroup = (e) => {
    if (!e.getHasJoined()) {
        if (e.getType() === CometChatUIKitConstants.GroupTypes.public) {
            CometChat.joinGroup(...)
                .then((response) => { setNewChat({ group: response }); })
                .catch((error) => { console.log(error); });
        } else {
            setGroup(e);
            showJoinGroupRef.current = true;
        }
    }
}
```

***

## Context-Specific Notes

* Public vs private groups
* Different state logic for user/group chats
* Mobile responsiveness
* Navigation flow control
* Group type handling

***

## Summary / Feature Matrix

| Feature             | Component / Method      | File Reference                                                                                                                            |
| ------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Open new chat view  | `onNewChatClicked()`    | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| New chat interface  | `CometChatNewChatView`  | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| User selection      | `CometChatUsers`        | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Group selection     | `CometChatGroups`       | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Group joining       | `joinGroup()`           | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| State management    | `showNewChat` state     | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)                          |
| Chat creation       | `setNewChat()`          | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Navigation handling | `setShowNewChat(false)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |

***

## Next Steps & Further Reading

* [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
* [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
* User Management Features
* Group Management Features