{"id":"47e435a5-df9d-466a-9fcd-9184a58631ab","shortId":"3wVCQ4","kind":"skill","title":"cometchat-placement","tagline":"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.","description":"## Purpose\n\nThis 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.\n\n**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.\n\n**Before using this skill:**\n- Read `cometchat-core` for initialization, login, CSS, and provider patterns\n- Read `cometchat-components` for component names, props, and composition patterns\n\n---\n\n## \"What are you building?\" -- placement recommendation\n\nUse 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.\n\n| User intent | Recommended placement | Experience composition |\n|---|---|---|\n| Messaging app | Route (full page) | Multi-conversation (CometChatConversations + MessageHeader + MessageList + MessageComposer) |\n| Marketplace / platform | Drawer on product page + `/messages` route | Single thread (drawer) + Multi-conversation (route) |\n| SaaS / dashboard | Modal from navbar + `/messages` route | Single thread (modal) + Multi-conversation (route) |\n| Social / community | Route (tabs) | Full messenger (CometChatConversations + CallLogs + Users + Groups with tabs) |\n| Support / helpdesk | Floating widget | Widget (use CLI) |\n| Just exploring | Demo (replace home page) | Multi-conversation |\n\n---\n\n## Visual reference — experience layouts\n\nWhen presenting experience options to the user, describe these layouts\nor share the ASCII art so they can visualize what each looks like.\n\n### Multi-conversation (Experience 1)\n\nTwo-pane layout: conversation list on the left, active chat thread on the right.\n\n```\n┌─────────────────────────┬───────────────────────────────────────┐\n│ Chats Q │ Richard Ray v c i │\n├─────────────────────────┼───────────────────────────────────────┤\n│ │ │\n│ (RR) Richard Ray 3:45 │ ╭─────────────────────╮ │\n│ Is it still up.. │ │ Hi, is the watch │ │\n│ │ │ still up for sale? │ │\n│ (SB) Sarah Beth 3:40 │ ╰────────── 4:56 PM ─╯ │\n│ Sure! Sending .. │ │\n│ │ ╭─────────────────╮ │\n│ (RA) Robert Allen 3:38 │ │ Yes, it is │ │\n│ Thanks! Looks .. │ │ available. │ │\n│ │ ╰─ 4:56 PM ──────╯ │\n│ (SG) Sam Game 3:30 │ │\n│ Sending them .. │ ╭─────────────────────╮ │\n│ │ │ Can I see a couple │ │\n│ (SF) Scott F. 3:22 │ │ of pictures? │ │\n│ I will look .. │ ╰────────── 4:56 PM ─╯ │\n│ │ │\n│ (EP) Evan Parker 3:15 │ ╭─────────────────╮ │\n│ Hey, did you .. │ │ Sure! Sending │ │\n│ │ │ them over now. │ │\n│ (JP) John Paul 3:10 │ ╰─ 4:56 PM ──────╯ │\n│ Sounds good │ │\n│ │ ╭─────────────────────╮ │\n│ (LK) Linda Kay 3:05 │ │ Thanks! Looks good. │ │\n│ See you there │ ╰────────── 4:56 PM ─╯ │\n│ ├───────────────────────────────────────┤\n│ │ Type a message... > │\n└─────────────────────────┴───────────────────────────────────────┘\n```\n\nBest for: messaging apps, team chat, inboxes, dedicated chat sections.\n\n### Single thread (Experience 2)\n\nOne chat window — no conversation list. Shows a direct chat with one user or group.\n\n```\n┌─────────────────────────────────────────────────────────────────┐\n│ │\n│ (RR) Richard Ray v c i │\n│ . Online │\n│ │\n├─────────────────────────────────────────────────────────────────┤\n│ │\n│ ╭───────────────────────────────╮ │\n│ │ Hi, is the watch still up │ │\n│ │ for sale? 4:56 PM vv │ │\n│ ╰───────────────────────────────╯ │\n│ │\n│ ╭───────────────────────╮ │\n│ │ Yes, it is available. │ │\n│ ╰── 4:56 PM ───────────╯ │\n│ │\n│ ╭───────────────────────────────╮ │\n│ │ Awesome! Can I see a couple │ │\n│ │ of pictures? 4:56 PM vv │ │\n│ ╰───────────────────────────────╯ │\n│ │\n│ ╭────────────────────────────────╮ │\n│ │ Sure! Sending them over now. │ │\n│ ╰── 4:56 PM ────────────────────╯ │\n│ │\n│ ╭───────────────────────────────╮ │\n│ │ Thanks! Looks good. 4:56 PM vv│ │\n│ ╰───────────────────────────────╯ │\n│ │\n│ ╭─────────────╮ │\n│ │ Thank you! │ │\n│ ╰── 4:56 PM ─╯ │\n│ │\n├─────────────────────────────────────────────────────────────────┤\n│ + m e a Type a message... > │\n└─────────────────────────────────────────────────────────────────┘\n```\n\nBest for: marketplace chat, embedded consult, support, one-on-one conversations.\n\n### Full messenger (Experience 3)\n\nTwo-pane layout like Experience 1, plus a bottom tab bar for switching\nbetween Chats, Calls, Users, and Groups.\n\n```\n┌─────────────────────────┬───────────────────────────────────────┐\n│ Chats Q │ Richard Ray v c i │\n├─────────────────────────┼───────────────────────────────────────┤\n│ │ │\n│ (RR) Richard Ray 3:45 │ ╭─────────────────────╮ │\n│ How much extra.. │ │ How much extra are │ │\n│ │ │ we talking for the │ │\n│ (SB) Sarah Beth 3:40 │ │ direct flight? │ │\n│ That sounds w.. │ ╰────────── 4:56 PM ─╯ │\n│ │ │\n│ (RA) Robert Allen 3:38 │ ╭──────────────────────╮ │\n│ 4:56 PM │ │ It is $50 more. Save │ │\n│ │ │ a couple of hours. │ │\n│ (SG) Sam Game 3:30 │ ╰─ 4:56 PM ───────────╯ │\n│ Sending them .. │ │\n│ │ ╭─────────────────────╮ │\n│ (SF) Scott F. 3:22 │ │ That sounds worth │ │\n│ I will look .. │ │ it. Let us do it. │ │\n│ │ ╰────────── 4:56 PM ─╯ │\n│ (EP) Evan Parker 3:15 │ │\n│ Hey, did you .. │ ╭──────────────────────╮ │\n│ │ │ Great, I will send │ │\n│ │ │ you the details. │ │\n│ │ ╰─ 4:56 PM ───────────╯ │\n│ ├───────────────────────────────────────┤\n│ │ Type a message... > │\n├─────────────────────────┼───────────────────────────────────────┤\n│ Ch Ca Us Gr │ │\n└─────────────────────────┴───────────────────────────────────────┘\n```\n\nBest for: social apps, community platforms, dating apps, full-featured\nchat products.\n\n---\n\n## Thread replies — hidden by default in every example below\n\nEvery `` in the placement patterns below\nincludes `hideReplyInThreadOption`. The kit's default (`false`) puts a\n**\"Reply in Thread\"** entry in every message's action menu — but that\nentry only works if the integrator has wired up a thread panel\n(`CometChatThreadHeader` + a scoped `CometChatMessageList` +\n`CometChatMessageComposer` with `parentMessageId`). If the thread\npanel isn't wired (the case for a simple drawer, widget, modal, or\nsingle-thread experience), the option is still visible and clicking it\nsilently does nothing — confusing UX.\n\nDefault: **threads hidden**. To enable threads for an experience that\nactually has the side-panel plumbing:\n\n1. Remove `hideReplyInThreadOption` from the main ``\n2. Add `onThreadRepliesClick` to capture the thread message\n3. Render the thread panel (see `cometchat-components` § Threading for\n the full pattern — `CometChatThreadHeader` + scoped `MessageList` +\n scoped `MessageComposer` with `parentMessageId`)\n\n---\n\n## Route placement\n\nThe most common pattern. Chat gets its own page in the app, accessible via navigation.\n\n### Steps\n\n#### 1. Set up CometChatProvider at the app root\n\nThe 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.\n\n- **Read the project's existing layout/root component first.** Look for the outermost wrapper (e.g., `App.tsx`, `layout.tsx`, `root.tsx`).\n- Add the `CometChatProvider` inside the existing layout, wrapping the router outlet or children.\n- Import `@cometchat/chat-uikit-react/css-variables.css` at the app root CSS file if not already imported.\n\n#### 2. Create a chat page component\n\nCreate a new file (e.g., `ChatPage.tsx` or `MessagesPage.tsx`) at the framework's conventional page location:\n\n- React (Vite): `src/pages/ChatPage.tsx` or `src/ChatPage.tsx`\n- Next.js (App Router): `app/chat/page.tsx`\n- Next.js (Pages Router): `pages/chat.tsx`\n- Astro: `src/pages/chat.astro` (with a React island)\n- React Router: `app/routes/chat.tsx`\n\n#### 3. Implement the page\n\nChoose the experience composition from `cometchat-components`:\n\n**Two-pane (most common for routes):**\n\n```tsx\n// ChatPage.tsx\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nexport default function ChatPage() {\n const [selectedUser, setSelectedUser] = useState();\n const [selectedGroup, setSelectedGroup] = useState();\n\n function handleConversationClick(conversation: CometChat.Conversation) {\n const entity = conversation.getConversationWith();\n if (entity instanceof CometChat.User) {\n setSelectedUser(entity);\n setSelectedGroup(undefined);\n } else if (entity instanceof CometChat.Group) {\n setSelectedUser(undefined);\n setSelectedGroup(entity);\n }\n }\n\n return (\n
\n
\n \n
\n
\n {(selectedUser || selectedGroup) ? (\n <>\n {selectedUser && }\n {selectedGroup && }\n {selectedUser && }\n {selectedGroup && }\n {selectedUser && }\n {selectedGroup && }\n \n ) : (\n
\n Select a conversation to start chatting\n
\n )}\n
\n
\n );\n}\n```\n\n**Full messenger (tabs -- for standalone messaging sections):**\n\n```tsx\n// MessagesPage.tsx\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatCallLogs,\n CometChatUsers,\n CometChatGroups,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ntype Tab = \"chats\" | \"calls\" | \"users\" | \"groups\";\n\nexport default function MessagesPage() {\n const [activeTab, setActiveTab] = useState(\"chats\");\n const [selectedUser, setSelectedUser] = useState();\n const [selectedGroup, setSelectedGroup] = useState();\n\n function selectUser(user: CometChat.User) {\n setSelectedUser(user);\n setSelectedGroup(undefined);\n }\n function selectGroup(group: CometChat.Group) {\n setSelectedUser(undefined);\n setSelectedGroup(group);\n }\n\n return (\n
\n
\n \n
\n {activeTab === \"chats\" && (\n {\n const entity = conv.getConversationWith();\n if (entity instanceof CometChat.User) selectUser(entity);\n else if (entity instanceof CometChat.Group) selectGroup(entity);\n }}\n />\n )}\n {activeTab === \"calls\" && }\n {activeTab === \"users\" && }\n {activeTab === \"groups\" && }\n
\n
\n
\n {selectedUser && (\n <>\n \n \n \n \n )}\n {selectedGroup && (\n <>\n \n \n \n \n )}\n {!selectedUser && !selectedGroup && (\n
\n Select a conversation to start chatting\n
\n )}\n
\n
\n );\n}\n```\n\n#### 4. Wire the route into the project's router\n\n**Read the project's existing routing setup first.** Do not assume a pattern. Look for:\n\n- **React Router:** `createBrowserRouter()`, ``, `` in `App.tsx` or a routes file\n- **Next.js App Router:** `app/` directory -- just creating the page file at `app/chat/page.tsx` IS the route\n- **Next.js Pages Router:** `pages/` directory -- creating `pages/chat.tsx` IS the route\n- **Astro:** `src/pages/` directory -- creating `src/pages/chat.astro` IS the route\n- **React Router v7:** File-based routing in `app/routes/` or manual routes in `app/routes.ts`\n\nFor manual routers (React Router), add a route entry:\n\n```tsx\n// Example: adding to an existing createBrowserRouter\n{\n path: \"/chat\",\n element: ,\n}\n```\n\nFor file-based routers (Next.js, Astro, React Router v7), creating the file at the right path is sufficient.\n\n#### 5. Add a navigation link\n\n**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).\n\nAdd a \"Messages\" or \"Chat\" link alongside the existing links:\n\n```tsx\n// Example: adding to an existing nav component\nMessages\n// or\nMessages\n```\n\nMatch 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.\n\n#### 6. Import CSS\n\nCheck 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:\n\n```css\n/* In globals.css or index.css at the app root */\n@import \"@cometchat/chat-uikit-react/css-variables.css\";\n```\n\n---\n\n## Modal placement\n\nA centered overlay for quick one-off messages. Use when chat is a secondary action (e.g., \"message this user\" from a profile page).\n\n### When to use modal vs. drawer\n\n- **Modal:** Quick, one-off messages. User sends a message and closes. No ongoing conversation visible.\n- **Drawer:** Ongoing conversation. User keeps the drawer open while browsing the main app. Better for marketplace/support contexts.\n\n### Steps\n\n#### 1. Create a ChatModal component\n\n```tsx\n// ChatModal.tsx\nimport { useEffect, useState } from \"react\";\nimport {\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ninterface ChatModalProps {\n isOpen: boolean;\n onClose: () => void;\n targetUserId?: string;\n targetGroupId?: string;\n}\n\nexport function ChatModal({ isOpen, onClose, targetUserId, targetGroupId }: ChatModalProps) {\n const [user, setUser] = useState();\n const [group, setGroup] = useState();\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (!isOpen) return;\n setLoading(true);\n\n if (targetUserId) {\n CometChat.getUser(targetUserId)\n .then((u) => {\n setUser(u);\n setGroup(undefined);\n setLoading(false);\n })\n .catch(() => setLoading(false));\n } else if (targetGroupId) {\n CometChat.getGroup(targetGroupId)\n .then((g) => {\n setUser(undefined);\n setGroup(g);\n setLoading(false);\n })\n .catch(() => setLoading(false));\n }\n }, [isOpen, targetUserId, targetGroupId]);\n\n if (!isOpen) return null;\n\n return (\n \n {/* Backdrop */}\n \n\n {/* Modal content */}\n \n {/* Close button */}\n \n X\n \n\n {loading ? (\n
\n Loading...\n
\n ) : (\n <>\n {user && }\n {group && }\n
\n {user && }\n {group && }\n
\n {user && }\n {group && }\n \n )}\n \n \n );\n}\n```\n\n#### 2. Wire the trigger\n\n**Read the project's components to find the right trigger point.** This could be:\n\n- A \"Message\" button on a user profile page\n- A \"Contact Seller\" button on a product card\n- A chat icon in a navbar\n- A \"Send Message\" link in a user list\n\n```tsx\n// Example: adding a chat button to an existing product card\nimport { useState } from \"react\";\nimport { ChatModal } from \"./ChatModal\";\n\nfunction ProductCard({ product }) {\n const [showChat, setShowChat] = useState(false);\n\n return (\n
\n {/* existing product card content */}\n \n setShowChat(false)}\n targetUserId={product.sellerId}\n />\n
\n );\n}\n```\n\n#### 3. CometChatProvider placement\n\nThe `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.\n\n---\n\n## Drawer placement\n\nA side panel that slides in from the right. Better than a modal for ongoing conversations because the user can keep it open while browsing.\n\n### Steps\n\n#### 1. Create a ChatDrawer component\n\n```tsx\n// ChatDrawer.tsx\nimport { useEffect, useState } from \"react\";\nimport {\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ninterface ChatDrawerProps {\n isOpen: boolean;\n onClose: () => void;\n targetUserId?: string;\n targetGroupId?: string;\n}\n\nexport function ChatDrawer({ isOpen, onClose, targetUserId, targetGroupId }: ChatDrawerProps) {\n const [user, setUser] = useState();\n const [group, setGroup] = useState();\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (!isOpen) return;\n setLoading(true);\n\n if (targetUserId) {\n CometChat.getUser(targetUserId)\n .then((u) => {\n setUser(u);\n setGroup(undefined);\n setLoading(false);\n })\n .catch(() => setLoading(false));\n } else if (targetGroupId) {\n CometChat.getGroup(targetGroupId)\n .then((g) => {\n setUser(undefined);\n setGroup(g);\n setLoading(false);\n })\n .catch(() => setLoading(false));\n }\n }, [isOpen, targetUserId, targetGroupId]);\n\n return (\n <>\n {/* Backdrop */}\n {isOpen && (\n \n )}\n\n {/* Drawer */}\n {/*\n IMPORTANT: do NOT animate with `transform: translateX(...)`.\n `transform` on an element creates a new containing block for\n `position: fixed` descendants (per the CSS spec), so every\n fixed-positioned popover that CometChat renders inside the drawer\n — message options menu, emoji picker, file preview, reactions\n popover, thread panel — becomes anchored to the transformed\n drawer instead of the viewport. The result is popovers that\n appear clipped, offset, or drift as the drawer animates. Animate\n the `right` offset instead; no transform, no containing-block\n takeover, fixed popovers stay anchored to the viewport.\n */}\n \n {/* Header with close button */}\n
\n Chat\n \n X\n \n
\n\n {/* Chat content */}\n {loading ? (\n
\n Loading...\n
\n ) : (\n <>\n {user && }\n {group && }\n
\n {user && }\n {group && }\n
\n {user && }\n {group && }\n \n )}\n \n \n );\n}\n```\n\n#### 2. Wire the trigger\n\nSame approach as the modal -- find the right trigger point in the existing project:\n\n```tsx\nimport { useState } from \"react\";\nimport { ChatDrawer } from \"./ChatDrawer\";\n\nfunction UserProfile({ userId }) {\n const [showChat, setShowChat] = useState(false);\n\n return (\n
\n {/* existing profile content */}\n \n setShowChat(false)}\n targetUserId={userId}\n />\n
\n );\n}\n```\n\n#### 3. Multi-conversation drawer variant\n\nFor a drawer that shows the full conversation list (not just a single thread):\n\n```tsx\n// ConversationDrawer.tsx -- shows conversation list + message view\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ninterface ConversationDrawerProps {\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport function ConversationDrawer({ isOpen, onClose }: ConversationDrawerProps) {\n const [selectedUser, setSelectedUser] = useState();\n const [selectedGroup, setSelectedGroup] = useState();\n\n function handleConversationClick(conversation: CometChat.Conversation) {\n const entity = conversation.getConversationWith();\n if (entity instanceof CometChat.User) {\n setSelectedUser(entity);\n setSelectedGroup(undefined);\n } else if (entity instanceof CometChat.Group) {\n setSelectedUser(undefined);\n setSelectedGroup(entity);\n }\n }\n\n const hasSelection = selectedUser || selectedGroup;\n\n return (\n <>\n {isOpen && (\n \n )}\n {/*\n Animate the `right` offset, never `transform: translateX(...)` —\n `transform` creates a new containing block, which re-anchors\n CometChat's fixed-positioned popovers (emoji picker, message\n options, file preview, thread panel) to the drawer instead of\n the viewport and makes them misalign.\n */}\n \n {/* Conversation list */}\n
\n
\n Messages\n \n
\n
\n \n
\n
\n\n {/* Message view */}\n {hasSelection && (\n
\n {selectedUser && }\n {selectedGroup && }\n
\n {selectedUser && }\n {selectedGroup && }\n
\n {selectedUser && }\n {selectedGroup && }\n
\n )}\n \n \n );\n}\n```\n\n---\n\n## Floating widget\n\nA button-in-the-corner chat overlay. Available on every page of the app\nwithout a dedicated route. Common for support widgets, helpdesk chat,\n\"contact us\" overlays.\n\n**When to use:** chat is a secondary concern (not the core product), and\nshould be accessible from anywhere without navigating. **When NOT to use:**\nif chat is central to the app, use a route placement instead — widgets\ndon't scale to inbox-style usage.\n\n### Steps\n\n#### 1. Create the ChatWidget component\n\n```tsx\n// src/components/ChatWidget.tsx (or components/ChatWidget.tsx in Next.js)\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nexport default function ChatWidget() {\n const [open, setOpen] = useState(false);\n const [selected, setSelected] = useState();\n\n function handleConversationClick(conv: CometChat.Conversation) {\n const entity = conv.getConversationWith();\n if (entity instanceof CometChat.User || entity instanceof CometChat.Group) {\n setSelected(entity);\n }\n }\n\n return (\n <>\n {/* Floating trigger button — always visible */}\n setOpen((v) => !v)}\n style={{\n position: \"fixed\",\n bottom: 24,\n right: 24,\n width: 56,\n height: 56,\n borderRadius: \"50%\",\n background: \"var(--cometchat-primary-color, #6c63ff)\",\n color: \"white\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: 24,\n boxShadow: \"0 4px 16px rgba(0, 0, 0, 0.15)\",\n zIndex: 9999,\n }}\n >\n {open ? \"×\" : \"💬\"}\n \n\n {/* Widget panel — overlay, not a full-page drawer */}\n {open && (\n \n {selected ? (\n <>\n setSelected(undefined)}\n style={{ alignSelf: \"flex-start\", background: \"none\", border: \"none\", padding: 12, cursor: \"pointer\" }}\n >\n ← Back\n \n {selected instanceof CometChat.User && (\n <>\n \n
\n \n
\n \n \n )}\n {selected instanceof CometChat.Group && (\n <>\n \n
\n \n
\n \n \n )}\n \n ) : (\n \n )}\n \n )}\n \n );\n}\n```\n\n**Key points:**\n- Button and panel are both `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+`).\n- Width/height clamp against viewport (`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.\n- The panel renders conversation list by default; clicking a conversation swaps to the single-thread view with a back arrow. Mirrors WhatsApp / iMessage widget UX.\n- Wrap everything in `{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.\n\n#### 2. Mount at the app root\n\nWhere 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.\n\n| Framework | Mount location |\n|---|---|\n| React (Vite / CRA) | `src/main.tsx` or `src/App.tsx`, sibling of `` |\n| Next.js App Router | `app/layout.tsx`, sibling of `{children}` (inside ``, outside any main container with `overflow: hidden`) |\n| Next.js Pages Router | `pages/_app.tsx`, sibling of `` |\n| React Router | `app/root.tsx` (v7) or wherever `` lives (v6) |\n| Astro | Inside a `client:only=\"react\"` island in `src/layouts/BaseLayout.astro` |\n\n**Example — Next.js App Router:**\n\n```tsx\n// app/layout.tsx\nimport ChatWidget from \"@/components/ChatWidget\";\n\nexport default function RootLayout({ children }) {\n return (\n \n \n {children}\n \n \n \n );\n}\n```\n\nIn 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.\n\n#### 3. Conditional rendering per route (optional)\n\nMost apps want to hide the widget on auth pages (login, signup, password reset). Options:\n\n**React Router / Next.js** — use `useLocation()` / `usePathname()`:\n\n```tsx\n// Wrap the export with a router-aware gate\nimport { useLocation } from \"react-router-dom\"; // or `usePathname` in Next.js\n\nexport default function ChatWidgetGate() {\n const pathname = useLocation().pathname;\n const hiddenOn = [\"/login\", \"/signup\", \"/forgot-password\"];\n if (hiddenOn.some((p) => pathname.startsWith(p))) return null;\n return ;\n}\n```\n\n**Astro** — render the island only on the pages that want it, rather than globally in the layout.\n\n#### 4. Feature toggle via config\n\nRecord the choice in `.cometchat/config.json` so the integration skill knows the widget was used:\n\n```bash\nnpx @cometchat/skills-cli config save --placement widget --json\n```\n\n**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.\n\n---\n\n## Embedded placement\n\nChat embedded directly in an existing page, alongside other content. Common for marketplace product pages, dashboards, or support panels.\n\n### Steps\n\n#### 1. Create a ChatPanel component\n\nThe 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.\n\n```tsx\n// ChatPanel.tsx\nimport { useEffect, useState } from \"react\";\nimport {\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ninterface ChatPanelProps {\n targetUserId?: string;\n targetGroupId?: string;\n height?: string; // e.g., \"500px\", \"60vh\"\n conversationMode?: boolean; // Show conversation list instead of single thread\n}\n\nexport function ChatPanel({\n targetUserId,\n targetGroupId,\n height = \"500px\",\n}: ChatPanelProps) {\n const [user, setUser] = useState();\n const [group, setGroup] = useState();\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (targetUserId) {\n CometChat.getUser(targetUserId)\n .then((u) => {\n setUser(u);\n setGroup(undefined);\n setLoading(false);\n })\n .catch(() => setLoading(false));\n } else if (targetGroupId) {\n CometChat.getGroup(targetGroupId)\n .then((g) => {\n setUser(undefined);\n setGroup(g);\n setLoading(false);\n })\n .catch(() => setLoading(false));\n }\n }, [targetUserId, targetGroupId]);\n\n return (\n \n {loading ? (\n
\n Loading chat...\n
\n ) : (\n <>\n {user && }\n {group && }\n
\n {user && }\n {group && }\n
\n {user && }\n {group && }\n \n )}\n \n );\n}\n```\n\n#### 2. Find the container in the existing page\n\n**Read the existing page where chat should be embedded.** Understand the layout before adding anything. Common patterns:\n\n- **Product page:** Chat panel below or beside the product description\n- **Dashboard:** Chat panel in a sidebar or a dashboard card\n- **Profile page:** Chat panel as a tab or section\n\n#### 3. Render the panel with a target\n\nConnect the target user/group based on the page's data:\n\n```tsx\n// Example: embedding on a product page\nfunction ProductPage({ product }) {\n return (\n
\n
\n

