@cometchat/skills-cli 2.4.1 → 3.0.0

package/dist/registry/v6/experiences/3-tab-based/templates/reactjs-dedicated-route/ChatPage.tsx.tpl

@@ -1,84 +0,0 @@
-import { lazy, Suspense, useEffect, useState } from "react";
-import {
-  CometChatUIKit,
-  UIKitSettingsBuilder,
-} from "@cometchat/chat-uikit-react";
-
-const CometChatMessenger = lazy(
-  () => import("../cometchat/CometChatMessenger")
-);
-
-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();
-
-let initPromise: Promise<void> | null = null;
-function ensureInitialized(): Promise<void> {
-  if (initPromise) return initPromise;
-  initPromise = CometChatUIKit.init(settings)
-    .then(() => CometChatUIKit.getLoggedinUser())
-    .then((user) => {
-      if (user) return undefined;
-      return CometChatUIKit.login("{{LOGIN_UID}}").then(() => undefined);
-    })
-    .then(() => undefined);
-  return initPromise;
-}
-
-export default function ChatPage() {
-  const [ready, setReady] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    ensureInitialized()
-      .then(() => {
-        if (!cancelled) setReady(true);
-      })
-      .catch((e: unknown) => {
-        if (!cancelled) setError(String(e));
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  if (error) {
-    return (
-      <div
-        className="cometchat-page"
-        style={{
-          color: "red",
-          padding: 16,
-          fontFamily: "monospace",
-        }}
-      >
-        CometChat failed to load: {error}
-      </div>
-    );
-  }
-  if (!ready) {
-    return (
-      <div className="cometchat-page" style={{ padding: 16 }}>
-        Loading chat…
-      </div>
-    );
-  }
-
-  return (
-    <div className="cometchat-page">
-      <Suspense fallback={<div style={{ padding: 16 }}>Loading chat…</div>}>
-        <CometChatMessenger />
-      </Suspense>
-    </div>
-  );
-}

package/dist/registry/v6/experiences/3-tab-based/templates/reactjs-dedicated-route/CometChatMessenger.css.tpl

@@ -1,11 +0,0 @@
-/* Scoped to .cometchat-page (root div in ChatPage.tsx). The tabbed messenger
- * needs resolved height on every ancestor — see the exp 1 dedicated-route CSS
- * for the full rationale.
- */
-.cometchat-page { 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; flex-shrink: 0; }
-.conversations-wrapper > .cometchat { overflow: hidden; }
-.messages-wrapper { flex: 1; min-width: 0; 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-dedicated-route/CometChatMessenger.tsx.tpl

@@ -1,61 +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 "./CometChatTabs";
-import "./CometChatMessenger.css";
-
-export default function CometChatMessenger() {
-  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>
-  );
-}

package/dist/registry/v6/experiences/3-tab-based/templates/reactjs-dedicated-route/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/reactjs-dedicated-route/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>
-  );
-};