Conversation List + Message View

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react`
Framework	Astro
Components	`CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`
Layout	Two-panel — conversation list (left) + message view (right)
Prerequisite	Complete Astro Integration first
SSR	React island with `client:only="react"` directive
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 Astro 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

Create a React island component with the chat UI, then render it in an Astro page with client:only="react".

src/components/ConversationChat.tsx

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatUIKit,
  UIKitSettingsBuilder,
  CometChatProvider,
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

export default function ConversationChat() {
  const [ready, setReady] = useState(false);
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    const settings = new UIKitSettingsBuilder()
      .setAppId("YOUR_APP_ID")
      .setRegion("YOUR_REGION")
      .setAuthKey("YOUR_AUTH_KEY")
      .subscribePresenceForAllUsers()
      .build();

    CometChatUIKit.init(settings).then(async () => {
      await CometChatUIKit.login("cometchat-uid-1");
      setReady(true);
    });
  }, []);

  if (!ready) return <div>Loading chat...</div>;

  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 style={{
        display: "flex",
        height: "100vh",
        width: "100%",
      }}>
        <div style={{
          width: 360,
          height: "100%",
          borderRight: "1px solid #eee",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
        }}>
          <CometChatConversations onItemClick={handleConversationClick} />
        </div>

        {selectedUser || selectedGroup ? (
          <div style={{
            flex: 1,
            height: "100%",
            display: "flex",
            flexDirection: "column",
          }}>
            <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
            <CometChatMessageList user={selectedUser} group={selectedGroup} />
            <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
          </div>
        ) : (
          <div style={{
            flex: 1,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            background: "#f5f5f5",
            color: "#727272",
            font: "400 14px Roboto, sans-serif",
          }}>
            Select a conversation to start chatting
          </div>
        )}
      </div>
    </CometChatProvider>
  );
}

src/pages/chat.astro

---
import ConversationChat from '../components/ConversationChat.tsx';
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Chat</title>
  </head>
  <body style="margin: 0;">
    <ConversationChat client:only="react" />
  </body>
</html>

How It Works

client:only="react" tells Astro to skip server-rendering and hydrate the component entirely on the client. This is required because CometChat uses browser APIs.
React island — the CometChat UI lives in a self-contained React component. Astro handles the page shell, React handles the interactive chat.
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.

Run

npm run dev

Open http://localhost:4321/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

​What You’re Building

​Full Code

​How It Works

​Run

​Next Steps