@c2n/chat-message 0.0.12 → 0.0.14

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/chat-message.ts","declarations":[{"kind":"class","description":"Flexible message row for conversations, assistant answers and activity updates.","name":"ChatMessage","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-chat-message--gap","default":"12px"},{"type":{"text":"font-size"},"name":"--c2-chat-message--font-size","default":"14px"},{"type":{"text":"font-weight"},"name":"--c2-chat-message--font-weight","default":"400"},{"type":{"text":"font-family"},"name":"--c2-chat-message--font-family","default":"inherit"},{"type":{"text":"line-height"},"name":"--c2-chat-message--line-height","default":"1.55"},{"type":{"text":"pixel"},"name":"--c2-chat-message__avatar--margin-top","default":"2px"},{"type":{"text":"pixel"},"name":"--c2-chat-message__message--gap","default":"6px"},{"type":{"text":"length"},"name":"--c2-chat-message__message--max-width","default":"44rem"},{"type":{"text":"border"},"name":"--c2-chat-message__message--border-top","default":"0 solid transparent"},{"type":{"text":"border"},"name":"--c2-chat-message__message--border-right","default":"0 solid transparent"},{"type":{"text":"border"},"name":"--c2-chat-message__message--border-bottom","default":"0 solid transparent"},{"type":{"text":"border"},"name":"--c2-chat-message__message--border-left","default":"0 solid transparent"},{"type":{"text":"border-radius"},"name":"--c2-chat-message__message--border-top-left-radius","default":"0"},{"type":{"text":"border-radius"},"name":"--c2-chat-message__message--border-top-right-radius","default":"0"},{"type":{"text":"border-radius"},"name":"--c2-chat-message__message--border-bottom-left-radius","default":"0"},{"type":{"text":"border-radius"},"name":"--c2-chat-message__message--border-bottom-right-radius","default":"0"},{"type":{"text":"padding"},"name":"--c2-chat-message__message--padding-top","default":"0"},{"type":{"text":"padding"},"name":"--c2-chat-message__message--padding-right","default":"0"},{"type":{"text":"padding"},"name":"--c2-chat-message__message--padding-bottom","default":"0"},{"type":{"text":"padding"},"name":"--c2-chat-message__message--padding-left","default":"0"},{"type":{"text":"color"},"name":"--c2-chat-message__message--color","default":"#27272a"},{"type":{"text":"background"},"name":"--c2-chat-message__message--background","default":"transparent"},{"type":{"text":"pixel"},"name":"--c2-chat-message__header--gap","default":"8px"},{"type":{"text":"color"},"name":"--c2-chat-message__header__title--color","default":"#18181b"},{"type":{"text":"font-size"},"name":"--c2-chat-message__header__title--font-size","default":"13px"},{"type":{"text":"font-weight"},"name":"--c2-chat-message__header__title--font-weight","default":"600"},{"type":{"text":"font-style"},"name":"--c2-chat-message__header__title--font-style","default":"normal"},{"type":{"text":"color"},"name":"--c2-chat-message__time--color","default":"#71717a"},{"type":{"text":"font-size"},"name":"--c2-chat-message__time--font-size","default":"12px"},{"type":{"text":"font-weight"},"name":"--c2-chat-message__time--font-weight","default":"400"},{"type":{"text":"font-style"},"name":"--c2-chat-message__time--font-style","default":"normal"},{"type":{"text":"pixel"},"name":"--c2-chat-message__footer--gap","default":"8px"}],"cssParts":[{"description":"The complete message row.","name":"base"},{"description":"Component-owned region wrapping the assigned `avatar` slot.","name":"avatar"},{"description":"Component-owned column wrapping the default slot between the header and footer.","name":"body"},{"description":"Title and header timestamp row.","name":"header"},{"description":"Main message content.","name":"content"},{"description":"Reactions and footer timestamp row.","name":"footer"},{"description":"Reaction/action region.","name":"actions"}],"slots":[{"description":"Main message body. Prefer this slot for new usage.","name":""},{"description":"Sender avatar shown beside the message.","name":"avatar"},{"description":"Sender name or message heading.","name":"title"},{"description":"Timestamp displayed beside the title.","name":"header-time"},{"description":"Named main message body, retained for compatibility.","name":"message"},{"description":"Reactions or sentiment controls below the message.","name":"emotion"},{"description":"Timestamp displayed below the message.","name":"footer-time"}],"members":[{"kind":"field","name":"align","type":{"text":"ChatMessageAlign"},"default":"'left'","description":"Places the avatar and message on the left or right side of the row.","attribute":"align","reflects":true},{"kind":"field","name":"slotPresence","privacy":"private","readonly":true,"default":"new SlotPresenceController(this, ['title', 'header-time', 'emotion', 'footer-time'])"}],"attributes":[{"name":"align","type":{"text":"ChatMessageAlign"},"default":"'left'","description":"Places the avatar and message on the left or right side of the row.","fieldName":"align"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-chat-message","customElement":true,"slotComponents":["c2-avatar"]}],"exports":[{"kind":"js","name":"ChatMessage","declaration":{"name":"ChatMessage","module":"src/chat-message.ts"}},{"kind":"custom-element-definition","name":"c2-chat-message","declaration":{"name":"ChatMessage","module":"src/chat-message.ts"}}]}]}

