@nyaruka/temba-components 0.140.0 → 0.141.1

package/src/flow/Plumber.ts

@@ -12,6 +12,7 @@ interface ConnectionEndpoints {
   targetX: number;
   targetY: number;
   targetFace: TargetFace;
+  jogYOffset: number;
 }
 
 interface ConnectionInfo {
@@ -47,7 +48,8 @@ export function calculateFlowchartPath(
   stubStart = 20,
   stubEnd = 10,
   cornerRadius = 5,
-  targetFace: TargetFace = 'top'
+  targetFace: TargetFace = 'top',
+  jogYOffset = 0
 ): string {
   const r = cornerRadius;
 
@@ -66,7 +68,11 @@ export function calculateFlowchartPath(
       // jogY is the horizontal level — must be above entryY so the
       // final approach into the node is always downward (no backtracking).
       const dirX = targetX > sourceX ? 1 : -1;
-      const jogY = Math.max(sourceY + r, Math.min(exitY, entryY - r));
+      const baseJogY = Math.max(sourceY + r, Math.min(exitY, entryY - r));
+      const jogY = Math.max(
+        sourceY + r,
+        Math.min(baseJogY + jogYOffset, entryY - r - 3)
+      );
 
       // Corner 1: vertical→horizontal at jogY
       const r1 = Math.min(r, jogY - sourceY);
@@ -321,11 +327,17 @@ export class Plumber {
       });
       this.pendingConnections = [];
 
-      // Repaint all connections that share a target with newly created ones
-      // so anchor distribution is correct after the full batch is processed
+      // Repaint all connections that share a target or source with newly
+      // created ones so anchor distribution and jogY offsets are correct
       if (createdTargets.size > 0) {
-        this.connections.forEach((conn, exitId) => {
+        const createdScopes = new Set<string>();
+        this.connections.forEach((conn) => {
           if (createdTargets.has(conn.toId)) {
+            createdScopes.add(conn.scope);
+          }
+        });
+        this.connections.forEach((conn, exitId) => {
+          if (createdTargets.has(conn.toId) || createdScopes.has(conn.scope)) {
             this.updateConnectionSVG(exitId);
           }
         });
@@ -371,7 +383,8 @@ export class Plumber {
 
   private getConnectionEndpoints(
     fromId: string,
-    toId: string
+    toId: string,
+    scope?: string
   ): ConnectionEndpoints | null {
     const fromEl = document.getElementById(fromId);
     const toEl = document.getElementById(toId);
@@ -476,7 +489,57 @@ export class Plumber {
           : targetTop + margin + (span * (index + 0.5)) / count;
     }
 
-    return { sourceX, sourceY, targetX, targetY, targetFace };
+    // Compute jogYOffset: stagger horizontal segments for sibling exits
+    // from the same source node so paths don't overlap
+    let jogYOffset = 0;
+    if (targetFace === 'top' && scope) {
+      const SIBLING_SPACING = 8;
+      const MAX_SPREAD = 50;
+
+      const siblings: { fromId: string; targetX: number }[] = [];
+      this.connections.forEach((conn) => {
+        if (conn.scope === scope && conn.toId !== toId) {
+          const connFromEl = document.getElementById(conn.fromId);
+          const connToEl = document.getElementById(conn.toId);
+          if (connFromEl && connToEl) {
+            const connFromRect = connFromEl.getBoundingClientRect();
+            const connToRect = connToEl.getBoundingClientRect();
+            const connSourceX =
+              connFromRect.left + connFromRect.width / 2 - canvasRect.left;
+            const connSourceY = connFromRect.bottom - canvasRect.top;
+            const connFace = this.determineTargetFace(
+              connSourceX,
+              connSourceY,
+              connToRect,
+              canvasRect
+            );
+            if (connFace === 'top') {
+              const connTargetLeft = connToRect.left - canvasRect.left;
+              const connTargetW = connToRect.width;
+              siblings.push({
+                fromId: conn.fromId,
+                targetX: connTargetLeft + connTargetW / 2
+              });
+            }
+          }
+        }
+      });
+
+      if (siblings.length > 0) {
+        siblings.push({ fromId, targetX });
+        siblings.sort((a, b) => a.targetX - b.targetX);
+        const idx = siblings.findIndex((s) => s.fromId === fromId);
+        const sibCount = siblings.length;
+        const rawSpread = (sibCount - 1) * SIBLING_SPACING;
+        const spacing =
+          rawSpread > MAX_SPREAD
+            ? MAX_SPREAD / (sibCount - 1)
+            : SIBLING_SPACING;
+        jogYOffset = (idx - (sibCount - 1) / 2) * spacing;
+      }
+    }
+
+    return { sourceX, sourceY, targetX, targetY, targetFace, jogYOffset };
   }
 
   // --- SVG creation and management ---
@@ -535,7 +598,8 @@ export class Plumber {
     sourceY: number,
     targetX: number,
     targetY: number,
-    targetFace: TargetFace = 'top'
+    targetFace: TargetFace = 'top',
+    jogYOffset = 0
   ) {
     const aw = ARROW_HALF_WIDTH;
     const al = ARROW_LENGTH;
@@ -562,7 +626,8 @@ export class Plumber {
       EXIT_STUB,
       effectiveStub,
       5,
-      targetFace
+      targetFace,
+      jogYOffset
     );
     pathEl.setAttribute('d', d);
 
@@ -596,7 +661,7 @@ export class Plumber {
     scope: string,
     toId: string
   ): boolean {
-    const endpoints = this.getConnectionEndpoints(exitId, toId);
+    const endpoints = this.getConnectionEndpoints(exitId, toId, scope);
     if (!endpoints) return false;
 
     const { svgEl, pathEl, arrowEl } = this.createSVGElement();
@@ -607,7 +672,8 @@ export class Plumber {
       endpoints.sourceY,
       endpoints.targetX,
       endpoints.targetY,
-      endpoints.targetFace
+      endpoints.targetFace,
+      endpoints.jogYOffset
     );
     this.canvas.appendChild(svgEl);
 
@@ -674,7 +740,11 @@ export class Plumber {
     const conn = this.connections.get(exitId);
     if (!conn) return;
 
-    const endpoints = this.getConnectionEndpoints(conn.fromId, conn.toId);
+    const endpoints = this.getConnectionEndpoints(
+      conn.fromId,
+      conn.toId,
+      conn.scope
+    );
     if (!endpoints) return;
 
     this.updateSVGPath(
@@ -684,7 +754,8 @@ export class Plumber {
       endpoints.sourceY,
       endpoints.targetX,
       endpoints.targetY,
-      endpoints.targetFace
+      endpoints.targetFace,
+      endpoints.jogYOffset
     );
     this.updateOverlayPosition(exitId);
   }
@@ -901,7 +972,11 @@ export class Plumber {
     const conn = this.connections.get(exitId);
     if (!overlayEl || !conn) return;
 
-    const endpoints = this.getConnectionEndpoints(conn.fromId, conn.toId);
+    const endpoints = this.getConnectionEndpoints(
+      conn.fromId,
+      conn.toId,
+      conn.scope
+    );
     if (!endpoints) return;
 
     overlayEl.style.position = 'absolute';

package/src/flow/actions/add_contact_groups.ts

@@ -52,7 +52,10 @@ export const add_contact_groups: ActionConfig = {
     return {
       uuid: formData.uuid,
       type: 'add_contact_groups',
-      groups: formData.groups || []
+      groups: (formData.groups || []).map((g: any) => ({
+        uuid: g.uuid,
+        name: g.name
+      }))
     };
   }
 };

package/src/flow/actions/add_input_labels.ts

@@ -53,7 +53,10 @@ export const add_input_labels: ActionConfig = {
     return {
       uuid: formData.uuid,
       type: 'add_input_labels',
-      labels: formData.labels || []
+      labels: (formData.labels || []).map((l: any) => ({
+        uuid: l.uuid,
+        name: l.name
+      }))
     };
   }
 };

package/src/flow/actions/remove_contact_groups.ts

@@ -69,7 +69,12 @@ export const remove_contact_groups: ActionConfig = {
     return {
       uuid: formData.uuid,
       type: 'remove_contact_groups',
-      groups: formData.all_groups ? [] : formData.groups || [],
+      groups: formData.all_groups
+        ? []
+        : (formData.groups || []).map((g: any) => ({
+            uuid: g.uuid,
+            name: g.name
+          })),
       all_groups: formData.all_groups || false
     };
   }

package/src/flow/actions/send_broadcast.ts

@@ -70,8 +70,12 @@ export const send_broadcast: ActionConfig = {
 
   fromFormData: (formData: FormData): SendBroadcast => {
     const recipients = formData.recipients || [];
-    const contacts = recipients.filter((r: any) => !r.group);
-    const groups = recipients.filter((r: any) => r.group);
+    const contacts = recipients
+      .filter((r: any) => !r.group)
+      .map((c: any) => ({ uuid: c.uuid, name: c.name }));
+    const groups = recipients
+      .filter((r: any) => r.group)
+      .map((g: any) => ({ uuid: g.uuid, name: g.name }));
 
     const result: SendBroadcast = {
       uuid: formData.uuid,

package/src/flow/actions/set_contact_channel.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactChannel } from '../../store/flow-definition';
 
 export const set_contact_channel: ActionConfig = {
@@ -19,6 +19,7 @@ export const set_contact_channel: ActionConfig = {
       endpoint: '/api/v2/channels.json',
       valueKey: 'uuid',
       nameKey: 'name',
+      placeholder: 'Select channel',
       helpText: 'Select the channel to set for the contact'
     }
   },
@@ -27,5 +28,16 @@ export const set_contact_channel: ActionConfig = {
       uuid: action.uuid,
       channel: action.channel ? [action.channel] : null
     };
+  },
+  fromFormData: (formData: FormData): SetContactChannel => {
+    const channel = formData.channel?.[0];
+    return {
+      uuid: formData.uuid,
+      type: 'set_contact_channel',
+      channel: {
+        uuid: channel.uuid || channel.value,
+        name: channel.name
+      }
+    };
   }
 };

package/src/flow/actions/set_contact_status.ts

@@ -12,11 +12,13 @@ export const set_contact_status: ActionConfig = {
   },
   toFormData: (action: SetContactStatus) => {
     return {
-      ...action,
-      status: {
-        name: titleCase(action.status || 'active'),
-        value: action.status || 'active'
-      }
+      uuid: action.uuid,
+      status: [
+        {
+          name: titleCase(action.status || 'active'),
+          value: action.status || 'active'
+        }
+      ]
     };
   },
   fromFormData: (formData: FormData): SetContactStatus => {

package/src/flow/actions/start_session.ts

@@ -186,7 +186,10 @@ export const start_session: ActionConfig = {
     } = {
       uuid: formData.uuid,
       type: 'start_session',
-      flow: formData.flow[0],
+      flow: {
+        uuid: formData.flow[0].uuid || formData.flow[0].value,
+        name: formData.flow[0].name
+      },
       groups: [],
       contacts: []
     };
@@ -202,8 +205,12 @@ export const start_session: ActionConfig = {
     } else {
       // Manual selection - separate contacts and groups
       const recipients = formData.recipients || [];
-      action.contacts = recipients.filter((r: any) => !r.group);
-      action.groups = recipients.filter((r: any) => r.group);
+      action.contacts = recipients
+        .filter((r: any) => !r.group)
+        .map((c: any) => ({ uuid: c.uuid, name: c.name }));
+      action.groups = recipients
+        .filter((r: any) => r.group)
+        .map((g: any) => ({ uuid: g.uuid, name: g.name }));
     }
 
     // Add exclusions if set

package/src/flow/nodes/split_by_contact_field.ts

@@ -38,10 +38,10 @@ const getOperandForField = (field: any): string => {
   }
   // For system properties, use the id
   if (field.type === 'property') {
-    return `@contact.${field.id}`;
+    return `@contact.${field.id || field.value}`;
   }
-  // Fallback to key
-  return `@fields.${field.key}`;
+  // For custom fields, use key with fallbacks
+  return `@fields.${field.key || field.id || field.value}`;
 };
 
 export const split_by_contact_field: NodeConfig = {
@@ -79,7 +79,7 @@ export const split_by_contact_field: NodeConfig = {
     },
     rules: createRulesArrayConfig(
       operatorsToSelectOptions(getWaitForResponseOperators()),
-      'Define rules to split the contact field into categories'
+      ''
     ),
     result_name: resultNameField
   },
@@ -98,7 +98,18 @@ export const split_by_contact_field: NodeConfig = {
   },
   toFormData: (node: Node, nodeUI?: any) => {
     // Get the field from the UI config operand (source of truth)
-    const field = nodeUI?.config?.operand || CONTACT_PROPERTIES.name;
+    const operand = nodeUI?.config?.operand || CONTACT_PROPERTIES.name;
+
+    // Normalize the field object to include properties expected by
+    // the Select component (valueKey: 'key') and getOperandForField.
+    // toUIConfig saves only { id, name, type }, so we need to add
+    // 'key' for custom fields and 'value' for static option matching.
+    const field = { ...operand };
+    if (field.type === 'field') {
+      if (!field.key) field.key = field.id;
+    } else {
+      if (!field.value) field.value = field.id;
+    }
 
     // Extract rules from router cases using shared function
     const rules = casesToFormRules(node);

package/src/flow/nodes/split_by_expression.ts

@@ -34,7 +34,7 @@ export const split_by_expression: NodeConfig = {
     },
     rules: createRulesArrayConfig(
       operatorsToSelectOptions(getWaitForResponseOperators()),
-      'Define rules to categorize the expression result'
+      ''
     ),
     result_name: resultNameField
   },

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -34,7 +34,6 @@ export const split_by_llm_categorize: NodeConfig = {
     },
     categories: {
       type: 'array',
-      label: 'Categories',
       helpText: 'Define the categories for classification',
       required: true,
       sortable: true,

package/src/flow/nodes/split_by_random.ts

@@ -57,7 +57,6 @@ export const split_by_random: NodeConfig = {
   form: {
     categories: {
       type: 'array',
-      label: 'Buckets',
       helpText: 'Define the buckets to randomly split contacts into',
       required: true,
       itemLabel: 'Bucket',

package/src/flow/nodes/split_by_run_result.ts

@@ -105,7 +105,7 @@ export const split_by_run_result: NodeConfig = {
     },
     rules: createRulesArrayConfig(
       operatorsToSelectOptions(getWaitForResponseOperators()),
-      'Define rules to categorize the result'
+      ''
     ),
     result_name: resultNameField
   },
@@ -135,7 +135,12 @@ export const split_by_run_result: NodeConfig = {
   },
   toFormData: (node: Node, nodeUI?: any) => {
     // Get the result from the UI config operand (source of truth)
-    const result = nodeUI?.config?.operand;
+    // Normalize: toUIConfig saves { id, name, type } but the Select component
+    // (valueKey: 'value') and fromFormData expect a 'value' property.
+    const savedOperand = nodeUI?.config?.operand;
+    const result = savedOperand
+      ? { ...savedOperand, value: savedOperand.value || savedOperand.id }
+      : null;
 
     // Extract rules from router cases using shared function
     const rules = casesToFormRules(node);
@@ -180,6 +185,7 @@ export const split_by_run_result: NodeConfig = {
 
     // Build operand based on whether delimiter is selected
     let operand: string;
+    const resultKey = selectedResult.value || selectedResult.id;
     const delimitBy = formData.delimit_by?.[0]?.value;
     const hasDelimiter = delimitBy !== undefined && delimitBy !== '';
 
@@ -188,10 +194,10 @@ export const split_by_run_result: NodeConfig = {
       const delimitIndex = formData.delimit_index?.[0]?.value ?? '0';
 
       // Build operand with field() function
-      operand = `@(field(results.${selectedResult.value}, ${delimitIndex}, "${delimitBy}"))`;
+      operand = `@(field(results.${resultKey}, ${delimitIndex}, "${delimitBy}"))`;
     } else {
       // Standard operand without delimiter
-      operand = `@results.${selectedResult.value}`;
+      operand = `@results.${resultKey}`;
     }
 
     // Get user rules using shared extraction function

package/src/flow/nodes/wait_for_digits.ts

@@ -25,7 +25,8 @@ export const wait_for_digits: NodeConfig = {
   dialogSize: 'large',
   form: {
     rules: createRulesArrayConfig(
-      operatorsToSelectOptions(getDigitOperators())
+      operatorsToSelectOptions(getDigitOperators()),
+      ''
     ),
     result_name: resultNameField
   },

package/src/flow/nodes/wait_for_response.ts

@@ -86,7 +86,7 @@ export const wait_for_response: NodeConfig = {
   form: {
     rules: createRulesArrayConfig(
       operatorsToSelectOptions(getWaitForResponseOperators()),
-      'Define rules to categorize responses'
+      'If the message from the contact...'
     ),
     timeout_enabled: {
       type: 'checkbox',

package/src/form/FieldRenderer.ts

@@ -356,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 : ''}"

package/src/layout/Dialog.ts

@@ -95,7 +95,6 @@ export class Dialog extends ResizeElement {
       }
 
       .dialog-mask .dialog-container {
-        
         position: relative;
         transition: transform var(--transition-speed) ease-in-out,
           opacity ease-in-out calc(var(--transition-speed) - 50ms);

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/live/ContactChat.ts

@@ -162,6 +162,15 @@ export class ContactChat extends ContactStoreElement {
         opacity: 0.9;
       }
 
+      .flow-footer {
+        text-align: center;
+        pointer-events: none;
+      }
+
+      .flow-footer .in-flow {
+        pointer-events: auto;
+      }
+
       .in-flow:hover {
         opacity: 1;
       }
@@ -780,7 +789,7 @@ export class ContactChat extends ContactStoreElement {
             >
               ${inFlow
                 ? html`
-                    <div slot="footer" style="text-align:center;">
+                    <div slot="footer" class="flow-footer">
                       <div class="in-flow">
                         <div class="flow-name">
                           <temba-icon name="flow" size="1.2"></temba-icon>

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,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`,
+    };
+