@nyaruka/temba-components 0.139.0 → 0.140.0

package/src/flow/types.ts

@@ -114,6 +114,8 @@ export interface NodeConfig extends FormConfig {
     rules?: {
       type:
         | 'has_number_between'
+        | 'has_number_eq'
+        | 'has_only_text'
         | 'has_string'
         | 'has_value'
         | 'has_not_value'
@@ -253,6 +255,12 @@ export interface MessageEditorFieldConfig extends BaseFieldConfig {
   disableCompletion?: boolean;
 }
 
+export interface MediaFieldConfig extends BaseFieldConfig {
+  type: 'media';
+  accept?: string; // MIME filter, e.g. 'audio/*'
+  endpoint?: string; // upload endpoint, defaults to DEFAULT_MEDIA_ENDPOINT
+}
+
 export type FieldConfig =
   | TextFieldConfig
   | TextareaFieldConfig
@@ -260,7 +268,8 @@ export type FieldConfig =
   | KeyValueFieldConfig
   | ArrayFieldConfig
   | CheckboxFieldConfig
-  | MessageEditorFieldConfig;
+  | MessageEditorFieldConfig
+  | MediaFieldConfig;
 
 // Layout configurations for better form organization
 // Recursive layout system - any layout item can contain other layout items
@@ -276,6 +285,8 @@ export interface RowLayoutConfig {
   gap?: string; // CSS gap value, defaults to '1rem'
   label?: string; // optional label for the entire row
   helpText?: string; // optional help text for the entire row
+  inlineLabels?: Record<string, string>; // map of field name to inline label text
+  marginBottom?: string; // CSS margin-bottom for spacing below the row
 }
 
 export interface GroupLayoutConfig {
@@ -288,10 +299,21 @@ export interface GroupLayoutConfig {
   getGroupValueCount?: (formData: FormData) => number; // optional function to get count for bubble display
 }
 
+export interface SpacerLayoutConfig {
+  type: 'spacer';
+}
+
+export interface TextLayoutConfig {
+  type: 'text';
+  text: string;
+}
+
 export type LayoutItem =
   | FieldItemConfig
   | RowLayoutConfig
   | GroupLayoutConfig
+  | SpacerLayoutConfig
+  | TextLayoutConfig
   | string; // string is shorthand for field
 
 /**

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>`;
     }
@@ -367,6 +378,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

@@ -95,8 +95,9 @@ 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 +112,7 @@ export class Dialog extends ResizeElement {
       .dialog-body {
         background: #fff;
         overflow-y: auto;
+        overflow-x: hidden;
         flex-grow: 1;
       }
 
@@ -124,7 +126,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 +255,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 +297,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/live/TembaChart.ts

@@ -759,7 +759,7 @@ export class TembaChart extends RapidElement {
   private getValueAxisConfig() {
     return {
       min: 0,
-      ...(this.showPercent && { max: this.getInflatedMax() }),
+      ...(this.showPercent && { max:this.getInflatedMax() }),
       stacked: true,
       grid: {
         color: 'rgba(0,0,0,0.04)',

package/src/simulator/Simulator.ts

@@ -148,6 +148,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;
@@ -1117,8 +1121,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 +1148,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.
@@ -1934,7 +1943,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>

package/src/store/AppState.ts

@@ -18,6 +18,59 @@ import { produce } from 'immer';
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
 
+/**
+ * Temporary: Reclassify nodes based on whether they contain terminal actions.
+ * - execute_actions nodes with a terminal action become "terminal"
+ * - terminal nodes that no longer have a terminal action become "execute_actions"
+ * This can be removed once we stop supporting terminal nodes.
+ */
+function reclassifyTerminalNodes(definition: FlowDefinition): void {
+  if (!definition?.nodes || !definition?._ui?.nodes) return;
+
+  for (const node of definition.nodes) {
+    const nodeUI = definition._ui.nodes[node.uuid];
+    if (!nodeUI) continue;
+
+    const hasTerminalAction = node.actions?.some(
+      (action) => (action as any).terminal === true
+    );
+
+    if (nodeUI.type === 'execute_actions' && hasTerminalAction) {
+      nodeUI.type = 'terminal' as any;
+    } else if (nodeUI.type === ('terminal' as any) && !hasTerminalAction) {
+      nodeUI.type = 'execute_actions';
+    }
+  }
+}
+
+/**
+ * Reclassify wait_for_response nodes that are actually voice-specific wait types.
+ * The server stores all voice waits as wait_for_response, but we detect the specific
+ * type from the router's wait hint:
+ * - hint.type === 'digits' && hint.count === 1 → wait_for_menu
+ * - hint.type === 'digits' (no count) → wait_for_digits
+ * - hint.type === 'audio' → wait_for_audio
+ */
+function reclassifyVoiceWaitNodes(definition: FlowDefinition): void {
+  if (!definition?.nodes || !definition?._ui?.nodes) return;
+
+  for (const node of definition.nodes) {
+    const nodeUI = definition._ui.nodes[node.uuid];
+    if (!nodeUI || nodeUI.type !== 'wait_for_response') continue;
+
+    const hint = node.router?.wait?.hint;
+    if (!hint) continue;
+
+    if (hint.type === 'digits' && hint.count === 1) {
+      nodeUI.type = 'wait_for_menu' as any;
+    } else if (hint.type === 'digits') {
+      nodeUI.type = 'wait_for_digits' as any;
+    } else if (hint.type === 'audio') {
+      nodeUI.type = 'wait_for_audio' as any;
+    }
+  }
+}
+
 /**
  * Sorts nodes by their position - first by y (top), then by x (left)
  */
@@ -65,11 +118,44 @@ export interface Language {
   name: string;
 }
 
+export interface FlowIssue {
+  type: string;
+  node_uuid: string;
+  action_uuid?: string;
+  description: string;
+  dependency?: {
+    key: string;
+    name: string;
+    type: string;
+  };
+}
+
 export interface FlowInfo {
   results: InfoResult[];
   dependencies: TypedObjectRef[];
   counts: { nodes: number; languages: number };
   locals: string[];
+  issues?: FlowIssue[];
+}
+
+function buildIssueMaps(issues: FlowIssue[] = []): {
+  byNode: Map<string, FlowIssue[]>;
+  byAction: Map<string, FlowIssue[]>;
+} {
+  const byNode = new Map<string, FlowIssue[]>();
+  const byAction = new Map<string, FlowIssue[]>();
+  for (const issue of issues) {
+    if (issue.action_uuid) {
+      const actionList = byAction.get(issue.action_uuid) || [];
+      actionList.push(issue);
+      byAction.set(issue.action_uuid, actionList);
+    } else {
+      const nodeList = byNode.get(issue.node_uuid) || [];
+      nodeList.push(issue);
+      byNode.set(issue.node_uuid, nodeList);
+    }
+  }
+  return { byNode, byAction };
 }
 
 export interface FlowContents {
@@ -100,6 +186,8 @@ export interface Activity {
 export interface AppState {
   flowDefinition: FlowDefinition;
   flowInfo: FlowInfo;
+  issuesByNode: Map<string, FlowIssue[]>;
+  issuesByAction: Map<string, FlowIssue[]>;
 
   languageCode: string;
   languageNames: { [code: string]: Language };
@@ -174,6 +262,8 @@ export const zustand = createStore<AppState>()(
       workspace: null,
       flowDefinition: null,
       flowInfo: null,
+      issuesByNode: new Map(),
+      issuesByAction: new Map(),
       isTranslating: false,
       viewingRevision: false,
       dirtyDate: null,
@@ -201,10 +291,15 @@ export const zustand = createStore<AppState>()(
           throw new Error('Network response was not ok');
         }
         const data = (await response.json()) as FlowContents;
+        reclassifyTerminalNodes(data.definition);
+        reclassifyVoiceWaitNodes(data.definition);
+        const issueMaps = buildIssueMaps(data.info?.issues);
         set({
           flowInfo: data.info,
           flowDefinition: data.definition,
-          viewingRevision
+          viewingRevision,
+          issuesByNode: issueMaps.byNode,
+          issuesByAction: issueMaps.byAction
         });
       },
 
@@ -295,10 +390,16 @@ export const zustand = createStore<AppState>()(
             nodes: [...(flow.definition.nodes || [])]
           };
           state.flowInfo = flow.info;
+          const issueMaps = buildIssueMaps(flow.info?.issues);
+          state.issuesByNode = issueMaps.byNode;
+          state.issuesByAction = issueMaps.byAction;
           // Reset to the flow's default language when loading a new flow
           state.languageCode = flowLang;
           state.isTranslating = false;
 
+          reclassifyTerminalNodes(state.flowDefinition);
+          reclassifyVoiceWaitNodes(state.flowDefinition);
+
           // Sort nodes by position when loading flow
           if (state.flowDefinition?.nodes && state.flowDefinition?._ui?.nodes) {
             sortNodesByPosition(
@@ -312,6 +413,9 @@ export const zustand = createStore<AppState>()(
       setFlowInfo: (info: FlowInfo) => {
         set((state: AppState) => {
           state.flowInfo = info;
+          const issueMaps = buildIssueMaps(info?.issues);
+          state.issuesByNode = issueMaps.byNode;
+          state.issuesByAction = issueMaps.byAction;
         });
       },
 

package/src/store/flow-definition.d.ts

@@ -28,6 +28,7 @@ export type ActionType =
   | 'send_email'
   | 'send_broadcast'
   | 'enter_flow'
+  | 'terminal'
   | 'start_session'
   | 'transfer_airtime'
   | 'split_by_airtime'
@@ -152,6 +153,7 @@ export interface SendBroadcast extends Action {
 
 export interface EnterFlow extends Action {
   flow: NamedObject;
+  terminal?: boolean;
 }
 
 export interface StartSession extends Action {