@cometchat/skills-cli 2.4.0 → 3.0.0

package/dist/registry/v6/experiences/1-conversation-list/react-router.template.json

@@ -1,102 +0,0 @@
-{
-  "$schema": "../../../schemas/template.schema.json",
-  "version": "1.0.0",
-  "experience_id": 1,
-  "framework": "react-router",
-  "sdk_compatibility": ">=6.0.0 <7.0.0",
-  "default_placement": "dedicated-route",
-  "deps": [
-    {
-      "name": "@cometchat/chat-uikit-react",
-      "version": "^6"
-    },
-    {
-      "name": "@cometchat/chat-sdk-javascript",
-      "version": "^4"
-    }
-  ],
-  "env_vars": [
-    {
-      "name": "{{ENV_PREFIX}}COMETCHAT_APP_ID",
-      "required": true,
-      "description": "CometChat App ID from your dashboard"
-    },
-    {
-      "name": "{{ENV_PREFIX}}COMETCHAT_REGION",
-      "required": true,
-      "description": "CometChat region (us, eu, in, etc.)"
-    },
-    {
-      "name": "{{ENV_PREFIX}}COMETCHAT_AUTH_KEY",
-      "required": true,
-      "secret": true,
-      "description": "CometChat Auth Key (development only)"
-    }
-  ],
-  "files": [
-    {
-      "path": "app/cometchat/CometChatNoSSR.tsx",
-      "action": "create",
-      "template_ref": "CometChatNoSSR.tsx.tpl",
-      "owned": true
-    },
-    {
-      "path": "app/cometchat/CometChatNoSSR.css",
-      "action": "create",
-      "template_ref": "CometChatNoSSR.css.tpl",
-      "owned": true
-    },
-    {
-      "path": "app/cometchat/CometChatSelector.tsx",
-      "action": "create",
-      "template_ref": "CometChatSelector.tsx.tpl",
-      "owned": true
-    },
-    {
-      "path": "app/routes/CometChat.tsx",
-      "action": "create",
-      "template_ref": "CometChat-route.tsx.tpl",
-      "owned": true,
-      "is_entry": true
-    },
-    {
-      "path": "app/routes.ts",
-      "action": "patch",
-      "patch_mode": "replace-section",
-      "anchor": "import { type RouteConfig, index }",
-      "patch_content": "import { type RouteConfig, index, route } from \"@react-router/dev/routes\";",
-      "skip_if_exists": "import { type RouteConfig, index, route }",
-      "embed_skip": true
-    },
-    {
-      "path": "app/routes.ts",
-      "action": "patch",
-      "patch_mode": "insert-before",
-      "anchor": "] satisfies RouteConfig",
-      "patch_content": "  route(\"chat\", \"routes/CometChat.tsx\"),\n",
-      "skip_if_exists": "routes/CometChat.tsx",
-      "embed_skip": true
-    },
-    {
-      "path": "app/app.css",
-      "action": "patch",
-      "patch_mode": "prepend",
-      "patch_content": "@import url(\"@cometchat/chat-uikit-react/css-variables.css\");\n",
-      "skip_if_exists": "@cometchat/chat-uikit-react/css-variables.css"
-    }
-  ],
-  "verify_rules": [
-    "css_variables_imported_once",
-    "init_before_login",
-    "no_user_and_group_same_component",
-    "no_auth_key_in_source",
-    "render_gated_on_login_resolve",
-    "error_ui_visible_on_failure"
-  ],
-  "next_steps": [
-    "Add the chat route to app/routes.ts: route(\"chat\", \"routes/CometChat.tsx\")",
-    "Run `npm run dev` to start the dev server",
-    "Visit http://localhost:5173/chat",
-    "When ready for production, run `cometchat apply --production` to set up server-side auth tokens"
-  ]
-}

package/dist/registry/v6/experiences/1-conversation-list/reactjs-dedicated-route.template.json

