@cometchat/skills-cli 2.0.0

package/dist/registry/v6/user-mgmt/react-router/api.cometchat-user.ts.tpl

@@ -0,0 +1,176 @@
+/**
+ * /api/cometchat-user — server-side CometChat user management.
+ *
+ * React Router v7 framework mode action+loader pattern.
+ *   POST  via action  → create user
+ *   PUT   via action  → update user
+ *   DELETE via action → delete user
+ *
+ * The Auth Key NEVER leaves the server.
+ *
+ * Generated by `cometchat add-user-mgmt`.
+ *
+ * SECURITY: this template is unauthenticated by design — add your own
+ * session check before exposing it publicly.
+ */
+import type { ActionFunctionArgs } from "react-router";
+
+const COMETCHAT_APP_ID = process.env.VITE_COMETCHAT_APP_ID!;
+const COMETCHAT_REGION = process.env.VITE_COMETCHAT_REGION!;
+const COMETCHAT_AUTH_KEY = process.env.COMETCHAT_AUTH_KEY!;
+
+const COMETCHAT_API_BASE = `https://${COMETCHAT_APP_ID}.api-${COMETCHAT_REGION}.cometchat.io/v3`;
+
+const baseHeaders = {
+  "Content-Type": "application/json",
+  appid: COMETCHAT_APP_ID,
+  apikey: COMETCHAT_AUTH_KEY,
+};
+
+function jsonResponse(data: unknown, status = 200) {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+function validateUid(uid: unknown): string | null {
+  if (typeof uid !== "string" || uid.length === 0) return "uid is required";
+  if (uid.length > 100) return "uid must be ≤100 characters";
+  if (!/^[a-zA-Z0-9_-]+$/.test(uid)) {
+    return "uid must contain only alphanumeric characters, hyphens, and underscores";
+  }
+  return null;
+}
+
+function validateConfig() {
+  if (!COMETCHAT_APP_ID || !COMETCHAT_REGION || !COMETCHAT_AUTH_KEY) {
+    return jsonResponse({ error: "CometChat credentials not configured on the server" }, 500);
+  }
+  return null;
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const configError = validateConfig();
+  if (configError) return configError;
+
+  const method = request.method.toUpperCase();
+
+  if (method === "POST") {
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return jsonResponse({ error: "Invalid JSON body" }, 400);
+    }
+    const uidError = validateUid(body.uid);
+    if (uidError) return jsonResponse({ error: uidError }, 400);
+    if (!body.name) return jsonResponse({ error: "name is required" }, 400);
+
+    try {
+      const res = await fetch(`${COMETCHAT_API_BASE}/users`, {
+        method: "POST",
+        headers: baseHeaders,
+        body: JSON.stringify({
+          uid: body.uid,
+          name: body.name,
+          ...(body.avatar && { avatar: body.avatar }),
+          ...(body.metadata && { metadata: body.metadata }),
+          ...(body.tags && { tags: body.tags }),
+        }),
+      });
+      if (!res.ok) {
+        const detail = await res.text();
+        return jsonResponse(
+          { error: `CometChat user create failed (${res.status})`, detail },
+          res.status === 409 ? 409 : 502,
+        );
+      }
+      const data = await res.json();
+      return jsonResponse({ user: data.data }, 201);
+    } catch (err) {
+      return jsonResponse(
+        { error: "Create failed", detail: err instanceof Error ? err.message : String(err) },
+        500,
+      );
+    }
+  }
+
+  if (method === "PUT" || method === "PATCH") {
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return jsonResponse({ error: "Invalid JSON body" }, 400);
+    }
+    const uidError = validateUid(body.uid);
+    if (uidError) return jsonResponse({ error: uidError }, 400);
+
+    const updates: Record<string, unknown> = {};
+    if (body.name !== undefined) updates.name = body.name;
+    if (body.avatar !== undefined) updates.avatar = body.avatar;
+    if (body.metadata !== undefined) updates.metadata = body.metadata;
+    if (body.tags !== undefined) updates.tags = body.tags;
+    if (Object.keys(updates).length === 0) {
+      return jsonResponse({ error: "No fields to update" }, 400);
+    }
+
+    try {
+      const res = await fetch(
+        `${COMETCHAT_API_BASE}/users/${encodeURIComponent(body.uid)}`,
+        {
+          method: "PUT",
+          headers: baseHeaders,
+          body: JSON.stringify(updates),
+        },
+      );
+      if (!res.ok) {
+        const detail = await res.text();
+        return jsonResponse(
+          { error: `CometChat user update failed (${res.status})`, detail },
+          502,
+        );
+      }
+      const data = await res.json();
+      return jsonResponse({ user: data.data });
+    } catch (err) {
+      return jsonResponse(
+        { error: "Update failed", detail: err instanceof Error ? err.message : String(err) },
+        500,
+      );
+    }
+  }
+
+  if (method === "DELETE") {
+    const url = new URL(request.url);
+    const uid = url.searchParams.get("uid");
+    const uidError = validateUid(uid);
+    if (uidError) return jsonResponse({ error: uidError }, 400);
+
+    try {
+      const res = await fetch(
+        `${COMETCHAT_API_BASE}/users/${encodeURIComponent(uid as string)}`,
+        {
+          method: "DELETE",
+          headers: baseHeaders,
+          body: JSON.stringify({ permanent: true }),
+        },
+      );
+      if (!res.ok) {
+        const detail = await res.text();
+        return jsonResponse(
+          { error: `CometChat user delete failed (${res.status})`, detail },
+          502,
+        );
+      }
+      return jsonResponse({ deleted: uid });
+    } catch (err) {
+      return jsonResponse(
+        { error: "Delete failed", detail: err instanceof Error ? err.message : String(err) },
+        500,
+      );
+    }
+  }
+
+  return jsonResponse({ error: `Method ${method} not allowed` }, 405);
+}

