@nyaruka/temba-components 0.139.0 → 0.141.0

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