New Chat - CometChat Docs

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.

​Components

​Integration Steps

​1. New Chat State Management

​2. Conditional Rendering

​3. New Chat View

​4. User Selection and Chat Creation

​5. Group Joining Logic

​Feature Matrix

​Next Steps