package/dist/registry/v6/user-mgmt/react-router.template.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 1,
+  "framework": "react-router",
+  "sdk_compatibility": ">=6.0.0 <7.0.0",
+  "default_placement": "dedicated-route",
+  "deps": [],
+  "env_vars": [
+    {
+      "name": "COMETCHAT_AUTH_KEY",
+      "required": true,
+      "secret": true,
+      "description": "Server-side only Auth Key (no VITE_ prefix). Used by the user management endpoints."
+    }
+  ],
+  "files": [
+    {
+      "path": "app/routes/api.cometchat-user.ts",
+      "action": "create",
+      "template_ref": "api.cometchat-user.ts.tpl",
+      "owned": true
+    },
+    {
+      "path": "app/routes.ts",
+      "action": "patch",
+      "patch_mode": "insert-before",
+      "anchor": "] satisfies RouteConfig",
+      "patch_content": "  route(\"api/cometchat-user\", \"routes/api.cometchat-user.ts\"),\n",
+      "skip_if_exists": "routes/api.cometchat-user.ts"
+    }
+  ],
+  "verify_rules": [],
+  "next_steps": [
+    "1. Endpoint at /api/cometchat-user supports POST (create), PATCH (update), DELETE.",
+    "2. Add COMETCHAT_AUTH_KEY (no VITE_ prefix) to .env. The auth key stays server-only.",
+    "3. Wire it into your sign-up flow — when an app user is created, call POST /api/cometchat-user with { uid, name, ... }.",
+    "4. SECURITY: this template is unauthenticated. Add session checks before deploying."
+  ]
+}

package/dist/registry/v6/widget/astro/CometChatWidget.css.tpl

