Skip to main content
Version: v6

Building a Messaging UI with Tabs, Sidebar, and Message View

This guide walks you through creating a tab-based messaging UI using React and CometChat UIKit. The UI will include different sections for Chats, Calls, Users, and Groups, allowing seamless navigation.

User Interface Preview​

Image

This layout consists of:

  1. Sidebar (Conversation List) – Displays recent conversations with active users and groups.
  2. Message View – Shows the selected chat with real-time messages.
  3. Message Input Box – Allows users to send messages seamlessly.

Step-by-Step Guide​

Step 1: Create a Tab Component​

To manage navigation, let's build a CometChatTabs component. This component will render different tabs and allow switching between sections dynamically.

Folder Structure​

Create a CometChatTabs folder inside your src directory and add the following files:

src/
│── CometChatTabs/
│   ├── assets # These are the images you need to save
│   │   ├── chats.svg 
│   │   ├── calls.svg 
│   │   ├── users.svg 
│   │   ├── groups.svg
│   ├── CometChatTabs.tsx
│   ├── CometChatTabs.css

Download the Icons​

These icons are available in the CometChat UI Kit assets folder. You can find them at:
🔗 GitHub Assets Folder

Implementation​

CometChatTabs.tsx
import { useState } from "react";
import chatsIcon from "./assets/chats.svg";
import callsIcon from "./assets/calls.svg";
import usersIcon from "./assets/users.svg";
import groupsIcon from "./assets/groups.svg";
import "./CometChatTabs.css";

export const CometChatTabs = (props: {
    onTabClicked?: (tabItem: { name: string; icon?: string; }) => void;
    activeTab?: string;
}) => {

    const {
        onTabClicked = () => { },
        activeTab
    } = props;

    const [hoverTab, setHoverTab] = useState("");

    const tabItems = [
        {
            "name": "CHATS",
            "icon": chatsIcon
        },
        {
            "name": "CALLS",
            "icon": callsIcon
        },
        {
            "name": "USERS",
            "icon": usersIcon
        },
        {
            "name": "GROUPS",
            "icon": groupsIcon
        }
    ]

    return (
        <div className="cometchat-tab-component">
            {
                tabItems.map((tabItem) => (
                    <div
                        key={tabItem.name}
                        className="cometchat-tab-component__tab"
                        onClick={() => onTabClicked(tabItem)}
                    >
                        <div
                            className={(activeTab === tabItem.name.toLowerCase() || hoverTab === tabItem.name.toLowerCase()) ? "cometchat-tab-component__tab-icon cometchat-tab-component__tab-icon-active" : "cometchat-tab-component__tab-icon"}
                            style={tabItem.icon ? {
                                WebkitMaskImage: `url("${tabItem.icon}")`,
                                maskImage: `url("${tabItem.icon}")`,
                            } : undefined}
                            onMouseEnter={() => setHoverTab(tabItem.name.toLowerCase())}
                            onMouseLeave={() => setHoverTab("")}
                        />
                        <div
                            className={(activeTab === tabItem.name.toLowerCase() || hoverTab === tabItem.name.toLowerCase()) ? "cometchat-tab-component__tab-text cometchat-tab-component__tab-text-active" : "cometchat-tab-component__tab-text"}
                            onMouseEnter={() => setHoverTab(tabItem.name.toLowerCase())}
                            onMouseLeave={() => setHoverTab("")}
                        >
                            {tabItem.name}
                        </div>
                    </div>
                ))
            }
        </div>
    )

}

Step 2: Create Sidebar​

Let's create the Sidebar component which will render different conversations.

Folder Structure​

Create a CometChatSelector folder inside your src directory and add the following files:

src/
│── CometChatSelector/ 
│   ├── CometChatSelector.tsx
│   ├── CometChatSelector.css
CometChatSelector.tsx
import { useEffect, useState } from "react";
import { Call, Conversation, Group, User, CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallLogs, CometChatConversations, CometChatGroups, CometChatUIKitLoginListener, CometChatUsers } from "@cometchat/chat-uikit-react";
import { CometChatTabs } from "../CometChatTabs/CometChatTabs";
import "./CometChatSelector.css";

