@cometchat/skills-cli 2.0.0

package/dist/registry/v6/widget/react-router/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/react-router/CometChatWidget.tsx.tpl

@@ -0,0 +1,98 @@
+/**
+ * CometChatWidget — floating chat overlay (React Router v7 framework mode).
+ *
+ * React Router v7 SSRs by default. The CometChat SDK uses browser globals
+ * (WebSocket, IndexedDB, etc.) that don't exist on the server, so the
+ * widget defers its real render until after hydration via a mounted check.
+ *
+ * Assumes CometChatUIKit.init() and CometChatUIKit.login() have already
+ * been called by the existing chat route. The widget does NOT initialize
+ * CometChat — it just renders the existing logged-in user's chat.
+ *
+ * To use:
+ *   import CometChatWidget from "./cometchat/CometChatWidget";
+ *   // ...
+ *   <CometChatWidget />
+ */
+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() {
+  // SSR-safe: render nothing on the server, mount on the client.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  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]);
+
+  if (!mounted) return null;
+
+  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/react-router.template.json

@@ -0,0 +1,36 @@
+{
+  "$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": "spa-root",
+  "deps": [],
+  "env_vars": [],
+  "files": [
+    {
+      "path": "app/cometchat/CometChatWidget.tsx",
+      "action": "create",
+      "template_ref": "CometChatWidget.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "app/cometchat/CometChatWidget.css",
+      "action": "create",
+      "template_ref": "CometChatWidget.css.tpl",
+      "owned": true
+    }
+  ],
+  "verify_rules": [],
+  "next_steps": [
+    "1. The widget component is now at app/cometchat/CometChatWidget.tsx.",
+    "2. It uses an internal mounted-check (useState + useEffect) so React Router v7's SSR pass renders nothing on the server, then mounts the real widget after hydration.",
+    "3. Render it in your root layout (app/root.tsx) or any route component:",
+    "     import CometChatWidget from \"./cometchat/CometChatWidget\";",
+    "     // Then render <CometChatWidget /> anywhere in the JSX tree.",
+    "4. The widget reuses your existing CometChat init/login flow from the chat route.",
+    "   You do NOT need to call init/login again inside the widget.",
+    "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/reactjs/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/reactjs/CometChatWidget.tsx.tpl

@@ -0,0 +1,89 @@
+/**
+ * CometChatWidget — floating chat overlay.
+ *
+ * Renders a fixed-position button in the bottom-right corner. Click it to
+ * open a drawer containing the CometChat conversation list + message view.
+ *
+ * Assumes CometChatUIKit.init() and CometChatUIKit.login() have already been
+ * called elsewhere (e.g. in src/main.tsx). The widget just renders the
+ * existing logged-in user's chat — it does NOT initialize CometChat.
+ *
+ * To use:
+ *   import CometChatWidget from "./cometchat/CometChatWidget";
+ *   // ...
+ *   <CometChatWidget />
+ */
+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/reactjs.template.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 1,
+  "framework": "reactjs",
+  "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.",
+    "2. Import and render it in your root layout (e.g. src/App.tsx):",
+    "     import CometChatWidget from './cometchat/CometChatWidget';",
+    "     // Then render <CometChatWidget /> anywhere in your component tree.",
+    "3. The widget is a fixed-position floating button in the bottom-right corner.",
+    "   Click it to open a drawer with the conversation list + message thread.",
+    "4. To customize position, edit the .cometchat-widget-button class in CometChatWidget.css.",
+    "5. The widget reuses your existing CometChat init/login flow from main.tsx —",
+    "   you do NOT need to call init/login again inside the widget."
+  ]
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@cometchat/skills-cli",
+  "version": "2.0.0",
+  "description": "CLI for the CometChat skills v2 architecture — detect, view, apply, verify CometChat integrations in React projects.",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "cometchat": "./bin/cometchat.mjs"
+  },
+  "files": [
+    "bin/",
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "tsx src/index.ts",
+    "test": "node --test --import tsx test/*.test.ts",
+    "test:watch": "node --test --watch --import tsx test/*.test.ts",
+    "build": "rm -rf dist && esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.js --packages=external && node -e \"require('node:fs').cpSync(require('node:path').resolve('../registry/v6'),require('node:path').resolve('dist/registry/v6'),{recursive:true});require('node:fs').cpSync(require('node:path').resolve('../registry/schemas'),require('node:path').resolve('dist/registry/schemas'),{recursive:true});console.log('  bundled registry → dist/registry/');\"",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "esbuild": "^0.24.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "cometchat",
+    "chat",
+    "react",
+    "nextjs",
+    "vite",
+    "astro",
+    "react-router",
+    "ai",
+    "agent",
+    "skills",
+    "cli"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cometchat-team/cometchat-skills.git",
+    "directory": "packages/cli"
+  }
+}