@@ -0,0 +1,105 @@
+/**
+ * CometChatWidget styles — floating button + drawer.
+ *
+ * Edit the .cometchat-widget-button selector to change the button position
+ * (default: bottom-right). Edit the .cometchat-widget-drawer selector to
+ * change the drawer size + position.
+ */
+
+.cometchat-widget-button {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: var(--cometchat-primary-color, #6852D6);
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.cometchat-widget-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.cometchat-widget-button:active {
+  transform: scale(0.98);
+}
+
+.cometchat-widget-drawer {
+  position: fixed;
+  bottom: 96px;
+  right: 24px;
+  width: 720px;
+  max-width: calc(100vw - 48px);
+  height: 600px;
+  max-height: calc(100vh - 120px);
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
+  z-index: 9998;
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+}
+
+.cometchat-widget-conversations {
+  width: 280px;
+  border-right: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-widget-conversations > .cometchat {
+  overflow: hidden;
+}
+
+.cometchat-widget-messages {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cometchat-widget-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cometchat-background-color-03, #f5f5f5);
+  color: var(--cometchat-text-color-secondary, #727272);
+  font: var(--cometchat-font-body-regular, 400 14px Roboto);
+  padding: 16px;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  .cometchat-widget-drawer {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+    width: auto;
+    height: calc(100vh - 100px);
+    flex-direction: column;
+  }
+  .cometchat-widget-conversations {
+    width: 100%;
+    height: 200px;
+    border-right: none;
+    border-bottom: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+  }
+  .cometchat-widget-button {
+    bottom: 16px;
+    right: 16px;
+  }
+}

package/dist/registry/v6/widget/astro/CometChatWidget.tsx.tpl

@@ -0,0 +1,88 @@
+/**
+ * CometChatWidget — floating chat overlay (Astro React island).
+ *
+ * Render this from any .astro file with `client:only="react"` so Astro
+ * skips SSR entirely:
+ *   import CometChatWidget from "../cometchat/CometChatWidget";
+ *   <CometChatWidget client:only="react" />
+ *
+ * Assumes CometChatUIKit.init() and CometChatUIKit.login() have already
+ * been called by your existing ChatApp island. The widget does NOT
+ * initialize CometChat — it just renders the existing logged-in user's
+ * chat. Mount the widget on a page that also mounts the ChatApp island,
+ * OR move init/login into a shared location.
+ */
+import { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector";
+import "./CometChatWidget.css";
+
+export default function CometChatWidget() {
+  const [open, setOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>();
+  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>();
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="cometchat-widget-button"
+        onClick={() => setOpen((v) => !v)}
+        aria-label={open ? "Close chat" : "Open chat"}
+      >
+        {open ? "✕" : "💬"}
+      </button>
+
+      {open && (
+        <div className="cometchat-widget-drawer" role="dialog" aria-label="Chat">
+          <div className="cometchat-widget-conversations">
+            <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="cometchat-widget-messages">
+              {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="cometchat-widget-empty">
+              Select a conversation to start chatting
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/dist/registry/v6/widget/astro.template.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 1,
+  "framework": "astro",
+  "sdk_compatibility": ">=6.0.0 <7.0.0",
+  "default_placement": "spa-root",
+  "deps": [],
+  "env_vars": [],
+  "files": [
+    {
+      "path": "src/cometchat/CometChatWidget.tsx",
+      "action": "create",
+      "template_ref": "CometChatWidget.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/CometChatWidget.css",
+      "action": "create",
+      "template_ref": "CometChatWidget.css.tpl",
+      "owned": true
+    }
+  ],
+  "verify_rules": [],
+  "next_steps": [
+    "1. The widget component is now at src/cometchat/CometChatWidget.tsx (a React island).",
+    "2. Render it in any .astro layout or page using `client:only=\"react\"` so Astro skips SSR entirely:",
+    "     ---",
+    "     import CometChatWidget from \"../cometchat/CometChatWidget\";",
+    "     ---",
+    "     <CometChatWidget client:only=\"react\" />",
+    "3. The widget reuses your existing CometChat init/login flow from your existing ChatApp island.",
+    "   You do NOT need to call init/login again inside the widget.",
+    "4. Important: the widget must live in the same page where init/login runs, OR the page must mount your existing ChatApp island first. Otherwise the SDK won't be initialized when the widget tries to render.",
+    "5. To customize position/size, edit the .cometchat-widget-button class in CometChatWidget.css.",
+    "6. The button appears in the bottom-right corner. Click it to open a drawer with the conversation list + message thread."
+  ]
+}

package/dist/registry/v6/widget/nextjs/CometChatWidget.css.tpl

@@ -0,0 +1,105 @@
+/**
+ * CometChatWidget styles — floating button + drawer.
+ *
+ * Edit the .cometchat-widget-button selector to change the button position
+ * (default: bottom-right). Edit the .cometchat-widget-drawer selector to
+ * change the drawer size + position.
+ */
+
+.cometchat-widget-button {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: var(--cometchat-primary-color, #6852D6);
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.cometchat-widget-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.cometchat-widget-button:active {
+  transform: scale(0.98);
+}
+
+.cometchat-widget-drawer {
+  position: fixed;
+  bottom: 96px;
+  right: 24px;
+  width: 720px;
+  max-width: calc(100vw - 48px);
+  height: 600px;
+  max-height: calc(100vh - 120px);
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
+  z-index: 9998;
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+}
+
+.cometchat-widget-conversations {
+  width: 280px;
+  border-right: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-widget-conversations > .cometchat {
+  overflow: hidden;
+}
+
+.cometchat-widget-messages {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cometchat-widget-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cometchat-background-color-03, #f5f5f5);
+  color: var(--cometchat-text-color-secondary, #727272);
+  font: var(--cometchat-font-body-regular, 400 14px Roboto);
+  padding: 16px;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  .cometchat-widget-drawer {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+    width: auto;
+    height: calc(100vh - 100px);
+    flex-direction: column;
+  }
+  .cometchat-widget-conversations {
+    width: 100%;
+    height: 200px;
+    border-right: none;
+    border-bottom: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+  }
+  .cometchat-widget-button {
+    bottom: 16px;
+    right: 16px;
+  }
+}

package/dist/registry/v6/widget/nextjs/CometChatWidget.tsx.tpl

@@ -0,0 +1,88 @@
+"use client";
+/**
+ * CometChatWidget — floating chat overlay (Next.js App Router).
+ *
+ * Marked "use client" because it uses React state and the CometChat SDK
+ * (which talks to the browser). Render it from any client component or
+ * import it from a server component via:
+ *   const CometChatWidget = dynamic(() => import("./CometChatWidget"), { ssr: false });
+ *
+ * Assumes CometChatUIKit.init() and CometChatUIKit.login() have already
+ * been called by the existing CometChatNoSSR.tsx integration. The widget
+ * does NOT initialize CometChat — it just renders the existing logged-in
+ * user's chat.
+ */
+import { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector";
+import "./CometChatWidget.css";
+
+export default function CometChatWidget() {
+  const [open, setOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>();
+  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>();
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="cometchat-widget-button"
+        onClick={() => setOpen((v) => !v)}
+        aria-label={open ? "Close chat" : "Open chat"}
+      >
+        {open ? "✕" : "💬"}
+      </button>
+
+      {open && (
+        <div className="cometchat-widget-drawer" role="dialog" aria-label="Chat">
+          <div className="cometchat-widget-conversations">
+            <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="cometchat-widget-messages">
+              {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="cometchat-widget-empty">
+              Select a conversation to start chatting
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/dist/registry/v6/widget/nextjs.template.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 1,
+  "framework": "nextjs",
+  "sdk_compatibility": ">=6.0.0 <7.0.0",
+  "default_placement": "spa-root",
+  "deps": [],
+  "env_vars": [],
+  "files": [
+    {
+      "path": "src/app/cometchat/CometChatWidget.tsx",
+      "action": "create",
+      "template_ref": "CometChatWidget.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/cometchat/CometChatWidget.css",
+      "action": "create",
+      "template_ref": "CometChatWidget.css.tpl",
+      "owned": true
+    }
+  ],
+  "verify_rules": [],
+  "next_steps": [
+    "1. The widget component is now at src/app/cometchat/CometChatWidget.tsx — it has a `\"use client\"` directive so it can use React state + the CometChat SDK in the browser.",
+    "2. Render it in any client component or layout. Two options:",
+    "   A) Direct import in a client component:",
+    "        import CometChatWidget from \"./cometchat/CometChatWidget\";",
+    "        <CometChatWidget />",
+    "   B) Render from a server component / layout via dynamic({ssr:false}):",
+    "        import dynamic from \"next/dynamic\";",
+    "        const CometChatWidget = dynamic(() => import(\"./cometchat/CometChatWidget\"), { ssr: false });",
+    "        <CometChatWidget />",
+    "3. The widget reuses your existing CometChat init/login flow (CometChatNoSSR.tsx).",
+    "   You do NOT need to call init/login again inside the widget.",
+    "4. To customize position/size, edit the .cometchat-widget-button class in CometChatWidget.css.",
+    "5. The fixed-position button appears in the bottom-right corner. Click it to open the conversation list + message thread drawer."
+  ]
+}