@nyaruka/temba-components 0.131.0 → 0.131.2

package/src/flow/nodes/split_by_contact_field.ts

@@ -1,7 +1,189 @@
-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 { SCHEMES } from '../utils';
+import { html } from 'lit';
+
+// System contact properties that can be split on
+export const CONTACT_PROPERTIES = {
+  name: { id: 'name', name: 'Name', type: 'property' },
+  language: { id: 'language', name: 'Language', type: 'property' },
+  status: { id: 'status', name: 'Status', type: 'property' },
+  channel: { id: 'channel', name: 'Channel', type: 'property' }
+};
+
+// Helper to get operand for the selected field
+const getOperandForField = (field: any): string => {
+  // For URN schemes, split on the URN path (the actual ID value like Facebook ID)
+  // Note: This is different from split_by_scheme which splits on the scheme type itself
+  if (field.type === 'scheme') {
+    // field.id or field.value will be the scheme name like 'facebook', 'whatsapp', etc
+    const schemeId = field.id || field.value;
+    return `@(default(urn_parts(urns.${schemeId}).path, ""))`;
+  }
+  // For system properties, use the id
+  if (field.type === 'property') {
+    return `@contact.${field.id}`;
+  }
+  // Fallback to key
+  return `@fields.${field.key}`;
+};
 
 export const split_by_contact_field: NodeConfig = {
   type: 'split_by_contact_field',
-  name: 'Split by <Contact Field Name>',
-  color: COLORS.split
+  name: 'Split by Contact Field',
+  group: SPLIT_GROUPS.split,
+  dialogSize: 'large',
+  form: {
+    field: {
+      type: 'select',
+      required: true,
+      searchable: true,
+      clearable: false,
+      endpoint: '/api/v2/fields.json',
+      valueKey: 'key',
+      nameKey: 'name',
+      placeholder: 'Select a field...',
+      // Provide system properties as fixed options at the top
+      options: [
+        ...Object.values(CONTACT_PROPERTIES).map((prop) => ({
+          value: prop.id,
+          name: prop.name,
+          type: prop.type
+        })),
+        // Add all URN scheme options (they represent splitting on the URN value, like Facebook ID)
+        ...SCHEMES.filter((scheme) => !scheme.excludeFromSplit).map(
+          (scheme) => ({
+            value: scheme.scheme,
+            name: scheme.path,
+            type: 'scheme'
+          })
+        )
+      ]
+    },
+    rules: createRulesArrayConfig(
+      operatorsToSelectOptions(getWaitForResponseOperators()),
+      'Define rules to split the contact field into categories'
+    ),
+    result_name: resultNameField
+  },
+  layout: ['field', 'rules', 'result_name'],
+  validate: (formData: FormData) => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.field || formData.field.length === 0) {
+      errors.field = 'A field is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  toFormData: (node: Node, nodeUI?: any) => {
+    // Get the field from the UI config operand (source of truth)
+    const field = nodeUI?.config?.operand || CONTACT_PROPERTIES.name;
+
+    // Extract rules from router cases using shared function
+    const rules = casesToFormRules(node);
+
+    return {
+      uuid: node.uuid,
+      field: [field],
+      rules: rules,
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    // Get selected field (it's an array from the select component)
+    const selectedField = formData.field?.[0];
+
+    if (!selectedField) {
+      return originalNode;
+    }
+
+    // Get operand for the selected field
+    const operand = getOperandForField(selectedField);
+
+    // 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 field (it's an array from the select component)
+    const selectedField = formData.field?.[0];
+
+    if (!selectedField) {
+      return {};
+    }
+
+    // For scheme types, the id should be the scheme name (facebook, whatsapp, etc)
+    // For custom fields, the id should be the field key
+    // For system properties, the id should be the property id
+    let operandId =
+      selectedField.id || selectedField.value || selectedField.key;
+
+    // If this is a scheme type, ensure we use the scheme name as the id
+    if (selectedField.type === 'scheme') {
+      operandId = selectedField.value || selectedField.id;
+    }
+
+    let type = selectedField.type;
+    if (type !== 'property' && type !== 'scheme') {
+      type = 'field';
+    }
+
+    // Return UI config with operand information for persistence
+    return {
+      operand: {
+        id: operandId,
+        name: selectedField.name || selectedField.label,
+        type
+      }
+    };
+  },
+  renderTitle: (node: Node, nodeUI?: any) => {
+    return html`<div>Split by ${nodeUI.config.operand.name}</div>`;
+  }
 };

package/src/flow/nodes/split_by_expression.ts

