(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 Initializing Chat...
;
return (
<>
{selectedUser || selectedGroup ? (
) : (
Set a user or group UID in OneToOneChat.tsx to start chatting
)}
);
}
```
***
## 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.