@nyaruka/temba-components 0.139.0 → 0.141.0

package/src/flow/utils.ts

@@ -1,5 +1,14 @@
 import { html } from 'lit-html';
 import { NamedObject, FlowPosition } from '../store/flow-definition';
+import { FlowIssue } from '../store/AppState';
+
+export function formatIssueMessage(issue: FlowIssue): string {
+  if (issue.dependency) {
+    const name = issue.dependency.name || issue.dependency.key;
+    return `Cannot find a ${issue.dependency.type} for ${name}`;
+  }
+  return issue.description;
+}
 
 const GRID_SIZE = 20;
 
@@ -346,6 +355,25 @@ export const calculateReflowPositions = (
     currentBounds.set(b.uuid, { ...b });
   }
 
+  // A sacred node yields to an existing node at the top of the canvas when
+  // the sacred wasn't dropped above it. The existing node keeps its top
+  // position and the sacred node moves below instead.
+  for (const sacredUuid of [...sacredSet]) {
+    const sacred = currentBounds.get(sacredUuid);
+    if (!sacred) continue;
+
+    for (const [uuid, bounds] of currentBounds) {
+      if (uuid === sacredUuid || sacredSet.has(uuid)) continue;
+      if (!nodesOverlap(sacred, bounds)) continue;
+
+      if (sacred.top > bounds.top && bounds.top < MIN_NODE_SPACING) {
+        sacredSet.delete(sacredUuid);
+        sacredSet.add(uuid);
+        break;
+      }
+    }
+  }
+
   // Seed the queue with non-sacred nodes that overlap any sacred node
   const queue: string[] = [];
   const inQueue = new Set<string>();
