Conversation List + Message View

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react`
Framework	React.js
Components	`CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`
Layout	Two-panel — conversation list (left) + message view (right)
Prerequisite	Complete React.js Integration first
Pattern	WhatsApp Web, Slack, Microsoft Teams

This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users click a conversation to open it. This assumes you’ve already completed React.js Integration (project created, UI Kit installed, init + login working).

What You’re Building

Three sections working together:

Sidebar (conversation list) — shows all active conversations (users and groups)
Message view — displays chat messages for the selected conversation in real time
Message composer — text input with support for media, emojis, and reactions

Full Code

Replace your src/App.tsx with the following. Init and login must complete before the provider mounts — see the React.js Integration guide for the src/main.tsx setup.

src/App.tsx

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

function App() {
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);
  const [selectedConversation, setSelectedConversation] = useState<CometChat.Conversation | undefined>(undefined);
  const [showDetails, setShowDetails] = useState(false);

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    setSelectedConversation(conversation); // highlights the open row in the Conversations list
    const entity = conversation.getConversationWith();
    if (conversation.getConversationType() === "user") {
      setSelectedUser(entity as CometChat.User);
      setSelectedGroup(undefined);
    } else {
      setSelectedGroup(entity as CometChat.Group);
      setSelectedUser(undefined);
    }
  };

  return (
    <CometChatProvider>
      <div className="conversations-with-messages">
        <div className="conversations-wrapper">
          <CometChatConversations
            onItemClick={handleConversationClick}
            activeConversation={selectedConversation}
          />
        </div>

        {selectedUser || selectedGroup ? (
          <div className="messages-wrapper">
            <CometChatMessageHeader
              user={selectedUser}
              group={selectedGroup}
              onItemClick={() => setShowDetails(true)}
            />
            <CometChatMessageList user={selectedUser} group={selectedGroup} />
            <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
          </div>
        ) : (
          <div className="empty-conversation">
            Select a conversation to start chatting
          </div>
        )}

        {/* Details / members side panel — opened from the header, closed via onBack */}
        {showDetails && selectedGroup && (
          <div className="details-panel">
            <CometChatGroupMembers
              group={selectedGroup}
              onBack={() => setShowDetails(false)}
            />
          </div>
        )}
      </div>
    </CometChatProvider>
  );
}

export default App;

src/App.css

.conversations-with-messages {
  display: flex;
  height: 100vh;
  width: 100%;
}

.conversations-wrapper {
  width: 360px;
  height: 100%;
  border-right: 1px solid #eee;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.messages-wrapper {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.details-panel {
  width: 320px;
  height: 100%;
  border-left: 1px solid #eee;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.empty-conversation {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-background-color-03, #f5f5f5);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}

How It Works

CometChatProvider wraps the entire tree — it supplies theme, locale, and event context to all CometChat components.
CometChatConversations renders the sidebar list. When a user clicks a conversation, onItemClick fires with the Conversation object.
handleConversationClick extracts the User or Group from the conversation and stores it in state.
Message components (MessageHeader, MessageList, MessageComposer) receive either user or group as a prop — never both at the same time.
When the user switches conversations, state updates and the message panel re-renders with the new chat.
Active highlight — the selected conversation is passed back to the list as activeConversation, so the open row stays highlighted while its chat is on screen.
Details panel round-trip — clicking the message header opens a group details / members side panel (CometChatGroupMembers). Its onBack sets showDetails back to false to close it — the full open→close cycle for the side panel, not just opening it.

Run

npm run dev

Open http://localhost:5173. You should see the conversation list on the left. Click any conversation to load messages on the right.

Next Steps

One-to-One / Group Chat

Single chat window without a sidebar

Tab-Based Chat

Tabbed navigation with Chats, Calls, Users

Components Overview

Browse all prebuilt UI components

Theming

Customize colors, fonts, and styles

​What You’re Building

​Full Code

​How It Works

​Run

​Next Steps