@nyaruka/temba-components 0.138.6 → 0.140.0

package/src/flow/utils.ts

@@ -1,5 +1,21 @@
 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;
+
+export function snapToGrid(value: number): number {
+  const snapped = Math.round(value / GRID_SIZE) * GRID_SIZE;
+  return Math.max(snapped, 0);
+}
 
 /**
  * Renders a single line item with optional icon
@@ -264,110 +280,251 @@ export const detectCollisions = (
   );
 };
 
+type Direction = 'down' | 'up' | 'right' | 'left';
+
+const DIRECTIONS: Direction[] = ['down', 'up', 'right', 'left'];
+
+/**
+ * Creates a new NodeBounds at a different position
+ */
+const makeBoundsAt = (
+  original: NodeBounds,
+  left: number,
+  top: number
+): NodeBounds => ({
+  ...original,
+  left,
+  top,
+  right: left + original.width,
+  bottom: top + original.height
+});
+
+/**
+ * Computes the minimum position needed to clear all fixed nodes in a given direction.
+ * Returns null if the direction is not viable (e.g., would require negative coordinates
+ * and still overlap).
+ */
+const computeDirectionalClearance = (
+  collider: NodeBounds,
+  fixedNodes: NodeBounds[],
+  direction: Direction
+): { left: number; top: number } | null => {
+  switch (direction) {
+    case 'down': {
+      const maxBottom = Math.max(...fixedNodes.map((f) => f.bottom));
+      const newTop = snapToGrid(maxBottom + MIN_NODE_SPACING);
+      return { left: collider.left, top: newTop };
+    }
+    case 'up': {
+      const minTop = Math.min(...fixedNodes.map((f) => f.top));
+      const newTop = snapToGrid(minTop - collider.height - MIN_NODE_SPACING);
+      if (newTop < 0) return { left: collider.left, top: 0 };
+      return { left: collider.left, top: newTop };
+    }
+    case 'right': {
+      const maxRight = Math.max(...fixedNodes.map((f) => f.right));
+      const newLeft = snapToGrid(maxRight + MIN_NODE_SPACING);
+      return { left: newLeft, top: collider.top };
+    }
+    case 'left': {
+      const minLeft = Math.min(...fixedNodes.map((f) => f.left));
+      const newLeft = snapToGrid(minLeft - collider.width - MIN_NODE_SPACING);
+      if (newLeft < 0) return { left: 0, top: collider.top };
+      return { left: newLeft, top: collider.top };
+    }
+  }
+};
+
 /**
- * Calculates the new positions needed to resolve all collisions
- * Nodes are only moved downward, never up, left, or right
- * Returns a map of node UUIDs to their new positions
+ * Calculates new positions to resolve all collisions using multi-directional reflow.
+ *
+ * Sacred nodes (the ones just dropped/created) keep their positions. All other
+ * colliding nodes are moved in whichever direction requires the least displacement
+ * and causes the fewest cascading collisions.
  */
 export const calculateReflowPositions = (
-  movedNodeUuid: string,
-  movedNodeBounds: NodeBounds,
-  allBounds: NodeBounds[],
-  droppedBelowMidpoint: boolean = false
+  sacredNodeUuids: string[],
+  allBounds: NodeBounds[]
 ): Map<string, FlowPosition> => {
   const newPositions = new Map<string, FlowPosition>();
+  const sacredSet = new Set(sacredNodeUuids);
 
-  // If dropped below midpoint, the moved node should move down instead
-  if (droppedBelowMidpoint) {
-    // Find all nodes that collide with the moved node
-    const collisions = detectCollisions(movedNodeBounds, allBounds);
-
-    if (collisions.length > 0) {
-      // Find the highest bottom position of all colliding nodes
-      const maxBottom = Math.max(...collisions.map((b) => b.bottom));
-
-      // Move the dropped node below all colliding nodes
-      const newTop = maxBottom + MIN_NODE_SPACING;
-      newPositions.set(movedNodeUuid, {
-        left: movedNodeBounds.left,
-        top: newTop
-      });
-
-      // Update the moved node bounds for further collision checks
-      movedNodeBounds = {
-        ...movedNodeBounds,
-        top: newTop,
-        bottom: newTop + movedNodeBounds.height
-      };
+  // Mutable map of current bounds, updated as collisions are resolved
+  const currentBounds = new Map<string, NodeBounds>();
+  for (const b of allBounds) {
+    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;
+      }
     }
   }
 
-  // Now check for any remaining collisions and move other nodes down
-  const processedNodes = new Set<string>();
-  processedNodes.add(movedNodeUuid);
+  // Seed the queue with non-sacred nodes that overlap any sacred node
+  const queue: string[] = [];
+  const inQueue = new Set<string>();
+
+  for (const sacredUuid of sacredSet) {
+    const sacred = currentBounds.get(sacredUuid);
+    if (!sacred) continue;
+    for (const [uuid, bounds] of currentBounds) {
+      if (sacredSet.has(uuid) || inQueue.has(uuid)) continue;
+      if (nodesOverlap(sacred, bounds)) {
+        queue.push(uuid);
+        inQueue.add(uuid);
+      }
+    }
+  }
 
-  // Keep checking for collisions until none remain
-  let hasCollisions = true;
+  const resolved = new Set<string>();
   let iterations = 0;
-  const maxIterations = 100; // Prevent infinite loops
+  const maxIterations = 200;
 
-  while (hasCollisions && iterations < maxIterations) {
-    hasCollisions = false;
+  while (queue.length > 0 && iterations < maxIterations) {
     iterations++;
+    const uuid = queue.shift()!;
 
-    // Check all nodes for collisions
-    for (const bounds of allBounds) {
-      if (processedNodes.has(bounds.uuid)) {
-        continue;
+    if (resolved.has(uuid)) continue;
+
+    const collider = currentBounds.get(uuid)!;
+
+    // Find all fixed nodes (sacred + already-resolved) that overlap this node
+    const fixedOverlaps: NodeBounds[] = [];
+    for (const [otherUuid, otherBounds] of currentBounds) {
+      if (otherUuid === uuid) continue;
+      if (sacredSet.has(otherUuid) || resolved.has(otherUuid)) {
+        if (nodesOverlap(collider, otherBounds)) {
+          fixedOverlaps.push(otherBounds);
+        }
       }
+    }
 
-      // Use original bounds since we skip already processed nodes
-      const currentBounds = bounds;
+    if (fixedOverlaps.length === 0) continue;
 
-      // Check if this node collides with the moved node or any already repositioned nodes
-      let collisionFound = false;
-      let maxCollisionBottom = 0;
+    // 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;
 
-      // Check against moved node
-      if (nodesOverlap(currentBounds, movedNodeBounds)) {
-        collisionFound = true;
-        maxCollisionBottom = Math.max(
-          maxCollisionBottom,
-          movedNodeBounds.bottom
-        );
+    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
+      }
+    }
 
-      // Check against other repositioned nodes
-      for (const [otherUuid, otherPosition] of newPositions.entries()) {
-        if (otherUuid === bounds.uuid) continue;
-
-        const otherBounds = allBounds.find((b) => b.uuid === otherUuid);
-        if (!otherBounds) continue;
-
-        const otherUpdatedBounds = {
-          ...otherBounds,
-          top: otherPosition.top,
-          bottom: otherPosition.top + otherBounds.height
-        };
-
-        if (nodesOverlap(currentBounds, otherUpdatedBounds)) {
-          collisionFound = true;
-          maxCollisionBottom = Math.max(
-            maxCollisionBottom,
-            otherUpdatedBounds.bottom
-          );
+    // 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 allowedDirections) {
+      const candidate = computeDirectionalClearance(
+        collider,
+        fixedOverlaps,
+        dir
+      );
+      if (!candidate) continue;
+
+      const candidateBounds = makeBoundsAt(
+        collider,
+        candidate.left,
+        candidate.top
+      );
+
+      // Verify no overlap with any sacred or resolved node
+      let stillOverlaps = false;
+      let cascadeCount = 0;
+      for (const [otherUuid, otherBounds] of currentBounds) {
+        if (otherUuid === uuid) continue;
+        if (!nodesOverlap(candidateBounds, otherBounds)) continue;
+
+        if (sacredSet.has(otherUuid) || resolved.has(otherUuid)) {
+          stillOverlaps = true;
+          break;
         }
+        cascadeCount++;
+      }
+      if (stillOverlaps) continue;
+
+      const distance =
+        Math.abs(candidate.left - collider.left) +
+        Math.abs(candidate.top - collider.top);
+
+      // 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 (collisionFound) {
-        // Move this node down below the collision
-        const newTop = maxCollisionBottom + MIN_NODE_SPACING;
-        newPositions.set(bounds.uuid, {
-          left: bounds.left,
-          top: newTop
-        });
-        hasCollisions = true;
-        processedNodes.add(bounds.uuid);
+      if (score < bestScore) {
+        bestScore = score;
+        bestPos = candidate;
+      }
+    }
+
+    if (bestPos) {
+      newPositions.set(uuid, { left: bestPos.left, top: bestPos.top });
+      const newBounds = makeBoundsAt(collider, bestPos.left, bestPos.top);
+      currentBounds.set(uuid, newBounds);
+      resolved.add(uuid);
+
+      // Enqueue any new cascading collisions
+      for (const [otherUuid, otherBounds] of currentBounds) {
+        if (otherUuid === uuid) continue;
+        if (sacredSet.has(otherUuid) || resolved.has(otherUuid)) continue;
+        if (inQueue.has(otherUuid)) continue;
+        if (nodesOverlap(newBounds, otherBounds)) {
+          queue.push(otherUuid);
+          inQueue.add(otherUuid);
+        }
       }
     }
   }

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

@@ -303,5 +303,7 @@ export enum CustomEventType {
   NodeEditRequested = 'temba-node-edit-requested',
   NodeSaved = 'temba-node-saved',
   NodeEditCancelled = 'temba-node-edit-cancelled',
-  FollowSimulation = 'temba-follow-simulation'
+  FollowSimulation = 'temba-follow-simulation',
+  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/list/TicketList.ts

@@ -13,7 +13,10 @@ export class TicketList extends TembaList {
       const lastActivity = this.items[0].ticket.last_activity_on;
       const separator = this.endpoint.includes('?') ? '&' : '?';
       return (
-        this.endpoint + separator + 'after=' + new Date(lastActivity).getTime() * 1000
+        this.endpoint +
+        separator +
+        'after=' +
+        new Date(lastActivity).getTime() * 1000
       );
     }
     return this.endpoint;

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/locales/es.ts

@@ -1,18 +1,13 @@
-
-    // 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,18 +1,13 @@
-
-    // 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`
+};