@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/locales/fr.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/locales/locale-codes.ts

@@ -10,9 +10,18 @@ export const sourceLocale = `en`;
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export const targetLocales = [`es`, `fr`, `pt`] as const;
+export const targetLocales = [
+  `es`,
+  `fr`,
+  `pt`,
+] as const;
 
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export const allLocales = [`en`, `es`, `fr`, `pt`] as const;
+export const allLocales = [
+  `en`,
+  `es`,
+  `fr`,
+  `pt`,
+] as const;

package/src/locales/pt.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/store/AppState.ts

@@ -6,6 +6,7 @@ import {
   FlowDefinition,
   FlowPosition,
   Node,
+  NodeUI,
   Router,
   StickyNote
 } from './flow-definition';
@@ -95,6 +96,7 @@ export interface AppState {
     uuid: string,
     node: { actions: Action[]; uuid: string; exits: Exit[]; router?: Router }
   ): unknown;
+  updateNodeUIConfig(uuid: string, config: Record<string, any>): unknown;
   updateConnection(
     nodeUuid: string,
     exitUuid: string,
@@ -105,6 +107,19 @@ export interface AppState {
   removeStickyNotes: (uuids: string[]) => void;
   updateStickyNote(uuid: string, sticky: StickyNote): void;
   createStickyNote(position: FlowPosition): string;
+  createNode(nodeType: string, position: FlowPosition): string;
+  addNode(node: Node, nodeUI: NodeUI): void;
+  updateLocalization(
+    languageCode: string,
+    actionUuid: string,
+    localizationData: Record<string, any>
+  ): void;
+  setTranslationFilters: (filters: { categories: boolean }) => void;
+  markAutoTranslated: (
+    languageCode: string,
+    uuid: string,
+    attributes: string[]
+  ) => void;
 }
 
 export const zustand = createStore<AppState>()(
@@ -290,6 +305,18 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      updateNodeUIConfig: (uuid: string, config: Record<string, any>) => {
+        set((state: AppState) => {
+          if (state.flowDefinition._ui.nodes[uuid]) {
+            if (!state.flowDefinition._ui.nodes[uuid].config) {
+              state.flowDefinition._ui.nodes[uuid].config = {};
+            }
+            Object.assign(state.flowDefinition._ui.nodes[uuid].config, config);
+          }
+          state.dirtyDate = new Date();
+        });
+      },
+
       updateConnection: (
         nodeUuid: string,
         exitUuid: string,
@@ -338,6 +365,152 @@ export const zustand = createStore<AppState>()(
           state.dirtyDate = new Date();
         });
         return uuid;
+      },
+
+      createNode: (nodeType: string, position: FlowPosition): string => {
+        const uuid = generateUUID();
+        const exitUuid = generateUUID();
+
+        set((state: AppState) => {
+          // Create a basic node with a single exit
+          const newNode: Node = {
+            uuid,
+            actions: [],
+            exits: [
+              {
+                uuid: exitUuid,
+                destination_uuid: null
+              }
+            ]
+          };
+
+          // Add the node to the flow definition
+          state.flowDefinition.nodes.push(newNode);
+
+          // Set up UI for the node
+          if (!state.flowDefinition._ui.nodes) {
+            state.flowDefinition._ui.nodes = {};
+          }
+
+          state.flowDefinition._ui.nodes[uuid] = {
+            position,
+            type: nodeType as any,
+            config: {}
+          };
+
+          state.dirtyDate = new Date();
+        });
+
+        return uuid;
+      },
+
+      addNode: (node: Node, nodeUI: NodeUI) => {
+        set((state: AppState) => {
+          // Add the node to the flow definition
+          state.flowDefinition.nodes.push(node);
+
+          // Set up UI for the node
+          if (!state.flowDefinition._ui.nodes) {
+            state.flowDefinition._ui.nodes = {};
+          }
+
+          state.flowDefinition._ui.nodes[node.uuid] = nodeUI;
+
+          state.dirtyDate = new Date();
+        });
+      },
+
+      updateLocalization: (
+        languageCode: string,
+        actionUuid: string,
+        localizationData: Record<string, any>
+      ) => {
+        set((state: AppState) => {
+          // Initialize localization structure if it doesn't exist
+          if (!state.flowDefinition.localization) {
+            state.flowDefinition.localization = {};
+          }
+
+          if (!state.flowDefinition.localization[languageCode]) {
+            state.flowDefinition.localization[languageCode] = {};
+          }
+
+          // Update or remove the localization for this action
+          if (Object.keys(localizationData).length > 0) {
+            state.flowDefinition.localization[languageCode][actionUuid] =
+              localizationData;
+          } else {
+            // If no localized values, remove the entry
+            delete state.flowDefinition.localization[languageCode][actionUuid];
+          }
+
+          // Clean up empty language sections
+          if (
+            Object.keys(state.flowDefinition.localization[languageCode])
+              .length === 0
+          ) {
+            delete state.flowDefinition.localization[languageCode];
+          }
+
+          // Clean up empty localization object
+          if (Object.keys(state.flowDefinition.localization).length === 0) {
+            delete state.flowDefinition.localization;
+          }
+
+          state.dirtyDate = new Date();
+        });
+      },
+
+      setTranslationFilters: (filters: { categories: boolean }) => {
+        set((state: AppState) => {
+          if (!state.flowDefinition?._ui) {
+            return;
+          }
+
+          const currentFilters = state.flowDefinition._ui
+            .translation_filters || {
+            categories: false
+          };
+
+          state.flowDefinition._ui.translation_filters = {
+            ...currentFilters,
+            categories: !!filters.categories
+          };
+
+          state.dirtyDate = new Date();
+        });
+      },
+
+      markAutoTranslated: (
+        languageCode: string,
+        uuid: string,
+        attributes: string[]
+      ) => {
+        set((state: AppState) => {
+          if (!state.flowDefinition?._ui) {
+            return;
+          }
+
+          if (!state.flowDefinition._ui.auto_translations) {
+            state.flowDefinition._ui.auto_translations = {};
+          }
+
+          if (!state.flowDefinition._ui.auto_translations[languageCode]) {
+            state.flowDefinition._ui.auto_translations[languageCode] = {};
+          }
+
+          const existing =
+            state.flowDefinition._ui.auto_translations[languageCode][uuid] ||
+            [];
+
+          const merged = Array.from(
+            new Set([...existing, ...(attributes || [])])
+          );
+
+          state.flowDefinition._ui.auto_translations[languageCode][uuid] =
+            merged;
+          state.dirtyDate = new Date();
+        });
       }
     }))
   )

