@cometchat/skills-cli 2.4.1 → 3.0.0

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

@@ -1,38 +0,0 @@
-{
-  "$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

@@ -1,105 +0,0 @@
-/**
- * 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

@@ -1,88 +0,0 @@
-"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

@@ -1,40 +0,0 @@
-{
-  "$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."
-  ]
-}

package/dist/registry/v6/widget/react-router/CometChatWidget.css.tpl

@@ -1,105 +0,0 @@
-/**
- * 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

@@ -1,98 +0,0 @@
-/**
- * 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

@@ -1,36 +0,0 @@
-{
-  "$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

@@ -1,105 +0,0 @@
-/**
- * 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;
-  }
-}