interface SelectorProps {
    onSelectorItemClicked?: (input: User | Group | Conversation | Call, type: string) => void;
    onHide?: () => void;
    onNewChatClicked?: () => void;
}

export const CometChatSelector = (props: SelectorProps) => {
    const {
        onSelectorItemClicked = () => { },
    } = props;

    const [loggedInUser, setLoggedInUser] = useState<CometChat.User | null>();
    const [activeItem, setActiveItem] = useState<CometChat.Conversation | CometChat.User | CometChat.Group | CometChat.Call | undefined>();
    const [activeTab, setActiveTab] = useState<string>("chats");

    useEffect(() => {
        const loggedInUsers = CometChatUIKitLoginListener.getLoggedInUser();
        setLoggedInUser(loggedInUsers)
    }, [])

    return (
        <>
            {loggedInUser && <>
                {activeTab == "chats" ? (
                    <CometChatConversations
                        activeConversation={activeItem instanceof CometChat.Conversation ? activeItem : undefined}
                        onItemClick={(e) => {
                            setActiveItem(e);
                            onSelectorItemClicked(e, "updateSelectedItem");
                        }}
                    />
                ) : activeTab == "calls" ? (
                    <CometChatCallLogs
                        activeCall={activeItem instanceof CometChat.Call ? activeItem : undefined}
                        onItemClick={(e: Call) => {
                            setActiveItem(e);
                            onSelectorItemClicked(e, "updateSelectedItemCall");
                        }}
                    />
                ) : activeTab == "users" ? (
                    <CometChatUsers
                        activeUser={activeItem instanceof CometChat.User ? activeItem : undefined}
                        onItemClick={(e) => {
                            setActiveItem(e);
                            onSelectorItemClicked(e, "updateSelectedItemUser");
                        }}
                    />
                ) : activeTab == "groups" ? (
                    <CometChatGroups
                        activeGroup={activeItem instanceof CometChat.Group ? activeItem : undefined}
                        onItemClick={(e) => {
                            setActiveItem(e);
                            onSelectorItemClicked(e, "updateSelectedItemGroup");
                        }}
                    />
                ) : null}
            </>}
            <CometChatTabs activeTab={activeTab} onTabClicked={(item: { name: string; icon?: string; }) => {
                setActiveTab(item.name.toLowerCase())
            }} />
        </>
    );
}

Step 3: Update App​

Now we will update the App.tsx & App.css files to import these new components as below,

App.tsx
import { useState } from "react";
import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSelector } from "./CometChatSelector/CometChatSelector";
import "./App.css";

function App() {
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);
  const [selectedCall, setSelectedCall] = useState<CometChat.Call | undefined>(undefined);

  return (
    <div className="conversations-with-messages">
      <div className="conversations-wrapper">
        <CometChatSelector onSelectorItemClicked={(activeItem) => {
          let item = activeItem;
          if (activeItem instanceof CometChat.Conversation) {
            item = activeItem.getConversationWith();
          }
          if (item instanceof CometChat.User) {
            setSelectedUser(item as CometChat.User);
            setSelectedCall(undefined);
            setSelectedGroup(undefined);
          } else if (item instanceof CometChat.Group) {
            setSelectedUser(undefined);
            setSelectedGroup(item as CometChat.Group);
            setSelectedCall(undefined);
          }
          else if (item instanceof CometChat.Call) {
            //custom logic to open call details
            setSelectedUser(undefined);
            setSelectedGroup(undefined);
            setSelectedCall(item as CometChat.Call);
          }
        }} />
      </div>
      {selectedUser || selectedGroup || selectedCall ? (
        <div className="messages-wrapper">
          <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
          <CometChatMessageList user={selectedUser} group={selectedGroup} />
          <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
        </div>
      ) : (
        <div className="empty-conversation">Select Conversation to start</div>
      )}
    </div>
  );
};

export default App;

Step 4: Run the project​

npm start

Next Steps​

Enhance the User Experience​