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

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