@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/flow/nodes/split_by_contact_field.ts

@@ -1,7 +1,199 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node } from '../../store/flow-definition';
+import { createRulesRouter } from '../../utils';
+import {
+  getWaitForResponseOperators,
+  operatorsToSelectOptions,
+  getOperatorConfig
+} from '../operators';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  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>`;
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_expression.ts

@@ -1,7 +1,109 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node } from '../../store/flow-definition';
+import { createRulesRouter } from '../../utils';
+import {
+  getWaitForResponseOperators,
+  operatorsToSelectOptions,
+  getOperatorConfig
+} from '../operators';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  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
+    };
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_groups.ts

@@ -1,13 +1,19 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node, Category, Exit, Case } from '../../store/flow-definition.d';
 import { generateUUID } from '../../utils';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} 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 +88,7 @@ const createGroupRouter = (
       categories: categories,
       default_category_uuid: otherCategoryUuid,
       operand: '@contact.groups',
-      result_name: ''
+      result_name: resultName
     },
     exits: exits
   };
@@ -91,7 +97,8 @@ const createGroupRouter = (
 export const split_by_groups: NodeConfig = {
   type: 'split_by_groups',
   name: 'Split by Group',
-  color: COLORS.split,
+  group: SPLIT_GROUPS.split,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   form: {
     groups: {
       type: 'select',
@@ -121,10 +128,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 +165,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 +187,8 @@ export const split_by_groups: NodeConfig = {
       selectedGroups,
       existingCategories,
       existingExits,
-      existingCases
+      existingCases,
+      formData.result_name || ''
     );
 
     // Return the complete node
@@ -192,5 +202,10 @@ export const split_by_groups: NodeConfig = {
   router: {
     type: 'switch',
     operand: '@contact.groups'
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_intent.ts

@@ -0,0 +1,8 @@
+import { NodeConfig, ACTION_GROUPS, FlowTypes } from '../types';
+
+export const split_by_llm_categorize: NodeConfig = {
+  type: 'split_by_intent',
+  name: 'Call classifier',
+  group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND]
+};

package/src/flow/nodes/split_by_llm.ts

@@ -1,12 +1,25 @@
-import { COLORS, NodeConfig } from '../types';
+import {
+  ACTION_GROUPS,
+  FormData,
+  NodeConfig,
+  FlowTypes,
+  Features
+} from '../types';
 import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 export const split_by_llm: NodeConfig = {
   type: 'split_by_llm',
   name: 'Call AI',
-  color: COLORS.call,
+  group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  features: [Features.AI],
+  showAsAction: true,
   render: (node: Node) => {
     const callLlmAction = node.actions?.find(
       (action) => action.type === 'call_llm'
@@ -68,7 +81,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
@@ -116,5 +129,10 @@ export const split_by_llm: NodeConfig = {
       router: router,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,12 +1,24 @@
-import { COLORS, NodeConfig } from '../types';
+import {
+  FormData,
+  NodeConfig,
+  ACTION_GROUPS,
+  FlowTypes,
+  Features
+} from '../types';
 import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 export const split_by_llm_categorize: NodeConfig = {
   type: 'split_by_llm_categorize',
   name: 'Split by AI',
-  color: COLORS.call,
+  group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  features: [Features.AI],
   form: {
     llm: {
       type: 'select',
@@ -48,7 +60,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 +129,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
@@ -171,5 +183,10 @@ export const split_by_llm_categorize: NodeConfig = {
       router: router,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_random.ts

@@ -1,6 +1,10 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node, Category, Exit } from '../../store/flow-definition.d';
 import { generateUUID } from '../../utils';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 // Helper function to create a random router with categories
 const createRandomRouter = (
@@ -47,8 +51,9 @@ 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   form: {
     categories: {
       type: 'array',
@@ -72,7 +77,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 +134,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())
@@ -155,5 +160,10 @@ export const split_by_random: NodeConfig = {
   },
   router: {
     type: 'random'
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };