New Chat - CometChat Docs

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

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

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

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

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

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

Load User/Group Data / Associated Information

File: CometChatHome.tsx

const joinGroup = (e) => { /* join group logic */ }

Create Conversation / Action Handler

File: CometChatHome.tsx

onItemClick={(user) => { setNewChat({ user }); }}
onItemClick={(group) => { joinGroup(group); }}

Live Updates / State Management

Files: CometChatHome.tsx, appReducer.ts

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

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
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 & Further Reading

CometChat React UI Kit Documentation
Sample App Repository
User Management Features
Group Management Features

​Overview

​Prerequisites

​Components

​Integration Steps

​1. New Chat State Management Setup

​2. New Chat View Component Integration

​3. New Chat View Implementation

​4. User Selection and Chat Creation

​Implementation Flow

​Customization Options

​Filtering / Edge Cases

​Error Handling & State Management

​Context-Specific Notes

​Summary / Feature Matrix

​Next Steps & Further Reading

Overview

Prerequisites

Components

Integration Steps

1. New Chat State Management Setup

2. New Chat View Component Integration

3. New Chat View Implementation

4. User Selection and Chat Creation

Implementation Flow

Customization Options

Filtering / Edge Cases

Error Handling & State Management

Context-Specific Notes

Summary / Feature Matrix

Next Steps & Further Reading