New Chat

Build a unified new chat entry point for starting 1:1 or group conversations in CometChat React UI Kit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Key components	CometChatUsers, CometChatGroups, CometChatJoinGroup, CometChatSelector
Init	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Purpose	Unified new chat entry point for starting 1:1 or group conversations
Sample app	GitHub
Related	All Guides

The New Chat feature lets users start conversations with other users or join group conversations from a single interface.

Before starting, complete the Getting Started guide for your framework.

---

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

Track whether the new chat view is visible and which user/group was selected. When the “New Chat” button is clicked, show the view and hide any open side panels.

File: CometChatHome.tsx

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

---

2. Conditional Rendering

Switch between the new chat view, the messages view, or an empty state depending on the current app state. useCallback prevents unnecessary re-renders.

File: CometChatHome.tsx

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

---

3. New Chat View

The main new chat interface with a header, back button, and tabbed navigation between Users and Groups. Selecting a tab switches the list below.

File: CometChatHome.tsx

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

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

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

---

4. User Selection and Chat Creation

The tab content renders either CometChatUsers or CometChatGroups. Clicking a user creates a 1:1 chat and closes the new chat view. Clicking a group triggers the join flow.

File: CometChatHome.tsx

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

---

5. Group Joining Logic

Handle the join flow based on group type. Public groups are joined directly via CometChat.joinGroup(). Password-protected groups show a password prompt first.

File: CometChatHome.tsx

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

---

Feature Matrix

Feature	Component / Method	File
Open new chat view	onNewChatClicked()	CometChatHome.tsx
New chat interface	CometChatNewChatView	CometChatHome.tsx
User selection	CometChatUsers	CometChatHome.tsx
Group selection	CometChatGroups	CometChatHome.tsx
Group joining	joinGroup()	CometChatHome.tsx
State management	showNewChat state	appReducer.ts
Chat creation	setNewChat()	CometChatHome.tsx
Navigation handling	setShowNewChat(false)	CometChatHome.tsx

---

Next Steps

Conversations

Display and manage conversation lists.

Groups

Display and manage group lists.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.