@nyaruka/temba-components 0.138.6 → 0.140.0

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;
   }
 };

package/src/flow/config.ts

@@ -20,6 +20,7 @@ import { remove_contact_groups } from './actions/remove_contact_groups';
 import { request_optin } from './actions/request_optin';
 import { say_msg } from './actions/say_msg';
 import { play_audio } from './actions/play_audio';
+import { enter_flow } from './actions/enter_flow';
 
 // Import all node configurations
 import { execute_actions } from './nodes/execute_actions';
@@ -31,11 +32,14 @@ import { split_by_random } from './nodes/split_by_random';
 import { split_by_run_result } from './nodes/split_by_run_result';
 import { split_by_scheme } from './nodes/split_by_scheme';
 import { split_by_subflow } from './nodes/split_by_subflow';
+import { terminal } from './nodes/terminal';
 import { split_by_ticket } from './nodes/split_by_ticket';
 import { split_by_webhook } from './nodes/split_by_webhook';
 import { split_by_resthook } from './nodes/split_by_resthook';
 import { split_by_llm } from './nodes/split_by_llm';
 import { split_by_llm_categorize } from './nodes/split_by_llm_categorize';
+import { wait_for_audio } from './nodes/wait_for_audio';
+import { wait_for_dial } from './nodes/wait_for_dial';
 import { wait_for_digits } from './nodes/wait_for_digits';
 import { wait_for_menu } from './nodes/wait_for_menu';
 import { wait_for_response } from './nodes/wait_for_response';
@@ -59,7 +63,8 @@ export const ACTION_CONFIG: {
   set_contact_status,
   add_contact_urn,
   add_input_labels,
-  request_optin
+  request_optin,
+  enter_flow
 });
 
 // Helper to register a config and its aliases
@@ -96,8 +101,11 @@ export const NODE_CONFIG: {
   split_by_ticket,
   split_by_webhook,
   split_by_resthook,
-  wait_for_digits,
   wait_for_menu,
+  wait_for_digits,
+  wait_for_audio,
+  wait_for_dial,
   wait_for_response,
-  split_by_airtime
+  split_by_airtime,
+  terminal // Temporary: legacy support for terminal nodes (see AppState.ts)
 });

package/src/flow/nodes/shared-rules.ts

@@ -132,7 +132,7 @@ export const createRulesItemConfig = () => ({
     multi: false,
     options: [], // Will be set by the caller
     flavor: 'xsmall' as const,
-    width: '200px'
+    width: '220px'
   },
   value1: {
     type: 'text' as const,

package/src/flow/nodes/terminal.ts

@@ -0,0 +1,9 @@
+// Temporary: Legacy support for terminal nodes (nodes with a terminal action
+// like enter_flow with terminal: true). This node type and its reclassification
+// logic in AppState.ts can be removed once we stop supporting terminal nodes.
+
+import { NodeConfig } from '../types';
+
+export const terminal: NodeConfig = {
+  type: 'terminal'
+};

package/src/flow/nodes/wait_for_audio.ts

@@ -0,0 +1,88 @@
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node, Category, Exit } from '../../store/flow-definition';
+import { generateUUID } from '../../utils';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
+
+export const wait_for_audio: NodeConfig = {
+  type: 'wait_for_audio',
+  name: 'Make Recording',
+  group: SPLIT_GROUPS.wait,
+  flowTypes: [FlowTypes.VOICE],
+  form: {
+    result_name: {
+      type: 'text',
+      label: 'Result Name',
+      required: false,
+      placeholder: '(optional)',
+      helpText: 'The name to use to reference this result in the flow'
+    }
+  },
+  layout: ['result_name'],
+  toFormData: (node: Node) => {
+    return {
+      uuid: node.uuid,
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    // Preserve or create "All Responses" category
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+
+    let allResponsesCategory = existingCategories.find(
+      (cat: Category) => cat.name === 'All Responses'
+    );
+
+    let allResponsesExit: Exit;
+
+    if (allResponsesCategory) {
+      allResponsesExit = existingExits.find(
+        (exit: Exit) => exit.uuid === allResponsesCategory!.exit_uuid
+      ) || {
+        uuid: allResponsesCategory.exit_uuid,
+        destination_uuid: null
+      };
+    } else {
+      const exitUuid = generateUUID();
+      allResponsesCategory = {
+        uuid: generateUUID(),
+        name: 'All Responses',
+        exit_uuid: exitUuid
+      };
+      allResponsesExit = {
+        uuid: exitUuid,
+        destination_uuid: null
+      };
+    }
+
+    const router: any = {
+      type: 'switch',
+      operand: '@input',
+      default_category_uuid: allResponsesCategory.uuid,
+      cases: [],
+      categories: [allResponsesCategory],
+      wait: {
+        type: 'msg',
+        hint: {
+          type: 'audio'
+        }
+      }
+    };
+
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      router.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router,
+      exits: [allResponsesExit]
+    };
+  },
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
+};