@nyaruka/temba-components 0.139.0 → 0.140.0

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

package/src/flow/nodes/wait_for_dial.ts

@@ -0,0 +1,176 @@
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node, Category, Exit } from '../../store/flow-definition';
+import { generateUUID } from '../../utils';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
+
+const DIAL_CATEGORIES = ['Answered', 'No Answer', 'Busy', 'Failed'];
+const DIAL_CASES = [
+  { type: 'has_only_text', arguments: ['answered'], categoryName: 'Answered' },
+  {
+    type: 'has_only_text',
+    arguments: ['no_answer'],
+    categoryName: 'No Answer'
+  },
+  { type: 'has_only_text', arguments: ['busy'], categoryName: 'Busy' }
+];
+
+export const wait_for_dial: NodeConfig = {
+  type: 'wait_for_dial',
+  name: 'Redirect Call',
+  group: SPLIT_GROUPS.wait,
+  flowTypes: [FlowTypes.VOICE],
+  router: {
+    type: 'switch',
+    defaultCategory: 'Failed',
+    rules: DIAL_CASES.map((c) => ({
+      type: c.type as any,
+      arguments: c.arguments,
+      categoryName: c.categoryName
+    }))
+  },
+  form: {
+    phone: {
+      type: 'text',
+      label: 'Phone Number',
+      required: true,
+      evaluated: true,
+      placeholder: 'Phone number or expression'
+    },
+    dial_limit_seconds: {
+      type: 'text',
+      label: 'Dial Limit (seconds)',
+      required: false,
+      placeholder: '60'
+    },
+    call_limit_seconds: {
+      type: 'text',
+      label: 'Call Limit (seconds)',
+      required: false,
+      placeholder: '7200'
+    },
+    result_name: resultNameField
+  },
+  layout: [
+    'phone',
+    {
+      type: 'row',
+      items: ['dial_limit_seconds', 'call_limit_seconds']
+    },
+    'result_name'
+  ],
+  toFormData: (node: Node) => {
+    const wait = node.router?.wait;
+    return {
+      uuid: node.uuid,
+      phone: wait?.phone || '',
+      dial_limit_seconds: wait?.dial_limit_seconds
+        ? String(wait.dial_limit_seconds)
+        : '',
+      call_limit_seconds: wait?.call_limit_seconds
+        ? String(wait.call_limit_seconds)
+        : '',
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const categories: Category[] = [];
+    const exits: Exit[] = [];
+    const cases: any[] = [];
+
+    // Build categories and cases for each dial outcome
+    for (const catName of DIAL_CATEGORIES) {
+      const existing = existingCategories.find(
+        (c: Category) => c.name === catName
+      );
+
+      if (existing) {
+        categories.push(existing);
+        const existingExit = existingExits.find(
+          (e: Exit) => e.uuid === existing.exit_uuid
+        );
+        exits.push(
+          existingExit || {
+            uuid: existing.exit_uuid,
+            destination_uuid: null
+          }
+        );
+      } else {
+        const exitUuid = generateUUID();
+        categories.push({
+          uuid: generateUUID(),
+          name: catName,
+          exit_uuid: exitUuid
+        });
+        exits.push({ uuid: exitUuid, destination_uuid: null });
+      }
+    }
+
+    // Build cases for non-default categories
+    for (const dialCase of DIAL_CASES) {
+      const category = categories.find((c) => c.name === dialCase.categoryName);
+      if (!category) continue;
+
+      const existingCase = existingCases.find(
+        (c: any) =>
+          c.type === dialCase.type && c.arguments?.[0] === dialCase.arguments[0]
+      );
+
+      cases.push({
+        uuid: existingCase?.uuid || generateUUID(),
+        type: dialCase.type,
+        arguments: dialCase.arguments,
+        category_uuid: category.uuid
+      });
+    }
+
+    const failedCategory = categories.find((c) => c.name === 'Failed');
+
+    // Build wait config
+    const phone = (formData.phone || '').trim();
+    const dialLimit = parseInt(formData.dial_limit_seconds, 10);
+    const callLimit = parseInt(formData.call_limit_seconds, 10);
+
+    const waitConfig: any = {
+      type: 'dial',
+      phone
+    };
+
+    if (!isNaN(dialLimit) && dialLimit > 0) {
+      waitConfig.dial_limit_seconds = dialLimit;
+    }
+
+    if (!isNaN(callLimit) && callLimit > 0) {
+      waitConfig.call_limit_seconds = callLimit;
+    }
+
+    const router: any = {
+      type: 'switch',
+      operand: '@(default(resume.dial.status, ""))',
+      default_category_uuid: failedCategory?.uuid,
+      cases,
+      categories,
+      wait: waitConfig
+    };
+
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      router.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router,
+      exits
+    };
+  },
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
+};