@@ -387,11 +415,48 @@ export const calculateReflowPositions = (
 
     if (fixedOverlaps.length === 0) continue;
 
-    // Try each direction, pick the one with least disruption
+    // Determine direction constraints and axis bias from sacred node overlaps
+    const sacredOverlaps = fixedOverlaps.filter((f) => sacredSet.has(f.uuid));
+    const allowedDirections: Direction[] = [...DIRECTIONS];
+    let axisBias: 'vertical' | 'horizontal' | null = null;
+
+    if (sacredOverlaps.length > 0) {
+      // Rule 1: don't move a lower node above the sacred node
+      // Rule 2: don't move a right-of node to the left of the sacred node
+      for (const sacred of sacredOverlaps) {
+        if (collider.top > sacred.top) {
+          const idx = allowedDirections.indexOf('up');
+          if (idx !== -1) allowedDirections.splice(idx, 1);
+        }
+        if (collider.left > sacred.left) {
+          const idx = allowedDirections.indexOf('left');
+          if (idx !== -1) allowedDirections.splice(idx, 1);
+        }
+      }
+
+      // Rule 3: bias direction based on overlap shape
+      let totalOverlapWidth = 0;
+      let totalOverlapHeight = 0;
+      for (const sacred of sacredOverlaps) {
+        totalOverlapWidth +=
+          Math.min(collider.right, sacred.right) -
+          Math.max(collider.left, sacred.left);
+        totalOverlapHeight +=
+          Math.min(collider.bottom, sacred.bottom) -
+          Math.max(collider.top, sacred.top);
+      }
+      if (totalOverlapWidth > totalOverlapHeight) {
+        axisBias = 'vertical'; // wide overlap = nodes stacked = prefer up/down
+      } else if (totalOverlapHeight > totalOverlapWidth) {
+        axisBias = 'horizontal'; // tall overlap = nodes side-by-side = prefer left/right
+      }
+    }
+
+    // Try each allowed direction, pick the one with least disruption
     let bestPos: { left: number; top: number } | null = null;
     let bestScore = Infinity;
 
-    for (const dir of DIRECTIONS) {
+    for (const dir of allowedDirections) {
       const candidate = computeDirectionalClearance(
         collider,
         fixedOverlaps,
@@ -423,7 +488,21 @@ export const calculateReflowPositions = (
       const distance =
         Math.abs(candidate.left - collider.left) +
         Math.abs(candidate.top - collider.top);
-      const score = cascadeCount * 10000 + distance;
+
+      // When colliding with sacred nodes, use axis bias scoring;
+      // for cascading collisions (no sacred overlap), use original scoring
+      let score: number;
+      if (sacredOverlaps.length > 0) {
+        const isVerticalDir = dir === 'up' || dir === 'down';
+        const axisMatch =
+          axisBias === null ||
+          (axisBias === 'vertical' && isVerticalDir) ||
+          (axisBias === 'horizontal' && !isVerticalDir);
+        const axisPenalty = axisMatch ? 0 : 5000;
+        score = cascadeCount * 2000 + axisPenalty + distance;
+      } else {
+        score = cascadeCount * 10000 + distance;
+      }
 
       if (score < bestScore) {
         bestScore = score;

package/src/form/ArrayEditor.ts

@@ -648,13 +648,15 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
       }
 
       .removable .remove-btn {
-        visibility: hidden;
+        opacity: 0.3;
         cursor: default;
+        pointer-events: none;
       }
 
       .removable .drag-handle {
-        visibility: hidden;
+        opacity: 0.3;
         cursor: default;
+        pointer-events: none;
       }
 
       .drag-handle {

package/src/form/FieldRenderer.ts

@@ -8,8 +8,11 @@ import {
   CheckboxFieldConfig,
   MessageEditorFieldConfig,
   KeyValueFieldConfig,
-  ArrayFieldConfig
+  ArrayFieldConfig,
+  MediaFieldConfig
 } from '../flow/types';
+import { Attachment } from '../interfaces';
+import { DEFAULT_MEDIA_ENDPOINT } from '../utils';
 
 /**
  * FieldRenderer provides a consistent way to render field configurations
@@ -90,6 +93,14 @@ export class FieldRenderer {
           context
         );
 
+      case 'media':
+        return FieldRenderer.renderMedia(
+          fieldName,
+          config as MediaFieldConfig,
+          value,
+          context
+        );
+
       default:
         return html`<div>Unsupported field type: ${(config as any).type}</div>`;
     }
@@ -345,6 +356,13 @@ export class FieldRenderer {
     } = context;
 
     return html`<div class="form-field">
+      ${config.helpText
+        ? html`<div
+            style="color: #666; font-size: 13px; margin-bottom: 14px;"
+          >
+            ${config.helpText}
+          </div>`
+        : ''}
       <temba-array-editor
         name="${fieldName}"
         .label="${showLabel ? config.label : ''}"
@@ -367,6 +385,58 @@ export class FieldRenderer {
     </div>`;
   }
 
+  private static urlToAttachments(url: string): Attachment[] {
+    if (!url || !url.trim()) return [];
+    const filename = url.split('/').pop() || 'recording';
+    const ext = filename.split('.').pop()?.toLowerCase() || '';
+    const contentTypes: Record<string, string> = {
+      mp3: 'audio/mpeg',
+      wav: 'audio/wav',
+      ogg: 'audio/ogg',
+      m4a: 'audio/mp4'
+    };
+    return [
+      {
+        uuid: '',
+        content_type: contentTypes[ext] || 'audio/mpeg',
+        url,
+        filename,
+        size: 0,
+        error: ''
+      }
+    ];
+  }
+
+  private static renderMedia(
+    fieldName: string,
+    config: MediaFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    const { onChange, showLabel = true } = context;
+    const endpoint = config.endpoint || DEFAULT_MEDIA_ENDPOINT;
+    const attachments = FieldRenderer.urlToAttachments(value);
+
+    return html`
+      <div>
+        ${showLabel && config.label
+          ? html`<label
+              style="margin-bottom: 5px; margin-left: 4px; display: block; font-weight: 400; font-size: var(--label-size); letter-spacing: 0.05em; line-height: normal; color: var(--color-label, #777);"
+              >${config.label}</label
+            >`
+          : ''}
+        <temba-media-picker
+          name="${fieldName}"
+          accept="${config.accept || ''}"
+          endpoint="${endpoint}"
+          max="1"
+          .attachments="${attachments}"
+          @change="${onChange || (() => {})}"
+        ></temba-media-picker>
+      </div>
+    `;
+  }
+
   private static renderMessageEditor(
     fieldName: string,
     config: MessageEditorFieldConfig,

package/src/interfaces.ts

@@ -304,5 +304,6 @@ export enum CustomEventType {
   NodeSaved = 'temba-node-saved',
   NodeEditCancelled = 'temba-node-edit-cancelled',
   FollowSimulation = 'temba-follow-simulation',
-  ContactClicked = 'temba-contact-clicked'
+  ContactClicked = 'temba-contact-clicked',
+  ShowIssue = 'temba-show-issue'
 }

package/src/layout/Dialog.ts

@@ -96,7 +96,7 @@ export class Dialog extends ResizeElement {
 
       .dialog-mask .dialog-container {
         position: relative;
-        transition: transform var(--transition-speed) var(--bounce),
+        transition: transform var(--transition-speed) ease-in-out,
           opacity ease-in-out calc(var(--transition-speed) - 50ms);
         border-radius: var(--curvature);
         box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);
@@ -111,6 +111,7 @@ export class Dialog extends ResizeElement {
       .dialog-body {
         background: #fff;
         overflow-y: auto;
+        overflow-x: hidden;
         flex-grow: 1;
       }
 
@@ -124,7 +125,7 @@ export class Dialog extends ResizeElement {
       }
 
       .dialog-mask.dialog-animation-end .dialog-container {
-        transform: scale(1) !important;
+        transform: scale(1) translate(0, 0) !important;
       }
 
       .dialog-mask.dialog-ready .dialog-container {
@@ -253,6 +254,12 @@ export class Dialog extends ResizeElement {
   @property({ attribute: false })
   onButtonClicked: (button: Button) => void;
 
+  @property({ type: Number })
+  originX: number | null = null;
+
+  @property({ type: Number })
+  originY: number | null = null;
+
   scrollOffset: any = 0;
 
   public constructor() {
@@ -289,11 +296,49 @@ export class Dialog extends ResizeElement {
       const body = document.querySelector('body');
 
       if (this.open) {
-        this.animationEnd = true;
-        window.setTimeout(() => {
-          this.ready = true;
-          this.animationEnd = false;
-        }, 400);
+        if (this.originX != null && this.originY != null) {
+          // Spring-from-origin animation: measure final position, then
+          // set initial transform at click point and transition to center
+          const ox = this.originX;
+          const oy = this.originY;
+          this.originX = null;
+          this.originY = null;
+
+          requestAnimationFrame(() => {
+            const container = this.shadowRoot?.querySelector(
+              '.dialog-container'
+            ) as HTMLElement;
+            if (container) {
+              const rect = container.getBoundingClientRect();
+              const cx = rect.left + rect.width / 2;
+              const cy = rect.top + rect.height / 2;
+              const dx = ox - cx;
+              const dy = oy - cy;
+
+              // Disable transition so we can set the start position instantly
+              container.style.transition = 'none';
+              container.style.transform = `translate(${dx}px, ${dy}px) scale(0.2)`;
+              // Force reflow to register the start position
+              container.getBoundingClientRect();
+
+              // Re-enable transition and trigger animation to final position
+              container.style.transition = '';
+              this.animationEnd = true;
+              window.setTimeout(() => {
+                this.ready = true;
+                this.animationEnd = false;
+                container.style.transform = '';
+              }, 400);
+            }
+          });
+        } else {
+          // Default animation (no origin)
+          this.animationEnd = true;
+          window.setTimeout(() => {
+            this.ready = true;
+            this.animationEnd = false;
+          }, 400);
+        }
 
         this.scrollOffset = -document.documentElement.scrollTop;
         body.style.position = 'fixed';

package/src/layout/Modax.ts

@@ -148,9 +148,22 @@ export class Modax extends RapidElement {
 
   @property({ type: Boolean })
   suspendSubmit = false;
+
+  @property({ type: Number })
+  originX: number | null = null;
+
+  @property({ type: Number })
+  originY: number | null = null;
+
   // private cancelToken: CancelTokenSource;
 
-  private handleSlotClicked(): void {
+  private handleSlotClicked(event: MouseEvent): void {
+    const el = event.currentTarget as Element;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      this.originX = rect.left + rect.width / 2;
+      this.originY = rect.top;
+    }
     this.open = true;
   }
 
@@ -173,6 +186,8 @@ export class Modax extends RapidElement {
             // clear the modal body out when closed, note that js functions declared on the
             // window will hang around
             this.setBody('');
+            this.originX = null;
+            this.originY = null;
           }
         }
       }
@@ -441,11 +456,13 @@ export class Modax extends RapidElement {
         .header=${this.header}
         .buttons=${this.buttons}
         ?open=${this.open}
-        ?loading=${this.fetching}
+        ?loading=${this.fetching && this.originX == null}
         ?submitting=${this.submitting}
         ?destructive=${this.isDestructive()}
         ?noFocus=${true}
         ?disabled=${this.disabled}
+        .originX=${this.originX}
+        .originY=${this.originY}
         @temba-button-clicked=${this.handleDialogClick.bind(this)}
         @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}
       >

package/src/list/ContentMenu.ts

@@ -159,8 +159,22 @@ export class ContentMenu extends RapidElement {
     }
   }
 
+  private getTopCenter(el: Element): { x: number; y: number } {
+    const rect = el.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top };
+  }
+
   private handleItemClicked(item: ContentMenuItem, event: MouseEvent) {
-    this.fireCustomEvent(CustomEventType.Selection, { item, event });
+    const el = event.currentTarget as Element;
+    const origin = el
+      ? this.getTopCenter(el)
+      : { x: event.clientX, y: event.clientY };
+    this.fireCustomEvent(CustomEventType.Selection, {
+      item,
+      event,
+      originX: origin.x,
+      originY: origin.y
+    });
   }
 
   public render(): TemplateResult {

package/src/locales/es.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-  s73b4d70c02f4b4e0: `No options`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
+'s73b4d70c02f4b4e0': `No options`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/locales/fr.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/locales/locale-codes.ts

@@ -10,9 +10,18 @@ export const sourceLocale = `en`;
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export const targetLocales = [`es`, `fr`, `pt`] as const;
+export const targetLocales = [
+  `es`,
+  `fr`,
+  `pt`,
+] as const;
 
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export const allLocales = [`en`, `es`, `fr`, `pt`] as const;
+export const allLocales = [
+  `en`,
+  `es`,
+  `fr`,
+  `pt`,
+] as const;

package/src/locales/pt.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/simulator/Simulator.ts

@@ -5,6 +5,8 @@ import { css, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
 import { postJSON, fromCookie, generateUUIDv7 } from '../utils';
 import { getStore } from '../store/Store';
+import { AppState, fromStore, zustand } from '../store/AppState';
+import { FlowDefinition } from '../store/flow-definition';
 import { CustomEventType } from '../interfaces';
 import { Chat, ContactEvent, MessageType } from '../display/Chat';
 import { Events, renderEvent } from '../events/eventRenderers';
@@ -148,6 +150,10 @@ const SIMULATOR_SIZES: Record<string, SimulatorSize> = {
 export class Simulator extends RapidElement {
   static get styles() {
     return css`
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       :host {
         /* size-specific dimensions are set dynamically via inline styles */
         --phone-width: 300px;
@@ -688,6 +694,12 @@ export class Simulator extends RapidElement {
     `;
   }
 
+  @fromStore(zustand, (state: AppState) => state.flowDefinition)
+  private definition!: FlowDefinition;
+
+  @fromStore(zustand, (state: AppState) => state.viewingRevision)
+  private viewingRevision!: boolean;
+
   @property({ type: String })
   flow = '';
 
@@ -1117,8 +1129,12 @@ export class Simulator extends RapidElement {
           continue;
         }
 
-        // skip msg_created events without a proper msg property
-        if (rawEvent.type === 'msg_created' && !(rawEvent as any).msg) {
+        // skip msg_created/ivr_created events without a proper msg property
+        if (
+          (rawEvent.type === 'msg_created' ||
+            rawEvent.type === 'ivr_created') &&
+          !(rawEvent as any).msg
+        ) {
           continue;
         }
 
@@ -1140,7 +1156,8 @@ export class Simulator extends RapidElement {
           this.currentQuickReplies = (event as any).msg.quick_replies;
         }
 
-        const isMessage = event.type === 'msg_created';
+        const isMessage =
+          event.type === 'msg_created' || event.type === 'ivr_created';
         const msg = (event as any).msg;
 
         // Check if the event should be displayed.
@@ -1717,6 +1734,10 @@ export class Simulator extends RapidElement {
   }
 
   protected render(): TemplateResult {
+    if (this.viewingRevision || this.definition?.nodes.length === 0) {
+      return html``;
+    }
+
     const config = this.sizeConfig;
 
     // set CSS custom properties dynamically based on size
@@ -1934,7 +1955,7 @@ export class Simulator extends RapidElement {
         icon="simulator"
         label="Phone Simulator"
         color="#10b981"
-        order="3"
+        order="4"
         .hidden=${this.isVisible}
         @temba-button-clicked=${this.handleShow}
       ></temba-floating-tab>