package/src/store/flow-definition.d.ts

@@ -147,6 +147,7 @@ export interface SendBroadcast extends Action {
   text: string;
   groups: Group[];
   contacts: NamedObject[];
+  attachments?: string[];
 }
 
 export interface EnterFlow extends Action {
@@ -161,26 +162,22 @@ export interface StartSession extends Action {
 }
 
 export interface TransferAirtime extends Action {
-  amounts: number[];
-  result_name: string;
+  amounts: Record<string, number>;
 }
 
 export interface CallClassifier extends Action {
   classifier: NamedObject;
   input: string;
-  result_name: string;
 }
 
 export interface CallResthook extends Action {
   resthook: string;
-  result_name: string;
 }
 
 export interface CallLLM extends Action {
   llm: NamedObject;
   instructions: string;
   input: string;
-  result_name?: string;
   output_local?: string;
 }
 

package/src/utils.ts

@@ -514,18 +514,6 @@ export class Stubbable {
 
 export const stubbable = new Stubbable();
 
-export const spreadAttributes = (obj): TemplateResult[] => {
-  return Object.entries(obj).map(([key, value]) => {
-    if (key.startsWith('@')) {
-      return html`@${key.slice(1)}=${value}`;
-    } else if (key.startsWith('.')) {
-      return html`.${key.slice(1)}=${value}`;
-    } else {
-      return html`${key}=${value}`;
-    }
-  });
-};
-
 export const timeSince = (
   date: Date,
   options: { compareDate?: Date; hideRecentText?: boolean; suffix?: string } = {
@@ -1125,6 +1113,338 @@ export const createMultiCategoryRouter = (
   };
 };
 
+// Helper function to check if a category is a system category
+export const isSystemCategory = (categoryName: string): boolean => {
+  return ['No Response', 'Other', 'All Responses', 'Timeout'].includes(
+    categoryName
+  );
+};
+
+// Helper function to check if a UUID belongs to a system category
+export const isSystemCategoryUuid = (
+  uuid: string,
+  categories: any[]
+): boolean => {
+  const category = categories.find((cat) => cat.uuid === uuid);
+  return category ? isSystemCategory(category.name) : false;
+};
+
+// Helper function to generate default category name based on operator and operands
+export const generateDefaultCategoryName = (
+  operator: string,
+  getOperatorConfig: (type: string) => any | undefined,
+  value1?: string,
+  value2?: string
+): string => {
+  const operatorConfig = getOperatorConfig(operator);
+  if (!operatorConfig) return '';
+
+  // Fixed category names (no operands)
+  if (operatorConfig.operands === 0) {
+    return operatorConfig.categoryName || '';
+  }
+
+  // Dynamic category names based on operands
+  const cleanValue1 = (value1 || '').trim();
+  const cleanValue2 = (value2 || '').trim();
+
+  // Helper to capitalize first letter
+  const capitalize = (str: string) => {
+    if (!str) return '';
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  };
+
+  // Handle different operator types
+  switch (operator) {
+    // Word/phrase operators - capitalize first letter of value
+    case 'has_any_word':
+    case 'has_all_words':
+    case 'has_phrase':
+    case 'has_only_phrase':
+    case 'has_beginning':
+      return cleanValue1 ? capitalize(cleanValue1) : '';
+
+    // Pattern operators - show as-is
+    case 'has_pattern':
+      return cleanValue1;
+
+    // Number comparison operators - include symbol
+    case 'has_number_eq':
+      return cleanValue1 ? `= ${cleanValue1}` : '';
+    case 'has_number_lt':
+      return cleanValue1 ? `< ${cleanValue1}` : '';
+    case 'has_number_lte':
+      return cleanValue1 ? `≤ ${cleanValue1}` : '';
+    case 'has_number_gt':
+      return cleanValue1 ? `> ${cleanValue1}` : '';
+    case 'has_number_gte':
+      return cleanValue1 ? `≥ ${cleanValue1}` : '';
+
+    // Number between - range format
+    case 'has_number_between':
+      if (cleanValue1 && cleanValue2) {
+        return `${cleanValue1} - ${cleanValue2}`;
+      }
+      return '';
+
+    // Date operators - format with relative expressions
+    case 'has_date_lt':
+    case 'has_date_lte':
+      if (cleanValue1) {
+        // Parse relative date expression (e.g., "today + 5" or "today - 3")
+        const match = cleanValue1.match(/^(today)\s*([+-])\s*(\d+)$/i);
+        if (match) {
+          const [, base, operator, days] = match;
+          const dayWord = days === '1' ? 'day' : 'days';
+          return `Before ${base} ${operator} ${days} ${dayWord}`;
+        }
+        // Fallback for other date formats
+        return `Before ${cleanValue1}`;
+      }
+      return '';
+
+    case 'has_date_gt':
+    case 'has_date_gte':
+      if (cleanValue1) {
+        // Parse relative date expression
+        const match = cleanValue1.match(/^(today)\s*([+-])\s*(\d+)$/i);
+        if (match) {
+          const [, base, operator, days] = match;
+          const dayWord = days === '1' ? 'day' : 'days';
+          return `After ${base} ${operator} ${days} ${dayWord}`;
+        }
+        // Fallback for other date formats
+        return `After ${cleanValue1}`;
+      }
+      return '';
+
+    case 'has_date_eq':
+      if (cleanValue1) {
+        // Parse relative date expression
+        const match = cleanValue1.match(/^(today)\s*([+-])\s*(\d+)$/i);
+        if (match) {
+          const [, base, operator, days] = match;
+          const dayWord = days === '1' ? 'day' : 'days';
+          return `${base} ${operator} ${days} ${dayWord}`;
+        }
+        return cleanValue1;
+      }
+      return '';
+
+    default:
+      // Fallback - capitalize first value
+      return cleanValue1 ? capitalize(cleanValue1) : '';
+  }
+};
+
+// Helper function to create a rules-based router (used by wait_for_response and split_by_expression)
+export const createRulesRouter = (
+  operand: string,
+  userRules: any[],
+  getOperatorConfig: (type: string) => any | undefined,
+  existingCategories: any[] = [],
+  existingExits: any[] = [],
+  existingCases: any[] = []
+) => {
+  const categories: RouterCategory[] = [];
+  const exits: RouterExit[] = [];
+  const cases: RouterCase[] = [];
+
+  // Filter existing categories to get only user-defined rules (exclude system categories)
+  const existingUserCategories = existingCategories.filter(
+    (cat) => !isSystemCategory(cat.name)
+  );
+
+  // Track categories as we create them (case-insensitive lookup)
+  const createdCategories = new Map<
+    string,
+    { uuid: string; name: string; exit_uuid: string }
+  >();
+
+  // Process rules in their original order to preserve rule order
+  userRules.forEach((rule, ruleIndex) => {
+    const categoryKey = rule.category.trim().toLowerCase();
+    const categoryName = rule.category.trim(); // Use original casing
+
+    let categoryInfo = createdCategories.get(categoryKey);
+
+    if (!categoryInfo) {
+      // First time seeing this category - create it
+
+      // Smart category matching: try by name first, then fall back to position
+      let existingCategory = existingUserCategories.find(
+        (cat) => cat.name.toLowerCase() === categoryKey
+      );
+
+      // If no match by name, try by position (for category rename scenarios)
+      const categoryCreationOrder = Array.from(createdCategories.keys()).length;
+      if (
+        !existingCategory &&
+        categoryCreationOrder < existingUserCategories.length
+      ) {
+        const candidateCategory = existingUserCategories[categoryCreationOrder];
+        // Double-check that this candidate is not a system category UUID
+        if (
+          candidateCategory &&
+          !isSystemCategoryUuid(candidateCategory.uuid, existingCategories)
+        ) {
+          existingCategory = candidateCategory;
+        }
+      }
+
+      const existingExit = existingCategory
+        ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+        : null;
+
+      // Generate UUIDs, ensuring we don't reuse system category UUIDs
+      let exitUuid = existingExit?.uuid || generateUUID();
+      let categoryUuid = existingCategory?.uuid || generateUUID();
+
+      // Additional safety check: if somehow we got a system category UUID, generate new ones
+      if (isSystemCategoryUuid(categoryUuid, existingCategories)) {
+        categoryUuid = generateUUID();
+        exitUuid = generateUUID();
+      }
+
+      categoryInfo = {
+        uuid: categoryUuid,
+        name: categoryName,
+        exit_uuid: exitUuid
+      };
+
+      createdCategories.set(categoryKey, categoryInfo);
+
+      // Add category and exit
+      categories.push({
+        uuid: categoryUuid,
+        name: categoryName,
+        exit_uuid: exitUuid
+      });
+
+      exits.push({
+        uuid: exitUuid,
+        destination_uuid: existingExit?.destination_uuid || null
+      });
+    }
+
+    // Create case for this rule
+    let existingCase = existingCases[ruleIndex];
+
+    // If we can't find by position, try to find by matching rule content
+    if (!existingCase && existingCases.length > 0) {
+      existingCase = existingCases.find((case_) => {
+        // Find the category for this case
+        const caseCategory = existingCategories.find(
+          (cat) => cat.uuid === case_.category_uuid
+        );
+
+        // Match by operator type and category name
+        return (
+          case_.type === rule.operator &&
+          caseCategory?.name.toLowerCase() === categoryKey
+        );
+      });
+    }
+
+    const caseUuid = existingCase?.uuid || generateUUID();
+
+    // Parse rule value based on operator configuration
+    const operatorConfig = getOperatorConfig(rule.operator);
+    let arguments_: string[] = [];
+
+    if (operatorConfig) {
+      if (operatorConfig.operands === 0) {
+        // No operands needed
+        arguments_ = [];
+      } else if (operatorConfig.operands === 2) {
+        // Split value for two operands (e.g., "1 10" for between)
+        arguments_ = rule.value.split(' ').filter((arg: string) => arg.trim());
+      } else {
+        // Single operand - but split words for operators that expect multiple words
+        if (rule.value && rule.value.trim()) {
+          // Split on spaces and filter out empty strings
+          arguments_ = rule.value
+            .trim()
+            .split(/\s+/)
+            .filter((arg: string) => arg.length > 0);
+        } else {
+          arguments_ = [];
+        }
+      }
+    } else {
+      // Fallback for unknown operators - split on spaces if value exists
+      if (rule.value && rule.value.trim()) {
+        arguments_ = rule.value
+          .trim()
+          .split(/\s+/)
+          .filter((arg: string) => arg.length > 0);
+      } else {
+        arguments_ = [];
+      }
+    }
+
+    cases.push({
+      uuid: caseUuid,
+      type: rule.operator,
+      arguments: arguments_,
+      category_uuid: categoryInfo.uuid
+    });
+  });
+
+  // Add default category (always present)
+  // Name is "Other" if there are user rules, "All Responses" if there are no user rules
+  const defaultCategoryName = userRules.length > 0 ? 'Other' : 'All Responses';
+
+  // Try to find existing default category by name (prefer exact match)
+  let existingDefaultCategory = existingCategories.find(
+    (cat) => cat.name === defaultCategoryName
+  );
+
+  // If no exact match, try to find the other possible default category name
+  if (!existingDefaultCategory) {
+    const alternateName = userRules.length > 0 ? 'All Responses' : 'Other';
+    existingDefaultCategory = existingCategories.find(
+      (cat) => cat.name === alternateName
+    );
+  }
+
+  const existingDefaultExit = existingDefaultCategory
+    ? existingExits.find(
+        (exit) => exit.uuid === existingDefaultCategory.exit_uuid
+      )
+    : null;
+
+  const defaultExitUuid = existingDefaultExit?.uuid || generateUUID();
+  const defaultCategoryUuid = existingDefaultCategory?.uuid || generateUUID();
+
+  categories.push({
+    uuid: defaultCategoryUuid,
+    name: defaultCategoryName,
+    exit_uuid: defaultExitUuid
+  });
+
+  exits.push({
+    uuid: defaultExitUuid,
+    destination_uuid: existingDefaultExit?.destination_uuid || null
+  });
+
+  // Find the default category (either "Other" or "All Responses")
+  const defaultCategory = categories.find(
+    (cat) => cat.name === 'Other' || cat.name === 'All Responses'
+  );
+
+  return {
+    router: {
+      type: 'switch' as const,
+      categories: categories,
+      default_category_uuid: defaultCategory?.uuid,
+      operand: operand,
+      cases: cases
+    },
+    exits: exits
+  };
+};
+
 export const titleCase = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 };