@nyaruka/temba-components 0.139.0 → 0.140.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/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/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
+      }
+    };
+  }
+};

package/src/flow/actions/play_audio.ts

@@ -1,13 +1,72 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, PlayAudio } from '../../store/flow-definition';
 
 export const play_audio: ActionConfig = {
-  name: 'Play Audio',
+  name: 'Play Recording',
   group: ACTION_GROUPS.send,
   flowTypes: [FlowTypes.VOICE],
-  render: (_node: Node, _action: PlayAudio) => {
-    // This will need to be implemented based on the actual render logic
-    return html`<div>Play Audio</div>`;
+  render: (_node: Node, action: PlayAudio) => {
+    return html`
+      <div style="display: flex; align-items: center; gap: 0.3em;">
+        <temba-icon name="recording" size="1"></temba-icon>
+        <div
+          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;"
+          title="${action.audio_url || ''}"
+        >
+          ${action.audio_url || ''}
+        </div>
+      </div>
+    `;
+  },
+  form: {
+    audio_url: {
+      type: 'text',
+      label: 'Recording URL',
+      required: true,
+      evaluated: true
+    }
+  },
+  layout: ['audio_url'],
+  toFormData: (action: PlayAudio) => {
+    return {
+      uuid: action.uuid,
+      audio_url: action.audio_url || ''
+    };
+  },
+  fromFormData: (data: FormData) => {
+    return {
+      uuid: data.uuid,
+      type: 'play_audio',
+      audio_url: (data.audio_url || '').trim()
+    } as PlayAudio;
+  },
+  localizable: ['audio_url'],
+  toLocalizationFormData: (
+    action: PlayAudio,
+    localization: Record<string, any>
+  ) => {
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    if (localization.audio_url && Array.isArray(localization.audio_url)) {
+      formData.audio_url = localization.audio_url[0] || '';
+    } else {
+      formData.audio_url = '';
+    }
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: PlayAudio) => {
+    const localization: Record<string, any> = {};
+
+    if (formData.audio_url && formData.audio_url.trim() !== '') {
+      if (formData.audio_url !== action.audio_url) {
+        localization.audio_url = [formData.audio_url];
+      }
+    }
+
+    return localization;
   }
 };

package/src/flow/actions/say_msg.ts

@@ -1,13 +1,103 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SayMsg } from '../../store/flow-definition';
+import { renderAudioPlayer } from './audio-player';
 
 export const say_msg: ActionConfig = {
   name: 'Say Message',
   group: ACTION_GROUPS.send,
   flowTypes: [FlowTypes.VOICE],
-  render: (_node: Node, _action: SayMsg) => {
-    // This will need to be implemented based on the actual render logic
-    return html`<div>Say Message</div>`;
+  render: (_node: Node, action: SayMsg) => {
+    const text = (action.text || '').replace(/\n/g, '<br>');
+    return html`
+      ${unsafeHTML(text)}
+      ${action.audio_url
+        ? html`<div style="margin-top: 0.5em;">
+            ${renderAudioPlayer(action.audio_url)}
+          </div>`
+        : null}
+    `;
+  },
+  form: {
+    text: {
+      type: 'textarea',
+      label: 'Message',
+      required: true,
+      evaluated: true,
+      placeholder: 'Enter message to speak...',
+      minHeight: 80
+    },
+    audio_url: {
+      type: 'media',
+      label: 'Recording',
+      required: false,
+      accept: 'audio/*',
+      optionalLink: 'Add a recording'
+    }
+  },
+  layout: ['text', 'audio_url'],
+  toFormData: (action: SayMsg) => {
+    return {
+      uuid: action.uuid,
+      text: action.text || '',
+      audio_url: action.audio_url || ''
+    };
+  },
+  fromFormData: (data: FormData) => {
+    const result: any = {
+      uuid: data.uuid,
+      type: 'say_msg',
+      text: data.text || ''
+    };
+    if (data.audio_url && data.audio_url.trim() !== '') {
+      result.audio_url = data.audio_url.trim();
+    }
+    return result as SayMsg;
+  },
+  sanitize: (formData: FormData): void => {
+    if (formData.text && typeof formData.text === 'string') {
+      formData.text = formData.text.trim();
+    }
+  },
+  localizable: ['text', 'audio_url'],
+  toLocalizationFormData: (
+    action: SayMsg,
+    localization: Record<string, any>
+  ) => {
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    if (localization.text && Array.isArray(localization.text)) {
+      formData.text = localization.text[0] || '';
+    } else {
+      formData.text = '';
+    }
+
+    if (localization.audio_url && Array.isArray(localization.audio_url)) {
+      formData.audio_url = localization.audio_url[0] || '';
+    } else {
+      formData.audio_url = '';
+    }
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: SayMsg) => {
+    const localization: Record<string, any> = {};
+
+    if (formData.text && formData.text.trim() !== '') {
+      if (formData.text !== action.text) {
+        localization.text = [formData.text];
+      }
+    }
+
+    if (formData.audio_url && formData.audio_url.trim() !== '') {
+      if (formData.audio_url !== action.audio_url) {
+        localization.audio_url = [formData.audio_url];
+      }
+    }
+
+    return localization;
   }
 };