@cometchat/skills-cli 2.0.0

package/dist/registry/v6/experiences/3-tab-based/templates/astro/ChatApp.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/3-tab-based/templates/astro/ChatApp.tsx.tpl

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatTabs, type CometChatTab } from "./CometChatTabs";
+// 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 [activeTab, setActiveTab] = useState<CometChatTab>("chats");
+  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)));
+  }, []);
+
+  const handleSelectorItemClicked = (
+    activeItem: CometChat.Conversation | CometChat.User | CometChat.Group,
+  ) => {
+    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);
+    }
+  };
+
+  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">
+        <CometChatTabs
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          onItemClick={handleSelectorItemClicked}
+        />
+      </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/3-tab-based/templates/astro/CometChatTabs.css.tpl

@@ -0,0 +1,43 @@
+.cometchat-tabs {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-tabs-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-tabs-content > .cometchat {
+  flex: 1;
+  overflow: hidden;
+}
+
+.cometchat-tabs-bar {
+  display: flex;
+  border-top: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+  background: var(--cometchat-background-color-01, #ffffff);
+}
+
+.cometchat-tabs-bar-tab {
+  flex: 1;
+  padding: 12px 8px;
+  border: none;
+  background: transparent;
+  font: var(--cometchat-font-body-regular, 400 14px Roboto);
+  color: var(--cometchat-text-color-secondary, #727272);
+  cursor: pointer;
+}
+
+.cometchat-tabs-bar-tab.active {
+  color: var(--cometchat-primary-color, #6852d6);
+  font-weight: 600;
+}
+
+.cometchat-tabs-bar-tab:hover {
+  background: var(--cometchat-background-color-02, #f8f8f8);
+}

package/dist/registry/v6/experiences/3-tab-based/templates/astro/CometChatTabs.tsx.tpl

@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+  CometChatCallLogs,
+  CometChatConversations,
+  CometChatGroups,
+  CometChatUIKitLoginListener,
+  CometChatUsers,
+} from "@cometchat/chat-uikit-react";
+import "./CometChatTabs.css";
+
+export type CometChatTab = "chats" | "calls" | "users" | "groups";
+
+interface CometChatTabsProps {
+  activeTab: CometChatTab;
+  onTabChange: (tab: CometChatTab) => void;
+  onItemClick: (
+    item: CometChat.Conversation | CometChat.User | CometChat.Group,
+  ) => void;
+}
+
+const TABS: { id: CometChatTab; label: string }[] = [
+  { id: "chats", label: "Chats" },
+  { id: "calls", label: "Calls" },
+  { id: "users", label: "Users" },
+  { id: "groups", label: "Groups" },
+];
+
+export const CometChatTabs = ({
+  activeTab,
+  onTabChange,
+  onItemClick,
+}: CometChatTabsProps) => {
+  const [loggedInUser, setLoggedInUser] = useState<CometChat.User | null>(null);
+
+  useEffect(() => {
+    setLoggedInUser(CometChatUIKitLoginListener.getLoggedInUser());
+  }, []);
+
+  if (!loggedInUser) return null;
+
+  return (
+    <div className="cometchat-tabs">
+      <div className="cometchat-tabs-content">
+        {activeTab === "chats" && (
+          <CometChatConversations
+            onItemClick={(c) => onItemClick(c)}
+          />
+        )}
+        {activeTab === "calls" && <CometChatCallLogs />}
+        {activeTab === "users" && (
+          <CometChatUsers onItemClick={(u) => onItemClick(u)} />
+        )}
+        {activeTab === "groups" && (
+          <CometChatGroups onItemClick={(g) => onItemClick(g)} />
+        )}
+      </div>
+      <nav className="cometchat-tabs-bar">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={`cometchat-tabs-bar-tab${activeTab === tab.id ? " active" : ""}`}
+            onClick={() => onTabChange(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+};

package/dist/registry/v6/experiences/3-tab-based/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/3-tab-based/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/3-tab-based/templates/nextjs/CometChatNoSSR.tsx.tpl

@@ -0,0 +1,93 @@
+"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 { CometChatTabs, type CometChatTab } from "./CometChatTabs";
+// 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 [activeTab, setActiveTab] = useState<CometChatTab>("chats");
+  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)));
+  }, []);
+
+  const handleSelectorItemClicked = (
+    activeItem: CometChat.Conversation | CometChat.User | CometChat.Group,
+  ) => {
+    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);
+    }
+  };
+
+  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">
+        <CometChatTabs
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          onItemClick={handleSelectorItemClicked}
+        />
+      </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/3-tab-based/templates/nextjs/CometChatTabs.css.tpl

