@nyaruka/temba-components 0.158.3 → 0.159.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.158.3",
+  "version": "0.159.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -14,7 +14,6 @@
     "build": "rimraf dist && pnpm svg && tsc && rollup -c rollup.components.mjs ",
     "build-wc": "rollup -c rollup.webchat.mjs",
     "dev": "pnpm build && cp -R ./dist/* ../temba/rapidpro/node_modules/@nyaruka/temba-components/dist/ && cp -R ./dist/* ../floweditor/node_modules/@nyaruka/temba-components/dist/",
-    "postversion": "git push --tags && git push origin main",
     "pre-commit": "pnpm locale:extract && pnpm locale:build && pnpm svg && git add ./src/Icons.ts ./static/svg/index.svg ./xliff ./src/locales && lint-staged",
     "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore --ignore-pattern \"src/locales/\"",
     "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" \"!src/locales/**\" --config .prettierrc --write --ignore-path .gitignore",

package/src/Icons.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 // for cache busting we dynamically generate a fingerprint, use pnpm svg to update
-export const SVG_FINGERPRINT = '07fb603bff2d16af992a047dd03ab268';
+export const SVG_FINGERPRINT = 'ed78045b1cf74b0b9242822c54badf99';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -58,6 +58,7 @@ export enum Icon {
   delete = 'trash-03',
   delete_small = 'x',
   down = 'chevron-down',
+  down_double = 'chevron-down-double',
   download = 'download-01',
   drag = 'dots-grid',
   edit = 'edit-02',
@@ -135,6 +136,11 @@ export enum Icon {
   reset = 'flip-backward',
   resthooks = 'share-07',
   restore = 'play',
+  /** Restoring archived messages — moves them back to the inbox, so
+   * the inbox tray reads better here than the generic `restore`
+   * (which is `play` because flows/triggers/campaigns use it to mean
+   * "reactivate"). */
+  restore_messages = 'inbox-01',
   results_export = 'download-cloud-01',
   retry = 'refresh-cw-05',
   revisions = 'clock-rewind',
@@ -189,6 +195,7 @@ export enum Icon {
   triggers = 'signal-01',
   updated = 'edit-02',
   up = 'chevron-up',
+  up_double = 'chevron-up-double',
   upload = 'upload-cloud-01',
   upload_image = 'camera-01',
   usages = 'link-04',

package/src/display/Button.ts

@@ -10,6 +10,13 @@ export class Button extends LitElement {
         display: inline-flex;
         align-self: stretch;
         font-family: var(--font);
+        /* Match the styleguide's .ds Inter rendering — the stylistic
+           sets (ss01/cv11) and the "tnum 0" off-switch — so glyph
+           shapes line up with the design-system buttons. */
+        font-feature-settings:
+          'ss01',
+          'cv11',
+          'tnum' 0;
       }
 
       /* DS .btn-sm — sizing, type, transition, shape */
@@ -58,34 +65,38 @@ export class Button extends LitElement {
         font-size: 12px;
       }
 
-      /* DS .btn-primary — solid accent fill with a slightly darker
-         1px border so the visible box matches the secondary's
-         1px-bordered box. */
+      /* DS .btn-primary — solid accent fill with a faint top
+         highlight and a ground shadow so it sits a touch above the
+         surface. The base 1px transparent border stays in the box
+         model so the primary's footprint matches the secondary's. */
       .primary-button {
         background: var(--accent-600);
-        border-color: var(--accent-700);
         color: #fff;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.18),
+          0 1px 1px rgba(15, 22, 36, 0.1);
       }
       .primary-button:hover {
         background: var(--accent-700);
       }
 
-      /* DS .btn-secondary — surface bg with a 1px gray outline. */
+      /* Ghost-style secondary — transparent fill so it blends into
+         any surface (the dialog gutter's grey, a white card, etc.),
+         no border, with a semi-transparent wash on hover that shows
+         up regardless of the underlying colour. */
       .secondary-button {
-        background: var(--surface);
-        border-color: var(--border-strong);
+        background: transparent;
         color: var(--text-1);
       }
       .secondary-button:hover {
-        background: var(--sunken);
+        background: rgba(0, 0, 0, 0.05);
       }
 
-      /* affirmative + attention share DS .btn-primary chrome but tint
-         green; treat them as solid CTAs. */
+      /* Flat success fill — mirrors the DS .btn-danger chrome (no
+         lift), tinted green for go-ahead CTAs. */
       .attention-button,
       .affirmative {
         background: var(--success, #16a34a);
-        border-color: color-mix(in srgb, var(--success, #16a34a) 80%, black);
         color: #fff;
       }
       .attention-button:hover,
@@ -93,10 +104,9 @@ export class Button extends LitElement {
         background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
       }
 
-      /* DS .btn-danger */
+      /* DS .btn-danger — flat danger fill (no lift). */
       .destructive-button {
         background: var(--danger, #d03f3f);
-        border-color: color-mix(in srgb, var(--danger, #d03f3f) 80%, black);
         color: #fff;
       }
       .destructive-button:hover {
@@ -136,7 +146,7 @@ export class Button extends LitElement {
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
       }
       .secondary-button.active-button {
-        background: var(--sunken);
+        background: rgba(0, 0, 0, 0.08);
       }
 
       /* disabled */

package/src/display/Thumbnail.ts

@@ -428,7 +428,7 @@ export class Thumbnail extends RapidElement {
                       alt="Location preview"
                     />`
                   : html`<div
-                      style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
+                      style="padding:var(--thumb-icon-padding, 1em); background:rgba(0,0,0,.05);border-radius:var(--curvature);"
                     >
                       <temba-icon
                         size="1.5"

package/src/events/eventRenderers.ts

@@ -1,5 +1,6 @@
 import { html, TemplateResult } from 'lit';
 import {
+  AirtimeCreatedEvent,
   AirtimeTransferredEvent,
   CallEvent,
   ChatStartedEvent,
@@ -17,6 +18,7 @@ import { getLanguageName } from '../languages';
 import { oxfordFn } from '../utils';
 
 export enum Events {
+  AIRTIME_CREATED = 'airtime_created',
   AIRTIME_TRANSFERRED = 'airtime_transferred',
   BROADCAST_CREATED = 'broadcast_created',
   CALL_CREATED = 'call_created',
@@ -370,6 +372,30 @@ export const renderAirtimeTransferredEvent = (
   </div>`;
 };
 
+export const renderAirtimeCreatedEvent = (
+  event: AirtimeCreatedEvent
+): TemplateResult => {
+  const status = event._status?.status ?? 'created';
+  const amount = html`${valueText(event.amount)} ${event.currency}`;
+
+  switch (status) {
+    case 'reversed':
+      return html`<div>Airtime transfer reversed</div>`;
+    case 'rejected':
+    case 'cancelled':
+    case 'declined':
+      return html`<div>Airtime transfer failed</div>`;
+    case 'completed':
+      return html`<div style=${eventLineStyle}>
+        Transferred ${amount} of airtime
+      </div>`;
+    default:
+      return html`<div style=${eventLineStyle}>
+        Sending ${amount} of airtime
+      </div>`;
+  }
+};
+
 export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): TemplateResult => {
@@ -560,6 +586,9 @@ export const renderEvent = (
     case Events.WARNING:
       content = renderDiagnosticEvent(event, isSimulation);
       break;
+    case Events.AIRTIME_CREATED:
+      content = renderAirtimeCreatedEvent(event as AirtimeCreatedEvent);
+      break;
     case Events.AIRTIME_TRANSFERRED:
       content = renderAirtimeTransferredEvent(event as AirtimeTransferredEvent);
       break;

package/src/events.ts

@@ -90,6 +90,28 @@ export interface AirtimeTransferredEvent extends ContactEvent {
   amount: string;
 }
 
+export type AirtimeStatus =
+  | 'created'
+  | 'confirmed'
+  | 'rejected'
+  | 'cancelled'
+  | 'submitted'
+  | 'completed'
+  | 'reversed'
+  | 'declined';
+
+export interface AirtimeCreatedEvent extends ContactEvent {
+  sender: string;
+  recipient: string;
+  currency: string;
+  amount: string;
+  external_id?: string;
+  _status?: {
+    created_on: string;
+    status: AirtimeStatus;
+  };
+}
+
 export type CallStartedEvent = ContactEvent;
 
 export interface ContactHistoryPage {

package/src/interfaces.ts

@@ -36,7 +36,8 @@ export enum DateStyle {
 export enum ScheduledEventType {
   CampaignEvent = 'campaign_event',
   ScheduledBroadcast = 'scheduled_broadcast',
-  ScheduledTrigger = 'scheduled_trigger'
+  ScheduledTrigger = 'scheduled_trigger',
+  SentBroadcast = 'sent_broadcast'
 }
 
 export enum TicketStatus {
@@ -100,15 +101,53 @@ export interface FlowDetails {
   };
 }
 
+/** A single row in the flow CRUDL list (`flows/flow_list.html`).
+ * Distinct from {@link FlowDetails}, which is the per-flow editor
+ * payload — this is the lighter list-row shape. */
+export interface Flow {
+  uuid: string;
+  name: string;
+  /** Flow type — drives the leading row icon. */
+  type: 'messaging' | 'voice' | 'ivr' | 'background' | 'survey' | string;
+  runs: number;
+  ongoing: number;
+  /** Completion ratio in the range 0–1. */
+  completion: number;
+  has_issues: boolean;
+  status: 'active' | 'archived' | string;
+  labels: ObjectReference[];
+  /** Recent run counts, oldest to newest — rendered as a sparkline. */
+  activity: number[];
+}
+
 export interface Msg {
+  /** Numeric id — present on persisted messages (the CRUDL list
+   * keys rows off it); absent on outbound drafts. */
+  id?: number;
   text: string;
   status: string;
   channel: ObjectReference;
   quick_replies: string[];
   urn: string;
+  /** The message's contact — populated by the messages CRUDL
+   * endpoint. Carries whichever of name/urn the endpoint exposes. */
+  contact?: { uuid?: string; name?: string; urn?: string };
   direction: string;
   type: string;
+  /** Message type as exposed by the messages CRUDL endpoint
+   * (`text` / `optin` / …); mirrors `type` for that surface. */
+  msg_type?: string;
   attachments: string[];
+  /** Labels applied to the message. */
+  labels?: ObjectReference[];
+  /** The flow the message was sent from, when there is one. */
+  flow?: ObjectReference;
+  /** When the message was created. */
+  created_on?: string;
+  /** Permission- and retention-gated URL to this message's channel
+   * log. Present on the CRUDL list when the viewer can read logs and
+   * the message is within the retention window; absent otherwise. */
+  logs_url?: string;
   unsendable_reason?:
     | 'no_route'
     | 'contact_blocked'
@@ -326,5 +365,10 @@ export enum CustomEventType {
   RevisionsClosed = 'temba-revisions-closed',
   RowClick = 'temba-row-click',
   SelectionChange = 'temba-selection-change',
-  BulkAction = 'temba-bulk-action'
+  BulkAction = 'temba-bulk-action',
+  /** A restorable piece of component state changed (page, sort, …).
+   * Fired by lists so the host SPA can persist the state into the
+   * browser's history entry (typically via `history.replaceState`).
+   * Detail: `{ key: string, state: object }`. */
+  HistoryChange = 'temba-history-change'
 }

package/src/layout/PageHeader.ts

@@ -0,0 +1,338 @@
+import { css, html, PropertyValues, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { getUrl } from '../utils';
+import { designTokens } from '../styles/designTokens';
+import { ContentMenuItem, ContentMenuItemType } from '../list/ContentMenu';
+
+/** Request headers that ask the server for the page's content menu
+ * payload (`{ items: ContentMenuItem[] }`) — the rapidpro contract
+ * the standalone `temba-content-menu` also speaks. */
+const MENU_HEADERS = {
+  'X-Temba-Content-Menu': '1',
+  'X-Temba-Spa': '1'
+};
+
+/**
+ * Page header bar — a title (and optional subtitle) on the left and
+ * the page's content menu (action buttons + an overflow `⋮`) on the
+ * right, styled from the design tokens.
+ *
+ * Reusable on its own for any page that has a content menu, and
+ * embedded by {@link ContentList} as the list's header so a list
+ * page and a plain page share one header treatment. The menu is
+ * fetched from {@link contentMenuEndpoint}; clicking an item fires
+ * `temba-selection` (with the item + click origin) for the host to
+ * act on, mirroring `temba-content-menu`.
+ *
+ * The `actions` slot renders between the title and the content menu
+ * — list components slot their search / bulk-action controls there.
+ */
+export class PageHeader extends RapidElement {
+  static get styles() {
+    return css`
+      ${designTokens}
+
+      :host {
+        display: block;
+        font-family: var(--font);
+        /* Match the styleguide's .ds Inter rendering — the stylistic
+           sets (ss01/cv11) and the "tnum 0" off-switch — so glyph
+           shapes line up with the design-system buttons. */
+        font-feature-settings:
+          'ss01',
+          'cv11',
+          'tnum' 0;
+      }
+
+      /* Title on the left, actions + content menu on the right. */
+      .header {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap);
+        padding: 20px 0 16px 0;
+      }
+      .titles {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+      .title {
+        font-size: 15.5px;
+        font-weight: var(--w-semibold);
+        color: var(--text-1);
+        line-height: 1.3;
+      }
+      .subtitle {
+        font-size: 12.5px;
+        color: var(--text-3);
+        line-height: 1.3;
+        margin-top: 1px;
+      }
+      .actions {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: var(--text-2);
+        font-size: 13px;
+      }
+
+      /* Content-menu action buttons — match the design system's
+         .btn.btn-sm / .btn-primary / .btn-secondary so the inbox CTA
+         reads identically to the styleguide. 28px tall, regular
+         weight, 12.5px font, the same transitions and faint top
+         highlight + ground-shadow on the primary fill. */
+      .menu-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        /* border-box so height: 28px includes the 1px border the
+           same way .ds * does in the styleguide — otherwise the
+           border adds 2px and the button computes 2px taller. */
+        box-sizing: border-box;
+        height: 28px;
+        padding: 0 10px;
+        border: 1px solid var(--border-strong);
+        border-radius: var(--r-sm);
+        font-size: 12.5px;
+        font-weight: var(--w-regular);
+        letter-spacing: -0.005em;
+        cursor: pointer;
+        user-select: none;
+        background: var(--surface);
+        color: var(--text-1);
+        white-space: nowrap;
+        transition:
+          background 120ms,
+          border-color 120ms,
+          color 120ms,
+          box-shadow 120ms;
+      }
+      .menu-button:hover {
+        background: var(--sunken);
+      }
+      .menu-button.primary {
+        background: var(--accent-600);
+        border-color: transparent;
+        color: white;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.18),
+          0 1px 1px rgba(15, 22, 36, 0.1);
+      }
+      .menu-button.primary:hover {
+        background: var(--accent-700);
+      }
+      .menu-button[disabled] {
+        opacity: 0.45;
+        cursor: not-allowed;
+      }
+
+      /* Overflow toggle — the trailing ⋮ that opens the rest of the
+         menu items. Plain icon button, matches the list's Search. */
+      .menu-toggle {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+        padding: 6px;
+        border-radius: var(--r-sm);
+        color: var(--text-2);
+        --icon-color: currentColor;
+      }
+      .menu-toggle:hover {
+        background: var(--sunken);
+        color: var(--text-1);
+      }
+
+      /* Overflow dropdown — a column of menu items + dividers. */
+      .menu-list {
+        min-width: 200px;
+        padding: 6px 4px;
+        font-size: 13px;
+      }
+      .menu-item {
+        padding: 6px 12px;
+        border-radius: var(--r-sm);
+        cursor: pointer;
+        color: var(--text-1);
+        white-space: nowrap;
+      }
+      .menu-item:hover {
+        background: var(--accent-50);
+        color: var(--accent-800);
+      }
+      .menu-divider {
+        height: 1px;
+        background: var(--border);
+        margin: 6px 8px;
+      }
+    `;
+  }
+
+  /** Header title. A `title` slot overrides it for rich content. */
+  @property({ type: String, attribute: 'header-title' })
+  headerTitle = '';
+
+  /** Smaller subtitle under the title. A `subtitle` slot overrides. */
+  @property({ type: String })
+  subtitle = '';
+
+  /** GET endpoint for the page's content menu. The response shape is
+   * `{ items: ContentMenuItem[] }` (rapidpro's content-menu view). */
+  @property({ type: String, attribute: 'content-menu-endpoint' })
+  contentMenuEndpoint = '';
+
+  /** When true, the content menu (buttons + overflow) is not drawn —
+   * the host sets this while it's in a selection / bulk-action mode
+   * where the page menu isn't relevant. The menu data is kept, so
+   * clearing the flag restores the menu without a re-fetch. */
+  @property({ type: Boolean, attribute: 'hide-menu' })
+  hideMenu = false;
+
+  /** Buttons split out of the fetched menu (`as_button` items). */
+  @state()
+  private buttons: ContentMenuItem[] = [];
+
+  /** Remaining menu items, shown under the overflow `⋮`. */
+  @state()
+  private items: ContentMenuItem[] = [];
+
+  private pendingMenu: AbortController = null;
+
+  public disconnectedCallback(): void {
+    if (this.pendingMenu) {
+      this.pendingMenu.abort();
+    }
+    super.disconnectedCallback();
+  }
+
+  protected updated(changes: PropertyValues): void {
+    super.updated(changes);
+    if (changes.has('contentMenuEndpoint')) {
+      this.fetchContentMenu();
+    }
+  }
+
+  /** Public API — re-pull the content menu (e.g. after an action
+   * changes which items are available). */
+  public refresh(): void {
+    this.fetchContentMenu();
+  }
+
+  private async fetchContentMenu(): Promise<void> {
+    if (!this.contentMenuEndpoint) {
+      this.buttons = [];
+      this.items = [];
+      return;
+    }
+    if (this.pendingMenu) this.pendingMenu.abort();
+    const controller = new AbortController();
+    this.pendingMenu = controller;
+    try {
+      const response = await getUrl(
+        this.contentMenuEndpoint,
+        controller,
+        MENU_HEADERS
+      );
+      // Staleness guard — if another fetch superseded this one
+      // between the request firing and the response arriving, drop
+      // the result so the newer fetch wins (mirrors the pattern in
+      // ContactList.loadFields).
+      if (this.pendingMenu !== controller) return;
+      const menu = (response.json?.items as ContentMenuItem[]) || [];
+      this.buttons = menu.filter((item) => item.as_button);
+      this.items = menu.filter((item) => !item.as_button);
+      this.fireCustomEvent(CustomEventType.Loaded, {
+        buttons: this.buttons,
+        items: this.items
+      });
+    } catch (err) {
+      if ((err as DOMException)?.name !== 'AbortError') {
+        // eslint-disable-next-line no-console
+        console.error('content menu fetch failed', err);
+      }
+    } finally {
+      if (this.pendingMenu === controller) {
+        this.pendingMenu = null;
+      }
+    }
+  }
+
+  /** Fire `temba-selection` with the clicked item and the click
+   * origin — same payload the standalone content menu emits, so the
+   * host's existing menu handling keeps working. */
+  private handleItemClicked(item: ContentMenuItem, event: MouseEvent): void {
+    if (item.disabled) return;
+    const el = event.currentTarget as Element;
+    const rect = el?.getBoundingClientRect();
+    this.fireCustomEvent(CustomEventType.Selection, {
+      item,
+      event,
+      originX: rect ? rect.left + rect.width / 2 : event.clientX,
+      originY: rect ? rect.top : event.clientY
+    });
+  }
+
+  private renderContentMenu(): TemplateResult {
+    if (this.hideMenu) return html``;
+    return html`
+      ${this.buttons.map(
+        (button) => html`
+          <div
+            class="menu-button ${button.primary ? 'primary' : ''}"
+            ?disabled=${button.disabled}
+            @click=${(e: MouseEvent) => this.handleItemClicked(button, e)}
+          >
+            ${button.label}
+          </div>
+        `
+      )}
+      ${this.items.length > 0
+        ? html`
+            <temba-dropdown>
+              <div slot="toggle" class="menu-toggle">
+                <temba-icon name="menu" size="1.2"></temba-icon>
+              </div>
+              <div slot="dropdown" class="menu-list">
+                ${this.items.map((item) =>
+                  item.type === ContentMenuItemType.DIVIDER
+                    ? html`<div class="menu-divider"></div>`
+                    : html`<div
+                        class="menu-item"
+                        @click=${(e: MouseEvent) =>
+                          this.handleItemClicked(item, e)}
+                      >
+                        ${item.label}
+                      </div>`
+                )}
+              </div>
+            </temba-dropdown>
+          `
+        : null}
+    `;
+  }
+
+  public render(): TemplateResult {
+    const hasSubtitle =
+      this.subtitle || this.querySelector('[slot="subtitle"]');
+    return html`
+      <div class="header">
+        <div class="titles">
+          <div class="title">
+            <slot name="title">${this.headerTitle}</slot>
+          </div>
+          ${hasSubtitle
+            ? html`<div class="subtitle">
+                <slot name="subtitle">${this.subtitle}</slot>
+              </div>`
+            : null}
+        </div>
+        <div class="actions">
+          <slot name="actions"></slot>
+          ${this.renderContentMenu()}
+        </div>
+      </div>
+    `;
+  }
+}