package/src/flow/nodes/wait_for_digits.ts

@@ -1,8 +1,92 @@
-import { SPLIT_GROUPS, NodeConfig, FlowTypes } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node } from '../../store/flow-definition';
+import { createRulesRouter } from '../../utils';
+import {
+  getDigitOperators,
+  operatorsToSelectOptions,
+  getOperatorConfig
+} from '../operators';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
+import {
+  createRulesArrayConfig,
+  extractUserRules,
+  casesToFormRules
+} from './shared-rules';
 
 export const wait_for_digits: NodeConfig = {
   type: 'wait_for_digits',
   name: 'Wait for Digits',
   group: SPLIT_GROUPS.wait,
-  flowTypes: [FlowTypes.VOICE]
+  flowTypes: [FlowTypes.VOICE],
+  dialogSize: 'large',
+  form: {
+    rules: createRulesArrayConfig(
+      operatorsToSelectOptions(getDigitOperators())
+    ),
+    result_name: resultNameField
+  },
+  layout: [
+    {
+      type: 'text',
+      text: 'Rules match against all digits pressed by the caller followed by the # sign.'
+    },
+    'rules',
+    'result_name'
+  ],
+  validate: (_formData: FormData) => {
+    return {
+      valid: true,
+      errors: {}
+    };
+  },
+  toFormData: (node: Node) => {
+    const rules = casesToFormRules(node);
+    return {
+      uuid: node.uuid,
+      rules,
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    const userRules = extractUserRules(formData);
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createRulesRouter(
+      '@input.text',
+      userRules,
+      getOperatorConfig,
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    const finalRouter: any = {
+      ...router,
+      wait: {
+        type: 'msg',
+        hint: {
+          type: 'digits'
+        }
+      }
+    };
+
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      finalRouter.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router: finalRouter,
+      exits
+    };
+  },
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/wait_for_menu.ts

@@ -1,8 +1,214 @@
-import { SPLIT_GROUPS, NodeConfig, FlowTypes } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node, Category, Exit } from '../../store/flow-definition';
+import { generateUUID } from '../../utils';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
+
+// Menu digits in display order: 1-9 then 0
+const MENU_DIGITS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+
+function digitFieldKey(digit: string): string {
+  return `digit_${digit}`;
+}
 
 export const wait_for_menu: NodeConfig = {
   type: 'wait_for_menu',
-  name: 'Wait for Menu Selection',
+  name: 'Wait for Menu',
   group: SPLIT_GROUPS.wait,
-  flowTypes: [FlowTypes.VOICE]
+  flowTypes: [FlowTypes.VOICE],
+  form: {
+    ...Object.fromEntries(
+      MENU_DIGITS.map((digit) => [
+        digitFieldKey(digit),
+        {
+          type: 'text' as const,
+          required: false,
+          placeholder: '',
+          flavor: 'xsmall' as const
+        }
+      ])
+    ),
+    result_name: resultNameField
+  },
+  layout: [
+    {
+      type: 'row' as const,
+      items: ['digit_1', 'digit_2', 'digit_3'],
+      gap: '2rem',
+      marginBottom: '0.5rem',
+      inlineLabels: { digit_1: '1', digit_2: '2', digit_3: '3' }
+    },
+    {
+      type: 'row' as const,
+      items: ['digit_4', 'digit_5', 'digit_6'],
+      gap: '2rem',
+      marginBottom: '0.5rem',
+      inlineLabels: { digit_4: '4', digit_5: '5', digit_6: '6' }
+    },
+    {
+      type: 'row' as const,
+      items: ['digit_7', 'digit_8', 'digit_9'],
+      gap: '2rem',
+      marginBottom: '0.5rem',
+      inlineLabels: { digit_7: '7', digit_8: '8', digit_9: '9' }
+    },
+    {
+      type: 'row' as const,
+      items: [
+        { type: 'spacer' as const },
+        'digit_0',
+        { type: 'spacer' as const }
+      ],
+      gap: '2rem',
+      inlineLabels: { digit_0: '0' }
+    },
+    'result_name'
+  ],
+  toFormData: (node: Node) => {
+    const formData: FormData = {
+      uuid: node.uuid,
+      result_name: node.router?.result_name || ''
+    };
+
+    // Initialize all digit fields as empty
+    for (const digit of MENU_DIGITS) {
+      formData[digitFieldKey(digit)] = '';
+    }
+
+    // Fill in category names from cases
+    if (node.router?.cases && node.router?.categories) {
+      for (const case_ of node.router.cases) {
+        if (case_.type === 'has_number_eq' && case_.arguments?.[0]) {
+          const digit = case_.arguments[0];
+          const category = node.router.categories.find(
+            (cat: Category) => cat.uuid === case_.category_uuid
+          );
+          if (category && MENU_DIGITS.includes(digit)) {
+            formData[digitFieldKey(digit)] = category.name;
+          }
+        }
+      }
+    }
+
+    return formData;
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const categories: Category[] = [];
+    const exits: Exit[] = [];
+    const cases: any[] = [];
+
+    // Build categories and cases for each filled digit
+    for (const digit of MENU_DIGITS) {
+      const categoryName = (formData[digitFieldKey(digit)] || '').trim();
+      if (!categoryName) continue;
+
+      // Check if a category with this name already exists in our new list
+      let category = categories.find((c) => c.name === categoryName);
+
+      if (!category) {
+        // Try to find existing category with same name to preserve UUIDs
+        const existingCat = existingCategories.find(
+          (c: Category) => c.name === categoryName
+        );
+
+        if (existingCat) {
+          category = existingCat;
+          const existingExit = existingExits.find(
+            (e: Exit) => e.uuid === existingCat.exit_uuid
+          );
+          categories.push(category);
+          exits.push(
+            existingExit || {
+              uuid: existingCat.exit_uuid,
+              destination_uuid: null
+            }
+          );
+        } else {
+          const exitUuid = generateUUID();
+          category = {
+            uuid: generateUUID(),
+            name: categoryName,
+            exit_uuid: exitUuid
+          };
+          categories.push(category);
+          exits.push({ uuid: exitUuid, destination_uuid: null });
+        }
+      }
+
+      // Find existing case for this digit to preserve UUID
+      const existingCase = existingCases.find(
+        (c: any) => c.type === 'has_number_eq' && c.arguments?.[0] === digit
+      );
+
+      cases.push({
+        uuid: existingCase?.uuid || generateUUID(),
+        type: 'has_number_eq',
+        arguments: [digit],
+        category_uuid: category.uuid
+      });
+    }
+
+    // Add "Other" default category
+    const existingOther = existingCategories.find(
+      (c: Category) => c.name === 'Other'
+    );
+
+    let otherCategory: Category;
+    if (existingOther) {
+      otherCategory = existingOther;
+      const existingExit = existingExits.find(
+        (e: Exit) => e.uuid === existingOther.exit_uuid
+      );
+      exits.push(
+        existingExit || {
+          uuid: existingOther.exit_uuid,
+          destination_uuid: null
+        }
+      );
+    } else {
+      const exitUuid = generateUUID();
+      otherCategory = {
+        uuid: generateUUID(),
+        name: 'Other',
+        exit_uuid: exitUuid
+      };
+      exits.push({ uuid: exitUuid, destination_uuid: null });
+    }
+    categories.push(otherCategory);
+
+    const router: any = {
+      type: 'switch',
+      operand: '@input.text',
+      default_category_uuid: otherCategory.uuid,
+      cases,
+      categories,
+      wait: {
+        type: 'msg',
+        hint: {
+          type: 'digits',
+          count: 1
+        }
+      }
+    };
+
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      router.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router,
+      exits
+    };
+  },
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/operators.ts

@@ -44,11 +44,6 @@ export const OPERATORS: OperatorConfig[] = [
     operands: 0,
     categoryName: 'Has Text'
   },
-  {
-    type: 'has_pattern',
-    name: 'matches regex',
-    operands: 1
-  },
 
   // Number operators
   {
@@ -180,6 +175,11 @@ export const OPERATORS: OperatorConfig[] = [
     operands: 0,
     categoryName: 'Not Empty',
     visibility: 'hidden'
+  },
+  {
+    type: 'has_pattern',
+    name: 'matches regex',
+    operands: 1
   }
 ];
 
@@ -190,6 +190,24 @@ export const getWaitForResponseOperators = (): OperatorConfig[] => {
   );
 };
 
+// Number operator types used for digit-based routing
+const DIGIT_OPERATOR_TYPES = new Set([
+  'has_beginning',
+  'has_number',
+  'has_number_between',
+  'has_number_lt',
+  'has_number_lte',
+  'has_number_eq',
+  'has_number_gte',
+  'has_number_gt',
+  'has_pattern'
+]);
+
+// Get operators suitable for wait_for_digits rules (number operators + regex)
+export const getDigitOperators = (): OperatorConfig[] => {
+  return OPERATORS.filter((op) => DIGIT_OPERATOR_TYPES.has(op.type));
+};
+
 // Get operator configuration by type
 export const getOperatorConfig = (type: string): OperatorConfig | undefined => {
   return OPERATORS.find((op) => op.type === type);