@cometchat/skills-cli 2.0.0

package/dist/registry/v6/experiences/1-conversation-list/templates/astro/ChatApp.tsx.tpl

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector";
+// IMPORTANT: css-variables.css MUST be imported here (inside the React island)
+// — global stylesheets imported in .astro files do not apply to client:only islands.
+import "@cometchat/chat-uikit-react/css-variables.css";
+import "./ChatApp.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 UID = "{{LOGIN_UID}}";
+
+export default function ChatApp() {
+  const [user, setUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>();
+  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>();
+
+  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(UID)
+            .then(setUser)
+            .catch((e: unknown) => setError(String(e)));
+        } else {
+          setUser(u);
+        }
+      });
+    }).catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  if (error) return <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>{error}</div>;
+  if (!user) return null;
+
+  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/astro/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/1-conversation-list/templates/astro/chat.astro.tpl

@@ -0,0 +1,17 @@
+---
+import ChatApp from "../cometchat/ChatApp.tsx";
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Chat</title>
+    <style>
+      html, body { margin: 0; padding: 0; height: 100%; }
+    </style>
+  </head>
+  <body>
+    <ChatApp client:only="react" />
+  </body>
+</html>

package/dist/registry/v6/experiences/1-conversation-list/templates/nextjs/CometChatNoSSR.css.tpl

@@ -0,0 +1,39 @@
+.conversations-with-messages {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+.conversations-wrapper {
+  height: 100%;
+  width: 480px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.conversations-wrapper > .cometchat {
+  overflow: hidden;
+}
+
+.messages-wrapper {
+  width: calc(100% - 480px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.empty-conversation {
+  height: 100%;
+  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/1-conversation-list/templates/nextjs/CometChatNoSSR.tsx.tpl

@@ -0,0 +1,86 @@
+"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";
+import { CometChatSelector } from "./CometChatSelector";
+// 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 UID = "{{LOGIN_UID}}";
+
+const CometChatNoSSR: React.FC = () => {
+  const [user, setUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>();
+  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>();
+
+  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(UID)
+            .then(setUser)
+            .catch((e: unknown) => setError(String(e)));
+        } else {
+          setUser(u);
+        }
+      });
+    }).catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  if (error) return <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>{error}</div>;
+  if (!user) return null;
+
+  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>
+  );
+};
+export default CometChatNoSSR;

package/dist/registry/v6/experiences/1-conversation-list/templates/nextjs/CometChatSelector.tsx.tpl

@@ -0,0 +1,41 @@
+"use client";
+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/1-conversation-list/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/1-conversation-list/templates/nextjs-pages/CometChatNoSSR.css.tpl

@@ -0,0 +1,39 @@
+.conversations-with-messages {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+.conversations-wrapper {
+  height: 100%;
+  width: 480px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.conversations-wrapper > .cometchat {
+  overflow: hidden;
+}
+
+.messages-wrapper {
+  width: calc(100% - 480px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.empty-conversation {
+  height: 100%;
+  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/1-conversation-list/templates/nextjs-pages/CometChatNoSSR.tsx.tpl

@@ -0,0 +1,88 @@
+// Pages Router has no RSC boundary — no `"use client"` directive needed.
+// This file is rendered ONLY on the client because src/pages/chat.tsx
+// imports it via next/dynamic with { ssr: false }.
+import React, { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector";
+// css-variables.css is imported in src/styles/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 UID = "{{LOGIN_UID}}";
+
+const CometChatNoSSR: React.FC = () => {
+  const [user, setUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>();
+  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>();
+
+  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(UID)
+            .then(setUser)
+            .catch((e: unknown) => setError(String(e)));
+        } else {
+          setUser(u);
+        }
+      });
+    }).catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  if (error) return <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>{error}</div>;
+  if (!user) return null;
+
+  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>
+  );
+};
+export default CometChatNoSSR;

package/dist/registry/v6/experiences/1-conversation-list/templates/nextjs-pages/CometChatSelector.tsx.tpl

@@ -0,0 +1,41 @@
+"use client";
+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/1-conversation-list/templates/nextjs-pages/chat-page.tsx.tpl

@@ -0,0 +1,15 @@
+// Pages Router auto-routes this file to /chat. The CometChat SDK uses
+// browser-only globals (WebSocket, IndexedDB, etc.) so we MUST disable
+// SSR for the chat component via next/dynamic with { ssr: false }.
+// This mirrors the App Router pattern where CometChatNoSSR has a
+// `"use client"` directive — Pages Router achieves the same isolation
+// at the import site instead of with a directive.
+import dynamic from "next/dynamic";
+
+const CometChatNoSSR = dynamic(() => import("../cometchat/CometChatNoSSR"), {
+  ssr: false,
+});
+
+export default function ChatPage() {
+  return <CometChatNoSSR />;
+}

package/dist/registry/v6/experiences/1-conversation-list/templates/react-router/CometChat-route.tsx.tpl

@@ -0,0 +1,22 @@
+import React, { lazy, Suspense, useEffect, useState } from "react";
+
+// Lazy-load the CometChat component so it never executes during SSR
+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/1-conversation-list/templates/react-router/CometChatNoSSR.css.tpl

@@ -0,0 +1,39 @@
+.conversations-with-messages {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+.conversations-wrapper {
+  height: 100%;
+  width: 480px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.conversations-wrapper > .cometchat {
+  overflow: hidden;
+}
+
+.messages-wrapper {
+  width: calc(100% - 480px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.empty-conversation {
+  height: 100%;
+  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/1-conversation-list/templates/react-router/CometChatNoSSR.tsx.tpl

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector";
+// 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 UID = "{{LOGIN_UID}}";
+
+const CometChatNoSSR: React.FC = () => {
+  const [user, setUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>();
+  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>();
+
+  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(UID)
+            .then(setUser)
+            .catch((e: unknown) => setError(String(e)));
+        } else {
+          setUser(u);
+        }
+      });
+    }).catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  if (error) return <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>{error}</div>;
+  if (!user) return null;
+
+  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>
+  );
+};
+export default CometChatNoSSR;