@nyaruka/temba-components 0.139.0 → 0.141.0

package/src/flow/NodeEditor.ts

@@ -20,9 +20,10 @@ import {
 } from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
+import { formatIssueMessage } from './utils';
 import { FieldRenderer } from '../form/FieldRenderer';
 import { renderMarkdownInline } from '../markdown';
-import { AppState, fromStore, zustand } from '../store/AppState';
+import { AppState, FlowIssue, fromStore, zustand } from '../store/AppState';
 import { getStore } from '../store/Store';
 
 export class NodeEditor extends RapidElement {
@@ -55,6 +56,19 @@ export class NodeEditor extends RapidElement {
         margin-top: 15px;
       }
 
+      .issue-warning {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--color-error, tomato);
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .issue-warning:hover .issue-text {
+        text-decoration: underline;
+      }
+
       .form-actions {
         display: flex;
         gap: 10px;
@@ -112,12 +126,29 @@ export class NodeEditor extends RapidElement {
         color: var(--color-label, #777);
       }
 
+      .form-row-inline-label {
+        font-size: 20px;
+        font-weight: 300;
+        color: #ccc;
+        min-width: 20px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+      }
+
       .form-row-help {
         font-size: 12px;
         color: #666;
         margin-top: 6px;
       }
 
+      .form-text {
+        color: #666;
+        font-size: 13px;
+      }
+
       .form-group {
         border: 1px solid #e0e0e0;
         border-radius: 6px;
@@ -381,6 +412,9 @@ export class NodeEditor extends RapidElement {
   @property({ type: Object })
   nodeUI?: NodeUI;
 
+  @property({ attribute: false })
+  dialogOrigin?: { x: number; y: number };
+
   @property({ type: Boolean })
   isOpen: boolean = false;
 
@@ -411,6 +445,12 @@ export class NodeEditor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.flowDefinition)
   private flowDefinition!: FlowDefinition;
 
+  @fromStore(zustand, (state: AppState) => state.issuesByNode)
+  private issuesByNode!: Map<string, FlowIssue[]>;
+
+  @fromStore(zustand, (state: AppState) => state.issuesByAction)
+  private issuesByAction!: Map<string, FlowIssue[]>;
+
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
@@ -447,7 +487,13 @@ export class NodeEditor extends RapidElement {
   private initializeFormData(): void {
     const nodeConfig = this.getNodeConfig();
 
-    if ((!nodeConfig || nodeConfig.type === 'execute_actions') && this.action) {
+    // Temporary: terminal nodes defer to action configs, same as execute_actions
+    if (
+      (!nodeConfig ||
+        nodeConfig.type === 'execute_actions' ||
+        nodeConfig.type === 'terminal') &&
+      this.action
+    ) {
       // Action editing mode - use action config
       const actionConfig = ACTION_CONFIG[this.action.type];
 
@@ -597,8 +643,13 @@ export class NodeEditor extends RapidElement {
     if (this.node && this.nodeUI) {
       const nodeConfig = this.getNodeConfig();
 
-      // For execute_actions nodes, defer to action editing if an action is selected
-      if (this.nodeUI.type === 'execute_actions' && this.action) {
+      // Temporary: terminal nodes defer to action configs for editing, same as execute_actions
+      // For execute_actions/terminal nodes, defer to action editing if an action is selected
+      if (
+        (this.nodeUI.type === 'execute_actions' ||
+          this.nodeUI.type === ('terminal' as any)) &&
+        this.action
+      ) {
         return ACTION_CONFIG[this.action.type] || null;
       }
 
@@ -1462,6 +1513,11 @@ export class NodeEditor extends RapidElement {
         } else if (fieldName && config.type === 'message-editor') {
           // Special handling for message editor
           this.handleMessageEditorChange(fieldName, e);
+        } else if (fieldName && config.type === 'media') {
+          // Extract URL from media picker's attachment
+          const picker = e.target as any;
+          const url = picker.attachments?.[0]?.url || '';
+          this.handleNewFieldChange(fieldName, url);
         } else {
           // Default handling for most field types
           this.handleFormFieldChange(fieldName, e);
@@ -1575,6 +1631,12 @@ export class NodeEditor extends RapidElement {
       case 'group':
         return this.renderGroup(item, config, renderedFields);
 
+      case 'spacer':
+        return html``;
+
+      case 'text':
+        return html`<div class="form-text">${item.text}</div>`;
+
       default:
         return html``;
     }
@@ -1585,7 +1647,14 @@ export class NodeEditor extends RapidElement {
     config: ActionConfig | NodeConfig,
     renderedFields: Set<string>
   ): TemplateResult {
-    const { items, gap = '1rem', label, helpText } = rowConfig;
+    const {
+      items,
+      gap = '1rem',
+      label,
+      helpText,
+      inlineLabels,
+      marginBottom
+    } = rowConfig;
 
     // Collect all fields from this row for width calculations
     const fieldsInRow = this.collectFieldsFromItems(items);
@@ -1619,8 +1688,18 @@ export class NodeEditor extends RapidElement {
     });
 
     const rowContent = html`
-      <div class="form-row" style="display: flex; gap: ${gap};">
+      <div
+        class="form-row"
+        style="display: flex; gap: ${gap};${marginBottom
+          ? ` margin-bottom: ${marginBottom};`
+          : ''}"
+      >
         ${items.map((item) => {
+          // Spacer items render as empty flex children
+          if (typeof item !== 'string' && item.type === 'spacer') {
+            return html`<div style="flex: 1 1 0;"></div>`;
+          }
+
           // Get the field name from the item
           const fieldName =
             typeof item === 'string'
@@ -1641,10 +1720,22 @@ export class NodeEditor extends RapidElement {
             renderedFields
           );
 
+          // When inlineLabels is provided, render the label inline to the left
+          const inlineLabel =
+            inlineLabels && fieldName ? inlineLabels[fieldName] : null;
+
           // Wrap in a div with flex style if we have a flex style
-          return flexStyle
-            ? html`<div style="${flexStyle}">${itemContent}</div>`
-            : itemContent;
+          if (flexStyle) {
+            return inlineLabel
+              ? html`<div
+                  style="${flexStyle} display: flex; align-items: center; gap: 0.35rem;"
+                >
+                  <span class="form-row-inline-label">${inlineLabel}</span>
+                  <div style="flex: 1 1 0; min-width: 0;">${itemContent}</div>
+                </div>`
+              : html`<div style="${flexStyle}">${itemContent}</div>`;
+          }
+          return itemContent;
         })}
       </div>
     `;
@@ -2038,6 +2129,40 @@ export class NodeEditor extends RapidElement {
     `;
   }
 
+  private handleIssueClick(issue: FlowIssue): void {
+    this.fireCustomEvent(CustomEventType.ShowIssue, { issue });
+  }
+
+  private renderIssueWarnings(): TemplateResult | string {
+    const issues: FlowIssue[] = [];
+
+    // Check for action-level issues
+    if (this.action && this.issuesByAction?.has(this.action.uuid)) {
+      issues.push(...this.issuesByAction.get(this.action.uuid));
+    }
+
+    // Check for node-level issues (issues without action_uuid)
+    if (this.node && this.issuesByNode?.has(this.node.uuid)) {
+      issues.push(...this.issuesByNode.get(this.node.uuid));
+    }
+
+    if (issues.length === 0) return '';
+
+    return html`
+      ${issues.map(
+        (issue) => html`
+          <div
+            class="issue-warning"
+            @click=${() => this.handleIssueClick(issue)}
+          >
+            <temba-icon name="alert_warning" size="1.2"></temba-icon>
+            <span class="issue-text">${formatIssueMessage(issue)}</span>
+          </div>
+        `
+      )}
+    `;
+  }
+
   render(): TemplateResult {
     if (!this.isOpen) {
       return html``;
@@ -2061,6 +2186,8 @@ export class NodeEditor extends RapidElement {
       <temba-dialog
         header="${header}"
         .open="${this.isOpen}"
+        .originX=${this.dialogOrigin?.x ?? null}
+        .originY=${this.dialogOrigin?.y ?? null}
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"
@@ -2072,6 +2199,7 @@ export class NodeEditor extends RapidElement {
           ${this.getNodeConfig()?.router?.configurable
             ? this.renderRouterSection()
             : null}
+          ${this.renderIssueWarnings()}
         </div>
 
         <div slot="gutter">${this.renderGutter()}</div>

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/StickyNote.ts

@@ -305,7 +305,7 @@ export class StickyNote extends RapidElement {
 
   private handleBodyBlur(event: FocusEvent): void {
     const target = event.target as HTMLElement;
-    const newBody = target.textContent || '';
+    const newBody = target.innerText || '';
 
     if (this.data && newBody !== this.data.body) {
       getStore()
@@ -328,7 +328,17 @@ export class StickyNote extends RapidElement {
     event.stopPropagation();
   }
 
-  private handleKeyDown(event: KeyboardEvent): void {
+  private handleTitleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      (event.target as HTMLElement).blur();
+    }
+    if (event.key === 'Escape') {
+      (event.target as HTMLElement).blur();
+    }
+  }
+
+  private handleBodyKeyDown(event: KeyboardEvent): void {
     if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       (event.target as HTMLElement).blur();
@@ -386,7 +396,7 @@ export class StickyNote extends RapidElement {
             class="sticky-title"
             contenteditable="${!this.isTranslating}"
             @blur="${this.handleTitleBlur}"
-            @keydown="${this.handleKeyDown}"
+            @keydown="${this.handleTitleKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.title}"
           ></div>
@@ -396,7 +406,7 @@ export class StickyNote extends RapidElement {
             class="sticky-body"
             contenteditable="${!this.isTranslating}"
             @blur="${this.handleBodyBlur}"
-            @keydown="${this.handleKeyDown}"
+            @keydown="${this.handleBodyKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.body}"
           ></div>

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/audio-player.ts

@@ -0,0 +1,127 @@
+import { html, TemplateResult } from 'lit-html';
+
+// SVG paths for play and pause icons
+const PLAY_SVG = html`<svg
+  viewBox="0 0 24 24"
+  width="16"
+  height="16"
+  fill="currentColor"
+>
+  <polygon points="6,3 20,12 6,21" />
+</svg>`;
+
+// Track active audio so only one plays at a time
+let activeAudio: HTMLAudioElement | null = null;
+let activeContainer: HTMLElement | null = null;
+
+function stopActive() {
+  if (activeAudio) {
+    activeAudio.pause();
+    activeAudio.currentTime = 0;
+    if (activeContainer) {
+      resetPlayer(activeContainer);
+    }
+    activeAudio = null;
+    activeContainer = null;
+  }
+}
+
+function resetPlayer(container: HTMLElement) {
+  const btn = container.querySelector('.audio-play-btn') as HTMLElement;
+  const progress = container.querySelector('.audio-progress') as HTMLElement;
+  if (btn)
+    btn.innerHTML =
+      '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><polygon points="6,3 20,12 6,21"/></svg>';
+  if (progress) progress.style.width = '0%';
+}
+
+function handlePlayClick(e: MouseEvent) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const container = (e.currentTarget as HTMLElement).closest(
+    '.audio-player'
+  ) as HTMLElement;
+  if (!container) return;
+
+  const url = container.dataset.url;
+  if (!url) return;
+
+  const btn = container.querySelector('.audio-play-btn') as HTMLElement;
+  const progress = container.querySelector('.audio-progress') as HTMLElement;
+
+  // If this is already playing, pause it
+  if (activeAudio && activeContainer === container && !activeAudio.paused) {
+    activeAudio.pause();
+    btn.innerHTML =
+      '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><polygon points="6,3 20,12 6,21"/></svg>';
+    return;
+  }
+
+  // Stop any other playing audio
+  stopActive();
+
+  const audio = new Audio(url);
+  activeAudio = audio;
+  activeContainer = container;
+
+  btn.innerHTML =
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/></svg>';
+
+  audio.addEventListener('timeupdate', () => {
+    if (audio.duration && progress) {
+      const pct = (audio.currentTime / audio.duration) * 100;
+      progress.style.width = `${pct}%`;
+    }
+  });
+
+  audio.addEventListener('ended', () => {
+    resetPlayer(container);
+    activeAudio = null;
+    activeContainer = null;
+  });
+
+  audio.addEventListener('error', () => {
+    resetPlayer(container);
+    activeAudio = null;
+    activeContainer = null;
+  });
+
+  audio.play().catch(() => {
+    resetPlayer(container);
+    activeAudio = null;
+    activeContainer = null;
+  });
+}
+
+/**
+ * Renders an inline audio player with play/pause button and progress bar.
+ * Used on canvas nodes for play_audio and say_msg actions.
+ */
+export function renderAudioPlayer(audioUrl: string): TemplateResult {
+  return html`
+    <div
+      class="audio-player"
+      data-url="${audioUrl}"
+      style="display: flex; align-items: center; gap: 0.4em; cursor: default;"
+      @mousedown=${(e: MouseEvent) => e.stopPropagation()}
+      @mouseup=${(e: MouseEvent) => e.stopPropagation()}
+    >
+      <div
+        class="audio-play-btn"
+        @click=${handlePlayClick}
+        style="cursor: pointer; color: #666; display: flex; align-items: center; flex-shrink: 0;"
+      >
+        ${PLAY_SVG}
+      </div>
+      <div
+        style="flex: 1; height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; min-width: 40px;"
+      >
+        <div
+          class="audio-progress"
+          style="width: 0%; height: 100%; background: var(--color-primary, #2387ca); border-radius: 2px; transition: width 0.2s linear;"
+        ></div>
+      </div>
+    </div>
+  `;
+}

package/src/flow/actions/enter_flow.ts

@@ -0,0 +1,44 @@
+import { html } from 'lit-html';
+import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
+import { Node, EnterFlow } from '../../store/flow-definition';
+import { renderNamedObjects } from '../utils';
+
+export const enter_flow: ActionConfig = {
+  name: 'Enter a Flow',
+  group: ACTION_GROUPS.trigger,
+  hideFromActions: true,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  render: (_node: Node, action: EnterFlow) => {
+    return html`${renderNamedObjects([action.flow], 'flow')}`;
+  },
+  toFormData: (action: EnterFlow) => {
+    return {
+      uuid: action.uuid,
+      flow: action.flow ? [action.flow] : []
+    };
+  },
+  form: {
+    flow: {
+      type: 'select',
+      required: true,
+      placeholder: 'Select a flow...',
+      helpText: 'The contact will enter this flow and not return',
+      endpoint: '/api/v2/flows.json',
+      valueKey: 'uuid',
+      nameKey: 'name'
+    }
+  },
+  layout: ['flow'],
+  fromFormData: (formData: any): EnterFlow => {
+    const selected = formData.flow[0];
+    return {
+      uuid: formData.uuid,
+      type: 'enter_flow',
+      terminal: true,
+      flow: {
+        uuid: selected.uuid || selected.value,
+        name: selected.name
+      }
+    };
+  }
+};