npm - @cometchat/skills-cli - Versions diffs - 2.0.0 - Mend

@cometchat/skills-cli 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/dist/registry/v6/experiences/1-conversation-list/templates/react-router/CometChatSelector.tsx.tpl ADDED Viewed

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

@@ -0,0 +1,32 @@
+/* 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            → height: 100% (right panel inherits from the
+ *                                                  flex parent which has 100vh)
+ *
+ * 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; }
+.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/1-conversation-list/templates/reactjs/App.tsx.tpl ADDED Viewed

@@ -0,0 +1,55 @@
+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 ADDED Viewed

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

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

package/dist/registry/v6/experiences/2-one-to-one/astro.template.json ADDED Viewed

@@ -0,0 +1,81 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 2,
+  "framework": "astro",
+  "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"
+    },
+    {
+      "name": "@astrojs/react",
+      "version": "^4"
+    },
+    {
+      "name": "react",
+      "version": "^18"
+    },
+    {
+      "name": "react-dom",
+      "version": "^18"
+    }
+  ],
+  "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": "src/cometchat/ChatApp.tsx",
+      "action": "create",
+      "template_ref": "ChatApp.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/cometchat/ChatApp.css",
+      "action": "create",
+      "template_ref": "ChatApp.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/pages/chat.astro",
+      "action": "create",
+      "template_ref": "chat.astro.tpl",
+      "owned": true
+    }
+  ],
+  "verify_rules": [
+    "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": [
+    "If `@astrojs/react` isn't installed yet, run: `npx astro add react`",
+    "Run `npm run dev` to start the dev server",
+    "Visit http://localhost:4321/chat — you'll see a one-to-one chat with `{{CHAT_UID}}`",
+    "Edit `CHAT_UID` in `src/cometchat/ChatApp.tsx` to change the chat partner"
+  ]
+}

package/dist/registry/v6/experiences/2-one-to-one/nextjs.template.json ADDED Viewed

@@ -0,0 +1,77 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 2,
+  "framework": "nextjs",
+  "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": "src/app/cometchat/CometChatNoSSR.tsx",
+      "action": "create",
+      "template_ref": "CometChatNoSSR.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/cometchat/CometChatNoSSR.css",
+      "action": "create",
+      "template_ref": "CometChatNoSSR.css.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/chat/page.tsx",
+      "action": "create",
+      "template_ref": "chat-page.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/app/globals.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:3000/chat — you'll see a one-to-one chat with `{{CHAT_UID}}`",
+    "Edit `UID` in `src/app/cometchat/CometChatNoSSR.tsx` to change the chat partner",
+    "When ready for production, run `cometchat apply --production` to set up server-side auth tokens"
+  ]
+}

package/dist/registry/v6/experiences/2-one-to-one/react-router.template.json ADDED Viewed

@@ -0,0 +1,93 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 2,
+  "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/routes/CometChat.tsx",
+      "action": "create",
+      "template_ref": "CometChat-route.tsx.tpl",
+      "owned": 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 }"
+    },
+    {
+      "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"
+    },
+    {
+      "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 — you'll see a one-to-one chat with `{{CHAT_UID}}`",
+    "Edit `CHAT_UID` in `app/cometchat/CometChatNoSSR.tsx` to change the chat partner"
+  ]
+}

package/dist/registry/v6/experiences/2-one-to-one/reactjs.template.json ADDED Viewed

@@ -0,0 +1,77 @@
+{
+  "$schema": "../../../schemas/template.schema.json",
+  "version": "1.0.0",
+  "experience_id": 2,
+  "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
+    },
+    {
+      "path": "src/App.tsx",
+      "action": "create",
+      "template_ref": "App.tsx.tpl",
+      "owned": true
+    },
+    {
+      "path": "src/App.css",
+      "action": "create",
+      "template_ref": "App.css.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 — you'll see a one-to-one chat with `{{CHAT_UID}}`",
+    "To change the chat partner, edit `CHAT_UID` in `src/App.tsx`",
+    "When ready for production, run `cometchat apply --production` to set up server-side auth tokens"
+  ]
+}

package/dist/registry/v6/experiences/2-one-to-one/templates/astro/ChatApp.css.tpl ADDED Viewed

@@ -0,0 +1,21 @@
+.messages-wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.empty-conversation {
+  height: 100vh;
+  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/2-one-to-one/templates/astro/ChatApp.tsx.tpl ADDED Viewed

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import {
+  CometChatMessageComposer,
+  CometChatMessageHeader,
+  CometChatMessageList,
+  CometChatUIKit,
+  UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+// 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 LOGIN_UID = "{{LOGIN_UID}}";
+const CHAT_UID = "{{CHAT_UID}}";
+export default function ChatApp() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [chatUser, setChatUser] = useState<CometChat.User | undefined>();
+  const [error, setError] = useState<string | null>(null);
+  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(LOGIN_UID)
+            .then(() => setLoggedIn(true))
+            .catch((e: unknown) => setError(String(e)));
+        } else {
+          setLoggedIn(true);
+        }
+      });
+    }).catch((e: unknown) => setError(String(e)));
+  }, []);
+  useEffect(() => {
+    if (!loggedIn) return;
+    CometChat.getUser(CHAT_UID)
+      .then((u) => setChatUser(u))
+      .catch((e: unknown) => setError(String(e)));
+  }, [loggedIn]);
+  if (error) return <div style={{ color: "red", padding: 16, fontFamily: "monospace" }}>{error}</div>;
+  if (!loggedIn || !chatUser) return <div className="empty-conversation">Loading chat…</div>;
+  return (
+    <div className="messages-wrapper">
+      <CometChatMessageHeader user={chatUser} />
+      <CometChatMessageList user={chatUser} />
+      <CometChatMessageComposer user={chatUser} />
+    </div>
+  );
+}

package/dist/registry/v6/experiences/2-one-to-one/templates/astro/chat.astro.tpl ADDED Viewed

@@ -0,0 +1,17 @@
+---
+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/2-one-to-one/templates/nextjs/CometChatNoSSR.css.tpl ADDED Viewed

@@ -0,0 +1,21 @@
+.messages-wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.empty-conversation {
+  height: 100vh;
+  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;
+}