Building A Conversation List + Message View

The Conversation List + Message View layout offers a seamless two-panel chat interface, commonly used in modern messaging applications like WhatsApp Web, Slack, and Microsoft Teams.

This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a smooth, real-time messaging experience.

Tip: You can fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.

---

User Interface Overview

This layout is structured into three key sections:

1. Sidebar (Conversation List) – Displays active conversations, including users and groups.
2. Message View – Shows chat messages for the selected conversation in real-time.
3. Message Composer – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.

---

Step-by-Step Guide

Step 1: 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

TypeScript

CometChatSelector.tsx

import { useEffect, useState } from "react";
import {
  Conversation,
  Group,
  User,
  CometChat,
} from "@cometchat/chat-sdk-javascript";
import {
  CometChatConversations,
  CometChatUIKitLoginListener,
} from "@cometchat/chat-uikit-react";
import "./CometChatSelector.css";

// Define the props for the CometChatSelector component
interface SelectorProps {
  onSelectorItemClicked?: (
    input: User | Group | Conversation,
    type: string
  ) => void;
  onHide?: () => void;
  onNewChatClicked?: () => void;
}

// CometChatSelector component
export const CometChatSelector = (props: SelectorProps) => {
  // Destructure props with a default function for onSelectorItemClicked
  const { onSelectorItemClicked = () => {} } = props;

  // State to store the logged-in user
  const [loggedInUser, setLoggedInUser] = useState<CometChat.User | null>();

  // State to track the currently selected item (it can be a Conversation, User, or Group)
  const [activeItem, setActiveItem] = useState<
    CometChat.Conversation | CometChat.User | CometChat.Group | undefined
  >();

  // useEffect hook to fetch and set the logged-in user
  useEffect(() => {
    const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
    setLoggedInUser(loggedInUser);
  }, [loggedInUser]); // Dependency on loggedInUser causes unnecessary re-renders

  return (
    <>
      {/* Render chat conversations if a user is logged in */}
      {loggedInUser && (
        <>
          <CometChatConversations
            activeConversation={
              activeItem instanceof CometChat.Conversation
                ? activeItem
                : undefined
            }
            onItemClick={(e) => {
              setActiveItem(e); // Update the active item when an item is clicked
              onSelectorItemClicked(e, "updateSelectedItem"); // Notify parent component
            }}
          />
        </>
      )}

    </>
  );
};

Step 2: Update App

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

TypeScript

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";
import '@cometchat/chat-uikit-react/css-variables.css';

function App() {
  // State to track the currently selected user
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);

  // State to track the currently selected group
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);

  return (
    <div className="conversations-with-messages">
      {/* Sidebar for selecting conversations */}
      <div className="conversations-wrapper">
        <CometChatSelector
          onSelectorItemClicked={(activeItem) => {
            let item = activeItem;

            // If the selected item is a conversation, extract the user/group from it
            if (activeItem instanceof CometChat.Conversation) {
              item = activeItem.getConversationWith();
            }

            // Determine if the selected item is a User or a Group and update the state accordingly
            if (item instanceof CometChat.User) {
              setSelectedUser(item as CometChat.User);
              setSelectedGroup(undefined); // Ensure no group is selected
            } else if (item instanceof CometChat.Group) {
              setSelectedUser(undefined); // Ensure no user is selected
              setSelectedGroup(item as CometChat.Group);
            } else {
              setSelectedUser(undefined);
              setSelectedGroup(undefined); // Reset if selection is invalid
            }
          }}
        />
      </div>

      {/* If a user or group is selected, display the chat interface */}
      {selectedUser || selectedGroup ? (
        <div className="messages-wrapper">
          {/* Header displaying user/group details */}
          <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
          
          {/* List of messages for the selected user/group */}
          <CometChatMessageList user={selectedUser} group={selectedGroup} />
          
          {/* Message input composer */}
          <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
        </div>
      ) : (
        // Default message when no conversation is selected
        <div className="empty-conversation">Select Conversation to start</div>
      )}
    </div>
  );
};

export default App;

Step 3: Run the project

npm start

---

Next Steps

Enhance the User Experience

• Advanced Customizations – Personalize the chat UI to align with your brand.

---