@@ -1,81 +0,0 @@
-{
-  "$schema": "../../../schemas/template.schema.json",
-  "version": "1.0.0",
-  "experience_id": 1,
-  "framework": "reactjs-dedicated-route",
-  "sdk_compatibility": ">=6.0.0 <7.0.0",
-  "default_placement": "dedicated-route",
-  "deps": [
-    { "name": "@cometchat/chat-uikit-react", "version": "^6" },
-    { "name": "@cometchat/chat-sdk-javascript", "version": "^4" }
-  ],
-  "env_vars": [
-    { "name": "{{ENV_PREFIX}}COMETCHAT_APP_ID", "required": true, "description": "CometChat App ID from your dashboard" },
-    { "name": "{{ENV_PREFIX}}COMETCHAT_REGION", "required": true, "description": "CometChat region (us, eu, in, etc.)" },
-    { "name": "{{ENV_PREFIX}}COMETCHAT_AUTH_KEY", "required": true, "secret": true, "description": "CometChat Auth Key (development only — use auth tokens in production)" }
-  ],
-  "files": [
-    {
-      "path": "src/cometchat/CometChatSelector.tsx",
-      "action": "create",
-      "template_ref": "CometChatSelector.tsx.tpl",
-      "owned": true
-    },
-    {
-      "path": "src/cometchat/CometChatMessenger.tsx",
-      "action": "create",
-      "template_ref": "CometChatMessenger.tsx.tpl",
-      "owned": true
-    },
-    {
-      "path": "src/cometchat/CometChatMessenger.css",
-      "action": "create",
-      "template_ref": "CometChatMessenger.css.tpl",
-      "owned": true
-    },
-    {
-      "path": "src/pages/ChatPage.tsx",
-      "action": "create",
-      "template_ref": "ChatPage.tsx.tpl",
-      "owned": true,
-      "is_entry": true
-    },
-    {
-      "path": "src/App.tsx",
-      "action": "patch",
-      "patch_mode": "prepend",
-      "patch_content": "import ChatPage from \"./pages/ChatPage\";\n",
-      "skip_if_exists": "./pages/ChatPage",
-      "embed_skip": true
-    },
-    {
-      "path": "src/App.tsx",
-      "action": "patch",
-      "patch_mode": "insert-before",
-      "anchor": "</Routes>",
-      "patch_content": "  <Route path=\"{{PLACEMENT_PATH}}\" element={<ChatPage />} />\n    ",
-      "skip_if_exists": "element={<ChatPage />}",
-      "embed_skip": true
-    },
-    {
-      "path": "src/index.css",
-      "action": "patch",
-      "patch_mode": "prepend",
-      "patch_content": "@import url(\"@cometchat/chat-uikit-react/css-variables.css\");\n",
-      "skip_if_exists": "@cometchat/chat-uikit-react/css-variables.css"
-    }
-  ],
-  "verify_rules": [
-    "css_variables_imported_once",
-    "init_before_login",
-    "no_auth_key_in_source",
-    "render_gated_on_login_resolve",
-    "error_ui_visible_on_failure"
-  ],
-  "next_steps": [
-    "Run `npm run dev` to start the dev server",
-    "Visit http://localhost:5173{{PLACEMENT_PATH}}",
-    "Click a conversation in the left panel to open it",
-    "If the route didn't wire up automatically (your App.tsx layout is non-standard), add: <Route path=\"{{PLACEMENT_PATH}}\" element={<ChatPage />} /> inside your existing <Routes> block and import ChatPage from ./pages/ChatPage"
-  ]
-}

package/dist/registry/v6/experiences/1-conversation-list/reactjs.template.json

