@kubex/zinc 1.1.2 → 1.1.4

package/docs/pages/components/chat-message.md

@@ -18,10 +18,10 @@ layout: component
 
 ### Basic Message
 
-The avatar initials and colour are derived from `sender`. `time` is a unix timestamp, displayed as a localised HH:MM.
+The avatar initials and color are derived from `sender`. `time` is a unix timestamp, displayed as a localised HH:MM.
 
 ```html:preview
-<zn-chat-message sender="Alan Jones" time="1718193420">
+<zn-chat-message sender="John Smith" time="1718193420">
   Thanks for getting in touch — I'll take a look at your account now.
 </zn-chat-message>
 ```
@@ -60,3 +60,57 @@ The bubble background can be themed with the `--message-background` custom prope
   This one uses an info-tinted bubble instead of the default cream.
 </zn-chat-message>
 ```
+
+### Message Attribute
+
+Instead of slotting content, pass an HTML string via the `message` attribute. It is sanitized
+(scripts and event handlers stripped), newlines become line breaks and bare URLs become links.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420"
+                 message="Here's the link to your invoice: https://example.com/invoice/123 — let me know if you have any questions."></zn-chat-message>
+```
+
+### Conversation Sides
+
+`agent-initiated` and `customer-initiated` mark which side sent the message. Consecutive messages from
+the same side within a minute are grouped (the avatar and header are hidden on the follow-ups).
+
+```html:preview
+<zn-chat-message sender="John Smith" time="1718193420" agent-initiated
+                 message="Hi! How can I help you today?"></zn-chat-message>
+<zn-chat-message sender="Customer" time="1718193440" customer-initiated
+                 message="I was charged twice for my subscription."></zn-chat-message>
+<zn-chat-message sender="Customer" time="1718193450" customer-initiated
+                 message="Can you take a look?"></zn-chat-message>
+```
+
+### Internal Note
+
+`action-type="internal"` tints the bubble and adds an INTERNAL badge to the header.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420" agent-initiated action-type="internal"
+                 message="Customer has been refunded — keep an eye out for a follow-up email."></zn-chat-message>
+```
+
+### Sending State
+
+`action-type="message-sending"` shows the bubble as a pending message with a "Sending..." indicator.
+
+```html:preview
+<zn-chat-message sender="Agent Name" agent-initiated action-type="message-sending"
+                 message="This message hasn't been delivered yet."></zn-chat-message>
+```
+
+### System Events
+
+System action types render as a centred card instead of a message bubble. A default label is shown
+when no `message` is provided. Supported types: `connected.agent`, `customer.connected`,
+`customer.disconnected`, `transfer`, `attachment.added`, `ended`, `customer.ended`.
+
+```html:preview
+<zn-chat-message action-type="customer.connected" time="1718193420"></zn-chat-message>
+<zn-chat-message action-type="transfer" time="1718193460" message="Transferred to Billing"></zn-chat-message>
+<zn-chat-message action-type="ended" time="1718193500"></zn-chat-message>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/alert/alert.component.ts

@@ -28,6 +28,7 @@ export default class ZnAlert extends ZincElement {
   @property({type: String}) icon: string = '';
   @property({type: String}) caption: string = '';
   @property({type: Boolean}) collapse: boolean = false;
+  @property({type: String, reflect: true}) appearance: 'transparent' | 'solid' = 'transparent';
   @property({type: String}) level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic' = 'info';
   @property({type: String}) size: 'small' | 'medium' | 'large' = 'medium';
 

package/src/components/alert/alert.scss

@@ -12,8 +12,16 @@
   background-color: rgba(var(--zn-panel), 0.8);
 }
 
