@nyaruka/temba-components 0.162.0 → 0.164.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.162.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
@@ -113,6 +114,13 @@ export interface MsgEvent extends ContactEvent {
   _logs_url?: string;
 }
 
+// whether a message has nothing to show in its bubble (and isn't deleted)
+const isEmptyMsg = (event: MsgEvent): boolean =>
+  !event._deleted &&
+  !!event.msg &&
+  !event.msg.text &&
+  (event.msg.attachments || []).length === 0;
+
 const TIME_FORMAT = { hour: 'numeric', minute: '2-digit' } as any;
 const VERBOSE_FORMAT = {
   weekday: undefined,
@@ -351,13 +359,15 @@ export class Chat extends RapidElement {
         color: rgba(192, 24, 41, 0.6);
       }
 
-      .deleted .bubble {
+      .deleted .bubble,
+      .empty .bubble {
         background: #fff;
         color: #999;
         border: 1px solid #e0e0e0;
       }
 
-      .deleted .bubble .name {
+      .deleted .bubble .name,
+      .empty .bubble .name {
         color: #aaa;
       }
 
@@ -369,7 +379,8 @@ export class Chat extends RapidElement {
         font-size: 13px;
       }
 
-      .message-deleted {
+      .message-deleted,
+      .message-empty {
         font-style: italic;
         margin-bottom: 0;
         line-height: 1.2;
@@ -1325,13 +1336,14 @@ export class Chat extends RapidElement {
                   (statusClass === 'failed' || statusClass === 'errored'));
               const unsendableClass = hasError ? 'error' : '';
               const deletedClass = msgEvent._deleted ? 'deleted' : '';
+              const emptyClass = isEmptyMsg(msgEvent) ? 'empty' : '';
               const latestClass = index === msgIds.length - 1 ? 'latest' : '';
               const eventClass = msg._rendered ? 'is-event' : '';
               const noteClass = msg.type === 'ticket_note_added' ? 'note' : '';
               const matchClass =
                 this.highlightMessageUuid === msg.uuid ? 'search-match' : '';
               return html`<div
-                class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${latestClass} ${eventClass} ${noteClass} ${matchClass}"
+                class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${emptyClass} ${latestClass} ${eventClass} ${noteClass} ${matchClass}"
                 data-uuid=${msg.uuid || nothing}
               >
                 ${this.renderMessage(
@@ -1430,9 +1442,12 @@ export class Chat extends RapidElement {
         : message._deleted.user?.name || 'user'
       : null;
 
+    // messages with no text and no attachments get a muted placeholder
+    const isEmpty = isEmptyMsg(message);
+
     // 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 &&
@@ -1480,18 +1495,23 @@ export class Chat extends RapidElement {
                 Message deleted by ${deletedByText}
               </div>
             </div>`
-          : message.msg.text && !textIsCoordinates
+          : isEmpty
             ? html`<div class="bubble">
                 ${name ? html`<div class="name">${name}</div>` : null}
-                <div class="message-text">${messageText}</div>
+                <div class="message-empty">Empty Message</div>
               </div>`
-            : null}
+            : message.msg.text && !textIsCoordinates
+              ? html`<div class="bubble">
+                  ${name ? html`<div class="name">${name}</div>` : null}
+                  <div class="message-text">${messageText}</div>
+                </div>`
+              : null}
 
         <div class="attachments">
           ${(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/flow/FlowSearch.ts

@@ -315,6 +315,29 @@ function getTypeName(
   return 'Unknown';
 }
 
+/**
+ * Build the display fields for a result that matched on its type name
+ * (e.g. "email" matching a "Send Email" action). Shows the first content
+ * text as an unhighlighted preview when available, otherwise highlights
+ * the match within the type name itself. Returns null if the type name
+ * doesn't match the query.
+ */
+function makeTypeNameResult(
+  typeName: string,
+  query: string,
+  contentTexts: string[]
+): Pick<SearchResult, 'fullText' | 'matchStart' | 'matchLength'> | null {
+  const idx = typeName.toLowerCase().indexOf(query);
+  if (idx === -1) {
+    return null;
+  }
+  const preview = contentTexts.find((t) => t.trim());
+  if (preview) {
+    return { fullText: preview, matchStart: 0, matchLength: 0 };
+  }
+  return { fullText: typeName, matchStart: idx, matchLength: query.length };
+}
+
 /**
  * Get the localized name for a category, falling back to the original name.
  */
@@ -640,11 +663,13 @@ export class FlowSearch extends LitElement {
         if (node.actions) {
           for (const action of node.actions) {
             const actionConfig = ACTION_CONFIG[action.type];
+            const typeName = getTypeName(actionConfig, undefined);
             const searchAction = localizeAction(
               action,
               langLocalization?.[action.uuid]
             );
             const texts = getActionSearchTexts(searchAction);
+            let matched = false;
             for (const text of texts) {
               const lowerText = text.toLowerCase();
               const idx = lowerText.indexOf(query);
@@ -652,15 +677,31 @@ export class FlowSearch extends LitElement {
                 results.push({
                   nodeUuid: node.uuid,
                   action,
-                  typeName: getTypeName(actionConfig, undefined),
+                  typeName,
                   color: getColor(actionConfig, undefined),
                   fullText: text,
                   matchStart: idx,
                   matchLength: query.length
                 });
+                matched = true;
                 break; // One match per action is enough
               }
             }
+
+            // Fall back to matching the action type name (e.g. "email"
+            // matches all "Send Email" actions)
+            if (!matched) {
+              const typeMatch = makeTypeNameResult(typeName, query, texts);
+              if (typeMatch) {
+                results.push({
+                  nodeUuid: node.uuid,
+                  action,
+                  typeName,
+                  color: getColor(actionConfig, undefined),
+                  ...typeMatch
+                });
+              }
+            }
           }
         }
       } else {
@@ -679,6 +720,8 @@ export class FlowSearch extends LitElement {
           }
         }
 
+        const typeName = getTypeName(undefined, nodeConfig);
+        let matched = false;
         for (const text of nodeTexts) {
           const lowerText = text.toLowerCase();
           const idx = lowerText.indexOf(query);
@@ -686,15 +729,31 @@ export class FlowSearch extends LitElement {
             results.push({
               nodeUuid: node.uuid,
               action: null,
-              typeName: getTypeName(undefined, nodeConfig),
+              typeName,
               color: getColor(undefined, nodeConfig),
               fullText: text,
               matchStart: idx,
               matchLength: query.length
             });
+            matched = true;
             break; // One match per node is enough
           }
         }
+
+        // Fall back to matching the node type name (e.g. "wait" matches
+        // all "Wait for Response" nodes)
+        if (!matched) {
+          const typeMatch = makeTypeNameResult(typeName, query, nodeTexts);
+          if (typeMatch) {
+            results.push({
+              nodeUuid: node.uuid,
+              action: null,
+              typeName,
+              color: getColor(undefined, nodeConfig),
+              ...typeMatch
+            });
+          }
+        }
       }
     }
 
@@ -838,6 +897,11 @@ export class FlowSearch extends LitElement {
     // Replace newlines with spaces for single-line display
     const text = result.fullText.replace(/\n/g, ' ');
 
+    // Type-name matches show an unhighlighted content preview
+    if (matchLength === 0) {
+      return html`${text}`;
+    }
+
     // Show leading context before the match, then the match, then trailing.
     // CSS text-overflow:ellipsis clips the trailing text, so we keep the match
     // near the start. When the match is near the end of the text, show more