@cometchat/skills-cli 2.0.0

package/dist/registry/v6/experiences/2-one-to-one/templates/nextjs/CometChatNoSSR.tsx.tpl

@@ -0,0 +1,66 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+// css-variables.css is imported in app/globals.css — do NOT import it here
+import "./CometChatNoSSR.css";
+
+const COMETCHAT_CONSTANTS = {
+  APP_ID: process.env.{{ENV_PREFIX}}COMETCHAT_APP_ID!,
+  REGION: process.env.{{ENV_PREFIX}}COMETCHAT_REGION!,
+  AUTH_KEY: process.env.{{ENV_PREFIX}}COMETCHAT_AUTH_KEY!,
+};
+const LOGIN_UID = "{{LOGIN_UID}}";
+const CHAT_UID = "{{CHAT_UID}}";
+
+const CometChatNoSSR: React.FC = () => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [chatUser, setChatUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const settings = new UIKitSettingsBuilder()
+      .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+      .setRegion(COMETCHAT_CONSTANTS.REGION)
+      .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+      .subscribePresenceForAllUsers()
+      .build();
+
+    CometChatUIKit.init(settings)?.then(() => {
+      CometChatUIKit.getLoggedinUser().then((u) => {
+        if (!u) {
+          CometChatUIKit.login(LOGIN_UID)
+            .then(() => setLoggedIn(true))
+            .catch((e: unknown) => setError(String(e)));
+        } else {
+          setLoggedIn(true);
+        }
+      });
+    }).catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  useEffect(() => {
+    if (!loggedIn) return;
+    CometChat.getUser(CHAT_UID)
+      .then((u) => setChatUser(u))
+      .catch((e: unknown) => setError(String(e)));
+  }, [loggedIn]);
+
+  if (error) return <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>{error}</div>;
+  if (!loggedIn || !chatUser) return <div className="empty-conversation">Loading chat…</div>;
+
+  return (
+    <div className="messages-wrapper">
+      <CometChatMessageHeader user={chatUser} />
+      <CometChatMessageList user={chatUser} />
+      <CometChatMessageComposer user={chatUser} />
+    </div>
+  );
+};
+export default CometChatNoSSR;

package/dist/registry/v6/experiences/2-one-to-one/templates/nextjs/chat-page.tsx.tpl

@@ -0,0 +1,11 @@
+"use client";
+import dynamic from "next/dynamic";
+
+const CometChatComponent = dynamic(
+  () => import("../cometchat/CometChatNoSSR"),
+  { ssr: false }
+);
+
+export default function ChatPage() {
+  return <CometChatComponent />;
+}

package/dist/registry/v6/experiences/2-one-to-one/templates/react-router/CometChat-route.tsx.tpl

@@ -0,0 +1,21 @@
+import React, { lazy, Suspense, useEffect, useState } from "react";
+
+const CometChatNoSSR = lazy(() => import("../cometchat/CometChatNoSSR"));
+
+export default function CometChatRoute() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <div style={{ padding: 16 }}>Loading…</div>;
+  }
+
+  return (
+    <Suspense fallback={<div style={{ padding: 16 }}>Loading…</div>}>
+      <CometChatNoSSR />
+    </Suspense>
+  );
+}

package/dist/registry/v6/experiences/2-one-to-one/templates/react-router/CometChatNoSSR.css.tpl

