@cometchat/skills-cli 2.4.0 → 3.0.0

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

@@ -1,43 +0,0 @@
-.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

@@ -1,73 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import type { 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

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

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

@@ -1,39 +0,0 @@
-.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

@@ -1,94 +0,0 @@
-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;

package/dist/registry/v6/experiences/3-tab-based/templates/react-router/CometChatTabs.css.tpl

@@ -1,43 +0,0 @@
-.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/react-router/CometChatTabs.tsx.tpl

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-import type { 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/reactjs/App.css.tpl

@@ -1,7 +0,0 @@
-#root { width: 100vw; height: 100vh; }
-.conversations-with-messages { display: flex; height: 100%; width: 100%; }
-.conversations-wrapper { height: 100vh; width: 480px; overflow: hidden; display: flex; flex-direction: column; }
-.conversations-wrapper > .cometchat { overflow: hidden; }
-.messages-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; }
-.empty-conversation { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; background: var(--cometchat-background-color-03, #F5F5F5); 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/reactjs/App.tsx.tpl

@@ -1,62 +0,0 @@
-import { useState } from "react";
-import {
-  CometChatMessageComposer,
-  CometChatMessageHeader,
-  CometChatMessageList,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatTabs, type CometChatTab } from "./cometchat/CometChatTabs";
-import "./App.css";
-
-function App() {
-  const [activeTab, setActiveTab] = useState<CometChatTab>("chats");
-  const [selectedUser, setSelectedUser] = useState<
-    CometChat.User | undefined
-  >();
-  const [selectedGroup, setSelectedGroup] = useState<
-    CometChat.Group | undefined
-  >();
-
-  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);
-    }
-  };
-
-  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 App;

package/dist/registry/v6/experiences/3-tab-based/templates/reactjs/CometChatTabs.css.tpl

@@ -1,43 +0,0 @@
-.cometchat-tabs {
-  height: 100vh;
-  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/reactjs/CometChatTabs.tsx.tpl

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-import type { 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/reactjs/main.tsx.tpl

@@ -1,46 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-react'
-import './index.css'
-import App from './App.tsx'
-
-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 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((user) => {
-      if (!user) {
-        CometChatUIKit.login('{{LOGIN_UID}}')
-          .then(() => mount())
-          .catch((e: unknown) => mountError(String(e)))
-      } else {
-        mount()
-      }
-    })
-  })
-  .catch((e: unknown) => mountError(String(e)))
-
-function mount() {
-  createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-      <App />
-    </StrictMode>,
-  )
-}
-
-function mountError(message: string) {
-  createRoot(document.getElementById('root')!).render(
-    <div style={{ color: 'red', padding: 16, fontFamily: 'monospace' }}>{message}</div>,
-  )
-}