@@ -0,0 +1,43 @@
+.cometchat-tabs {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-tabs-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-tabs-content > .cometchat {
+  flex: 1;
+  overflow: hidden;
+}
+
+.cometchat-tabs-bar {
+  display: flex;
+  border-top: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+  background: var(--cometchat-background-color-01, #ffffff);
+}
+
+.cometchat-tabs-bar-tab {
+  flex: 1;
+  padding: 12px 8px;
+  border: none;
+  background: transparent;
+  font: var(--cometchat-font-body-regular, 400 14px Roboto);
+  color: var(--cometchat-text-color-secondary, #727272);
+  cursor: pointer;
+}
+
+.cometchat-tabs-bar-tab.active {
+  color: var(--cometchat-primary-color, #6852d6);
+  font-weight: 600;
+}
+
+.cometchat-tabs-bar-tab:hover {
+  background: var(--cometchat-background-color-02, #f8f8f8);
+}

package/dist/registry/v6/experiences/3-tab-based/templates/nextjs/CometChatTabs.tsx.tpl

@@ -0,0 +1,73 @@
+"use client";
+import { useEffect, useState } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+  CometChatCallLogs,
+  CometChatConversations,
+  CometChatGroups,
+  CometChatUIKitLoginListener,
+  CometChatUsers,
+} from "@cometchat/chat-uikit-react";
+import "./CometChatTabs.css";
+
+export type CometChatTab = "chats" | "calls" | "users" | "groups";
+
+interface CometChatTabsProps {
+  activeTab: CometChatTab;
+  onTabChange: (tab: CometChatTab) => void;
+  onItemClick: (
+    item: CometChat.Conversation | CometChat.User | CometChat.Group,
+  ) => void;
+}
+
+const TABS: { id: CometChatTab; label: string }[] = [
+  { id: "chats", label: "Chats" },
+  { id: "calls", label: "Calls" },
+  { id: "users", label: "Users" },
+  { id: "groups", label: "Groups" },
+];
+
+export const CometChatTabs = ({
+  activeTab,
+  onTabChange,
+  onItemClick,
+}: CometChatTabsProps) => {
+  const [loggedInUser, setLoggedInUser] = useState<CometChat.User | null>(null);
+
+  useEffect(() => {
+    setLoggedInUser(CometChatUIKitLoginListener.getLoggedInUser());
+  }, []);
+
+  if (!loggedInUser) return null;
+
+  return (
+    <div className="cometchat-tabs">
+      <div className="cometchat-tabs-content">
+        {activeTab === "chats" && (
+          <CometChatConversations
+            onItemClick={(c) => onItemClick(c)}
+          />
+        )}
+        {activeTab === "calls" && <CometChatCallLogs />}
+        {activeTab === "users" && (
+          <CometChatUsers onItemClick={(u) => onItemClick(u)} />
+        )}
+        {activeTab === "groups" && (
+          <CometChatGroups onItemClick={(g) => onItemClick(g)} />
+        )}
+      </div>
+      <nav className="cometchat-tabs-bar">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={`cometchat-tabs-bar-tab${activeTab === tab.id ? " active" : ""}`}
+            onClick={() => onTabChange(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+};

package/dist/registry/v6/experiences/3-tab-based/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/3-tab-based/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/3-tab-based/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/3-tab-based/templates/react-router/CometChatNoSSR.tsx.tpl

@@ -0,0 +1,94 @@
+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 { CometChatTabs, type CometChatTab } from "./CometChatTabs";
+// 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 [activeTab, setActiveTab] = useState<CometChatTab>("chats");
+  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)));
+  }, []);
+
+  const handleSelectorItemClicked = (
+    activeItem: CometChat.Conversation | CometChat.User | CometChat.Group,
+  ) => {
+    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);
+    }
+  };
+
+  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">
+        <CometChatTabs
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          onItemClick={handleSelectorItemClicked}
+        />
+      </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;