@nyaruka/temba-components 0.163.0 → 0.164.0

package/package.json

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

package/src/display/Chat.ts

@@ -5,6 +5,7 @@ import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { TicketEvent } from '../events';
 import { DEFAULT_AVATAR } from '../webchat/assets';
+import { attachmentAsString } from '../utils';
 
 const BATCH_TIME_WINDOW = 60 * 60 * 1000;
 const SCROLL_FETCH_BUFFER = 200; // pixels from top
@@ -1446,7 +1447,7 @@ export class Chat extends RapidElement {
 
     // check if message has location attachment and text is just coordinates
     const hasLocationAttachment = message.msg.attachments?.some((att) =>
-      att.startsWith('geo:')
+      attachmentAsString(att).startsWith('geo:')
     );
     const textIsCoordinates =
       hasLocationAttachment &&
@@ -1510,7 +1511,7 @@ export class Chat extends RapidElement {
           ${(message.msg.attachments || []).map(
             (attachment) =>
               html`<temba-thumbnail
-                attachment="${attachment}"
+                attachment="${attachmentAsString(attachment)}"
               ></temba-thumbnail>`
           )}
         </div>

package/src/display/Lightbox.ts

@@ -1,59 +1,65 @@
 import { css, html, PropertyValueMap } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
-import { styleMap } from 'lit-html/directives/style-map.js';
 
 /**
- * This component relies on a bit of sleight of hand magic
- * to achieve it's effect. As such, it requires the use of
- * computed animation times and window.setTimeout().
+ * A full-screen viewer for an image attachment. `showElement` is handed the
+ * element that was clicked (a raw <img> or a temba-thumbnail exposing a `url`),
+ * and we present that image centered and contained within the viewport with a
+ * short fade / scale-in. Clicking anywhere dismisses it.
  */
 export class Lightbox extends RapidElement {
   static get styles() {
     return css`
       :host {
-        z-index: 10000;
-        position: absolute;
+        position: fixed;
         top: 0;
         left: 0;
+        z-index: 10000;
       }
 
-      .mask {
+      /* a full-viewport layer that centers the image, catches the dismiss
+         click, and lays a light translucent mask over the page behind */
+      .backdrop {
+        position: fixed;
+        inset: 0;
         display: flex;
-        opacity: 0;
+        align-items: center;
+        justify-content: center;
         background: rgba(0, 0, 0, 0.5);
-        position: absolute;
-        height: 100svh;
-        width: 100svw;
+        opacity: 0;
         pointer-events: none;
+        transition: opacity var(--anim) ease;
       }
 
-      .zoom .mask {
+      .backdrop.zoom {
         opacity: 1;
         pointer-events: auto;
       }
 
-      .matte {
-        position: absolute;
-        transform: translate(400, 400) scale(3, 3);
-        border-radius: 2%;
-        overflow: hidden;
-        box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
+      img {
+        /* contain the image within the viewport at any aspect ratio, on
+           its own solid backing (so transparent images aren't see-through) */
+        box-sizing: border-box;
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: contain;
+        background: #fff;
+        padding: 6px;
+        border-radius: calc(var(--curvature) * 1.5);
+        box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.4);
+        transform: scale(0.85);
+        opacity: 0;
+        transition:
+          transform var(--anim) ease,
+          opacity var(--anim) ease;
       }
 
-      .download {
-        background: rgba(0, 0, 0, 0.5);
-        position: absolute;
-        display:flex;
-        align-items:center;
-        color:#fff;
-        padding:0.5em;
-        border-radius:var(--curvature);
-        background:rgba(0,0,0,0.5);
+      .zoom img {
+        transform: scale(1);
+        opacity: 1;
       }
-
-  }
     `;
   }
 
@@ -66,77 +72,41 @@ export class Lightbox extends RapidElement {
   @property({ type: Boolean })
   zoom = false;
 
-  @property({ type: Number })
-  zoomPct = 0.9;
-
-  private ele: HTMLElement;
-  private left: number;
-  private top: number;
-  private height: number;
-  private width: number;
-  private scale = 1;
-  private xTrans = 0;
-  private yTrans = 0;
+  @state()
+  private url = '';
 
   protected updated(
     changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
+    // mount first (opacity 0 / scaled down), then flip to zoom on the next
+    // tick so the transition to the visible state actually animates
     if (changed.has('show') && this.show) {
       window.setTimeout(() => {
         this.zoom = true;
       }, 0);
     }
 
+    // once zoomed out, wait for the fade to finish before unmounting the image
     if (changed.has('zoom') && !this.zoom && this.show) {
       window.setTimeout(() => {
-        this.show = false;
+        // unless a re-open during the fade-out already zoomed us back in
+        if (!this.zoom) {
+          this.show = false;
+        }
       }, this.animationTime);
     }
   }
 
   public showElement(ele: HTMLElement) {
-    // size our matte according to the ele's boundaries
-    const bounds = ele.getBoundingClientRect();
-    this.ele = ele.cloneNode() as HTMLElement;
-    (this.ele as any).zoom = true;
-
-    this.left = bounds.left;
-    this.top = bounds.top;
-    this.width = bounds.width;
-    this.height = bounds.height;
-
-    this.xTrans = 0;
-    this.yTrans = 0;
-    this.scale = 1;
-
-    let desiredWidth = this.width;
-    let desiredHeight = this.height;
-    let desiredScale = this.scale;
-
-    const maxHeight = window.innerHeight * this.zoomPct;
-    const maxWidth = window.innerWidth * this.zoomPct;
-
-    // if the width fits, constrain by height
-    if (this.width * (maxHeight / this.height) < maxWidth) {
-      desiredHeight = window.innerHeight * this.zoomPct;
-      desiredScale = desiredHeight / this.height;
-      desiredWidth = this.width * desiredScale;
+    // the clicked element is either a raw <img> or a temba-thumbnail that
+    // exposes the attachment url; take whichever gives us an image source
+    this.url = (ele as HTMLImageElement).src || (ele as any).url || '';
+    if (this.show) {
+      // already mounted (e.g. re-opened mid-dismissal) — re-zoom in place
+      this.zoom = true;
     } else {
-      desiredWidth = window.innerWidth * this.zoomPct;
-      desiredScale = desiredWidth / this.width;
-      desiredHeight = this.height * desiredScale;
+      this.show = true; // updated() flips zoom on the next tick
     }
-
-    const xGrowth = (desiredWidth - this.width) / 2;
-    const xDest = (window.innerWidth - desiredWidth) / 2;
-    this.xTrans = xDest - this.left + xGrowth;
-
-    const yGrowth = (desiredHeight - this.height) / 2;
-    const yDest = (window.innerHeight - desiredHeight) / 2;
-    this.yTrans = yDest - this.top + yGrowth;
-
-    this.scale = desiredScale;
-    this.show = true;
   }
 
   public handleClick() {
@@ -144,37 +114,15 @@ export class Lightbox extends RapidElement {
   }
 
   public render() {
-    const styles = {
-      transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`
-    };
-
-    if (this.show) {
-      styles['left'] = this.left + 'px';
-      styles['top'] = this.top + 'px';
-      styles['width'] = this.width + 'px';
-    }
-
-    if (this.zoom) {
-      styles['transform'] =
-        `translate(${this.xTrans}px, ${this.yTrans}px) scale(${this.scale}, ${this.scale})`;
-    }
-
     return html`
       <div
-        class=${getClasses({
-          container: true,
-          show: this.show,
-          zoom: this.zoom
-        })}
+        class=${getClasses({ backdrop: true, zoom: this.zoom })}
+        style="--anim: ${this.animationTime}ms"
         @click=${this.handleClick}
       >
-        <div
-          class=${getClasses({ mask: true })}
-          style="transition: all ${this.animationTime}ms; ease"
-        ></div>
-        <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>
-          ${this.show ? html`${this.ele}` : null}
-        </div>
+        ${this.show && this.url
+          ? html`<img src=${this.url} alt="attachment" />`
+          : null}
       </div>
     `;
   }

package/src/display/Thumbnail.ts

@@ -182,6 +182,11 @@ export class Thumbnail extends RapidElement {
   // audio player state
   private audio: HTMLAudioElement | null = null;
 
+  // set when an image attachment fails to load, so we fall back to an
+  // icon instead of the browser's broken-image glyph
+  @state()
+  private imageError = false;
+
   @state()
   private audioPlaying = false;
 
@@ -264,6 +269,8 @@ export class Thumbnail extends RapidElement {
 
     // convert our attachment to a url and label
     if (changes.has('attachment')) {
+      // a new attachment gets a fresh shot at loading its image
+      this.imageError = false;
       if (this.attachment) {
         const splitIndex = this.attachment.indexOf(':');
         if (splitIndex === -1) {
@@ -337,12 +344,27 @@ export class Thumbnail extends RapidElement {
     }
   }
 
-  public handleThumbnailClicked() {
-    if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {
-      window.setTimeout(() => {
-        const lightbox = document.querySelector('temba-lightbox') as Lightbox;
-        lightbox.showElement(this);
-      }, 100);
+  public handleThumbnailClicked(e?: Event) {
+    // a thumbnail click is a self-contained action (lightbox / open / play);
+    // don't let it bubble to a clickable ancestor (e.g. a list row that would
+    // otherwise navigate away instead of showing the attachment)
+    e?.stopPropagation();
+    if (
+      this.contentType === ThumbnailContentType.IMAGE &&
+      this.preview &&
+      !this.imageError
+    ) {
+      const lightbox = document.querySelector('temba-lightbox') as Lightbox;
+      if (lightbox) {
+        window.setTimeout(() => {
+          lightbox.showElement(this);
+        }, 100);
+      } else {
+        // no lightbox mounted on this page — just open the image. This must
+        // happen synchronously inside the click's user activation or popup
+        // blockers will eat it.
+        window.open(this.url, '_blank');
+      }
     } else if (this.contentType === ThumbnailContentType.LOCATION) {
       // open location in openstreetmap
       const osmUrl = `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=15/${this.latitude}/${this.longitude}`;
@@ -372,12 +394,17 @@ export class Thumbnail extends RapidElement {
           : ''}"
         url=${this.url}
       >
-        ${this.contentType === ThumbnailContentType.IMAGE && this.preview
+        ${this.contentType === ThumbnailContentType.IMAGE &&
+        this.preview &&
+        !this.imageError
           ? html`<div class=""><div class="download" @click=${this.handleDownload.bind(
               this
             )}><temba-icon size="1" style="color:#fff;" name="download"></temba-icon></div><img
           class="observe thumb ${this.contentType}"
           src="${this.url}"
+          @error=${() => {
+            this.imageError = true;
+          }}
         ></img></div>`
           : this.contentType === ThumbnailContentType.AUDIO
             ? html`<div class="audio-player">

package/src/interfaces.ts

@@ -54,6 +54,25 @@ export interface ScheduledEvent {
   message?: string;
 }
 
+// one event definition in a campaign's schedule, offset from a date field
+// on the contact - consumed by the temba-campaign-events component
+export interface CampaignScheduleEvent {
+  uuid: string;
+  type: 'message' | 'flow';
+  status: 'ready' | 'scheduling';
+  offset: number;
+  unit: string;
+  offset_display: string;
+  delivery_hour_display?: string;
+  relative_to: { key: string; name: string; system?: boolean };
+  flow?: ObjectReference;
+  message?: string;
+  count: number;
+  edit_url: string;
+  delete_url: string;
+  fires_url: string;
+}
+
 export interface NamedUser extends User {
   name: string;
 }
@@ -120,6 +139,59 @@ export interface Flow {
   activity: number[];
 }
 
+/** A single row in the campaign CRUDL list
+ * (`campaigns/campaign_list.html`). */
+export interface Campaign {
+  uuid: string;
+  name: string;
+  /** The contact group the campaign schedules against. */
+  group: ObjectReference;
+  /** Number of events (messages / flow starts) in the campaign. */
+  events: number;
+  /** Contacts currently in the campaign's group. */
+  contacts: number;
+  modified_on: string;
+}
+
+/** A single row in the trigger CRUDL list
+ * (`triggers/trigger_list.html`): what starts the flow (type +
+ * per-type details), any channel / group filters, and the flow it
+ * starts. Triggers have no uuid — rows key off the numeric id. */
+export interface Trigger {
+  id: number;
+  /** Trigger type slug — drives the leading row icon and the
+   * details cell (`keyword`, `catch_all`, `schedule`,
+   * `inbound_call`, `missed_call`, `new_conversation`, `referral`,
+   * `closed_ticket`, `opt_in`, `opt_out`). */
+  type: string;
+  /** The flow the trigger starts. */
+  flow: ObjectReference;
+  /** Channel the trigger is limited to, with its type icon. */
+  channel?: (ObjectReference & { icon?: string }) | null;
+  /** Groups the trigger is limited to. */
+  groups?: ObjectReference[];
+  /** Groups the trigger excludes. */
+  exclude_groups?: ObjectReference[];
+  /** Contacts a scheduled trigger starts directly. */
+  contacts?: ObjectReference[];
+  /** Keyword triggers only. */
+  keywords?: string[];
+  /** Keyword match type — `F` (starts with) or `O` (matches). */
+  match_type?: string | null;
+  /** Referral triggers only. */
+  referrer_id?: string | null;
+  /** Scheduled triggers only — `display` is the server-rendered
+   * human schedule ("each week on Monday"); `next_fire` is unset
+   * once the schedule is exhausted or paused. */
+  schedule?: {
+    repeat_period?: string;
+    display?: string;
+    next_fire?: string | null;
+  } | null;
+  priority?: number;
+  created_on?: string;
+}
+
 export interface Msg {
   /** Numeric id — present on persisted messages (the CRUDL list
    * keys rows off it); absent on outbound drafts. */
@@ -137,7 +209,10 @@ export interface Msg {
   /** Message type as exposed by the messages CRUDL endpoint
    * (`text` / `optin` / …); mirrors `type` for that surface. */
   msg_type?: string;
-  attachments: string[];
+  /** Attachments as exposed by the messages CRUDL endpoint, which
+   * serializes each as a `{content_type, url}` object; some other
+   * message surfaces carry them as `contentType:url` strings. */
+  attachments: (string | Attachment)[];
   /** Labels applied to the message. */
   labels?: ObjectReference[];
   /** The flow the message was sent from, when there is one. */
@@ -192,6 +267,8 @@ export interface ContactGroup {
 export interface URN {
   scheme: string;
   path: string;
+  display?: string | null;
+  channel?: ObjectReference | null;
 }
 
 export interface Group {
@@ -224,7 +301,7 @@ export interface Contact {
   uuid: string;
   stopped: boolean;
   blocked: boolean;
-  urns: string[];
+  urns: URN[];
   language?: string;
   fields: { [key: string]: string };
   groups: Group[];