@@ -0,0 +1,21 @@
+.messages-wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.empty-conversation {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  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/react-router/CometChatNoSSR.tsx.tpl

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+// css-variables.css is imported in app/app.css — do NOT import it here
+import "./CometChatNoSSR.css";
+
+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 LOGIN_UID = "{{LOGIN_UID}}";
+const CHAT_UID = "{{CHAT_UID}}";
+
+const CometChatNoSSR: React.FC = () => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [chatUser, setChatUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const settings = new UIKitSettingsBuilder()
+      .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+      .setRegion(COMETCHAT_CONSTANTS.REGION)
+      .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+      .subscribePresenceForAllUsers()
+      .build();
+
+    CometChatUIKit.init(settings)?.then(() => {
+      CometChatUIKit.getLoggedinUser().then((u) => {
+        if (!u) {
+          CometChatUIKit.login(LOGIN_UID)
+            .then(() => setLoggedIn(true))
+            .catch((e: unknown) => setError(String(e)));
+        } else {
+          setLoggedIn(true);
+        }
+      });
+    }).catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  useEffect(() => {
+    if (!loggedIn) return;
+    CometChat.getUser(CHAT_UID)
+      .then((u) => setChatUser(u))
+      .catch((e: unknown) => setError(String(e)));
+  }, [loggedIn]);
+
+  if (error) return <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>{error}</div>;
+  if (!loggedIn || !chatUser) return <div className="empty-conversation">Loading chat…</div>;
+
+  return (
+    <div className="messages-wrapper">
+      <CometChatMessageHeader user={chatUser} />
+      <CometChatMessageList user={chatUser} />
+      <CometChatMessageComposer user={chatUser} />
+    </div>
+  );
+};
+export default CometChatNoSSR;

package/dist/registry/v6/experiences/2-one-to-one/templates/reactjs/App.css.tpl

@@ -0,0 +1,4 @@
+#root { width: 100vw; height: 100vh; }
+.messages-wrapper { width: 100%; 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; }

package/dist/registry/v6/experiences/2-one-to-one/templates/reactjs/App.tsx.tpl

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "./App.css";
+
+// The hardcoded user this chat connects to. Change to point at any
+// CometChat UID created in your dashboard.
+const CHAT_UID = "{{CHAT_UID}}";
+
+function App() {
+  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>
+  );
+}
+export default App;

package/dist/registry/v6/experiences/2-one-to-one/templates/reactjs/main.tsx.tpl

@@ -0,0 +1,46 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-react'
+import './index.css'
+import App from './App.tsx'
+
+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()
+
+CometChatUIKit.init(settings)
+  ?.then(() => {
+    CometChatUIKit.getLoggedinUser().then((user) => {
+      if (!user) {
+        CometChatUIKit.login('{{LOGIN_UID}}')
+          .then(() => mount())
+          .catch((e: unknown) => mountError(String(e)))
+      } else {
+        mount()
+      }
+    })
+  })
+  .catch((e: unknown) => mountError(String(e)))
+
+function mount() {
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  )
+}
+
+function mountError(message: string) {
+  createRoot(document.getElementById('root')!).render(
+    <div style={{ color: 'red', padding: 16, fontFamily: 'monospace' }}>{message}</div>,
+  )
+}

package/dist/registry/v6/experiences/3-tab-based/astro.template.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 3,
+  "framework": "astro",
+  "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"
+    },
+    {
+      "name": "@astrojs/react",
+      "version": "^4"
+    },
+    {
+      "name": "react",
+      "version": "^18"
+    },
+    {
+      "name": "react-dom",
+      "version": "^18"
+    }
+  ],
+  "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)"
+    }
+  ],
+  "files": [
+    {
+      "path": "src/cometchat/ChatApp.tsx",
+      "action": "create",
+      "template_ref": "ChatApp.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/ChatApp.css",
+      "action": "create",
+      "template_ref": "ChatApp.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatTabs.tsx",
+      "action": "create",
+      "template_ref": "CometChatTabs.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatTabs.css",
+      "action": "create",
+      "template_ref": "CometChatTabs.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/pages/chat.astro",
+      "action": "create",
+      "template_ref": "chat.astro.tpl",
+      "owned": true
+    }
+  ],
+  "verify_rules": [
+    "init_before_login",
+    "no_user_and_group_same_component",
+    "no_auth_key_in_source",
+    "render_gated_on_login_resolve",
+    "error_ui_visible_on_failure"
+  ],
+  "next_steps": [
+    "If `@astrojs/react` isn't installed yet, run: `npx astro add react`",
+    "Run `npm run dev` to start the dev server",
+    "Visit http://localhost:4321/chat",
+    "Click any of the 4 tabs (Chats / Calls / Users / Groups) to switch lists"
+  ]
+}