+:host([appearance="solid"]) {
+  background-color: rgb(var(--zn-panel));
+
+  .wrapper:before {
+    backdrop-filter: none;
+  }
+}
+
 .alert-icon {
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small) 0;
+  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
 }
 
 p {

package/src/components/chat-message/chat-message.component.ts

@@ -1,20 +1,27 @@
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {cleanHTML} from "./clean-message";
+import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
 import {property} from "lit/decorators.js";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
 
 import styles from './chat-message.scss';
 
+export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added' | 'multi.answer' | 'transfer' |
+  'ended' | 'error' | 'message-sending' | 'customer.ended' | 'customer.connected' | 'customer.disconnected' |
+  'internal';
+
 /**
  * @summary A single message in a chat-style conversation: avatar, sender,
- * time, optional badge, and a message bubble with optional actions.
+ * time, optional badge, and a message bubble with optional actions. Also renders
+ * system events (connections, transfers, etc.) as a centred card.
  * @documentation https://zinc.style/components/chat-message
  * @status experimental
  * @since 1.0
  *
  * @dependency zn-icon
  *
- * @slot - The message content.
+ * @slot - The message content. Ignored when the `message` attribute is set.
  * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
  * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).
  * @slot edit-dialog - Pass-through for an associated dialog element.
@@ -25,6 +32,7 @@ import styles from './chat-message.scss';
  * @csspart header - The sender/time/badge row.
  * @csspart bubble - The message bubble.
  * @csspart content - The message content within the bubble.
+ * @csspart system-card - The card rendered for system action types.
  *
  * @cssproperty --message-background - The bubble's background colour.
  */
@@ -34,40 +42,166 @@ export default class ZnChatMessage extends ZincElement {
     'zn-icon': ZnIcon
   };
 
-  /** The sender's name, also used for the avatar initials. */
+  static readonly SYSTEM_ACTION_TYPES: readonly string[] = [
+    'connected.agent', 'attachment.added', 'transfer', 'ended',
+    'customer.ended', 'customer.connected', 'customer.disconnected',
+  ];
+
+  private static readonly DISPLAYED_ACTION_TYPES: readonly string[] = [
+    '', 'connected.agent', 'attachment.added', 'multi.answer', 'transfer', 'ended', 'error',
+    'customer.ended', 'message-sending', 'customer.connected', 'customer.disconnected', 'internal',
+  ];
+
+  /** The sender's name, also used for the avatar. */
   @property() sender: string = '';
 
-  /** Unix timestamp (seconds) of the message, shown as HH:MM. */
+  /**
+   * The message body as an HTML string. When set, it is sanitized (scripts and event
+   * handlers stripped), newlines become line breaks and bare URLs become links. When
+   * omitted the default slot is rendered instead.
+   */
+  @property() message: string = '';
+
+  /** Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today). */
   @property() time: string = '';
 
-  private getTime(time: string) {
-    const date = new Date(parseInt(time, 10) * 1000);
-    return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+  /** Overrides the avatar source. Defaults to `sender`. */
+  @property() avatar: string = '';
+
+  /** The kind of message. Drives system-card rendering, the sending state and badges. */
+  @property({attribute: 'action-type', reflect: true}) actionType: ChatMessageActionType = '';
+
+  /** Marks the message as initiated by the customer (affects styling and grouping). */
+  @property({type: Boolean, reflect: true, attribute: 'customer-initiated'}) customerInitiated = false;
+
+  /** Marks the message as initiated by an agent (affects styling and grouping). */
+  @property({type: Boolean, reflect: true, attribute: 'agent-initiated'}) agentInitiated = false;
+
+  connectedCallback() {
+    const isContent = !this.actionType || this.actionType === 'internal';
+    const agentInitiated = isContent && this.agentInitiated;
+    const customerInitiated = isContent && this.customerInitiated;
+
+    const previous = this.previousElementSibling as ZnChatMessage;
+    const inTime = parseInt(this.time) - parseInt(previous?.time);
+    const previousActionType = previous?.getAttribute('action-type') ?? '';
+    const previousIsSystem = ZnChatMessage.SYSTEM_ACTION_TYPES.includes(previousActionType);
+    const previousIsInternal = previousActionType === 'internal';
+    const thisIsInternal = this.actionType === 'internal';
+
+    if (previous && !previousIsSystem && inTime < 60 && previousIsInternal === thisIsInternal &&
+      ((previous?.hasAttribute('agent-initiated') && agentInitiated) ||
+        (previous?.hasAttribute('customer-initiated') && customerInitiated))) {
+      this.classList.add('message-continued');
+    }
+
+    super.connectedCallback();
   }
 
   protected render() {
+    if (!ZnChatMessage.DISPLAYED_ACTION_TYPES.includes(this.actionType)) {
+      return nothing;
+    }
+
+    if (this.isSystemMessage()) {
+      return this.renderSystemCard();
+    }
+
+    const sending = this.actionType === 'message-sending';
+
     return html`
       <div part="base" class="message">
         <div part="avatar" class="message__avatar">
-          <zn-icon library="avatar" src="${this.sender}" size="36" round></zn-icon>
+          <zn-icon library="avatar" src="${this.avatar || this.sender}" size="36" round></zn-icon>
         </div>
         <div part="body" class="message__body">
-          <div part="header" class="message__header">
-            <span class="message__sender">${this.sender}</span>
-            ${this.time ? html`<span class="message__time">${this.getTime(this.time)}</span>` : null}
-            <slot name="badge"></slot>
-          </div>
-          <div part="bubble" class="message__bubble">
-            <div part="content" class="message__content">
-              <slot></slot>
-            </div>
-            <div class="message__actions">
-              <slot name="edit-dialog-trigger"></slot>
-            </div>
+          ${sending ? null : this.renderHeader()}
+          <div part="bubble" class="message__bubble ${sending ? 'message__bubble--sending' : ''}">
+            <div part="content" class="message__content">${this.renderContent()}</div>
+            ${sending ? html`<div class="message__meta">Sending...</div>` : html`
+              <div class="message__actions">
+                <slot name="edit-dialog-trigger"></slot>
+              </div>`}
           </div>
         </div>
       </div>
       <slot name="edit-dialog"></slot>
     `;
   }
+
+  private isSystemMessage() {
+    return ZnChatMessage.SYSTEM_ACTION_TYPES.includes(this.actionType);
+  }
+
+  private renderSystemCard() {
+    return html`
+      <div part="base" class="message message--system">
+        <div part="avatar" class="message__avatar"></div>
+        <div part="body" class="message__body">
+          <div part="system-card" class="system-card">
+            <span class="system-card__text">${this.message || this.systemLabel()}</span>
+            ${this.time ? html`<span class="system-card__time">${this.getTime()}</span>` : nothing}
+          </div>
+        </div>
+      </div>`;
+  }
+
+  private systemLabel() {
+    switch (this.actionType) {
+      case 'customer.connected':
+        return 'Customer connected';
+      case 'customer.disconnected':
+        return 'Customer disconnected';
+      case 'connected.agent':
+        return 'Agent connected';
+      case 'transfer':
+        return 'Transferred';
+      case 'attachment.added':
+        return 'Attachment added';
+      case 'ended':
+        return 'Ended';
+      case 'customer.ended':
+        return 'Customer ended';
+      default:
+        return '';
+    }
+  }
+
+  private renderHeader() {
+    return html`
+      <div part="header" class="message__header">
+        <span class="message__sender">${this.sender || (this.customerInitiated ? 'Customer' : 'You')}</span>
+        ${this.time ? html`<span class="message__time">${this.getSentTime()}</span>` : nothing}
+        ${this.actionType === 'internal' ? html`<span class="message__badge">INTERNAL</span>` : nothing}
+        <slot name="badge"></slot>
+      </div>`;
+  }
+
+  private renderContent() {
+    if (!this.message) {
+      return html`<slot></slot>`;
+    }
+
+    let content = cleanHTML(this.message);
+    content = content.replace(/\r\n|\r|\n/g, '<br>');
+    content = content.replace(/\b(((https?|ftp|dict):\/\/|www\.)[^'">\s]+\.[^'">\s]+)(?=\s|$)(?!["<>])/g,
+      '<a href="$1" target="_blank">$1</a>');
+    return unsafeHTML(content);
+  }
+
+  /** HH:MM only — used on the system card. */
+  private getTime() {
+    const date = new Date(parseInt(this.time, 10) * 1000);
+    return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+  }
+
+  /** HH:MM, prefixed with the date when the message is not from today. */
+  private getSentTime() {
+    const time = new Date(parseInt(this.time, 10) * 1000);
+    const hm = time.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+    if (time.getDate() !== (new Date()).getDate()) {
+      return `${time.toLocaleDateString()} ${hm}`;
+    }
+    return hm;
+  }
 }

package/src/components/chat-message/chat-message.scss

@@ -7,9 +7,12 @@
 .message {
   display: flex;
   gap: var(--zn-spacing-small);
+  align-items: flex-start;
 
   &__avatar {
-    flex-shrink: 0;
+    flex: 0 0 36px;
+    display: flex;
+    justify-content: center;
   }
 
   &__body {
@@ -35,13 +38,33 @@
     @include wc.text-style(subheading-small);
   }
 
+  &__badge {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    padding: 2px 6px;
+    border-radius: var(--zn-border-radius);
+    border: 1px solid rgba(var(--zn-color-info), 0.4);
+    color: rgb(var(--zn-color-info));
+    background: rgba(var(--zn-color-info), 0.08);
+    text-transform: uppercase;
+  }
+
   &__bubble {
+    box-sizing: border-box;
     display: flex;
     align-items: flex-start;
     gap: var(--zn-spacing-small);
-    padding: var(--zn-spacing-small);
+    padding: 11px var(--zn-spacing-small); // 11px top/bottom + 24px line = 46px base
     border-radius: var(--zn-border-radius);
     background: var(--message-background, hsl(48, 78%, 94%));
+    min-height: 46px; // base (padding included); grows only when text wraps
+
+    &--sending {
+      border: 1px dashed rgb(var(--zn-border-color));
+      opacity: 0.7;
+      flex-direction: column;
+    }
   }
 
   &__content {
@@ -50,6 +73,74 @@
     flex: 1 1 auto;
     min-width: 0;
     overflow-wrap: anywhere;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    pre {
+      background-color: #23241f;
+      border-radius: 3px;
+      margin-block: 5px;
+      padding: 5px 10px;
+      color: #f8f8f2;
+      overflow: auto;
+    }
+
+    blockquote {
+      border-left: 4px solid rgb(var(--zn-border-color));
+      margin: 5px 0;
+      padding-left: 16px;
+    }
+
+    ol, ul {
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      list-style-type: none;
+      padding-left: 1em;
+      position: relative;
+    }
+
+    ol {
+      counter-reset: list-0 0;
+    }
+
+    ol > li {
+      counter-increment: list-0 1;
+    }
+
+    ul > li::before {
+      content: "•";
+    }
+
+    ol > li::before {
+      content: counter(list-0) ". ";
+    }
+
+    ol li::before, ul li::before {
+      display: inline-block;
+      margin-left: -1.5em;
+      margin-right: 0.3em;
+      text-align: right;
+      white-space: nowrap;
+      width: 1.2em;
+    }
+
+    img {
+      max-width: 100%;
+    }
+
+    a {
+      color: rgb(var(--zn-color-info));
+    }
+  }
+
+  &__meta {
+    @include wc.text-style(subheading-small);
   }
 
   &__actions {
@@ -58,3 +149,58 @@
     align-items: center;
   }
 }
+
+// Bubble tints by message origin / type.
+:host([agent-initiated]) .message__bubble {
+  background: var(--message-background, rgba(var(--zn-color-info), 0.1));
+}
+
+:host([action-type="internal"]) .message__bubble {
+  background: var(--message-background, rgba(var(--zn-color-warning), 0.15));
+}
+
+:host([action-type="error"]) .message__bubble {
+  background: var(--message-background, rgba(var(--zn-color-error), 0.12));
+}
+
+// Consecutive messages from the same participant are grouped together.
+:host(.message-continued) {
+  .message {
+    margin-top: 3px;
+  }
+
+  .message__avatar {
+    visibility: hidden;
+  }
+
+  .message__header {
+    display: none;
+  }
+}
+
+// System events — a centred, understated card.
+.message--system {
+  margin-top: var(--zn-spacing-x-small);
+}
+
+.system-card {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  padding: 6px 12px;
+  border-radius: var(--zn-border-radius);
+  border: 1px solid rgb(var(--zn-border-color));
+  font-size: 12px;
+  color: rgb(var(--zn-text-color));
+  min-height: 46px; // base height, matching message bubbles
+
+  &__text {
+    @include wc.text-style(paragraph);
+  }
+
+  &__time {
+    @include wc.text-style(subheading-small);
+    white-space: nowrap;
+  }
+}

package/src/components/chat-message/clean-message.ts

@@ -0,0 +1,46 @@
+function stringToHTML(str: string): HTMLElement {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(str, 'text/html');
+  return doc.body;
+}
+
+function removeScripts(node: HTMLElement) {
+  node.querySelectorAll('script').forEach((script) => {
+    script.remove();
+  });
+}
+
+function isPossiblyDangerousAttribute(name: string, value: string): boolean {
+  if (['src', 'href', 'xlink:href'].includes(name)) {
+    // eslint-disable-next-line no-script-url -- defensively matching the scheme we want to strip
+    if (value.includes('javascript:') || value.includes('data:text/html')) return true;
+  }
+
+  return name.startsWith('on');
+}
+
+function removeAttributes(elem: Element) {
+  const attributes = elem.attributes;
+  for (let i = attributes.length - 1; i >= 0; i--) {
+    if (isPossiblyDangerousAttribute(attributes[i].name, attributes[i].value)) {
+      elem.removeAttributeNode(attributes[i]);
+    }
+  }
+}
+
+function clean(html: Element) {
+  const nodes = html.children;
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    removeAttributes(node);
+    clean(node);
+  }
+}
+
+/** Strip scripts and event/handler attributes from an untrusted HTML string. */
+export function cleanHTML(message: string): string {
+  const html = stringToHTML(message);
+  removeScripts(html);
+  clean(html);
+  return html.innerHTML;
+}

package/src/components/editor/editor.scss

@@ -76,8 +76,8 @@
   }
 
   .ql-editor.ql-blank:before {
-    right: var(--zn-spacing-medium);
-    left: var(--zn-spacing-medium);
+    right: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
+    left: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
     color: rgb(var(--zn-text));
   }