{product.name}

\n

{product.description}

\n {/* other product content */}\n
\n
\n

Chat with the seller

\n \n
\n
\n );\n}\n```\n\n#### 4. Conversation-list embedded panel\n\nIf 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:\n\n```tsx\n// EmbeddedInbox.tsx\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ninterface EmbeddedInboxProps {\n height?: string;\n}\n\nexport function EmbeddedInbox({ height = \"600px\" }: EmbeddedInboxProps) {\n const [selectedUser, setSelectedUser] = useState();\n const [selectedGroup, setSelectedGroup] = useState();\n\n function handleConversationClick(conversation: CometChat.Conversation) {\n const entity = conversation.getConversationWith();\n if (entity instanceof CometChat.User) {\n setSelectedUser(entity);\n setSelectedGroup(undefined);\n } else if (entity instanceof CometChat.Group) {\n setSelectedUser(undefined);\n setSelectedGroup(entity);\n }\n }\n\n return (\n
\n
\n \n
\n
\n {selectedUser && (\n <>\n \n
\n \n
\n \n \n )}\n {selectedGroup && (\n <>\n \n
\n \n
\n \n \n )}\n {!selectedUser && !selectedGroup && (\n
\n Select a conversation\n
\n )}\n
\n
\n );\n}\n```\n\n---\n\n## Hard rules\n\nThese rules apply to ALL placement patterns. Violating any of them causes integration bugs or destroys the user's existing project.\n\n1. **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.\n\n2. **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.\n\n3. **ALWAYS create new files alongside existing ones.** Do not modify files you do not fully understand. The exceptions are:\n - The router config (to add a route) -- read it first\n - The nav component (to add a link) -- read it first\n - The root CSS file (to add the css-variables.css import) -- read it first\n\n4. **CometChat CSS must be imported exactly once.** Before adding the import, check if it already exists:\n ```bash\n grep -r \"css-variables.css\" src/ app/ pages/ 2>/dev/null\n ```\n If it is already imported, do not add a duplicate.\n\n5. **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.\n\n6. **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.\n\n6a. **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.\n\n```tsx\n/* ✓ CORRECT — header + list + composer with the flex-shrink trap fixed */\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n\n/* ✗ WRONG — list grows past the viewport once messages exceed visible area */\n
\n \n {/* takes intrinsic height, no scroll */}\n {/* falls off the bottom */}\n
\n```\n\nThe 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.\n\n7. **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.\n\n8. **For SSR frameworks, wrap CometChat components appropriately.** See the `cometchat-core` skill, section 5 (SSR safety), for framework-specific patterns.\n\n9. **Every `` 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 `` without the prop in a drawer or widget is a generation bug — every example in this skill includes it for a reason.\n\n10. **Never animate a CometChat-containing element with `transform`, `translate-*`, or any `transition-transform`.** This includes:\n - Inline `transform: translateX(...)`, `transform: scale(...)`, etc.\n - Tailwind utilities `translate-x-*`, `-translate-x-*`, `translate-x-0`, `translate-x-full`, `translate-y-*`, `scale-*`, `rotate-*`, `skew-*`, `transform-*`\n - `transition-transform`, `motion-safe:translate-*`, `will-change: transform`\n - `filter`, `perspective`, `backdrop-filter`\n\n Any 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.","tags":["cometchat","placement","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react","react-native"],"capabilities":["skill","source-cometchat","skill-cometchat-placement","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-placement","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (50,701 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:55.528Z","embedding":null,"createdAt":"2026-05-07T13:05:15.781Z","updatedAt":"2026-05-18T19:04:55.528Z","lastSeenAt":"2026-05-18T19:04:55.528Z","tsv":"'-0':4784 '-4':2276,2633 '-400':2249 '-420':4780,4786 '-720':2604 '..':327,569,588 '/chat':1428 '/chatdrawer':2416 '/chatmodal':1942 '/components/chatwidget':3316 '/dev/null':4199 '/forgot-password':3415 '/login':3413 '/messages':213,227 '/signup':3414 '0':1211,1238,1732,1749,1752,1753,1754,1793,1797,1798,1799,2140,2145,2146,2147,2245,2248,2260,2278,2281,2282,2283,2544,2549,2550,2551,2600,2603,2615,2635,2638,2639,2640,2946,2950,2951,2952,3013,3017,3018,3019,3154,3156,4287,4290,4396,4400,4401,4411,4413,4423,4424,4703,4779 '0.15':2284,2641,2953 '0.2':3020 '0.3':1800,2148,2291,2552,2646,2653 '0.5':1755 '01':1776,2273,2630,2998 '05':412 '1':295,540,781,834,1048,1084,1208,1241,1245,1284,1316,1629,1836,1855,2037,2350,2369,2716,2726,2742,2839,3057,3076,3541,3702,3722,3834,3977,3989,4006,4021,4056,4390,4409,4410 '10':402,1814,4668 '100':3563,4248 '1000':1734,2266,2623 '10000':3124 '100vh':1033,1171,2990,3152,4386,4447 '100vw':2264,2621,2984,3150 '11':4799 '12':3011,3044 '120px':2991 '12px':1210,1785,2313,2687 '15':389,642 '16px':2948 '18':2332,2706 '1px':1039,1181,1189,2315,2667,2689,3001,3685,3956,3968 '2':438,787,912,1876,2390,3220,3743,4085,4198 '20':1820 '20px':1794,2279,2636 '22':376,623 '24':2921,2923,2944,2979,3830 '2px':1226,1234 '3':321,339,349,363,375,388,401,411,533,564,581,595,612,622,641,795,955,1970,2445,3355,3797,4122 '30':364,613 '300px':3966 '32px':3015 '3399ff':1233 '360px':1037,1175,2619,2664 '38':350,596 '380px':2982 '4':341,357,382,403,419,469,477,488,497,503,509,589,597,614,635,653,1331,3441,3853,4174 '40':340,582 '400':1222,3843 '400px':2262 '428px':3139 '45':322,565 '48px':2985 '4px':1824,2336,2947 '5':1449,4210,4545 '50':602,2929 '500px':3610,3627,3852 '56':342,358,383,404,420,470,478,489,498,504,510,590,598,615,636,654,2925,2927 '6':1527,4238 '600':2321,2695 '600px':1764,2988,3915 '60px':1795 '60vh':3611 '6a':4277 '6c63ff':2936 '7':4494 '700':1221 '700px':1768 '720px':2618 '8':1810,1812,3960,4530,4795 '80vh':1769 '8px':1825,2312,2337,2686,3014,3695 '9':4553 '90vw':1765 '96':2972 '999':1092,1324,2142,2546,4029 '9998':3028,3102 '9999':2955,3101 'absolut':1747,1808 'access':830,2808,3349 'action':708,1580,4587 'activ':305 'activetab':1137,1219,1224,1248,1269,1271,1276 'actual':774 'ad':1422,1491,1926,3764,4119,4183 'add':9,89,171,788,887,1416,1450,1479,1510,1542,3473,3508,4146,4156,4167,4207 'add-widget':3472,3507 'agnost':73 'alignitem':1087,1319,1737,1839,2305,2353,2679,3705,4024 'alignself':3035 'allen':348,594 'alongsid':1485,3528,4127 'alreadi':910,1534,4189,4203 'also':4561 'alway':2900,4086,4123,4263 'anchor':2198,2236,2569 'anim':2153,2220,2221,2553,3198,4670,4764,4770 'anti':4797 'anti-pattern':4796 'anyth':3765 'anywher':2810 'app':175,196,428,666,670,829,840,852,904,939,1365,1367,1538,1559,1623,1983,2779,2823,3108,3224,3244,3270,3309,3338,3362,4196,4218 'app.tsx':884,1359,4065 'app/chat/page.tsx':941,1375 'app/layout.tsx':3272,3312 'app/root.tsx':3292 'app/routes':1405 'app/routes.ts':1410 'app/routes/chat.tsx':954 'appear':2212 'appli':4037 'approach':2395 'appropri':4537 'area':4439 'aria':1827,2339,2710,2906 'aria-label':1826,2338,2709,2905 'arrow':3186 'art':282 'ascii':281 'ask':179 'assum':1350,4101 'astro':946,1389,1436,3298,3424 'auth':3369 'auto':4301,4402,4425 'avail':356,476,2773 'awar':3390 'awesom':480 'back':3047,3185 'backdrop':1741,2131,4729 'backdrop-filt':4728 'background':1214,1774,1815,2271,2327,2628,2701,2930,2992,2996,3039 'backgroundcolor':1750,1770,2143,2267,2547,2624 'backward':3514 'bar':545 'base':160,1402,1433,3486,3808 'bash':3460,4191 'becom':2197 'besid':3774 'best':425,518,663 'beth':338,580 'better':1624,2020 'block':2165,2231,2565,4738 'boolean':1654,2062,2490,3613 'border':1212,1782,1817,2329,2703,2939,3000,3006,3041,3684,3692,3955 'borderbottom':1188,1223,2314,2688 'borderradius':1778,2928,3010,3688,3959 'borderright':1038,1180,2665,3967 'bottom':543,2259,2614,2920,2971,3153,4465 'bound':4275 'boxshadow':1792,2275,2632,2945,3012 'break':4332,4346 'brows':1620,2035 'bug':4048,4340,4657 'build':150,166,184 'button':1200,1802,1803,1896,1905,1929,1956,2300,2323,2429,2697,2767,2899,2902,2904,2977,3030,3091 'button-in-the-corn':2766 'c':316,458,559 'ca':660 'calc':2983,2989 'call':550,1129,1193,1270 'calllog':243 'canon':4336 'captur':791 'card':1909,1934,1954,3787 'case':739,3330 'catch':1700,1716,2108,2124,3655,3671 'caus':2004,4046,4230 'center':1088,1090,1320,1322,1566,1738,1740,1840,1842,2306,2354,2356,2680,3706,3708,4025,4027 'central':2820 'ch':659 'chang':4724 'chat':29,172,306,311,430,433,440,448,521,549,554,674,822,855,915,1098,1128,1140,1192,1249,1330,1483,1576,1830,1911,1928,2322,2342,2344,2433,2771,2789,2796,2818,2910,2912,3521,3710,3756,3770,3779,3790,3844,4338 'chat-layout':4337 'chat/message':1512 'chatdraw':2040,2071,2414,2437 'chatdrawer.tsx':2043 'chatdrawerprop':2060,2076 'chatmod':1632,1663,1940,1962 'chatmodal.tsx':1635 'chatmodalprop':1652,1668 'chatpag':994 'chatpage.tsx':923,975 'chatpanel':3544,3623,3848 'chatpanel.tsx':3585 'chatpanelprop':3602,3628 'chatwidget':2842,2868,3314 'chatwidgetg':3406 'check':1530,4186 'children':899,3275,3321,3323,4304,4491 'choic':3448 'choos':959 'chose':4074 'clamp':3126 'claud':25 'cli':254,3479 'click':757,3173 'client':3301 'clip':2213 'close':1606,1801,1829,2258,2299,2341,2613,2712,2909,3217 'code':66,3505 'collaps':3577,4260 'color':1091,1232,1323,1775,2272,2629,2935,2937,2997,3007,4028 'column':1052,1179,1288,1791,2288,2674,2730,3024,3683,3981,4384,4394,4445 'come':110 'cometchat':2,10,38,118,127,138,802,846,965,988,1123,1230,1648,1773,1781,2056,2181,2270,2484,2570,2627,2862,2933,2995,3005,3201,3471,3560,3598,3691,3882,3904,4175,4240,4500,4535,4541,4673,4745,4793 'cometchat-background-color':1772,2269,2626,2994 'cometchat-border-color-light':3004 'cometchat-border-radius-lg':1780,3690 'cometchat-compon':137,801,964,3881 'cometchat-contain':4672 'cometchat-cor':117,126,845,4540,4792 'cometchat-plac':1 'cometchat-primary-color':1229,2932 'cometchat.conversation':1006,2510,2883,3928 'cometchat.getgroup':1706,2114,3661,4506 'cometchat.getuser':1690,2098,3645,4503 'cometchat.group':1022,1160,1266,2526,2879,2893,3069,3944,4514 'cometchat.user':1013,1152,1259,2517,2878,2890,3050,3935,4512 'cometchat/chat-sdk-javascript':990,1125,1650,2058,2486,2864,3600,3906 'cometchat/chat-uikit-react':986,1121,1646,2054,2482,2860,3596,3902 'cometchat/chat-uikit-react/css-variables.css':901,1532,1562 'cometchat/config.json':3450 'cometchat/skills-cli':3462 'cometchatcalllog':1114 'cometchatconvers':203,242,981,1042,1113,1250,2477,2717,2855,3086,3897,3971 'cometchatgroup':1116,1278 'cometchatmessagecompos':728,984,1074,1078,1119,1297,1308,1644,1869,1873,2052,2383,2387,2480,2756,2760,2858,3064,3083,3594,3736,3740,3900,3996,4013,4426,4459 'cometchatmessagehead':982,1056,1060,1117,1290,1301,1642,1845,1849,2050,2359,2363,2478,2732,2736,2856,3051,3070,3592,3712,3716,3898,3983,4000,4403,4448 'cometchatmessagelist':727,983,1064,1069,1118,1293,1304,1643,1859,1864,2051,2373,2378,2479,2746,2751,2857,3060,3079,3593,3726,3731,3899,3992,4009,4283,4416,4451,4643 'cometchatprovid':837,889,1971,1974,3333,4211 'cometchatthreadhead':724,809,4566 'cometchatus':1115,1273 'command':3480 'common':820,971,2784,3531,3766 'communiti':237,667 'compat':3515 'complet':65 'compon':139,141,803,876,917,966,1463,1496,1522,1633,1884,2041,2843,3202,3545,3561,3575,3883,4111,4154,4246,4259,4470,4487,4501,4536 'components/chatwidget.tsx':2847 'compos':4325,4371 'composit':145,194,962,3879 'concern':2800 'condit':3356,4237 'config':3445,3463,4108,4144 'conflict':3114 'confus':762 'connect':3804,4234 'const':995,999,1007,1136,1141,1145,1253,1669,1673,1677,1946,2077,2081,2085,2420,2499,2503,2511,2531,2869,2874,2884,3407,3411,3629,3633,3637,3917,3921,3929 'constraint':3573 'consult':523 'contact':1903,2790 'contain':2164,2230,2564,3257,3280,3554,3566,3569,3746,3886,4241,4276,4674,4737,4765 'containing-block':2229 'content':1757,1955,2345,2428,3110,3339,3530,3839,4311 'context':1627 'conv':1252,2882 'conv.getconversationwith':1255,2886 'convent':930 'convers':202,220,234,263,293,300,443,529,1005,1095,1327,1609,1613,2026,2448,2458,2468,2509,2659,3169,3175,3615,3855,3867,3878,3927,4032,4316,4345 'conversation-list':3854 'conversation.getconversationwith':1009,2513,3931 'conversationdraw':2495 'conversationdrawer.tsx':2466 'conversationdrawerprop':2488,2498 'conversationmod':3612 'core':119,128,847,2803,4542,4794 'corner':2770 'correct':4368 'could':1468,1892 'coupl':371,485,606 'cover':44 'cra':3263 'creat':79,913,918,1370,1384,1392,1440,1630,2038,2161,2561,2840,3542,4124,4734 'createbrowserrout':1357,1426 'critic':3547 'css':132,906,1529,1547,1552,2172,3163,4164,4176,4354,4804 'css-spec':4803 'css-variables.css':4169,4194 'cursor':1216,1821,2333,2707,2941,3045 'd':3353 'dashboard':223,3536,3778,3786 'data':3813 'date':669 'decid':4094 'dedic':432,2782 'default':680,696,764,992,1133,2866,3172,3318,3404,4297,4576 'delay':2008 'demo':257,4075 'depend':3229 'descend':2169,3241,4742 'describ':275 'descript':3777 'destroy':4050,4081 'detail':102,652 'diagnosi':4357 'dimens':4245 'direct':447,583,3493,3523,4488 'directori':1368,1383,1391 'display':1030,1049,1085,1168,1176,1186,1285,1317,1735,1788,1837,2285,2303,2351,2642,2671,2677,2727,3021,3680,3703,3827,3953,3978,4022,4381,4391,4442 'div':1028,1034,1045,1081,1166,1172,1242,1281,1313,1727,1742,1758,1833,1852,2133,2240,2301,2347,2366,2537,2595,2661,2675,2713,2723,2739,2967,3054,3073,3677,3699,3719,3825,3831,3840,3950,3963,3974,3986,4003,4018,4379,4387,4397,4406,4420,4440,4475 'dom':3398 'drawer':15,50,209,217,743,1594,1611,1617,2009,2149,2185,2202,2219,2449,2453,2586,2965,4598,4651 'drift':2216 'drop':4232 'duplic':4209 'e':513 'e.g':883,922,1581,3609 'eas':2294,2649,2656 'ease-in-out':2293,2648,2655 'eee':1041,1183,1191,2317,2669,2691,3009,3687,3958,3970 'either':3576 'element':1429,2160,4675 'els':1018,1262,1703,2111,2522,3658,3940 'emb':4602 'embed':16,51,522,3519,3522,3550,3759,3816,3857,3863 'embeddedinbox':3913 'embeddedinbox.tsx':3891 'embeddedinboxprop':3908,3916 'emoji':2189,2576,4751 'enabl':768 'ensur':860,3103 'entir':851 'entiti':1008,1011,1015,1020,1026,1254,1257,1261,1264,1268,2512,2515,2519,2524,2530,2885,2888,2891,2895,3930,3933,3937,3942,3948 'entri':92,703,712,1419,4063,4079,4583 'env':107 'ep':385,638 'equival':1976 'escap':3252 'etc':4069,4691 'evan':386,639 'event':3206 'everi':682,685,705,1999,2175,2775,4228,4239,4554,4658 'everyth':3193 'exact':4180 'exampl':67,683,1421,1490,1925,3307,3815,4659 'exceed':4437 'except':4140 'exist':22,41,874,892,1344,1425,1458,1487,1494,1502,1932,1952,2406,2426,3504,3526,3749,3753,4054,4062,4083,4091,4117,4128,4190 'expect':4527 'experi':193,266,270,294,437,532,539,750,772,961 'explan':4806 'explicit':3558,3888,4073,4244 'explor':256 'export':991,1132,1661,2069,2493,2865,3317,3385,3403,3621,3911 'extra':568,572 'f':374,621 'fall':4462 'fals':697,1699,1702,1715,1718,1950,1967,2107,2110,2123,2126,2424,2442,2873,3654,3657,3670,3673,4577 'featur':673,3442 'fff':1777,2274,2631 'file':103,907,921,1363,1373,1401,1432,1442,1548,2191,2580,4064,4080,4092,4114,4126,4133,4165,4756 'file-bas':1400,1431 'fill':3562,4247 'filter':4726,4730 'find':1461,1886,2399,3744 'fine':4342 'first':877,1347,1460,4151,4161,4173 'fit':3500 'five':45 'fix':1730,2138,2168,2177,2233,2243,2542,2573,2598,2919,2970,3097,3250,4351,4378,4741,4748 'fixed-posit':2176,2572,4747 'flex':1031,1047,1050,1083,1086,1169,1177,1187,1207,1244,1283,1286,1315,1318,1736,1789,1835,1838,1854,2286,2304,2349,2352,2368,2643,2672,2678,2715,2725,2728,2741,3022,3037,3056,3075,3681,3701,3704,3721,3828,3833,3954,3976,3979,3988,4005,4020,4023,4278,4293,4303,4375,4382,4389,4392,4399,4408,4422,4443,4473,4490 'flex-shrink':4374 'flex-start':3036 'flex/grid':4271 'flexdirect':1051,1178,1287,1790,2287,2673,2729,3023,3682,3980,4383,4393,4444 'flicker':2005,4231 'flight':584 'float':54,250,2763,2897,3105 'fold':4328 'fontsiz':1819,2331,2705,2943 'fontweight':1218,2320,2694 'framework':72,84,100,113,928,3232,3258,4533,4550 'framework-agnost':71 'framework-specif':99,4549 'full':198,240,530,672,807,1099,2457,2963,3147,4511,4620,4634,4707,4802 'full-featur':671 'full-pag':2962 'full-screen':3146 'fulli':4137 'function':993,1003,1134,1149,1157,1662,1943,2070,2417,2494,2507,2867,2880,3319,3405,3622,3821,3912,3925,4084 'g':1709,1713,2117,2121,3664,3668 'game':362,611 'gap':3829 'gate':3157,3391 'generat':4656 'generic':76 'get':823,4509 'global':3437 'globals.css':1554 'go':3119 'good':407,415,502 'gr':662 'grace':3134 'great':646 'grep':4192 'group':245,453,553,1061,1070,1079,1131,1159,1164,1195,1277,1302,1305,1309,1674,1848,1850,1851,1863,1865,1866,1872,1874,1875,2082,2362,2364,2365,2377,2379,2380,2386,2388,2389,2737,2752,2761,3071,3080,3084,3634,3715,3717,3718,3730,3732,3733,3739,3741,3742,4001,4010,4014 'grow':4317,4431 'guid':4507 'handl':106 'handleconversationclick':1004,1044,2508,2719,2881,3088,3926,3973 'happen':864 'hard':4033 'hasselect':2532,2617,2666,2722 'header':2297,4369 'header.tsx':1472 'height':1032,1170,1766,2926,2986,3151,3559,3572,3607,3626,3679,3851,3889,3909,3914,3952,4257,4265,4268,4300,4385,4446,4456 'helpdesk':249,2788 'hey':390,643 'hi':328,461 'hidden':678,766,1247,1787,1857,2371,2744,3026,3059,3078,3256,3283,3697,3724,3962,3991,4008,4415 'hiddenon':3412 'hiddenon.some':3417 'hide':3365 'hidereplyinthreadopt':692,783,1067,1072,1296,1307,1862,1867,2376,2381,2749,2754,3063,3082,3729,3734,3995,4012,4419,4557 'hold':4281 'home':259 'horizont':4292 'hour':608,4359 'icon':1509,1513,1912 'if-and-only-if':4626 'imessag':3189 'implement':956,4632 'import':900,911,976,980,987,1108,1112,1122,1528,1535,1561,1636,1641,1647,1935,1939,2044,2049,2055,2150,2409,2413,2472,2476,2483,2850,2854,2861,3313,3392,3586,3591,3597,3892,3896,3903,4170,4179,4185,4204 'inbox':431,2835 'inbox-styl':2834 'includ':58,691,4556,4663,4685 'index':3100,3123 'index.css':1556 'init':861,1977,1990,3352,4213 'initi':130,4226 'inlin':1475,4686,4776 'inset':1731,1748,2139,2543 'insid':890,1986,1992,2183,3276,3299,3884,4221 'instanc':4529 'instanceof':1012,1021,1258,1265,2516,2525,2889,2892,3049,3068,3934,3943 'instead':2203,2225,2587,2828,3617,4766,4775 'instruct':63,77 'integr':5,717,3453,3518,4047,4560 'intent':190 'interfac':1651,2059,2487,3601,3907 'intrins':4310,4455 'invok':3470 'island':951,3304,3427 'isn':735 'isopen':1653,1664,1684,1719,1723,1963,2061,2072,2092,2127,2132,2247,2438,2489,2496,2536,2602,4778 'john':399 'jp':398 'json':3467 'justifycont':1089,1321,1739,1841,2307,2355,2681,3707,4026 'kay':410 'keep':1615,2031,3210,4640 'key':1201,3089 'kit':694,4486,4574 'know':3455,4364 'label':1828,2340,2711,2907 'layout':267,277,299,537,858,893,1478,1551,3247,3440,3762,4113,4272,4331,4339 'layout.tsx':885,4067 'layout/root':875 'leav':2973 'left':304,4773 'let':631 'lg':1784,3694 'light':3008 'like':78,290,538 'linda':409 'link':1453,1467,1484,1488,1503,1521,1919,4158 'list':301,444,1923,2459,2469,2660,3170,3616,3856,3868,4322,4370,4430 'live':3296 'lk':408 'load':1678,1832,1843,2086,2346,2357,3638,3698,3709 'locat':87,932,3260 'logic':1978 'login':131,863,3371 'long':4348 'look':289,355,381,414,501,629,878,1353 'm':512 'main':786,1622,3246,3279 'main.tsx':4068 'make':2592,4302,4479 'mandatori':4613 'manual':1407,1412 'map':1198 'marketplac':207,520,3533 'marketplace/support':1626 'match':1500,2251 'maxwidth':2263,2620 'may':3141,4623 'media':3164 'menu':709,2188,4588,4755 'messag':195,424,427,517,658,706,794,1104,1481,1497,1499,1573,1582,1600,1604,1895,1918,1960,2186,2470,2578,2696,2720,4436,4586,4753 'messagecompos':206,813,4570 'messagehead':204 'messagelist':205,811,4568 'messagespag':1135 'messagespage.tsx':925,1107 'messeng':241,531,1100,4621 'min':1763,1767,2981,2987,3129,4267,4299 'min-height':4266,4298 'minheight':4286,4395,4412 'minwidth':4289 'mirror':3187 'misalign':2594 'mobil':3136 'modal':14,49,224,231,745,1563,1592,1595,1756,1988,1994,2002,2023,2398,3116,4600 'modal/drawer/panel':4223 'mode':4076 'modifi':4132 'motion':4719 'motion-saf':4718 'mount':3208,3221,3228,3259 'much':567,571 'multi':201,219,233,262,292,2447,3877 'multi-convers':200,218,232,261,291,2446,3876 'must':1979,3235,3334,3555,4177,4214,4242,4284,4555 'name':142 'nav':1184,1495,1507,4110,4153 'nav.tsx':1473 'navbar':226,1915 'navbar.tsx':1470 'navbar/sidebar':1459 'navig':832,869,1452,1466,2812 'navlink':1519 'never':2557,4057,4604,4669 'new':920,2163,2563,4125,4736 'next.js':938,942,1364,1379,1435,2849,3269,3284,3308,3378,3402 'none':1213,1215,1816,1818,2328,2330,2670,2702,2704,2940,3040,3042 'noth':761,4592 'npx':3461 'null':1725,3422 'object':4515,4528 'off-screen':2254,2606 'offset':2214,2224,2556,4774 'omit':4624 'onclick':1203,1743,1804,1957,2134,2324,2430,2538,2698,2913,3031 'onclos':1655,1665,1744,1805,1965,2063,2073,2135,2325,2440,2491,2497,2539,2699 'one':439,450,526,528,1526,1571,1598,4129,4349,4353 'one-off':1570,1597 'one-on-on':525 'ongo':1608,1612,2025 'onitemclick':1043,1251,1274,1279,2718,3087,3972 'onlin':460 'onthreadrepliesclick':789 'open':1618,2003,2033,2870,2908,2911,2956,2966,3195,4229 'option':271,752,2187,2579,3360,3375,4754 'otherwis':3343,4639 'outermost':881 'outlet':897 'outsid':3277 'overflow':1246,1786,1856,2370,2743,3025,3058,3077,3255,3282,3581,3696,3723,3961,3990,4007,4414 'overflow-hidden':3254 'overlay':1567,2772,2792,2959 'p':3418,3420 'pad':1209,1823,2311,2335,2685,3043 'page':81,199,212,260,826,916,931,943,958,1372,1380,1382,1588,1901,2776,2964,3285,3326,3370,3431,3527,3535,3583,3750,3754,3769,3789,3811,3820,4197 'page.tsx':4066 'pages/_app.tsx':3287 'pages/chat.tsx':945,1385 'pane':298,536,969,4617 'panel':17,52,723,734,779,799,2013,2196,2583,2958,3093,3167,3212,3539,3771,3780,3791,3800,3858,3864,4565,4595,4608,4637,4761 'parent':4251,4254,4279,4294 'parentmessageid':730,815,4572 'parker':387,640 'pass':4484,4518 'password':3373 'past':4318,4432 'path':104,1427,1446 'pathnam':3408,3410 'pathname.startswith':3419 'pattern':6,47,57,135,146,689,808,821,1352,3496,3767,4041,4476,4552,4603,4619,4798 'paul':400 'per':868,2170,3358 'per-navig':867 'perspect':4727 'picker':2190,2577,4752 'pictur':378,487 'placement':3,46,151,159,192,688,817,1564,1972,2010,2827,3465,3520,3551,4040 'platform':208,668 'plumb':780,4638 'plus':541 'pm':343,359,384,405,421,471,479,490,499,505,511,591,599,616,637,655 'point':1890,2403,3090 'pointer':1217,1822,2334,2708,2942,3046 'popov':2179,2194,2210,2234,2575,4750,4759 'posit':1729,1746,1760,1807,2137,2167,2178,2242,2541,2574,2597,2918,2969,3096,3251,4740,4749 'prefix':109 'present':269 'preview':2192,2581,4757 'primari':1231,2934 'product':4,211,675,1908,1933,1945,1953,2804,3534,3768,3776,3819,3823,3838 'product.description':3836 'product.name':3835 'product.sellerid':1969,3850 'productcard':1944 'productpag':3822 'profil':1587,1900,2427,3788 'project':23,42,95,872,1337,1342,1456,1882,2407,3502,4055,4060,4089,4103 'prop':143,4525,4611,4648 'properti':4355 'provid':134,843,3332 'purpos':30 'push':4323 'put':28,37,698,4097,4578 'px':2250,2277,2605,2634,4781,4787 'q':312,555 'queri':3165 'quick':1569,1596 'r':4193 'ra':346,592 'race':4236 'radius':1783,3693 'rather':3196,3435 'raw':4520 'ray':314,320,456,557,563 're':1997,2568,4225 're-anchor':2567 're-initi':4224 're-run':1996 'react':933,950,952,979,1111,1355,1397,1414,1437,1640,1938,2048,2412,2475,2853,3261,3290,3303,3376,3396,3590,3895 'react-router-dom':3395 'reaction':2193,4758 'read':125,136,870,1340,1454,1880,3751,4087,4105,4149,4159,4171 'reason':4667 'recommend':152,157,191 'reconnect':2007 'record':3446 'refer':265 'refus':4305 'relat':1761 'remov':782 'render':796,1465,2182,3168,3357,3425,3798,4499 'repar':4744 'replac':258,4058,4077 'repli':677,700,4580 'reset':3374 'resolv':4495 'resourc':3219 'result':2208 'retain':3511 'return':1027,1165,1685,1724,1726,1951,2093,2130,2425,2535,2896,3322,3421,3423,3676,3824,3949 'rgba':1751,1796,2144,2280,2548,2637,2949,3016 'richard':313,319,455,556,562 'right':310,1445,1811,1888,2019,2223,2246,2290,2401,2555,2601,2645,2922,2978,3155,4772,4777,4783,4785,4790 'robert':347,593 'room':2974 'root':841,905,1539,1546,1550,1560,1984,3225,4163,4219 'root.tsx':886 'rootlayout':3320 'rotat':4712 'rout':13,48,86,91,197,214,221,228,235,238,816,856,973,1334,1345,1362,1378,1388,1396,1403,1408,1418,2783,2826,3359,4148,4618 'router':97,896,940,944,953,1339,1356,1366,1381,1398,1413,1415,1434,1438,3271,3286,3291,3310,3327,3377,3389,3397,4107,4143 'router-awar':3388 'rr':318,454,561 'rule':4034,4036,4366 'run':1998 'saa':222 'safe':4720 'safeti':4547 'sale':335,468 'sam':361,610 'sarah':337,579 'save':604,3464 'say':170 'sb':336,578 'scale':2832,4690,4711 'scope':726,810,812,4567,4569 'scott':373,620 'screen':2256,2608,3138,3148 'scroll':4458 'sdk':3205,3354 'secondari':1579,2799 'section':434,1105,3796,4544 'see':369,416,483,800,4538,4791 'select':1093,1325,2875,3029,3048,3053,3062,3066,3067,3072,3081,3085,4030 'selectedgroup':1000,1054,1059,1062,1068,1071,1077,1080,1146,1300,1303,1306,1310,1312,2504,2534,2735,2738,2750,2753,2759,2762,3922,3999,4002,4011,4015,4017 'selectedus':996,1053,1055,1058,1063,1066,1073,1076,1142,1289,1292,1295,1299,1311,2500,2533,2731,2734,2745,2748,2755,2758,3918,3982,3985,3994,3998,4016 'selectgroup':1158,1267,1280 'selectus':1150,1260,1275 'seller':1904,1961,3847 'send':345,365,394,493,617,649,1602,1917 'set':835,4264,4285 'setactivetab':1138,1204 'setgroup':1675,1696,1712,2083,2104,2120,3635,3651,3667 'setload':1679,1686,1698,1701,1714,1717,2087,2094,2106,2109,2122,2125,3639,3653,3656,3669,3672 'setopen':2871,2914 'setselect':2876,2894,3032 'setselectedgroup':1001,1016,1025,1147,1155,1163,2505,2520,2529,3923,3938,3947 'setselectedus':997,1014,1023,1143,1153,1161,2501,2518,2527,3919,3936,3945 'setshowchat':1948,1958,1966,2422,2431,2441 'setup':1346 'setus':1671,1694,1710,2079,2102,2118,3631,3649,3665 'sf':372,619 'sg':360,609 'share':279 'short':4344 'show':445,2455,2467,3614 'showchat':1947,1964,2421,2439 'shrink':3133,4307,4376 'sibl':3238,3267,3273,3288 'side':778,2012 'side-panel':777 'sidebar':3783 'sidebar.tsx':1471 'signup':3372 'silent':759,4590 'simpl':742 'singl':215,229,435,748,2463,3180,3619,3872 'single-thread':747,3179 'size':4312,4474 'skew':4713 'skill':32,69,114,120,124,3454,3489,4543,4662 'skill-cometchat-placement' 'slide':2015,2253 'social':236,665,4622 'solid':1040,1182,1190,1227,1235,2316,2668,2690,3002,3686,3957,3969 'sound':406,586,625 'source-cometchat' 'space':2309,2683 'space-between':2308,2682 'span':2318,2692 'spec':2173,4805 'specif':101,1518,4551 'specifi':177 'src':4195 'src/app.tsx':3266 'src/chatpage.tsx':937 'src/components/chatwidget.tsx':2845 'src/layouts/baselayout.astro':3306 'src/main.tsx':3264 'src/pages':1390 'src/pages/chat.astro':947,1393 'src/pages/chatpage.tsx':935 'ssr':105,4532,4546 'standalon':1103 'start':1097,1329,3038 'stay':2235 'step':60,62,833,1628,2036,2838,3540 'step-by-step':59 'still':325,332,465,754 'string':1658,1660,2066,2068,3604,3606,3608,3910,4522 'structur':4104 'style':1029,1035,1046,1082,1167,1173,1185,1206,1243,1282,1314,1504,1728,1745,1759,1806,1834,1853,2136,2241,2302,2319,2326,2348,2367,2540,2596,2662,2676,2693,2700,2714,2724,2740,2836,2917,2968,3034,3055,3074,3506,3678,3700,3720,3826,3832,3841,3951,3964,3975,3987,4004,4019,4380,4388,4398,4407,4421,4441 'subscrib':3203 'suffici':1448 'support':248,524,2786,3538 'sure':344,393,492 'swap':3176 'switch':547,3144 'tab':239,247,544,1101,1127,1197,1199,1202,1205,1220,1225,3794 'tab.charat':1237 'tab.slice':1240 'tabl':155,188 'tailwind':4692,4782 'take':4358,4454 'takeov':2232 'talk':575 'target':3803,3806,4496 'targetgroupid':1659,1667,1705,1707,1721,2067,2075,2113,2115,2129,3605,3625,3660,3662,3675 'targetuserid':1657,1666,1689,1691,1720,1968,2065,2074,2097,2099,2128,2443,3603,3624,3644,3646,3674,3849 'teach':24,33 'team':429 'templat':3485 'template-bas':3484 'thank':354,413,500,507 'thing':3548,4098 'thread':216,230,307,436,676,702,722,733,749,765,769,793,798,804,2195,2464,2582,3181,3620,3873,4564,4582,4607,4636,4760 'thread-panel':4635 'time':2000 'toggl':3443 'top':1809,2244,2599 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'touppercas':1239 'transform':2155,2157,2201,2227,2558,2560,3199,4677,4683,4687,4689,4714,4717,4725 'transit':2289,2644,4682,4716,4789 'transition-transform':4681,4715 'translat':4678,4695,4698,4701,4705,4709,4721 'translate-i':4708 'translate-x':4694,4697,4700 'translate-x-ful':4704 'translatex':2156,2559,4688 'transpar':1236 'trap':4377 'tree':3215 'trigger':1879,1889,2393,2402,2898 'true':1681,1687,1959,2089,2095,2432,3641 'tsx':974,1106,1420,1489,1634,1924,2042,2408,2465,2844,3311,3382,3584,3814,3890,4367 'two':297,535,968,4616 'two-pan':296,534,967,4615 'type':422,515,656,1126,2903 'typic':3118 'u':1693,1695,2101,2103,3648,3650 'uid':4504,4521 'undefin':1017,1024,1156,1162,1697,1711,2105,2119,2521,2528,3033,3652,3666,3939,3946 'understand':3760,4115,4138 'unless':4070,4558 'us':632,661,2791 'usag':2837 'use':75,122,153,186,253,1508,1516,1523,1574,1591,2795,2816,2824,3379,3459,3494,3874,4270,4502 'useeffect':1637,1682,2045,2090,3160,3587,3642 'useloc':3380,3393,3409 'usepathnam':3381,3400 'user':164,169,189,244,274,451,551,1057,1065,1075,1130,1151,1154,1194,1272,1291,1294,1298,1584,1601,1614,1670,1844,1846,1847,1858,1860,1861,1868,1870,1871,1899,1922,2029,2078,2358,2360,2361,2372,2374,2375,2382,2384,2385,2436,2733,2747,2757,3052,3061,3065,3630,3711,3713,3714,3725,3727,3728,3735,3737,3738,3984,3993,3997,4052,4072,4404,4405,4417,4418,4427,4428,4449,4450,4452,4453,4460,4461,4524,4644,4645 'user/group':3807 'userid':2419,2444 'userprofil':2418 'users/groups':4497 'usest':977,998,1002,1109,1139,1144,1148,1638,1672,1676,1680,1936,1949,2046,2080,2084,2088,2410,2423,2473,2502,2506,2851,2872,2877,3588,3632,3636,3640,3893,3920,3924 'util':4693 'ux':763,3191 'v':315,457,558,2915,2916 'v2':3478,3517 'v3':3488 'v6':3297 'v7':1399,1439,3293 'var':108,1228,1771,1779,2268,2625,2931,2993,3003,3689 'variant':2450 'via':831,3444 'view':2471,2721,3182 'viewport':2206,2239,2590,3128,4320,4434,4769 'violat':4042 'visibl':755,1610,2901,4438 'visual':264,286 'vite':934,3262,3329 'void':1656,2064,2492 'vs':1593 'vv':472,491,506 'w':587 'w3c':4296 'want':3142,3363,3433,3861 'wast':3218 'watch':331,464 'websocket':4233 'whatsapp':3188 'wherev':3295 'white':2938,2999 'widest':2610 'widget':19,55,251,252,744,2764,2787,2829,2957,3132,3190,3234,3342,3345,3367,3457,3466,3474,3487,3492,3509,4599,4653 'width':1036,1174,1762,2252,2261,2611,2616,2652,2663,2924,2980,3149,3842,3965 'width/height':3125 'will-chang':4722 'window':441 'window.innerwidth':3161 'wire':719,737,1332,1877,2391,4562,4597,4605 'without':176,2780,2811,4646 'won':3346 'work':714,4341,4481 'worth':626 'wrap':849,894,3192,3335,3383,4468,4492,4534 'wrap-each-component-in-a-flex-sized-div':4467 'wrapper':882 'write':3482,3490,4642 'wrong':4429 'x':1831,2343,4696,4699,4702,4706 'y':4710 'yes':351,473 'z':3099,3122 'z-index':3098,3121 'zero':3579,4262 'zindex':1733,1813,2141,2265,2545,2622,2954,3027","prices":[{"id":"3c229f70-23f4-4f13-8a6d-e95a1f2add48","listingId":"47e435a5-df9d-466a-9fcd-9184a58631ab","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:15.781Z"}],"sources":[{"listingId":"47e435a5-df9d-466a-9fcd-9184a58631ab","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-placement","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-placement","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:15.781Z","lastSeenAt":"2026-05-18T19:04:55.528Z"}],"details":{"listingId":"47e435a5-df9d-466a-9fcd-9184a58631ab","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-placement","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"713c89d2a06b6943f80d3eb437beb831c9e00240","skill_md_path":"skills/cometchat-placement/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-placement"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-placement","license":"MIT","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.","compatibility":"@cometchat/chat-uikit-react ^6; @cometchat/chat-sdk-javascript ^4"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-placement"},"updatedAt":"2026-05-18T19:04:55.528Z"}}