@cometchat/skills-cli 2.0.4 → 2.2.0

package/dist/registry/schemas/config.schema.json

@@ -0,0 +1,119 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://cometchat.com/schemas/config.json",
+  "title": "CometChat Project Config",
+  "description": "Persistent project-level configuration for CometChat integrations. Written by the wizard/CLI, read by skills and commands.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["version"],
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "description": "JSON Schema URI for editor autocomplete."
+    },
+    "version": {
+      "type": "number",
+      "const": 1,
+      "description": "Schema version. Always 1."
+    },
+    "appId": {
+      "type": "string",
+      "description": "CometChat App ID. Not a secret — safe to commit."
+    },
+    "region": {
+      "type": "string",
+      "enum": ["us", "eu", "in"],
+      "description": "CometChat data region."
+    },
+    "framework": {
+      "type": "string",
+      "enum": ["reactjs", "nextjs", "react-router", "astro"],
+      "description": "Detected or user-overridden framework."
+    },
+    "router": {
+      "type": "string",
+      "enum": ["app", "pages"],
+      "description": "Next.js router variant. Only applicable when framework is nextjs."
+    },
+    "envPrefix": {
+      "type": "string",
+      "enum": ["VITE_", "NEXT_PUBLIC_", "PUBLIC_"],
+      "description": "Environment variable prefix for client-side env vars."
+    },
+    "typescript": {
+      "type": "boolean",
+      "description": "Whether the project uses TypeScript."
+    },
+    "intent": {
+      "type": "string",
+      "enum": ["marketplace", "saas", "social", "messaging", "support", "exploring"],
+      "description": "What the user is building — drives the recommended integration shape."
+    },
+    "experience": {
+      "type": "number",
+      "enum": [1, 2, 3],
+      "description": "CometChat experience level (1 = multi-conversation, 2 = single-thread, 3 = full-messenger)."
+    },
+    "placement": {
+      "type": "string",
+      "enum": ["route", "modal", "drawer", "widget", "embed", "demo"],
+      "description": "Where the chat UI is placed in the app."
+    },
+    "placementPath": {
+      "type": "string",
+      "description": "Route path for the chat page (e.g. \"/messages\")."
+    },
+    "authMode": {
+      "type": "string",
+      "enum": ["authKey", "tokenEndpoint"],
+      "description": "Authentication mode — dev (authKey) or production (tokenEndpoint)."
+    },
+    "tokenEndpointPath": {
+      "type": "string",
+      "description": "Path to the server-side token endpoint (e.g. \"app/api/cometchat-token/route.ts\")."
+    },
+    "theme": {
+      "type": "string",
+      "description": "Theme preset name (slack, whatsapp, discord, etc.) or \"custom\"."
+    },
+    "darkMode": {
+      "type": "boolean",
+      "description": "Whether dark mode is enabled."
+    },
+    "paths": {
+      "type": "object",
+      "description": "Paths to CometChat files in this project.",
+      "additionalProperties": false,
+      "properties": {
+        "provider": {
+          "type": "string",
+          "description": "Path to the CometChat provider component (e.g. \"src/providers/CometChatProvider.tsx\")."
+        },
+        "chatPage": {
+          "type": "string",
+          "description": "Path to the main chat page (e.g. \"app/messages/page.tsx\")."
+        },
+        "chatDrawer": {
+          "type": "string",
+          "description": "Path to the chat drawer component."
+        },
+        "chatModal": {
+          "type": "string",
+          "description": "Path to the chat modal component."
+        },
+        "cssImport": {
+          "type": "string",
+          "description": "Path where css-variables.css was imported."
+        }
+      }
+    },
+    "features": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "uniqueItems": true,
+      "description": "Features applied on top of the base integration (e.g. [\"instant-messaging\", \"media-sharing\"])."
+    }
+  }
+}

