@cometchat/skills-cli 2.0.1 → 2.0.3

package/dist/index.js

@@ -170,9 +170,24 @@ function detectReactjs(root, deps) {
     bundler: isVite ? "vite" : isCra ? "webpack" : "vite",
     // default to vite for ambiguous
     ssr_strategy: "spa-no-ssr",
-    env_prefix: isVite ? "VITE_" : isCra ? "REACT_APP_" : "VITE_"
+    env_prefix: isVite ? "VITE_" : isCra ? "REACT_APP_" : "VITE_",
+    uses_jsx: detectUsesJsx(root)
   };
 }
+function detectUsesJsx(root) {
+  const indexHtml = readFileOrNull(p(root, "index.html"));
+  if (indexHtml) {
+    if (/src=["']\/?src\/main\.jsx["']/.test(indexHtml)) return true;
+    if (/src=["']\/?src\/main\.tsx["']/.test(indexHtml)) return false;
+  }
+  const hasJsxMain = pathExists(p(root, "src/main.jsx"));
+  const hasTsxMain = pathExists(p(root, "src/main.tsx"));
+  if (hasJsxMain && !hasTsxMain) return true;
+  const hasTsconfig = pathExists(p(root, "tsconfig.json"));
+  const hasJsxApp = pathExists(p(root, "src/App.jsx"));
+  if (!hasTsconfig && hasJsxApp) return true;
+  return false;
+}
 function detectFramework(root) {
   const pkg = readJsonOrNull(p(root, "package.json"));
   if (!pkg) return EMPTY;
@@ -500,6 +515,7 @@ async function runDetectors(root) {
     bundler: fw.bundler,
     ssr_strategy: fw.ssr_strategy,
     env_prefix: fw.env_prefix,
+    uses_jsx: fw.uses_jsx,
     package_manager,
     credentials,
     existing_integration,
@@ -536,6 +552,9 @@ function printHumanReadable(r) {
   if (r.ssr_strategy !== null) lines.push(`  SSR strategy:      ${r.ssr_strategy}`);
   if (r.env_prefix !== null) lines.push(`  Env var prefix:    ${r.env_prefix}`);
   if (r.package_manager !== null) lines.push(`  Package manager:   ${r.package_manager}`);
+  if (r.uses_jsx === true) {
+    lines.push(`  Source language:   JavaScript (.jsx) \u2014 \u26A0 apply will refuse, the v6 templates are TypeScript-only`);
+  }
   lines.push("");
   lines.push("  Credentials:");
   lines.push(`    Source:           ${r.credentials.source}`);
@@ -1648,6 +1667,7 @@ async function apply(args) {
   let frameworkVersion = null;
   let credentialsSource = "none";
   let detectedRouter = null;
+  let usesJsx = false;
   if (!framework) {
     const detected = await runDetectors(root);
     if (detected.framework === null) {
@@ -1662,15 +1682,44 @@ async function apply(args) {
     frameworkVersion = detected.framework_version;
     credentialsSource = detected.credentials.source;
     detectedRouter = detected.router ?? null;
+    usesJsx = detected.uses_jsx === true;
   } else if (framework === "nextjs") {
     const detected = await runDetectors(root);
     detectedRouter = detected.router ?? null;
     if (!frameworkVersion) frameworkVersion = detected.framework_version;
     if (credentialsSource === "none") credentialsSource = detected.credentials.source;
+  } else if (framework === "reactjs") {
+    const detected = await runDetectors(root);
+    usesJsx = detected.uses_jsx === true;
+    if (!frameworkVersion) frameworkVersion = detected.framework_version;
+    if (credentialsSource === "none") credentialsSource = detected.credentials.source;
   }
   if (!envPrefix) {
     envPrefix = framework === "nextjs" ? "NEXT_PUBLIC_" : framework === "astro" ? "PUBLIC_" : "VITE_";
   }
+  if (framework === "reactjs" && usesJsx) {
+    return errorOut(
+      args,
+      [
+        "Error: This project uses JavaScript (.jsx) entry files. The CometChat React UI Kit v6 templates are TypeScript-only.",
+        "",
+        "Detected: src/main.jsx (or index.html references /src/main.jsx) and no tsconfig.json.",
+        "",
+        "Options:",
+        "  1. Recreate the project as TypeScript (recommended for new projects):",
+        "       npm create vite@latest my-react-app -- --template react-ts",
+        "  2. Convert this project to TypeScript first:",
+        "       - Add a tsconfig.json (see https://vite.dev/guide/features#typescript)",
+        "       - Rename src/main.jsx \u2192 src/main.tsx",
+        "       - Rename src/App.jsx \u2192 src/App.tsx",
+        "       - Update index.html to reference /src/main.tsx",
+        "     Then re-run `cometchat init`.",
+        "",
+        "JSX template variants ship in a future release. Tracking: v2.1."
+      ].join("\n"),
+      1
+    );
+  }
   let manifestKey = framework;
   if (framework === "nextjs" && detectedRouter === "pages") {
     manifestKey = "nextjs-pages";

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

@@ -10,6 +10,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
 }
 
 .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
 }
 
 .messages-wrapper {
-  width: calc(100% - 480px);
+  flex: 1;
+  min-width: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -37,3 +39,5 @@
 .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.css.tpl

@@ -10,6 +10,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
 }
 
 .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
 }
 
 .messages-wrapper {
-  width: calc(100% - 480px);
+  flex: 1;
+  min-width: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -37,3 +39,5 @@
 .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-pages/CometChatNoSSR.css.tpl

@@ -10,6 +10,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
 }
 
 .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
 }
 
 .messages-wrapper {
-  width: calc(100% - 480px);
+  flex: 1;
+  min-width: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -37,3 +39,5 @@
 .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.css.tpl

@@ -10,6 +10,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
 }
 
 .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
 }
 
 .messages-wrapper {
-  width: calc(100% - 480px);
+  flex: 1;
+  min-width: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -37,3 +39,5 @@
 .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/reactjs/App.css.tpl

@@ -11,8 +11,14 @@
  *   - #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)
+ *   - .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
@@ -25,8 +31,10 @@
  */
 #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 { height: 100vh; width: 480px; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; }
 .conversations-wrapper > .cometchat { overflow: hidden; }
-.messages-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; }
+.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/skills-cli",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "CLI for the CometChat skills v2 architecture — detect, view, apply, verify CometChat integrations in React projects.",
   "type": "module",
   "license": "MIT",