Conversation List + Message View

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

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Framework	React Router
Components	CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
Layout	Two-panel — conversation list (left) + message view (right)
Prerequisite	Complete React Router Integration first
SSR	N/A — client-side SPA by default
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 Router 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

Create a chat route component. This assumes init() and login() already happen in src/main.tsx (as shown in the integration guide).

src/pages/ChatPage.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 "./ChatPage.css";

export default function ChatPage() {
  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>
  );
}

src/pages/ChatPage.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);
}

Register the route in your App.tsx:

src/App.tsx

import { Routes, Route, Navigate } from "react-router-dom";
import ChatPage from "./pages/ChatPage";

function App() {
  // ... login logic from integration guide ...

  return (
    <Routes>
      <Route path="/chat" element={<ChatPage />} />
      <Route path="*" element={<Navigate to="/chat" replace />} />
    </Routes>
  );
}

export default App;

---

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.
6. React Router handles navigation — the chat page is a route component at /chat.

---

Run

npm run dev

Open http://localhost:5173/chat. 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