@nyaruka/temba-components 0.131.0 → 0.131.2

package/src/flow/nodes/split_by_run_result.ts

@@ -1,7 +1,253 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig } from '../types';
+import { Node } from '../../store/flow-definition';
+import { createRulesRouter } from '../../utils';
+import {
+  getWaitForResponseOperators,
+  operatorsToSelectOptions,
+  getOperatorConfig
+} from '../operators';
+import { resultNameField } from './shared';
+import {
+  createRulesArrayConfig,
+  extractUserRules,
+  casesToFormRules
+} from './shared-rules';
+import { getStore } from '../../store/Store';
+
+// delimit index options (first through 20th)
+const DELIMIT_INDEX_OPTIONS = [
+  { value: '0', name: 'first result' },
+  { value: '1', name: 'second result' },
+  { value: '2', name: 'third result' },
+  { value: '3', name: 'fourth result' },
+  { value: '4', name: 'fifth result' },
+  { value: '5', name: 'sixth result' },
+  { value: '6', name: 'seventh result' },
+  { value: '7', name: 'eighth result' },
+  { value: '8', name: 'ninth result' },
+  { value: '9', name: 'tenth result' },
+  { value: '10', name: '11th result' },
+  { value: '11', name: '12th result' },
+  { value: '12', name: '13th result' },
+  { value: '13', name: '14th result' },
+  { value: '14', name: '15th result' },
+  { value: '15', name: '16th result' },
+  { value: '16', name: '17th result' },
+  { value: '17', name: '18th result' },
+  { value: '18', name: '19th result' },
+  { value: '19', name: '20th result' }
+];
+
+// delimit by options - includes "don't delimit" and delimiter characters
+const DELIMIT_BY_OPTIONS = [
+  { value: '', name: "Don't delimit result" },
+  { value: ' ', name: 'Delimited by spaces' },
+  { value: '.', name: 'Delimited by periods' },
+  { value: '+', name: 'Delimited by plusses' }
+];
 
 export const split_by_run_result: NodeConfig = {
   type: 'split_by_run_result',
-  name: 'Split by Flow Result',
-  color: COLORS.split
+  name: 'Split by Result',
+  group: SPLIT_GROUPS.split,
+  dialogSize: 'large',
+  form: {
+    result: {
+      type: 'select',
+
+      required: true,
+      searchable: false,
+      clearable: false,
+      placeholder: 'Select a result...',
+      getDynamicOptions: () => {
+        const store = getStore();
+        return store
+          ? store
+              .getState()
+              .getFlowResults()
+              .map((r) => ({ value: r.key, name: r.name }))
+          : [];
+      },
+      valueKey: 'value',
+      nameKey: 'name'
+    },
+    delimit_by: {
+      type: 'select',
+      required: false,
+      searchable: false,
+      clearable: false,
+      options: DELIMIT_BY_OPTIONS,
+      valueKey: 'value',
+      nameKey: 'name',
+      maxWidth: '180px'
+    },
+    delimit_index: {
+      type: 'select',
+      required: false,
+      searchable: false,
+      clearable: false,
+      options: DELIMIT_INDEX_OPTIONS,
+      valueKey: 'value',
+      nameKey: 'name',
+      maxWidth: '140px',
+      conditions: {
+        visible: (formData: FormData) => {
+          const delimitBy = formData.delimit_by?.[0]?.value;
+          return delimitBy !== undefined && delimitBy !== '';
+        }
+      }
+    },
+    rules: createRulesArrayConfig(
+      operatorsToSelectOptions(getWaitForResponseOperators()),
+      'Define rules to categorize the result'
+    ),
+    result_name: resultNameField
+  },
+  layout: [
+    {
+      type: 'row',
+      label: 'Flow Result',
+      helpText:
+        'Select a flow result and optionally delimit it to split on a specific part',
+      items: ['result', 'delimit_by', 'delimit_index']
+    },
+    'rules',
+    'result_name'
+  ],
+  validate: (formData: FormData) => {
+    const errors: { [key: string]: string } = {};
+
+    // Validate result is provided
+    if (!formData.result || formData.result.length === 0) {
+      errors.result = 'A flow result is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  toFormData: (node: Node, nodeUI?: any) => {
+    // Get the result from the UI config operand (source of truth)
+    const result = nodeUI?.config?.operand;
+
+    // Extract rules from router cases using shared function
+    const rules = casesToFormRules(node);
+
+    // Extract delimiter configuration by checking the actual operand string
+    // If operand contains field() function, we have a delimiter
+    const operand = node.router?.operand || '';
+    const fieldFunctionMatch = operand.match(
+      /field\(results\.[\w]+,\s*(\d+),\s*"(.+?)"\)/
+    );
+
+    const hasDelimiter = fieldFunctionMatch !== null;
+    const delimitIndex = hasDelimiter
+      ? parseInt(fieldFunctionMatch![1], 10)
+      : 0;
+    const delimiter = hasDelimiter ? fieldFunctionMatch![2] : '';
+
+    return {
+      uuid: node.uuid,
+      result: result ? [result] : [],
+      delimit_by: hasDelimiter
+        ? [DELIMIT_BY_OPTIONS.find((opt) => opt.value === delimiter)]
+        : [DELIMIT_BY_OPTIONS[0]],
+      delimit_index: hasDelimiter
+        ? [
+            DELIMIT_INDEX_OPTIONS.find(
+              (opt) => opt.value === String(delimitIndex)
+            )
+          ]
+        : [DELIMIT_INDEX_OPTIONS[0]],
+      rules: rules,
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    // Get selected result (it's an array from the select component)
+    const selectedResult = formData.result?.[0];
+
+    if (!selectedResult) {
+      return originalNode;
+    }
+
+    // Build operand based on whether delimiter is selected
+    let operand: string;
+    const delimitBy = formData.delimit_by?.[0]?.value;
+    const hasDelimiter = delimitBy !== undefined && delimitBy !== '';
+
+    if (hasDelimiter) {
+      // Get delimiter configuration
+      const delimitIndex = formData.delimit_index?.[0]?.value ?? '0';
+
+      // Build operand with field() function
+      operand = `@(field(results.${selectedResult.value}, ${delimitIndex}, "${delimitBy}"))`;
+    } else {
+      // Standard operand without delimiter
+      operand = `@results.${selectedResult.value}`;
+    }
+
+    // Get user rules using shared extraction function
+    const userRules = extractUserRules(formData);
+
+    // Get existing router data for preservation
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    // Create router and exits using existing data when possible
+    const { router, exits } = createRulesRouter(
+      operand,
+      userRules,
+      getOperatorConfig,
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    // Build final router with result_name
+    const finalRouter: any = {
+      ...router
+    };
+
+    // Only set result_name if provided
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      finalRouter.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router: finalRouter,
+      exits: exits
+    };
+  },
+  toUIConfig: (formData: FormData) => {
+    // Get selected result (it's an array from the select component)
+    const selectedResult = formData.result?.[0];
+
+    if (!selectedResult) {
+      return {};
+    }
+
+    // Build UI config with operand information
+    const config: any = {
+      operand: {
+        id: selectedResult.value,
+        name: selectedResult.name,
+        type: 'result'
+      }
+    };
+
+    // Add delimiter configuration if selected
+    const delimitBy = formData.delimit_by?.[0]?.value;
+    const hasDelimiter = delimitBy !== undefined && delimitBy !== '';
+
+    if (hasDelimiter) {
+      config.index = parseInt(formData.delimit_index?.[0]?.value ?? '0', 10);
+      config.delimiter = delimitBy;
+    }
+
+    return config;
+  }
 };

package/src/flow/nodes/split_by_scheme.ts

@@ -1,7 +1,197 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig } from '../types';
+import { Node, Category, Exit, Case } from '../../store/flow-definition.d';
+import { generateUUID } from '../../utils';
+import { SCHEMES } from '../utils';
+import { resultNameField } from './shared';
+
+// Helper function to get scheme options for the select dropdown
+const getSchemeOptions = () => {
+  return SCHEMES.map((scheme) => ({
+    value: scheme.scheme,
+    name: scheme.name
+  }));
+};
+
+// Helper function to create a switch router with scheme cases
+const createSchemeRouter = (
+  selectedSchemes: string[],
+  existingCategories: Category[] = [],
+  existingExits: Exit[] = [],
+  existingCases: Case[] = [],
+  resultName: string = ''
+) => {
+  const categories: Category[] = [];
+  const exits: Exit[] = [];
+  const cases: Case[] = [];
+
+  // Create categories, exits, and cases for each selected scheme
+  selectedSchemes.forEach((scheme) => {
+    const schemeObj = SCHEMES.find((s) => s.scheme === scheme);
+    const schemeName = schemeObj?.name || scheme;
+
+    // Try to find existing category by scheme name
+    const existingCategory = existingCategories.find(
+      (cat) => cat.name === schemeName
+    );
+    const existingExit = existingCategory
+      ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+      : null;
+    const existingCase = existingCases.find((c) => c.arguments?.[0] === scheme);
+
+    const exitUuid = existingExit?.uuid || generateUUID();
+    const categoryUuid = existingCategory?.uuid || generateUUID();
+    const caseUuid = existingCase?.uuid || generateUUID();
+
+    categories.push({
+      uuid: categoryUuid,
+      name: schemeName,
+      exit_uuid: exitUuid
+    });
+
+    exits.push({
+      uuid: exitUuid,
+      destination_uuid: existingExit?.destination_uuid || null
+    });
+
+    cases.push({
+      uuid: caseUuid,
+      type: 'has_only_phrase',
+      arguments: [scheme],
+      category_uuid: categoryUuid
+    });
+  });
+
+  // Add default "Other" category for schemes not in the selected list
+  const existingOtherCategory = existingCategories.find((cat) => {
+    const matchesSelected = selectedSchemes.some((scheme) => {
+      const schemeObj = SCHEMES.find((s) => s.scheme === scheme);
+      return schemeObj?.name === cat.name;
+    });
+    return cat.name === 'Other' && !matchesSelected;
+  });
+  const existingOtherExit = existingOtherCategory
+    ? existingExits.find(
+        (exit) => exit.uuid === existingOtherCategory.exit_uuid
+      )
+    : null;
+
+  const otherExitUuid = existingOtherExit?.uuid || generateUUID();
+  const otherCategoryUuid = existingOtherCategory?.uuid || generateUUID();
+
+  categories.push({
+    uuid: otherCategoryUuid,
+    name: 'Other',
+    exit_uuid: otherExitUuid
+  });
+
+  exits.push({
+    uuid: otherExitUuid,
+    destination_uuid: existingOtherExit?.destination_uuid || null
+  });
+
+  return {
+    router: {
+      type: 'switch' as const,
+      cases: cases,
+      categories: categories,
+      default_category_uuid: otherCategoryUuid,
+      operand: '@(urn_parts(contact.urn).scheme)',
+      result_name: resultName
+    },
+    exits: exits
+  };
+};
 
 export const split_by_scheme: NodeConfig = {
   type: 'split_by_scheme',
   name: 'Split by URN Type',
-  color: COLORS.split
+  group: SPLIT_GROUPS.split,
+  form: {
+    schemes: {
+      type: 'select',
+      label: 'Channel Types',
+      helpText:
+        "The contact's URN is the address they used to reach you such as their phone number or a Facebook ID. Select which URN types to split by.",
+      required: true,
+      options: getSchemeOptions(),
+      multi: true,
+      searchable: true,
+      placeholder: 'Select the channels to split by...'
+    },
+    result_name: resultNameField
+  },
+  layout: ['schemes', 'result_name'],
+  validate: (formData: FormData) => {
+    const errors: { [key: string]: string } = {};
+
+    if (
+      !formData.schemes ||
+      !Array.isArray(formData.schemes) ||
+      formData.schemes.length === 0
+    ) {
+      errors.schemes = 'At least one channel type is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  toFormData: (node: Node) => {
+    // Extract schemes from the existing node structure
+    const schemes: string[] = [];
+
+    if (node.router?.cases) {
+      node.router.cases.forEach((c: Case) => {
+        if (c.type === 'has_only_phrase' && c.arguments?.length > 0) {
+          schemes.push(c.arguments[0]);
+        }
+      });
+    }
+
+    return {
+      uuid: node.uuid,
+      schemes: schemes.map((scheme) => {
+        const schemeObj = SCHEMES.find((s) => s.scheme === scheme);
+        return {
+          value: scheme,
+          name: schemeObj?.name || scheme
+        };
+      }),
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    // Get selected schemes (handle both array of objects and array of strings)
+    const selectedSchemes = (formData.schemes || [])
+      .filter((scheme: any) => scheme)
+      .map((scheme: any) =>
+        typeof scheme === 'string' ? scheme : scheme.value
+      );
+
+    // Create router and exits using existing data when possible
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createSchemeRouter(
+      selectedSchemes,
+      existingCategories,
+      existingExits,
+      existingCases,
+      formData.result_name || ''
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: originalNode.actions || [],
+      router: router,
+      exits: exits
+    };
+  },
+  router: {
+    type: 'switch',
+    operand: '@(urn_parts(contact.urn).scheme)'
+  }
 };

package/src/flow/nodes/split_by_subflow.ts

@@ -1,12 +1,14 @@
-import { COLORS, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
 import { Node } from '../../store/flow-definition';
 import { generateUUID } from '../../utils';
 import { html } from 'lit';
+import { renderNamedObjects } from '../utils';
 
 export const split_by_subflow: NodeConfig = {
   type: 'split_by_subflow',
   name: 'Enter a Flow',
-  color: COLORS.execute,
+  group: ACTION_GROUPS.trigger,
+  showAsAction: true,
   form: {
     flow: {
       type: 'select',
@@ -26,7 +28,7 @@ export const split_by_subflow: NodeConfig = {
     ) as any;
     return html`
       <div class="body">
-        ${enterFlowAction?.flow?.name || 'Configure subflow'}
+        ${renderNamedObjects([enterFlowAction?.flow], 'flow')}
       </div>
     `;
   },
@@ -43,7 +45,7 @@ export const split_by_subflow: NodeConfig = {
         : []
     };
   },
-  fromFormData: (formData: any, originalNode: Node): Node => {
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get flow selection
     const flowSelection =
       Array.isArray(formData.flow) && formData.flow.length > 0

package/src/flow/nodes/split_by_ticket.ts

@@ -1,4 +1,4 @@
-import { COLORS, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
 import { Node, OpenTicket } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
@@ -6,7 +6,8 @@ import { html } from 'lit';
 export const split_by_ticket: NodeConfig = {
   type: 'split_by_ticket',
   name: 'Open Ticket',
-  color: COLORS.create,
+  group: ACTION_GROUPS.trigger,
+  showAsAction: true,
   form: {
     topic: {
       type: 'select',
@@ -81,7 +82,7 @@ export const split_by_ticket: NodeConfig = {
       note: openTicketAction?.note || ''
     };
   },
-  fromFormData: (formData: any, originalNode: Node): Node => {
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Find existing open_ticket action to preserve its UUID
     const existingOpenTicketAction = originalNode.actions?.find(
       (action) => action.type === 'open_ticket'

package/src/flow/nodes/split_by_webhook.ts

@@ -1,4 +1,4 @@
-import { COLORS, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
 import { CallWebhook, Node } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
@@ -19,7 +19,8 @@ const defaultPost = `@(json(object(
 export const split_by_webhook: NodeConfig = {
   type: 'split_by_webhook',
   name: 'Call Webhook',
-  color: COLORS.call,
+  group: ACTION_GROUPS.services,
+  showAsAction: true,
   form: {
     method: {
       type: 'select',
@@ -95,7 +96,7 @@ export const split_by_webhook: NodeConfig = {
       collapsible: true,
       collapsed: true,
       helpText: 'Configure authentication or custom headers',
-      getGroupValueCount: (formData: any) => {
+      getGroupValueCount: (formData: FormData) => {
         return formData.headers?.length || 0;
       }
     },
@@ -106,7 +107,7 @@ export const split_by_webhook: NodeConfig = {
       collapsible: true,
       collapsed: true,
       helpText: 'Configure the request payload',
-      getGroupValueCount: (formData: any) => {
+      getGroupValueCount: (formData: FormData) => {
         return !!(
           formData.body &&
           formData.body.trim() !== '' &&
@@ -142,7 +143,7 @@ export const split_by_webhook: NodeConfig = {
       body: callWebhookAction?.body || ''
     };
   },
-  fromFormData: (formData: any, originalNode: Node): Node => {
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get method selection
     const methodSelection =
       Array.isArray(formData.method) && formData.method.length > 0

package/src/flow/nodes/wait_for_audio.ts

@@ -1,7 +1,7 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig } from '../types';
 
 export const wait_for_audio: NodeConfig = {
   type: 'wait_for_audio',
   name: 'Wait for Audio',
-  color: COLORS.wait
+  group: SPLIT_GROUPS.wait
 };

package/src/flow/nodes/wait_for_digits.ts

@@ -1,7 +1,7 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig } from '../types';
 
 export const wait_for_digits: NodeConfig = {
   type: 'wait_for_digits',
   name: 'Wait for Digits',
-  color: COLORS.wait
+  group: SPLIT_GROUPS.wait
 };

package/src/flow/nodes/wait_for_image.ts

@@ -1,7 +1,7 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig } from '../types';
 
 export const wait_for_image: NodeConfig = {
   type: 'wait_for_image',
   name: 'Wait for Image',
-  color: COLORS.wait
+  group: SPLIT_GROUPS.wait
 };

package/src/flow/nodes/wait_for_location.ts

@@ -1,7 +1,7 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig } from '../types';
 
 export const wait_for_location: NodeConfig = {
   type: 'wait_for_location',
   name: 'Wait for Location',
-  color: COLORS.wait
+  group: SPLIT_GROUPS.wait
 };

package/src/flow/nodes/wait_for_menu.ts

@@ -1,7 +1,7 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig } from '../types';
 
 export const wait_for_menu: NodeConfig = {
   type: 'wait_for_menu',
   name: 'Wait for Menu Selection',
-  color: COLORS.wait
+  group: SPLIT_GROUPS.wait
 };