@@ -1,7 +1,99 @@
-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';
 
 export const split_by_expression: NodeConfig = {
   type: 'split_by_expression',
   name: 'Split by Expression',
-  color: COLORS.split
+  group: SPLIT_GROUPS.split,
+  dialogSize: 'large',
+  form: {
+    operand: {
+      type: 'text',
+      label: 'Expression',
+      helpText: 'The expression to evaluate and split on',
+      required: true,
+      evaluated: true,
+      placeholder: '@fields.age'
+    },
+    rules: createRulesArrayConfig(
+      operatorsToSelectOptions(getWaitForResponseOperators()),
+      'Define rules to categorize the expression result'
+    ),
+    result_name: resultNameField
+  },
+  layout: ['operand', 'rules', 'result_name'],
+  validate: (formData: FormData) => {
+    const errors: { [key: string]: string } = {};
+
+    // Validate operand is provided
+    if (!formData.operand || formData.operand.trim() === '') {
+      errors.operand = 'Expression is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  toFormData: (node: Node) => {
+    // Extract rules from router cases using shared function
+    const rules = casesToFormRules(node);
+
+    return {
+      uuid: node.uuid,
+      operand: node.router?.operand || '@input.text',
+      rules: rules,
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    // Get user rules using shared extraction function
+    const userRules = extractUserRules(formData);
+
+    // Get operand from form data
+    const operand = formData.operand?.trim() || '@input.text';
+
+    // 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
+    };
+  }
 };

package/src/flow/nodes/split_by_groups.ts

@@ -1,13 +1,15 @@
-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 { resultNameField } from './shared';
 
 // Helper function to create a switch router with group cases
 const createGroupRouter = (
   userGroups: { uuid: string; name: string }[],
   existingCategories: Category[] = [],
   existingExits: Exit[] = [],
-  existingCases: Case[] = []
+  existingCases: Case[] = [],
+  resultName: string = ''
 ) => {
   const categories: Category[] = [];
   const exits: Exit[] = [];
@@ -82,7 +84,7 @@ const createGroupRouter = (
       categories: categories,
       default_category_uuid: otherCategoryUuid,
       operand: '@contact.groups',
-      result_name: ''
+      result_name: resultName
     },
     exits: exits
   };
@@ -91,7 +93,7 @@ const createGroupRouter = (
 export const split_by_groups: NodeConfig = {
   type: 'split_by_groups',
   name: 'Split by Group',
-  color: COLORS.split,
+  group: SPLIT_GROUPS.split,
   form: {
     groups: {
       type: 'select',
@@ -121,10 +123,11 @@ export const split_by_groups: NodeConfig = {
         }
         return null;
       }
-    }
+    },
+    result_name: resultNameField
   },
-  layout: ['groups'],
-  validate: (formData: any) => {
+  layout: ['groups', 'result_name'],
+  validate: (formData: FormData) => {
     const errors: { [key: string]: string } = {};
 
     if (
@@ -157,10 +160,11 @@ export const split_by_groups: NodeConfig = {
 
     return {
       uuid: node.uuid,
-      groups: groups
+      groups: groups,
+      result_name: node.router?.result_name || ''
     };
   },
-  fromFormData: (formData: any, originalNode: Node): Node => {
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get selected groups
     const selectedGroups = (formData.groups || [])
       .filter((group: any) => group?.uuid || group?.arbitrary)
@@ -178,7 +182,8 @@ export const split_by_groups: NodeConfig = {
       selectedGroups,
       existingCategories,
       existingExits,
-      existingCases
+      existingCases,
+      formData.result_name || ''
     );
 
     // Return the complete node

package/src/flow/nodes/split_by_intent.ts

@@ -0,0 +1,7 @@
+import { NodeConfig, ACTION_GROUPS } from '../types';
+
+export const split_by_llm_categorize: NodeConfig = {
+  type: 'split_by_intent',
+  name: 'Call classifier',
+  group: ACTION_GROUPS.services
+};

package/src/flow/nodes/split_by_llm.ts

@@ -1,4 +1,4 @@
-import { COLORS, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
 import { CallLLM, Node } 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_llm: NodeConfig = {
   type: 'split_by_llm',
   name: 'Call AI',
-  color: COLORS.call,
+  group: ACTION_GROUPS.services,
+  showAsAction: true,
   render: (node: Node) => {
     const callLlmAction = node.actions?.find(
       (action) => action.type === 'call_llm'
@@ -68,7 +69,7 @@ export const split_by_llm: NodeConfig = {
       instructions: callLlmAction?.instructions || ''
     };
   },
-  fromFormData: (formData: any, originalNode: Node): Node => {
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get LLM selection
     const llmSelection =
       Array.isArray(formData.llm) && formData.llm.length > 0

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,4 +1,4 @@
-import { COLORS, NodeConfig } from '../types';
+import { FormData, NodeConfig, ACTION_GROUPS } from '../types';
 import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
@@ -6,7 +6,7 @@ import { html } from 'lit';
 export const split_by_llm_categorize: NodeConfig = {
   type: 'split_by_llm_categorize',
   name: 'Split by AI',
-  color: COLORS.call,
+  group: ACTION_GROUPS.services,
   form: {
     llm: {
       type: 'select',
@@ -48,7 +48,7 @@ export const split_by_llm_categorize: NodeConfig = {
     }
   },
   layout: ['llm', 'input', 'categories'],
-  validate: (formData: any) => {
+  validate: (formData: FormData) => {
     const errors: { [key: string]: string } = {};
 
     // Check for duplicate category names
@@ -117,7 +117,7 @@ export const split_by_llm_categorize: NodeConfig = {
       categories: categories
     };
   },
-  fromFormData: (formData: any, originalNode: Node): Node => {
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get LLM selection
     const llmSelection =
       Array.isArray(formData.llm) && formData.llm.length > 0

package/src/flow/nodes/split_by_random.ts

@@ -1,4 +1,4 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig } from '../types';
 import { Node, Category, Exit } from '../../store/flow-definition.d';
 import { generateUUID } from '../../utils';
 
@@ -47,8 +47,8 @@ const createRandomRouter = (
 
 export const split_by_random: NodeConfig = {
   type: 'split_by_random',
-  name: 'Split by Random',
-  color: COLORS.split,
+  name: 'Random Split',
+  group: SPLIT_GROUPS.split,
   form: {
     categories: {
       type: 'array',
@@ -72,7 +72,7 @@ export const split_by_random: NodeConfig = {
     }
   },
   layout: ['categories'],
-  validate: (formData: any) => {
+  validate: (formData: FormData) => {
     const errors: { [key: string]: string } = {};
 
     // Check for duplicate category names
@@ -129,7 +129,7 @@ export const split_by_random: NodeConfig = {
       categories: categories
     };
   },
-  fromFormData: (formData: any, originalNode: Node): Node => {
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get user categories
     const userCategories = (formData.categories || [])
       .filter((item: any) => item?.name?.trim())

package/src/flow/nodes/split_by_resthook.ts

@@ -0,0 +1,130 @@
+import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
+import { CallResthook, Node } from '../../store/flow-definition';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
+import { resultNameField } from './shared';
+
+export const split_by_resthook: NodeConfig = {
+  type: 'split_by_resthook',
+  name: 'Call Resthook',
+  group: ACTION_GROUPS.services,
+  showAsAction: true,
+  form: {
+    resthook: {
+      type: 'select',
+      label: 'Resthook',
+      required: true,
+      searchable: true,
+      clearable: false,
+      placeholder: 'Select a resthook...',
+      endpoint: '/api/v2/resthooks.json',
+      valueKey: 'resthook',
+      nameKey: 'resthook',
+      helpText: 'Select the resthook to call'
+    },
+    result_name: resultNameField
+  },
+  layout: ['resthook', 'result_name'],
+  validate: (formData: FormData) => {
+    const errors: { [key: string]: string } = {};
+
+    // validate resthook is provided
+    if (!formData.resthook || formData.resthook.length === 0) {
+      errors.resthook = 'A resthook is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  render: (node: Node) => {
+    const callResthookAction = node.actions?.find(
+      (action) => action.type === 'call_resthook'
+    ) as CallResthook;
+    return html`
+      <div
+        class="body"
+        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+      >
+        ${callResthookAction?.resthook || 'Configure resthook'}
+      </div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // extract data from the existing node structure
+    const callResthookAction = node.actions?.find(
+      (action) => action.type === 'call_resthook'
+    ) as CallResthook;
+
+    return {
+      uuid: node.uuid,
+      resthook: callResthookAction?.resthook
+        ? [
+            {
+              resthook: callResthookAction.resthook
+            }
+          ]
+        : [],
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    // get resthook selection
+    const resthookSelection =
+      Array.isArray(formData.resthook) && formData.resthook.length > 0
+        ? formData.resthook[0]
+        : null;
+
+    if (!resthookSelection) {
+      return originalNode;
+    }
+
+    // find existing call_resthook action to preserve its UUID
+    const existingCallResthookAction = originalNode.actions?.find(
+      (action) => action.type === 'call_resthook'
+    );
+    const callResthookUuid = existingCallResthookAction?.uuid || generateUUID();
+
+    // create call_resthook action
+    const callResthookAction: CallResthook = {
+      type: 'call_resthook',
+      uuid: callResthookUuid,
+      resthook: resthookSelection.resthook
+    };
+
+    // create categories and exits for Success and Failure
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createSuccessFailureRouter(
+      '@webhook.json.status',
+      {
+        type: 'has_text',
+        arguments: []
+      },
+      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 the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: [callResthookAction],
+      router: finalRouter,
+      exits: exits
+    };
+  }
+};