package/dist/registry/v6/experiences/1-conversation-list/reactjs-dedicated-route.template.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 1,
+  "framework": "reactjs-dedicated-route",
+  "sdk_compatibility": ">=6.0.0 <7.0.0",
+  "default_placement": "dedicated-route",
+  "deps": [
+    { "name": "@cometchat/chat-uikit-react", "version": "^6" },
+    { "name": "@cometchat/chat-sdk-javascript", "version": "^4" }
+  ],
+  "env_vars": [
+    { "name": "{{ENV_PREFIX}}COMETCHAT_APP_ID", "required": true, "description": "CometChat App ID from your dashboard" },
+    { "name": "{{ENV_PREFIX}}COMETCHAT_REGION", "required": true, "description": "CometChat region (us, eu, in, etc.)" },
+    { "name": "{{ENV_PREFIX}}COMETCHAT_AUTH_KEY", "required": true, "secret": true, "description": "CometChat Auth Key (development only — use auth tokens in production)" }
+  ],
+  "files": [
+    {
+      "path": "src/cometchat/CometChatSelector.tsx",
+      "action": "create",
+      "template_ref": "CometChatSelector.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatMessenger.tsx",
+      "action": "create",
+      "template_ref": "CometChatMessenger.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatMessenger.css",
+      "action": "create",
+      "template_ref": "CometChatMessenger.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/pages/ChatPage.tsx",
+      "action": "create",
+      "template_ref": "ChatPage.tsx.tpl",
+      "owned": true,
+      "is_entry": true
+    },
+    {
+      "path": "src/App.tsx",
+      "action": "patch",
+      "patch_mode": "prepend",
+      "patch_content": "import ChatPage from \"./pages/ChatPage\";\n",
+      "skip_if_exists": "./pages/ChatPage",
+      "embed_skip": true
+    },
+    {
+      "path": "src/App.tsx",
+      "action": "patch",
+      "patch_mode": "insert-before",
+      "anchor": "</Routes>",
+      "patch_content": "  <Route path=\"{{PLACEMENT_PATH}}\" element={<ChatPage />} />\n    ",
+      "skip_if_exists": "element={<ChatPage />}",
+      "embed_skip": true
+    },
+    {
+      "path": "src/index.css",
+      "action": "patch",
+      "patch_mode": "prepend",
+      "patch_content": "@import url(\"@cometchat/chat-uikit-react/css-variables.css\");\n",
+      "skip_if_exists": "@cometchat/chat-uikit-react/css-variables.css"
+    }
+  ],
+  "verify_rules": [
+    "css_variables_imported_once",
+    "init_before_login",
+    "no_auth_key_in_source",
+    "render_gated_on_login_resolve",
+    "error_ui_visible_on_failure"
+  ],
+  "next_steps": [
+    "Run `npm run dev` to start the dev server",
+    "Visit http://localhost:5173{{PLACEMENT_PATH}}",
+    "Click a conversation in the left panel to open it",
+    "If the route didn't wire up automatically (your App.tsx layout is non-standard), add: <Route path=\"{{PLACEMENT_PATH}}\" element={<ChatPage />} /> inside your existing <Routes> block and import ChatPage from ./pages/ChatPage"
+  ]
+}

package/dist/registry/v6/experiences/1-conversation-list/templates/reactjs-dedicated-route/ChatPage.tsx.tpl