package/dist/chat-message.js

@@ -1,6 +1,7 @@
 import { LitElement, html, unsafeCSS } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property } from "@c2n/core/lit-helper.js";
 import { customElement } from "@c2n/core/element-helper.js";
+import { SlotPresenceController } from "@c2n/core/dom-helper.js";
 //#region src/chat-message.scss?inline
 var chat_message_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  max-width: 100%;\n}\n\n.c2-chat-message {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--c2-chat-message--gap,12px);\n  width: 100%;\n}\n\n.c2-chat-message__avatar {\n  display: contents;\n}\n\nslot[name=avatar]::slotted(*) {\n  flex: none;\n  margin-top: var(--c2-chat-message__avatar--margin-top,2px);\n}\n\n.c2-chat-message__body {\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: column;\n  gap: var(--c2-chat-message__message--gap,6px);\n  min-width: 0;\n  max-width: min(100%, var(--c2-chat-message__message--max-width,44rem));\n  padding-top: var(--c2-chat-message__message--padding-top,0);\n  padding-right: var(--c2-chat-message__message--padding-right,0);\n  padding-bottom: var(--c2-chat-message__message--padding-bottom,0);\n  padding-left: var(--c2-chat-message__message--padding-left,0);\n  border-top: var(--c2-chat-message__message--border-top,0 solid transparent);\n  border-right: var(--c2-chat-message__message--border-right,0 solid transparent);\n  border-bottom: var(--c2-chat-message__message--border-bottom,0 solid transparent);\n  border-left: var(--c2-chat-message__message--border-left,0 solid transparent);\n  border-top-left-radius: var(--c2-chat-message__message--border-top-left-radius,0);\n  border-top-right-radius: var(--c2-chat-message__message--border-top-right-radius,0);\n  border-bottom-left-radius: var(--c2-chat-message__message--border-bottom-left-radius,0);\n  border-bottom-right-radius: var(--c2-chat-message__message--border-bottom-right-radius,0);\n  background: var(--c2-chat-message__message--background,transparent);\n  color: var(--c2-chat-message__message--color,#27272a);\n  font-variant-ligatures: common-ligatures;\n  font-size: var(--c2-chat-message--font-size,14px);\n  font-weight: var(--c2-chat-message--font-weight,400);\n  font-family: var(--c2-chat-message--font-family,inherit);\n  line-height: var(--c2-chat-message--line-height,1.55);\n}\n\n.c2-chat-message__header,\n.c2-chat-message__footer {\n  display: flex;\n  align-items: center;\n}\n\n.c2-chat-message__header {\n  gap: var(--c2-chat-message__header--gap,8px);\n}\n\n.c2-chat-message__header[hidden],\n.c2-chat-message__footer[hidden] {\n  display: none;\n}\n\nslot[name=title] {\n  color: var(--c2-chat-message__header__title--color,#18181b);\n  font-size: var(--c2-chat-message__header__title--font-size,13px);\n  font-weight: var(--c2-chat-message__header__title--font-weight,600);\n  font-style: var(--c2-chat-message__header__title--font-style,normal);\n  line-height: 1.25;\n}\n\nslot[name=header-time],\nslot[name=footer-time] {\n  color: var(--c2-chat-message__time--color,#71717a);\n  font-size: var(--c2-chat-message__time--font-size,12px);\n  font-weight: var(--c2-chat-message__time--font-weight,400);\n  font-style: var(--c2-chat-message__time--font-style,normal);\n  line-height: 1.25;\n}\n\n.c2-chat-message__content {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.c2-chat-message__content ::slotted(*) {\n  box-sizing: border-box;\n  max-width: 100%;\n}\n\n.c2-chat-message__footer {\n  justify-content: space-between;\n  gap: var(--c2-chat-message__footer--gap,8px);\n}\n\n.c2-chat-message__emotion {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n:host([align=right]) .c2-chat-message {\n  flex-direction: row-reverse;\n}\n:host([align=right]) .c2-chat-message__body {\n  align-items: flex-end;\n  margin-left: auto;\n}\n:host([align=right]) .c2-chat-message__header {\n  flex-direction: row-reverse;\n}\n:host([align=right]) .c2-chat-message__content {\n  text-align: right;\n}\n:host([align=right]) .c2-chat-message__footer {\n  flex-direction: row-reverse;\n}";
 //#endregion
@@ -17,33 +18,29 @@ var ChatMessage = class ChatMessage extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.align = "left";
-		this.hasHeader = true;
-		this.hasFooter = true;
+		this.slotPresence = new SlotPresenceController(this, [
+			"title",
+			"header-time",
+			"emotion",
+			"footer-time"
+		]);
 	}
 	static {
 		this.styles = unsafeCSS(chat_message_default);
 	}
-	syncOptionalRegions() {
-		const assigned = (name) => {
-			const slot = this.renderRoot.querySelector(`slot[name='${name}']`);
-			return Boolean(slot?.assignedNodes({ flatten: true }).some((node) => node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim())));
-		};
-		this.hasHeader = assigned("title") || assigned("header-time");
-		this.hasFooter = assigned("emotion") || assigned("footer-time");
-	}
 	render() {
 		return html`
       <article class="c2-chat-message" part="base">
         <div class="c2-chat-message__avatar" part="avatar"><slot name="avatar"></slot></div>
         <div class="c2-chat-message__body" part="body">
-          <header class="c2-chat-message__header" part="header" ?hidden=${!this.hasHeader}>
-            <slot name="title" @slotchange=${this.syncOptionalRegions}></slot>
-            <slot name="header-time" @slotchange=${this.syncOptionalRegions}></slot>
+          <header class="c2-chat-message__header" part="header" ?hidden=${!this.slotPresence.has("title") && !this.slotPresence.has("header-time")}>
+            <slot name="title" @slotchange=${this.slotPresence.handleSlotChange}></slot>
+            <slot name="header-time" @slotchange=${this.slotPresence.handleSlotChange}></slot>
           </header>
           <div class="c2-chat-message__content" part="content"><slot name="message"></slot><slot></slot></div>
-          <footer class="c2-chat-message__footer" part="footer" ?hidden=${!this.hasFooter}>
-            <div class="c2-chat-message__emotion" part="actions"><slot name="emotion" @slotchange=${this.syncOptionalRegions}></slot></div>
-            <div class="c2-chat-message__footer-time"><slot name="footer-time" @slotchange=${this.syncOptionalRegions}></slot></div>
+          <footer class="c2-chat-message__footer" part="footer" ?hidden=${!this.slotPresence.has("emotion") && !this.slotPresence.has("footer-time")}>
+            <div class="c2-chat-message__emotion" part="actions"><slot name="emotion" @slotchange=${this.slotPresence.handleSlotChange}></slot></div>
+            <div class="c2-chat-message__footer-time"><slot name="footer-time" @slotchange=${this.slotPresence.handleSlotChange}></slot></div>
           </footer>
         </div>
       </article>
@@ -51,8 +48,6 @@ var ChatMessage = class ChatMessage extends LitElement {
 	}
 };
 __decorate([property({ reflect: true })], ChatMessage.prototype, "align", void 0);
-__decorate([state()], ChatMessage.prototype, "hasHeader", void 0);
-__decorate([state()], ChatMessage.prototype, "hasFooter", void 0);
 ChatMessage = __decorate([customElement("c2-chat-message")], ChatMessage);
 //#endregion
 export { ChatMessage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/chat-message",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "dist/chat-message.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -61,12 +62,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.12",
+    "@c2n/core": "0.0.14",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "43e38b42ac221ffeef99a773c42dd3356961d26a"
+  "gitHead": "0261bfceaaa9f710a54e8f36cb57f946c0b83e53"
 }

package/types/src/chat-message.d.ts

@@ -14,8 +14,8 @@ export type ChatMessageAlign = 'left' | 'right';
  * @slot footer-time - Timestamp displayed below the message.
  *
  * @csspart base - The complete message row.
- * @csspart avatar - Avatar region.
- * @csspart body - Header, content and footer column.
+ * @csspart avatar - Component-owned region wrapping the assigned `avatar` slot.
+ * @csspart body - Component-owned column wrapping the default slot between the header and footer.
  * @csspart header - Title and header timestamp row.
  * @csspart content - Main message content.
  * @csspart footer - Reactions and footer timestamp row.
@@ -65,10 +65,8 @@ export type ChatMessageAlign = 'left' | 'right';
 export declare class ChatMessage extends LitElement {
     /** Places the avatar and message on the left or right side of the row. */
     align: ChatMessageAlign;
-    private hasHeader;
-    private hasFooter;
+    private readonly slotPresence;
     static styles: import("lit").CSSResult;
-    private syncOptionalRegions;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/chat-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../src/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAKjD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,0EAA0E;IAC7C,KAAK,EAAE,gBAAgB,CAAS;IAEpD,OAAO,CAAC,SAAS,CAAO;IACxB,OAAO,CAAC,SAAS,CAAO;IAEjC,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,mBAAmB;IAUlB,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}
+{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../src/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAMjD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,0EAA0E;IAC7C,KAAK,EAAE,gBAAgB,CAAS;IAE7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAuF;IAEpH,OAAgB,MAAM,0BAAoB;IAEjC,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}