@nyaruka/temba-components 0.162.0 → 0.163.0

package/package.json

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

package/src/display/Chat.ts

@@ -113,6 +113,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 +358,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 +378,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 +1335,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,6 +1441,9 @@ 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:')
@@ -1480,12 +1494,17 @@ 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(

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

package/src/flow/NodeEditor.ts

@@ -20,6 +20,7 @@ import {
   SPLIT_GROUP_METADATA
 } from './types';
 import { CustomEventType } from '../interfaces';
+import { Dialog } from '../layout/Dialog';
 import { generateUUID } from '../utils';
 import {
   formatIssueMessage,
@@ -477,6 +478,11 @@ export class NodeEditor extends RapidElement {
   @state()
   private originalFormData: FormData = {};
 
+  // snapshot of getComparableFormData(), refreshed on any non-user mutation
+  // (init, async resolve) — the baseline for detecting unsaved edits when
+  // dismissing via escape
+  private pristineFormData = '';
+
   @state()
   private errors: { [key: string]: string } = {};
 
@@ -515,24 +521,112 @@ export class NodeEditor extends RapidElement {
   private issuesByAction!: Map<string, FlowIssue[]>;
 
   private boundHandleEscape = this.handleEscapeKey.bind(this);
+  private boundSwallowEscapeUp = this.swallowEscapeUp.bind(this);
 
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
     document.addEventListener('keydown', this.boundHandleEscape);
+    document.addEventListener('keyup', this.boundSwallowEscapeUp, true);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
     document.removeEventListener('keydown', this.boundHandleEscape);
+    document.removeEventListener('keyup', this.boundSwallowEscapeUp, true);
   }
 
   private handleEscapeKey(event: KeyboardEvent): void {
     if (event.key === 'Escape' && this.isOpen) {
+      const path = event.composedPath();
+
+      // an escape aimed at an open select dropdown just closes the dropdown
+      if (
+        path.some(
+          (el) =>
+            el instanceof Element &&
+            el.tagName === 'TEMBA-SELECT' &&
+            (el as any).isOpen?.()
+        )
+      ) {
+        return;
+      }
+
+      if (!this.ownsEscape(path)) {
+        return;
+      }
+
+      if (
+        this.hasUnsavedChanges() &&
+        !window.confirm(Dialog.UNSAVED_CHANGES_MESSAGE)
+      ) {
+        return;
+      }
       this.handleCancel();
     }
   }
 
+  // an escape routed through a dialog other than our own (e.g. a nested
+  // dialog or modax opened from a field) belongs to that dialog; an escape
+  // with no dialog in its path (canvas or body focus) is ours to handle
+  private ownsEscape(path: EventTarget[]): boolean {
+    for (const el of path) {
+      if (el instanceof Element && el.tagName === 'TEMBA-DIALOG') {
+        return el === this.shadowRoot?.querySelector('temba-dialog');
+      }
+    }
+    return true;
+  }
+
+  // temba-dialog handles escape itself on KEYUP reaching its container, which
+  // would prompt a second time after the keydown handler above has already
+  // asked (or dismiss unprompted if its keyup ever arrived first). While the
+  // editor is open, escape within our own dialog is owned entirely by the
+  // keydown handler, so stop those keyups before the dialog sees them —
+  // but leave escapes belonging to a dialog layered above us alone.
+  private swallowEscapeUp(event: KeyboardEvent): void {
+    if (
+      event.key === 'Escape' &&
+      this.isOpen &&
+      this.ownsEscape(event.composedPath())
+    ) {
+      event.stopPropagation();
+    }
+  }
+
+  private hasUnsavedChanges(): boolean {
+    return this.getComparableFormData() !== this.pristineFormData;
+  }
+
+  // JSON of formData with array-editor scaffolding filtered out: array editors
+  // seed a blank row (carrying field defaults, e.g. an attachment type) into
+  // form data on first render, which must not count as a user edit
+  private getComparableFormData(): string {
+    const form = this.getConfig()?.form;
+    const comparable = { ...this.formData };
+
+    if (form) {
+      Object.entries(form).forEach(([fieldName, fieldConfig]) => {
+        const value = comparable[fieldName];
+        if (fieldConfig.type === 'array' && Array.isArray(value)) {
+          // same emptiness semantics as ArrayEditor.isEmptyItem
+          const isEmpty =
+            fieldConfig.isEmptyItem ||
+            ((item: any) => {
+              const values = Object.values(item || {});
+              return (
+                values.length === 0 ||
+                values.every((v) => v === undefined || v === null || v === '')
+              );
+            });
+          comparable[fieldName] = value.filter((item: any) => !isEmpty(item));
+        }
+      });
+    }
+
+    return JSON.stringify(comparable);
+  }
+
   willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
     if (
@@ -719,14 +813,24 @@ export class NodeEditor extends RapidElement {
         this.formData[key] = { ...value };
       }
     });
+
+    // fresh form, so nothing to warn about discarding yet
+    this.pristineFormData = this.getComparableFormData();
   }
 
   private async resolveFormData(): Promise<void> {
     const config = this.getConfig();
     if (!config?.resolveFormData) return;
 
+    const input = this.formData;
     try {
-      const resolved = await config.resolveFormData(this.formData);
+      const resolved = await config.resolveFormData(input);
+
+      // if the user edited while the resolve was in flight, applying the
+      // stale result would overwrite their edit — and rebasing the baseline
+      // below would then mask the loss as a clean form
+      if (this.formData !== input) return;
+
       if (resolved && resolved !== this.formData) {
         this.formData = resolved;
         this.processFormDataForEditing();
@@ -749,6 +853,9 @@ export class NodeEditor extends RapidElement {
           });
         }
 
+        // resolving isn't a user edit; rebase the unsaved-changes baseline
+        this.pristineFormData = this.getComparableFormData();
+
         this.requestUpdate();
       }
     } catch (error) {
@@ -2690,6 +2797,7 @@ export class NodeEditor extends RapidElement {
         .open="${this.isOpen}"
         .originX=${this.dialogOrigin?.x ?? null}
         .originY=${this.dialogOrigin?.y ?? null}
+        .checkForChanges=${() => this.hasUnsavedChanges()}
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"

package/src/layout/Dialog.ts

@@ -20,6 +20,9 @@ export class DialogButton {
 }
 
 export class Dialog extends ResizeElement {
+  public static readonly UNSAVED_CHANGES_MESSAGE =
+    'You have unsaved changes. Are you sure you want to discard them?';
+
   static get widths(): { [size: string]: string } {
     return {
       small: '400px',
@@ -273,12 +276,29 @@ export class Dialog extends ResizeElement {
   @property({ attribute: false })
   onButtonClicked: (button: Button) => void;
 
+  // when set, consulted instead of the built-in edit tracking to decide
+  // whether escape should confirm before dismissing — for owners that can
+  // compare actual values (and so ignore edits that were reverted)
+  @property({ attribute: false })
+  checkForChanges?: () => boolean;
+
   @property({ type: Number })
   originX: number | null = null;
 
   @property({ type: Number })
   originY: number | null = null;
 
+  // whether any input/change has bubbled from our content since opening;
+  // the default signal that escape would discard the user's edits
+  private contentEdited = false;
+
+  // elements the user has actually interacted with (pointer or key) since the
+  // dialog opened; components fire synthetic change events on programmatic
+  // value changes (initialization of preset values, async option resolution),
+  // so an input/change only counts as an edit when it originates from an
+  // element the user has touched
+  private interactedElements = new WeakSet<EventTarget>();
+
   scrollOffset: any = 0;
 
   public constructor() {
@@ -322,6 +342,8 @@ export class Dialog extends ResizeElement {
     super.updated(changes);
 
     if (changes.has('open')) {
+      this.contentEdited = false;
+      this.interactedElements = new WeakSet<EventTarget>();
       const body = document.querySelector('body');
 
       if (this.open) {
@@ -457,8 +479,33 @@ export class Dialog extends ResizeElement {
     return this.shadowRoot.querySelector(`temba-button[primary]`);
   }
 
+  public hasUnsavedChanges(): boolean {
+    return this.checkForChanges ? this.checkForChanges() : this.contentEdited;
+  }
+
+  private handleContentInteraction(event: Event) {
+    // the path covers the interacted element and its ancestors, so a change
+    // fired later by a containing component (e.g. a select whose inner input
+    // was clicked) still matches
+    event.composedPath().forEach((el) => this.interactedElements.add(el));
+  }
+
+  private handleContentEdited(event: Event) {
+    // only the originating element is checked (not its ancestors, which the
+    // paths of unrelated interactions also pass through)
+    if (this.interactedElements.has(event.composedPath()[0])) {
+      this.contentEdited = true;
+    }
+  }
+
   private handleKeyUp(event: KeyboardEvent) {
     if (event.key === 'Escape') {
+      if (
+        this.hasUnsavedChanges() &&
+        !window.confirm(Dialog.UNSAVED_CHANGES_MESSAGE)
+      ) {
+        return;
+      }
       this.clickCancel();
     }
   }
@@ -533,6 +580,10 @@ export class Dialog extends ResizeElement {
           }"></div>
           <div
             @keyup=${this.handleKeyUp}
+            @keydown=${this.handleContentInteraction}
+            @pointerdown=${this.handleContentInteraction}
+            @input=${this.handleContentEdited}
+            @change=${this.handleContentEdited}
             style=${styleMap(dialogStyle)}
             class="dialog-container"
           >

package/src/live/ContactTimeline.ts

@@ -708,7 +708,11 @@ export class ContactTimeline extends EndpointMonitorElement {
     // message events display the message text; flow-bearing events show a
     // clickable flow pill linking to the flow (the "start" action is implied)
     const body = isMessage
-      ? html`<div class="title-text">${event.message}</div>`
+      ? html`<div class="title-text">
+          <temba-expression-highlight
+            >${event.message}</temba-expression-highlight
+          >
+        </div>`
       : event.flow
         ? html`<temba-label
             type="flow"