package/dist/registry/v6/experiences/3-tab-based/nextjs.template.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 3,
+  "framework": "nextjs",
+  "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)"
+    }
+  ],
+  "files": [
+    {
+      "path": "src/app/cometchat/CometChatNoSSR.tsx",
+      "action": "create",
+      "template_ref": "CometChatNoSSR.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/cometchat/CometChatNoSSR.css",
+      "action": "create",
+      "template_ref": "CometChatNoSSR.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/cometchat/CometChatTabs.tsx",
+      "action": "create",
+      "template_ref": "CometChatTabs.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/cometchat/CometChatTabs.css",
+      "action": "create",
+      "template_ref": "CometChatTabs.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/chat/page.tsx",
+      "action": "create",
+      "template_ref": "chat-page.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/globals.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_user_and_group_same_component",
+    "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:3000/chat",
+    "Click any of the 4 tabs (Chats / Calls / Users / Groups) to switch lists",
+    "Click a conversation, user, or group to open the message thread",
+    "When ready for production, run `cometchat apply --production` to set up server-side auth tokens"
+  ]
+}

package/dist/registry/v6/experiences/3-tab-based/react-router.template.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 3,
+  "framework": "react-router",
+  "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)"
+    }
+  ],
+  "files": [
+    {
+      "path": "app/cometchat/CometChatNoSSR.tsx",
+      "action": "create",
+      "template_ref": "CometChatNoSSR.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "app/cometchat/CometChatNoSSR.css",
+      "action": "create",
+      "template_ref": "CometChatNoSSR.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "app/cometchat/CometChatTabs.tsx",
+      "action": "create",
+      "template_ref": "CometChatTabs.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "app/cometchat/CometChatTabs.css",
+      "action": "create",
+      "template_ref": "CometChatTabs.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "app/routes/CometChat.tsx",
+      "action": "create",
+      "template_ref": "CometChat-route.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "app/routes.ts",
+      "action": "patch",
+      "patch_mode": "replace-section",
+      "anchor": "import { type RouteConfig, index }",
+      "patch_content": "import { type RouteConfig, index, route } from \"@react-router/dev/routes\";",
+      "skip_if_exists": "import { type RouteConfig, index, route }"
+    },
+    {
+      "path": "app/routes.ts",
+      "action": "patch",
+      "patch_mode": "insert-before",
+      "anchor": "] satisfies RouteConfig",
+      "patch_content": "  route(\"chat\", \"routes/CometChat.tsx\"),\n",
+      "skip_if_exists": "routes/CometChat.tsx"
+    },
+    {
+      "path": "app/app.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_user_and_group_same_component",
+    "no_auth_key_in_source",
+    "render_gated_on_login_resolve",
+    "error_ui_visible_on_failure"
+  ],
+  "next_steps": [
+    "Add the chat route to app/routes.ts: route(\"chat\", \"routes/CometChat.tsx\")",
+    "Run `npm run dev` to start the dev server",
+    "Visit http://localhost:5173/chat",
+    "Click any of the 4 tabs (Chats / Calls / Users / Groups) to switch lists"
+  ]
+}

package/dist/registry/v6/experiences/3-tab-based/reactjs.template.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 3,
+  "framework": "reactjs",
+  "sdk_compatibility": ">=6.0.0 <7.0.0",
+  "default_placement": "spa-root",
+  "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/main.tsx",
+      "action": "create",
+      "template_ref": "main.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/App.tsx",
+      "action": "create",
+      "template_ref": "App.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/App.css",
+      "action": "create",
+      "template_ref": "App.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatTabs.tsx",
+      "action": "create",
+      "template_ref": "CometChatTabs.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatTabs.css",
+      "action": "create",
+      "template_ref": "CometChatTabs.css.tpl",
+      "owned": 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_user_and_group_same_component",
+    "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",
+    "The left panel shows the tab bar (Chats / Calls / Users / Groups). Click any tab to switch.",
+    "Click a conversation, user, or group to open the message thread on the right.",
+    "When ready for production, run `cometchat apply --production` to set up server-side auth tokens"
+  ]
+}