@@ -1,86 +0,0 @@
-{
-  "$schema": "../../../schemas/template.schema.json",
-  "version": "1.0.0",
-  "experience_id": 1,
-  "framework": "reactjs",
-  "sdk_compatibility": ">=6.0.0 <7.0.0",
-  "default_placement": "spa-root",
-  "deps": [
-    {
-      "name": "@cometchat/chat-uikit-react",
-      "version": "^6"
-    },
-    {
-      "name": "@cometchat/chat-sdk-javascript",
-      "version": "^4"
-    }
-  ],
-  "env_vars": [
-    {
-      "name": "{{ENV_PREFIX}}COMETCHAT_APP_ID",
-      "required": true,
-      "description": "CometChat App ID from your dashboard"
-    },
-    {
-      "name": "{{ENV_PREFIX}}COMETCHAT_REGION",
-      "required": true,
-      "description": "CometChat region (us, eu, in, etc.)"
-    },
-    {
-      "name": "{{ENV_PREFIX}}COMETCHAT_AUTH_KEY",
-      "required": true,
-      "secret": true,
-      "description": "CometChat Auth Key (development only — use auth tokens in production)"
-    }
-  ],
-  "files": [
-    {
-      "path": "src/main.tsx",
-      "action": "create",
-      "template_ref": "main.tsx.tpl",
-      "owned": true,
-      "embed_skip": true
-    },
-    {
-      "path": "src/App.tsx",
-      "action": "create",
-      "template_ref": "App.tsx.tpl",
-      "owned": true,
-      "is_entry": true
-    },
-    {
-      "path": "src/App.css",
-      "action": "create",
-      "template_ref": "App.css.tpl",
-      "owned": true,
-      "move_with_entry": true
-    },
-    {
-      "path": "src/cometchat/CometChatSelector.tsx",
-      "action": "create",
-      "template_ref": "CometChatSelector.tsx.tpl",
-      "owned": true
-    },
-    {
-      "path": "src/index.css",
-      "action": "patch",
-      "patch_mode": "prepend",
-      "patch_content": "@import url(\"@cometchat/chat-uikit-react/css-variables.css\");\n",
-      "skip_if_exists": "@cometchat/chat-uikit-react/css-variables.css"
-    }
-  ],
-  "verify_rules": [
-    "css_variables_imported_once",
-    "init_before_login",
-    "no_user_and_group_same_component",
-    "no_auth_key_in_source",
-    "render_gated_on_login_resolve",
-    "error_ui_visible_on_failure"
-  ],
-  "next_steps": [
-    "Run `npm run dev` to start the dev server",
-    "Visit http://localhost:5173",
-    "Click a conversation in the left panel to open it",
-    "When ready for production, run `cometchat apply --production` to set up server-side auth tokens"
-  ]
-}

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

@@ -1,43 +0,0 @@
-.conversations-with-messages {
-  display: flex;
-  height: 100vh;
-  width: 100%;
-}
-
-.conversations-wrapper {
-  height: 100%;
-  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: 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;
-}
-
-.side-component-wrapper { display: flex; width: 30%; max-width: 420px; flex-direction: column; flex-shrink: 0; background: var(--cometchat-background-color-01, #FFF); border-left: 1px solid var(--cometchat-border-color-light, #F5F5F5); height: 100%; overflow: hidden; }

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

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

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

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

@@ -1,43 +0,0 @@
-.conversations-with-messages {
-  display: flex;
-  height: 100vh;
-  width: 100%;
-}
-
-.conversations-wrapper {
-  height: 100%;
-  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: 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;
-}
-
-.side-component-wrapper { display: flex; width: 30%; max-width: 420px; flex-direction: column; flex-shrink: 0; background: var(--cometchat-background-color-01, #FFF); border-left: 1px solid var(--cometchat-border-color-light, #F5F5F5); height: 100%; overflow: hidden; }

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

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

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

@@ -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/1-conversation-list/templates/nextjs-pages/CometChatNoSSR.css.tpl

@@ -1,43 +0,0 @@
-.conversations-with-messages {
-  display: flex;
-  height: 100vh;
-  width: 100%;
-}
-
-.conversations-wrapper {
-  height: 100%;
-  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: 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;
-}
-
-.side-component-wrapper { display: flex; width: 30%; max-width: 420px; flex-direction: column; flex-shrink: 0; background: var(--cometchat-background-color-01, #FFF); border-left: 1px solid var(--cometchat-border-color-light, #F5F5F5); height: 100%; overflow: hidden; }