@@ -0,0 +1,87 @@
+import { lazy, Suspense, useEffect, useState } from "react";
+import {
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+
+const CometChatMessenger = lazy(
+  () => import("../cometchat/CometChatMessenger")
+);
+
+const COMETCHAT_CONSTANTS = {
+  APP_ID: import.meta.env.{{ENV_PREFIX}}COMETCHAT_APP_ID as string,
+  REGION: import.meta.env.{{ENV_PREFIX}}COMETCHAT_REGION as string,
+  AUTH_KEY: import.meta.env.{{ENV_PREFIX}}COMETCHAT_AUTH_KEY as string,
+};
+
+const settings = new UIKitSettingsBuilder()
+  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+  .setRegion(COMETCHAT_CONSTANTS.REGION)
+  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+  .subscribePresenceForAllUsers()
+  .build();
+
+// Module-level promise so init + login only runs once, even if the page
+// remounts (route changes, StrictMode double-render). Subsequent mounts
+// await the same resolved promise.
+let initPromise: Promise<void> | null = null;
+function ensureInitialized(): Promise<void> {
+  if (initPromise) return initPromise;
+  initPromise = CometChatUIKit.init(settings)
+    .then(() => CometChatUIKit.getLoggedinUser())
+    .then((user) => {
+      if (user) return undefined;
+      return CometChatUIKit.login("{{LOGIN_UID}}").then(() => undefined);
+    })
+    .then(() => undefined);
+  return initPromise;
+}
+
+export default function ChatPage() {
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    ensureInitialized()
+      .then(() => {
+        if (!cancelled) setReady(true);
+      })
+      .catch((e: unknown) => {
+        if (!cancelled) setError(String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (error) {
+    return (
+      <div
+        className="cometchat-page"
+        style={{
+          color: "red",
+          padding: 16,
+          fontFamily: "monospace",
+        }}
+      >
+        CometChat failed to load: {error}
+      </div>
+    );
+  }
+  if (!ready) {
+    return (
+      <div className="cometchat-page" style={{ padding: 16 }}>
+        Loading chat…
+      </div>
+    );
+  }
+
+  return (
+    <div className="cometchat-page">
+      <Suspense fallback={<div style={{ padding: 16 }}>Loading chat…</div>}>
+        <CometChatMessenger />
+      </Suspense>
+    </div>
+  );
+}

package/dist/registry/v6/experiences/1-conversation-list/templates/reactjs-dedicated-route/CometChatMessenger.css.tpl

@@ -0,0 +1,20 @@
+/* CometChat layout — IMPORTANT: read this before customizing.
+ *
+ * The CometChat React UI Kit v6 wraps every component in a `<div class="cometchat">`
+ * which does NOT set `height: 100%`. CSS flex with `flex: 1` alone WILL NOT propagate
+ * height through this wrapper, so the message list (which uses `overflow: hidden auto`
+ * + `height: 100%` internally) collapses to content size — disabling scroll and
+ * showing messages from the top instead of bottom-anchored.
+ *
+ * This stylesheet scopes the layout to `.cometchat-page` (the root div in
+ * ChatPage.tsx) so it doesn't leak into the rest of your app's pages.
+ */
+.cometchat-page { width: 100vw; height: 100vh; }
+.conversations-with-messages { display: flex; height: 100%; width: 100%; }
+.conversations-wrapper { height: 100vh; width: 480px; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; }
+.conversations-wrapper > .cometchat { overflow: hidden; }
+.messages-wrapper { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
+.empty-conversation { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; background: var(--cometchat-background-color-03, #F5F5F5); color: var(--cometchat-text-color-secondary, #727272); font: var(--cometchat-font-body-regular, 400 14px Roboto); }
+.cometchat .cometchat-message-composer { border-radius: 0; }
+/* Side panel — used by details, search, threaded messages. Ready to use in Phase B. */
+.side-component-wrapper { display: flex; width: 30%; max-width: 420px; flex-direction: column; flex-shrink: 0; background: var(--cometchat-background-color-01, #FFF); border-left: 1px solid var(--cometchat-border-color-light, #F5F5F5); height: 100%; overflow: hidden; }

package/dist/registry/v6/experiences/1-conversation-list/templates/reactjs-dedicated-route/CometChatMessenger.tsx.tpl

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector";
+import "./CometChatMessenger.css";
+
+export default function CometChatMessenger() {
+  const [selectedUser, setSelectedUser] = useState<
+    CometChat.User | undefined
+  >();
+  const [selectedGroup, setSelectedGroup] = useState<
+    CometChat.Group | undefined
+  >();
+
+  return (
+    <div className="conversations-with-messages">
+      <div className="conversations-wrapper">
+        <CometChatSelector
+          onSelectorItemClicked={(activeItem) => {
+            const item =
+              activeItem instanceof CometChat.Conversation
+                ? activeItem.getConversationWith()
+                : activeItem;
+            if (item instanceof CometChat.User) {
+              setSelectedUser(item);
+              setSelectedGroup(undefined);
+            } else if (item instanceof CometChat.Group) {
+              setSelectedUser(undefined);
+              setSelectedGroup(item);
+            }
+          }}
+        />
+      </div>
+      {selectedUser || selectedGroup ? (
+        <div className="messages-wrapper">
+          {selectedUser && <CometChatMessageHeader user={selectedUser} />}
+          {selectedGroup && <CometChatMessageHeader group={selectedGroup} />}
+          {selectedUser && <CometChatMessageList user={selectedUser} />}
+          {selectedGroup && <CometChatMessageList group={selectedGroup} />}
+          {selectedUser && <CometChatMessageComposer user={selectedUser} />}
+          {selectedGroup && <CometChatMessageComposer group={selectedGroup} />}
+        </div>
+      ) : (
+        <div className="empty-conversation">
+          Select a conversation to start chatting
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/registry/v6/experiences/1-conversation-list/templates/reactjs-dedicated-route/CometChatSelector.tsx.tpl

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+  CometChatConversations,
+  CometChatUIKitLoginListener,
+} from "@cometchat/chat-uikit-react";
+
+interface SelectorProps {
+  onSelectorItemClicked?: (
+    input: CometChat.Conversation | CometChat.User | CometChat.Group,
+    type: string
+  ) => void;
+}
+
+export const CometChatSelector = ({
+  onSelectorItemClicked = () => {},
+}: SelectorProps) => {
+  const [loggedInUser, setLoggedInUser] = useState<CometChat.User | null>(null);
+  const [activeConversation, setActiveConversation] = useState<
+    CometChat.Conversation | undefined
+  >();
+
+  useEffect(() => {
+    setLoggedInUser(CometChatUIKitLoginListener.getLoggedInUser());
+  }, []);
+
+  return (
+    <>
+      {loggedInUser && (
+        <CometChatConversations
+          activeConversation={activeConversation}
+          onItemClick={(e) => {
+            setActiveConversation(e);
+            onSelectorItemClicked(e, "updateSelectedItem");
+          }}
+        />
+      )}
+    </>
+  );
+};

package/dist/registry/v6/experiences/2-one-to-one/reactjs-dedicated-route.template.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 2,
+  "framework": "reactjs-dedicated-route",
+  "sdk_compatibility": ">=6.0.0 <7.0.0",
+  "default_placement": "dedicated-route",
+  "deps": [
+    { "name": "@cometchat/chat-uikit-react", "version": "^6" },
+    { "name": "@cometchat/chat-sdk-javascript", "version": "^4" }
+  ],
+  "env_vars": [
+    { "name": "{{ENV_PREFIX}}COMETCHAT_APP_ID", "required": true, "description": "CometChat App ID from your dashboard" },
+    { "name": "{{ENV_PREFIX}}COMETCHAT_REGION", "required": true, "description": "CometChat region (us, eu, in, etc.)" },
+    { "name": "{{ENV_PREFIX}}COMETCHAT_AUTH_KEY", "required": true, "secret": true, "description": "CometChat Auth Key (development only — use auth tokens in production)" }
+  ],
+  "files": [
+    {
+      "path": "src/cometchat/CometChatMessenger.tsx",
+      "action": "create",
+      "template_ref": "CometChatMessenger.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatMessenger.css",
+      "action": "create",
+      "template_ref": "CometChatMessenger.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/pages/ChatPage.tsx",
+      "action": "create",
+      "template_ref": "ChatPage.tsx.tpl",
+      "owned": true,
+      "is_entry": true
+    },
+    {
+      "path": "src/App.tsx",
+      "action": "patch",
+      "patch_mode": "prepend",
+      "patch_content": "import ChatPage from \"./pages/ChatPage\";\n",
+      "skip_if_exists": "./pages/ChatPage",
+      "embed_skip": true
+    },
+    {
+      "path": "src/App.tsx",
+      "action": "patch",
+      "patch_mode": "insert-before",
+      "anchor": "</Routes>",
+      "patch_content": "  <Route path=\"{{PLACEMENT_PATH}}\" element={<ChatPage />} />\n    ",
+      "skip_if_exists": "element={<ChatPage />}",
+      "embed_skip": true
+    },
+    {
+      "path": "src/index.css",
+      "action": "patch",
+      "patch_mode": "prepend",
+      "patch_content": "@import url(\"@cometchat/chat-uikit-react/css-variables.css\");\n",
+      "skip_if_exists": "@cometchat/chat-uikit-react/css-variables.css"
+    }
+  ],
+  "verify_rules": [
+    "css_variables_imported_once",
+    "init_before_login",
+    "no_auth_key_in_source",
+    "render_gated_on_login_resolve",
+    "error_ui_visible_on_failure"
+  ],
+  "next_steps": [
+    "Run `npm run dev` to start the dev server",
+    "Visit http://localhost:5173{{PLACEMENT_PATH}} — you'll see a one-to-one chat with `{{CHAT_UID}}`",
+    "To change the chat partner, edit `CHAT_UID` in `src/cometchat/CometChatMessenger.tsx`",
+    "If the route didn't wire up automatically (your App.tsx layout is non-standard), add: <Route path=\"{{PLACEMENT_PATH}}\" element={<ChatPage />} /> inside your existing <Routes> block and import ChatPage from ./pages/ChatPage"
+  ]
+}

package/dist/registry/v6/experiences/2-one-to-one/reactjs.template.json

@@ -38,19 +38,22 @@
       "path": "src/main.tsx",
       "action": "create",
       "template_ref": "main.tsx.tpl",
-      "owned": true
+      "owned": true,
+      "embed_skip": true
     },
     {
       "path": "src/App.tsx",
       "action": "create",
       "template_ref": "App.tsx.tpl",
-      "owned": true
+      "owned": true,
+      "is_entry": true
     },
     {
       "path": "src/App.css",
       "action": "create",
       "template_ref": "App.css.tpl",
-      "owned": true
+      "owned": true,
+      "move_with_entry": true
     },
     {
       "path": "src/index.css",

package/dist/registry/v6/experiences/2-one-to-one/templates/reactjs-dedicated-route/ChatPage.tsx.tpl

@@ -0,0 +1,84 @@
+import { lazy, Suspense, useEffect, useState } from "react";
+import {
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+
+const CometChatMessenger = lazy(
+  () => import("../cometchat/CometChatMessenger")
+);
+
+const COMETCHAT_CONSTANTS = {
+  APP_ID: import.meta.env.{{ENV_PREFIX}}COMETCHAT_APP_ID as string,
+  REGION: import.meta.env.{{ENV_PREFIX}}COMETCHAT_REGION as string,
+  AUTH_KEY: import.meta.env.{{ENV_PREFIX}}COMETCHAT_AUTH_KEY as string,
+};
+
+const settings = new UIKitSettingsBuilder()
+  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+  .setRegion(COMETCHAT_CONSTANTS.REGION)
+  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+  .subscribePresenceForAllUsers()
+  .build();
+
+let initPromise: Promise<void> | null = null;
+function ensureInitialized(): Promise<void> {
+  if (initPromise) return initPromise;
+  initPromise = CometChatUIKit.init(settings)
+    .then(() => CometChatUIKit.getLoggedinUser())
+    .then((user) => {
+      if (user) return undefined;
+      return CometChatUIKit.login("{{LOGIN_UID}}").then(() => undefined);
+    })
+    .then(() => undefined);
+  return initPromise;
+}
+
+export default function ChatPage() {
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    ensureInitialized()
+      .then(() => {
+        if (!cancelled) setReady(true);
+      })
+      .catch((e: unknown) => {
+        if (!cancelled) setError(String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (error) {
+    return (
+      <div
+        className="cometchat-page"
+        style={{
+          color: "red",
+          padding: 16,
+          fontFamily: "monospace",
+        }}
+      >
+        CometChat failed to load: {error}
+      </div>
+    );
+  }
+  if (!ready) {
+    return (
+      <div className="cometchat-page" style={{ padding: 16 }}>
+        Loading chat…
+      </div>
+    );
+  }
+
+  return (
+    <div className="cometchat-page">
+      <Suspense fallback={<div style={{ padding: 16 }}>Loading chat…</div>}>
+        <CometChatMessenger />
+      </Suspense>
+    </div>
+  );
+}

package/dist/registry/v6/experiences/2-one-to-one/templates/reactjs-dedicated-route/CometChatMessenger.css.tpl

@@ -0,0 +1,9 @@
+/* Scoped to .cometchat-page (root div in ChatPage.tsx) so the fixed-height
+ * chat layout doesn't leak into other routes. See the exp 1 dedicated-route
+ * CSS file for the full explanation of why the message list needs resolved
+ * heights on every ancestor.
+ */
+.cometchat-page { width: 100%; height: 100vh; }
+.messages-wrapper { height: 100%; width: 100%; display: flex; flex-direction: column; }
+.empty-conversation { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; background: var(--cometchat-background-color-03, #F5F5F5); color: var(--cometchat-text-color-secondary, #727272); font: var(--cometchat-font-body-regular, 400 14px Roboto); }
+.cometchat .cometchat-message-composer { border-radius: 0; }

package/dist/registry/v6/experiences/2-one-to-one/templates/reactjs-dedicated-route/CometChatMessenger.tsx.tpl

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "./CometChatMessenger.css";
+
+// The hardcoded user this chat connects to. Change to point at any
+// CometChat UID created in your dashboard.
+const CHAT_UID = "{{CHAT_UID}}";
+
+export default function CometChatMessenger() {
+  const [chatUser, setChatUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    CometChat.getUser(CHAT_UID)
+      .then((user) => setChatUser(user))
+      .catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  if (error) {
+    return (
+      <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>
+        {error}
+      </div>
+    );
+  }
+
+  if (!chatUser) {
+    return <div className="empty-conversation">Loading chat…</div>;
+  }
+
+  return (
+    <div className="messages-wrapper">
+      <CometChatMessageHeader user={chatUser} />
+      <CometChatMessageList user={chatUser} />
+      <CometChatMessageComposer user={chatUser} />
+    </div>
+  );
+}