// Production integration patterns -- how to add CometChat as a route, modal, drawer, embedded panel, or widget in an existing project. Teaches Claude WHERE to put chat.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | cometchat-placement |
| description | Production integration patterns -- how to add CometChat as a route, modal, drawer, embedded panel, or widget in an existing project. Teaches Claude WHERE to put chat. |
| license | MIT |
| compatibility | @cometchat/chat-uikit-react ^6; @cometchat/chat-sdk-javascript ^4 |
| allowed-tools | executeBash, readFile, fileSearch, listDirectory |
| metadata | {"author":"CometChat","version":"3.0.0","tags":"chat cometchat react placement route modal drawer widget embedded integration"} |
This skill teaches you WHERE to put CometChat in an existing project. It covers five placement patterns: route, modal, drawer, embedded panel, and floating widget. Each pattern includes step-by-step instructions and complete code examples.
This skill is framework-AGNOSTIC. It uses generic instructions like "create a page at the framework's route location" and "add a route entry to the project's router." The framework-specific details (file paths, SSR handling, env var prefixes) come from the framework skill and the cometchat-core skill.
Before using this skill:
cometchat-core for initialization, login, CSS, and provider patternscometchat-components for component names, props, and composition patternsUse this table to recommend a placement based on what the user is building. If the user says "add chat to my app" without specifying where, ask them what they are building and use this table.
| User intent | Recommended placement | Experience composition |
|---|---|---|
| Messaging app | Route (full page) | Multi-conversation (CometChatConversations + MessageHeader + MessageList + MessageComposer) |
| Marketplace / platform | Drawer on product page + /messages route | Single thread (drawer) + Multi-conversation (route) |
| SaaS / dashboard | Modal from navbar + /messages route | Single thread (modal) + Multi-conversation (route) |
| Social / community | Route (tabs) | Full messenger (CometChatConversations + CallLogs + Users + Groups with tabs) |
| Support / helpdesk | Floating widget | Widget (use CLI) |
| Just exploring | Demo (replace home page) | Multi-conversation |
When presenting experience options to the user, describe these layouts or share the ASCII art so they can visualize what each looks like.
Two-pane layout: conversation list on the left, active chat thread on the right.
โโโโโโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Chats Q โ Richard Ray v c i โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ โ
โ (RR) Richard Ray 3:45 โ โญโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ Is it still up.. โ โ Hi, is the watch โ โ
โ โ โ still up for sale? โ โ
โ (SB) Sarah Beth 3:40 โ โฐโโโโโโโโโโ 4:56 PM โโฏ โ
โ Sure! Sending .. โ โ
โ โ โญโโโโโโโโโโโโโโโโโโฎ โ
โ (RA) Robert Allen 3:38 โ โ Yes, it is โ โ
โ Thanks! Looks .. โ โ available. โ โ
โ โ โฐโ 4:56 PM โโโโโโโฏ โ
โ (SG) Sam Game 3:30 โ โ
โ Sending them .. โ โญโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ โ โ Can I see a couple โ โ
โ (SF) Scott F. 3:22 โ โ of pictures? โ โ
โ I will look .. โ โฐโโโโโโโโโโ 4:56 PM โโฏ โ
โ โ โ
โ (EP) Evan Parker 3:15 โ โญโโโโโโโโโโโโโโโโโโฎ โ
โ Hey, did you .. โ โ Sure! Sending โ โ
โ โ โ them over now. โ โ
โ (JP) John Paul 3:10 โ โฐโ 4:56 PM โโโโโโโฏ โ
โ Sounds good โ โ
โ โ โญโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ (LK) Linda Kay 3:05 โ โ Thanks! Looks good. โ โ
โ See you there โ โฐโโโโโโโโโโ 4:56 PM โโฏ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ Type a message... > โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Best for: messaging apps, team chat, inboxes, dedicated chat sections.
One chat window โ no conversation list. Shows a direct chat with one user or group.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ (RR) Richard Ray v c i โ
โ . Online โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ โ Hi, is the watch still up โ โ
โ โ for sale? 4:56 PM vv โ โ
โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ โ
โ โ
โ โญโโโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ โ Yes, it is available. โ โ
โ โฐโโ 4:56 PM โโโโโโโโโโโโฏ โ
โ โ
โ โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ โ Awesome! Can I see a couple โ โ
โ โ of pictures? 4:56 PM vv โ โ
โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ โ
โ โ
โ โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ โ Sure! Sending them over now. โ โ
โ โฐโโ 4:56 PM โโโโโโโโโโโโโโโโโโโโโฏ โ
โ โ
โ โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ โ Thanks! Looks good. 4:56 PM vvโ โ
โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ โ
โ โ
โ โญโโโโโโโโโโโโโโฎ โ
โ โ Thank you! โ โ
โ โฐโโ 4:56 PM โโฏ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ + m e a Type a message... > โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Best for: marketplace chat, embedded consult, support, one-on-one conversations.
Two-pane layout like Experience 1, plus a bottom tab bar for switching between Chats, Calls, Users, and Groups.
โโโโโโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Chats Q โ Richard Ray v c i โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ โ
โ (RR) Richard Ray 3:45 โ โญโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ How much extra.. โ โ How much extra are โ โ
โ โ โ we talking for the โ โ
โ (SB) Sarah Beth 3:40 โ โ direct flight? โ โ
โ That sounds w.. โ โฐโโโโโโโโโโ 4:56 PM โโฏ โ
โ โ โ
โ (RA) Robert Allen 3:38 โ โญโโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ 4:56 PM โ โ It is $50 more. Save โ โ
โ โ โ a couple of hours. โ โ
โ (SG) Sam Game 3:30 โ โฐโ 4:56 PM โโโโโโโโโโโโฏ โ
โ Sending them .. โ โ
โ โ โญโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ (SF) Scott F. 3:22 โ โ That sounds worth โ โ
โ I will look .. โ โ it. Let us do it. โ โ
โ โ โฐโโโโโโโโโโ 4:56 PM โโฏ โ
โ (EP) Evan Parker 3:15 โ โ
โ Hey, did you .. โ โญโโโโโโโโโโโโโโโโโโโโโโโฎ โ
โ โ โ Great, I will send โ โ
โ โ โ you the details. โ โ
โ โ โฐโ 4:56 PM โโโโโโโโโโโโฏ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ Type a message... > โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ Ch Ca Us Gr โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Best for: social apps, community platforms, dating apps, full-featured chat products.
Every <CometChatMessageList ...> in the placement patterns below
includes hideReplyInThreadOption. The kit's default (false) puts a
"Reply in Thread" entry in every message's action menu โ but that
entry only works if the integrator has wired up a thread panel
(CometChatThreadHeader + a scoped CometChatMessageList +
CometChatMessageComposer with parentMessageId). If the thread
panel isn't wired (the case for a simple drawer, widget, modal, or
single-thread experience), the option is still visible and clicking it
silently does nothing โ confusing UX.
Default: threads hidden. To enable threads for an experience that actually has the side-panel plumbing:
hideReplyInThreadOption from the main <CometChatMessageList>onThreadRepliesClick to capture the thread messagecometchat-components ยง Threading for
the full pattern โ CometChatThreadHeader + scoped MessageList +
scoped MessageComposer with parentMessageId)The most common pattern. Chat gets its own page in the app, accessible via navigation.
The provider (from cometchat-core) should wrap the entire app or the chat route's layout. This ensures init and login happen once, not per-navigation.
App.tsx, layout.tsx, root.tsx).CometChatProvider inside the existing layout, wrapping the router outlet or children.@cometchat/chat-uikit-react/css-variables.css at the app root CSS file if not already imported.Create a new file (e.g., ChatPage.tsx or MessagesPage.tsx) at the framework's conventional page location:
src/pages/ChatPage.tsx or src/ChatPage.tsxapp/chat/page.tsxpages/chat.tsxsrc/pages/chat.astro (with a React island)app/routes/chat.tsxChoose the experience composition from cometchat-components:
Two-pane (most common for routes):
// ChatPage.tsx
import { useState } from "react";
import {
CometChatConversations,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
export default function ChatPage() {
const [selectedUser, setSelectedUser] = useState<CometChat.User>();
const [selectedGroup, setSelectedGroup] = useState<CometChat.Group>();
function handleConversationClick(conversation: CometChat.Conversation) {
const entity = conversation.getConversationWith();
if (entity instanceof CometChat.User) {
setSelectedUser(entity);
setSelectedGroup(undefined);
} else if (entity instanceof CometChat.Group) {
setSelectedUser(undefined);
setSelectedGroup(entity);
}
}
return (
<div style={{ display: "flex", height: "100vh" }}>
<div style={{ width: "360px", borderRight: "1px solid #eee" }}>
<CometChatConversations onItemClick={handleConversationClick} />
</div>
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
{(selectedUser || selectedGroup) ? (
<>
{selectedUser && <CometChatMessageHeader user={selectedUser} />}
{selectedGroup && <CometChatMessageHeader group={selectedGroup} />}
{selectedUser && <CometChatMessageList user={selectedUser} hideReplyInThreadOption />}
{selectedGroup && <CometChatMessageList group={selectedGroup} hideReplyInThreadOption />}
{selectedUser && <CometChatMessageComposer user={selectedUser} />}
{selectedGroup && <CometChatMessageComposer group={selectedGroup} />}
</>
) : (
<div style={{
flex: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#999",
}}>
Select a conversation to start chatting
</div>
)}
</div>
</div>
);
}
Full messenger (tabs -- for standalone messaging sections):
// MessagesPage.tsx
import { useState } from "react";
import {
CometChatConversations,
CometChatCallLogs,
CometChatUsers,
CometChatGroups,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
type Tab = "chats" | "calls" | "users" | "groups";
export default function MessagesPage() {
const [activeTab, setActiveTab] = useState<Tab>("chats");
const [selectedUser, setSelectedUser] = useState<CometChat.User>();
const [selectedGroup, setSelectedGroup] = useState<CometChat.Group>();
function selectUser(user: CometChat.User) {
setSelectedUser(user);
setSelectedGroup(undefined);
}
function selectGroup(group: CometChat.Group) {
setSelectedUser(undefined);
setSelectedGroup(group);
}
return (
<div style={{ display: "flex", height: "100vh" }}>
<div style={{ width: "360px", display: "flex", flexDirection: "column", borderRight: "1px solid #eee" }}>
<nav style={{ display: "flex", borderBottom: "1px solid #eee" }}>
{(["chats", "calls", "users", "groups"] as Tab[]).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
style={{
flex: 1,
padding: "12px 0",
border: "none",
background: "none",
cursor: "pointer",
fontWeight: activeTab === tab ? 700 : 400,
borderBottom: activeTab === tab ? "2px solid var(--cometchat-primary-color, #3399ff)" : "2px solid transparent",
}}
>
{tab.charAt(0).toUpperCase() + tab.slice(1)}
</button>
))}
</nav>
<div style={{ flex: 1, overflow: "hidden" }}>
{activeTab === "chats" && (
<CometChatConversations
onItemClick={(conv) => {
const entity = conv.getConversationWith();
if (entity instanceof CometChat.User) selectUser(entity);
else if (entity instanceof CometChat.Group) selectGroup(entity);
}}
/>
)}
{activeTab === "calls" && <CometChatCallLogs />}
{activeTab === "users" && <CometChatUsers onItemClick={selectUser} />}
{activeTab === "groups" && <CometChatGroups onItemClick={selectGroup} />}
</div>
</div>
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
{selectedUser && (
<>
<CometChatMessageHeader user={selectedUser} />
<CometChatMessageList user={selectedUser} hideReplyInThreadOption />
<CometChatMessageComposer user={selectedUser} />
</>
)}
{selectedGroup && (
<>
<CometChatMessageHeader group={selectedGroup} />
<CometChatMessageList group={selectedGroup} hideReplyInThreadOption />
<CometChatMessageComposer group={selectedGroup} />
</>
)}
{!selectedUser && !selectedGroup && (
<div style={{
flex: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#999",
}}>
Select a conversation to start chatting
</div>
)}
</div>
</div>
);
}
Read the project's existing routing setup first. Do not assume a pattern. Look for:
createBrowserRouter(), <Routes>, <Route> in App.tsx or a routes fileapp/ directory -- just creating the page file at app/chat/page.tsx IS the routepages/ directory -- creating pages/chat.tsx IS the routesrc/pages/ directory -- creating src/pages/chat.astro IS the routeapp/routes/ or manual routes in app/routes.tsFor manual routers (React Router), add a route entry:
// Example: adding to an existing createBrowserRouter
{
path: "/chat",
element: <ChatPage />,
}
For file-based routers (Next.js, Astro, React Router v7), creating the file at the right path is sufficient.
Read the project's existing navbar/sidebar first. Find the component that renders navigation links (could be Navbar.tsx, Sidebar.tsx, Header.tsx, Nav.tsx, or inline in a layout).
Add a "Messages" or "Chat" link alongside the existing links:
// Example: adding to an existing nav component
<Link to="/chat">Messages</Link>
// or
<a href="/chat">Messages</a>
Match the existing link style. If the nav uses icons, add a chat/message icon. If it uses a specific NavLink or Link component, use the same one.
Check if @cometchat/chat-uikit-react/css-variables.css is already imported at the app root. If not, add it to the root CSS file or root layout:
/* In globals.css or index.css at the app root */
@import "@cometchat/chat-uikit-react/css-variables.css";
A centered overlay for quick one-off messages. Use when chat is a secondary action (e.g., "message this user" from a profile page).
// ChatModal.tsx
import { useEffect, useState } from "react";
import {
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
interface ChatModalProps {
isOpen: boolean;
onClose: () => void;
targetUserId?: string;
targetGroupId?: string;
}
export function ChatModal({ isOpen, onClose, targetUserId, targetGroupId }: ChatModalProps) {
const [user, setUser] = useState<CometChat.User>();
const [group, setGroup] = useState<CometChat.Group>();
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!isOpen) return;
setLoading(true);
if (targetUserId) {
CometChat.getUser(targetUserId)
.then((u) => {
setUser(u);
setGroup(undefined);
setLoading(false);
})
.catch(() => setLoading(false));
} else if (targetGroupId) {
CometChat.getGroup(targetGroupId)
.then((g) => {
setUser(undefined);
setGroup(g);
setLoading(false);
})
.catch(() => setLoading(false));
}
}, [isOpen, targetUserId, targetGroupId]);
if (!isOpen) return null;
return (
<div
style={{
position: "fixed",
inset: 0,
zIndex: 1000,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{/* Backdrop */}
<div
onClick={onClose}
style={{
position: "absolute",
inset: 0,
backgroundColor: "rgba(0, 0, 0, 0.5)",
}}
/>
{/* Modal content */}
<div
style={{
position: "relative",
width: "min(600px, 90vw)",
height: "min(700px, 80vh)",
backgroundColor: "var(--cometchat-background-color-01, #fff)",
borderRadius: "var(--cometchat-border-radius-lg, 12px)",
overflow: "hidden",
display: "flex",
flexDirection: "column",
boxShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
}}
>
{/* Close button */}
<button
onClick={onClose}
style={{
position: "absolute",
top: 8,
right: 8,
zIndex: 10,
background: "none",
border: "none",
fontSize: 20,
cursor: "pointer",
padding: "4px 8px",
}}
aria-label="Close chat"
>
X
</button>
{loading ? (
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
Loading...
</div>
) : (
<>
{user && <CometChatMessageHeader user={user} />}
{group && <CometChatMessageHeader group={group} />}
<div style={{ flex: 1, overflow: "hidden" }}>
{user && <CometChatMessageList user={user} hideReplyInThreadOption />}
{group && <CometChatMessageList group={group} hideReplyInThreadOption />}
</div>
{user && <CometChatMessageComposer user={user} />}
{group && <CometChatMessageComposer group={group} />}
</>
)}
</div>
</div>
);
}
Read the project's components to find the right trigger point. This could be:
// Example: adding a chat button to an existing product card
import { useState } from "react";
import { ChatModal } from "./ChatModal";
function ProductCard({ product }) {
const [showChat, setShowChat] = useState(false);
return (
<div>
{/* existing product card content */}
<button onClick={() => setShowChat(true)}>
Message Seller
</button>
<ChatModal
isOpen={showChat}
onClose={() => setShowChat(false)}
targetUserId={product.sellerId}
/>
</div>
);
}
The CometChatProvider (or equivalent init logic) MUST be at the app root, NOT inside the modal. If init is inside the modal, it re-runs every time the modal opens, causing flicker and reconnection delays.
A side panel that slides in from the right. Better than a modal for ongoing conversations because the user can keep it open while browsing.
// ChatDrawer.tsx
import { useEffect, useState } from "react";
import {
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
interface ChatDrawerProps {
isOpen: boolean;
onClose: () => void;
targetUserId?: string;
targetGroupId?: string;
}
export function ChatDrawer({ isOpen, onClose, targetUserId, targetGroupId }: ChatDrawerProps) {
const [user, setUser] = useState<CometChat.User>();
const [group, setGroup] = useState<CometChat.Group>();
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!isOpen) return;
setLoading(true);
if (targetUserId) {
CometChat.getUser(targetUserId)
.then((u) => {
setUser(u);
setGroup(undefined);
setLoading(false);
})
.catch(() => setLoading(false));
} else if (targetGroupId) {
CometChat.getGroup(targetGroupId)
.then((g) => {
setUser(undefined);
setGroup(g);
setLoading(false);
})
.catch(() => setLoading(false));
}
}, [isOpen, targetUserId, targetGroupId]);
return (
<>
{/* Backdrop */}
{isOpen && (
<div
onClick={onClose}
style={{
position: "fixed",
inset: 0,
zIndex: 999,
backgroundColor: "rgba(0, 0, 0, 0.3)",
}}
/>
)}
{/* Drawer */}
{/*
IMPORTANT: do NOT animate with `transform: translateX(...)`.
`transform` on an element creates a new containing block for
`position: fixed` descendants (per the CSS spec), so every
fixed-positioned popover that CometChat renders inside the drawer
โ message options menu, emoji picker, file preview, reactions
popover, thread panel โ becomes anchored to the transformed
drawer instead of the viewport. The result is popovers that
appear clipped, offset, or drift as the drawer animates. Animate
the `right` offset instead; no transform, no containing-block
takeover, fixed popovers stay anchored to the viewport.
*/}
<div
style={{
position: "fixed",
top: 0,
right: isOpen ? 0 : "-400px", // matches width; slides off-screen when closed
bottom: 0,
width: "400px",
maxWidth: "100vw",
zIndex: 1000,
backgroundColor: "var(--cometchat-background-color-01, #fff)",
boxShadow: "-4px 0 20px rgba(0, 0, 0, 0.15)",
display: "flex",
flexDirection: "column",
transition: "right 0.3s ease-in-out",
}}
>
{/* Header with close button */}
<div style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "8px 12px",
borderBottom: "1px solid #eee",
}}>
<span style={{ fontWeight: 600 }}>Chat</span>
<button
onClick={onClose}
style={{
background: "none",
border: "none",
fontSize: 18,
cursor: "pointer",
padding: "4px 8px",
}}
aria-label="Close chat"
>
X
</button>
</div>
{/* Chat content */}
{loading ? (
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
Loading...
</div>
) : (
<>
{user && <CometChatMessageHeader user={user} />}
{group && <CometChatMessageHeader group={group} />}
<div style={{ flex: 1, overflow: "hidden" }}>
{user && <CometChatMessageList user={user} hideReplyInThreadOption />}
{group && <CometChatMessageList group={group} hideReplyInThreadOption />}
</div>
{user && <CometChatMessageComposer user={user} />}
{group && <CometChatMessageComposer group={group} />}
</>
)}
</div>
</>
);
}
Same approach as the modal -- find the right trigger point in the existing project:
import { useState } from "react";
import { ChatDrawer } from "./ChatDrawer";
function UserProfile({ userId }) {
const [showChat, setShowChat] = useState(false);
return (
<div>
{/* existing profile content */}
<button onClick={() => setShowChat(true)}>
Chat with this user
</button>
<ChatDrawer
isOpen={showChat}
onClose={() => setShowChat(false)}
targetUserId={userId}
/>
</div>
);
}
For a drawer that shows the full conversation list (not just a single thread):
// ConversationDrawer.tsx -- shows conversation list + message view
import { useState } from "react";
import {
CometChatConversations,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
interface ConversationDrawerProps {
isOpen: boolean;
onClose: () => void;
}
export function ConversationDrawer({ isOpen, onClose }: ConversationDrawerProps) {
const [selectedUser, setSelectedUser] = useState<CometChat.User>();
const [selectedGroup, setSelectedGroup] = useState<CometChat.Group>();
function handleConversationClick(conversation: CometChat.Conversation) {
const entity = conversation.getConversationWith();
if (entity instanceof CometChat.User) {
setSelectedUser(entity);
setSelectedGroup(undefined);
} else if (entity instanceof CometChat.Group) {
setSelectedUser(undefined);
setSelectedGroup(entity);
}
}
const hasSelection = selectedUser || selectedGroup;
return (
<>
{isOpen && (
<div
onClick={onClose}
style={{ position: "fixed", inset: 0, zIndex: 999, backgroundColor: "rgba(0,0,0,0.3)" }}
/>
)}
{/*
Animate the `right` offset, never `transform: translateX(...)` โ
`transform` creates a new containing block, which re-anchors
CometChat's fixed-positioned popovers (emoji picker, message
options, file preview, thread panel) to the drawer instead of
the viewport and makes them misalign.
*/}
<div
style={{
position: "fixed",
top: 0,
right: isOpen ? 0 : "-720px", // off-screen by widest width when closed
bottom: 0,
width: hasSelection ? "720px" : "360px",
maxWidth: "100vw",
zIndex: 1000,
backgroundColor: "var(--cometchat-background-color-01, #fff)",
boxShadow: "-4px 0 20px rgba(0,0,0,0.15)",
display: "flex",
transition: "right 0.3s ease-in-out, width 0.3s ease-in-out",
}}
>
{/* Conversation list */}
<div style={{ width: "360px", borderRight: hasSelection ? "1px solid #eee" : "none", display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 12px", borderBottom: "1px solid #eee" }}>
<span style={{ fontWeight: 600 }}>Messages</span>
<button onClick={onClose} style={{ background: "none", border: "none", fontSize: 18, cursor: "pointer" }} aria-label="Close">×</button>
</div>
<div style={{ flex: 1 }}>
<CometChatConversations onItemClick={handleConversationClick} />
</div>
</div>
{/* Message view */}
{hasSelection && (
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
{selectedUser && <CometChatMessageHeader user={selectedUser} />}
{selectedGroup && <CometChatMessageHeader group={selectedGroup} />}
<div style={{ flex: 1, overflow: "hidden" }}>
{selectedUser && <CometChatMessageList user={selectedUser} hideReplyInThreadOption />}
{selectedGroup && <CometChatMessageList group={selectedGroup} hideReplyInThreadOption />}
</div>
{selectedUser && <CometChatMessageComposer user={selectedUser} />}
{selectedGroup && <CometChatMessageComposer group={selectedGroup} />}
</div>
)}
</div>
</>
);
}
A button-in-the-corner chat overlay. Available on every page of the app without a dedicated route. Common for support widgets, helpdesk chat, "contact us" overlays.
When to use: chat is a secondary concern (not the core product), and should be accessible from anywhere without navigating. When NOT to use: if chat is central to the app, use a route placement instead โ widgets don't scale to inbox-style usage.
// src/components/ChatWidget.tsx (or components/ChatWidget.tsx in Next.js)
import { useState } from "react";
import {
CometChatConversations,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
export default function ChatWidget() {
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState<CometChat.User | CometChat.Group>();
function handleConversationClick(conv: CometChat.Conversation) {
const entity = conv.getConversationWith();
if (entity instanceof CometChat.User || entity instanceof CometChat.Group) {
setSelected(entity);
}
}
return (
<>
{/* Floating trigger button โ always visible */}
<button
type="button"
aria-label={open ? "Close chat" : "Open chat"}
onClick={() => setOpen((v) => !v)}
style={{
position: "fixed",
bottom: 24,
right: 24,
width: 56,
height: 56,
borderRadius: "50%",
background: "var(--cometchat-primary-color, #6c63ff)",
color: "white",
border: "none",
cursor: "pointer",
fontSize: 24,
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.15)",
zIndex: 9999,
}}
>
{open ? "ร" : "๐ฌ"}
</button>
{/* Widget panel โ overlay, not a full-page drawer */}
{open && (
<div
style={{
position: "fixed",
bottom: 96, // leave room for the button
right: 24,
width: "min(380px, calc(100vw - 48px))",
height: "min(600px, calc(100vh - 120px))",
background: "var(--cometchat-background-color-01, white)",
border: "1px solid var(--cometchat-border-color-light, #eee)",
borderRadius: 12,
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
display: "flex",
flexDirection: "column",
overflow: "hidden",
zIndex: 9998,
}}
>
{selected ? (
<>
<button
onClick={() => setSelected(undefined)}
style={{ alignSelf: "flex-start", background: "none", border: "none", padding: 12, cursor: "pointer" }}
>
โ Back
</button>
{selected instanceof CometChat.User && (
<>
<CometChatMessageHeader user={selected} />
<div style={{ flex: 1, overflow: "hidden" }}>
<CometChatMessageList user={selected} hideReplyInThreadOption />
</div>
<CometChatMessageComposer user={selected} />
</>
)}
{selected instanceof CometChat.Group && (
<>
<CometChatMessageHeader group={selected} />
<div style={{ flex: 1, overflow: "hidden" }}>
<CometChatMessageList group={selected} hideReplyInThreadOption />
</div>
<CometChatMessageComposer group={selected} />
</>
)}
</>
) : (
<CometChatConversations onItemClick={handleConversationClick} />
)}
</div>
)}
</>
);
}
Key points:
position: fixed. z-index: 9999 / 9998 ensures they float above the app's content but don't conflict with modals (which typically go to z-index: 10000+).min(...)) so the widget shrinks gracefully on mobile. On screens < 428px you may want to switch to full-screen (width: 100vw; height: 100vh; bottom: 0; right: 0) โ gate with a useEffect + window.innerWidth or CSS media query.{open && (...)} rather than animating transforms โ the CometChat components subscribe to SDK events on mount, so keeping the panel in the tree when closed wastes resources.Where to mount depends on the framework. The widget must be a sibling (not a descendant) of the app's main layout so its fixed positioning escapes any overflow-hidden containers.
| Framework | Mount location |
|---|---|
| React (Vite / CRA) | src/main.tsx or src/App.tsx, sibling of <Routes> |
| Next.js App Router | app/layout.tsx, sibling of {children} (inside <body>, outside any main container with overflow: hidden) |
| Next.js Pages Router | pages/_app.tsx, sibling of <Component /> |
| React Router | app/root.tsx (v7) or wherever <Outlet /> lives (v6) |
| Astro | Inside a client:only="react" island in src/layouts/BaseLayout.astro |
Example โ Next.js App Router:
// app/layout.tsx
import ChatWidget from "@/components/ChatWidget";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<ChatWidget />
</body>
</html>
);
}
In the Pages Router and Vite cases, the provider (CometChatProvider) must wrap both the app content and the widget โ otherwise the widget won't have access to the init'd SDK.
Most apps want to hide the widget on auth pages (login, signup, password reset). Options:
React Router / Next.js โ use useLocation() / usePathname():
// Wrap the export with a router-aware gate
import { useLocation } from "react-router-dom"; // or `usePathname` in Next.js
export default function ChatWidgetGate() {
const pathname = useLocation().pathname;
const hiddenOn = ["/login", "/signup", "/forgot-password"];
if (hiddenOn.some((p) => pathname.startsWith(p))) return null;
return <ChatWidget />;
}
Astro โ render the island only on the pages that want it, rather than globally in the layout.
Record the choice in .cometchat/config.json so the integration skill knows the widget was used:
npx @cometchat/skills-cli config save --placement widget --json
Do not invoke cometchat add-widget โ that's a v2 CLI command that writes a template-based widget. v3 skills write the widget directly using the pattern above, so it fits the project's existing code style. add-widget is retained only for backward compatibility with v2 integrations.
Chat embedded directly in an existing page, alongside other content. Common for marketplace product pages, dashboards, or support panels.
The critical thing about embedded placement is the container MUST have an explicit height. CometChat components fill 100% of their container -- if the container has no height constraint, the components either collapse to zero or overflow the page.
// ChatPanel.tsx
import { useEffect, useState } from "react";
import {
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
interface ChatPanelProps {
targetUserId?: string;
targetGroupId?: string;
height?: string; // e.g., "500px", "60vh"
conversationMode?: boolean; // Show conversation list instead of single thread
}
export function ChatPanel({
targetUserId,
targetGroupId,
height = "500px",
}: ChatPanelProps) {
const [user, setUser] = useState<CometChat.User>();
const [group, setGroup] = useState<CometChat.Group>();
const [loading, setLoading] = useState(true);
useEffect(() => {
if (targetUserId) {
CometChat.getUser(targetUserId)
.then((u) => {
setUser(u);
setGroup(undefined);
setLoading(false);
})
.catch(() => setLoading(false));
} else if (targetGroupId) {
CometChat.getGroup(targetGroupId)
.then((g) => {
setUser(undefined);
setGroup(g);
setLoading(false);
})
.catch(() => setLoading(false));
}
}, [targetUserId, targetGroupId]);
return (
<div
style={{
height,
display: "flex",
flexDirection: "column",
border: "1px solid #eee",
borderRadius: "var(--cometchat-border-radius-lg, 8px)",
overflow: "hidden",
}}
>
{loading ? (
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
Loading chat...
</div>
) : (
<>
{user && <CometChatMessageHeader user={user} />}
{group && <CometChatMessageHeader group={group} />}
<div style={{ flex: 1, overflow: "hidden" }}>
{user && <CometChatMessageList user={user} hideReplyInThreadOption />}
{group && <CometChatMessageList group={group} hideReplyInThreadOption />}
</div>
{user && <CometChatMessageComposer user={user} />}
{group && <CometChatMessageComposer group={group} />}
</>
)}
</div>
);
}
Read the existing page where chat should be embedded. Understand the layout before adding anything. Common patterns:
Connect the target user/group based on the page's data:
// Example: embedding on a product page
function ProductPage({ product }) {
return (
<div style={{ display: "flex", gap: 24 }}>
<div style={{ flex: 1 }}>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* other product content */}
</div>
<div style={{ width: 400 }}>
<h3>Chat with the seller</h3>
<ChatPanel
targetUserId={product.sellerId}
height="500px"
/>
</div>
</div>
);
}
If you want an embedded panel with a conversation list (not just a single thread), use the multi-conversation composition from cometchat-components inside a container with explicit height:
// EmbeddedInbox.tsx
import { useState } from "react";
import {
CometChatConversations,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
interface EmbeddedInboxProps {
height?: string;
}
export function EmbeddedInbox({ height = "600px" }: EmbeddedInboxProps) {
const [selectedUser, setSelectedUser] = useState<CometChat.User>();
const [selectedGroup, setSelectedGroup] = useState<CometChat.Group>();
function handleConversationClick(conversation: CometChat.Conversation) {
const entity = conversation.getConversationWith();
if (entity instanceof CometChat.User) {
setSelectedUser(entity);
setSelectedGroup(undefined);
} else if (entity instanceof CometChat.Group) {
setSelectedUser(undefined);
setSelectedGroup(entity);
}
}
return (
<div style={{ height, display: "flex", border: "1px solid #eee", borderRadius: 8, overflow: "hidden" }}>
<div style={{ width: "300px", borderRight: "1px solid #eee" }}>
<CometChatConversations onItemClick={handleConversationClick} />
</div>
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
{selectedUser && (
<>
<CometChatMessageHeader user={selectedUser} />
<div style={{ flex: 1, overflow: "hidden" }}>
<CometChatMessageList user={selectedUser} hideReplyInThreadOption />
</div>
<CometChatMessageComposer user={selectedUser} />
</>
)}
{selectedGroup && (
<>
<CometChatMessageHeader group={selectedGroup} />
<div style={{ flex: 1, overflow: "hidden" }}>
<CometChatMessageList group={selectedGroup} hideReplyInThreadOption />
</div>
<CometChatMessageComposer group={selectedGroup} />
</>
)}
{!selectedUser && !selectedGroup && (
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#999" }}>
Select a conversation
</div>
)}
</div>
</div>
);
}
These rules apply to ALL placement patterns. Violating any of them causes integration bugs or destroys the user's existing project.
NEVER replace the project's existing entry file (App.tsx, page.tsx, layout.tsx, main.tsx, etc.) unless the user explicitly chose "demo mode." Replacing the entry file destroys all existing functionality.
ALWAYS read the project's existing files before deciding where to put things. Do not assume a project structure. Read the router config, the nav component, the layout files. Understand what exists before adding to it.
ALWAYS create new files alongside existing ones. Do not modify files you do not fully understand. The exceptions are:
CometChat CSS must be imported exactly once. Before adding the import, check if it already exists:
grep -r "css-variables.css" src/ app/ pages/ 2>/dev/null
If it is already imported, do not add a duplicate.
CometChatProvider or init must be at the app root, not inside a modal/drawer/panel. Re-initializing on every open causes flicker, dropped WebSocket connections, and race conditions.
Every CometChat container must have explicit dimensions. Components fill 100% of their parent. If the parent has no height, the components collapse to zero. Always set height, min-height, or use flex/grid layout with a bounded container.
6a. Flex parents that hold a CometChatMessageList MUST set minHeight: 0 (and minWidth: 0 for horizontal flex parents). The W3C default min-height: auto makes flex children refuse to shrink below their intrinsic content size โ so once the conversation grows past the viewport, the list pushes the composer below the fold and the layout breaks. This is the canonical chat-layout bug โ works fine for short conversations, breaks for long ones. The fix is one CSS property; the diagnosis takes hours if you don't know the rule.
/* โ CORRECT โ header + list + composer with the flex-shrink trap fixed */
<div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
<div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
<div style={{ flex: "0 0 auto" }}>
<CometChatMessageHeader user={user} />
</div>
<div style={{ flex: "1 1 0", minHeight: 0, overflow: "hidden" }}>
<CometChatMessageList user={user} hideReplyInThreadOption />
</div>
<div style={{ flex: "0 0 auto" }}>
<CometChatMessageComposer user={user} />
</div>
</div>
</div>
/* โ WRONG โ list grows past the viewport once messages exceed visible area */
<div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
<CometChatMessageHeader user={user} />
<CometChatMessageList user={user} /> {/* takes intrinsic height, no scroll */}
<CometChatMessageComposer user={user} /> {/* falls off the bottom */}
</div>
The wrap-each-component-in-a-flex-sized-div pattern is what makes this work. Don't pass the kit components directly as flex children โ wrap them.
Resolve target users/groups before rendering CometChat components. Use CometChat.getUser(uid) or CometChat.getGroup(guid) to get the full CometChat.User or CometChat.Group object. Do not pass a raw UID string to user props -- they expect object instances.
For SSR frameworks, wrap CometChat components appropriately. See the cometchat-core skill, section 5 (SSR safety), for framework-specific patterns.
Every <CometChatMessageList> MUST include hideReplyInThreadOption unless the integration also wires a thread panel (CometChatThreadHeader + scoped MessageList + scoped MessageComposer with parentMessageId). The kit's default (false) puts a "Reply in Thread" entry in the message action menu that silently does nothing when no panel is wired. Drawer, widget, modal, and embed patterns never wire a thread panel, so the prop is mandatory there. Two-pane route patterns (full messenger, social) MAY omit it if-and-only-if they implement the full thread-panel plumbing; otherwise keep it. Writing <CometChatMessageList user={user} /> without the prop in a drawer or widget is a generation bug โ every example in this skill includes it for a reason.
Never animate a CometChat-containing element with transform, translate-*, or any transition-transform. This includes:
transform: translateX(...), transform: scale(...), etc.translate-x-*, -translate-x-*, translate-x-0, translate-x-full, translate-y-*, scale-*, rotate-*, skew-*, transform-*transition-transform, motion-safe:translate-*, will-change: transformfilter, perspective, backdrop-filterAny of these creates a new containing block for position: fixed descendants, which reparents CometChat's fixed-positioned popovers (emoji picker, message options menu, file preview, reactions popover, thread panel) to the animated container instead of the viewport. Animate the right / left offset instead (inline: right: isOpen ? 0 : '-420px'; Tailwind: right-0 / right-[-420px] with transition-[right]). See cometchat-core ยง 8 anti-pattern 11 for the full CSS-spec explanation.