@cometchat/skills-cli 2.4.0 → 3.0.0

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

@@ -1,88 +0,0 @@
-// Pages Router has no RSC boundary — no `"use client"` directive needed.
-// This file is rendered ONLY on the client because src/pages/chat.tsx
-// imports it via next/dynamic with { ssr: false }.
-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 src/styles/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-pages/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-pages/chat-page.tsx.tpl

@@ -1,15 +0,0 @@
-// Pages Router auto-routes this file to /chat. The CometChat SDK uses
-// browser-only globals (WebSocket, IndexedDB, etc.) so we MUST disable
-// SSR for the chat component via next/dynamic with { ssr: false }.
-// This mirrors the App Router pattern where CometChatNoSSR has a
-// `"use client"` directive — Pages Router achieves the same isolation
-// at the import site instead of with a directive.
-import dynamic from "next/dynamic";
-
-const CometChatNoSSR = dynamic(() => import("../cometchat/CometChatNoSSR"), {
-  ssr: false,
-});
-
-export default function ChatPage() {
-  return <CometChatNoSSR />;
-}

package/dist/registry/v6/experiences/1-conversation-list/templates/react-router/CometChat-route.tsx.tpl

@@ -1,22 +0,0 @@
-import React, { lazy, Suspense, useEffect, useState } from "react";
-
-// Lazy-load the CometChat component so it never executes during SSR
-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/1-conversation-list/templates/react-router/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/react-router/CometChatNoSSR.tsx.tpl

@@ -1,87 +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 { CometChatSelector } from "./CometChatSelector";
-// 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 [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)));
-  }, []);
-
-  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/react-router/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/reactjs/App.css.tpl

@@ -1,40 +0,0 @@
-/* CometChat layout — IMPORTANT: read this before customizing.
- *
- * The CometChat React UI Kit v6 wraps every component in a `<div class="cometchat">`
- * which does NOT set `height: 100%`. CSS flex with `flex: 1` alone WILL NOT propagate
- * height through this wrapper, so the message list (which uses `overflow: hidden auto`
- * + `height: 100%` internally) collapses to content size — disabling scroll and
- * showing messages from the top instead of bottom-anchored.
- *
- * The required workaround is to give EVERY ancestor of `.cometchat-message-list` an
- * explicit fixed height. That's why this stylesheet sets:
- *   - #root             → 100vh / 100vw     (anchor the whole layout in the viewport)
- *   - .conversations-with-messages → height: 100% from #root
- *   - .conversations-wrapper       → height: 100vh (fixed left panel)
- *   - .messages-wrapper            → flex: 1 (right panel fills remaining space,
- *                                     shrinks when side panels like details/search/
- *                                     threads open alongside it)
- *
- * The layout is side-panel-ready: adding a details panel, search panel, or
- * thread panel alongside the messages wrapper will work without any CSS changes.
- * The messages-wrapper uses flex: 1 + min-width: 0 so it shrinks automatically
- * when a sibling side panel is added to the flex container.
- *
- * If you customize this layout, every container in the chain from <html> down to
- * the message list MUST have a resolved height. If you switch to inline styles or
- * a different parent component, give the chat container a fixed pixel/viewport
- * height OR measure it with a ResizeObserver and set it imperatively.
- *
- * If you see "blank panel where messages should be" or "messages stuck at top
- * instead of scrolling to bottom", this is the bug. See:
- * https://www.cometchat.com/docs/ui-kit/react/components-overview
- */
-#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; 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; }
-/* Side panel — used by details, search, threaded messages. Ready to use in Phase B. */
-.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/reactjs/App.tsx.tpl

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

package/dist/registry/v6/experiences/1-conversation-list/templates/reactjs/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/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>,
-  )
-}

package/dist/registry/v6/experiences/1-conversation-list/templates/reactjs-dedicated-route/ChatPage.tsx.tpl

@@ -1,87 +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();
-
-// Module-level promise so init + login only runs once, even if the page
-// remounts (route changes, StrictMode double-render). Subsequent mounts
-// await the same resolved promise.
-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/1-conversation-list/templates/reactjs-dedicated-route/CometChatMessenger.css.tpl

@@ -1,20 +0,0 @@
-/* CometChat layout — IMPORTANT: read this before customizing.
- *
- * The CometChat React UI Kit v6 wraps every component in a `<div class="cometchat">`
- * which does NOT set `height: 100%`. CSS flex with `flex: 1` alone WILL NOT propagate
- * height through this wrapper, so the message list (which uses `overflow: hidden auto`
- * + `height: 100%` internally) collapses to content size — disabling scroll and
- * showing messages from the top instead of bottom-anchored.
- *
- * This stylesheet scopes the layout to `.cometchat-page` (the root div in
- * ChatPage.tsx) so it doesn't leak into the rest of your app's pages.
- */
-.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; }
-/* Side panel — used by details, search, threaded messages. Ready to use in Phase B. */
-.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; }