@nyaruka/temba-components 0.131.2 → 0.132.0

package/src/flow/nodes/split_by_llm.ts

@@ -1,12 +1,24 @@
-import { ACTION_GROUPS, FormData, 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',
   group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  features: [Features.AI],
   showAsAction: true,
   render: (node: Node) => {
     const callLlmAction = node.actions?.find(
@@ -117,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,18 @@
-import { FormData, NodeConfig, ACTION_GROUPS } from '../types';
+import { FormData, NodeConfig, ACTION_GROUPS, 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',
   group: ACTION_GROUPS.services,
+  flowTypes: [],
+  features: [Features.AI],
   form: {
     llm: {
       type: 'select',
@@ -171,5 +177,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 { SPLIT_GROUPS, FormData, 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 = (
@@ -49,6 +53,7 @@ export const split_by_random: NodeConfig = {
   type: 'split_by_random',
   name: 'Random Split',
   group: SPLIT_GROUPS.split,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   form: {
     categories: {
       type: 'array',
@@ -155,5 +160,10 @@ export const split_by_random: NodeConfig = {
   },
   router: {
     type: 'random'
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_resthook.ts

@@ -1,13 +1,18 @@
-import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { CallResthook, Node } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
-import { resultNameField } from './shared';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 export const split_by_resthook: NodeConfig = {
   type: 'split_by_resthook',
   name: 'Call Resthook',
   group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   showAsAction: true,
   form: {
     resthook: {
@@ -126,5 +131,10 @@ export const split_by_resthook: NodeConfig = {
       router: finalRouter,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_run_result.ts

@@ -1,4 +1,4 @@
-import { SPLIT_GROUPS, FormData, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node } from '../../store/flow-definition';
 import { createRulesRouter } from '../../utils';
 import {
@@ -6,7 +6,11 @@ import {
   operatorsToSelectOptions,
   getOperatorConfig
 } from '../operators';
-import { resultNameField } from './shared';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 import {
   createRulesArrayConfig,
   extractUserRules,
@@ -49,7 +53,9 @@ const DELIMIT_BY_OPTIONS = [
 export const split_by_run_result: NodeConfig = {
   type: 'split_by_run_result',
   name: 'Split by Result',
+  aliases: ['split_by_run_result_delimited'], // backwards compatibility with old flow editor
   group: SPLIT_GROUPS.split,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   dialogSize: 'large',
   form: {
     result: {
@@ -248,6 +254,17 @@ export const split_by_run_result: NodeConfig = {
       config.delimiter = delimitBy;
     }
 
+    // Set the type based on whether delimiter is configured
+    // Use split_by_run_result_delimited for backward compatibility with old editor
+    config.type = hasDelimiter
+      ? 'split_by_run_result_delimited'
+      : 'split_by_run_result';
+
     return config;
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_scheme.ts

@@ -1,8 +1,12 @@
-import { SPLIT_GROUPS, FormData, 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 { SCHEMES } from '../utils';
-import { resultNameField } from './shared';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 // Helper function to get scheme options for the select dropdown
 const getSchemeOptions = () => {
@@ -106,6 +110,7 @@ export const split_by_scheme: NodeConfig = {
   type: 'split_by_scheme',
   name: 'Split by URN Type',
   group: SPLIT_GROUPS.split,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   form: {
     schemes: {
       type: 'select',
@@ -193,5 +198,10 @@ export const split_by_scheme: NodeConfig = {
   router: {
     type: 'switch',
     operand: '@(urn_parts(contact.urn).scheme)'
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_subflow.ts

@@ -1,13 +1,18 @@
-import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node } from '../../store/flow-definition';
 import { generateUUID } from '../../utils';
 import { html } from 'lit';
 import { renderNamedObjects } from '../utils';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 export const split_by_subflow: NodeConfig = {
   type: 'split_by_subflow',
   name: 'Enter a Flow',
   group: ACTION_GROUPS.trigger,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   showAsAction: true,
   form: {
     flow: {
@@ -157,5 +162,10 @@ export const split_by_subflow: NodeConfig = {
       router: router,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_ticket.ts

@@ -1,12 +1,17 @@
-import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node, OpenTicket } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 export const split_by_ticket: NodeConfig = {
   type: 'split_by_ticket',
   name: 'Open Ticket',
   group: ACTION_GROUPS.trigger,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   showAsAction: true,
   form: {
     topic: {
@@ -138,5 +143,10 @@ export const split_by_ticket: NodeConfig = {
       router: router,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_webhook.ts

@@ -1,7 +1,11 @@
-import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { CallWebhook, Node } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 const defaultPost = `@(json(object(
   "contact", object(
@@ -20,6 +24,7 @@ export const split_by_webhook: NodeConfig = {
   type: 'split_by_webhook',
   name: 'Call Webhook',
   group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   showAsAction: true,
   form: {
     method: {
@@ -189,5 +194,10 @@ export const split_by_webhook: NodeConfig = {
       router: router,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/wait_for_digits.ts

@@ -1,7 +1,8 @@
-import { SPLIT_GROUPS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig, FlowTypes } from '../types';
 
 export const wait_for_digits: NodeConfig = {
   type: 'wait_for_digits',
   name: 'Wait for Digits',
-  group: SPLIT_GROUPS.wait
+  group: SPLIT_GROUPS.wait,
+  flowTypes: [FlowTypes.VOICE]
 };

package/src/flow/nodes/wait_for_menu.ts

@@ -1,7 +1,8 @@
-import { SPLIT_GROUPS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig, FlowTypes } from '../types';
 
 export const wait_for_menu: NodeConfig = {
   type: 'wait_for_menu',
   name: 'Wait for Menu Selection',
-  group: SPLIT_GROUPS.wait
+  group: SPLIT_GROUPS.wait,
+  flowTypes: [FlowTypes.VOICE]
 };

package/src/flow/nodes/wait_for_response.ts

@@ -1,4 +1,4 @@
-import { SPLIT_GROUPS, FormData, NodeConfig } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node, Category, Exit, Case } from '../../store/flow-definition';
 import { generateUUID, createRulesRouter } from '../../utils';
 import {
@@ -6,7 +6,11 @@ import {
   operatorsToSelectOptions,
   getOperatorConfig
 } from '../operators';
-import { resultNameField } from './shared';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 import {
   createRulesArrayConfig,
   extractUserRules,
@@ -77,6 +81,7 @@ export const wait_for_response: NodeConfig = {
   type: 'wait_for_response',
   name: 'Wait for Response',
   group: SPLIT_GROUPS.wait,
+  flowTypes: [FlowTypes.MESSAGE],
   dialogSize: 'large',
   form: {
     rules: createRulesArrayConfig(
@@ -390,5 +395,10 @@ export const wait_for_response: NodeConfig = {
       router: finalRouter,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/types.ts

@@ -6,6 +6,27 @@ export interface ValidationResult {
   errors: { [key: string]: string };
 }
 
+/**
+ * Flow types - defines the type of flow being edited
+ */
+export const FlowTypes = {
+  MESSAGE: 'message',
+  VOICE: 'voice',
+  BACKGROUND: 'background'
+} as const;
+
+export type FlowType = (typeof FlowTypes)[keyof typeof FlowTypes];
+
+/**
+ * Features - defines the features available in the account
+ */
+export const Features = {
+  AI: 'ai',
+  AIRTIME: 'airtime'
+} as const;
+
+export type Feature = (typeof Features)[keyof typeof Features];
+
 // Component attribute interfaces - these define what's allowed for each component type
 export interface TextInputAttributes {
   type?: 'text' | 'email' | 'number' | 'url' | 'tel';
@@ -78,10 +99,13 @@ export interface FormConfig {
 export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
+  aliases?: string[]; // alternate type names for backwards compatibility (won't show in selector)
   group?: ActionGroup | SplitGroup; // Nodes can use either when showAsAction is true
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   action?: ActionConfig;
   showAsAction?: boolean; // if true, show in action dialog instead of splits (default: false - nodes show in splits)
+  flowTypes?: FlowType[]; // which flow types this node is available for (defaults to all if not specified)
+  features?: Feature[]; // which features are required for this node (all must be present)
   router?: {
     type: 'switch' | 'random';
     defaultCategory?: string;
@@ -104,6 +128,17 @@ export interface NodeConfig extends FormConfig {
   toUIConfig?: (formData: FormData) => Record<string, any>;
   render?: (node: Node, nodeUI?: any) => TemplateResult;
   renderTitle?: (node: Node, nodeUI?: NodeUI) => TemplateResult;
+
+  // Localization support for router categories
+  localizable?: 'categories'; // Only categories are localizable for routers
+  toLocalizationFormData?: (
+    node: Node,
+    localization: Record<string, any>
+  ) => FormData;
+  fromLocalizationFormData?: (
+    formData: FormData,
+    node: Node
+  ) => Record<string, any>;
 }
 
 // New field configuration system for generic form generation
@@ -350,10 +385,13 @@ export const SPLIT_GROUP_METADATA: Record<SplitGroup, GroupMetadata> = {
 
 export interface ActionConfig extends FormConfig {
   name: string;
+  aliases?: string[]; // alternate type names for backwards compatibility (won't show in selector)
   group: ActionGroup;
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   evaluated?: string[];
   hideFromActions?: boolean; // if true, don't show in action dialog (default: false - actions show in actions)
+  flowTypes?: FlowType[]; // which flow types this action is available for (defaults to all if not specified)
+  features?: Feature[]; // which features are required for this action (all must be present)
   render?: (node: any, action: any) => TemplateResult;
 
   form?: Record<string, FieldConfig>;
@@ -362,4 +400,15 @@ export interface ActionConfig extends FormConfig {
 
   toFormData?: (action: Action) => FormData;
   fromFormData?: (formData: FormData) => Action;
+
+  // Localization support
+  localizable?: string[]; // array of field names that can be localized
+  toLocalizationFormData?: (
+    action: Action,
+    localization: Record<string, any>
+  ) => FormData;
+  fromLocalizationFormData?: (
+    formData: FormData,
+    action: Action
+  ) => Record<string, any>;
 }