@nyaruka/temba-components 0.131.2 → 0.131.3

package/src/flow/actions/say_msg.ts

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { Node, SayMsg } from '../../store/flow-definition';
 
 export const say_msg: ActionConfig = {
   name: 'Say Message',
   group: ACTION_GROUPS.send,
+  flowTypes: [FlowTypes.VOICE],
   render: (_node: Node, _action: SayMsg) => {
     // This will need to be implemented based on the actual render logic
     return html`<div>Say Message</div>`;

package/src/flow/actions/send_broadcast.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SendBroadcast } from '../../store/flow-definition';
 import { renderStringList } from '../utils';
 import { Icon } from '../../Icons';
@@ -7,6 +7,7 @@ import { Icon } from '../../Icons';
 export const send_broadcast: ActionConfig = {
   name: 'Send Broadcast',
   group: ACTION_GROUPS.broadcast,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SendBroadcast) => {
     const recipients = [
       ...(action.contacts || []).map((c) => c.name),

package/src/flow/actions/send_email.ts

@@ -3,7 +3,8 @@ import {
   ActionConfig,
   ACTION_GROUPS,
   FormData,
-  ValidationResult
+  ValidationResult,
+  FlowTypes
 } from '../types';
 import { Node, SendEmail } from '../../store/flow-definition';
 import { renderStringList } from '../utils';
@@ -12,6 +13,7 @@ import { Icon } from '../../Icons';
 export const send_email: ActionConfig = {
   name: 'Send Email',
   group: ACTION_GROUPS.broadcast,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SendEmail) => {
     return html`<div>
       <div>${renderStringList(action.addresses, Icon.email)}</div>

package/src/flow/actions/send_msg.ts

@@ -4,7 +4,8 @@ import {
   ActionConfig,
   ACTION_GROUPS,
   FormData,
-  ValidationResult
+  ValidationResult,
+  FlowTypes
 } from '../types';
 import { Node, SendMsg } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
@@ -12,13 +13,14 @@ import { titleCase } from '../../utils';
 export const send_msg: ActionConfig = {
   name: 'Send Message',
   group: ACTION_GROUPS.send,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SendMsg) => {
     const text = action.text.replace(/\n/g, '<br>');
     return html`
       ${unsafeHTML(text)}
-      ${action.quick_replies?.length > 0
+      ${(action.quick_replies || [])?.length > 0
         ? html`<div class="quick-replies">
-            ${action.quick_replies.map((reply) => {
+            ${(action.quick_replies || []).map((reply) => {
               return html`<div class="quick-reply">${reply}</div>`;
             })}
             ${action.template
@@ -225,5 +227,134 @@ export const send_msg: ActionConfig = {
       valid: Object.keys(errors).length === 0,
       errors
     };
+  },
+  localizable: ['text', 'quick_replies', 'attachments'],
+  toLocalizationFormData: (
+    action: SendMsg,
+    localization: Record<string, any>
+  ) => {
+    // Convert localized values to form data format
+    // Localized values are stored as arrays even for single values
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    // Handle text (single value, but stored as array in localization)
+    if (localization.text && Array.isArray(localization.text)) {
+      formData.text = localization.text[0] || '';
+    } else {
+      // Fall back to empty string if no localization
+      formData.text = '';
+    }
+
+    // Handle attachments (already an array)
+    if (localization.attachments && Array.isArray(localization.attachments)) {
+      formData.attachments = localization.attachments;
+    }
+
+    // Handle quick_replies (already an array)
+    if (
+      localization.quick_replies &&
+      Array.isArray(localization.quick_replies)
+    ) {
+      formData.quick_replies = localization.quick_replies.map((reply) => ({
+        name: reply,
+        value: reply
+      }));
+    }
+
+    // Extract runtime attachments from localized attachments
+    const runtimeAttachments: {
+      type: { name: string; value: string };
+      expression: string;
+    }[] = [];
+    const staticAttachments: string[] = [];
+
+    if (formData.attachments && Array.isArray(formData.attachments)) {
+      formData.attachments.forEach((attachment) => {
+        if (typeof attachment === 'string' && attachment.includes(':')) {
+          const colonIndex = attachment.indexOf(':');
+          const contentType = attachment.substring(0, colonIndex);
+          const value = attachment.substring(colonIndex + 1);
+
+          if (!contentType.includes('/')) {
+            runtimeAttachments.push({
+              type: { name: titleCase(contentType), value: contentType },
+              expression: value
+            });
+          } else {
+            staticAttachments.push(attachment);
+          }
+        }
+      });
+    }
+
+    formData.attachments = staticAttachments;
+    formData.runtime_attachments = runtimeAttachments;
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: SendMsg) => {
+    // Convert form data to localization format
+    // All values must be stored as arrays
+    const localization: Record<string, any> = {};
+
+    // Handle text (store as single-element array)
+    // Only save if not empty and different from base action
+    if (formData.text && formData.text.trim() !== '') {
+      if (formData.text !== action.text) {
+        localization.text = [formData.text];
+      }
+    }
+
+    // Handle quick_replies (store as array)
+    const quickReplies = (formData.quick_replies || [])
+      .map((reply: any) =>
+        typeof reply === 'string' ? reply : reply.value || reply.name || reply
+      )
+      .filter((reply: string) => reply && reply.trim() !== '');
+
+    // Only save if there are quick replies and different from base action
+    if (quickReplies.length > 0) {
+      if (
+        JSON.stringify(quickReplies) !==
+        JSON.stringify(action.quick_replies || [])
+      ) {
+        localization.quick_replies = quickReplies;
+      }
+    }
+
+    // Handle attachments (combine static and runtime attachments)
+    const staticAttachments = (formData.attachments || []).filter(
+      (att: string) => att && att.trim() !== ''
+    );
+    const runtimeAttachments = (formData.runtime_attachments || [])
+      .filter(
+        (item: {
+          type: [{ name: string; value: string }];
+          expression: string;
+        }) =>
+          item && item.type && item.expression && item.expression.trim() !== ''
+      )
+      .map(
+        (item: {
+          type: [{ name: string; value: string }];
+          expression: string;
+        }) => `${item.type[0].value}:${item.expression}`
+      );
+
+    const allAttachments = [...staticAttachments, ...runtimeAttachments];
+
+    // Only save if there are attachments and different from base action
+    if (allAttachments.length > 0) {
+      if (
+        JSON.stringify(allAttachments) !==
+        JSON.stringify(action.attachments || [])
+      ) {
+        localization.attachments = allAttachments;
+      }
+    }
+
+    return localization;
   }
 };

package/src/flow/actions/set_contact_channel.ts

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { Node, SetContactChannel } from '../../store/flow-definition';
 
 export const set_contact_channel: ActionConfig = {
   name: 'Update Channel',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactChannel) => {
     return html`<div>Set to <strong>${action.channel.name}</strong></div>`;
   },

package/src/flow/actions/set_contact_field.ts

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactField } from '../../store/flow-definition';
 
 export const set_contact_field: ActionConfig = {
   name: 'Update Field',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactField) => {
     if (action.value) {
       return html`<div>

package/src/flow/actions/set_contact_language.ts

@@ -3,7 +3,8 @@ import {
   ActionConfig,
   ACTION_GROUPS,
   FormData,
-  ValidationResult
+  ValidationResult,
+  FlowTypes
 } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
@@ -11,6 +12,7 @@ import { getStore } from '../../store/Store';
 export const set_contact_language: ActionConfig = {
   name: 'Update Language',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactLanguage) => {
     const languageNames = new Intl.DisplayNames(['en'], {
       type: 'language'

package/src/flow/actions/set_contact_name.ts

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactName } from '../../store/flow-definition';
 
 export const set_contact_name: ActionConfig = {
   name: 'Update Name',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactName) => {
     return html`<div>Set to <strong>${action.name}</strong></div>`;
   },

package/src/flow/actions/set_contact_status.ts

@@ -1,11 +1,12 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactStatus } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
 
 export const set_contact_status: ActionConfig = {
   name: 'Update Status',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactStatus) => {
     return html`<div>Set to <strong>${titleCase(action.status)}</strong></div>`;
   },

package/src/flow/actions/set_run_result.ts

@@ -1,11 +1,12 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetRunResult } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
 
 export const set_run_result: ActionConfig = {
   name: 'Save Flow Result',
   group: ACTION_GROUPS.save,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetRunResult) => {
     return html`<div>
       Save <strong>${action.value}</strong> as <strong>${action.name}</strong>

package/src/flow/actions/start_session.ts

@@ -3,7 +3,8 @@ import {
   ActionConfig,
   ACTION_GROUPS,
   FormData,
-  ValidationResult
+  ValidationResult,
+  FlowTypes
 } from '../types';
 import { Node, StartSession } from '../../store/flow-definition';
 import { renderNamedObjects } from '../utils';
@@ -11,6 +12,7 @@ import { renderNamedObjects } from '../utils';
 export const start_session: ActionConfig = {
   name: 'Start Flow',
   group: ACTION_GROUPS.broadcast,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: StartSession) => {
     const hasGroups = action.groups && action.groups.length > 0;
     const hasContacts = action.contacts && action.contacts.length > 0;

package/src/flow/config.ts

@@ -36,19 +36,16 @@ 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_digits } from './nodes/wait_for_digits';
-import { wait_for_image } from './nodes/wait_for_image';
-import { wait_for_location } from './nodes/wait_for_location';
 import { wait_for_menu } from './nodes/wait_for_menu';
 import { wait_for_response } from './nodes/wait_for_response';
-import { wait_for_video } from './nodes/wait_for_video';
 
 export const ACTION_CONFIG: {
   [key: string]: ActionConfig;
 } = {
+  say_msg,
+  play_audio,
   set_contact_field,
-
   send_broadcast,
   set_run_result,
   send_msg,
@@ -60,8 +57,6 @@ export const ACTION_CONFIG: {
   set_contact_channel,
   set_contact_language,
   set_contact_status,
-  say_msg,
-  play_audio,
   add_contact_urn,
   add_input_labels,
   request_optin
@@ -71,7 +66,6 @@ export const NODE_CONFIG: {
   [key: string]: NodeConfig;
 } = {
   execute_actions,
-
   split_by_contact_field,
   split_by_expression,
   split_by_groups,
@@ -84,12 +78,8 @@ export const NODE_CONFIG: {
   split_by_ticket,
   split_by_webhook,
   split_by_resthook,
-  wait_for_audio,
   wait_for_digits,
-  wait_for_image,
-  wait_for_location,
   wait_for_menu,
   wait_for_response,
-  wait_for_video,
   split_by_airtime
 };

package/src/flow/nodes/shared.ts

@@ -1,4 +1,5 @@
-import { TextFieldConfig } from '../types';
+import { FormData, TextFieldConfig } from '../types';
+import { Node } from '../../store/flow-definition';
 
 /**
  * Shared result_name field configuration for router nodes.
@@ -16,3 +17,71 @@ export const resultNameField: TextFieldConfig = {
   helpText: 'The name to use to reference this result in the flow',
   optionalLink: 'Save result as...'
 };
+
+/**
+ * Shared category localization functions for router nodes.
+ * These provide a consistent way to localize category names across all router types.
+ */
+
+/**
+ * Converts a node's categories to localization form data.
+ * @param node - The node containing categories to localize
+ * @param localization - The existing localization data for this language
+ * @returns Form data with category UUIDs mapped to original and localized names
+ */
+export function categoriesToLocalizationFormData(
+  node: Node,
+  localization: Record<string, any>
+): FormData {
+  const categories = node.router?.categories || [];
+  const localizationData: Record<string, any> = {};
+
+  categories.forEach((category: any) => {
+    const categoryUuid = category.uuid;
+    const categoryLocalization = localization[categoryUuid];
+
+    localizationData[categoryUuid] = {
+      originalName: category.name,
+      localizedName:
+        categoryLocalization && categoryLocalization.name
+          ? Array.isArray(categoryLocalization.name)
+            ? categoryLocalization.name[0] || ''
+            : categoryLocalization.name
+          : ''
+    };
+  });
+
+  return {
+    categories: localizationData
+  };
+}
+
+/**
+ * Converts localization form data back to the localization structure.
+ * @param formData - The form data containing category localizations
+ * @param _node - The original node (reserved for future validation)
+ * @returns Record mapping category UUIDs to their localization data
+ */
+export function localizationFormDataToCategories(
+  formData: FormData,
+  _node: Node
+): Record<string, any> {
+  const localizationData: Record<string, any> = {};
+
+  if (formData.categories) {
+    Object.keys(formData.categories).forEach((categoryUuid) => {
+      const categoryData = formData.categories[categoryUuid];
+      const localizedName = categoryData.localizedName?.trim() || '';
+      const originalName = categoryData.originalName?.trim() || '';
+
+      // Only save if localized name is different from original and not empty
+      if (localizedName && localizedName !== originalName) {
+        localizationData[categoryUuid] = {
+          name: [localizedName]
+        };
+      }
+    });
+  }
+
+  return localizationData;
+}

package/src/flow/nodes/split_by_airtime.ts

@@ -1,14 +1,26 @@
-import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
+import {
+  ACTION_GROUPS,
+  FormData,
+  NodeConfig,
+  FlowTypes,
+  Features
+} from '../types';
 import { TransferAirtime, Node } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
 import { CURRENCY_OPTIONS, CURRENCIES } from '../currencies';
-import { resultNameField } from './shared';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 export const split_by_airtime: NodeConfig = {
   type: 'split_by_airtime',
   name: 'Send Airtime',
   group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  features: [Features.AIRTIME],
   showAsAction: true,
   form: {
     amounts: {
@@ -238,5 +250,10 @@ export const split_by_airtime: NodeConfig = {
       router: finalRouter,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_contact_field.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,
@@ -44,6 +48,7 @@ export const split_by_contact_field: NodeConfig = {
   type: 'split_by_contact_field',
   name: 'Split by Contact Field',
   group: SPLIT_GROUPS.split,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   dialogSize: 'large',
   form: {
     field: {
@@ -185,5 +190,10 @@ export const split_by_contact_field: NodeConfig = {
   },
   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,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,
@@ -17,6 +21,7 @@ export const split_by_expression: NodeConfig = {
   type: 'split_by_expression',
   name: 'Split by Expression',
   group: SPLIT_GROUPS.split,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   dialogSize: 'large',
   form: {
     operand: {
@@ -95,5 +100,10 @@ export const split_by_expression: NodeConfig = {
       router: finalRouter,
       exits: exits
     };
-  }
+  },
+
+  // Localization support for categories
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/split_by_groups.ts

@@ -1,7 +1,11 @@
-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 { resultNameField } from './shared';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
 
 // Helper function to create a switch router with group cases
 const createGroupRouter = (
@@ -94,6 +98,7 @@ export const split_by_groups: NodeConfig = {
   type: 'split_by_groups',
   name: 'Split by Group',
   group: SPLIT_GROUPS.split,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   form: {
     groups: {
       type: 'select',
@@ -197,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

@@ -1,7 +1,8 @@
-import { NodeConfig, ACTION_GROUPS } from '../types';
+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
+  group: ACTION_GROUPS.services,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND]
 };

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