One-to-One / Group Chat

Build a focused one-to-one or group chat experience in Astro with CometChat React UI Kit.

AI Agent Component Spec

Field	Value
Package	@cometchat/chat-uikit-react
Framework	Astro (with @astrojs/react islands)
Components	CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
Layout	Single chat window — no sidebar, no conversation list
Prerequisite	Complete Astro Integration Steps 1–5 first
SSR	client:only="react" directive — CometChat requires browser APIs
Pattern	Support chat, embedded widgets, focused messaging

This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience.

This assumes you’ve already completed Astro Integration (project created, React added, UI Kit installed).

---

What You’re Building

Three components stacked vertically:

1. Chat header — displays recipient name, avatar, online status, and optional call buttons
2. Message list — real-time chat history with scrolling
3. Message composer — text input with media, emojis, and reactions

---

Step 1 — Create the React Island

Create a OneToOneChat component inside src/components/. This handles init, login, fetches the target user, and renders the chat UI.

src

components

OneToOneChat.tsx

OneToOneChat.css

TypeScript

OneToOneChat.tsx

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

const COMETCHAT_CONSTANTS = {
  APP_ID: "",    // Replace with your App ID
  REGION: "",    // Replace with your Region
  AUTH_KEY: "",  // Replace with your Auth Key (dev only)
};

export default function OneToOneChat() {
  const [user, setUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    const UIKitSettings = new UIKitSettingsBuilder()
      .setAppId(COMETCHAT_CONSTANTS.APP_ID)
      .setRegion(COMETCHAT_CONSTANTS.REGION)
      .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
      .subscribePresenceForAllUsers()
      .build();

    CometChatUIKit.init(UIKitSettings)
      .then(() => {
        console.log("Initialization completed successfully");
        CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
          if (!loggedInUser) {
            CometChatUIKit.login("cometchat-uid-2")
              .then((u) => {
                console.log("Login Successful", { u });
                setUser(u);
              })
              .catch((error) => console.error("Login failed", error));
          } else {
            console.log("Already logged-in", { loggedInUser });
            setUser(loggedInUser);
          }
        });
      })
      .catch((error) => console.error("Initialization failed", error));
  }, []);

  useEffect(() => {
    if (user) {
      // Fetch the user whose chat you want to load
      const UID = "cometchat-uid-1";
      CometChat.getUser(UID).then(
        (u) => setSelectedUser(u),
        (error) => console.log("User fetching failed with error:", error)
      );

      // To load a group chat instead, uncomment below:
      // const GUID = "GUID";
      // CometChat.getGroup(GUID).then(
      //   (group) => setSelectedGroup(group),
      //   (error) => console.log("Group fetching failed with error:", error)
      // );
    }
  }, [user]);

  if (!user) return <div>Initializing Chat...</div>;

  return (
    <>
      {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">
          Set a user or group UID in OneToOneChat.tsx to start chatting
        </div>
      )}
    </>
  );
}

CSS

OneToOneChat.css

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

.empty-conversation {
  height: 100%;
  width: 100%;
  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);
}

.cometchat .cometchat-message-composer {
  border-radius: 0px;
}

Key points:

• CometChat.getUser(UID) fetches the user object from the SDK — you need a real user object, not a manually constructed one.
• Pass either user or group to the message components, never both.
• The highlighted lines show where to set your credentials and target UID.

---

Switching Between User and Group Chat

To load a group chat instead of one-to-one, replace the getUser call with getGroup:

const GUID = "GUID"; // Replace with your actual Group ID

CometChat.getGroup(GUID)
  .then((group) => setSelectedGroup(group))
  .catch((error) => console.error("Failed to fetch group:", error));

---

Step 2 — Render the Astro Page

Import the island and hydrate it client-side using client:only="react".

src/pages/index.astro

---
import OneToOneChat from "../components/OneToOneChat.tsx";
import "../styles/globals.css";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>One-to-One Chat</title>
  </head>
  <body>
    <OneToOneChat client:only="react" />
  </body>
</html>

The client:only="react" directive ensures the component skips SSR entirely and only renders in the browser.

---

Step 3 — Run the Project

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

You should see the chat window load with the conversation for the UID you set.

---

Next Steps

Theming

Customize colors, fonts, and styles to match your brand

Components Overview

Browse all prebuilt UI components

Astro Integration

Back to the main setup guide

Core Features

Chat features included out of the box