@nyaruka/temba-components 0.156.17 → 0.157.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.17",
+  "version": "0.157.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/display/Chat.ts

@@ -67,6 +67,8 @@ export interface ObjectReference {
 interface User extends ObjectReference {
   avatar?: string;
   email: string;
+  first_name?: string;
+  last_name?: string;
 }
 
 export interface Msg {
@@ -153,6 +155,11 @@ export class Chat extends RapidElement {
         left: 0;
         right: 0;
         display: block;
+        /* The slot overlays the bottom of the chat history, so clicks
+           on the chat scrollbar or messages behind it must pass
+           through. Slotted footer content can opt back in with
+           pointer-events: auto on its interactive bits. */
+        pointer-events: none;
       }
 
       .block {
@@ -447,6 +454,9 @@ export class Chat extends RapidElement {
         display: none;
       }
 
+      /* Top/bottom scroll-shadow indicators. Decorative only — they
+         must not intercept clicks (would otherwise block the chat
+         scrollbar and the bottom edge of the messages area). */
       .messages:before {
         content: '';
         background: radial-gradient(
@@ -461,6 +471,7 @@ export class Chat extends RapidElement {
         width: 100%;
         transition: opacity var(--toggle-speed, 200ms) ease-out;
         z-index: 1;
+        pointer-events: none;
       }
 
       .messages:after {
@@ -480,6 +491,7 @@ export class Chat extends RapidElement {
         margin-right: 5em;
         transition: opacity var(--toggle-speed, 200ms) ease-out;
         z-index: 1;
+        pointer-events: none;
       }
 
       .bubble-wrap {
@@ -1262,6 +1274,8 @@ export class Chat extends RapidElement {
               <temba-user
                 uuid=${currentMsg._user?.uuid}
                 name=${name}
+                first_name=${currentMsg._user?.first_name}
+                last_name=${currentMsg._user?.last_name}
                 avatar=${currentMsg._user?.avatar}
                 ?system=${isSystem}
               >

package/src/display/Label.ts

@@ -1,13 +1,27 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import { getClasses } from '../utils';
 import { styleMap } from 'lit-html/directives/style-map.js';
+import { designTokens } from '../styles/designTokens';
+import {
+  pillVariants,
+  PILL_TYPES,
+  PILL_TYPE_ICONS
+} from '../styles/pillVariants';
 
 export default class Label extends LitElement {
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         display: inline-block;
+        /* Cap at parent width so a pill sitting in a constrained
+           container (e.g. a flow canvas node body) shrinks to fit
+           rather than overflowing. The slot/mask below have the
+           min-width:0 needed to let the ellipsis engage. */
+        max-width: 100%;
       }
 
       slot {
@@ -15,12 +29,19 @@ export default class Label extends LitElement {
         overflow-x: hidden;
         text-overflow: ellipsis;
         display: block;
+        /* Without min-width:0 the slot — as a flex item inside .mask —
+           refuses to shrink below its content size, defeating the
+           overflow/ellipsis. */
+        min-width: 0;
       }
 
       .mask {
         padding: 3px 8px;
         border-radius: 12px;
         display: flex;
+        /* Same reason as slot — let the mask shrink below its content
+           size so the inner slot can ellipsize. */
+        min-width: 0;
       }
 
       temba-icon {
@@ -43,6 +64,72 @@ export default class Label extends LitElement {
         text-shadow: none;
       }
 
+      /* DS pill mode — engaged when the consumer sets [type]. Overrides
+         the legacy chip chrome (shadow) and shape (12px radius) with
+         the design-system pill (flat, type-colored via .pill-{type},
+         1px border, 999px radius). Background/foreground/icon-color
+         are owned by pillVariants — we only set non-color chrome here
+         so we don't outrank the variant. */
+      .label[class*='pill-'] {
+        font-size: 11.5px;
+        font-weight: var(--w-regular);
+        /* border color is owned by .pill-{type} in pillVariants — only
+           set width/style here so we don't outrank the variant. */
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 999px;
+        box-shadow: none;
+      }
+      .label[class*='pill-'] .mask {
+        padding: 0 7px;
+        height: 20px;
+        align-items: center;
+        gap: 4px;
+        border-radius: 999px;
+      }
+      /* Hover tint pulled from the pill's own foreground (which is the
+         dark variant shade), so flow stays bluish, group stays purplish,
+         etc. — no grey wash. */
+      .label[class*='pill-'].clickable .mask:hover {
+        background: color-mix(in oklab, currentColor 10%, transparent);
+      }
+      .label[class*='pill-'] temba-icon {
+        margin-right: 0;
+        padding-bottom: 0;
+      }
+
+      /* Chip-style X button — matches the multi-select chip's
+         .remove-item. currentColor-tinted bg so it picks up the
+         pill variant's hue. Sits on the left, ahead of the icon. */
+      .label[class*='pill-'] .remove {
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        border-radius: 999px;
+        background: color-mix(in oklab, currentColor 25%, transparent);
+        color: inherit;
+        opacity: 0.8;
+        --icon-color: currentColor;
+      }
+      .label[class*='pill-'] .remove:hover {
+        opacity: 1;
+        background: color-mix(in oklab, currentColor 45%, transparent);
+      }
+
+      /* When a removable X is present, tighten the mask's left padding
+         so the X sits snug against the pill edge (matches the
+         multi-select chip's 4px left padding). Right padding stays so
+         the trailing icon/name keep their breathing room. */
+      .label[class*='pill-']:has(.remove) .mask {
+        padding-left: 4px;
+      }
+
       .danger {
         background: tomato;
         color: #fff;
@@ -79,6 +166,11 @@ export default class Label extends LitElement {
       .shadow {
         box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
       }
+
+      /* DS pill variants come last so .pill-{type} wins on source
+         order against equal-specificity legacy rules above (.label,
+         .danger, .primary, etc.). */
+      ${pillVariants}
     `;
   }
 
@@ -106,12 +198,47 @@ export default class Label extends LitElement {
   @property({ type: String })
   icon: string;
 
+  /**
+   * Design-system pill variant — `flow`, `group`, `contact`, `field`,
+   * `keyword`, `label`, or `neutral`. When set, switches the chrome to
+   * a flat DS pill (rounded 999px, type-colored). Stays the legacy
+   * shadowed label when unset, so existing consumers are unaffected.
+   */
+  @property({ type: String })
+  type: string;
+
+  /**
+   * Render a chip-style X button on the left of the pill. Clicking it
+   * fires a `temba-remove` event; the rest of the pill stays clickable
+   * for navigation as usual.
+   */
+  @property({ type: Boolean })
+  removable: boolean;
+
+  /**
+   * Accessible label for the remove button. Defaults to a localized
+   * "Remove", but consumers whose action verb differs (e.g.
+   * "Interrupt flow") should pass their own — the X button is the
+   * affordance for whatever action `temba-remove` triggers, so the
+   * accessible name should match.
+   */
+  @property({ type: String })
+  removeLabel: string;
+
   @property()
   backgroundColor: string;
 
   @property()
   textColor: string;
 
+  private handleRemove(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.dispatchEvent(
+      new CustomEvent('temba-remove', { bubbles: true, composed: true })
+    );
+  }
+
   public render(): TemplateResult {
     const labelStyle = {};
 
@@ -124,6 +251,22 @@ export default class Label extends LitElement {
       labelStyle['--icon-color'] = this.textColor;
     }
 
+    // Only emit `pill-${this.type}` if it's a recognized variant.
+    // An unknown value (or one containing whitespace, e.g.
+    // `"flow danger"` from a malformed template) would otherwise split
+    // into multiple classes and collide with internal modifiers
+    // (`.danger`, `.shadow`, `.clickable`, etc.) defined on `.label`.
+    const validType = this.type && PILL_TYPES.has(this.type);
+    const variantClass = validType ? `pill-${this.type}` : '';
+    // When the consumer sets a recognized `type` (group / flow / etc.)
+    // but doesn't supply an explicit `icon`, fall back to the type's
+    // default icon from PILL_TYPE_ICONS. Call sites then only need
+    // `type="group"` instead of `type="group" icon="group"`.
+    const resolvedIcon =
+      this.icon || (validType ? PILL_TYPE_ICONS[this.type] : undefined);
+
+    const removeAriaLabel = this.removeLabel || msg('Remove');
+
     return html`
       <div
         class="label ${getClasses({
@@ -134,11 +277,22 @@ export default class Label extends LitElement {
           shadow: this.shadow,
           danger: this.danger,
           dark: this.dark
-        })}"
+        })} ${variantClass}"
         style=${styleMap(labelStyle)}
       >
         <div class="mask">
-          ${this.icon ? html`<temba-icon name=${this.icon} />` : null}
+          ${this.removable
+            ? html`<button
+                class="remove"
+                @click=${this.handleRemove}
+                aria-label=${removeAriaLabel}
+              >
+                <temba-icon name="x" size="0.85"></temba-icon>
+              </button>`
+            : null}
+          ${resolvedIcon
+            ? html`<temba-icon name=${resolvedIcon} />`
+            : null}
           <slot></slot>
         </div>
       </div>

package/src/display/Options.ts

@@ -5,10 +5,13 @@ import { RapidElement, EventHandler } from '../RapidElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses, getScrollParent, throttle } from '../utils';
 import { msg } from '@lit/localize';
+import { designTokens } from '../styles/designTokens';
 
 export class Options extends RapidElement {
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         --transition-speed: 0;
       }
@@ -41,6 +44,10 @@ export class Options extends RapidElement {
         flex-grow: 1;
         height: 100%;
         border: none;
+        /* Block-mode is inline (ticket sidebar, etc.) — drop the
+           z-index so floating popups (selects, dropdowns) opened over
+           the block list always stack above its options. */
+        z-index: auto;
       }
 
       :host([block]) .options-scroll {
@@ -96,25 +103,75 @@ export class Options extends RapidElement {
         border: none;
       }
 
+      /* When shown, the popup is opaque and clickable. Keep the
+         high z-index from .options-container so the popup stacks
+         above neighboring widgets — e.g. embedded prefix labels of
+         later form fields, which sit absolutely positioned at the
+         top edge of their host element. */
       .show {
-        border: 1px solid var(--color-widget-border);
         opacity: 1;
-        z-index: 1;
         pointer-events: auto;
         margin-top: var(--options-margin-top);
       }
 
+      /* Floating popup border uses --focus-muted (not --color-focus)
+         so a parent field's error state — which overrides
+         --color-focus to red via .has-error — doesn't turn the
+         popup red. The popup stays blue regardless. Single source
+         of truth: --focus in designTokens. No halo here — the
+         dropdown is an attached panel, not its own focus indicator
+         (the parent select keeps its own halo). Block-mode renders
+         inline and skips this rule entirely. */
+      :host(:not([block])) .show {
+        border: 1px solid var(--temba-options-focus-border, var(--focus-muted));
+      }
+
+      /* Each option is a DS-style list row: flat, fixed height,
+         tight padding, no inter-item margin. Full-bleed background on
+         hover/focus → no border-radius (rounded corners would leave
+         visible gaps at the dropdown edges). */
       .option {
-        font-size: var(--temba-options-font-size);
-        padding: var(--temba-options-option-padding, 5px 10px);
-        border-radius: var(--temba-options-option-radius, 4px);
-        margin: var(--temba-options-option-margin, 0.3em);
+        font-size: var(--temba-options-font-size, 13.5px);
+        padding: var(--temba-options-option-padding, 0 var(--pad));
+        border-radius: var(--temba-options-option-radius, 0);
+        margin: var(--temba-options-option-margin, 0);
+        min-height: var(--temba-options-option-min-height, 32px);
+        display: flex;
+        align-items: center;
         cursor: pointer;
-        color: var(--color-text-dark);
+        color: var(--text-1);
         scroll-margin: 5px 0px;
         text-align: left;
       }
 
+      /* A single wrapping renderOption child stretches to fill the row
+         so custom templates (e.g. ones using justify-content:
+         space-between to right-align trailing badges) get the full
+         width to lay out in. Scoped to :only-child so a renderOption
+         that emits multiple top-level siblings keeps its natural
+         layout instead of getting an equal-width flex partition. */
+      .option > :only-child {
+        flex: 1;
+        min-width: 0;
+      }
+
+      /* Block-mode (inline, always-visible lists like the ticket
+         sidebar): inset every option uniformly from the container
+         and from each other (padding + flex gap), and re-add the
+         radius so the focused/active wash reads as a rounded pill
+         instead of a stripe. Rich custom renderOption content
+         (multi-line ticket cards, etc.) also wants more vertical
+         padding than the dropdown's compact rows. */
+      :host([block]) .options-scroll {
+        padding: 4px;
+        gap: 4px;
+      }
+      :host([block]) .option {
+        margin: 0;
+        padding: 8px var(--pad);
+        border-radius: var(--r-sm);
+      }
+
       .option * {
         user-select: none;
         -webkit-user-select: none;
@@ -169,20 +226,18 @@ export class Options extends RapidElement {
         max-height: 1.1em;
       }
 
-      .option:hover {
-        background: var(
-          --temba-options-option-hover-bg,
-          var(--option-hover-bg)
-        );
-        color: var(--temba-options-option-hover-text, var(--option-hover-text));
-      }
-
+      /* The component syncs cursorIndex to pointer position on
+         mousemove, so .focused already follows the mouse. A
+         separate :hover rule would just create a second highlight
+         that flickers between rows on transition — keep only the
+         single focused/active state. */
       .option.focused {
         background: var(
           --temba-options-option-focus-bg,
           var(--color-selection)
         );
-        color: var(--temba-options-option-focus-text, var(--color-text-dark));
+        color: var(--temba-options-option-focus-text, var(--accent-700));
+        --icon-color: var(--accent-700);
       }
 
       .option.no-options {

package/src/display/TembaUser.ts

@@ -11,7 +11,10 @@ export const getFullName = (user: {
   first_name?: string;
   last_name?: string;
 }) => {
-  return user.name || [user.first_name, user.last_name].join(' ');
+  if (user.first_name || user.last_name) {
+    return [user.first_name, user.last_name].filter(Boolean).join(' ');
+  }
+  return user.name || '';
 };
 
 export class TembaUser extends RapidElement {
@@ -59,6 +62,12 @@ export class TembaUser extends RapidElement {
   @property({ type: String })
   name: string;
 
+  @property({ type: String })
+  first_name: string;
+
+  @property({ type: String })
+  last_name: string;
+
   @property({ type: String })
   email: string;
 
@@ -75,10 +84,19 @@ export class TembaUser extends RapidElement {
       this.bgimage = `url('${DEFAULT_AVATAR}') center / contain no-repeat`;
     }
 
-    if (changed.has('name')) {
-      if (this.name) {
-        this.bgcolor = colorHash.hex(this.name);
-        this.initials = extractInitials(this.name);
+    if (
+      changed.has('name') ||
+      changed.has('first_name') ||
+      changed.has('last_name')
+    ) {
+      const fullName = getFullName({
+        name: this.name,
+        first_name: this.first_name,
+        last_name: this.last_name
+      });
+      if (fullName) {
+        this.bgcolor = colorHash.hex(fullName);
+        this.initials = extractInitials(fullName);
       } else {
         this.bgcolor = '#e6e6e6';
         this.initials = '';

package/src/events/eventRenderers.ts

@@ -56,28 +56,100 @@ export enum Events {
   WEBHOOK_CALLED = 'webhook_called'
 }
 
+/**
+ * Renders a single DS pill of the given type. temba-label auto-resolves
+ * the icon from `type` (via PILL_TYPE_ICONS), so we don't pass `icon`
+ * unless the consumer explicitly overrides it. When `href` is provided
+ * the pill is wrapped in a navigation anchor (SPA goto); otherwise it's
+ * rendered inline as a plain pill. Single source of truth for the
+ * "entity pill in chat history" look — inline margin keeps wrapping
+ * airy, and inline style works regardless of host-page Tailwind reach.
+ */
+const renderEntityPill = (
+  pillType: string,
+  name: string,
+  opts: { href?: string; icon?: string } = {}
+): TemplateResult => {
+  const pill = opts.icon
+    ? html`<temba-label
+        icon=${opts.icon}
+        type=${pillType}
+        ?clickable=${!!opts.href}
+        style="margin: 1px 2px; vertical-align: middle;"
+        >${name}</temba-label
+      >`
+    : html`<temba-label
+        type=${pillType}
+        ?clickable=${!!opts.href}
+        style="margin: 1px 2px; vertical-align: middle;"
+        >${name}</temba-label
+      >`;
+  return opts.href
+    ? html`<a
+        href=${opts.href}
+        onclick="goto(event, this)"
+        style="vertical-align: middle;"
+        >${pill}</a
+      >`
+    : pill;
+};
+
+const groupPill = (item: any) =>
+  renderEntityPill('group', item.name, {
+    href: `/contact/group/${item.uuid}/`
+  });
+
+const flowPill = (flow: any) =>
+  renderEntityPill('flow', flow.name, {
+    href: `/flow/editor/${flow.uuid}/`
+  });
+
+const fieldPill = (field: any) => renderEntityPill('field', field.name);
+
+/**
+ * Renders a generic value as a neutral pill (white bg, gray border).
+ * Used for "after" values in update/change events — visually paired
+ * with the type pill on the left side of the line, without claiming
+ * a domain hue.
+ */
+const valuePill = (value: string | number) =>
+  html`<span
+    style="display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin: 1px 2px; border-radius: 999px; border: 1px solid var(--border-strong, #d2d6dc); background: #fff; color: var(--text-1, #1a1f26); font-size: 11.5px; font-weight: 400; line-height: 1; vertical-align: middle;"
+    >${value}</span
+  >`;
+
+/**
+ * Inline-flex wrapper style that text + pills share. Without it,
+ * plain text sits on its own baseline while vertical-align: middle
+ * pills sit slightly above and the text appears to "float". flex
+ * centering keeps the row of words and pills on one cross-axis.
+ */
+const eventLineStyle =
+  'display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 2px 4px;';
+
 const renderInfoList = (
   singular: string,
   plural: string,
   items: any[]
 ): TemplateResult => {
   if (items.length === 1) {
-    return html`<div>${singular} <strong>${items[0].name}</strong></div>`;
-  } else {
-    const list = items.map((item) => item.name);
-    if (list.length === 2) {
-      return html`<div>
-        ${plural} <strong>${list[0]}</strong> and <strong>${list[1]}</strong>
-      </div>`;
-    } else {
-      const last = list.pop();
-      const middle = list.map(
-        (name, index) =>
-          html`<strong>${name}</strong>${index < list.length - 1 ? ', ' : ''}`
-      );
-      return html`<div>${plural} ${middle}, and <strong>${last}</strong></div>`;
-    }
+    return html`<div style=${eventLineStyle}>
+      ${singular} ${groupPill(items[0])}
+    </div>`;
   }
+  if (items.length === 2) {
+    return html`<div style=${eventLineStyle}>
+      ${plural} ${groupPill(items[0])} and ${groupPill(items[1])}
+    </div>`;
+  }
+  // No commas between pills — the flex `gap` on eventLineStyle
+  // already provides visual separation, and a pill list reads as a
+  // single "set" rather than a sentence.
+  const middle = items.slice(0, -1).map((item) => groupPill(item));
+  const last = items[items.length - 1];
+  return html`<div style=${eventLineStyle}>
+    ${plural} ${middle} and ${groupPill(last)}
+  </div>`;
 };
 
 export const renderRunEvent = (event: RunEvent): TemplateResult => {
@@ -92,11 +164,8 @@ export const renderRunEvent = (event: RunEvent): TemplateResult => {
     }
   }
 
-  return html`<div>
-    ${verb}
-    <a href="/flow/editor/${event.flow.uuid}/"
-      ><strong>${event.flow.name}</strong></a
-    >
+  return html`<div style=${eventLineStyle}>
+    ${verb} ${flowPill(event.flow)}
   </div>`;
 };
 
@@ -112,27 +181,27 @@ export const renderChatStartedEvent = (
 
 export const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {
   return event.value
-    ? html`<div>
-        Updated <strong>${event.field.name}</strong> to
-        <strong>${event.value.text}</strong>
+    ? html`<div style=${eventLineStyle}>
+        Updated ${fieldPill(event.field)} to ${valuePill(event.value.text)}
       </div>`
-    : html`<div>Cleared <strong>${event.field.name}</strong></div>`;
+    : html`<div style=${eventLineStyle}>
+        Cleared ${fieldPill(event.field)}
+      </div>`;
 };
 
 export const renderNameChanged = (event: NameChangedEvent): TemplateResult => {
-  return html`<div>
-    Updated <strong>name</strong> to <strong>${event.name}</strong>
+  return html`<div style=${eventLineStyle}>
+    Updated name to ${valuePill(event.name)}
   </div>`;
 };
 
 export const renderContactURNsChanged = (
   event: URNsChangedEvent
 ): TemplateResult => {
-  return html`<div>
-    Updated <strong>URNs</strong> to
-    ${oxfordFn(
-      event.urns,
-      (urn: string) => html`<strong>${urn.split(':')[1].split('?')[0]}</strong>`
+  return html`<div style=${eventLineStyle}>
+    Updated URNs to
+    ${oxfordFn(event.urns, (urn: string) =>
+      valuePill(urn.split(':')[1].split('?')[0])
     )}
   </div>`;
 };
@@ -214,15 +283,11 @@ export const renderContactGroupsEvent = (
 ): TemplateResult => {
   const groupsEvent = event as ContactGroupsEvent;
   if (groupsEvent.groups_added) {
-    return renderInfoList(
-      'Added to group',
-      'Added to groups',
-      groupsEvent.groups_added
-    );
+    return renderInfoList('Added to', 'Added to', groupsEvent.groups_added);
   } else if (groupsEvent.groups_removed) {
     return renderInfoList(
-      'Removed from group',
-      'Removed from groups',
+      'Removed from',
+      'Removed from',
       groupsEvent.groups_removed
     );
   }
@@ -375,9 +440,7 @@ export const renderBroadcastCreated = (event: any): TemplateResult | null => {
 export const renderSessionTriggered = (event: any): TemplateResult | null => {
   const flow = event.flow;
   if (flow) {
-    return html`<div>
-      Started somebody else in <strong>${flow.name}</strong>
-    </div>`;
+    return html`<div>Started somebody else in ${flowPill(flow)}</div>`;
   }
   return null;
 };

package/src/excellent/caret-utils.ts

@@ -294,4 +294,3 @@ export function setCaretRange(
   selection.removeAllRanges();
   selection.addRange(range);
 }
-