@cometchat/skills-cli 2.0.2 → 2.0.3

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 (6) hide show
  1. package/dist/registry/v6/experiences/1-conversation-list/templates/astro/ChatApp.css.tpl +5 -1
  2. package/dist/registry/v6/experiences/1-conversation-list/templates/nextjs/CometChatNoSSR.css.tpl +5 -1
  3. package/dist/registry/v6/experiences/1-conversation-list/templates/nextjs-pages/CometChatNoSSR.css.tpl +5 -1
  4. package/dist/registry/v6/experiences/1-conversation-list/templates/react-router/CometChatNoSSR.css.tpl +5 -1
  5. package/dist/registry/v6/experiences/1-conversation-list/templates/reactjs/App.css.tpl +12 -4
  6. package/package.json +1 -1
package/dist/registry/v6/experiences/1-conversation-list/templates/astro/ChatApp.css.tpl CHANGED
@@ -10,6 +10,7 @@
10
10
  overflow: hidden;
11
11
  display: flex;
12
12
  flex-direction: column;
13
+ flex-shrink: 0;
13
14
  }
14
15
 
15
16
  .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
17
18
  }
18
19
 
19
20
  .messages-wrapper {
20
- width: calc(100% - 480px);
21
+ flex: 1;
22
+ min-width: 0;
21
23
  height: 100%;
22
24
  display: flex;
23
25
  flex-direction: column;
@@ -37,3 +39,5 @@
37
39
  .cometchat .cometchat-message-composer {
38
40
  border-radius: 0;
39
41
  }
42
+
43
+ .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 CHANGED
@@ -10,6 +10,7 @@
10
10
  overflow: hidden;
11
11
  display: flex;
12
12
  flex-direction: column;
13
+ flex-shrink: 0;
13
14
  }
14
15
 
15
16
  .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
17
18
  }
18
19
 
19
20
  .messages-wrapper {
20
- width: calc(100% - 480px);
21
+ flex: 1;
22
+ min-width: 0;
21
23
  height: 100%;
22
24
  display: flex;
23
25
  flex-direction: column;
@@ -37,3 +39,5 @@
37
39
  .cometchat .cometchat-message-composer {
38
40
  border-radius: 0;
39
41
  }
42
+
43
+ .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 CHANGED
@@ -10,6 +10,7 @@
10
10
  overflow: hidden;
11
11
  display: flex;
12
12
  flex-direction: column;
13
+ flex-shrink: 0;
13
14
  }
14
15
 
15
16
  .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
17
18
  }
18
19
 
19
20
  .messages-wrapper {
20
- width: calc(100% - 480px);
21
+ flex: 1;
22
+ min-width: 0;
21
23
  height: 100%;
22
24
  display: flex;
23
25
  flex-direction: column;
@@ -37,3 +39,5 @@
37
39
  .cometchat .cometchat-message-composer {
38
40
  border-radius: 0;
39
41
  }
42
+
43
+ .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 CHANGED
@@ -10,6 +10,7 @@
10
10
  overflow: hidden;
11
11
  display: flex;
12
12
  flex-direction: column;
13
+ flex-shrink: 0;
13
14
  }
14
15
 
15
16
  .conversations-wrapper > .cometchat {
@@ -17,7 +18,8 @@
17
18
  }
18
19
 
19
20
  .messages-wrapper {
20
- width: calc(100% - 480px);
21
+ flex: 1;
22
+ min-width: 0;
21
23
  height: 100%;
22
24
  display: flex;
23
25
  flex-direction: column;
@@ -37,3 +39,5 @@
37
39
  .cometchat .cometchat-message-composer {
38
40
  border-radius: 0;
39
41
  }
42
+
43
+ .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 CHANGED
@@ -11,8 +11,14 @@
11
11
  * - #root → 100vh / 100vw (anchor the whole layout in the viewport)
12
12
  * - .conversations-with-messages → height: 100% from #root
13
13
  * - .conversations-wrapper → height: 100vh (fixed left panel)
14
- * - .messages-wrapper → height: 100% (right panel inherits from the
15
- * flex parent which has 100vh)
14
+ * - .messages-wrapper → flex: 1 (right panel fills remaining space,
15
+ * shrinks when side panels like details/search/
16
+ * threads open alongside it)
17
+ *
18
+ * The layout is side-panel-ready: adding a details panel, search panel, or
19
+ * thread panel alongside the messages wrapper will work without any CSS changes.
20
+ * The messages-wrapper uses flex: 1 + min-width: 0 so it shrinks automatically
21
+ * when a sibling side panel is added to the flex container.
16
22
  *
17
23
  * If you customize this layout, every container in the chain from <html> down to
18
24
  * the message list MUST have a resolved height. If you switch to inline styles or
@@ -25,8 +31,10 @@
25
31
  */
26
32
  #root { width: 100vw; height: 100vh; }
27
33
  .conversations-with-messages { display: flex; height: 100%; width: 100%; }
28
- .conversations-wrapper { height: 100vh; width: 480px; overflow: hidden; display: flex; flex-direction: column; }
34
+ .conversations-wrapper { height: 100vh; width: 480px; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; }
29
35
  .conversations-wrapper > .cometchat { overflow: hidden; }
30
- .messages-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; }
36
+ .messages-wrapper { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
31
37
  .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); }
32
38
  .cometchat .cometchat-message-composer { border-radius: 0; }
39
+ /* Side panel — used by details, search, threaded messages. Ready to use in Phase B. */
40
+ .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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cometchat/skills-cli",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
4
4
  "description": "CLI for the CometChat skills v2 architecture — detect, view, apply, verify CometChat integrations in React projects.",
5
5
  "type": "module",
6
6
  "license": "MIT",