Conversation List + Message View

Build a two-panel conversation list + message view layout in React.js with CometChat UI Kit.

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:

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

---

Full Code

Replace your src/App.tsx with the following. This assumes init() and login() already happen in src/main.tsx (as shown in the integration guide).

src/App.tsx

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

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

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    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} />
        </div>

        {selectedUser || selectedGroup ? (
          <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 a conversation to start chatting
          </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;
}

.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

1. CometChatProvider wraps the entire tree — it supplies theme, locale, and event context to all CometChat components.
2. CometChatConversations renders the sidebar list. When a user clicks a conversation, onItemClick fires with the Conversation object.
3. handleConversationClick extracts the User or Group from the conversation and stores it in state.
4. Message components (MessageHeader, MessageList, MessageComposer) receive either user or group as a prop — never both at the same time.
5. When the user switches conversations, state updates and the message panel re-renders with the new chat.

---

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