@cometchat/skills-cli 2.0.2 → 2.0.4

package/dist/index.js

@@ -593,8 +593,8 @@ var ALL_EXPERIENCES = [
   {
     id: 1,
     slug: "conversation-list",
-    name: "Conversation List + Message View",
-    description: "Two-panel layout. Left: list of all conversations. Right: message thread for the selected conversation. Best when users browse and switch between multiple conversations.",
+    name: "Multi-conversation",
+    description: "Users switch between threads. Two-panel: conversation list + active thread (header, message list, composer). Messaging apps, team chat, inboxes.",
     default_placement: "dedicated-route",
     files_touched: 5,
     components_required: [
@@ -608,8 +608,8 @@ var ALL_EXPERIENCES = [
   {
     id: 2,
     slug: "one-to-one",
-    name: "One-to-One Chat",
-    description: "Single message window with a hardcoded user or group. No conversation list. Best for customer support widgets or matched-pair chat.",
+    name: "Single thread",
+    description: "One chat window for two known users or a group. Header + message list + composer, no conversation list. Support widgets, marketplace chat, embedded consult.",
     default_placement: "dedicated-route",
     files_touched: 4,
     components_required: [
@@ -622,8 +622,8 @@ var ALL_EXPERIENCES = [
   {
     id: 3,
     slug: "tab-based",
-    name: "Tab-Based Chat",
-    description: "Left panel has a tab bar (Chats / Calls / Users / Groups). Each tab shows the corresponding CometChat list. Right panel shows messages for selected conversation. Best for full-featured messenger-style apps.",
+    name: "Full messenger",
+    description: "Bottom tab bar: Chats / Calls / Users / Groups. Users browse, start conversations, make calls. Social apps, community platforms, dating.",
     default_placement: "dedicated-route",
     files_touched: 7,
     components_required: [

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.2",
+  "version": "2.0.4",
   "description": "CLI for the CometChat skills v2 architecture — detect, view, apply, verify CometChat integrations in React projects.",
   "type": "module",
   "license": "MIT",