@cometchat/skills-cli 2.0.0

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

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

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

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

@@ -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/reactjs/main.tsx.tpl

@@ -0,0 +1,46 @@
+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>,
+  )
+}